@selfdecode/sd-component-library 4.0.13-diet-11 → 4.0.14-8.1

package/lib/sd-component-library168.js

@@ -0,0 +1,690 @@
+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"
+        }
+      }
+    }
+  },
+  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"
+    }
+  }
+}, r = e;
+export {
+  r as default
+};
+//# sourceMappingURL=sd-component-library168.js.map