zebpay-ui 0.0.1

package/dist/cjs/index.js

@@ -0,0 +1,657 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var e = require("@emotion/react/jsx-runtime"),
+  t = require("@emotion/react"),
+  o = function () {
+    return (
+      (o =
+        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;
+        }),
+      o.apply(this, arguments)
+    );
+  };
+var r,
+  n,
+  i,
+  l = t.keyframes(
+    i ||
+      ((r = [
+        "\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }",
+      ]),
+      (n = [
+        "\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }",
+      ]),
+      Object.defineProperty
+        ? Object.defineProperty(r, "raw", { value: n })
+        : (r.raw = n),
+      (i = r))
+  ),
+  a = t.css({
+    borderRadius: "100%",
+    borderWidth: 3,
+    borderStyle: "solid",
+    borderTopColor: "rgba(255,255,255,0.4)",
+    margin: "0 auto",
+    animation: "".concat(l, " 1s linear infinite"),
+  }),
+  _ = function (o) {
+    var r = o.size,
+      n = o.color;
+    return e.jsx("div", {
+      css: [
+        a,
+        t.css({
+          height: "".concat(r, "px"),
+          width: "".concat(r, "px"),
+          color: n,
+        }),
+      ],
+    });
+  },
+  c = {
+    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%)",
+  },
+  d = {
+    remConverter: function (e) {
+      return "".concat(e / 16, "rem");
+    },
+    widthPercentage: function (e) {
+      return t.css({ width: "".concat(e, "%") });
+    },
+    heightPercentage: function (e) {
+      return t.css({ height: "".concat(e, "%") });
+    },
+    mr: function (e) {
+      return t.css({ marginRight: d.remConverter(e) });
+    },
+    ml: function (e) {
+      return t.css({ marginLeft: d.remConverter(e) });
+    },
+    mt: function (e) {
+      return t.css({ marginTop: d.remConverter(e) });
+    },
+    mb: function (e) {
+      return t.css({ marginBottom: d.remConverter(e) });
+    },
+  },
+  m = {
+    H1_56_bold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: d.remConverter(56),
+      lineHeight: "86px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H2_44_bold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: d.remConverter(44),
+      lineHeight: "60px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H3_32_bold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: d.remConverter(32),
+      lineHeight: "48px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H4_28_bold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: d.remConverter(28),
+      lineHeight: "40px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H5_20_bold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: d.remConverter(20),
+      lineHeight: "normal",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H6_16_bold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: d.remConverter(16),
+      lineHeight: "28px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H1_56_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: d.remConverter(56),
+      lineHeight: "86px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H2_44_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: d.remConverter(44),
+      lineHeight: "60px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H3_32_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: d.remConverter(32),
+      lineHeight: "48px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H4_28_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: d.remConverter(28),
+      lineHeight: "40px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H5_20_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: d.remConverter(20),
+      lineHeight: "30px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H6_16_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: d.remConverter(16),
+      lineHeight: "28px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H1_56_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: d.remConverter(56),
+      lineHeight: "86px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H2_44_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: d.remConverter(44),
+      lineHeight: "60px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H3_32_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: d.remConverter(32),
+      lineHeight: "48px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H4_28_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: d.remConverter(28),
+      lineHeight: "40px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H5_20_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: d.remConverter(20),
+      lineHeight: "30px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H6_16_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: d.remConverter(16),
+      lineHeight: "28px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    H8_12_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: d.remConverter(12),
+      lineHeight: "18px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+    },
+    B1_24_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: d.remConverter(24),
+      lineHeight: "40px",
+      letterSpacing: "0.4px",
+      color: c.Zeb_Solid_White,
+    },
+    B2_20_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: d.remConverter(20),
+      lineHeight: "30px",
+      letterSpacing: "0.4px",
+      color: c.Zeb_Solid_White,
+    },
+    B3_16_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: d.remConverter(16),
+      lineHeight: "28px",
+      letterSpacing: "0.4px",
+      color: c.Zeb_Solid_White,
+    },
+    B4_14_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: d.remConverter(14),
+      lineHeight: "24px",
+      letterSpacing: "0.4px",
+      color: c.Zeb_Solid_White,
+    },
+    B5_12_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: d.remConverter(12),
+      lineHeight: "18px",
+      letterSpacing: "0.4px",
+      color: c.Zeb_Solid_White,
+    },
+    B6_10_semibold: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: d.remConverter(10),
+      lineHeight: "12px",
+      letterSpacing: "0.4px",
+      color: c.Zeb_Solid_White,
+    },
+    B1_24_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: d.remConverter(24),
+      lineHeight: "40px",
+      letterSpacing: "0.4px",
+      color: c.Zeb_Solid_White,
+    },
+    B2_20_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: 600,
+      fontSize: d.remConverter(20),
+      lineHeight: "30px",
+      letterSpacing: "0.4px",
+      color: c.Zeb_Solid_White,
+    },
+    B3_16_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: d.remConverter(16),
+      lineHeight: "28px",
+      letterSpacing: "0.4px",
+      color: c.Zeb_Solid_White,
+    },
+    B4_14_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: d.remConverter(14),
+      lineHeight: "24px",
+      letterSpacing: "0.4px",
+      color: c.Zeb_Solid_White,
+    },
+    B5_12_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: d.remConverter(12),
+      lineHeight: "18px",
+      letterSpacing: "0.4px",
+      color: c.Zeb_Solid_White,
+    },
+    B6_10_regular: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "normal",
+      fontSize: d.remConverter(10),
+      lineHeight: "12px",
+      letterSpacing: "0.4px",
+      color: c.Zeb_Solid_White,
+    },
+    C1_20: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: d.remConverter(20),
+      lineHeight: "30px",
+      letterSpacing: "1.6px",
+      color: c.Zeb_Solid_White,
+      textTransform: "uppercase",
+    },
+    C2_16: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: d.remConverter(16),
+      lineHeight: "28px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+      textTransform: "uppercase",
+    },
+    C3_14: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: d.remConverter(14),
+      lineHeight: "24px",
+      letterSpacing: "0.8px",
+      color: c.Zeb_Solid_White,
+      textTransform: "uppercase",
+    },
+    C4_12: {
+      fontFamily: "Lato",
+      fontStyle: "normal",
+      fontWeight: "bold",
+      fontSize: d.remConverter(12),
+      lineHeight: "18px",
+      letterSpacing: "0.4px",
+      color: c.Zeb_Solid_White,
+      textTransform: "uppercase",
+    },
+  },
+  f = {
+    flexJustifiedBetween: t.css({ justifyContent: "space-between" }),
+    flexJustifiedCenter: t.css({ justifyContent: "center" }),
+    flexJustifiedEnd: t.css({ justifyContent: "flex-end" }),
+    flexAlignCenter: t.css({ display: "flex", alignItems: "center" }),
+    flexAlignStart: t.css({ display: "flex", alignItems: "flex-start" }),
+    flexNoWrap: t.css({ flexWrap: "nowrap" }),
+    flexColumn: t.css({ display: "flex", flexDirection: "column" }),
+    textSuccess: t.css({ color: c.Zeb_Solid_Green }),
+    textError: t.css({ color: c.Zeb_Solid_Red }),
+    bgSuccess: t.css({ background: c.Zeb_Solid_Green }),
+    bgError: t.css({ background: c.Zeb_Solid_Red }),
+    textFaded: t.css({ color: c.Zeb_Solid_Light_Blue }),
+    textCapitalize: t.css({ textTransform: "capitalize" }),
+    textAlignmentCenter: t.css({ textAlign: "center" }),
+    textAlignmentLeft: t.css({ textAlign: "left" }),
+    textAlignmentRight: t.css({ textAlign: "right" }),
+  },
+  g = t.css(
+    o(
+      o(
+        {
+          padding: 0,
+          backgroundColor: "transparent",
+          boxShadow: "none",
+          border: "none",
+          outline: "none",
+        },
+        m.C3_14
+      ),
+      {
+        color: c.Zeb_Solid_Bright_Blue,
+        "&.small": o(o({}, m.C4_12), { color: c.Zeb_Solid_Bright_Blue }),
+      }
+    )
+  ),
+  p = t.css(
+    o(
+      o(
+        {
+          background: c.Zeb_Gradient_Blue_01,
+          borderRadius: d.remConverter(8),
+          boxShadow: "none",
+          border: "none",
+          outline: "none",
+          whiteSpace: "nowrap",
+        },
+        m.C4_12
+      ),
+      {
+        "&.small": o(
+          {
+            padding: ""
+              .concat(d.remConverter(8), " ")
+              .concat(d.remConverter(12)),
+          },
+          m.C4_12
+        ),
+        "&.medium": o(
+          {
+            padding: ""
+              .concat(d.remConverter(8), " ")
+              .concat(d.remConverter(12)),
+          },
+          m.C4_12
+        ),
+        "&.large": o(
+          {
+            padding: ""
+              .concat(d.remConverter(8), " ")
+              .concat(d.remConverter(16)),
+          },
+          m.C2_16
+        ),
+        "&.full-width": {
+          padding: "".concat(d.remConverter(8), " 0"),
+          width: "100%",
+        },
+        "&:disabled": { opacity: 0.2 },
+      }
+    )
+  ),
+  s = t.css(
+    o(
+      o(
+        {
+          padding: "".concat(d.remConverter(8), " ").concat(d.remConverter(16)),
+          background: c.Zeb_Transparent_4,
+          border: "1px solid ".concat(c.Zeb_Solid_Bright_Blue),
+          borderRadius: "8px",
+        },
+        m.C2_16
+      ),
+      {
+        "&.small": o(
+          {
+            padding: ""
+              .concat(d.remConverter(8), " ")
+              .concat(d.remConverter(12)),
+          },
+          m.C4_12
+        ),
+        "&.medium": o(
+          {
+            padding: ""
+              .concat(d.remConverter(8), " ")
+              .concat(d.remConverter(12)),
+          },
+          m.C4_12
+        ),
+        "&.large": o(
+          {
+            padding: ""
+              .concat(d.remConverter(8), " ")
+              .concat(d.remConverter(16)),
+          },
+          m.C2_16
+        ),
+        "&.full-width": { padding: "".concat(d.remConverter(8), " 0") },
+        "&:disabled": { borderColor: c.Zeb_Solid_Grey },
+      }
+    )
+  ),
+  S = t.css({
+    padding: "".concat(d.remConverter(6), " 0"),
+    background: c.Zeb_Gradient_Blue_01,
+    boxShadow: "none",
+    border: "none",
+    outline: "none",
+    borderRadius: "8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    "&.small": { width: "100%", padding: "".concat(d.remConverter(8), " 0") },
+    "&.large": { width: "100%" },
+    "&.full-width": { width: "100%" },
+    "&.medium": { width: "100%" },
+  }),
+  b = t.css(o({ marginLeft: d.remConverter(8) }, m.C3_14)),
+  h = t.css({ display: "none" }),
+  x = t.css({
+    padding: "".concat(d.remConverter(8), " ").concat(d.remConverter(12)),
+    background: c.Zeb_Transparent_4,
+    boxShadow: "none",
+    border: "1px solid ".concat(c.Zeb_Solid_Bright_Blue),
+    outline: "none",
+    borderRadius: "8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    "&.medium": {
+      padding: "".concat(d.remConverter(8), " ").concat(d.remConverter(12)),
+    },
+  }),
+  u = t.css(o({ marginLeft: d.remConverter(4) }, m.C4_12)),
+  C = t.css(
+    o(
+      o(
+        {
+          border: "0.5px solid ".concat(c.Zeb_Solid_Light_Blue),
+          borderRadius: "4px",
+          padding: "".concat(d.remConverter(4), " ").concat(d.remConverter(8)),
+        },
+        m.B5_12_semibold
+      ),
+      {
+        color: c.Zeb_Solid_Light_Blue,
+        display: "flex",
+        justifyContent: "center",
+        flexGrow: 1,
+        textTransform: "uppercase",
+        cursor: "pointer",
+        "&.active": o(
+          {
+            background: c.Zeb_Solid_Dark_Blue,
+            borderColor: c.Zeb_Solid_Bright_Blue,
+          },
+          m.C4_12
+        ),
+      }
+    )
+  ),
+  y = t.css({ opacity: 0.5, cursor: "not-allowed" });
+function Z(e, t) {
+  switch (e) {
+    case "primary":
+      return p;
+    case "secondary":
+      return s;
+    case "tertiary":
+      return [x, u];
+    case "link":
+      return g;
+    case "tab":
+      return "small" === t ? [C, h] : C;
+    case "special":
+      return [S, b];
+  }
+}
+(exports.Button = function (t) {
+  var r = t.type,
+    n = t.size,
+    i = void 0 === n ? "medium" : n,
+    l = t.onClick,
+    a = t.disabled,
+    c = t.style,
+    d = t.children,
+    m = t.loading;
+  return e.jsx(
+    "button",
+    o(
+      { onClick: l, disabled: a, className: i, css: [Z(r, i), c, a && y] },
+      { children: m ? e.jsx(_, { size: 18 }) : d }
+    )
+  );
+}),
+(exports.colors = c),
+(exports.mixins = f),
+(exports.typography = m),
+(exports.utils = d);
+//# sourceMappingURL=index.js.map