@selfdecode/sd-component-library 4.0.73-vite19 → 4.0.73-vite20

package/lib/sd-component-library3.js

@@ -1,123 +1,746 @@
-import { useState as u, useCallback as f, useEffect as a, useRef as w } from "react";
-import { disableBodyScroll as L, enableBodyScroll as b } from "./sd-component-library193.js";
-import { debounce as v } from "lodash-es";
-import d from "./sd-component-library194.js";
-const p = (e) => {
-  const [t, n] = u(e);
-  return a(() => {
-    n(e);
-  }, [e]), [t, n];
-}, k = (e, t) => {
-  const [n, r] = u(!1), [o, c] = u(0), i = f(() => {
-    e.current && (r(!1), c(e.current.getBoundingClientRect().height), r(!0));
-  }, [e, t]), s = f(v(i, 200), [
-    e
-  ]);
-  return a(() => (setTimeout(() => {
-    i();
-  }), window.addEventListener("resize", s), window.addEventListener("change", s), () => {
-    window.removeEventListener("resize", s), window.removeEventListener("change", s);
-  }), [s, i]), { contentHeight: o, isHeightMeasured: n };
-};
-function y(e, t) {
-  a(() => {
-    const n = (r) => {
-      !e.current || e.current.contains(r.target) || t(r);
-    };
-    return document.addEventListener("mousedown", n), document.addEventListener("touchstart", n), () => {
-      document.removeEventListener("mousedown", n), document.removeEventListener("touchstart", n);
-    };
-  }, [e, t]);
-}
-function l(e) {
-  const t = typeof window < "u" && typeof window.matchMedia < "u", n = !1, [r, o] = u(() => t ? matchMedia(e).matches : n);
-  return a(() => {
-    let c = !0;
-    if (!t)
-      return;
-    const i = matchMedia(e), s = () => {
-      c && o(i.matches);
-    };
-    return i.addEventListener ? i.addEventListener("change", s) : i.addListener(s), () => {
-      c = !1, i.removeEventListener ? i.removeEventListener("change", s) : i.removeListener(s);
-    };
-  }, [e, t]), r;
-}
-function z() {
-  const e = d.breakpoints[0], t = d.breakpoints[1], n = d.breakpoints[2], r = l(`(min-width:${e})`), o = l(
-    `(min-width:${t})`
-  ), c = l(`(min-width:${n})`);
-  let i = !1, s = !1, h = !1, m = !1;
-  return c ? m = !0 : o ? h = !0 : r ? s = !0 : i = !0, {
-    isMobile: i,
-    isLargeMobile: s,
-    isTab: h,
-    isDesktop: m,
-    isWiderThanMobile: r,
-    isWiderThanLargeMobile: o
-  };
-}
-function C(e, t, n) {
-  if (e.current) {
-    const r = {
-      root: e.current,
-      rootMargin: t,
-      threshold: 1
-    };
-    return new IntersectionObserver(n, r);
-  }
-}
-function R(e) {
-  const [t, n] = u(!1);
-  return {
-    isHover: t,
-    hoverCallbacks: {
-      onMouseEnter: () => {
-        n(!0), e == null || e(!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"
+        }
       },
-      onMouseLeave: () => {
-        n(!1), e == null || e(!1);
+      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 B() {
-  const e = w(null), [t, n] = u(0), [r, o] = u(0);
-  return a(() => {
-    if (e.current) {
-      const { x: c, y: i } = e.current.getBoundingClientRect();
-      n(c), o(i);
+  },
+  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)`
+        }
+      }
     }
-  }, [e.current]), { ref: e, x: t, y: r };
-}
-function T(e = {}) {
-  const { listenForResize: t, checkEachRender: n, debounceDelay: r = 200 } = e, o = w(null), [c, i] = u(), s = f(
-    v(() => {
-      o.current && i(o.current.getBoundingClientRect());
-    }, r),
-    [o]
-  );
-  return a(() => {
-    n && s();
-  }), a(() => (s(), t && (window.addEventListener("resize", s), window.addEventListener("change", s)), () => {
-    t && (window.removeEventListener("resize", s), window.removeEventListener("change", s));
-  }), [s, t]), { ref: o, rect: c };
-}
-const I = (e, t = !0) => {
-  a(() => (e && t && L(e), () => {
-    e && b(e);
-  }), [e, t]);
-};
+  },
+  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"
+    }
+  }
+}, t = e;
 export {
-  I as useBodyScrollLock,
-  T as useBoundingClientRect,
-  z as useBreakPoints,
-  p as useDependantState,
-  B as useElementCoordinates,
-  R as useHover,
-  C as useIntersectionObserver,
-  l as useMediaQuery,
-  y as useOnClickOutside,
-  k as useResize
+  t as default
 };
 //# sourceMappingURL=sd-component-library3.js.map