react-better-html 1.1.219 → 1.1.221

package/dist/index.mjs

@@ -1706,20 +1706,22 @@ DivComponent.box = forwardRef6(function Box({
   rightElement,
   lightMode,
   headerBackgroundColor,
+  activeColor,
   isActive,
   children,
   ...props
 }, ref) {
   const theme2 = useTheme7();
   const withClick = props.onClick || props.onClickWithValue;
+  const readyActiveColor = activeColor ?? theme2.colors.primary;
   return /* @__PURE__ */ jsxs3(
     DivComponent,
     {
       color: isActive ? theme2.colors.base : void 0,
-      backgroundColor: isActive ? theme2.colors.primary : theme2.colors.backgroundContent,
-      border: `1px solid ${isActive ? theme2.colors.primary : theme2.colors.border}`,
+      backgroundColor: isActive ? readyActiveColor : theme2.colors.backgroundContent,
+      border: `1px solid ${isActive ? readyActiveColor : theme2.colors.border}`,
       borderRadius: theme2.styles.borderRadius,
-      borderColorHover: withClick && !isActive ? theme2.colors.primary : void 0,
+      borderColorHover: withClick && !isActive ? readyActiveColor : void 0,
       filterHover: withClick && isActive ? "brightness(0.9)" : void 0,
       cursor: withClick ? "pointer" : void 0,
       paddingBlock: title ? theme2.styles.space : theme2.styles.gap,
@@ -7103,18 +7105,14 @@ var FoldableComponent = forwardRef18(function Foldable({
       observer.disconnect();
     };
   }, [isOpen]);
-  useImperativeHandle5(
-    ref,
-    () => {
-      return {
-        open,
-        close,
-        toggle: toggleOpen,
-        isOpen
-      };
-    },
-    [open, close, toggleOpen, isOpen]
-  );
+  useImperativeHandle5(ref, () => {
+    return {
+      open,
+      close,
+      toggle: toggleOpen,
+      isOpen
+    };
+  }, [open, close, toggleOpen, isOpen]);
   return /* @__PURE__ */ jsxs22(Div_default.column, { width: "100%", ...props, children: [
     renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ jsxs22(
       Div_default.row,