rk-designsystem 1.3.1 → 1.3.4

package/dist/components/Donor/index.js

@@ -67,31 +67,31 @@ const L = () => /* @__PURE__ */ t(
   { value: 660, label: "660 kr" }
 ], me = ({
   "data-color": e = "primary-color-red",
-  amounts: N = ie,
-  defaultAmount: I = 345,
+  amounts: k = ie,
+  defaultAmount: N = 345,
   oneTimeLabel: B = "En gang",
-  monthlyLabel: z = "Hver måned",
+  monthlyLabel: I = "Hver måned",
   customAmountPlaceholder: x = "Valgfritt beløp",
-  amountLabel: H = "Velg ønsket beløp:",
+  amountLabel: z = "Velg ønsket beløp:",
   impactMessage: M = "En gave på {amount} bidrar til ...",
-  vippsButtonLabel: g = "Gi med",
-  avtalegiroLabel: k = "Gi med avtalegiro",
-  avtalegiroHref: S = "#",
+  vippsButtonLabel: v = "Gi med",
+  avtalegiroLabel: S = "Gi med avtalegiro",
+  avtalegiroHref: H = "#",
   currencySuffix: Z = "kr",
   onVippsClick: f,
   onAvtalegiroClick: c,
   onAmountChange: r,
   showVippsButton: T = !0,
-  showAvtalegiroLink: V = !0,
-  showImpactMessage: j = !0,
+  showAvtalegiroLink: j = !0,
+  showImpactMessage: V = !0,
   heartVariant: E = "outlined"
 }) => {
-  const v = J(), [d, F] = m("monthly"), [C, P] = m(I), [u, b] = m(""), [w, h] = m(!1);
+  const g = J(), [d, F] = m("monthly"), [C, P] = m(N), [u, b] = m(""), [w, h] = m(!1);
   K(() => {
     const a = "rk-donor-inline-styles";
     if (typeof document > "u" || document.getElementById(a)) return;
     const n = ae(i), o = document.createElement("style");
-    o.id = a, o.textContent = n, document.head.appendChild(o);
+    o.id = a, o.textContent = n, document.head.prepend(o);
   }, []);
   const y = parseInt(u, 10), p = w && u && y > 0 ? y : C, D = (a) => {
     P(a), h(!1), b(""), r == null || r(a, d);
@@ -102,10 +102,10 @@ const L = () => /* @__PURE__ */ t(
     o > 0 && (r == null || r(o, d));
   }, q = () => {
     h(!0);
-  }, G = (a) => {
+  }, R = (a) => {
     const n = a;
     F(n), r == null || r(p, n);
-  }, R = () => {
+  }, G = () => {
     p > 0 && (f == null || f(p, d));
   }, U = () => {
     c == null || c();
@@ -118,14 +118,14 @@ const L = () => /* @__PURE__ */ t(
     ] });
   }, $ = /* @__PURE__ */ l("div", { className: i.content, children: [
     /* @__PURE__ */ l("div", { className: i.amountSection, children: [
-      /* @__PURE__ */ t(Y, { className: i.amountLabel, "data-size": "sm", id: v, children: H }),
+      /* @__PURE__ */ t(Y, { className: i.amountLabel, "data-size": "sm", id: g, children: z }),
       /* @__PURE__ */ t(
         "div",
         {
           className: i.amountButtons,
           role: "group",
-          "aria-labelledby": v,
-          children: N.map((a) => {
+          "aria-labelledby": g,
+          children: k.map((a) => {
             const n = !w && C === a.value;
             return /* @__PURE__ */ t(
               Q,
@@ -154,7 +154,7 @@ const L = () => /* @__PURE__ */ t(
         }
       ) })
     ] }),
-    j && /* @__PURE__ */ l("div", { className: i.impactRow, children: [
+    V && /* @__PURE__ */ l("div", { className: i.impactRow, children: [
       /* @__PURE__ */ t("div", { className: i.heartIcon, children: E === "filled" ? /* @__PURE__ */ t(L, {}) : /* @__PURE__ */ t(ee, {}) }),
       /* @__PURE__ */ t("p", { className: i.impactText, children: O() })
     ] }),
@@ -163,26 +163,26 @@ const L = () => /* @__PURE__ */ t(
         "button",
         {
           className: i.vippsButton,
-          onClick: R,
+          onClick: G,
           type: "button",
-          "aria-label": `${g} Vipps`,
+          "aria-label": `${v} Vipps`,
           "data-brand-exception": "vipps",
           children: [
-            /* @__PURE__ */ t("span", { className: i.vippsButtonLabel, children: g }),
+            /* @__PURE__ */ t("span", { className: i.vippsButtonLabel, children: v }),
             /* @__PURE__ */ t("span", { className: i.vippsLogo, children: /* @__PURE__ */ t(te, {}) })
           ]
         }
       ),
-      V && /* @__PURE__ */ t(
+      j && /* @__PURE__ */ t(
         A,
         {
-          href: S,
+          href: H,
           "data-color": "neutral",
           className: i.avtalegiroLink,
           onClick: (a) => {
             c && (a.preventDefault(), U());
           },
-          children: k
+          children: S
         }
       )
     ] })
@@ -191,7 +191,7 @@ const L = () => /* @__PURE__ */ t(
     s,
     {
       defaultValue: "monthly",
-      onChange: G,
+      onChange: R,
       "data-size": "md",
       className: i.tabsWrapper,
       children: [
@@ -199,7 +199,7 @@ const L = () => /* @__PURE__ */ t(
           /* @__PURE__ */ t(s.Tab, { value: "one-time", children: B }),
           /* @__PURE__ */ l(s.Tab, { value: "monthly", children: [
             /* @__PURE__ */ t("span", { className: i.tabHeartIcon, children: /* @__PURE__ */ t(L, {}) }),
-            z
+            I
           ] })
         ] }),
         /* @__PURE__ */ t(s.Panel, { value: "one-time", className: i.tabPanel, children: d === "one-time" ? $ : null }),
@@ -375,6 +375,17 @@ function ae(e) {
   width: 16px;
   height: 15px;
 }
+
+/* Mobil: uten disse fikk en konsument som ikke importerer stilarket
+   skrivebordsbreddene på telefon — kortet låst til 344px på en 390px-skjerm.
+   Speiler @media-blokken i styles.module.css. */
+@media (max-width: 480px) {
+  .${e.donor} { max-width: 100%; }
+  .${e.amountSection},
+  .${e.impactRow},
+  .${e.actionsSection} { width: 100%; }
+  .${e.vippsButton} { width: 100%; max-width: 300px; }
+}
 `;
 }
 export {