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

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
               }

package/esm/{chunk-STYC6O24.js → chunk-SJVWKNGY.js}

@@ -9,7 +9,10 @@ import {
 } from "./chunk-ZRORQ2WH.js";
 import {
   Button_default
-} from "./chunk-DXHNQANX.js";
+} from "./chunk-TPZUTHTQ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_theme_default
 } from "./chunk-V5I4ORQQ.js";
@@ -140,12 +143,13 @@ var Tour = React.forwardRef(
       ...above ? { bottom: window.innerHeight - rect.top + spotlightPadding + GAP } : { top: rect.bottom + spotlightPadding + GAP }
     } : { width };
     const dark = theme.type === "dark";
+    const surface = getSurface(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
     };

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

@@ -273,7 +273,8 @@ var CalendarComponent = React.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/esm/{chunk-AG2NWQYL.js → chunk-WCTANCLG.js}

@@ -83,7 +83,9 @@ var Dropdown = React.memo(
         width: nativeWidth,
         elementTop
       } = getRefRect(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 }
+      );
     };
     use_resize_default(updateRect);
     use_click_anywhere_default(() => {

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

@@ -1,18 +1,21 @@
 import {
   Grid_default
 } from "./chunk-JFNYQSEZ.js";
-import {
-  dropdown_default
-} from "./chunk-AG2NWQYL.js";
 import {
   getColors
 } from "./chunk-KBZEYKCZ.js";
+import {
+  dropdown_default
+} from "./chunk-WCTANCLG.js";
 import {
   log_warning_default
 } from "./chunk-AXYDJGTN.js";
 import {
   use_current_state_default
 } from "./chunk-33BUV2RX.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -93,6 +96,7 @@ var SelectDropdown = React3.forwardRef(
     getPopupContainer
   }, dropdownRef) => {
     const theme = use_theme_default();
+    const surface = getSurface(theme);
     const internalDropdownRef = useRef(null);
     const { ref } = useSelectContext();
     const classes = use_classes_default(SelectDropdown_module_css_default.selectDropdown, className);
@@ -114,8 +118,8 @@ var SelectDropdown = React3.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/esm/{chunk-GGCVPMXO.js → chunk-Y432C24Z.js}

@@ -1,6 +1,6 @@
 import {
   Tooltip_default
-} from "./chunk-XF4TPE2W.js";
+} from "./chunk-IL7L3BEL.js";
 import {
   use_latest_default
 } from "./chunk-ZRORQ2WH.js";

