@bolio-ui/core 3.0.0 → 3.0.2

package/esm/BolioUIProvider/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   BolioUIProvider_default
-} from "../chunk-4DH6SOK4.js";
+} from "../chunk-6ASDJ72V.js";
 import "../chunk-5HRVN7L7.js";
 import "../chunk-A3BIV2QM.js";
 import "../chunk-33BUV2RX.js";

package/esm/CssBaseline/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   CssBaseline_default
-} from "../chunk-WIIDIZYK.js";
+} from "../chunk-5BESEB77.js";
 import "../chunk-V5I4ORQQ.js";
 import "../chunk-FEA5BJ35.js";
 import "../chunk-X5PGXMVQ.js";

package/esm/{chunk-WIIDIZYK.js → chunk-5BESEB77.js}

@@ -15,7 +15,10 @@ var CssBaseline = ({
       "style",
       {
         dangerouslySetInnerHTML: {
+          // In a layer, below the layers of the components (styles.css declares
+          // it first), otherwise these element rules would beat the components.
           __html: `
+        @layer BolioUIBaseline {
         html,
         body {
           background-color: ${theme.palette.background};
@@ -314,6 +317,7 @@ var CssBaseline = ({
           background-color: ${theme.palette.selection};
           color: ${theme.palette.foreground};
         }
+        }
       `
         }
       }

package/esm/{chunk-4DH6SOK4.js → chunk-6ASDJ72V.js}

@@ -38,43 +38,34 @@ import {
 } from "./chunk-5KUROAEP.js";
 
 // core/BolioUIProvider/BolioUIProvider.tsx
-import { useCallback, useMemo as useMemo4, useState as useState2 } from "react";
+import { useCallback, useMemo as useMemo4, useState } from "react";
 
 // core/BolioUIProvider/ThemeProvider.tsx
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+var noThemes = [];
 var ThemeProvider = ({
   children,
   themeType,
-  themes = []
+  themes = noThemes
 }) => {
-  const [allThemes, setAllThemes] = useState({
-    themes: Themes_default.getPresets()
-  });
+  const allThemes = useMemo(() => {
+    const safeThemes = themes.filter(
+      (item) => Themes_default.isAvailableThemeType(item.type)
+    );
+    return { themes: Themes_default.getPresets().concat(safeThemes) };
+  }, [themes]);
   const currentTheme = useMemo(() => {
     const theme = allThemes.themes.find((item) => item.type === themeType);
     if (theme) return theme;
     return Themes_default.getPresetStaticTheme();
   }, [allThemes, themeType]);
-  useEffect(() => {
-    if (!(themes == null ? void 0 : themes.length)) return;
-    setAllThemes((last) => {
-      const safeThemes = themes.filter(
-        (item) => Themes_default.isAvailableThemeType(item.type)
-      );
-      const nextThemes = Themes_default.getPresets().concat(safeThemes);
-      return {
-        ...last,
-        themes: nextThemes
-      };
-    });
-  }, [themes]);
   return /* @__PURE__ */ jsx(AllThemesContext.Provider, { value: allThemes, children: /* @__PURE__ */ jsx(ThemeContext.Provider, { value: currentTheme, children }) });
 };
 var ThemeProvider_default = ThemeProvider;
 
 // core/use-toasts/toast-container.tsx
-import { useEffect as useEffect2, useMemo as useMemo3 } from "react";
+import { useEffect, useMemo as useMemo3 } from "react";
 import { createPortal } from "react-dom";
 
 // core/use-toasts/toast-item.tsx
@@ -253,7 +244,7 @@ var ToastContainer = () => {
     );
   };
   const latestHover = use_latest_default(hoverHandler);
-  useEffect2(() => {
+  useEffect(() => {
     const index = toasts.findIndex(
       (r) => r._internalIdent === lastUpdateToastId
     );
@@ -263,7 +254,7 @@ var ToastContainer = () => {
     if (hasVisible || !hoveringRef.current) return;
     latestHover.current(false);
   }, [toasts, lastUpdateToastId, hoveringRef, latestHover]);
-  useEffect2(() => {
+  useEffect(() => {
     let timeout = null;
     const timer = window.setInterval(() => {
       if (toasts.length === 0) return;
@@ -303,7 +294,7 @@ var BolioUIProvider = ({
   themeType,
   children
 }) => {
-  const [lastUpdateToastId, setLastUpdateToastId] = useState2(null);
+  const [lastUpdateToastId, setLastUpdateToastId] = useState(null);
   const [toasts, setToasts, toastsRef] = use_current_state_default([]);
   const [toastLayout, setToastLayout, toastLayoutRef] = use_current_state_default(defaultToastLayout);
   const updateToasts = useCallback(

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

@@ -1,4 +1,4 @@
-@layer Chip-ChipGroup {
+@layer Chip {
 .ChipGroup-module_group__6ARIk {
   display: flex;
   flex-wrap: wrap;

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/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/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;

package/esm/css/Menu-MenuItem.css

@@ -1,4 +1,4 @@
-@layer Menu-MenuItem {
+@layer Menu {
 .MenuItem-module_menuItem__hgTYG {
   display: flex;
   align-items: center;

package/esm/css/Menu-MenuList.css

@@ -1,4 +1,4 @@
-@layer Menu-MenuList {
+@layer Menu {
 .MenuList-module_menuList__8VtPL {
   box-sizing: border-box;
   min-width: 12em;

package/esm/css/Menu-MenuSub.css

@@ -1,4 +1,4 @@
-@layer Menu-MenuSub {
+@layer Menu {
 .MenuSub-module_menuSub__yZ0fN {
   position: relative;
 }

package/esm/css/Modal-ModalAction.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalAction {
+@layer Modal {
 .ModalAction-module_action__hEtmQ.ModalAction-module_btn__If5jI:hover,
 .ModalAction-module_action__hEtmQ.ModalAction-module_btn__If5jI:focus-visible {
   color: var(--modal-action-hover-color);

package/esm/css/Modal-ModalActions.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalActions {
+@layer Modal {
 .ModalActions-module_footer__gDr-2 {
   display: flex;
   overflow: hidden;

package/esm/css/Modal-ModalContent.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalContent {
+@layer Modal {
 .ModalContent-module_content__RXGwI {
   position: relative;
   text-align: left;

package/esm/css/Modal-ModalSubtitle.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalSubtitle {
+@layer Modal {
 .ModalSubtitle-module_subtitle__Hudi- {
   font-weight: normal;
   display: inline-block;

package/esm/css/Modal-ModalTitle.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalTitle {
+@layer Modal {
 .ModalTitle-module_title__ThnLn {
   line-height: 1.6;
   font-weight: normal;

package/esm/css/Modal-ModalWrapper.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalWrapper {
+@layer Modal {
 .ModalWrapper-module_wrapper__DGcJw {
   max-width: 100%;
   vertical-align: middle;

package/esm/css/Page-PageHeader.css

@@ -1,4 +1,4 @@
-@layer Page-PageHeader {
+@layer Page {
 .PageHeader-module_center__yFLt0 {
   display: flex;
   justify-content: center;

package/esm/css/Pagination-PaginationEllipsis.css

@@ -1,4 +1,4 @@
-@layer Pagination-PaginationEllipsis {
+@layer Pagination {
 .PaginationEllipsis-module_svg__2Fipb {
   color: currentColor;
   stroke: currentColor;

package/esm/css/Pagination-PaginationItem.css

@@ -1,4 +1,4 @@
-@layer Pagination-PaginationItem {
+@layer Pagination {
 .PaginationItem-module_li__luFDz {
   margin-right: 0.428em;
   display: inline-block;

package/esm/css/Popover-PopoverItem.css

@@ -1,4 +1,4 @@
-@layer Popover-PopoverItem {
+@layer Popover {
 .PopoverItem-module_item__ntzzC {
   display: flex;
   box-sizing: border-box;

package/esm/css/Radio-RadioGroup.css

@@ -1,4 +1,4 @@
-@layer Radio-RadioGroup {
+@layer Radio {
 .RadioGroup-module_radioGroup__6XPZE {
   display: flex;
 }

package/esm/css/SegmentedControl-SegmentedControlItem.css

@@ -1,4 +1,4 @@
-@layer SegmentedControl-SegmentedControlItem {
+@layer SegmentedControl {
 .SegmentedControlItem-module_item__R48V1 {
   position: relative;
   display: flex;

package/esm/css/Select-SelectDropdown.css

@@ -1,4 +1,4 @@
-@layer Select-SelectDropdown {
+@layer Select {
 .SelectDropdown-module_selectDropdown__gcGH- {
   border-radius: var(--select-dropdown-radius);
   border: 1px solid var(--select-dropdown-border);

package/esm/css/Select-SelectIcon.css

@@ -1,4 +1,4 @@
-@layer Select-SelectIcon {
+@layer Select {
 .SelectIcon-module_icon__vgja5 {
   color: inherit;
   stroke: currentColor;

package/esm/css/Select-SelectIconClear.css

@@ -1,4 +1,4 @@
-@layer Select-SelectIconClear {
+@layer Select {
 .SelectIconClear-module_clearIcon__p5IH4 {
   padding: 0 0 0 0.5em;
   margin: 0;

package/esm/css/Select-SelectInput.css

@@ -1,4 +1,4 @@
-@layer Select-SelectInput {
+@layer Select {
 .SelectInput-module_input__xsgNv {
   position: fixed;
   top: -10000px;

package/esm/css/Select-SelectMultipleValue.css

@@ -1,4 +1,4 @@
-@layer Select-SelectMultipleValue {
+@layer Select {
 .SelectMultipleValue-module_item__P4Dn3 {
   display: inline-flex;
   justify-items: center;

package/esm/css/Select-SelectOption.css

@@ -1,4 +1,4 @@
-@layer Select-SelectOption {
+@layer Select {
 .SelectOption-module_option__NAlFp {
   display: flex;
   max-width: 100%;

package/esm/css/Shared-backdrop.css

@@ -1,4 +1,4 @@
-@layer Shared-backdrop {
+@layer Shared {
 .backdrop-module_backdrop__fZn5s {
   position: fixed;
   top: 0;

package/esm/css/Shared-ellipsis.css

@@ -1,4 +1,4 @@
-@layer Shared-ellipsis {
+@layer Shared {
 .ellipsis-module_ellipsis__kLorN {
   overflow: hidden;
   text-overflow: ellipsis;

package/esm/css/Slider-SliderDot.css

@@ -1,4 +1,4 @@
-@layer Slider-SliderDot {
+@layer Slider {
 .SliderDot-module_dot__1VxCn {
   position: absolute;
   top: 50%;

package/esm/css/Slider-SliderMark.css

@@ -1,4 +1,4 @@
-@layer Slider-SliderMark {
+@layer Slider {
 .SliderMark-module_span__gKYKM {
   position: absolute;
   width: 2px;

package/esm/css/Snippet-SnippetIcon.css

@@ -1,4 +1,4 @@
-@layer Snippet-SnippetIcon {
+@layer Snippet {
 .SnippetIcon-module_icon__HUZlq {
   width: 1.69em;
   height: 1.69em;

package/esm/css/Stepper-StepperStep.css

@@ -1,4 +1,4 @@
-@layer Stepper-StepperStep {
+@layer Stepper {
 .StepperStep-module_step__Of2Aj {
   display: flex;
   flex: 1;

package/esm/css/Table-TableBody.css

@@ -1,4 +1,4 @@
-@layer Table-TableBody {
+@layer Table {
 .TableBody-module_tr__lTn-M {
   transition: background-color 0.25s ease;
   font-size: inherit;

package/esm/css/Table-TableHead.css

@@ -1,4 +1,4 @@
-@layer Table-TableHead {
+@layer Table {
 .TableHead-module_thead__zMtMt {
   border-collapse: separate;
   border-spacing: 0;

package/esm/css/Table-TableSelectBox.css

@@ -1,4 +1,4 @@
-@layer Table-TableSelectBox {
+@layer Table {
 .TableSelectBox-module_box__UXj-E {
   display: block;
   width: 1em;

package/esm/css/Tabs-TabsItem.css

@@ -1,4 +1,4 @@
-@layer Tabs-TabsItem {
+@layer Tabs {
 .TabsItem-module_tab__uI-6R {
   position: relative;
   box-sizing: border-box;

package/esm/css/Tooltip-TooltipContent.css

@@ -1,4 +1,4 @@
-@layer Tooltip-TooltipContent {
+@layer Tooltip {
 .TooltipContent-module_tooltipContent__zfz-P {
   box-sizing: border-box;
   position: absolute;

package/esm/css/Tooltip-TooltipIcon.css

@@ -1,4 +1,4 @@
-@layer Tooltip-TooltipIcon {
+@layer Tooltip {
 .TooltipIcon-module_icon__lx2Kw {
   width: 0;
   height: 0;

package/esm/css/use-toasts-toast-container.css

@@ -1,4 +1,4 @@
-@layer use-toasts-toast-container {
+@layer use-toasts {
 .toast-container-module_toasts__wLlVr {
   position: fixed;
   width: auto;

package/esm/css/use-toasts-toast-item.css

@@ -1,4 +1,4 @@
-@layer use-toasts-toast-item {
+@layer use-toasts {
 .toast-item-module_toast__R-DjO {
   max-height: var(--toast-item-max-height);
   display: flex;

package/esm/index.js

@@ -143,7 +143,7 @@ import {
 } from "./chunk-RRFCNZ2T.js";
 import {
   CssBaseline_default
-} from "./chunk-WIIDIZYK.js";
+} from "./chunk-5BESEB77.js";
 import {
   DatePicker_default
 } from "./chunk-ICACLCJR.js";
@@ -260,7 +260,7 @@ import {
 } from "./chunk-RD4CEB5S.js";
 import {
   BolioUIProvider_default
-} from "./chunk-4DH6SOK4.js";
+} from "./chunk-6ASDJ72V.js";
 import "./chunk-5HRVN7L7.js";
 import "./chunk-A3BIV2QM.js";
 import "./chunk-33BUV2RX.js";