@bolio-ui/core 3.0.0-alpha.1 → 3.0.0

package/esm/chunk-FSO65ZAH.js

@@ -0,0 +1,249 @@
+import {
+  getColors
+} from "./chunk-KBZEYKCZ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  joinClasses,
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Mention/Mention.tsx
+import React, {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Mention/Mention.module.css.bolio-css-module-source
+var Mention_module_css_default = { "mention": "Mention-module_mention__R3-5t", "field": "Mention-module_field__U5FXf", "list": "Mention-module_list__QQ5RM", "empty": "Mention-module_empty__YkZOO", "option": "Mention-module_option__8CupI", "active": "Mention-module_active__8GmDl", "disabled": "Mention-module_disabled__4PL94" };
+
+// core/Mention/Mention.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var getLabel = (option) => {
+  var _a;
+  return (_a = option.label) != null ? _a : option.value;
+};
+var escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+var MentionComponent = React.forwardRef(
+  ({
+    options,
+    trigger = "@",
+    value: customValue,
+    initialValue = "",
+    onChange,
+    onSelect,
+    placeholder,
+    rows = 3,
+    disabled = false,
+    type = "default",
+    emptyText = "No results",
+    className = "",
+    onKeyDown,
+    onBlur,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const surface = getSurface(theme);
+    const { SCALES } = use_scale_default();
+    const colors = getColors(theme.palette, type, disabled, {});
+    const baseId = useId();
+    const listId = `${baseId}-list`;
+    const optionId = (index) => `${baseId}-option-${index}`;
+    const field = useRef(null);
+    const setRef = (node) => {
+      field.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const isControlled = customValue !== void 0;
+    const [selfValue, setSelfValue] = useState(initialValue);
+    const text = isControlled ? customValue : selfValue;
+    const [caret, setCaret] = useState(text.length);
+    const [dismissed, setDismissed] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const pendingCaret = useRef(null);
+    const token = useMemo(() => {
+      const t = escapeRegExp(trigger);
+      const match = new RegExp(`(^|\\s)${t}([^\\s${t}]*)$`).exec(
+        text.slice(0, caret)
+      );
+      return match ? { query: match[2], start: caret - match[2].length - trigger.length } : null;
+    }, [text, caret, trigger]);
+    const visible = useMemo(
+      () => token ? options.filter(
+        (option) => getLabel(option).toLowerCase().includes(token.query.toLowerCase())
+      ) : [],
+      [options, token]
+    );
+    const open = !!token && !dismissed && !disabled;
+    const expanded = open && visible.length > 0;
+    useEffect(() => {
+      setActiveIndex(
+        open ? visible.findIndex((option) => !option.disabled) : -1
+      );
+    }, [open, token == null ? void 0 : token.query]);
+    useEffect(() => {
+      var _a, _b;
+      if (activeIndex < 0) return;
+      (_b = (_a = document.getElementById(optionId(activeIndex))) == null ? void 0 : _a.scrollIntoView) == null ? void 0 : _b.call(_a, { block: "nearest" });
+    }, [activeIndex]);
+    useLayoutEffect(() => {
+      if (pendingCaret.current === null || !field.current) return;
+      field.current.setSelectionRange(
+        pendingCaret.current,
+        pendingCaret.current
+      );
+      pendingCaret.current = null;
+    }, [text]);
+    const update = (next) => {
+      if (!isControlled) setSelfValue(next);
+      if (onChange) onChange(next);
+    };
+    const choose = (option) => {
+      if (option.disabled || !token) return;
+      const inserted = `${trigger}${option.value} `;
+      const next = text.slice(0, token.start) + inserted + text.slice(caret);
+      const position = token.start + inserted.length;
+      pendingCaret.current = position;
+      setCaret(position);
+      update(next);
+      if (onSelect) onSelect(option);
+    };
+    const changeHandler = (event) => {
+      setCaret(event.target.selectionStart);
+      setDismissed(false);
+      update(event.target.value);
+    };
+    const move = (direction) => {
+      const count = visible.length;
+      let index = activeIndex;
+      for (let step = 0; step < count; step++) {
+        index = (index + direction + count) % count;
+        if (!visible[index].disabled) return setActiveIndex(index);
+      }
+    };
+    const keyDownHandler = (event) => {
+      if (onKeyDown) onKeyDown(event);
+      if (event.defaultPrevented || !expanded) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        move(event.key === "ArrowDown" ? 1 : -1);
+      } else if ((event.key === "Enter" || event.key === "Tab") && activeIndex >= 0) {
+        event.preventDefault();
+        choose(visible[activeIndex]);
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        setDismissed(true);
+      }
+    };
+    const syncCaret = (event) => {
+      const next = event.currentTarget.selectionStart;
+      if (next !== caret) {
+        setCaret(next);
+        setDismissed(false);
+      }
+    };
+    const blurHandler = (event) => {
+      if (onBlur) onBlur(event);
+      setDismissed(true);
+    };
+    const mentionStyle = {
+      "--mention-font-size": SCALES.font(0.875),
+      "--mention-width": SCALES.width(1, "100%"),
+      "--mention-height": SCALES.height(1, "auto"),
+      "--mention-margin-top": SCALES.mt(0),
+      "--mention-margin-right": SCALES.mr(0),
+      "--mention-margin-bottom": SCALES.mb(0),
+      "--mention-margin-left": SCALES.ml(0),
+      "--mention-text-color": theme.palette.foreground,
+      "--mention-bg": surface.bg,
+      "--mention-border-color": theme.palette.border,
+      "--mention-radius": theme.layout.radius,
+      "--mention-field-color": colors.color,
+      "--mention-field-bg": colors.bgColor,
+      "--mention-field-border": colors.borderColor,
+      "--mention-field-hover-bg": colors.hoverBgColor,
+      "--mention-field-hover-border": colors.hoverBorder,
+      "--mention-focus-border-color": colors.focusBorder,
+      "--mention-placeholder-color": colors.placeholderColor,
+      "--mention-shadow": surface.shadow,
+      "--mention-active-bg": surface.hover,
+      "--mention-empty-color": theme.palette.accents_5,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: use_classes_default(Mention_module_css_default.mention, className),
+        style: mentionStyle,
+        children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: setRef,
+              "aria-autocomplete": "list",
+              "aria-controls": expanded ? listId : void 0,
+              "aria-activedescendant": expanded && activeIndex >= 0 ? optionId(activeIndex) : void 0,
+              value: text,
+              rows,
+              placeholder,
+              disabled,
+              onChange: changeHandler,
+              onKeyDown: keyDownHandler,
+              onKeyUp: syncCaret,
+              onClick: syncCaret,
+              onSelect: syncCaret,
+              onBlur: blurHandler,
+              className: Mention_module_css_default.field,
+              ...props
+            }
+          ),
+          expanded && /* @__PURE__ */ jsx("ul", { id: listId, role: "listbox", className: Mention_module_css_default.list, children: visible.map((option, index) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              id: optionId(index),
+              role: "option",
+              "aria-selected": index === activeIndex,
+              "aria-disabled": option.disabled || void 0,
+              className: joinClasses(Mention_module_css_default.option, {
+                [Mention_module_css_default.active]: index === activeIndex,
+                [Mention_module_css_default.disabled]: option.disabled
+              }),
+              onMouseDown: (event) => {
+                event.preventDefault();
+                choose(option);
+              },
+              onMouseMove: () => !option.disabled && setActiveIndex(index),
+              children: getLabel(option)
+            },
+            option.value
+          )) }),
+          open && visible.length === 0 && /* @__PURE__ */ jsx("div", { className: Mention_module_css_default.empty, children: emptyText })
+        ]
+      }
+    );
+  }
+);
+MentionComponent.displayName = "BolioUIMention";
+var Mention = with_scale_default(MentionComponent);
+var Mention_default = Mention;
+
+// core/Mention/index.ts
+var Mention_default2 = Mention_default;
+
+export {
+  Mention_default2 as Mention_default
+};

