zebpay-ui 0.0.1

package/dist/esm/index.js

@@ -0,0 +1,648 @@
+import { jsx as e } from "@emotion/react/jsx-runtime";
+import { keyframes as t, css as o } from "@emotion/react";
+var r = function () {
+  return (
+    (r =
+      Object.assign ||
+      function (e) {
+        for (var t, o = 1, r = arguments.length; o < r; o++)
+          for (var n in (t = arguments[o]))
+            Object.prototype.hasOwnProperty.call(t, n) && (e[n] = t[n]);
+        return e;
+      }),
+    r.apply(this, arguments)
+  );
+};
+var n,
+  i,
+  l,
+  a = t(
+    l ||
+      ((n = [
+        "\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }",
+      ]),
+      (i = [
+        "\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }",
+      ]),
+      Object.defineProperty
+        ? Object.defineProperty(n, "raw", { value: i })
+        : (n.raw = i),
+      (l = n))
+  ),
+  _ = o({
+    borderRadius: "100%",
+    borderWidth: 3,
+    borderStyle: "solid",
+    borderTopColor: "rgba(255,255,255,0.4)",
+    margin: "0 auto",
+    animation: "".concat(a, " 1s linear infinite"),
+  }),
+  d = function (t) {
+    var r = t.size,
+      n = t.color;
+    return e("div", {
+      css: [
+        _,
+        o({ height: "".concat(r, "px"), width: "".concat(r, "px"), color: n }),
+      ],
+    });
+  },
+  m = {
+    Zeb_Solid_White: "#FFFFFF",
+    Zeb_Solid_BG_Blue: "#222245",
+    Zeb_Solid_Dark_Blue: "#181837",
+    Zeb_Solid_Bright_Blue: "#338FFF",
+    Zeb_Solid_Light_Blue: "#C0C0EE",
+    Zeb_Solid_Green: "#1ECAA2",
+    Zeb_Solid_Red: "#EA6161",
+    Zeb_Solid_Yellow: "#F9C35C",
+    Zeb_Solid_Grey: "#C2C2DD",
+    Zeb_Solid_Dark_Grey: "#34345A",
+    Zeb_Solid_Black: "000000",
+    Zeb_Solid_Light_Blue_01: "#E9EFF6",
+    Zeb_Solid_Grey_01: "#E1E3E6",
+    Zeb_Gradient_Blue_01:
+      "linear-gradient(90.15deg, #5D7BFE 0.73%, #0974FF 101.92%)",
+    Zeb_Gradient_Blue_02:
+      "linear-gradient(180deg, #0473FF 0.54%, rgba(4, 115, 255, 0) 100%)",
+    Zeb_Gradient_Dark_Blue:
+      "linear-gradient(254.37deg, #4A62CA -43.42%, #1B264B 148.58%)",
+    Zeb_Transparent_25: "rgba(12, 12, 36, 0.25)",
+    Zeb_Transparent_Green: "rgba(30, 202, 162, 0.2)",
+    Zeb_Transparent_Yellow: "rgba(249, 195, 92, 0.2)",
+    Zeb_Transparent_Red: "rgba(234, 97, 97, 0.2)",
+    Zeb_BG_Blue: "rgba(51, 143, 255, 0.2)",
+    Zeb_BG_Light_Blue: "rgba(192, 192, 238, 0.2)",
+    Zeb_BG_Green: "rgba(30, 202, 162, 0.08)",
+    Zeb_BG_Red: "rgba(234, 97, 97, 0.08)",
+    Zeb_BG_Yellow: "rgba(249, 195, 92, 0.08)",
+    Zeb_Transparent_4: "rgba(51, 143, 255, 0.04)",
+    Zeb_Effects_Shadow_Hover: "0px 8px 8px -4px #0C0C1D",
+    Zeb_Effects_Shadow_W_Drawer: "-12px 0px 40px rgba(12, 12, 29, 0.48)",
+    Zeb_Effects_Shadow_M_Drawer: "0px -12px 40px rgba(12, 12, 29, 0.48)",
+    Zeb_Effects_Shadow_Hover_Up: "0px -2px 32px 8px rgba(12, 12, 29, 0.4)",
+    Zeb_Effects_Shimmer:
+      "linear-gradient(97.38deg, #34345A -40.76%, #19193A 135.88%)",
+  },
+  c = {
+    remConverter: function (e) {
+      return "".concat(e / 16, "rem");
+    },
+    widthPercentage: function (e) {
+      return o({ width: "".concat(e, "%") });
+    },
+    heightPercentage: function (e) {
+      return o({ height: "".concat(e, "%") });
+    },
+    mr: function (e) {
+      return o({ marginRight: c.remConverter(e) });
+    },
+    ml: function (e) {
+      return o({ marginLeft: c.remConverter(e) });
+    },
+    mt: function (e) {
+      return o({ marginTop: c.remConverter(e) });
+    },
+    mb: function (e) {
+      return o({ marginBottom: c.remConverter(e) });
+    },
+  },
+  f = {
+    H1_56_bold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: c.remConverter(56),
+      lineHeight: "86px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H2_44_bold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: c.remConverter(44),
+      lineHeight: "60px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H3_32_bold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: c.remConverter(32),
+      lineHeight: "48px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H4_28_bold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: c.remConverter(28),
+      lineHeight: "40px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H5_20_bold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: c.remConverter(20),
+      lineHeight: "normal",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H6_16_bold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: c.remConverter(16),
+      lineHeight: "28px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H1_56_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: c.remConverter(56),
+      lineHeight: "86px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H2_44_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: c.remConverter(44),
+      lineHeight: "60px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H3_32_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: c.remConverter(32),
+      lineHeight: "48px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H4_28_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: c.remConverter(28),
+      lineHeight: "40px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H5_20_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: c.remConverter(20),
+      lineHeight: "30px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H6_16_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: c.remConverter(16),
+      lineHeight: "28px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H1_56_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: c.remConverter(56),
+      lineHeight: "86px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H2_44_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: c.remConverter(44),
+      lineHeight: "60px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H3_32_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: c.remConverter(32),
+      lineHeight: "48px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H4_28_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: c.remConverter(28),
+      lineHeight: "40px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H5_20_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: c.remConverter(20),
+      lineHeight: "30px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H6_16_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: c.remConverter(16),
+      lineHeight: "28px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    H8_12_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: c.remConverter(12),
+      lineHeight: "18px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+    },
+    B1_24_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: c.remConverter(24),
+      lineHeight: "40px",
+      letterSpacing: "0.4px",
+      color: m.Zeb_Solid_White,
+    },
+    B2_20_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: c.remConverter(20),
+      lineHeight: "30px",
+      letterSpacing: "0.4px",
+      color: m.Zeb_Solid_White,
+    },
+    B3_16_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: c.remConverter(16),
+      lineHeight: "28px",
+      letterSpacing: "0.4px",
+      color: m.Zeb_Solid_White,
+    },
+    B4_14_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: c.remConverter(14),
+      lineHeight: "24px",
+      letterSpacing: "0.4px",
+      color: m.Zeb_Solid_White,
+    },
+    B5_12_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: c.remConverter(12),
+      lineHeight: "18px",
+      letterSpacing: "0.4px",
+      color: m.Zeb_Solid_White,
+    },
+    B6_10_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: c.remConverter(10),
+      lineHeight: "12px",
+      letterSpacing: "0.4px",
+      color: m.Zeb_Solid_White,
+    },
+    B1_24_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: c.remConverter(24),
+      lineHeight: "40px",
+      letterSpacing: "0.4px",
+      color: m.Zeb_Solid_White,
+    },
+    B2_20_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: c.remConverter(20),
+      lineHeight: "30px",
+      letterSpacing: "0.4px",
+      color: m.Zeb_Solid_White,
+    },
+    B3_16_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: c.remConverter(16),
+      lineHeight: "28px",
+      letterSpacing: "0.4px",
+      color: m.Zeb_Solid_White,
+    },
+    B4_14_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: c.remConverter(14),
+      lineHeight: "24px",
+      letterSpacing: "0.4px",
+      color: m.Zeb_Solid_White,
+    },
+    B5_12_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: c.remConverter(12),
+      lineHeight: "18px",
+      letterSpacing: "0.4px",
+      color: m.Zeb_Solid_White,
+    },
+    B6_10_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: c.remConverter(10),
+      lineHeight: "12px",
+      letterSpacing: "0.4px",
+      color: m.Zeb_Solid_White,
+    },
+    C1_20: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: c.remConverter(20),
+      lineHeight: "30px",
+      letterSpacing: "1.6px",
+      color: m.Zeb_Solid_White,
+      textTransform: "uppercase",
+    },
+    C2_16: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: c.remConverter(16),
+      lineHeight: "28px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+      textTransform: "uppercase",
+    },
+    C3_14: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: c.remConverter(14),
+      lineHeight: "24px",
+      letterSpacing: "0.8px",
+      color: m.Zeb_Solid_White,
+      textTransform: "uppercase",
+    },
+    C4_12: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: c.remConverter(12),
+      lineHeight: "18px",
+      letterSpacing: "0.4px",
+      color: m.Zeb_Solid_White,
+      textTransform: "uppercase",
+    },
+  },
+  g = {
+    flexJustifiedBetween: o({ justifyContent: "space-between" }),
+    flexJustifiedCenter: o({ justifyContent: "center" }),
+    flexJustifiedEnd: o({ justifyContent: "flex-end" }),
+    flexAlignCenter: o({ display: "flex", alignItems: "center" }),
+    flexAlignStart: o({ display: "flex", alignItems: "flex-start" }),
+    flexNoWrap: o({ flexWrap: "nowrap" }),
+    flexColumn: o({ display: "flex", flexDirection: "column" }),
+    textSuccess: o({ color: m.Zeb_Solid_Green }),
+    textError: o({ color: m.Zeb_Solid_Red }),
+    bgSuccess: o({ background: m.Zeb_Solid_Green }),
+    bgError: o({ background: m.Zeb_Solid_Red }),
+    textFaded: o({ color: m.Zeb_Solid_Light_Blue }),
+    textCapitalize: o({ textTransform: "capitalize" }),
+    textAlignmentCenter: o({ textAlign: "center" }),
+    textAlignmentLeft: o({ textAlign: "left" }),
+    textAlignmentRight: o({ textAlign: "right" }),
+  },
+  p = o(
+    r(
+      r(
+        {
+          padding: 0,
+          backgroundColor: "transparent",
+          boxShadow: "none",
+          border: "none",
+          outline: "none",
+        },
+        f.C3_14
+      ),
+      {
+        color: m.Zeb_Solid_Bright_Blue,
+        "&.small": r(r({}, f.C4_12), { color: m.Zeb_Solid_Bright_Blue }),
+      }
+    )
+  ),
+  S = o(
+    r(
+      r(
+        {
+          background: m.Zeb_Gradient_Blue_01,
+          borderRadius: c.remConverter(8),
+          boxShadow: "none",
+          border: "none",
+          outline: "none",
+          whiteSpace: "nowrap",
+        },
+        f.C4_12
+      ),
+      {
+        "&.small": r(
+          {
+            padding: ""
+              .concat(c.remConverter(8), " ")
+              .concat(c.remConverter(12)),
+          },
+          f.C4_12
+        ),
+        "&.medium": r(
+          {
+            padding: ""
+              .concat(c.remConverter(8), " ")
+              .concat(c.remConverter(12)),
+          },
+          f.C4_12
+        ),
+        "&.large": r(
+          {
+            padding: ""
+              .concat(c.remConverter(8), " ")
+              .concat(c.remConverter(16)),
+          },
+          f.C2_16
+        ),
+        "&.full-width": {
+          padding: "".concat(c.remConverter(8), " 0"),
+          width: "100%",
+        },
+        "&:disabled": { opacity: 0.2 },
+      }
+    )
+  ),
+  b = o(
+    r(
+      r(
+        {
+          padding: "".concat(c.remConverter(8), " ").concat(c.remConverter(16)),
+          background: m.Zeb_Transparent_4,
+          border: "1px solid ".concat(m.Zeb_Solid_Bright_Blue),
+          borderRadius: "8px",
+        },
+        f.C2_16
+      ),
+      {
+        "&.small": r(
+          {
+            padding: ""
+              .concat(c.remConverter(8), " ")
+              .concat(c.remConverter(12)),
+          },
+          f.C4_12
+        ),
+        "&.medium": r(
+          {
+            padding: ""
+              .concat(c.remConverter(8), " ")
+              .concat(c.remConverter(12)),
+          },
+          f.C4_12
+        ),
+        "&.large": r(
+          {
+            padding: ""
+              .concat(c.remConverter(8), " ")
+              .concat(c.remConverter(16)),
+          },
+          f.C2_16
+        ),
+        "&.full-width": { padding: "".concat(c.remConverter(8), " 0") },
+        "&:disabled": { borderColor: m.Zeb_Solid_Grey },
+      }
+    )
+  ),
+  h = o({
+    padding: "".concat(c.remConverter(6), " 0"),
+    background: m.Zeb_Gradient_Blue_01,
+    boxShadow: "none",
+    border: "none",
+    outline: "none",
+    borderRadius: "8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    "&.small": { width: "100%", padding: "".concat(c.remConverter(8), " 0") },
+    "&.large": { width: "100%" },
+    "&.full-width": { width: "100%" },
+    "&.medium": { width: "100%" },
+  }),
+  x = o(r({ marginLeft: c.remConverter(8) }, f.C3_14)),
+  s = o({ display: "none" }),
+  u = o({
+    padding: "".concat(c.remConverter(8), " ").concat(c.remConverter(12)),
+    background: m.Zeb_Transparent_4,
+    boxShadow: "none",
+    border: "1px solid ".concat(m.Zeb_Solid_Bright_Blue),
+    outline: "none",
+    borderRadius: "8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    "&.medium": {
+      padding: "".concat(c.remConverter(8), " ").concat(c.remConverter(12)),
+    },
+  }),
+  C = o(r({ marginLeft: c.remConverter(4) }, f.C4_12)),
+  y = o(
+    r(
+      r(
+        {
+          border: "0.5px solid ".concat(m.Zeb_Solid_Light_Blue),
+          borderRadius: "4px",
+          padding: "".concat(c.remConverter(4), " ").concat(c.remConverter(8)),
+        },
+        f.B5_12_semibold
+      ),
+      {
+        color: m.Zeb_Solid_Light_Blue,
+        display: "flex",
+        justifyContent: "center",
+        flexGrow: 1,
+        textTransform: "uppercase",
+        cursor: "pointer",
+        "&.active": r(
+          {
+            background: m.Zeb_Solid_Dark_Blue,
+            borderColor: m.Zeb_Solid_Bright_Blue,
+          },
+          f.C4_12
+        ),
+      }
+    )
+  ),
+  Z = o({ opacity: 0.5, cursor: "not-allowed" });
+function v(e, t) {
+  switch (e) {
+    case "primary":
+      return S;
+    case "secondary":
+      return b;
+    case "tertiary":
+      return [u, C];
+    case "link":
+      return p;
+    case "tab":
+      return "small" === t ? [y, s] : y;
+    case "special":
+      return [h, x];
+  }
+}
+var W = function (t) {
+  var o = t.type,
+    n = t.size,
+    i = void 0 === n ? "medium" : n,
+    l = t.onClick,
+    a = t.disabled,
+    _ = t.style,
+    m = t.children,
+    c = t.loading;
+  return e(
+    "button",
+    r(
+      { onClick: l, disabled: a, className: i, css: [v(o, i), _, a && Z] },
+      { children: c ? e(d, { size: 18 }) : m }
+    )
+  );
+};
+export { W as Button, m as colors, g as mixins, f as typography, c as utils };
+//# sourceMappingURL=index.js.map