@stenajs-webui/elements 23.12.11 → 23.13.1

package/dist/components/ui/banners/banner/Banner.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { AriaAttributes, ReactNode } from "react";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { DivProps, HeadingVariant } from "@stenajs-webui/core";
+import { BoxProps, DivProps, HeadingVariant } from "@stenajs-webui/core";
 export type BannerVariant = "standard" | "info" | "success" | "warning" | "error";
 export interface BannerProps extends AriaAttributes {
     icon?: IconDefinition;
@@ -12,6 +12,7 @@ export interface BannerProps extends AriaAttributes {
     contentRight?: ReactNode;
     variant?: BannerVariant;
     children?: ReactNode;
+    contentFlex?: BoxProps["flex"];
     /**
      * The role prop of the element, used for accessibility.
      * If not set, it will default to "status" when variant is success, error or warning, otherwise not set.

package/dist/index.es.js

@@ -3803,7 +3803,7 @@ const b5 = ({
   transform: d,
   display: Z,
   ...z
-}, p) {
+}, f) {
   if (!i)
     return null;
   const x = typeof r == "string" ? r : r / 10 + "rem";
@@ -3818,7 +3818,7 @@ const b5 = ({
       rotation: a,
       spin: s,
       style: { fontSize: x, ...m },
-      ref: p,
+      ref: f,
       transform: d,
       ...z
     }
@@ -3877,18 +3877,19 @@ const b5 = ({
   variant: a = "standard",
   loading: r = !1,
   role: s,
-  ...m
+  contentFlex: m,
+  ...d
 }) => {
-  const d = s ?? (a === "error" || a === "warning" || a === "success" ? "status" : void 0), Z = j(m), z = a === "error" ? "polite" : void 0;
+  const Z = s ?? (a === "error" || a === "warning" || a === "success" ? "status" : void 0), z = j(d), f = a === "error" ? "polite" : void 0;
   return /* @__PURE__ */ c(
     y,
     {
       className: l(r1.banner, r1[a]),
       spacing: L || e && n ? 2 : 1,
       indent: 2,
-      role: d,
-      "aria-live": z,
-      ...Z,
+      role: Z,
+      "aria-live": f,
+      ...z,
       children: [
         /* @__PURE__ */ c(M, { justifyContent: "space-between", children: [
           /* @__PURE__ */ t(M, { flex: "none", width: n2, alignItems: "center", children: /* @__PURE__ */ t("div", { className: r1.iconBackground, children: (o || C2[a] || r) && /* @__PURE__ */ t(B, { children: r ? /* @__PURE__ */ t(E1, { size: "tiny" }) : /* @__PURE__ */ t(
@@ -3909,7 +3910,7 @@ const b5 = ({
         ] }),
         L && /* @__PURE__ */ c(M, { children: [
           /* @__PURE__ */ t(b, { minWidth: n2 }),
-          /* @__PURE__ */ c(b, { children: [
+          /* @__PURE__ */ c(b, { flex: m, children: [
             /* @__PURE__ */ t(P, {}),
             L
           ] })
@@ -4140,7 +4141,7 @@ const b5 = ({
   leftWrapperClassName: d,
   rightWrapperClassName: Z,
   size: z = "medium",
-  responsiveIconOnly: p = !1
+  responsiveIconOnly: f = !1
 }) => {
   const x = (e || C || n || L) && /* @__PURE__ */ t(
     "div",
@@ -4149,7 +4150,7 @@ const b5 = ({
         A.leftWrapper,
         A[z],
         d,
-        p && A.responsiveIconOnly
+        f && A.responsiveIconOnly
       ),
       children: e ? /* @__PURE__ */ t(
         F,
@@ -4178,7 +4179,7 @@ const b5 = ({
         A.rightWrapper,
         A[z],
         Z,
-        p && A.responsiveIconOnly
+        f && A.responsiveIconOnly
       ),
       children: i || (o ? /* @__PURE__ */ t(
         F,
@@ -4198,7 +4199,7 @@ const b5 = ({
         className: l(
           A.label,
           s,
-          p && A.responsiveIconOnly
+          f && A.responsiveIconOnly
         ),
         children: a
       }
@@ -4220,7 +4221,7 @@ const b5 = ({
     rightIcon: d,
     right: Z,
     disabled: z,
-    onClick: p,
+    onClick: f,
     iconClassName: x,
     labelClassName: $,
     spinnerClassName: Q,
@@ -4242,10 +4243,10 @@ const b5 = ({
       {
         ref: s5,
         onClick: (N1) => {
-          if (p) {
+          if (f) {
             if (N1.stopPropagation(), N1.preventDefault(), z || a || o)
               return;
-            p(N1);
+            f(N1);
           }
         },
         className: l(
@@ -4465,7 +4466,7 @@ const b5 = ({
       )
     }
   );
-}), M3 = "_menuButton_skzzy_1", Z3 = "_label_skzzy_44", f3 = "_buttonLink_skzzy_50", p3 = "_button_skzzy_50", h3 = "_hasLabel_skzzy_69", g3 = "_success_skzzy_73", x3 = "_danger_skzzy_80", _3 = "_disabled_skzzy_87", N3 = "_iconOnly_skzzy_119", b3 = "_selected_skzzy_124", f = {
+}), M3 = "_menuButton_skzzy_1", Z3 = "_label_skzzy_44", f3 = "_buttonLink_skzzy_50", p3 = "_button_skzzy_50", h3 = "_hasLabel_skzzy_69", g3 = "_success_skzzy_73", x3 = "_danger_skzzy_80", _3 = "_disabled_skzzy_87", N3 = "_iconOnly_skzzy_119", b3 = "_selected_skzzy_124", p = {
   menuButton: M3,
   label: Z3,
   buttonLink: f3,
@@ -5136,14 +5137,14 @@ function u1(e, C, n, L, i, o) {
   var d = o.get(e);
   if (d)
     return d;
-  o.set(e, a), Y9(e) ? e.forEach(function(p) {
-    a.add(u1(p, C, n, p, e, o));
-  }) : K9(e) && e.forEach(function(p, x) {
-    a.set(x, u1(p, C, n, x, e, o));
+  o.set(e, a), Y9(e) ? e.forEach(function(f) {
+    a.add(u1(f, C, n, f, e, o));
+  }) : K9(e) && e.forEach(function(f, x) {
+    a.set(x, u1(f, C, n, x, e, o));
   });
   var Z = L5, z = r ? void 0 : Z(e);
-  return o6(z || e, function(p, x) {
-    z && (x = p, p = e[x]), U2(a, x, u1(p, C, n, x, e, o));
+  return o6(z || e, function(f, x) {
+    z && (x = f, f = e[x]), U2(a, x, u1(f, C, n, x, e, o));
   }), a;
 }
 function x8(e) {
@@ -5191,7 +5192,7 @@ const q1 = ({
     w,
     {
       variant: "bold",
-      className: f.label,
+      className: p.label,
       color: i ?? N("--swui-text-primary-color"),
       children: o.label
     }
@@ -5227,20 +5228,20 @@ const w8 = g(
     left: d,
     right: Z,
     success: z = !1,
-    loading: p = !1,
+    loading: f = !1,
     ...x
   }, $) {
     const Q = "label" in x ? { label: x.label } : { renderLabel: x.renderLabel }, X = A8(x, ["label", "renderLabel"]), e1 = T2(), a1 = e ?? e1;
     return /* @__PURE__ */ c(b, { gap: 1, children: [
-      /* @__PURE__ */ t(b, { className: l(f.menuButton), width: "100%", children: /* @__PURE__ */ c(
+      /* @__PURE__ */ t(b, { className: l(p.menuButton), width: "100%", children: /* @__PURE__ */ c(
         "button",
         {
           className: l(
-            f.button,
-            L && f.selected,
-            s && f.disabled,
-            f[m],
-            f.hasLabel,
+            p.button,
+            L && p.selected,
+            s && p.disabled,
+            p[m],
+            p.hasLabel,
             i
           ),
           disabled: s,
@@ -5254,7 +5255,7 @@ const w8 = g(
               {
                 leftIcon: o,
                 left: d,
-                right: p ? /* @__PURE__ */ t(I2, {}) : Z,
+                right: f ? /* @__PURE__ */ t(I2, {}) : Z,
                 rightIcon: z ? o1 : a,
                 color: "var(--current-text-color)",
                 ...Q
@@ -5289,7 +5290,7 @@ const w8 = g(
   return /* @__PURE__ */ t(
     b,
     {
-      className: l(f.menuButton),
+      className: l(p.menuButton),
       width: "100%",
       borderRadius: "99rem",
       overflow: "hidden",
@@ -5298,11 +5299,11 @@ const w8 = g(
         "button",
         {
           className: l(
-            f.button,
-            e && f.selected,
-            L && f.disabled,
-            f.iconOnly,
-            f[i],
+            p.button,
+            e && p.selected,
+            L && p.disabled,
+            p.iconOnly,
+            p[i],
             C
           ),
           disabled: L,
@@ -5338,21 +5339,21 @@ const w8 = g(
       color: "var(--current-text-color)"
     }
   ), m = "renderLink" in a ? a : void 0, d = "selected" in a ? a : void 0, Z = l(
-    f.button,
-    f.buttonLink,
-    e ? f.hasLabel : void 0,
-    L && f.disabled,
-    d?.selected && f.selected,
-    f[i],
+    p.button,
+    p.buttonLink,
+    e ? p.hasLabel : void 0,
+    L && p.disabled,
+    d?.selected && p.selected,
+    p[i],
     C
-  ), { renderLink: z, selected: p, ...x } = a, $ = m?.renderLink?.(
+  ), { renderLink: z, selected: f, ...x } = a, $ = m?.renderLink?.(
     {
       ...x,
       className: Z,
       href: L ? void 0 : o,
       children: s
     },
-    f.selected
+    p.selected
   ) ?? /* @__PURE__ */ t(
     "a",
     {
@@ -5363,7 +5364,7 @@ const w8 = g(
       children: s
     }
   );
-  return /* @__PURE__ */ t(b, { className: l(f.menuButton), width: "100%", children: $ });
+  return /* @__PURE__ */ t(b, { className: l(p.menuButton), width: "100%", children: $ });
 }), jo = g(function({ className: e, icon: C, disabled: n, variant: L = "standard", href: i, ...o }, a) {
   const r = /* @__PURE__ */ t(M, { justifyContent: "center", indent: 1, children: /* @__PURE__ */ t(b, { alignItems: "center", justifyContent: "center", width: "20px", children: /* @__PURE__ */ t(
     v,
@@ -5374,35 +5375,35 @@ const w8 = g(
       "data-hover": !0
     }
   ) }) }), s = "renderLink" in o ? o : void 0, m = "selected" in o ? o : void 0, d = l(
-    f.button,
-    f.buttonLink,
-    n && f.disabled,
-    m?.selected && f.selected,
-    f.iconOnly,
-    f[L],
+    p.button,
+    p.buttonLink,
+    n && p.disabled,
+    m?.selected && p.selected,
+    p.iconOnly,
+    p[L],
     e
-  ), { renderLink: Z, selected: z, ...p } = o, x = s?.renderLink?.(
+  ), { renderLink: Z, selected: z, ...f } = o, x = s?.renderLink?.(
     {
-      ...p,
+      ...f,
       className: d,
       href: n ? void 0 : i,
       children: r
     },
-    f.selected
+    p.selected
   ) ?? /* @__PURE__ */ t(
     "a",
     {
       className: d,
       href: n ? void 0 : i,
       ref: a,
-      ...p,
+      ...f,
       children: r
     }
   );
   return /* @__PURE__ */ t(
     b,
     {
-      className: l(f.menuButton),
+      className: l(p.menuButton),
       width: "100%",
       borderRadius: "99rem",
       overflow: "hidden",
@@ -5425,7 +5426,7 @@ const w8 = g(
   rightIcon: d,
   right: Z,
   responsiveIconOnly: z,
-  ...p
+  ...f
 }, x) {
   const $ = O1(
     C,
@@ -5446,7 +5447,7 @@ const w8 = g(
         X && k.labelOnly,
         n
       ),
-      ...p,
+      ...f,
       children: /* @__PURE__ */ t(
         R1,
         {
@@ -5936,7 +5937,7 @@ const w8 = g(
   responsiveIconOnly: d,
   ...Z
 }, z) {
-  const p = O1(
+  const f = O1(
     n,
     s,
     void 0,
@@ -5961,7 +5962,7 @@ const w8 = g(
           left: i,
           right: a,
           rightIcon: r,
-          label: p,
+          label: f,
           responsiveIconOnly: d
         }
       )