package/esm/{chunk-2EYJZXS4.js → chunk-ICACLCJR.js}

@@ -6,10 +6,13 @@ import {
   fromISO,
   startOfDay,
   toISO
-} from "./chunk-P245HSVB.js";
+} from "./chunk-TLVSZCKU.js";
 import {
   use_click_away_default
 } from "./chunk-DGXZP4VJ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -52,6 +55,7 @@ var DatePickerComponent = React.forwardRef(
     ...props
   }, ref) => {
     const theme = use_theme_default();
+    const surface = getSurface(theme);
     const { SCALES } = use_scale_default();
     const colors = getColors(theme.palette, type, disabled, {
       filled,
@@ -117,7 +121,8 @@ var DatePickerComponent = React.forwardRef(
       "--datepicker-margin-bottom": SCALES.mb(0),
       "--datepicker-margin-left": SCALES.ml(0),
       "--datepicker-text-color": theme.palette.foreground,
-      "--datepicker-bg": theme.palette.background,
+      "--datepicker-bg": surface.bg,
+      "--calendar-popup-hover": surface.hover,
       "--datepicker-border-color": theme.palette.border,
       "--datepicker-radius": rounded ? "25px" : theme.layout.radius,
       "--datepicker-popup-radius": theme.layout.radius,
@@ -131,7 +136,7 @@ var DatePickerComponent = React.forwardRef(
       "--datepicker-toggle-color": colors.iconColor,
       "--datepicker-toggle-hover-color": colors.color,
       "--datepicker-toggle-disabled-color": colors.iconColor,
-      "--datepicker-shadow": theme.expressiveness.shadowMedium
+      "--datepicker-shadow": surface.shadow
     };
     return /* @__PURE__ */ jsxs(
       "div",

package/esm/{chunk-XF4TPE2W.js → chunk-IL7L3BEL.js}

@@ -20,6 +20,9 @@ import {
 import {
   use_click_away_default
 } from "./chunk-DGXZP4VJ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -319,6 +322,8 @@ var TooltipContent = ({
     [type, theme.palette, light, ghost, subtle]
   );
   const hasShadow = type === "default";
+  const surface = getSurface(theme);
+  const bgColor = hasShadow && colors.bgColor === theme.palette.background ? surface.bg : colors.bgColor;
   const classes = use_classes_default(
     "tooltip-content",
     TooltipContent_module_css_default.tooltipContent,
@@ -350,14 +355,14 @@ var TooltipContent = ({
   const contentStyle = {
     "--tooltip-icon-offset-x": iconOffset.x,
     "--tooltip-icon-offset-y": iconOffset.y,
-    "--tooltip-content-bg": colors.bgColor,
+    "--tooltip-content-bg": bgColor,
     top: rect.top,
     left: rect.left,
     transform: rect.transform,
     color: colors.color,
     border: `1px solid ${colors.borderColor}`,
     borderRadius: theme.layout.radius,
-    boxShadow: hasShadow ? theme.expressiveness.shadowMedium : "none",
+    boxShadow: hasShadow ? surface.shadow : "none",
     width: SCALES.width(1, "auto"),
     height: SCALES.height(1, "auto")
   };

package/esm/{chunk-MGHMAZRL.js → chunk-KRSISARC.js}

@@ -1,6 +1,9 @@
 import {
   getColors
 } from "./chunk-KBZEYKCZ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -50,6 +53,7 @@ var ComboboxComponent = React.forwardRef(
     ...props
   }, ref) => {
     const theme = use_theme_default();
+    const surface = getSurface(theme);
     const { SCALES } = use_scale_default();
     const colors = getColors(theme.palette, type, disabled, {
       filled,
@@ -148,7 +152,7 @@ var ComboboxComponent = React.forwardRef(
       "--combobox-margin-bottom": SCALES.mb(0),
       "--combobox-margin-left": SCALES.ml(0),
       "--combobox-text-color": theme.palette.foreground,
-      "--combobox-bg": theme.palette.background,
+      "--combobox-bg": surface.bg,
       "--combobox-border-color": theme.palette.border,
       "--combobox-radius": rounded ? "25px" : theme.layout.radius,
       "--combobox-popup-radius": theme.layout.radius,
@@ -160,8 +164,8 @@ var ComboboxComponent = React.forwardRef(
       "--combobox-focus-border-color": colors.focusBorder,
       "--combobox-placeholder-color": colors.placeholderColor,
       "--combobox-disabled-color": theme.palette.accents_4,
-      "--combobox-shadow": theme.expressiveness.shadowMedium,
-      "--combobox-active-bg": theme.palette.accents_2,
+      "--combobox-shadow": surface.shadow,
+      "--combobox-active-bg": surface.hover,
       "--combobox-empty-color": theme.palette.accents_5
     };
     return /* @__PURE__ */ jsxs(

package/esm/{chunk-4QA7Z7VP.js → chunk-M64V32WO.js}

@@ -1,9 +1,12 @@
 import {
   Modal_default
-} from "./chunk-6ZBFUZSL.js";
+} from "./chunk-CU6SNPIM.js";
 import {
   Input_default
 } from "./chunk-NEG5UNM6.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_theme_default
 } from "./chunk-V5I4ORQQ.js";
@@ -97,7 +100,7 @@ var Command = ({
               "aria-selected": index === active,
               className: Command_module_css_default.item,
               style: {
-                backgroundColor: index === active ? theme.palette.accents_2 : void 0
+                backgroundColor: index === active ? getSurface(theme).hover : void 0
               },
               onMouseEnter: () => setActive(index),
               onClick: () => select(item),

package/esm/chunk-Q3I54DUS.js

@@ -0,0 +1,131 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Toolbar/Toolbar.tsx
+import React, { useEffect, useRef } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Toolbar/Toolbar.module.css.bolio-css-module-source
+var Toolbar_module_css_default = { "toolbar": "Toolbar-module_toolbar__GZv6U", "vertical": "Toolbar-module_vertical__bTAsV", "separator": "Toolbar-module_separator__Gs9-M" };
+
+// core/Toolbar/Toolbar.tsx
+import { jsx } from "react/jsx-runtime";
+var ITEMS = "button, a[href], input, select, textarea";
+var ToolbarComponent = React.forwardRef(
+  ({
+    orientation = "horizontal",
+    className = "",
+    children,
+    onKeyDown,
+    onFocus,
+    style,
+    ...props
+  }, innerRef) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const ref = useRef(null);
+    const current = useRef(null);
+    const getItems = () => {
+      var _a, _b;
+      return Array.from(
+        (_b = (_a = ref.current) == null ? void 0 : _a.querySelectorAll(ITEMS)) != null ? _b : []
+      ).filter(
+        (item) => !item.disabled && item.getAttribute("role") !== "separator"
+      );
+    };
+    useEffect(() => {
+      var _a;
+      const items = getItems();
+      const active = (_a = items.find((item) => item === current.current)) != null ? _a : items[0];
+      items.forEach(
+        (item) => item.setAttribute("tabindex", item === active ? "0" : "-1")
+      );
+    });
+    const setRef = (node) => {
+      ref.current = node;
+      if (typeof innerRef === "function") innerRef(node);
+      else if (innerRef) innerRef.current = node;
+    };
+    const focusHandler = (event) => {
+      if (onFocus) onFocus(event);
+      const items = getItems();
+      if (items.includes(event.target)) {
+        current.current = event.target;
+        items.forEach(
+          (item) => item.setAttribute("tabindex", item === event.target ? "0" : "-1")
+        );
+      }
+    };
+    const keyHandler = (event) => {
+      if (onKeyDown) onKeyDown(event);
+      if (event.defaultPrevented) return;
+      const vertical = orientation === "vertical";
+      const items = getItems();
+      const index = items.indexOf(event.target);
+      if (index === -1) return;
+      let next = -1;
+      if (event.key === (vertical ? "ArrowDown" : "ArrowRight"))
+        next = (index + 1) % items.length;
+      else if (event.key === (vertical ? "ArrowUp" : "ArrowLeft"))
+        next = (index - 1 + items.length) % items.length;
+      else if (event.key === "Home") next = 0;
+      else if (event.key === "End") next = items.length - 1;
+      if (next === -1) return;
+      event.preventDefault();
+      items[next].focus();
+    };
+    const toolbarStyle = {
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      "--toolbar-border": theme.palette.border,
+      "--toolbar-radius": theme.layout.radius,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRef,
+        role: "toolbar",
+        "aria-orientation": orientation,
+        className: use_classes_default(Toolbar_module_css_default.toolbar, Toolbar_module_css_default[orientation], className),
+        onKeyDown: keyHandler,
+        onFocus: focusHandler,
+        ...props,
+        style: toolbarStyle,
+        children
+      }
+    );
+  }
+);
+ToolbarComponent.displayName = "BolioUIToolbar";
+var Toolbar = with_scale_default(ToolbarComponent);
+var Toolbar_default = Toolbar;
+
+// core/Toolbar/ToolbarSeparator.tsx
+import React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ToolbarSeparator = React2.forwardRef(({ className = "", ...props }, ref) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    ref,
+    role: "separator",
+    className: use_classes_default(Toolbar_module_css_default.separator, className),
+    ...props
+  }
+));
+ToolbarSeparator.displayName = "BolioUIToolbarSeparator";
+var ToolbarSeparator_default = ToolbarSeparator;
+
+// core/Toolbar/index.ts
+Toolbar_default.Separator = ToolbarSeparator_default;
+var Toolbar_default2 = Toolbar_default;
+
+export {
+  Toolbar_default2 as Toolbar_default
+};

package/esm/chunk-REWKR7S3.js

@@ -0,0 +1,109 @@
+import {
+  Image_default
+} from "./chunk-TWIOSRRP.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/ImageZoom/ImageZoom.tsx
+import React, { useEffect, useRef, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/ImageZoom/ImageZoom.module.css.bolio-css-module-source
+var ImageZoom_module_css_default = { "trigger": "ImageZoom-module_trigger__-42Bz", "dialog": "ImageZoom-module_dialog__TjA9E", "figure": "ImageZoom-module_figure__YIBq1", "zoomed": "ImageZoom-module_zoomed__7gfCP", "caption": "ImageZoom-module_caption__6SFRA", "close": "ImageZoom-module_close__iEiwJ" };
+
+// core/ImageZoom/ImageZoom.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ImageZoom = React.forwardRef(
+  ({
+    src,
+    alt,
+    zoomSrc,
+    caption,
+    closeLabel = "Close",
+    className = "",
+    ...imageProps
+  }, ref) => {
+    const [open, setOpen] = useState(false);
+    const dialog = useRef(null);
+    useEffect(() => {
+      var _a;
+      if (open) (_a = dialog.current) == null ? void 0 : _a.showModal();
+    }, [open]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          className: use_classes_default(ImageZoom_module_css_default.trigger, className),
+          "aria-haspopup": "dialog",
+          onClick: () => setOpen(true),
+          children: /* @__PURE__ */ jsx(Image_default, { src, alt, ...imageProps })
+        }
+      ),
+      open && /* @__PURE__ */ jsxs(
+        "dialog",
+        {
+          ref: dialog,
+          "aria-label": alt,
+          className: ImageZoom_module_css_default.dialog,
+          onClose: () => setOpen(false),
+          onKeyDown: (event) => {
+            var _a;
+            if (event.key === "Escape") (_a = dialog.current) == null ? void 0 : _a.close();
+          },
+          onClick: (event) => {
+            var _a;
+            if (event.target === event.currentTarget) (_a = dialog.current) == null ? void 0 : _a.close();
+          },
+          children: [
+            /* @__PURE__ */ jsxs("figure", { className: ImageZoom_module_css_default.figure, children: [
+              /* @__PURE__ */ jsx("img", { src: zoomSrc || src, alt, className: ImageZoom_module_css_default.zoomed }),
+              caption && /* @__PURE__ */ jsx("figcaption", { className: ImageZoom_module_css_default.caption, children: caption })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: ImageZoom_module_css_default.close,
+                "aria-label": closeLabel,
+                onClick: () => {
+                  var _a;
+                  return (_a = dialog.current) == null ? void 0 : _a.close();
+                },
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    width: "1.5em",
+                    height: "1.5em",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M6 6l12 12M18 6L6 18",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+ImageZoom.displayName = "BolioUIImageZoom";
+var ImageZoom_default = ImageZoom;
+
+// core/ImageZoom/index.ts
+var ImageZoom_default2 = ImageZoom_default;
+
+export {
+  ImageZoom_default2 as ImageZoom_default
+};

package/esm/{chunk-SGWX6H4Y.js → chunk-RWRFOGCU.js}

@@ -1,6 +1,9 @@
 import {
   use_click_away_default
 } from "./chunk-DGXZP4VJ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   Loading_default
 } from "./chunk-LMDBE6T6.js";
@@ -231,6 +234,7 @@ var ButtonDropdownComponent = React3.forwardRef(
     const innerRef = useRef(null);
     useImperativeHandle(ref, () => innerRef.current);
     const theme = use_theme_default();
+    const surface = getSurface(theme);
     const colors = getColor(theme.palette, type);
     const itemChildren = pickChild(children, ButtonDropdownItem_default)[1];
     const [itemChildrenWithoutMain, mainItemChildren] = pickChildByProps(
@@ -328,9 +332,9 @@ var ButtonDropdownComponent = React3.forwardRef(
               {
                 className: ButtonDropdown_module_css_default.content,
                 style: {
-                  boxShadow: theme.expressiveness.shadowMedium,
+                  boxShadow: surface.shadow,
                   transform: "translateY(4px)",
-                  backgroundColor: type === "default" ? theme.palette.background : colors.bgColor
+                  backgroundColor: type === "default" ? surface.bg : colors.bgColor
                 },
                 children: itemChildrenWithoutMain
               }