@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/Modal/NewVentureModal/NewVentureModal.js

@@ -0,0 +1,262 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useContext } from "react";
+import PropTypes from "prop-types";
+import { Formik } from "formik";
+import * as Yup from "yup";
+import { AuthContext } from "../../../context/AuthContext.js";
+import { emailRegex, ProjectTypes } from "../../../constants/globalVariables.js";
+import { Modal } from "../Modal.js";
+import { Row, Column } from "../../Grid/Grid.styles.js";
+import { Text } from "../../Text/Text.styles.js";
+import stdin_default from "../../Form/Form.js";
+import { ComponentWrapper } from "../../ComponentWrapper/ComponentWrapper.styles.js";
+import { Input } from "../../Input/Input.js";
+import stdin_default$1 from "../../Checkbox/Checkbox.js";
+import { Button } from "../../Button/Button.styles.js";
+import { useNewVentureForm } from "../../../hooks/useNewVentureForm.js";
+import { ModalInner } from "../Modal.styles.js";
+import { FormField, FormError } from "../../Form/Form.styles.js";
+const defaultProject = {
+  _id: "",
+  name: "",
+  type: "fund",
+  title: "",
+  description: ""
+};
+const NewVentureModal = (props) => {
+  const { user } = useContext(AuthContext);
+  const {
+    title = "Register Your Interest",
+    description = "Register your interest and learn more about this investment opportunity.",
+    isModalOpen,
+    onModalClose,
+    onFormSend,
+    popupError = null,
+    project = defaultProject,
+    salesChannel = "investor",
+    modalBotContent,
+    onSuccessMessageBtnClick,
+    customSuccessMessage
+  } = props;
+  const {
+    email,
+    name,
+    mailingList,
+    privateInvestorList,
+    mailingListText,
+    privateInvestorListText,
+    mailingListDisabled,
+    privateInvestorListDisabled,
+    optionalCheckBox,
+    optionalCheckBoxText,
+    optionalCheckBoxChecked,
+    checkedCheckboxes,
+    isSubmitting,
+    successMessage,
+    errorMessage,
+    handleSubmit,
+    updateCheckedCheckboxes
+  } = useNewVentureForm({
+    project: props.project,
+    user,
+    salesChannel,
+    customSuccessMessage
+  });
+  const validationSchema = Yup.object().shape({
+    email: Yup.string().matches(emailRegex, "Oops, that's not a valid address").required("Oops, this can't be blank"),
+    name: Yup.string().required("Oops, this can't be blank")
+  });
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      isOpen: isModalOpen,
+      onClose: (e) => {
+        onModalClose(e);
+      },
+      children: /* @__PURE__ */ jsxs(Row, { children: [
+        /* @__PURE__ */ jsxs(Column, { part: 8, children: [
+          /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [
+            /* @__PURE__ */ jsx("h3", { children: errorMessage ? "OOPS.." : successMessage ? "AWESOME!" : title }),
+            !(successMessage || errorMessage) && /* @__PURE__ */ jsx("p", { children: description })
+          ] }) }),
+          /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: modalBotContent })
+        ] }),
+        /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: successMessage || errorMessage ? /* @__PURE__ */ jsxs(Text, { children: [
+          /* @__PURE__ */ jsx("br", {}),
+          /* @__PURE__ */ jsx("br", {}),
+          /* @__PURE__ */ jsx("p", { children: errorMessage ? errorMessage : successMessage }),
+          successMessage && /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              fluid: true,
+              id: "private-investor-success-button",
+              onClick: () => {
+                if (onSuccessMessageBtnClick) {
+                  onSuccessMessageBtnClick();
+                } else {
+                  if (user?._id) {
+                    window.location.href = `https://dashboard.${"stokr.info"}/checklist`;
+                  } else {
+                    window.location.href = `/signup?email=${email}`;
+                  }
+                }
+              },
+              children: "Continue"
+            }
+          ) })
+        ] }) : /* @__PURE__ */ jsx(
+          Formik,
+          {
+            initialValues: {
+              email: email || "",
+              name: name || "",
+              mailingList: mailingList || false,
+              privateInvestorList: privateInvestorList || false,
+              optionalCheckBoxChecked: optionalCheckBoxChecked || false
+            },
+            validationSchema,
+            onSubmit: (values) => {
+              onFormSend(values);
+              handleSubmit(values);
+            },
+            id: "register-interest-form",
+            children: ({ values, errors, touched, handleBlur, handleChange, setFieldValue, setFieldTouched }) => {
+              const onChangeWithTouch = async (e) => {
+                const field = e.target;
+                await setFieldValue(field.name, field.value, false);
+                await setFieldTouched(field.name);
+              };
+              const oneOfCheckbox = values.mailingList && !mailingListDisabled || values.privateInvestorList && !privateInvestorListDisabled;
+              const optionalCheckBoxForm = optionalCheckBox ? values.optionalCheckBoxChecked : true;
+              if (email && !values.email) {
+                setFieldValue("email", email);
+                setFieldTouched("email");
+              }
+              if (name && !values.name) {
+                setFieldValue("name", name);
+                setFieldTouched("name");
+              }
+              if (mailingList && !values.mailingList) {
+                setFieldValue("mailingList", mailingList);
+              }
+              if (privateInvestorList && !values.privateInvestorList) {
+                setFieldValue("privateInvestorList", privateInvestorList);
+              }
+              const handleCheckboxChange = (e) => {
+                handleChange(e);
+                if (e.target.checked) {
+                  updateCheckedCheckboxes([...checkedCheckboxes, e.target.id]);
+                } else {
+                  updateCheckedCheckboxes(checkedCheckboxes.filter((item) => item !== e.target.id));
+                }
+              };
+              var submitDisabled = !touched.email || !!errors.email || !touched.name || !!errors.name || isSubmitting || !oneOfCheckbox || !optionalCheckBoxForm;
+              return /* @__PURE__ */ jsxs(stdin_default, { children: [
+                /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
+                  !user?._id && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        id: "new-venture-email",
+                        name: "email",
+                        type: "email",
+                        label: "Your email",
+                        value: values.email,
+                        onChange: onChangeWithTouch,
+                        onBlur: handleBlur,
+                        error: !!errors.email,
+                        touched: !!touched.email
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(FormError, { show: touched.email && errors.email, children: errors.email }),
+                    /* @__PURE__ */ jsxs(ComponentWrapper, { noPaddingHorizontal: true, paddingVeticalHalf: true, noPaddingBottom: true, children: [
+                      /* @__PURE__ */ jsx(
+                        Input,
+                        {
+                          id: "new-venture-name",
+                          name: "name",
+                          type: "text",
+                          label: "Your name",
+                          value: values.name,
+                          onChange: onChangeWithTouch,
+                          onBlur: handleBlur,
+                          error: !!errors.name,
+                          touched: !!touched.name
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(FormError, { show: touched.name && errors.name, children: errors.name })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(FormField, { style: { marginTop: "1rem", marginBottom: -5 }, children: /* @__PURE__ */ jsx(
+                    stdin_default$1,
+                    {
+                      id: "createPrivateInvestor",
+                      name: "privateInvestorList",
+                      text: privateInvestorListText,
+                      checked: values.privateInvestorList,
+                      disabled: privateInvestorListDisabled,
+                      onChange: handleCheckboxChange,
+                      onBlur: handleBlur
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(FormField, { style: { marginTop: "2rem", marginBottom: -5 }, children: /* @__PURE__ */ jsx(
+                    stdin_default$1,
+                    {
+                      id: "subscribeToProject",
+                      name: "mailingList",
+                      text: mailingListText,
+                      checked: values.mailingList,
+                      disabled: mailingListDisabled,
+                      onChange: handleCheckboxChange,
+                      onBlur: handleBlur
+                    }
+                  ) }),
+                  optionalCheckBox && /* @__PURE__ */ jsx(FormField, { style: { marginTop: "2rem", marginBottom: -5 }, children: /* @__PURE__ */ jsx(
+                    stdin_default$1,
+                    {
+                      id: "optionalCheckBox",
+                      name: "optionalCheckBoxChecked",
+                      text: optionalCheckBoxText,
+                      value: values.optionalCheckBoxChecked,
+                      checked: values.optionalCheckBoxChecked,
+                      onChange: handleChange,
+                      onBlur: handleBlur
+                    }
+                  ) }),
+                  project.type === ProjectTypes.FUND && /* @__PURE__ */ jsx(FormField, { style: { marginTop: "2rem", marginBottom: -5 }, children: /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      style: {
+                        margin: 0,
+                        fontSize: 12
+                      },
+                      children: /* @__PURE__ */ jsx("strong", { children: "The fund, as well as its fund manager(s) and affiliates, may not be subject to any registration or other local marketing or private placement laws in your jurisdiction." })
+                    }
+                  ) })
+                ] }) }),
+                /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, center: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", id: "private-investor-subscribe-button", disabled: submitDisabled, children: "register" }) }),
+                /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError, children: popupError }) })
+              ] });
+            }
+          }
+        ) }) })
+      ] })
+    }
+  );
+};
+NewVentureModal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onFormSend: PropTypes.func.isRequired,
+  onModalSwitch: PropTypes.func,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  popupError: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  project: PropTypes.object,
+  successMsg: PropTypes.node,
+  errorMsg: PropTypes.node,
+  modalBotContent: PropTypes.node
+};
+export {
+  NewVentureModal
+};

