zebpay-ui 0.0.1

package/src/components/Input/index.tsx

@@ -0,0 +1,95 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import React, { useState } from "react";
+import { mixins, typography } from "../../styles";
+import Button from "../Button";
+import * as styles from "./styles";
+import { InputProps } from "./typings";
+
+const Input: React.FC<InputProps> = ({
+  value,
+  label,
+  placeholder,
+  name,
+  appendItem,
+  prependItem,
+  infoText,
+  errorText,
+  cta,
+  style,
+  type = "text",
+  onChange,
+}) => {
+  const [focused, setFocused] = useState<boolean>(false);
+  return (
+    <div css={style}>
+      <label
+        css={[
+          styles.formLabel,
+          focused ? styles.activeFormLabel : null,
+          errorText ? mixins.textError : null,
+        ]}
+      >
+        {label}
+      </label>
+      <div
+        css={[
+          styles.inputGroup,
+          mixins.flexAlignCenter,
+          focused ? styles.focusedInputGroup : null,
+          errorText ? styles.invalidInputGroup : null,
+        ]}
+      >
+        {prependItem && (
+          <span css={styles.inputGroupPrepend}>{prependItem}</span>
+        )}
+        <input
+          type={type}
+          name={name}
+          placeholder={placeholder}
+          onFocus={() => {
+            setFocused(true);
+          }}
+          onBlur={() => {
+            setFocused(false);
+          }}
+          css={[
+            styles.formControl,
+            styles.fieldFullRounded,
+            prependItem && styles.fieldFirstHalfRounded,
+            appendItem && styles.fieldSecondHalfRounded,
+            appendItem && prependItem && styles.fieldNoRounded,
+          ]}
+          value={value}
+          onChange={(e) => {
+            const { value, name } = e.target;
+            onChange({ value: value, name: name });
+          }}
+        />
+        {appendItem && <span css={styles.inputGroupText}>{appendItem}</span>}
+      </div>
+      <div css={[mixins.flexAlignCenter, mixins.flexJustifiedBetween]}>
+        {(errorText || infoText) && (
+          <div
+            css={[
+              css({ ...typography.B4_14_regular }),
+              infoText && mixins.textFaded,
+              errorText && mixins.textError,
+            ]}
+          >
+            {infoText || errorText}
+          </div>
+        )}
+        {cta && (
+          <div css={styles.infoCta}>
+            <Button type="link" size="medium" onClick={cta.onClick}>
+              {cta.label}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Input;

package/src/components/Input/styles.ts

@@ -0,0 +1,79 @@
+import { css } from "@emotion/react";
+import { colors, typography, utils } from "../../styles";
+
+export const invalidInputGroup = css({
+  borderColor: colors.Zeb_Solid_Red,
+});
+
+export const formLabel = css({
+  ...typography.B4_14_regular,
+  color: colors.Zeb_Solid_Light_Blue,
+  marginBottom: utils.remConverter(4),
+});
+
+export const activeFormLabel = css({
+  color: `${colors.Zeb_Solid_White}!important`,
+});
+
+export const inputGroup = css({
+  border: "1px solid transparent",
+  borderRadius: 8,
+  flexWrap: "wrap",
+  alignItems: "stretch",
+});
+
+export const focusedInputGroup = css({
+  borderColor: colors.Zeb_Solid_Bright_Blue,
+  boxShadow: colors.Zeb_Effects_Shadow_Hover,
+});
+
+export const formControl = css({
+  padding: `${utils.remConverter(8)} ${utils.remConverter(12)}`,
+  background: colors.Zeb_Solid_Dark_Blue,
+  border: "none",
+  ...typography.B4_14_semibold,
+  color: `${colors.Zeb_Solid_White}!important`,
+  height: utils.remConverter(40),
+  flex: "1 1 auto",
+  ":focus": {
+    boxShadow: "none",
+    outline: "none",
+  },
+  "::placeholder": {
+    ...typography.B4_14_regular,
+    color: `${colors.Zeb_Solid_Light_Blue}!important`,
+  },
+});
+export const fieldFullRounded = css({
+  borderRadius: utils.remConverter(8),
+});
+export const fieldNoRounded = css({
+  borderRadius: utils.remConverter(0),
+});
+export const fieldSecondHalfRounded = css({
+  borderRadius: `${utils.remConverter(8)} 0 0 ${utils.remConverter(8)}`,
+});
+export const fieldFirstHalfRounded = css({
+  borderRadius: `0 ${utils.remConverter(8)} ${utils.remConverter(8)} 0`,
+});
+
+export const inputGroupText = css({
+  padding: `${utils.remConverter(8)} ${utils.remConverter(12)}`,
+  background: colors.Zeb_Solid_Dark_Blue,
+  borderRadius: `0 ${utils.remConverter(8)} ${utils.remConverter(8)} 0`,
+  border: "none",
+  ...typography.B4_14_semibold,
+  height: utils.remConverter(40),
+});
+export const inputGroupPrepend = css({
+  padding: `${utils.remConverter(8)} ${utils.remConverter(12)}`,
+  background: colors.Zeb_Solid_Dark_Blue,
+  borderRadius: `${utils.remConverter(8)} 0 0 ${utils.remConverter(8)}`,
+  border: "none",
+  ...typography.B4_14_semibold,
+  height: utils.remConverter(40),
+});
+
+export const infoCta = css({
+  marginLeft: "auto",
+});

package/src/components/Input/typings.ts

@@ -0,0 +1,25 @@
+import { SerializedStyles } from "@emotion/react";
+import { ReactText } from "react";
+
+export interface InputTargetProps {
+  value: string;
+  name: string;
+}
+
+export interface InputProps {
+  label: string;
+  placeholder: string;
+  value: ReactText;
+  onChange: (target: InputTargetProps) => void;
+  name?: string;
+  appendItem?: string | JSX.Element;
+  prependItem?: string | JSX.Element;
+  infoText?: string;
+  errorText?: string;
+  type?: "text" | "number" | "password";
+  style?: SerializedStyles;
+  cta?: {
+    label: string;
+    onClick: () => void;
+  };
+}

package/src/components/Popper/index.tsx

@@ -0,0 +1,62 @@
+/** @jsxImportSource @emotion/react */
+import * as React from "react";
+import * as styles from "./styles";
+import Button from "../Button";
+import { PopperProps } from "./typings";
+import { ButtonProps } from "../Button/typings";
+import { useFocus } from "../../hooks";
+
+const Popper: React.FC<PopperProps> = ({
+  onClose = () => {},
+  label,
+  buttonProps = {} as ButtonProps,
+  renderChildren,
+  style,
+}) => {
+  const [open, setOpen] = React.useState<boolean>(false);
+
+  const [popperRef, setFocus] = useFocus<HTMLDivElement>();
+
+  const close = React.useCallback(() => {
+    setOpen(false);
+    onClose();
+  }, [onClose]);
+
+  const toggleOpened = React.useCallback(() => {
+    if (open) {
+      close();
+    } else {
+      setOpen(true);
+    }
+  }, [open, close, setOpen]);
+
+  React.useEffect(() => {
+    setFocus && setFocus();
+  }, [popperRef.current, setFocus]);
+
+  return (
+    <div css={[styles.container, style]}>
+      {open && (
+        <div css={styles.popup} tabIndex={0} onBlur={close} ref={popperRef}>
+          <div css={styles.header}>
+            <span>{label}</span>
+            <span onClick={close} css={styles.closer}>
+              X
+            </span>
+          </div>
+          {renderChildren({ close, isOpened: open })}
+        </div>
+      )}
+      <Button
+        {...buttonProps}
+        style={[styles.button, buttonProps.style]}
+        onClick={toggleOpened}
+        type={buttonProps.type || "secondary"}
+      >
+        {label}
+      </Button>
+    </div>
+  );
+};
+
+export default Popper;

package/src/components/Popper/styles.ts

@@ -0,0 +1,59 @@
+import { css } from "@emotion/react";
+import { colors, typography, utils } from "../../styles";
+
+const BUTTON_HEIGHT = 34;
+const BUTTON_WIDTH = 330;
+
+export const container = css({
+  height: utils.remConverter(BUTTON_HEIGHT),
+  width: utils.remConverter(BUTTON_WIDTH),
+  position: "relative",
+});
+
+export const popup = css({
+  backgroundColor: colors.Zeb_Solid_BG_Blue,
+  borderRadius: utils.remConverter(8),
+  minWidth: utils.remConverter(BUTTON_WIDTH - 2),
+  display: "flex",
+  flexDirection: "column",
+  padding: utils.remConverter(12),
+  position: "absolute",
+  justifyContent: "space-between",
+  borderColor: colors.Zeb_Solid_Bright_Blue,
+  borderWidth: utils.remConverter(2),
+  borderStyle: "solid",
+  boxShadow: "0px 8px 8px -4px #0C0C1D",
+  bottom: utils.remConverter(BUTTON_HEIGHT + 8),
+});
+
+export const header = css({
+  ...typography.B4_14_semibold,
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "space-between",
+  alignItems: "center",
+  marginBottom: "1rem",
+});
+
+export const button = css({
+  ...typography.C4_12,
+  textAlign: "center",
+  height: utils.remConverter(BUTTON_HEIGHT),
+  width: utils.remConverter(BUTTON_WIDTH),
+});
+
+export const closer = css({});
+
+export const label = (hovered?: boolean) => {
+  if (hovered) {
+    return css({
+      ...typography.B4_14_semibold,
+      color: colors.Zeb_Solid_White,
+    });
+  }
+
+  return css({
+    ...typography.B4_14_regular,
+    color: colors.Zeb_Solid_Light_Blue,
+  });
+};

package/src/components/Popper/typings.ts

@@ -0,0 +1,16 @@
+import { SerializedStyles } from "@emotion/react";
+import { ReactElement } from "react";
+import { ButtonProps } from "../Button/typings";
+
+export interface PopperProps {
+  label: string;
+  onClose?: () => void;
+  buttonProps?: ButtonProps;
+  renderChildren: (props: ChildrenProps) => ReactElement;
+  style?: SerializedStyles;
+}
+
+export interface ChildrenProps {
+  close: () => void;
+  isOpened: boolean;
+}

package/src/components/Radio/index.tsx

@@ -0,0 +1,32 @@
+/** @jsxImportSource @emotion/react */
+import React from "react";
+import * as styles from "./styles";
+import { RadioProps } from "./typings";
+
+const Radio: React.FC<RadioProps> = ({
+  value,
+  onChange,
+  label,
+  style,
+  name,
+  selected,
+}) => {
+  return (
+    <label css={[styles.container, style]}>
+      {label}
+      <input
+        type="radio"
+        name={name}
+        css={styles.input}
+        value={value}
+        onChange={(e) =>
+          onChange({ selected: e.target.checked, value: e.target.value })
+        }
+        checked={selected}
+      />
+      <span css={styles.checkmark} />
+    </label>
+  );
+};
+
+export default Radio;

package/src/components/Radio/styles.ts

@@ -0,0 +1,51 @@
+import { css } from "@emotion/react";
+import { colors, typography, utils } from "../../styles";
+
+export const container = css({
+  display: "block",
+  position: "relative",
+  paddingLeft: utils.remConverter(20),
+  cursor: "pointer",
+  WebkitUserSelect: "none",
+  MozUserSelect: "none",
+  msUserSelect: "none",
+  userSelect: "none",
+  marginBottom: 0,
+  ...typography.B4_14_regular,
+});
+
+export const input = css({
+  position: "absolute",
+  opacity: 0,
+  cursor: "pointer",
+  ":checked": {
+    "~ span": {
+      backgroundColor: "transparent",
+      ":after": {
+        display: "block",
+      },
+    },
+  },
+});
+
+export const checkmark = css({
+  position: "absolute",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  top: "50%",
+  left: 0,
+  height: 16,
+  width: 16,
+  borderRadius: "50%",
+  border: `1px solid ${colors.Zeb_Solid_White}`,
+  transform: "translateY(-50%)",
+  ":after": {
+    content: "''",
+    display: "none",
+    width: 8,
+    height: 8,
+    borderRadius: "50%",
+    backgroundColor: colors.Zeb_Solid_Bright_Blue,
+  },
+});

package/src/components/Radio/typings.ts

@@ -0,0 +1,11 @@
+import { SerializedStyles } from "@emotion/react";
+import { ReactText } from "react";
+
+export interface RadioProps {
+  selected: boolean;
+  onChange: (args: { selected: boolean; value: ReactText }) => void;
+  value?: ReactText;
+  label?: string | JSX.Element;
+  name: string;
+  style?: SerializedStyles;
+}

package/src/components/Toast/index.tsx

@@ -0,0 +1,88 @@
+/** @jsxImportSource @emotion/react */
+import React from "react";
+import toast from "react-hot-toast";
+import { colors } from "../../styles";
+import * as styles from "./styles";
+import { ToastProps } from "./typings";
+
+const getColor = (type: "info" | "error" | "success") => {
+  if (type === "info") return colors.Zeb_Solid_Yellow;
+  if (type === "error") return colors.Zeb_Solid_Red;
+  if (type === "success") return colors.Zeb_Solid_Green;
+};
+
+export const generateToast = ({
+  title,
+  description,
+  type,
+  onClose,
+}: ToastProps) => {
+  const closeToast = () => {
+    if (onClose) {
+      onClose();
+    }
+    toast.remove(toastId);
+  };
+
+  const toaster: JSX.Element = (
+    <Toast
+      title={title}
+      description={description}
+      type={type}
+      onClose={closeToast}
+    />
+  );
+
+  const toastId: string = toast.custom(toaster);
+};
+
+const Toast: React.FC<ToastProps> = ({ title, description, type, onClose }) => {
+  return (
+    <div css={[styles.toastContainer, styles[type]]}>
+      <div css={[styles.toastHeading, styles[`${type}ToastHeading`]]}>
+        <div css={styles.toastDetails}>
+          {/* TODO use icon */}
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M11.9999 13.9866C10.8159 14.7778 9.42383 15.2 7.9998 15.2C6.09024 15.2 4.2589 14.4415 2.90864 13.0912C1.55837 11.741 0.799805 9.90961 0.799805 8.00005C0.799805 6.57602 1.22208 5.18398 2.01322 3.99995C2.80437 2.81591 3.92885 1.89307 5.24448 1.34812C6.56011 0.803169 8.00779 0.660585 9.40445 0.938398C10.8011 1.21621 12.084 1.90194 13.091 2.90888C14.0979 3.91582 14.7836 5.19874 15.0615 6.5954C15.3393 7.99206 15.1967 9.43974 14.6517 10.7554C14.1068 12.071 13.1839 13.1955 11.9999 13.9866ZM11.4656 2.81311C10.4397 2.12763 9.23361 1.76177 7.9998 1.76177C6.34614 1.76449 4.76099 2.4226 3.59167 3.59192C2.42236 4.76124 1.76424 6.34639 1.76152 8.00005C1.76152 9.23386 2.12739 10.44 2.81286 11.4659C3.49833 12.4917 4.47262 13.2913 5.61251 13.7635C6.75241 14.2356 8.00672 14.3592 9.21683 14.1185C10.4269 13.8778 11.5385 13.2836 12.4109 12.4112C13.2834 11.5387 13.8775 10.4272 14.1182 9.21708C14.3589 8.00697 14.2354 6.75266 13.7632 5.61276C13.2911 4.47286 12.4915 3.49858 11.4656 2.81311ZM7.41321 7.59992C7.41321 7.27925 7.67321 7.01325 7.99321 7.01325C8.31987 7.01325 8.57987 7.27925 8.57987 7.59992V10.5466C8.57987 10.8666 8.31987 11.1266 7.99321 11.1266C7.67321 11.1266 7.41321 10.8666 7.41321 10.5466V7.59992ZM7.41987 5.48659C7.41987 5.15992 7.67987 4.89992 8.00654 4.89992C8.32654 4.89992 8.58654 5.15992 8.58654 5.48659C8.58654 5.80592 8.32654 6.06659 7.99321 6.06659C7.67987 6.06659 7.41987 5.80592 7.41987 5.48659Z"
+              fill={getColor(type)}
+            />
+          </svg>
+          <div css={styles.toastTitle}>{title}</div>
+        </div>
+        <div>
+          {onClose && (
+            <button css={styles.closeCta} onClick={onClose}>
+              {/* TODO use iconbutton */}
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M7.99996 0.666626C3.94996 0.666626 0.666626 3.94996 0.666626 7.99996C0.666626 12.05 3.94996 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.05 15.3333 7.99996C15.3333 3.94996 12.05 0.666626 7.99996 0.666626ZM10.4713 6.47129C10.5927 6.34556 10.6599 6.17716 10.6584 6.00236C10.6569 5.82756 10.5868 5.66035 10.4632 5.53675C10.3396 5.41314 10.1724 5.34303 9.99756 5.34151C9.82276 5.33999 9.65436 5.40719 9.52862 5.52863L7.99996 7.05729L6.47129 5.52863C6.40979 5.46495 6.33623 5.41416 6.25489 5.37922C6.17356 5.34429 6.08608 5.32589 5.99756 5.32513C5.90904 5.32436 5.82125 5.34122 5.73932 5.37474C5.65739 5.40827 5.58296 5.45777 5.52036 5.52036C5.45777 5.58296 5.40827 5.65739 5.37474 5.73932C5.34122 5.82125 5.32436 5.90904 5.32513 5.99756C5.32589 6.08608 5.34428 6.17356 5.37922 6.2549C5.41416 6.33623 5.46495 6.40979 5.52863 6.47129L7.05729 7.99996L5.52863 9.52863C5.46495 9.59012 5.41416 9.66369 5.37922 9.74502C5.34428 9.82636 5.32589 9.91384 5.32513 10.0024C5.32436 10.0909 5.34122 10.1787 5.37474 10.2606C5.40827 10.3425 5.45777 10.417 5.52036 10.4796C5.58296 10.5422 5.65739 10.5917 5.73932 10.6252C5.82125 10.6587 5.90904 10.6756 5.99756 10.6748C6.08608 10.674 6.17356 10.6556 6.25489 10.6207C6.33623 10.5858 6.40979 10.535 6.47129 10.4713L7.99996 8.94263L9.52862 10.4713C9.65436 10.5927 9.82276 10.6599 9.99756 10.6584C10.1724 10.6569 10.3396 10.5868 10.4632 10.4632C10.5868 10.3396 10.6569 10.1724 10.6584 9.99756C10.6599 9.82276 10.5927 9.65436 10.4713 9.52863L8.94262 7.99996L10.4713 6.47129Z"
+                  fill={getColor(type)}
+                />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+      <div css={styles.toastDescription}>{description}</div>
+    </div>
+  );
+};
+
+export default Toast;

package/src/components/Toast/styles.ts

@@ -0,0 +1,69 @@
+import { css } from "@emotion/react";
+import { colors, typography, utils } from "../../styles";
+
+export const toastContainer = css({
+  padding: `${utils.remConverter(12)} ${utils.remConverter(
+    16
+  )} ${utils.remConverter(12)} ${utils.remConverter(24)}`,
+  border: "1px solid transparent",
+  backdropFilter: "blur(20px)",
+  borderRadius: "8px",
+  maxWidth: "484px",
+  width: "100%",
+});
+
+export const toastHeading = css({
+  ...typography.B4_14_semibold,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+});
+
+export const toastDetails = css({
+  display: "flex",
+  alignItems: "center",
+});
+
+export const toastTitle = css({
+  marginLeft: `${utils.remConverter(8)}`,
+});
+
+export const closeCta = css({
+  padding: 0,
+  outline: "none",
+  border: "none",
+  boxShadow: "none",
+  backgroundColor: "transparent",
+});
+
+export const toastDescription = css({
+  ...typography.B5_12_regular,
+  marginTop: `${utils.remConverter(4)}`,
+});
+
+export const info = css({
+  background: "rgba(249, 200, 92, 0.08)",
+  borderColor: colors.Zeb_Solid_Yellow,
+});
+
+export const infoToastHeading = css({
+  color: colors.Zeb_Solid_Yellow,
+});
+
+export const error = css({
+  background: "rgba(234, 97, 97, 0.08)",
+  borderColor: colors.Zeb_Solid_Red,
+});
+
+export const errorToastHeading = css({
+  color: colors.Zeb_Solid_Red,
+});
+
+export const success = css({
+  background: "rgba(30, 202, 162, 0.08)",
+  borderColor: colors.Zeb_Solid_Green,
+});
+
+export const successToastHeading = css({
+  color: colors.Zeb_Solid_Green,
+});

package/src/components/Toast/typings.ts

@@ -0,0 +1,6 @@
+export interface ToastProps {
+  title: string;
+  description: string;
+  type: "info" | "error" | "success";
+  onClose?: () => void;
+}

package/src/components/index.ts

@@ -0,0 +1,19 @@
+import Button from "./Button";
+import Checkbox from "./Checkbox";
+import CircularLoader from "./CircularLoader";
+import DateRangePicker from "./DateRangePicker";
+import Input from "./Input";
+import Popper from "./Popper";
+import Radio from "./Radio";
+import Toast from "./Toast";
+
+export {
+  Button,
+  Checkbox,
+  CircularLoader,
+  DateRangePicker,
+  Input,
+  Radio,
+  Toast,
+  Popper,
+};

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useFocus } from "./useFocus";

package/src/hooks/useFocus.ts

@@ -0,0 +1,16 @@
+import React, { useRef } from "react";
+
+function useFocus<T extends HTMLElement>(): [
+  React.MutableRefObject<T | null>,
+  () => void
+  // eslint-disable-next-line indent
+] {
+  const htmlElRef = useRef<T | null>(null);
+  const setFocus = () => {
+    htmlElRef.current && htmlElRef.current.focus();
+  };
+
+  return [htmlElRef, setFocus];
+}
+
+export default useFocus;

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from "./components/Button";
+export * from "./styles";

package/src/styles/colors.ts

@@ -0,0 +1,39 @@
+const colors = {
+  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%)",
+};
+
+export default colors;