@empoweredvote/ev-ui 0.9.7 → 0.9.9

package/dist/index.mjs

@@ -883,6 +883,9 @@ function Header({
   logoSrc,
   logoAlt = "Empowered Vote",
   logoHref = "https://empowered.vote",
+  centerLogoSrc,
+  centerLogoHref,
+  centerLogoAlt,
   navItems = [],
   ctaButton,
   secondaryAction,
@@ -957,6 +960,7 @@ function Header({
       ...style
     },
     container: {
+      position: "relative",
       maxWidth: "1512px",
       margin: "0 auto",
       padding: isMobile ? `${spacing[3]} ${spacing[3]}` : `${spacing[4]} ${spacing[6]}`,
@@ -969,6 +973,14 @@ function Header({
       height: "43px",
       cursor: "pointer"
     },
+    centerLogo: {
+      position: "absolute",
+      left: "50%",
+      top: "50%",
+      transform: "translate(-50%, -50%)",
+      display: "flex",
+      alignItems: "center"
+    },
     nav: {
       display: isMobile ? "none" : "flex",
       flex: "1 1 auto",
@@ -1217,14 +1229,18 @@ function Header({
       ))))
     );
   };
+  const featureOnLeft = isMobile && centerLogoSrc;
+  const leftLogoSrc = featureOnLeft ? centerLogoSrc : logoSrc;
+  const leftLogoAlt = featureOnLeft ? centerLogoAlt || logoAlt : logoAlt;
+  const leftLogoHref = featureOnLeft ? centerLogoHref || logoHref : logoHref;
   return /* @__PURE__ */ React3.createElement("header", { style: styles2.header }, /* @__PURE__ */ React3.createElement("div", { style: styles2.container }, /* @__PURE__ */ React3.createElement(
     "a",
     {
-      href: logoHref,
-      onClick: (e) => handleNavClick(e, logoHref),
+      href: leftLogoHref,
+      onClick: (e) => handleNavClick(e, leftLogoHref),
       style: { display: "flex", alignItems: "center", flexShrink: 0 }
     },
-    logoSrc ? /* @__PURE__ */ React3.createElement("img", { src: logoSrc, alt: logoAlt, style: styles2.logo }) : /* @__PURE__ */ React3.createElement(
+    leftLogoSrc ? /* @__PURE__ */ React3.createElement("img", { src: leftLogoSrc, alt: leftLogoAlt, style: styles2.logo }) : /* @__PURE__ */ React3.createElement(
       "span",
       {
         style: {
@@ -1236,6 +1252,15 @@ function Header({
       },
       "empowered.vote"
     )
+  ), centerLogoSrc && !isMobile && /* @__PURE__ */ React3.createElement(
+    "a",
+    {
+      href: centerLogoHref || logoHref,
+      onClick: (e) => handleNavClick(e, centerLogoHref || logoHref),
+      style: styles2.centerLogo,
+      "aria-label": centerLogoAlt || "Feature home"
+    },
+    /* @__PURE__ */ React3.createElement("img", { src: centerLogoSrc, alt: centerLogoAlt || "", style: styles2.logo })
   ), /* @__PURE__ */ React3.createElement("nav", { style: styles2.nav, className: "ev-header-nav" }, navItems.map((item, idx) => /* @__PURE__ */ React3.createElement(NavLink, { key: idx, item }))), /* @__PURE__ */ React3.createElement("div", { style: { display: isMobile ? "none" : "flex", alignItems: "center", gap: spacing[3], flexShrink: 0 } }, secondaryAction && React3.isValidElement(secondaryAction) && secondaryAction, secondaryAction && !React3.isValidElement(secondaryAction) && /* @__PURE__ */ React3.createElement(
     "a",
     {
@@ -3314,13 +3339,12 @@ function CompassKey({ compact = false } = {}) {
     persistDismissed(false);
   }
   if (!loaded) return null;
-  const Swatch = ({ color, label, ring }) => /* @__PURE__ */ React13.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: spacing[1] } }, /* @__PURE__ */ React13.createElement("span", { style: {
+  const Swatch = ({ color, label }) => /* @__PURE__ */ React13.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: spacing[1] } }, /* @__PURE__ */ React13.createElement("span", { style: {
     display: "inline-block",
-    width: 12,
-    height: 12,
+    width: 16,
+    height: 16,
     borderRadius: "50%",
     background: color,
-    border: `2px solid ${ring || "#fff"}`,
     boxShadow: "0 0 0 1px rgba(0,0,0,0.08)"
   } }), /* @__PURE__ */ React13.createElement("span", { style: { fontSize: fontSizes.xs, color: colors.textSecondary, fontFamily: fonts.primary } }, label));
   if (dismissed) {