react-better-html 1.1.128 → 1.1.130

package/dist/index.mjs

@@ -1667,7 +1667,7 @@ import styled5, { css } from "styled-components";
 import { memo as memo3 } from "react";
 import styled3 from "styled-components";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var StyledDiv = styled3(Div_default)`
+var StyledDiv = styled3.div`
    @keyframes loaderAnimation {
       to {
          transform: rotate(360deg);
@@ -1691,8 +1691,8 @@ var LoaderComponent = function Loader({
   const readyColor = color ?? theme2.colors.textPrimary;
   const readyWidth = width ?? size / 3;
   const mask = `radial-gradient(farthest-side, #0000 calc(100% - ${readyWidth}px), #000 0)`;
-  return /* @__PURE__ */ jsx3(
-    StyledDiv,
+  return /* @__PURE__ */ jsx3(StyledDiv, { children: /* @__PURE__ */ jsx3(
+    Div_default,
     {
       width: size + readyWidth * 2,
       height: size + readyWidth * 2,
@@ -1704,7 +1704,7 @@ var LoaderComponent = function Loader({
       animation: !disabled ? "loaderAnimation .6s infinite linear" : void 0,
       ...props
     }
-  );
+  ) });
 };
 LoaderComponent.box = function Box({ text = "Loading...", size = 20, ...props }) {
   const theme2 = useTheme();
@@ -2146,6 +2146,7 @@ var StyledDiv2 = styled6.div.withConfig({
       }
    }
 `;
+var minWidth = 250;
 var updateInterval = 20;
 var getAnimationInName = (position) => ({
   left: "fadeInFromLeft",
@@ -2263,7 +2264,9 @@ function Alert2({ alert }) {
   return /* @__PURE__ */ jsx6(StyledDiv2, { theme: theme2, children: /* @__PURE__ */ jsx6(
     Div_default.box,
     {
-      maxWidth: pluginConfig.maxWidth,
+      width: "fit-content",
+      maxWidth: Math.max(minWidth, pluginConfig.maxWidth ?? defaultAlertsPluginOptions.maxWidth),
+      minWidth,
       boxShadow: "0px 10px 20px #00000020",
       onMouseEnter,
       onMouseMove: onMouseEnter,
@@ -2293,7 +2296,7 @@ function Alert2({ alert }) {
           ),
           /* @__PURE__ */ jsxs3(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
             /* @__PURE__ */ jsx6(Text_default, { fontSize: 18, fontWeight: 700, children: alert.title ?? alertData[alert.type].title }),
-            /* @__PURE__ */ jsx6(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: alert.message })
+            /* @__PURE__ */ jsx6(Text_default, { color: theme2.colors.textSecondary, children: alert.message })
           ] }),
           pluginConfig.withCloseButton && /* @__PURE__ */ jsx6(Button_default.icon, { icon: "XMark", alignSelf: "flex-start", onClick: onClickCloseAlert })
         ] }),
@@ -2343,6 +2346,7 @@ function AlertsHolder() {
       left,
       right,
       gap: theme2.styles.gap,
+      alignItems: pluginConfig.align === "center" ? "center" : pluginConfig.align === "right" ? "flex-end" : void 0,
       transform: pluginConfig.align === "center" ? "translateX(-50%)" : void 0,
       children: alerts.map((alert) => /* @__PURE__ */ jsx7(Alert_default, { alert }, alert.id))
     }