package/dist/components/Modal/PaymentModal.js

@@ -0,0 +1,149 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import "react";
+import { QRCodeSVG } from "qrcode.react";
+import { formatInTimeZone } from "date-fns-tz";
+import { Modal } from "./Modal.js";
+import { Text } from "../Text/Text.styles.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { Row, Column } from "../Grid/Grid.styles.js";
+import stdin_default from "../CryptoAddress/CryptoAddress.js";
+import { Button } from "../Button/Button.styles.js";
+import { getCurrencySymbol } from "../../utils/formatCurrencyValue.js";
+import theme from "../../styles/theme.js";
+import { Icon, iconsMap } from "../Icon/Icon.style.js";
+import styled from "styled-components";
+import { ModalInner } from "./Modal.styles.js";
+const WarningBox = styled.div`
+  background: ${theme.cWarning};
+  border-radius: 4px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  z-index: 9;
+`;
+const BlurBox = styled.div`
+  filter: blur(4px);
+  position: absolute;
+  top: 0px;
+  left: 50%;
+  transform: translate(-50%, 0px);
+`;
+const PaymentModal = ({
+  data = {},
+  user,
+  isModalOpen,
+  onModalClose = () => {
+  },
+  onCTAClick = () => {
+  },
+  isRedemption,
+  noCTA = false,
+  CTAText = "Done",
+  additionalInfoRight,
+  withTimer = false,
+  error,
+  secondsRemaining,
+  modalTitle = `SEND YOUR ${data?.tokenSymbolToSend}`,
+  txTextInRed = true,
+  sendTokenTextRight = /* @__PURE__ */ jsxs("p", { children: [
+    "Send your ",
+    data?.tokenSymbolToSend,
+    " to the treasury wallet below."
+  ] }),
+  numberOfSecuritiesText = "Redeem securities",
+  formatAmountInLink = true
+}) => {
+  const { projectData, tokenAmount, tokenSymbol, createdAt, tokenDecimals = 2, GAID, currencyType } = data;
+  let newTokenAmount = tokenAmount;
+  if (formatAmountInLink) {
+    newTokenAmount = (tokenAmount * Math.pow(10, tokenDecimals - 8)).toFixed(8);
+  }
+  var paymentlink = `liquidnetwork:${projectData?.companyWallet}?amount=${newTokenAmount}&assetid=${projectData?.secondaryAssetId}`;
+  const isKYCVerified = user?.kyc_status === "Accepted";
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Modal, { isOpen: isModalOpen, onClose: onModalClose, children: /* @__PURE__ */ jsxs(ModalInner, { children: [
+    /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("h3", { children: modalTitle }) }),
+    /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsxs(Column, { part: 8, style: { paddingRight: 20 }, children: [
+        /* @__PURE__ */ jsxs(Text, { children: [
+          /* @__PURE__ */ jsxs("p", { children: [
+            "Request date:",
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: createdAt && !isNaN(new Date(createdAt)) ? formatInTimeZone(new Date(createdAt), "Europe/Berlin", "dd MMM yyyy - HH:mm zzz") : "—" })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { children: [
+            "Your securities: ",
+            /* @__PURE__ */ jsxs("strong", { children: [
+              " ",
+              tokenSymbol
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { children: [
+            "Your AMP wallet:",
+            /* @__PURE__ */ jsx(stdin_default, { noHead: true, data: { value: GAID, tooltip: true, shortAddress: true }, fontSize: 16 })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { children: [
+            numberOfSecuritiesText,
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: tokenAmount })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { children: [
+            isRedemption ? "Redemption currency" : "Currency",
+            ":",
+            /* @__PURE__ */ jsxs("strong", { children: [
+              " ",
+              getCurrencySymbol(currencyType)
+            ] })
+          ] })
+        ] }),
+        withTimer && typeof secondsRemaining === "number" && secondsRemaining > 0 && /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingBottom: true, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsxs("p", { style: { color: theme.cWarning }, children: [
+          formatInTimeZone(new Date(secondsRemaining * 1e3), "UTC", "mm:ss"),
+          " Waiting for payment..."
+        ] }) }) }),
+        !noCTA && /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { onClick: onCTAClick, children: CTAText }) })
+      ] }),
+      /* @__PURE__ */ jsx(Column, { part: 8, children: error ? error : /* @__PURE__ */ jsxs(Text, { children: [
+        sendTokenTextRight,
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              color: txTextInRed ? theme.cWarning : "inherit"
+            },
+            children: "We have transfered 0.00002 LBTC to cover your transaction costs."
+          }
+        ),
+        isKYCVerified ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            stdin_default,
+            {
+              title: "Treasury wallet:",
+              data: {
+                value: projectData?.companyWallet,
+                tooltip: true,
+                shortAddress: true
+              },
+              fontSize: 16
+            }
+          ),
+          /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingBottom: true, children: /* @__PURE__ */ jsx(QRCodeSVG, { value: paymentlink, size: 150 }) })
+        ] }) : /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxs(WarningBox, { children: [
+            /* @__PURE__ */ jsx(Icon, { icon: iconsMap.warning, size: 32, color: "white" }),
+            /* @__PURE__ */ jsxs("p", { style: { color: theme.cWhite }, children: [
+              "Your KYC needs an update, please contact",
+              " ",
+              /* @__PURE__ */ jsx("a", { href: "mailto:compliance@stokr.io", style: { color: "inherit" }, children: "compliance@stokr.io" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(BlurBox, { children: /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingBottom: true, children: /* @__PURE__ */ jsx(QRCodeSVG, { value: paymentlink, size: 150 }) }) })
+        ] }),
+        additionalInfoRight && additionalInfoRight
+      ] }) })
+    ] }) })
+  ] }) }) });
+};
+export {
+  PaymentModal
+};

