@selfdecode/sd-component-library 4.0.73-vite4 → 4.0.73-vite5

package/lib/sd-component-library194.js

@@ -1,94 +1,746 @@
-function m(t) {
-  if (Array.isArray(t)) {
-    for (var e = 0, o = Array(t.length); e < t.length; e++)
-      o[e] = t[e];
-    return o;
-  } else
-    return Array.from(t);
-}
-var c = !1;
-if (typeof window < "u") {
-  var y = {
-    get passive() {
-      c = !0;
+const o = navigator.userAgent.toLowerCase().indexOf("firefox") > -1, e = {
+  breakpoints: ["40em", "52em", "64em"],
+  colors: {
+    cl_transparent: "transparent",
+    cl_white: "#FFFFFF",
+    cl_red: "#FF0000",
+    cl_green: "#11A34A",
+    cl_purple: "#9E1CB5",
+    cl_blue: "#4568F9",
+    cl_darkBlue: "#3C5BD9",
+    cl_denim: "#07144D",
+    cl_salmon: "#FA464E",
+    cl_yellow: "#FF9900",
+    cl_darkYellow: "#FF6C00",
+    cl_grey: "#9BA2B4",
+    cl_lightGrey: "#CCD0DB",
+    cl_darkGrey: "#434A54",
+    cl_header: "#FAFAFC",
+    cl_headerLine: "#EDEEF2"
+  },
+  variants: {
+    _badges: {
+      primary: {
+        fontFamily: "proxima-nova",
+        height: ["22px"],
+        lineHeight: ["21px"],
+        color: "white",
+        px: "10px"
+      },
+      secondary: {
+        fontFamily: "proxima-nova",
+        height: ["13px"],
+        lineHeight: ["12px"],
+        color: "white",
+        px: "10px"
+      }
+    },
+    _containers: {
+      selectors: {
+        secondary: {
+          display: "grid"
+        },
+        tertiary: {
+          display: "grid"
+        },
+        compact: {
+          display: "grid",
+          gridTemplateColumns: "1fr max-content",
+          alignItems: "center"
+        },
+        secondaryV2: {
+          display: "grid",
+          gridTemplateColumns: "max-content 1fr",
+          alignItems: "center"
+        },
+        combined: {
+          display: "block"
+        },
+        customSecondary: {
+          gap: "10px",
+          gridTemplateColumns: "max-content 1fr"
+        },
+        customTertiary: {
+          gap: "14px"
+        },
+        customScrollable: {
+          gap: "10px"
+        }
+      }
+    },
+    _links: {
+      primary: {
+        fontFamily: "proxima-nova",
+        color: "cl_blue",
+        cursor: "pointer",
+        textDecoration: "none",
+        ":hover": {
+          textDecoration: "underline"
+        }
+      }
+    },
+    _lists: {
+      primary: {
+        color: "purple"
+      }
+    },
+    _modals: {
+      inner: {
+        primary: {
+          borderRadius: "8px",
+          textAlign: "center",
+          borderWidth: "2px",
+          borderStyle: "solid",
+          borderColor: "cl_blue"
+        }
+      }
+    },
+    _progressBars: {
+      line: {
+        done: {
+          height: "2px",
+          display: "inline-block",
+          transition: "width 1s"
+        },
+        remains: {
+          height: "2px",
+          display: "inline-block",
+          transition: "width 1s"
+        }
+      },
+      stripedLine: {
+        done: {
+          height: "10px",
+          display: "inline-block",
+          transition: "width 1s"
+        },
+        remains: {
+          height: "10px",
+          display: "inline-block",
+          transition: "width 1s"
+        }
+      }
+    },
+    _switches: {
+      textSwitch: {
+        side: {
+          fontFamily: "proxima-nova",
+          fontWeight: "600",
+          textAlign: "center",
+          zIndex: 2
+        }
+      }
     }
-  };
-  window.addEventListener("testPassive", null, y), window.removeEventListener("testPassive", null, y);
-}
-var s = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), d = [], a = !1, w = -1, l = void 0, r = void 0, u = void 0, p = function(e) {
-  return d.some(function(o) {
-    return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
-  });
-}, f = function(e) {
-  var o = e || window.event;
-  return p(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
-}, h = function(e) {
-  if (u === void 0) {
-    var o = !!e && e.reserveScrollBarGap === !0, i = window.innerWidth - document.documentElement.clientWidth;
-    if (o && i > 0) {
-      var n = parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"), 10);
-      u = document.body.style.paddingRight, document.body.style.paddingRight = n + i + "px";
+  },
+  forms: {
+    _inputs: {
+      textInput: {
+        primary: {
+          fontFamily: "proxima-nova",
+          color: "cl_darkGrey",
+          fontSize: ["18px"],
+          border: "none",
+          outline: "none",
+          borderBottomStyle: "solid",
+          borderBottomWidth: "2px",
+          borderBottomColor: "cl_lightGrey",
+          lineHeight: ["25px"],
+          transition: "all .1s",
+          ":focus": {
+            borderBottomStyle: "solid",
+            borderBottomWidth: "2px",
+            borderBottomColor: "cl_blue",
+            outline: "none"
+          },
+          "::placeholder": {
+            color: "cl_grey"
+          }
+        },
+        primaryError: {
+          fontFamily: "proxima-nova",
+          color: "cl_darkGrey",
+          fontSize: ["18px"],
+          border: "none",
+          outline: "none",
+          borderBottomStyle: "solid",
+          borderBottomWidth: "2px",
+          borderBottomColor: "cl_red",
+          lineHeight: ["25px"],
+          transition: "all .1s"
+        },
+        plain: {
+          fontFamily: "proxima-nova",
+          color: "cl_darkGrey",
+          fontSize: ["18px"],
+          borderStyle: "none",
+          borderWidth: "0",
+          outlines: "none"
+        },
+        currentPage: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          borderColor: "cl_lightGrey",
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderRadius: 3,
+          fontSize: 1,
+          fontFamily: "proxima-nova",
+          height: "30px",
+          width: "30px",
+          ":focus": {
+            borderColor: "cl_blue",
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderRadius: 3,
+            outline: "none"
+          }
+        },
+        decodyQuestion: {
+          fontFamily: "proxima-nova",
+          color: "cl_darkGrey",
+          fontSize: ["18px", "32px"],
+          fontWeight: "bold",
+          border: "none",
+          outline: "none",
+          borderBottomStyle: "solid",
+          borderBottomWidth: "2px",
+          borderBottomColor: "cl_blue",
+          lineHeight: ["25px"],
+          transition: "all .1s",
+          ":focus": {
+            borderBottomStyle: "solid",
+            borderBottomWidth: "2px",
+            borderBottomColor: "cl_blue",
+            outline: "none"
+          },
+          "::placeholder": {
+            color: "cl_grey",
+            fontWeight: "100"
+          }
+        },
+        clientPortal: {
+          fontFamily: "proxima-nova",
+          color: "cl_darkGrey",
+          fontSize: 18,
+          borderStyle: "none",
+          outline: "none",
+          borderBottomStyle: "solid",
+          borderBottomWidth: "2px",
+          borderBottomColor: "cl_lightGrey",
+          py: "12px",
+          px: 0,
+          ":focus": {
+            outline: "none",
+            borderStyle: "none",
+            borderBottomStyle: "solid",
+            borderColor: "cl_blue"
+          },
+          "::placeholder": {
+            color: "cl_grey"
+          }
+        }
+      }
+    },
+    _labels: {
+      textInput: {
+        secondary: {
+          fontFamily: "proxima-nova",
+          width: "max-content",
+          color: "cl_darkGrey",
+          fontSize: ["12px"],
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: ["1px"],
+          marginBottom: ["16px"]
+        },
+        secondaryError: {
+          fontFamily: "proxima-nova",
+          width: "max-content",
+          fontSize: ["12px"],
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: ["2px"],
+          marginBottom: ["16px"],
+          color: "cl_red"
+        },
+        clientPortal: {
+          fontSize: 10,
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: "1px"
+        }
+      },
+      selectors: {
+        secondary: {
+          fontSize: ["12px"],
+          fontWeight: 600,
+          letterSpacing: 1,
+          textTransform: "uppercase",
+          color: "cl_darkGrey"
+        },
+        secondaryError: {
+          width: "max-content",
+          fontSize: ["12px"],
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: ["2px"],
+          marginBottom: ["16px"],
+          color: "cl_red"
+        },
+        tertiary: {
+          width: "max-content",
+          color: "cl_darkGrey",
+          fontSize: ["12px"],
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: ["2px"],
+          marginBottom: ["16px"]
+        },
+        tertiaryError: {
+          width: "max-content",
+          fontSize: ["12px"],
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: ["2px"],
+          marginBottom: ["16px"],
+          color: "cl_red"
+        },
+        compact: {
+          width: "max-content",
+          color: "cl_grey",
+          fontSize: ["16px"]
+        },
+        secondaryV2: {
+          color: "cl_grey",
+          fontSize: "18px"
+        },
+        primaryV2: {
+          position: "absolute",
+          left: "8px",
+          top: "-6px",
+          height: "12px",
+          fontWeight: 600,
+          color: "cl_grey",
+          fontSize: "10px",
+          letterSpacing: "1px",
+          textTransform: "uppercase",
+          width: "initial",
+          bg: "cl_white",
+          px: "7px",
+          zIndex: 1
+        },
+        customSecondary: {
+          fontSize: "18px",
+          fontWeight: 400,
+          color: "cl_grey"
+        },
+        customTertiary: {
+          fontSize: "10px",
+          fontWeight: 600,
+          letterSpacing: "1px",
+          textTransform: "uppercase",
+          color: "cl_grey"
+        },
+        customScrollable: {
+          fontSize: "10px",
+          fontWeight: 600,
+          letterSpacing: "1px",
+          textTransform: "uppercase",
+          color: "cl_darkGrey"
+        },
+        updatedSecondary: {
+          fontSize: "10px",
+          fontWeight: 600,
+          letterSpacing: "1px",
+          textTransform: "uppercase",
+          color: "cl_grey"
+        }
+      },
+      iconButton: {
+        marginRight: "10px",
+        cursor: "inherit"
+      }
+    },
+    _selectors: {
+      primary: {
+        color: "cl_purple",
+        outline: "none",
+        borderColor: "cl_lightGrey",
+        borderStyle: "solid",
+        borderWidth: 1,
+        borderRadius: 3,
+        pr: ["32px"]
+      },
+      secondary: {
+        fontFamily: "proxima-nova",
+        textTransform: "Capitalize",
+        fontWeight: 500,
+        letterSpacing: 0,
+        color: "cl_darkGrey",
+        paddingLeft: 0,
+        border: "none",
+        outline: "none",
+        borderBottomColor: "cl_lightGrey",
+        borderBottomStyle: "solid",
+        borderBottomWidth: 2,
+        borderRadius: 0,
+        paddingY: ["14px"],
+        pr: ["32px"]
+      },
+      secondaryError: {
+        fontFamily: "proxima-nova",
+        textTransform: "Capitalize",
+        fontWeight: 500,
+        letterSpacing: 0,
+        color: "cl_grey",
+        paddingLeft: 0,
+        border: "none",
+        outline: "none",
+        borderBottomColor: "cl_red",
+        borderBottomStyle: "solid",
+        borderBottomWidth: 2,
+        borderRadius: 0,
+        paddingY: ["14px"],
+        pr: ["32px"]
+      },
+      tertiary: {
+        fontFamily: "proxima-nova",
+        textTransform: "Capitalize",
+        fontSize: ["18px"],
+        fontWeight: 400,
+        letterSpacing: 0,
+        color: "cl_darkGrey",
+        paddingLeft: 0,
+        border: "none",
+        outline: "none",
+        borderBottomColor: "cl_lightGrey",
+        borderBottomStyle: "solid",
+        borderBottomWidth: 2,
+        borderRadius: 0,
+        lineHeight: ["25px"],
+        paddingY: ["14px"],
+        pr: ["16px"],
+        "& + svg": {
+          fill: "cl_darkGrey",
+          transform: `translate(10px, ${o ? 0 : 5}px) scale(.78)`
+        }
+      },
+      tertiaryError: {
+        fontFamily: "proxima-nova",
+        textTransform: "Capitalize",
+        fontSize: ["18px"],
+        fontWeight: 400,
+        letterSpacing: 0,
+        color: "cl_grey",
+        paddingLeft: 0,
+        border: "none",
+        outline: "none",
+        borderBottomColor: "cl_red",
+        borderBottomStyle: "solid",
+        borderBottomWidth: 2,
+        borderRadius: 0,
+        lineHeight: ["25px"],
+        paddingY: ["14px"],
+        pr: ["32px"],
+        "& + svg": {
+          fill: "cl_darkGrey",
+          transform: `translate(10px, ${o ? 0 : 5}px) scale(.78)`
+        }
+      },
+      compact: {
+        width: "max-content",
+        color: "cl_purple",
+        outline: "none",
+        border: "none",
+        paddingLeft: ["0"],
+        paddingRight: ["24px"],
+        "& + svg": {
+          transform: `translate(5px, ${o ? 0 : 5}px) scale(.78)`
+        }
+      },
+      secondaryV2: {
+        fontFamily: "proxima-nova",
+        fontWeight: "bold",
+        fontSize: "18px",
+        letterSpacing: 0,
+        color: "cl_darkGrey",
+        outline: "none",
+        border: "none",
+        borderRadius: 0,
+        borderBottomColor: "cl_lightGrey",
+        borderBottomStyle: "solid",
+        borderBottomWidth: 2,
+        pb: "12px",
+        pl: 0,
+        pt: 0,
+        pr: "12px",
+        "& + svg": {
+          fill: "cl_blue",
+          transform: "translate(10px, 0px) scale(.78)"
+        }
+      },
+      primaryV2: {
+        fontFamily: "proxima-nova",
+        fontSize: "16px",
+        color: "cl_purple",
+        px: "15px",
+        py: "12px",
+        borderRadius: "3px",
+        borderColor: "cl_lightGrey",
+        outline: "none"
+      },
+      updatedSecondary: {
+        fontFamily: "proxima-nova",
+        textTransform: "Capitalize",
+        fontSize: "18px",
+        lineHeight: "22px",
+        fontWeight: 400,
+        letterSpacing: 0,
+        color: "cl_darkGrey",
+        paddingLeft: 0,
+        border: "none",
+        outline: "none",
+        borderBottomColor: "cl_lightGrey",
+        borderBottomStyle: "solid",
+        borderBottomWidth: 2,
+        borderRadius: 0,
+        py: "12px",
+        pr: "16px",
+        "& + svg": {
+          fill: "cl_blue",
+          transform: `translate(10px, ${o ? 0 : 4}px) scale(.78)`
+        }
+      }
     }
-  }
-  l === void 0 && (l = document.body.style.overflow, document.body.style.overflow = "hidden");
-}, g = function() {
-  u !== void 0 && (document.body.style.paddingRight = u, u = void 0), l !== void 0 && (document.body.style.overflow = l, l = void 0);
-}, b = function() {
-  return window.requestAnimationFrame(function() {
-    if (r === void 0) {
-      r = {
-        position: document.body.style.position,
-        top: document.body.style.top,
-        left: document.body.style.left
-      };
-      var e = window, o = e.scrollY, i = e.scrollX, n = e.innerHeight;
-      document.body.style.position = "fixed", document.body.style.top = -o, document.body.style.left = -i, setTimeout(function() {
-        return window.requestAnimationFrame(function() {
-          var v = n - window.innerHeight;
-          v && o >= n && (document.body.style.top = -(o + v));
-        });
-      }, 300);
+  },
+  text: {
+    _breadcrumbs: {
+      primary: {
+        last: {
+          fontFamily: "proxima-nova",
+          fontSize: "12px",
+          fontWeight: 400,
+          color: "cl_grey"
+        },
+        normal: {
+          fontFamily: "proxima-nova",
+          fontSize: "12px",
+          fontWeight: 400,
+          color: "cl_lightGrey"
+        }
+      },
+      secondary: {
+        last: {
+          fontFamily: "proxima-nova",
+          fontSize: "12px",
+          fontWeight: 400,
+          color: "cl_darkGrey"
+        },
+        normal: {
+          fontFamily: "proxima-nova",
+          fontSize: "12px",
+          fontWeight: 400,
+          color: "cl_grey"
+        }
+      }
+    },
+    _10SemiBold: {
+      fontFamily: "proxima-nova",
+      fontSize: "10px",
+      fontWeight: 600
+    },
+    _12Regular: {
+      fontFamily: "proxima-nova",
+      fontSize: "12px",
+      fontWeight: 400
+    },
+    _12Semibold: {
+      fontFamily: "proxima-nova",
+      fontSize: "12px",
+      fontWeight: 600
+    },
+    _13Regular: {
+      fontFamily: "proxima-nova",
+      fontSize: "13px",
+      fontWeight: 400
+    },
+    _13Semibold: {
+      fontFamily: "proxima-nova",
+      fontSize: "13px",
+      fontWeight: 600
+    },
+    _13Bold: {
+      fontFamily: "proxima-nova",
+      fontSize: "13px",
+      fontWeight: 700
+    },
+    _14Regular: {
+      fontFamily: "proxima-nova",
+      fontSize: "14px",
+      fontWeight: 400
+    },
+    _14Semibold: {
+      fontFamily: "proxima-nova",
+      fontSize: "14px",
+      fontWeight: 600
+    },
+    _16Regular: {
+      fontFamily: "proxima-nova",
+      fontSize: "16px",
+      fontWeight: 400
+    },
+    _16Semibold: {
+      fontFamily: "proxima-nova",
+      fontSize: "16px",
+      fontWeight: 600
+    },
+    _18Regular: {
+      fontFamily: "proxima-nova",
+      fontSize: "18px",
+      fontWeight: 400
+    },
+    _18Bold: {
+      fontFamily: "proxima-nova",
+      fontSize: "18px",
+      fontWeight: 700
+    },
+    _24Regular: {
+      fontFamily: "proxima-nova",
+      fontSize: "24px",
+      fontWeight: 400
+    },
+    _24Bold: {
+      fontFamily: "proxima-nova",
+      fontSize: "24px",
+      fontWeight: 700
+    },
+    _32Regular: {
+      fontFamily: "proxima-nova",
+      fontSize: "32px",
+      fontWeight: 400
+    },
+    _32Bold: {
+      fontFamily: "proxima-nova",
+      fontSize: "32px",
+      fontWeight: 700
+    },
+    _40Bold: {
+      fontFamily: "proxima-nova",
+      fontSize: "40px",
+      fontWeight: 700
+    },
+    _55Semibold: {
+      fontFamily: "proxima-nova",
+      fontSize: "55px",
+      fontWeight: 600
+    }
+  },
+  buttons: {
+    _circle: {
+      borderRadius: "100%",
+      lineHeight: 0,
+      bg: "cl_white",
+      padding: "0",
+      outline: "none"
+    },
+    _cta: {
+      borderStyle: "solid",
+      borderWidth: "2px",
+      textTransform: "uppercase",
+      fontSize: ["13px"],
+      fontWeight: "bold",
+      letterSpacing: ["2px"],
+      transition: "all .1s",
+      outline: "none"
+    },
+    _icon: {
+      padding: "0",
+      bg: "transparent",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between"
+    },
+    _logos: {
+      poweredByLogo: {
+        width: 139,
+        height: 48
+      }
+    },
+    _goto: {
+      borderStyle: "solid",
+      borderWidth: "3px",
+      borderColor: "cl_blue",
+      color: "cl_blue",
+      textTransform: "uppercase",
+      fontSize: ["13px"],
+      fontWeight: "bold",
+      letterSpacing: ["2px"],
+      outline: "none",
+      backgroundColor: "#fff",
+      borderRadius: "24px",
+      paddingY: "13px",
+      paddingX: "20px"
+    },
+    _booleanAction: {
+      borderStyle: "solid",
+      borderWidth: "3px",
+      width: "max-content",
+      borderColor: "cl_blue",
+      color: "cl_blue",
+      textTransform: "uppercase",
+      fontSize: ["13px"],
+      fontWeight: "bold",
+      letterSpacing: ["2px"],
+      outline: "none",
+      backgroundColor: "#fff",
+      borderRadius: "24px",
+      paddingY: "10px",
+      paddingX: "20px"
+    },
+    _multichoice: {
+      active: {
+        bg: "cl_purple",
+        color: "cl_white",
+        borderStyle: "solid",
+        borderWidth: "2px",
+        borderColor: "cl_purple",
+        borderRadius: "25px",
+        height: ["42px"],
+        textTransform: "capitalize",
+        fontSize: ["15px"],
+        fontWeight: "500",
+        outline: "none"
+      },
+      notActive: {
+        bg: "cl_white",
+        color: "cl_grey",
+        borderStyle: "solid",
+        borderWidth: "2px",
+        borderColor: "cl_purple",
+        borderRadius: "25px",
+        height: ["42px"],
+        textTransform: "capitalize",
+        fontSize: ["15px"],
+        fontWeight: "500",
+        outline: "none"
+      }
+    },
+    _square: {
+      lineHeight: 0,
+      borderRadius: "5px",
+      bg: "cl_white",
+      padding: "0",
+      outline: "none"
+    },
+    _block: {
+      display: "block"
     }
-  });
-}, S = function() {
-  if (r !== void 0) {
-    var e = -parseInt(document.body.style.top, 10), o = -parseInt(document.body.style.left, 10);
-    document.body.style.position = r.position, document.body.style.top = r.top, document.body.style.left = r.left, window.scrollTo(o, e), r = void 0;
-  }
-}, T = function(e) {
-  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
-}, P = function(e, o) {
-  var i = e.targetTouches[0].clientY - w;
-  return p(e.target) ? !1 : o && o.scrollTop === 0 && i > 0 || T(o) && i < 0 ? f(e) : (e.stopPropagation(), !0);
-}, B = function(e, o) {
-  if (!e) {
-    console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
-    return;
-  }
-  if (!d.some(function(n) {
-    return n.targetElement === e;
-  })) {
-    var i = {
-      targetElement: e,
-      options: o || {}
-    };
-    d = [].concat(m(d), [i]), s ? b() : h(o), s && (e.ontouchstart = function(n) {
-      n.targetTouches.length === 1 && (w = n.targetTouches[0].clientY);
-    }, e.ontouchmove = function(n) {
-      n.targetTouches.length === 1 && P(n, e);
-    }, a || (document.addEventListener("touchmove", f, c ? { passive: !1 } : void 0), a = !0));
-  }
-}, A = function(e) {
-  if (!e) {
-    console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
-    return;
   }
-  d = d.filter(function(o) {
-    return o.targetElement !== e;
-  }), s && (e.ontouchstart = null, e.ontouchmove = null, a && d.length === 0 && (document.removeEventListener("touchmove", f, c ? { passive: !1 } : void 0), a = !1)), s ? S() : g();
-};
+}, t = e;
 export {
-  B as disableBodyScroll,
-  A as enableBodyScroll
+  t as default
 };
 //# sourceMappingURL=sd-component-library194.js.map