zebpay-ui 0.0.1 → 0.0.4

package/dist/cjs/index.js

@@ -1,657 +0,0 @@
-"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