@apolitical/component-library 4.8.7-jc.4 → 4.8.7-jc.6

package/index.mjs

@@ -1645,7 +1645,7 @@ Thank you for helping to protect the Apolitical community from abusive content.`
 const Ae = ({
   variant: e = "primary",
   size: t = "medium",
-  styling: n = { muted: !1, fullWidth: !1 },
+  styling: n = { muted: !1, fullWidth: !1, new: !1 },
   icon: r = !1,
   href: i = !1,
   element: a = "button",
@@ -1664,13 +1664,16 @@ const Ae = ({
   }
   !l && u && (u = "");
   const v = [];
-  typeof t == "string" && v.push(t), r && (v.push("icon"), typeof r == "object" ? (v.push(r.icon), r.position ? v.push(r.position) : v.push("left"), r.hover && v.push(`hover_${r.hover}`), r.animate && (v.push("animate"), typeof r.animate == "string" && v.push(r.animate))) : (v.push(r), !r.includes("right") && !r.includes("left") && v.push("left"))), n.muted && v.push("muted"), n.fullWidth && v.push("full-width");
+  typeof t == "string" && v.push(t), r && (v.push("icon"), typeof r == "object" ? (v.push(r.icon), r.position ? v.push(r.position) : v.push("left"), r.hover && v.push(`hover_${r.hover}`), r.animate && (v.push("animate"), typeof r.animate == "string" && v.push(r.animate))) : (v.push(r), !r.includes("right") && !r.includes("left") && v.push("left")));
   const C = {
     ...p,
     className: Z(e, o, v, {
       "no-text": !h,
       disabled: l,
-      button: i
+      button: i,
+      new: n.new,
+      muted: n.muted,
+      "full-width": n.fullWidth
     }),
     onClick: (E) => {
       (!i || i[0] === "#") && s && (E.preventDefault(), E.stopPropagation()), s && s(E);
@@ -6365,23 +6368,23 @@ const Dn = ({
         }
       });
     }
-  }, G = (k) => {
-    var q;
-    if (k.preventDefault(), k.stopPropagation(), $)
-      return;
-    let R = 0;
-    if ((q = re == null ? void 0 : re.current) != null && q.id) {
-      const ne = document.getElementById(re.current.id);
-      ne && (R = ne.getBoundingClientRect().top + window.scrollY);
-    }
-    const M = document.getElementById("header");
-    M && (R = R - M.offsetHeight - b), R < 0 && (R = 0), window.scrollTo({ top: R, behavior: "smooth" }), L();
   }, _ = [
     {
       ...f,
       icon: W ? { icon: "tick", position: "left" } : !1,
-      className: `gtm-trackable ${f.className ?? ""}`,
-      onClick: G,
+      className: "gtm-trackable",
+      onClick: (k) => {
+        var q;
+        if (k.preventDefault(), k.stopPropagation(), $)
+          return;
+        let R = 0;
+        if ((q = re == null ? void 0 : re.current) != null && q.id) {
+          const ne = document.getElementById(re.current.id);
+          ne && (R = ne.getBoundingClientRect().top + window.scrollY);
+        }
+        const M = document.getElementById("header");
+        M && (R = R - M.offsetHeight - b), R < 0 && (R = 0), window.scrollTo({ top: R, behavior: "smooth" }), L();
+      },
       disabled: $ || W || s.disabled,
       "data-gtm-event-context": d.context,
       "data-gtm-event-type": d.event,
@@ -6390,7 +6393,7 @@ const Dn = ({
   ];
   return v && _.unshift({
     ...o,
-    className: `gtm-trackable ${f.className ?? ""}`,
+    className: "gtm-trackable",
     "data-gtm-event-context": d.context,
     "data-gtm-event-type": d.event,
     disabled: $ || W,
@@ -20737,7 +20740,7 @@ const _C = ({
       intlPath: "contactForm",
       gtm: { context: r, event: i },
       functions: { onSuccess: t, onFailure: n },
-      button: { className: "new" }
+      button: { styling: { new: !0 } }
     }
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apolitical/component-library",
-  "version": "4.8.7-jc.4",
+  "version": "4.8.7-jc.6",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {

package/styles/variables/colors/_colors.scss

@@ -38,8 +38,10 @@ $default-colors: (
   'p50': rgb(255 242 255 / 100%),
   'p75': rgb(250 225 245 / 100%),
   'p100': rgb(238 200 237 / 100%),
+  'p150': rgb(206 197 250 / 100%),
   'p300': rgb(203 130 197 / 100%),
   'p500': rgb(166 55 152 / 100%),
+  'p550': rgb(119 107 224 / 100%),
   'p600': rgb(136 90 189 / 100%),
   'p900': rgb(66 1 55 / 100%),
   'y50': rgb(255 248 232 / 100%),