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

package/dist/chunk-Q3I54DUS.js

@@ -0,0 +1,131 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Toolbar/Toolbar.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_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
+var _jsxruntime = require('react/jsx-runtime');
+var ITEMS = "button, a[href], input, select, textarea";
+var ToolbarComponent = _react2.default.forwardRef(
+  ({
+    orientation = "horizontal",
+    className = "",
+    children,
+    onKeyDown,
+    onFocus,
+    style,
+    ...props
+  }, innerRef) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const ref = _react.useRef.call(void 0, null);
+    const current = _react.useRef.call(void 0, 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"
+      );
+    };
+    _react.useEffect.call(void 0, () => {
+      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__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref: setRef,
+        role: "toolbar",
+        "aria-orientation": orientation,
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Toolbar_module_css_default.toolbar, Toolbar_module_css_default[orientation], className),
+        onKeyDown: keyHandler,
+        onFocus: focusHandler,
+        ...props,
+        style: toolbarStyle,
+        children
+      }
+    );
+  }
+);
+ToolbarComponent.displayName = "BolioUIToolbar";
+var Toolbar = _chunkMAICNLTYjs.with_scale_default.call(void 0, ToolbarComponent);
+var Toolbar_default = Toolbar;
+
+// core/Toolbar/ToolbarSeparator.tsx
+
+
+var ToolbarSeparator = _react2.default.forwardRef(({ className = "", ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    ref,
+    role: "separator",
+    className: _chunk5KUROAEPjs.use_classes_default.call(void 0, 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;
+
+
+
+exports.Toolbar_default = Toolbar_default2;

package/dist/chunk-REWKR7S3.js

@@ -0,0 +1,109 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkTWIOSRRPjs = require('./chunk-TWIOSRRP.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/ImageZoom/ImageZoom.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_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
+var _jsxruntime = require('react/jsx-runtime');
+var ImageZoom = _react2.default.forwardRef(
+  ({
+    src,
+    alt,
+    zoomSrc,
+    caption,
+    closeLabel = "Close",
+    className = "",
+    ...imageProps
+  }, ref) => {
+    const [open, setOpen] = _react.useState.call(void 0, false);
+    const dialog = _react.useRef.call(void 0, null);
+    _react.useEffect.call(void 0, () => {
+      var _a;
+      if (open) (_a = dialog.current) == null ? void 0 : _a.showModal();
+    }, [open]);
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          ref,
+          type: "button",
+          className: _chunk5KUROAEPjs.use_classes_default.call(void 0, ImageZoom_module_css_default.trigger, className),
+          "aria-haspopup": "dialog",
+          onClick: () => setOpen(true),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTWIOSRRPjs.Image_default, { src, alt, ...imageProps })
+        }
+      ),
+      open && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "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__ */ _jsxruntime.jsxs.call(void 0, "figure", { className: ImageZoom_module_css_default.figure, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: zoomSrc || src, alt, className: ImageZoom_module_css_default.zoomed }),
+              caption && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "figcaption", { className: ImageZoom_module_css_default.caption, children: caption })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "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__ */ _jsxruntime.jsx.call(void 0, 
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    width: "1.5em",
+                    height: "1.5em",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      "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;
+
+
+
+exports.ImageZoom_default = ImageZoom_default2;

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

@@ -3,6 +3,9 @@
 var _chunkDGXZP4VJjs = require('./chunk-DGXZP4VJ.js');
 
 
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
+
+
 var _chunkLMDBE6T6js = require('./chunk-LMDBE6T6.js');
 
 
@@ -231,6 +234,7 @@ var ButtonDropdownComponent = _react2.default.forwardRef(
     const innerRef = _react.useRef.call(void 0, null);
     _react.useImperativeHandle.call(void 0, ref, () => innerRef.current);
     const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const surface = _chunkEUYSKHRSjs.getSurface.call(void 0, theme);
     const colors = getColor(theme.palette, type);
     const itemChildren = _chunkUX2B3G6Ujs.pickChild.call(void 0, children, ButtonDropdownItem_default)[1];
     const [itemChildrenWithoutMain, mainItemChildren] = _chunkUX2B3G6Ujs.pickChildByProps.call(void 0, 
@@ -328,9 +332,9 @@ var ButtonDropdownComponent = _react2.default.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
               }

package/dist/chunk-SJVWKNGY.js

@@ -0,0 +1,236 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkAXYDJGTNjs = require('./chunk-AXYDJGTN.js');
+
+
+var _chunkBXDUHMWSjs = require('./chunk-BXDUHMWS.js');
+
+
+var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
+
+
+var _chunkTPZUTHTQjs = require('./chunk-TPZUTHTQ.js');
+
+
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Tour/Tour.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactdom = require('react-dom');
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Tour/Tour.module.css.bolio-css-module-source
+var Tour_module_css_default = { "tour": "Tour-module_tour__FLAxG", "spotlight": "Tour-module_spotlight__o7ukV", "dim": "Tour-module_dim__ZPmGZ", "card": "Tour-module_card__p9LCI", "centered": "Tour-module_centered__KJvbZ", "count": "Tour-module_count__2K7-G", "title": "Tour-module_title__Z-spV", "content": "Tour-module_content__qLvnb", "actions": "Tour-module_actions__HKbHi", "spacer": "Tour-module_spacer__dkdPy" };
+
+// core/Tour/Tour.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var CARD_WIDTH = 320;
+var MARGIN = 8;
+var GAP = 8;
+var ROOM_BELOW = 240;
+var resolve = (target) => !target ? null : typeof target === "string" ? document.querySelector(target) : typeof target === "function" ? target() : target;
+var Tour = _react2.default.forwardRef(
+  ({
+    steps,
+    open,
+    onClose,
+    current: customCurrent,
+    initialCurrent = 0,
+    onCurrentChange,
+    onFinish,
+    previousLabel = "Back",
+    nextLabel = "Next",
+    finishLabel = "Done",
+    skipLabel = "Skip",
+    stepLabel = (index, count) => `${index + 1} of ${count}`,
+    spotlightPadding = 6,
+    className = "",
+    style,
+    onKeyDown,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const portal = _chunkBXDUHMWSjs.use_portal_default.call(void 0, "tour");
+    const id = _react.useId.call(void 0, );
+    const [selfCurrent, setSelfCurrent] = _react.useState.call(void 0, initialCurrent);
+    const current = Math.max(
+      0,
+      Math.min(customCurrent != null ? customCurrent : selfCurrent, steps.length - 1)
+    );
+    const step = steps[current];
+    const last = current === steps.length - 1;
+    const [rect, setRect] = _react.useState.call(void 0, null);
+    const card = _react.useRef.call(void 0, null);
+    const previous = _react.useRef.call(void 0, null);
+    const latestSteps = _chunkZRORQ2WHjs.use_latest_default.call(void 0, steps);
+    _react.useEffect.call(void 0, () => {
+      var _a, _b;
+      const target = (_a = latestSteps.current[current]) == null ? void 0 : _a.target;
+      if (!open) return;
+      const element = resolve(target);
+      if (!element) {
+        if (target) _chunkAXYDJGTNjs.log_warning_default.call(void 0, "The target of the step was not found.", "Tour");
+        setRect(null);
+        return;
+      }
+      (_b = element.scrollIntoView) == null ? void 0 : _b.call(element, { block: "center", inline: "nearest" });
+      const update = () => setRect(element.getBoundingClientRect());
+      update();
+      window.addEventListener("resize", update);
+      window.addEventListener("scroll", update, true);
+      return () => {
+        window.removeEventListener("resize", update);
+        window.removeEventListener("scroll", update, true);
+      };
+    }, [open, current, latestSteps]);
+    _react.useEffect.call(void 0, () => {
+      if (!open) return;
+      previous.current = document.activeElement;
+      return () => {
+        var _a, _b;
+        return (_b = (_a = previous.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+      };
+    }, [open]);
+    _react.useEffect.call(void 0, () => {
+      var _a;
+      if (open && portal) (_a = card.current) == null ? void 0 : _a.focus({ preventScroll: true });
+    }, [open, current, portal]);
+    if (!open || !step || !portal) return null;
+    const go = (next) => {
+      if (customCurrent === void 0) setSelfCurrent(next);
+      if (onCurrentChange) onCurrentChange(next);
+    };
+    const finish = () => {
+      if (onFinish) onFinish();
+      onClose();
+    };
+    const keyDownHandler = (event) => {
+      var _a, _b;
+      if (onKeyDown) onKeyDown(event);
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        return onClose();
+      }
+      if (event.key !== "Tab") return;
+      const buttons = Array.from(
+        (_b = (_a = card.current) == null ? void 0 : _a.querySelectorAll("button")) != null ? _b : []
+      );
+      const [first, end] = [buttons[0], buttons[buttons.length - 1]];
+      const onCard = document.activeElement === card.current;
+      if (!first) return;
+      if (event.shiftKey && (onCard || document.activeElement === first)) {
+        event.preventDefault();
+        end.focus();
+      } else if (!event.shiftKey && (onCard || document.activeElement === end)) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    const width = Math.min(CARD_WIDTH, window.innerWidth - 2 * MARGIN);
+    const room = rect ? window.innerHeight - rect.bottom : 0;
+    const above = Boolean(rect && room < ROOM_BELOW && rect.top > room);
+    const cardStyle = rect ? {
+      width,
+      left: Math.max(
+        MARGIN,
+        Math.min(rect.left, window.innerWidth - width - MARGIN)
+      ),
+      ...above ? { bottom: window.innerHeight - rect.top + spotlightPadding + GAP } : { top: rect.bottom + spotlightPadding + GAP }
+    } : { width };
+    const dark = theme.type === "dark";
+    const surface = _chunkEUYSKHRSjs.getSurface.call(void 0, theme);
+    const tourStyle = {
+      "--tour-color": theme.palette.foreground,
+      "--tour-muted": theme.palette.accents_5,
+      "--tour-radius": theme.layout.radius,
+      "--tour-bg": surface.bg,
+      "--tour-shadow": surface.shadow,
+      "--tour-dim": dark ? "rgb(0 0 0 / 60%)" : "rgb(0 0 0 / 55%)",
+      ...style
+    };
+    return _reactdom.createPortal.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          ref,
+          className: _chunk5KUROAEPjs.joinClasses.call(void 0, Tour_module_css_default.tour, className),
+          ...props,
+          style: tourStyle,
+          onKeyDown: keyDownHandler,
+          children: [
+            rect ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                className: Tour_module_css_default.spotlight,
+                style: {
+                  left: rect.left - spotlightPadding,
+                  top: rect.top - spotlightPadding,
+                  width: rect.width + 2 * spotlightPadding,
+                  height: rect.height + 2 * spotlightPadding
+                }
+              }
+            ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Tour_module_css_default.dim }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              "div",
+              {
+                ref: card,
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-labelledby": `${id}-title`,
+                "aria-describedby": `${id}-content`,
+                tabIndex: -1,
+                className: _chunk5KUROAEPjs.joinClasses.call(void 0, Tour_module_css_default.card, { [Tour_module_css_default.centered]: !rect }),
+                style: cardStyle,
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Tour_module_css_default.count, children: stepLabel(current, steps.length) }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { id: `${id}-title`, className: Tour_module_css_default.title, children: step.title }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { id: `${id}-content`, className: Tour_module_css_default.content, children: step.content }),
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: Tour_module_css_default.actions, children: [
+                    !last && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTPZUTHTQjs.Button_default, { auto: true, scale: 0.75, effect: false, onClick: onClose, children: skipLabel }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Tour_module_css_default.spacer }),
+                    current > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      _chunkTPZUTHTQjs.Button_default,
+                      {
+                        auto: true,
+                        scale: 0.75,
+                        effect: false,
+                        onClick: () => go(current - 1),
+                        children: previousLabel
+                      }
+                    ),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      _chunkTPZUTHTQjs.Button_default,
+                      {
+                        auto: true,
+                        scale: 0.75,
+                        type: "primary",
+                        effect: false,
+                        onClick: last ? finish : () => go(current + 1),
+                        children: last ? finishLabel : nextLabel
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      portal
+    );
+  }
+);
+Tour.displayName = "BolioUITour";
+var Tour_default = Tour;
+
+// core/Tour/index.ts
+var Tour_default2 = Tour_default;
+
+
+
+exports.Tour_default = Tour_default2;

package/dist/{chunk-P245HSVB.js → chunk-TLVSZCKU.js}

@@ -273,7 +273,8 @@ var CalendarComponent = _react2.default.forwardRef(
       "--calendar-margin-left": SCALES.ml(0),
       "--calendar-weekday-color": theme.palette.accents_5,
       "--calendar-radius": theme.layout.radius,
-      "--calendar-hover-bg": theme.palette.accents_2,
+      // a popup around the calendar (DatePicker) sets its own, lighter hover
+      "--calendar-hover-bg": `var(--calendar-popup-hover, ${theme.palette.accents_2})`,
       "--calendar-focus-outline": theme.palette.primary,
       "--calendar-disabled-color": theme.palette.accents_3,
       "--calendar-today-border": theme.palette.accents_4,

package/dist/{chunk-AG2NWQYL.js → chunk-WCTANCLG.js}

@@ -83,7 +83,9 @@ var Dropdown = _react2.default.memo(
         width: nativeWidth,
         elementTop
       } = _chunkDSX6YDJMjs.getRefRect.call(void 0, parent, getPopupContainer);
-      setRect({ top, left, right, width: nativeWidth, elementTop });
+      setRect(
+        (prev) => prev.top === top && prev.left === left && prev.right === right && prev.width === nativeWidth && prev.elementTop === elementTop ? prev : { top, left, right, width: nativeWidth, elementTop }
+      );
     };
     _chunkJJFOGZ6Vjs.use_resize_default.call(void 0, updateRect);
     _chunkV57PNXMDjs.use_click_anywhere_default.call(void 0, () => {

package/dist/{chunk-TDJGMSGT.js → chunk-WIIDIZYK.js}

@@ -26,6 +26,9 @@ var CssBaseline = ({
           font-size: 16px;
           --bolioui-icons-background: ${theme.palette.background};
           box-sizing: border-box;
+          /* the native parts of the page follow the theme: the clock of a time
+             field, the scrollbars and the pickers of the browser */
+          color-scheme: ${theme.type};
         }
 
         body {
@@ -53,7 +56,6 @@ var CssBaseline = ({
         *:before,
         *:after {
           box-sizing: inherit;
-          text-rendering: geometricPrecision;
           -webkit-tap-highlight-color: transparent;
         }
 

package/dist/{chunk-DIMJQLWY.js → chunk-XUNC7RB7.js}

@@ -3,10 +3,10 @@
 var _chunkJFNYQSEZjs = require('./chunk-JFNYQSEZ.js');
 
 
-var _chunkAG2NWQYLjs = require('./chunk-AG2NWQYL.js');
+var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
 
 
-var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
+var _chunkWCTANCLGjs = require('./chunk-WCTANCLG.js');
 
 
 var _chunkAXYDJGTNjs = require('./chunk-AXYDJGTN.js');
@@ -15,6 +15,9 @@ var _chunkAXYDJGTNjs = require('./chunk-AXYDJGTN.js');
 var _chunk33BUV2RXjs = require('./chunk-33BUV2RX.js');
 
 
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
+
+
 
 var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
 
@@ -93,6 +96,7 @@ var SelectDropdown = _react2.default.forwardRef(
     getPopupContainer
   }, dropdownRef) => {
     const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const surface = _chunkEUYSKHRSjs.getSurface.call(void 0, theme);
     const internalDropdownRef = _react.useRef.call(void 0, null);
     const { ref } = useSelectContext();
     const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, SelectDropdown_module_css_default.selectDropdown, className);
@@ -101,7 +105,7 @@ var SelectDropdown = _react2.default.forwardRef(
       () => internalDropdownRef.current
     );
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkAG2NWQYLjs.dropdown_default,
+      _chunkWCTANCLGjs.dropdown_default,
       {
         parent: ref,
         visible,
@@ -114,8 +118,8 @@ var SelectDropdown = _react2.default.forwardRef(
             className: classes,
             style: {
               "--select-dropdown-radius": theme.layout.radius,
-              "--select-dropdown-shadow": theme.expressiveness.shadowMedium,
-              "--select-dropdown-bg": colors.bgColor,
+              "--select-dropdown-shadow": surface.shadow,
+              "--select-dropdown-bg": colors.bgColor === theme.palette.background ? surface.bg : colors.bgColor,
               "--select-dropdown-border": colors.borderColor,
               "--select-dropdown-color": colors.color,
               ...dropdownStyle

package/dist/{chunk-GGCVPMXO.js → chunk-Y432C24Z.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkXF4TPE2Wjs = require('./chunk-XF4TPE2W.js');
+var _chunkIL7L3BELjs = require('./chunk-IL7L3BEL.js');
 
 
 var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
@@ -92,7 +92,7 @@ var PopoverComponent = _react2.default.forwardRef((popoverProps, ref) => {
     latestChange.current(customVisible);
   }, [customVisible, latestChange]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverContext.Provider, { value, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkXF4TPE2Wjs.Tooltip_default,
+    _chunkIL7L3BELjs.Tooltip_default,
     {
       ref,
       initialVisible: false,