@bolio-ui/core 3.0.0-alpha.2 → 3.0.1

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),

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-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-STYC6O24.js → chunk-SJVWKNGY.js}

@@ -9,7 +9,10 @@ var _chunkBXDUHMWSjs = require('./chunk-BXDUHMWS.js');
 var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
 
 
-var _chunkDXHNQANXjs = require('./chunk-DXHNQANX.js');
+var _chunkTPZUTHTQjs = require('./chunk-TPZUTHTQ.js');
+
+
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
 
 
 var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
@@ -140,12 +143,13 @@ var Tour = _react2.default.forwardRef(
       ...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": dark ? theme.palette.accents_3 : theme.palette.background,
-      "--tour-shadow": theme.expressiveness.shadowMedium,
+      "--tour-bg": surface.bg,
+      "--tour-shadow": surface.shadow,
       "--tour-dim": dark ? "rgb(0 0 0 / 60%)" : "rgb(0 0 0 / 55%)",
       ...style
     };
@@ -187,10 +191,10 @@ var Tour = _react2.default.forwardRef(
                   /* @__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, _chunkDXHNQANXjs.Button_default, { auto: true, scale: 0.75, effect: false, onClick: onClose, children: skipLabel }),
+                    !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, 
-                      _chunkDXHNQANXjs.Button_default,
+                      _chunkTPZUTHTQjs.Button_default,
                       {
                         auto: true,
                         scale: 0.75,
@@ -200,7 +204,7 @@ var Tour = _react2.default.forwardRef(
                       }
                     ),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                      _chunkDXHNQANXjs.Button_default,
+                      _chunkTPZUTHTQjs.Button_default,
                       {
                         auto: true,
                         scale: 0.75,

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-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,

package/dist/{chunk-BHQRX76X.js → chunk-YLLPYRJH.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');
 
@@ -33,7 +36,7 @@ var _jsxruntime = require('react/jsx-runtime');
 var TWO_MONTHS_EM = 46;
 var ONE_MONTH_EM = 22;
 var emptyRange = [null, null];
-var format = (date) => date ? _chunkP245HSVBjs.toISO.call(void 0, date) : "";
+var format = (date) => date ? _chunkTLVSZCKUjs.toISO.call(void 0, date) : "";
 var DateRangePickerComponent = _react2.default.forwardRef(
   ({
     value: customValue,
@@ -60,6 +63,7 @@ var DateRangePickerComponent = _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,
@@ -83,7 +87,7 @@ var DateRangePickerComponent = _react2.default.forwardRef(
     const endRef = _react.useRef.call(void 0, null);
     const buttonRef = _react.useRef.call(void 0, null);
     _chunkDGXZP4VJjs.use_click_away_default.call(void 0, rootRef, () => setOpen(false));
-    const isInBounds = (date) => !(min && date < _chunkP245HSVBjs.startOfDay.call(void 0, min) || max && date > _chunkP245HSVBjs.startOfDay.call(void 0, max));
+    const isInBounds = (date) => !(min && date < _chunkTLVSZCKUjs.startOfDay.call(void 0, min) || max && date > _chunkTLVSZCKUjs.startOfDay.call(void 0, max));
     const commit = (next) => {
       if (!isControlled) setSelfValue(next);
       if (onChange) onChange(next);
@@ -95,7 +99,7 @@ var DateRangePickerComponent = _react2.default.forwardRef(
       if (next === "") {
         return commit(edge === "start" ? [null, other] : [other, null]);
       }
-      const date = _chunkP245HSVBjs.fromISO.call(void 0, next);
+      const date = _chunkTLVSZCKUjs.fromISO.call(void 0, next);
       if (!date || !isInBounds(date)) return;
       if (other && (edge === "start" ? date > other : date < other)) return;
       commit(edge === "start" ? [date, other] : [other, date]);
@@ -140,7 +144,8 @@ var DateRangePickerComponent = _react2.default.forwardRef(
       "--daterange-margin-right": SCALES.mr(0),
       "--daterange-margin-bottom": SCALES.mb(0),
       "--daterange-margin-left": SCALES.ml(0),
-      "--daterange-bg": theme.palette.background,
+      "--daterange-bg": surface.bg,
+      "--calendar-popup-hover": surface.hover,
       "--daterange-border-color": theme.palette.border,
       "--daterange-radius": rounded ? "25px" : theme.layout.radius,
       "--daterange-popup-radius": theme.layout.radius,
@@ -154,7 +159,7 @@ var DateRangePickerComponent = _react2.default.forwardRef(
       "--daterange-separator-color": colors.iconColor,
       "--daterange-toggle-color": colors.iconColor,
       "--daterange-toggle-hover-color": colors.color,
-      "--daterange-shadow": theme.expressiveness.shadowMedium,
+      "--daterange-shadow": surface.shadow,
       ...style
     };
     const inputProps = {
@@ -243,7 +248,7 @@ var DateRangePickerComponent = _react2.default.forwardRef(
               }),
               onKeyDown: keyDownHandler,
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkP245HSVBjs.Calendar_default,
+                _chunkTLVSZCKUjs.Calendar_default,
                 {
                   mode: "range",
                   numberOfMonths: fit.months,

package/dist/css/Alert.css

@@ -0,0 +1,53 @@
+@layer Alert {
+.Alert-module_alert__Ghxl7 {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75em;
+  box-sizing: border-box;
+  line-height: 1.6;
+}
+
+.Alert-module_alert__Ghxl7 p {
+  margin: 0;
+}
+
+.Alert-module_icon__hcZdu {
+  display: inline-flex;
+  flex: none;
+  margin-top: 0.2em;
+}
+
+.Alert-module_body__SuUYD {
+  flex: 1;
+  min-width: 0;
+}
+
+.Alert-module_title__8yipK {
+  font-weight: 600;
+}
+
+.Alert-module_close__ZPg5d {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  margin: 0.15em -0.25em 0 0;
+  padding: 0.25em;
+  color: inherit;
+  background: none;
+  border: 0;
+  border-radius: 4px;
+  opacity: 0.7;
+  cursor: pointer;
+}
+
+.Alert-module_close__ZPg5d:hover {
+  opacity: 1;
+}
+
+.Alert-module_close__ZPg5d:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 1px;
+}
+
+}

package/dist/css/Avatar-AvatarGroup.css

@@ -1,4 +1,4 @@
-@layer Avatar-AvatarGroup {
+@layer Avatar {
 .AvatarGroup-module_avatarGroup__BX-qh {
   display: flex;
   align-items: center;

package/dist/css/Avatar-AvatarSkeleton.css

@@ -1,4 +1,4 @@
-@layer Avatar-AvatarSkeleton {
+@layer Avatar {
 .AvatarSkeleton-module_skeleton__-4455 {
   position: absolute;
   top: 0;

package/dist/css/Badge-BadgeAnchor.css

@@ -1,4 +1,4 @@
-@layer Badge-BadgeAnchor {
+@layer Badge {
 .BadgeAnchor-module_anchor__loBaC {
   position: relative;
   display: inline-flex;

package/dist/css/Button-ButtonDrip.css

@@ -1,4 +1,4 @@
-@layer Button-ButtonDrip {
+@layer Button {
 .ButtonDrip-module_drip__NtSRS {
   position: absolute;
   left: 0;

package/dist/css/Button-ButtonIcon.css

@@ -1,4 +1,4 @@
-@layer Button-ButtonIcon {
+@layer Button {
 .ButtonIcon-module_icon__faTDy {
   display: flex;
   justify-content: center;