package/esm/{chunk-BHQRX76X.js → chunk-YLLPYRJH.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
@@ -60,6 +63,7 @@ var DateRangePickerComponent = 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,
@@ -140,7 +144,8 @@ var DateRangePickerComponent = React.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 = React.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 = {

package/esm/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/esm/css/Avatar-AvatarGroup.css

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

package/esm/css/Avatar-AvatarSkeleton.css

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

package/esm/css/Badge-BadgeAnchor.css

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

package/esm/css/Button-ButtonDrip.css

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

package/esm/css/Button-ButtonIcon.css

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

package/esm/css/Button-ButtonLoading.css

@@ -1,4 +1,4 @@
-@layer Button-ButtonLoading {
+@layer Button {
 .ButtonLoading-module_btnLoading__Rgay4 {
   position: absolute;
   top: 0;

package/esm/css/ButtonDropdown-ButtonDropdownItem.css

@@ -1,4 +1,4 @@
-@layer ButtonDropdown-ButtonDropdownItem {
+@layer ButtonDropdown {
 .ButtonDropdownItem-module_button__R-hYv {
   position: relative;
   -webkit-appearance: button;

package/esm/css/ButtonDropdown-Icon.css

@@ -1,4 +1,4 @@
-@layer ButtonDropdown-Icon {
+@layer ButtonDropdown {
 .Icon-module_icon__-dePv {
   transform: scale(0.6);
 }

package/esm/css/Card-CardContent.css

@@ -1,4 +1,4 @@
-@layer Card-CardContent {
+@layer Card {
 .CardContent-module_content__DDLlz > p:first-child {
   margin-top: 0;
 }

package/esm/css/Card-CardFooter.css

@@ -1,4 +1,4 @@
-@layer Card-CardFooter {
+@layer Card {
 .CardFooter-module_footer__8Kn09 {
   display: flex;
   align-items: center;

package/esm/css/Checkbox-CheckboxGroup.css

@@ -1,4 +1,4 @@
-@layer Checkbox-CheckboxGroup {
+@layer Checkbox {
 .CheckboxGroup-module_group__a5y2d label {
   margin-right: var(--checkbox-group-gap);
   --checkbox-size: var(--checkbox-group-item-size);

package/esm/css/Checkbox-CheckboxIcon.css

@@ -1,4 +1,4 @@
-@layer Checkbox-CheckboxIcon {
+@layer Checkbox {
 .CheckboxIcon-module_svg__-DjXx {
   display: inline-flex;
   width: calc(0.86 * var(--checkbox-size));

package/esm/css/Chip-ChipGroup.css

@@ -0,0 +1,8 @@
+@layer Chip {
+.ChipGroup-module_group__6ARIk {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+}

package/esm/css/Chip.css

@@ -0,0 +1,65 @@
+@layer Chip {
+.Chip-module_chip__r494r {
+  position: relative;
+  display: inline-flex;
+}
+
+.Chip-module_input__GhNGk {
+  position: absolute;
+  opacity: 0;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  font-size: 0;
+}
+
+.Chip-module_text__sYRMh {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  box-sizing: border-box;
+  height: 100%;
+  padding: 0 0.875em;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--chip-color);
+  border: 1px solid var(--chip-border);
+  border-radius: 999px;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.Chip-module_text__sYRMh:hover {
+  background-color: var(--chip-hover-bg);
+}
+
+.Chip-module_input__GhNGk:checked + .Chip-module_text__sYRMh {
+  color: var(--chip-checked-color);
+  background-color: var(--chip-checked-bg);
+  border-color: var(--chip-checked-border);
+}
+
+.Chip-module_input__GhNGk:focus-visible + .Chip-module_text__sYRMh {
+  outline: 2px solid var(--chip-focus);
+  outline-offset: 2px;
+}
+
+.Chip-module_input__GhNGk:disabled + .Chip-module_text__sYRMh {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.Chip-module_input__GhNGk:disabled + .Chip-module_text__sYRMh:hover {
+  background-color: transparent;
+}
+
+.Chip-module_input__GhNGk:disabled:checked + .Chip-module_text__sYRMh:hover {
+  background-color: var(--chip-checked-bg);
+}
+
+}

package/esm/css/Collapse-CollapseGroup.css

@@ -1,4 +1,4 @@
-@layer Collapse-CollapseGroup {
+@layer Collapse {
 .CollapseGroup-module_collapseGroup__01F3X > div + div {
   border-top: none;
 }

package/esm/css/Collapse-CollapseIcon.css

@@ -1,4 +1,4 @@
-@layer Collapse-CollapseIcon {
+@layer Collapse {
 .CollapseIcon-module_svg__-RvD- {
   transition: transform 200ms ease;
   width: 1.5em;

package/esm/css/ColorInput.css

@@ -31,6 +31,7 @@
 
 .ColorInput-module_field__JQwJJ:focus-within {
   border-color: var(--colorinput-focus-border);
+  background-clip: padding-box;
 }
 
 .ColorInput-module_swatch__sLvyf {
@@ -41,10 +42,15 @@
   margin: 0;
   padding: 0;
   cursor: pointer;
-  border: 1px solid var(--colorinput-popup-border);
+  border: 0;
   border-radius: 6px;
   appearance: none;
   -webkit-appearance: none;
+  transition: transform 0.15s ease;
+}
+
+.ColorInput-module_swatch__sLvyf:not(:disabled):active {
+  transform: scale(0.9);
 }
 
 .ColorInput-module_swatch__sLvyf:focus-visible {

package/esm/css/ColorPicker.css

@@ -19,7 +19,6 @@
   height: 10em;
   cursor: crosshair;
   touch-action: none;
-  border: 1px solid var(--picker-border);
   border-radius: var(--picker-radius);
   background-image:
     linear-gradient(to top, #000, transparent),
@@ -40,6 +39,11 @@
   border-radius: 50%;
   box-shadow: 0 0 0 1px rgb(0 0 0 / 40%);
   outline: none;
+  transition: transform 0.15s ease;
+}
+
+.ColorPicker-module_picker__b-U0f:not(.ColorPicker-module_disabled__jM1X3) .ColorPicker-module_panel__kComH:active .ColorPicker-module_thumb__Vi5yp {
+  transform: scale(1.2);
 }
 
 .ColorPicker-module_thumb__Vi5yp:focus-visible {

package/esm/css/Combobox.css

@@ -39,6 +39,7 @@
 
 .Combobox-module_input__ti3bv:focus {
   border-color: var(--combobox-focus-border-color);
+  background-clip: padding-box;
 }
 
 .Combobox-module_input__ti3bv:disabled {

package/esm/css/DatePicker.css

@@ -39,6 +39,7 @@
 
 .DatePicker-module_input__e7dhN:focus {
   border-color: var(--datepicker-focus-border-color);
+  background-clip: padding-box;
 }
 
 .DatePicker-module_input__e7dhN:disabled {

package/esm/css/DateRangePicker.css

@@ -33,6 +33,7 @@
 
 .DateRangePicker-module_field__4UZhH:focus-within {
   border-color: var(--daterange-focus-border-color);
+  background-clip: padding-box;
 }
 
 .DateRangePicker-module_input__h9sDj {

package/esm/css/Drawer-DrawerWrapper.css

@@ -1,4 +1,4 @@
-@layer Drawer-DrawerWrapper {
+@layer Drawer {
 .DrawerWrapper-module_wrapper__fBKjA {
   position: fixed;
   top: 0;

package/esm/css/Fieldset-FieldsetContent.css

@@ -1,4 +1,4 @@
-@layer Fieldset-FieldsetContent {
+@layer Fieldset {
 .FieldsetContent-module_content__x6tfV > *:first-child {
   margin-top: 0;
 }

package/esm/css/Fieldset-FieldsetFooter.css

@@ -1,4 +1,4 @@
-@layer Fieldset-FieldsetFooter {
+@layer Fieldset {
 .FieldsetFooter-module_footer__UiJ17 {
   display: flex;
   justify-content: space-between;

package/esm/css/Fieldset-FieldsetGroup.css

@@ -1,4 +1,4 @@
-@layer Fieldset-FieldsetGroup {
+@layer Fieldset {
 .FieldsetGroup-module_groupTabs__p2Txr {
   white-space: nowrap;
   overflow-y: hidden;

package/esm/css/Fieldset-FieldsetSubtitle.css

@@ -1,4 +1,4 @@
-@layer Fieldset-FieldsetSubtitle {
+@layer Fieldset {
 .FieldsetSubtitle-module_subtitle__h-9Hh {
   font-size: 0.875em;
   line-height: 1.6;

package/esm/css/Fieldset-FieldsetTitle.css

@@ -1,4 +1,4 @@
-@layer Fieldset-FieldsetTitle {
+@layer Fieldset {
 .FieldsetTitle-module_title__B1QAm {
   line-height: 1.5;
   display: inline-flex;

package/esm/css/Grid-BasicItem.css

@@ -1,4 +1,4 @@
-@layer Grid-BasicItem {
+@layer Grid {
 .BasicItem-module_item__Jar5a {
   font-size: var(--grid-font-size, inherit);
   height: var(--grid-height, auto);

package/esm/css/Image-ImageBrowser.css

@@ -1,4 +1,4 @@
-@layer Image-ImageBrowser {
+@layer Image {
 .ImageBrowser-module_title__8yGWk {
   font-size: 0.75em;
 }

package/esm/css/Image-ImageBrowserHttpsIcon.css

@@ -1,4 +1,4 @@
-@layer Image-ImageBrowserHttpsIcon {
+@layer Image {
 .ImageBrowserHttpsIcon-module_svg__xiI3S {
   width: 1em;
   height: 1em;

package/esm/css/Image-ImageSkeleton.css

@@ -1,4 +1,4 @@
-@layer Image-ImageSkeleton {
+@layer Image {
 .ImageSkeleton-module_skeleton__uWwK- {
   position: absolute;
   top: 0;

package/esm/css/Input-InputBlockLabel.css

@@ -1,4 +1,4 @@
-@layer Input-InputBlockLabel {
+@layer Input {
 .InputBlockLabel-module_label__uTays {
   display: block;
   font-weight: normal;

package/esm/css/Input-InputIcon.css

@@ -1,4 +1,4 @@
-@layer Input-InputIcon {
+@layer Input {
 .InputIcon-module_inputIcon__DYoco {
   box-sizing: border-box;
   display: inline-flex;

package/esm/css/Input-InputIconClear.css

@@ -1,4 +1,4 @@
-@layer Input-InputIconClear {
+@layer Input {
 .InputIconClear-module_clearIcon__2ODYc {
   box-sizing: border-box;
   display: inline-flex;

package/esm/css/Input-InputLabel.css

@@ -1,4 +1,4 @@
-@layer Input-InputLabel {
+@layer Input {
 .InputLabel-module_span__ek5IE {
   display: inline-flex;
   width: initial;

package/esm/css/Input.css

@@ -53,6 +53,7 @@
 
 .Input-module_inputWrapper__WpYTp.Input-module_hover__Gq-MR {
   border-color: var(--input-focus-border);
+  background-clip: padding-box;
 }
 
 .Input-module_input__hCma0 {

package/esm/css/Link-Icon.css

@@ -1,4 +1,4 @@
-@layer Link-Icon {
+@layer Link {
 .Icon-module_icon__CJT1r {
   margin: 0 0 -1px 0.1875em;
   display: inline-flex;

package/esm/css/MdxWidgets-MockPage.css

@@ -1,4 +1,4 @@
-@layer MdxWidgets-MockPage {
+@layer MdxWidgets {
 .MockPage-module_section__j-IxP {
   position: fixed;
   width: 100vw;