@selfdecode/sd-component-library 4.0.146 → 4.0.148

package/lib/sd-component-library196.js

@@ -1,780 +1,31 @@
-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
-        }
-      }
-    }
-  },
-  forms: {
-    _inputs: {
-      v2: {
-        fontFamily: "proxima-nova",
-        color: "cl_darkGrey",
-        fontSize: "18px",
-        border: "none",
-        outline: "none",
-        borderBottomStyle: "solid",
-        borderBottomWidth: "2px",
-        borderBottomColor: "cl_lightGrey",
-        lineHeight: "25px",
-        transition: "all .1s",
-        fontWeight: 400,
-        letterSpacing: 0,
-        borderRadius: 0,
-        padding: 0,
-        py: "14px",
-        "::placeholder": {
-          color: "cl_grey"
-        }
-      },
-      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: {
-      v2: {
-        fontSize: "10px",
-        fontWeight: 600,
-        letterSpacing: "1px",
-        textTransform: "uppercase",
-        color: "cl_darkGrey"
-      },
-      v2Error: {
-        fontSize: "10px",
-        fontWeight: 600,
-        letterSpacing: "1px",
-        textTransform: "uppercase",
-        color: "cl_red"
-      },
-      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)`
-        }
-      }
-    }
-  },
-  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"
-    }
+import { j as a } from "./sd-component-library169.js";
+import R, { createElement as g } from "react";
+import { isValueInRange as f } from "./sd-component-library86.js";
+import { SmileyMeterRange as d } from "./sd-component-library264.js";
+const j = R.forwardRef(
+  (r, m) => {
+    const { value: s, ranges: n, distanceFromRanges: c } = r, o = n.findIndex(
+      ({ start: e, end: t, bounds: l }) => f(s, e, t, l)
+    ), i = n.map((e, t) => ({
+      ...e,
+      color: t < o ? n[o].color : e.color
+    }));
+    return /* @__PURE__ */ a.jsx(a.Fragment, { children: i.map((e, t) => /* @__PURE__ */ g(
+      d,
+      {
+        ...e,
+        ...r,
+        idx: t,
+        totalRanges: n.length,
+        pointerLength: c,
+        key: `${e.start}-${e.end}-${t}`,
+        isMatchedRange: o === t,
+        ref: m
+      }
+    )) });
   }
-}, t = e;
+);
 export {
-  t as default
+  j as SmileyMeterRanges
 };
 //# sourceMappingURL=sd-component-library196.js.map