package/dist/components/Modal/SideModal.js

@@ -0,0 +1,134 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { SideModalRoot, Dimmer, SideModalBox } from "./SideModal.styles.js";
+import { ModalClose } from "./Modal.styles.js";
+import { IoniconsStyles } from "../../styles/ioniconsStyles.js";
+function findScrolledElement() {
+  let best = null;
+  function walk(el) {
+    if (!el || el.nodeType !== 1) return;
+    const s = getComputedStyle(el);
+    const scrollable = (s.overflowY === "auto" || s.overflowY === "scroll" || s.overflow === "auto" || s.overflow === "scroll") && el.scrollHeight > el.clientHeight && el.scrollTop > 0;
+    if (scrollable && (!best || el.scrollTop > best.scrollTop)) best = { el, scrollTop: el.scrollTop };
+    for (let i = 0; i < el.children.length; i++) walk(el.children[i]);
+  }
+  walk(document.body);
+  return best;
+}
+function restoreScroll(saved) {
+  if (!saved) return;
+  if (saved.type === "window") {
+    window.scrollTo(0, saved.y);
+  } else if (saved.el && document.contains(saved.el)) {
+    saved.el.scrollTop = saved.scrollTop;
+  }
+}
+function clearBodyLock() {
+  const { style } = document.body;
+  const docEl = document.documentElement;
+  style.position = "";
+  style.top = "";
+  style.left = "";
+  style.right = "";
+  style.width = "";
+  style.height = "";
+  style.overflow = "";
+  style.paddingRight = "";
+  docEl.style.overflow = "";
+  docEl.style.setProperty("--scrollbar-compensation", "0px");
+}
+const SideModal = ({
+  children,
+  isOpen,
+  onClose,
+  width = 40,
+  minWidth = 400,
+  className,
+  containerStyle,
+  closeOnDimmerClick = true,
+  showCloseButton = true,
+  ...props
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const savedScroll = useRef(null);
+  useEffect(() => {
+    if (isOpen) {
+      const found = findScrolledElement();
+      if (found) savedScroll.current = found;
+      else if (window.scrollY > 0) savedScroll.current = { type: "window", y: window.scrollY };
+      else savedScroll.current = null;
+      const saved = savedScroll.current;
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      const isWindowScroll = saved && saved.type === "window";
+      if (isWindowScroll) {
+        const y = saved.y;
+        const docHeight = document.documentElement.scrollHeight;
+        document.documentElement.style.overflow = "hidden";
+        document.documentElement.style.setProperty("--scrollbar-compensation", `${scrollbarWidth}px`);
+        document.body.style.position = "fixed";
+        document.body.style.top = `-${y}px`;
+        document.body.style.left = "0";
+        document.body.style.right = "0";
+        document.body.style.width = "100%";
+        document.body.style.height = `${docHeight}px`;
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
+      } else {
+        document.documentElement.style.overflow = "hidden";
+        document.body.style.overflow = "hidden";
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
+        document.documentElement.style.setProperty("--scrollbar-compensation", `${scrollbarWidth}px`);
+        if (saved) {
+          requestAnimationFrame(() => {
+            restoreScroll(saved);
+            requestAnimationFrame(() => restoreScroll(saved));
+          });
+        }
+      }
+      const timerId = setTimeout(() => setIsVisible(true), 10);
+      return () => {
+        clearTimeout(timerId);
+        const scrollState = savedScroll.current;
+        savedScroll.current = null;
+        clearBodyLock();
+        if (scrollState) requestAnimationFrame(() => restoreScroll(scrollState));
+      };
+    } else {
+      const saved = savedScroll.current;
+      savedScroll.current = null;
+      clearBodyLock();
+      setIsVisible(false);
+      if (saved) requestAnimationFrame(() => restoreScroll(saved));
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen, onClose]);
+  const handleDimmerClick = (e) => {
+    if (closeOnDimmerClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  if (!isOpen) return null;
+  const modalContent = /* @__PURE__ */ jsxs(SideModalRoot, { className, style: containerStyle, ...props, children: [
+    /* @__PURE__ */ jsx(IoniconsStyles, {}),
+    /* @__PURE__ */ jsx(Dimmer, { onClick: handleDimmerClick, isVisible, children: /* @__PURE__ */ jsxs(SideModalBox, { width, minWidth, isVisible, onClick: (e) => e.stopPropagation(), children: [
+      showCloseButton && /* @__PURE__ */ jsx(ModalClose, { onClick: onClose }),
+      children
+    ] }) })
+  ] });
+  return createPortal(modalContent, document.body);
+};
+export {
+  SideModal
+};

package/dist/components/Modal/SideModal.styles.js

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+const SideModalRoot = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+`;
+const Dimmer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isVisible"].includes(props)
+})`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: flex-end;
+  align-items: stretch;
+  opacity: ${(props) => props.isVisible ? 1 : 0};
+  transition: opacity 0.3s ease-in-out;
+  pointer-events: ${(props) => props.isVisible ? "auto" : "none"};
+`;
+const SideModalBox = styled.div.withConfig({
+  shouldForwardProp: (props) => !["width", "minWidth", "isVisible"].includes(props)
+})`
+  position: relative;
+  width: ${(props) => props.width}%;
+  min-width: ${(props) => props.minWidth}px;
+  max-width: 90%;
+  height: 100%;
+  background-color: ${colors.white};
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  transform: translateX(${(props) => props.isVisible ? "0" : "100%"});
+  transition: transform 0.3s ease-in-out;
+  z-index: 1;
+  pointer-events: auto;
+
+  @media (max-width: 768px) {
+    width: 90%;
+    min-width: 90%;
+    max-width: 90%;
+  }
+`;
+export {
+  Dimmer,
+  SideModalBox,
+  SideModalRoot
+};