@selfdecode/sd-component-library 4.0.76-test1 → 4.0.76-test3

package/lib/sd-component-library189.js

@@ -1,746 +1,94 @@
-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
-        }
-      }
+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;
     }
-  },
-  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)`
-        }
-      }
+  };
+  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";
     }
-  },
-  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"
+  }
+  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);
     }
+  });
+}, 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;
   }
-}, t = e;
+  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();
+};
 export {
-  t as default
+  B as disableBodyScroll,
+  A as enableBodyScroll
 };
 //# sourceMappingURL=sd-component-library189.js.map