@stenajs-webui/elements 21.29.16 → 21.30.0

package/dist/components/ui/buttons/menu-button/internal/MenuButtonContent.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { ReactNode } from "react";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 export interface MenuButtonContentProps {
     leftIcon?: IconDefinition;
     left?: ReactNode;

package/dist/index.es.js

@@ -2,11 +2,11 @@
 import * as y from "react";
 import { forwardRef as f, Children as a1, useState as R1, useCallback as T, useId as V1, useContext as T1, useMemo as D1 } from "react";
 import { jsx as C, jsxs as r, Fragment as B } from "react/jsx-runtime";
-import { Box as p, getDataProps as H, Column as _, Row as Z, Heading as X, Text as k, Space as I, Indent as t1, exhaustSwitchCaseElseThrow as b1, useForwardedRef as F1, Spacing as j1, SeparatorLine as E1, Txt as S, ScreenReaderOnlyText as O1 } from "@stenajs-webui/core";
+import { Box as x, getDataProps as H, Column as _, Row as Z, Heading as X, Text as k, Space as I, Indent as t1, exhaustSwitchCaseElseThrow as b1, useForwardedRef as F1, Spacing as j1, SeparatorLine as E1, Txt as S, ScreenReaderOnlyText as O1 } from "@stenajs-webui/core";
 import { FontAwesomeIcon as R } from "@fortawesome/react-fontawesome";
 import l from "classnames";
 import { keyframes as P1, ClassNames as W1 } from "@emotion/react";
-import { cssColor as x } from "@stenajs-webui/theme";
+import { cssColor as p } from "@stenajs-webui/theme";
 import { FocusScope as U1, useFocusManager as G1 } from "@react-aria/focus";
 const K1 = ({
   title: n,
@@ -3670,7 +3670,7 @@ const K1 = ({
   if (!o)
     return null;
   const g = typeof c == "string" ? c : c / 10 + "rem";
-  return /* @__PURE__ */ C(p, { justifyContent: "center", alignItems: "center", display: u, children: /* @__PURE__ */ C(
+  return /* @__PURE__ */ C(x, { justifyContent: "center", alignItems: "center", display: u, children: /* @__PURE__ */ C(
     R,
     {
       className: L,
@@ -3766,8 +3766,8 @@ const K1 = ({
         ] })
       ] }),
       i && /* @__PURE__ */ r(Z, { children: [
-        /* @__PURE__ */ C(p, { minWidth: p1 }),
-        /* @__PURE__ */ r(p, { children: [
+        /* @__PURE__ */ C(x, { minWidth: p1 }),
+        /* @__PURE__ */ r(x, { children: [
           /* @__PURE__ */ C(I, {}),
           i
         ] })
@@ -3914,7 +3914,7 @@ const K1 = ({
     {
       icon: C2,
       size: 8,
-      color: x("--lhds-color-ui-700")
+      color: p("--lhds-color-ui-700")
     }
   ) }),
   L
@@ -4229,7 +4229,7 @@ const K1 = ({
     {
       variant: "bold",
       className: M.label,
-      color: "var(--current-text-color, var(--current-color))",
+      color: p("--swui-text-primary-color"),
       children: n
     }
   ),
@@ -4239,12 +4239,12 @@ function _1({
   content: n,
   icon: L
 }) {
-  return n ? /* @__PURE__ */ C(B, { children: n }) : L ? /* @__PURE__ */ C(p, { alignItems: "center", justifyContent: "center", width: "20px", children: /* @__PURE__ */ C(
+  return n ? /* @__PURE__ */ C(B, { children: n }) : L ? /* @__PURE__ */ C(x, { alignItems: "center", justifyContent: "center", width: "20px", children: /* @__PURE__ */ C(
     z,
     {
       icon: L,
       size: 20,
-      color: "var(--current-text-color)",
+      color: p("--swui-text-primary-color"),
       "data-hover": !0
     }
   ) }) : null;
@@ -4268,9 +4268,9 @@ const T5 = f(
     ...g
   }, w) {
     const A = !n && !e;
-    return /* @__PURE__ */ r(p, { children: [
+    return /* @__PURE__ */ r(x, { children: [
       /* @__PURE__ */ C(
-        p,
+        x,
         {
           "aria-expanded": L,
           className: l(M.menuButton),
@@ -4306,7 +4306,7 @@ const T5 = f(
                   {
                     icon: L ? w1 : y1,
                     size: 18,
-                    color: x("--lhds-color-blue-600")
+                    color: p("--lhds-color-blue-600")
                   }
                 )
               ]
@@ -4324,7 +4324,7 @@ const T5 = f(
   contentMenuButton: D5
 }, gC = f(({ children: n, ...L }, e) => /* @__PURE__ */ C("label", { className: F5.contentMenuButton, ref: e, ...L, children: /* @__PURE__ */ C(Z, { justifyContent: "flex-start", alignItems: "center", indent: 2, children: n }) })), bC = f(function({ selected: n, className: L, icon: e, disabled: i, variant: o = "standard", ...a }, t) {
   return /* @__PURE__ */ C(
-    p,
+    x,
     {
       className: l(M.menuButton),
       width: "100%",
@@ -4345,7 +4345,7 @@ const T5 = f(
           disabled: i,
           ref: t,
           ...a,
-          children: /* @__PURE__ */ C(Z, { justifyContent: "center", alignItems: "center", indent: 1, children: /* @__PURE__ */ C(p, { alignItems: "center", justifyContent: "center", width: "20px", children: /* @__PURE__ */ C(
+          children: /* @__PURE__ */ C(Z, { justifyContent: "center", alignItems: "center", indent: 1, children: /* @__PURE__ */ C(x, { alignItems: "center", justifyContent: "center", width: "20px", children: /* @__PURE__ */ C(
             z,
             {
               icon: e,
@@ -4395,10 +4395,10 @@ const T5 = f(
       children: s
     }
   );
-  return /* @__PURE__ */ C(p, { className: l(M.menuButton), width: "100%", children: w });
+  return /* @__PURE__ */ C(x, { className: l(M.menuButton), width: "100%", children: w });
 }), yC = f(function({ className: n, icon: L, disabled: e, variant: i = "standard", href: o, ...a }, t) {
   var w;
-  const c = /* @__PURE__ */ C(Z, { justifyContent: "center", indent: 1, children: /* @__PURE__ */ C(p, { alignItems: "center", justifyContent: "center", width: "20px", children: /* @__PURE__ */ C(
+  const c = /* @__PURE__ */ C(Z, { justifyContent: "center", indent: 1, children: /* @__PURE__ */ C(x, { alignItems: "center", justifyContent: "center", width: "20px", children: /* @__PURE__ */ C(
     z,
     {
       icon: L,
@@ -4434,7 +4434,7 @@ const T5 = f(
     }
   );
   return /* @__PURE__ */ C(
-    p,
+    x,
     {
       className: l(M.menuButton),
       width: "100%",
@@ -4565,15 +4565,15 @@ const T5 = f(
 }) => {
   const a = K5(e), t = X5(e);
   return /* @__PURE__ */ C(
-    p,
+    x,
     {
       borderRadius: "50%",
-      background: x(n ?? Q5(i)),
+      background: p(n ?? Q5(i)),
       width: a,
       height: a,
       justifyContent: "center",
       alignItems: "center",
-      children: /* @__PURE__ */ C(z, { ...o, color: x(L), size: t })
+      children: /* @__PURE__ */ C(z, { ...o, color: p(L), size: t })
     }
   );
 }, K5 = (n) => {
@@ -4654,16 +4654,16 @@ const T5 = f(
   className: i,
   ...o
 }) => /* @__PURE__ */ r(
-  p,
+  x,
   {
     ...o,
-    background: x(L),
+    background: p(L),
     position: e ? "relative" : void 0,
     className: l(d1.cardy, i),
     children: [
       n,
       e && /* @__PURE__ */ C(
-        p,
+        x,
         {
           top: 0,
           bottom: 0,
@@ -4684,7 +4684,7 @@ const T5 = f(
   leftIcon: e,
   headingLevel: i,
   ...o
-}) => /* @__PURE__ */ r(p, { className: d1.cardyIndent, children: [
+}) => /* @__PURE__ */ r(x, { className: d1.cardyIndent, children: [
   /* @__PURE__ */ r(Z, { alignItems: "center", justifyContent: "space-between", gap: 2, children: [
     /* @__PURE__ */ r(Z, { alignItems: "center", gap: 2, children: [
       e && /* @__PURE__ */ C(z, { icon: e, size: "var(--swui-heading-font-size)" }),
@@ -4693,7 +4693,7 @@ const T5 = f(
     L
   ] }),
   /* @__PURE__ */ C(I, { num: 3 })
-] }), TC = (n) => /* @__PURE__ */ C(p, { className: d1.cardyIndent, ...n }), Y5 = "_chip_1k9u8_1", C4 = "_chipCell_1k9u8_25", L4 = "_label_1k9u8_36", e4 = "_removable_1k9u8_40", n4 = "_close_1k9u8_79", i4 = "_circle_1k9u8_83", o4 = "_primary_1k9u8_104", a4 = "_secondary_1k9u8_112", v = {
+] }), TC = (n) => /* @__PURE__ */ C(x, { className: d1.cardyIndent, ...n }), Y5 = "_chip_1k9u8_1", C4 = "_chipCell_1k9u8_25", L4 = "_label_1k9u8_36", e4 = "_removable_1k9u8_40", n4 = "_close_1k9u8_79", i4 = "_circle_1k9u8_83", o4 = "_primary_1k9u8_104", a4 = "_secondary_1k9u8_112", v = {
   chip: Y5,
   chipCell: C4,
   label: L4,
@@ -4755,19 +4755,19 @@ const T5 = f(
     const m = t4(L, i), d = m && /* @__PURE__ */ C(
       k,
       {
-        color: x("--lhds-color-ui-800"),
+        color: p("--lhds-color-ui-800"),
         variant: "caption",
         size: "small",
         children: m
       }
     );
     return /* @__PURE__ */ r("label", { htmlFor: t, className: c, children: [
-      /* @__PURE__ */ r(p, { ...s, row: o, gap: !0, children: [
+      /* @__PURE__ */ r(x, { ...s, row: o, gap: !0, children: [
         /* @__PURE__ */ r(Z, { alignItems: "center", width: a, children: [
           /* @__PURE__ */ C(
             k,
             {
-              color: x("--tjara"),
+              color: p("--tjara"),
               variant: "bold",
               size: "small",
               whiteSpace: "nowrap",
@@ -4807,13 +4807,13 @@ const T5 = f(
     case "none":
       return;
     case "info":
-      return x("--lhds-color-blue-100");
+      return p("--lhds-color-blue-100");
     case "error":
-      return x("--lhds-color-red-100");
+      return p("--lhds-color-red-100");
     case "warning":
-      return x("--lhds-color-orange-100");
+      return p("--lhds-color-orange-100");
     case "success":
-      return x("--lhds-color-green-100");
+      return p("--lhds-color-green-100");
   }
 }, c4 = "_badge_1b6e7_1", r4 = "_info_1b6e7_17", m4 = "_warning_1b6e7_21", l4 = "_error_1b6e7_25", d4 = "_label_1b6e7_29", L1 = {
   badge: c4,
@@ -4841,7 +4841,7 @@ const T5 = f(
   ...o
 }) => /* @__PURE__ */ r(Z, { children: [
   n,
-  /* @__PURE__ */ C("div", { style: { position: "relative" }, children: i ? null : /* @__PURE__ */ C(p, { top: L, left: e, position: "absolute", children: /* @__PURE__ */ C(M4, { ...o }) }) })
+  /* @__PURE__ */ C("div", { style: { position: "relative" }, children: i ? null : /* @__PURE__ */ C(x, { top: L, left: e, position: "absolute", children: /* @__PURE__ */ C(M4, { ...o }) }) })
 ] }), Z4 = "_toggleButton_u1x04_1", u4 = "_selected_u1x04_50", f4 = "_disabled_u1x04_56", p4 = "_small_u1x04_62", x4 = "_medium_u1x04_69", h4 = "_large_u1x04_73", O = {
   toggleButton: Z4,
   selected: u4,
@@ -5128,7 +5128,7 @@ const T5 = f(
       children: /* @__PURE__ */ C("tbody", { children: a1.map(n, (a, t) => /* @__PURE__ */ C("tr", { className: P.row, children: a }, t)) })
     }
   ),
-  e && /* @__PURE__ */ C(Z, { spacing: !0, children: /* @__PURE__ */ C(k, { size: "small", color: x("--lhds-color-ui-600"), children: e }) })
+  e && /* @__PURE__ */ C(Z, { spacing: !0, children: /* @__PURE__ */ C(k, { size: "small", color: p("--lhds-color-ui-600"), children: e }) })
 ] }), YC = ({
   label: n,
   value: L,
@@ -5140,7 +5140,7 @@ const T5 = f(
     {
       icon: D,
       size: 14,
-      color: x("--lhds-color-ui-700")
+      color: p("--lhds-color-ui-700")
     }
   ) : "-" : typeof L == "number" ? String(L) : L, [L]);
   return /* @__PURE__ */ r(B, { children: [
@@ -5153,7 +5153,7 @@ const T5 = f(
         children: /* @__PURE__ */ C(
           k,
           {
-            color: x("--tjara"),
+            color: p("--tjara"),
             variant: "bold",
             whiteSpace: "nowrap",
             children: n
@@ -5183,7 +5183,7 @@ const T5 = f(
       {
         size: "small",
         variant: "bold",
-        color: x("--lhds-color-ui-600"),
+        color: p("--lhds-color-ui-600"),
         style: { textDecoration: "line-through" },
         children: e
       }
@@ -5198,7 +5198,7 @@ const T5 = f(
       {
         size: "small",
         variant: "bold",
-        color: x("--lhds-color-ui-600"),
+        color: p("--lhds-color-ui-600"),
         style: { textDecoration: "line-through" },
         children: e
       }
@@ -5212,7 +5212,7 @@ const T5 = f(
       S,
       {
         variant: "bold",
-        color: x("--lhds-color-ui-600"),
+        color: p("--lhds-color-ui-600"),
         style: { textDecoration: "line-through" },
         children: e
       }
@@ -5239,7 +5239,7 @@ const T5 = f(
       {
         icon: X1,
         size: 16,
-        color: x("--lhds-color-blue-600"),
+        color: p("--lhds-color-blue-600"),
         className: e1.selectedIcon
       }
     ),
@@ -5248,18 +5248,18 @@ const T5 = f(
         /* @__PURE__ */ C(z, { icon: c, fixedWidth: !0, size: 20 }),
         /* @__PURE__ */ C(I, { half: !0 }),
         /* @__PURE__ */ C(
-          p,
+          x,
           {
             flex: 1,
-            border: `1px solid ${x("--lhds-color-ui-900")}`,
+            border: `1px solid ${p("--lhds-color-ui-900")}`,
             borderRadius: "2px 2px 0 0"
           }
         ),
         /* @__PURE__ */ C(
-          p,
+          x,
           {
             borderRadius: "50%",
-            border: `2px solid ${x("--lhds-color-ui-900")}`,
+            border: `2px solid ${p("--lhds-color-ui-900")}`,
             width: 16,
             height: 16
           }
@@ -5292,7 +5292,7 @@ const T5 = f(
 }, eL = ({
   className: n,
   ...L
-}) => /* @__PURE__ */ C(p, { className: l(J4.shimmerBox, n), ...L }), Y4 = "_line_vg53u_1", C3 = "_currentStep_vg53u_13", L3 = "_passedStep_vg53u_17", i1 = {
+}) => /* @__PURE__ */ C(x, { className: l(J4.shimmerBox, n), ...L }), Y4 = "_line_vg53u_1", C3 = "_currentStep_vg53u_13", L3 = "_passedStep_vg53u_17", i1 = {
   line: Y4,
   currentStep: C3,
   passedStep: L3