react-better-html 1.1.128 → 1.1.130

package/dist/index.js

@@ -1753,7 +1753,7 @@ var import_styled_components5 = __toESM(require("styled-components"));
 var import_react4 = require("react");
 var import_styled_components3 = __toESM(require("styled-components"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var StyledDiv = (0, import_styled_components3.default)(Div_default)`
+var StyledDiv = import_styled_components3.default.div`
    @keyframes loaderAnimation {
       to {
          transform: rotate(360deg);
@@ -1777,8 +1777,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__ */ (0, import_jsx_runtime3.jsx)(
-    StyledDiv,
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledDiv, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Div_default,
     {
       width: size + readyWidth * 2,
       height: size + readyWidth * 2,
@@ -1790,7 +1790,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();
@@ -2232,6 +2232,7 @@ var StyledDiv2 = import_styled_components6.default.div.withConfig({
       }
    }
 `;
+var minWidth = 250;
 var updateInterval = 20;
 var getAnimationInName = (position) => ({
   left: "fadeInFromLeft",
@@ -2349,7 +2350,9 @@ function Alert2({ alert }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledDiv2, { theme: theme2, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     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,
@@ -2379,7 +2382,7 @@ function Alert2({ alert }) {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { fontSize: 18, fontWeight: 700, children: alert.title ?? alertData[alert.type].title }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: alert.message })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { color: theme2.colors.textSecondary, children: alert.message })
           ] }),
           pluginConfig.withCloseButton && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button_default.icon, { icon: "XMark", alignSelf: "flex-start", onClick: onClickCloseAlert })
         ] }),
@@ -2429,6 +2432,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__ */ (0, import_jsx_runtime7.jsx)(Alert_default, { alert }, alert.id))
     }