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

package/dist/chunk-FQWH4PDK.js

@@ -0,0 +1,165 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkGJZT47MPjs = require('./chunk-GJZT47MP.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Chip/Chip.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Chip/ChipContext.ts
+
+var ChipContext = _react2.default.createContext(null);
+var useChipContext = () => _react2.default.useContext(ChipContext);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Chip/Chip.module.css.bolio-css-module-source
+var Chip_module_css_default = { "chip": "Chip-module_chip__r494r", "input": "Chip-module_input__GhNGk", "text": "Chip-module_text__sYRMh" };
+
+// core/Chip/Chip.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var ChipComponent = _react2.default.forwardRef(
+  ({
+    value,
+    checked: customChecked,
+    initialChecked = false,
+    onChange,
+    type = "primary",
+    disabled = false,
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const group = useChipContext();
+    const [selfChecked, setSelfChecked] = _react.useState.call(void 0, initialChecked);
+    const checked = group ? group.value.includes(value) : customChecked !== void 0 ? customChecked : selfChecked;
+    const changeHandler = (event) => {
+      if (group) {
+        if (group.toggle) group.toggle(value);
+        return;
+      }
+      setSelfChecked(event.target.checked);
+      if (onChange) onChange(event.target.checked);
+    };
+    const { bg, color, border } = _chunkGJZT47MPjs.getVariantColors.call(void 0, theme.palette, type, "light");
+    const chipStyle = {
+      height: SCALES.height(2),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      fontSize: SCALES.font(0.875),
+      "--chip-color": theme.palette.accents_6,
+      "--chip-border": theme.palette.accents_3,
+      "--chip-hover-bg": theme.palette.accents_1,
+      "--chip-checked-bg": bg,
+      "--chip-checked-color": color,
+      "--chip-checked-border": border,
+      "--chip-focus": theme.palette[type],
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Chip_module_css_default.chip, className), style: chipStyle, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "input",
+        {
+          ref,
+          type: group && !group.multiple ? "radio" : "checkbox",
+          className: Chip_module_css_default.input,
+          name: group == null ? void 0 : group.name,
+          value,
+          checked,
+          disabled: disabled || (group == null ? void 0 : group.disabled),
+          onChange: changeHandler,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: Chip_module_css_default.text, children: [
+        checked && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            width: "14",
+            height: "14",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "m5 12 5 5L20 7" })
+          }
+        ),
+        children
+      ] })
+    ] });
+  }
+);
+ChipComponent.displayName = "BolioUIChip";
+var Chip = _chunkMAICNLTYjs.with_scale_default.call(void 0, ChipComponent);
+var Chip_default = Chip;
+
+// core/Chip/ChipGroup.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Chip/ChipGroup.module.css.bolio-css-module-source
+var ChipGroup_module_css_default = { "group": "ChipGroup-module_group__6ARIk" };
+
+// core/Chip/ChipGroup.tsx
+
+var ChipGroup = _react2.default.forwardRef(
+  ({
+    value: customValue,
+    initialValue = [],
+    onChange,
+    multiple = false,
+    disabled = false,
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    const name = _react.useId.call(void 0, );
+    const [selfValue, setSelfValue] = _react.useState.call(void 0, initialValue);
+    const value = customValue !== void 0 ? customValue : selfValue;
+    const providerValue = _react.useMemo.call(void 0, 
+      () => ({
+        name,
+        multiple,
+        value,
+        disabled,
+        toggle: (chip) => {
+          const next = !multiple ? [chip] : value.includes(chip) ? value.filter((v) => v !== chip) : [...value, chip];
+          setSelfValue(next);
+          if (onChange) onChange(next);
+        }
+      }),
+      [name, multiple, value, disabled, onChange]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChipContext.Provider, { value: providerValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        role: multiple ? "group" : "radiogroup",
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, ChipGroup_module_css_default.group, className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ChipGroup.displayName = "BolioUIChipGroup";
+var ChipGroup_default = ChipGroup;
+
+// core/Chip/index.ts
+Chip_default.Group = ChipGroup_default;
+var Chip_default2 = Chip_default;
+
+
+
+exports.Chip_default = Chip_default2;

package/dist/chunk-FSO65ZAH.js

@@ -0,0 +1,249 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
+
+
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Mention/Mention.tsx
+
+
+
+
+
+
+
+var _react = require('react'); var _react2 = _interopRequireDefault(_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
+var _jsxruntime = require('react/jsx-runtime');
+var getLabel = (option) => {
+  var _a;
+  return (_a = option.label) != null ? _a : option.value;
+};
+var escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+var MentionComponent = _react2.default.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 = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const surface = _chunkEUYSKHRSjs.getSurface.call(void 0, theme);
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const colors = _chunkKBZEYKCZjs.getColors.call(void 0, theme.palette, type, disabled, {});
+    const baseId = _react.useId.call(void 0, );
+    const listId = `${baseId}-list`;
+    const optionId = (index) => `${baseId}-option-${index}`;
+    const field = _react.useRef.call(void 0, 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] = _react.useState.call(void 0, initialValue);
+    const text = isControlled ? customValue : selfValue;
+    const [caret, setCaret] = _react.useState.call(void 0, text.length);
+    const [dismissed, setDismissed] = _react.useState.call(void 0, false);
+    const [activeIndex, setActiveIndex] = _react.useState.call(void 0, -1);
+    const pendingCaret = _react.useRef.call(void 0, null);
+    const token = _react.useMemo.call(void 0, () => {
+      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 = _react.useMemo.call(void 0, 
+      () => token ? options.filter(
+        (option) => getLabel(option).toLowerCase().includes(token.query.toLowerCase())
+      ) : [],
+      [options, token]
+    );
+    const open = !!token && !dismissed && !disabled;
+    const expanded = open && visible.length > 0;
+    _react.useEffect.call(void 0, () => {
+      setActiveIndex(
+        open ? visible.findIndex((option) => !option.disabled) : -1
+      );
+    }, [open, token == null ? void 0 : token.query]);
+    _react.useEffect.call(void 0, () => {
+      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]);
+    _react.useLayoutEffect.call(void 0, () => {
+      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__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Mention_module_css_default.mention, className),
+        style: mentionStyle,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "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__ */ _jsxruntime.jsx.call(void 0, "ul", { id: listId, role: "listbox", className: Mention_module_css_default.list, children: visible.map((option, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "li",
+            {
+              id: optionId(index),
+              role: "option",
+              "aria-selected": index === activeIndex,
+              "aria-disabled": option.disabled || void 0,
+              className: _chunk5KUROAEPjs.joinClasses.call(void 0, 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__ */ _jsxruntime.jsx.call(void 0, "div", { className: Mention_module_css_default.empty, children: emptyText })
+        ]
+      }
+    );
+  }
+);
+MentionComponent.displayName = "BolioUIMention";
+var Mention = _chunkMAICNLTYjs.with_scale_default.call(void 0, MentionComponent);
+var Mention_default = Mention;
+
+// core/Mention/index.ts
+var Mention_default2 = Mention_default;
+
+
+
+exports.Mention_default = Mention_default2;

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

@@ -6,12 +6,15 @@ var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
 
 
 
-var _chunkP245HSVBjs = require('./chunk-P245HSVB.js');
+var _chunkTLVSZCKUjs = require('./chunk-TLVSZCKU.js');
 
 
 var _chunkDGXZP4VJjs = require('./chunk-DGXZP4VJ.js');
 
 
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
+
+
 
 var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
 
@@ -52,6 +55,7 @@ var DatePickerComponent = _react2.default.forwardRef(
     ...props
   }, ref) => {
     const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const surface = _chunkEUYSKHRSjs.getSurface.call(void 0, theme);
     const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
     const colors = _chunkKBZEYKCZjs.getColors.call(void 0, theme.palette, type, disabled, {
       filled,
@@ -62,7 +66,7 @@ var DatePickerComponent = _react2.default.forwardRef(
     const isControlled = customValue !== void 0;
     const [selfValue, setSelfValue] = _react.useState.call(void 0, initialValue);
     const selected = isControlled ? customValue : selfValue;
-    const selectedText = selected ? _chunkP245HSVBjs.toISO.call(void 0, selected) : "";
+    const selectedText = selected ? _chunkTLVSZCKUjs.toISO.call(void 0, selected) : "";
     const [text, setText] = _react.useState.call(void 0, selectedText);
     const [open, setOpen] = _react.useState.call(void 0, false);
     _react.useEffect.call(void 0, () => {
@@ -73,7 +77,7 @@ var DatePickerComponent = _react2.default.forwardRef(
     const buttonRef = _react.useRef.call(void 0, null);
     _react.useImperativeHandle.call(void 0, ref, () => inputRef.current);
     _chunkDGXZP4VJjs.use_click_away_default.call(void 0, rootRef, () => setOpen(false));
-    const isInRange = (date) => !(min && date < _chunkP245HSVBjs.startOfDay.call(void 0, min) || max && date > _chunkP245HSVBjs.startOfDay.call(void 0, max));
+    const isInRange = (date) => !(min && date < _chunkTLVSZCKUjs.startOfDay.call(void 0, min) || max && date > _chunkTLVSZCKUjs.startOfDay.call(void 0, max));
     const commit = (date) => {
       if (!isControlled) setSelfValue(date);
       if (onChange) onChange(date);
@@ -82,7 +86,7 @@ var DatePickerComponent = _react2.default.forwardRef(
       const next = event.target.value;
       setText(next);
       if (next === "") return commit(null);
-      const date = _chunkP245HSVBjs.fromISO.call(void 0, next);
+      const date = _chunkTLVSZCKUjs.fromISO.call(void 0, next);
       if (date && isInRange(date)) commit(date);
     };
     const blurHandler = (event) => {
@@ -92,7 +96,7 @@ var DatePickerComponent = _react2.default.forwardRef(
     const pick = (date) => {
       var _a;
       commit(date);
-      setText(_chunkP245HSVBjs.toISO.call(void 0, date));
+      setText(_chunkTLVSZCKUjs.toISO.call(void 0, date));
       setOpen(false);
       (_a = inputRef.current) == null ? void 0 : _a.focus();
     };
@@ -117,7 +121,8 @@ var DatePickerComponent = _react2.default.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 = _react2.default.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__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
@@ -195,7 +200,7 @@ var DatePickerComponent = _react2.default.forwardRef(
               className: DatePicker_module_css_default.popup,
               onKeyDown: keyDownHandler,
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkP245HSVBjs.Calendar_default,
+                _chunkTLVSZCKUjs.Calendar_default,
                 {
                   autoFocus: true,
                   value: selected,

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

@@ -22,6 +22,9 @@ var _chunkGJZT47MPjs = require('./chunk-GJZT47MP.js');
 var _chunkDGXZP4VJjs = require('./chunk-DGXZP4VJ.js');
 
 
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
+
+
 
 var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
 
@@ -319,6 +322,8 @@ var TooltipContent = ({
     [type, theme.palette, light, ghost, subtle]
   );
   const hasShadow = type === "default";
+  const surface = _chunkEUYSKHRSjs.getSurface.call(void 0, theme);
+  const bgColor = hasShadow && colors.bgColor === theme.palette.background ? surface.bg : colors.bgColor;
   const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, 
     "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/dist/{chunk-MGHMAZRL.js → chunk-KRSISARC.js}

@@ -3,6 +3,9 @@
 var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
 
 
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
+
+
 
 var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
 
@@ -50,6 +53,7 @@ var ComboboxComponent = _react2.default.forwardRef(
     ...props
   }, ref) => {
     const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const surface = _chunkEUYSKHRSjs.getSurface.call(void 0, theme);
     const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
     const colors = _chunkKBZEYKCZjs.getColors.call(void 0, theme.palette, type, disabled, {
       filled,
@@ -148,7 +152,7 @@ var ComboboxComponent = _react2.default.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 = _react2.default.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__ */ _jsxruntime.jsxs.call(void 0, 

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

@@ -1,11 +1,14 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk6ZBFUZSLjs = require('./chunk-6ZBFUZSL.js');
+var _chunkCU6SNPIMjs = require('./chunk-CU6SNPIM.js');
 
 
 var _chunkNEG5UNM6js = require('./chunk-NEG5UNM6.js');
 
 
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
+
+
 var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
 
 
@@ -57,7 +60,7 @@ var Command = ({
     }
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk6ZBFUZSLjs.Modal_default,
+    _chunkCU6SNPIMjs.Modal_default,
     {
       visible,
       onClose,
@@ -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 ? _chunkEUYSKHRSjs.getSurface.call(void 0, theme).hover : void 0
               },
               onMouseEnter: () => setActive(index),
               onClick: () => select(item),