@aziziaziz/react-components 1.0.1 → 1.0.3

package/dist/index.js

@@ -19,11 +19,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Button: () => Button_default,
+  DatePicker: () => DatePicker_default,
+  Drawer: () => Drawer_default,
+  Dropdown: () => Dropdown_default,
+  Icon: () => Icon_default,
   Input: () => Input_default,
-  SkeletonLoading: () => SkeletonLoading_default
+  SkeletonLoading: () => SkeletonLoading_default,
+  usePostMessage: () => usePostMessage,
+  useSnackbar: () => useSnackbar
 });
 module.exports = __toCommonJS(index_exports);
-var import_index = require("./index-MIFCDIS7.css");
+var import_index = require("./index-2F2GVZE5.css");
 
 // src/components/input/Input.tsx
 var import_react_hook_form = require("react-hook-form");
@@ -82,9 +89,640 @@ var Input = ({
   ] });
 };
 var Input_default = Input;
+
+// src/components/button/Button.tsx
+var import_react = require("react");
+var import_Button = require("./Button-GX4BPUGQ.css");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Button = ({
+  children,
+  onClick,
+  className,
+  type = "submit",
+  disabled = false,
+  loading = false,
+  size = "default",
+  removeMinWidth = false
+}) => {
+  const buttonClass = (0, import_react.useMemo)(() => {
+    if (disabled || loading) return "disabledBtn";
+    switch (type) {
+      case "submit":
+        return "submitBtn";
+      case "danger":
+        return "dangerBtn";
+      case "warning":
+        return "warningBtn";
+    }
+  }, [type, disabled, loading]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "button",
+    {
+      className: `mainBtn ${className} ${buttonClass} ${`${size}__`} ${removeMinWidth && "noMinWidth__"}`,
+      onClick: () => {
+        if (!disabled) onClick();
+      },
+      disabled: disabled || loading,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: loading ? "hideContent" : "", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `loadingCircle ${loading && "show__"}` })
+      ]
+    }
+  );
+};
+var Button_default = Button;
+
+// src/components/datePicker/DatePicker.tsx
+var import_react4 = require("react");
+var import_DatePicker = require("./DatePicker-ISUX6NNC.css");
+
+// src/components/icon/Icon.tsx
+var import_Icon = require("./Icon-DCSTRBMX.css");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Icon = ({ src, className, flat = true }) => {
+  const classNames = ["icon", className, flat ? "flat__" : ""].join(" ");
+  return flat ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { className: classNames, src: src && src.toString() }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "i",
+    {
+      className: classNames,
+      style: {
+        maskImage: `url("${src}"`,
+        WebkitMaskImage: `url("${src}")`
+      }
+    }
+  );
+};
+var Icon_default = Icon;
+
+// src/assets/dropdown.svg
+var dropdown_default = 'data:image/svg+xml,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">%0A%0D<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->%0A<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="%23000000">%0A%0D<g id="SVGRepo_bgCarrier" stroke-width="0"/>%0A%0D<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>%0A%0D<g id="SVGRepo_iconCarrier"> <path d="M17.9188 8.17969H11.6888H6.07877C5.11877 8.17969 4.63877 9.33969 5.31877 10.0197L10.4988 15.1997C11.3288 16.0297 12.6788 16.0297 13.5088 15.1997L15.4788 13.2297L18.6888 10.0197C19.3588 9.33969 18.8788 8.17969 17.9188 8.17969Z" fill="%23000000"/> </g>%0A%0D</svg>';
+
+// src/components/datePicker/components/webDatePicker/WebDatePicker.tsx
+var import_react2 = require("react");
+var import_WebDatePicker = require("./WebDatePicker-H2XZEEJG.css");
+var import_date_fns = require("date-fns");
+var import_react_hook_form2 = require("react-hook-form");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var daysShortName = ["S", "M", "T", "W", "T", "F", "S"];
+var monthsShortName = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+var WebDatePicker = ({
+  id,
+  show,
+  updateShow
+}) => {
+  const [currentMonth, setCurrentMonth] = (0, import_react2.useState)(/* @__PURE__ */ new Date());
+  const [selectionMode, setSelectionMode] = (0, import_react2.useState)(
+    "day"
+  );
+  const [allYears, setAllYears] = (0, import_react2.useState)([]);
+  const {
+    field: { onChange, value }
+  } = (0, import_react_hook_form2.useController)({ name: id });
+  (0, import_react2.useEffect)(() => {
+    if (show && value) {
+      setCurrentMonth(new Date(value));
+    }
+    if (show) {
+      setSelectionMode("day");
+    }
+  }, [show]);
+  const onAdd = () => {
+    if (selectionMode == "day") {
+      setCurrentMonth((0, import_date_fns.addMonths)(currentMonth, 1));
+    } else if (selectionMode == "month") {
+      setCurrentMonth((0, import_date_fns.addYears)(currentMonth, 1));
+    } else if (selectionMode == "year") {
+      setCurrentMonth((0, import_date_fns.addYears)(currentMonth, 10));
+    }
+  };
+  const onMinus = () => {
+    if (selectionMode == "day") {
+      setCurrentMonth((0, import_date_fns.addMonths)(currentMonth, -1));
+    } else if (selectionMode == "month") {
+      setCurrentMonth((0, import_date_fns.addYears)(currentMonth, -1));
+    } else if (selectionMode == "year") {
+      setCurrentMonth((0, import_date_fns.addYears)(currentMonth, -10));
+    }
+  };
+  const switchMode = () => {
+    if (selectionMode == "day") {
+      setSelectionMode("month");
+    } else if (selectionMode == "month") {
+      setSelectionMode("year");
+    }
+  };
+  const allDays = (0, import_react2.useMemo)(() => {
+    const totalDays = (0, import_date_fns.getDaysInMonth)(currentMonth);
+    const firstDay = (0, import_date_fns.startOfMonth)(currentMonth).getDay() || 7;
+    const previousMonth = (0, import_date_fns.addMonths)(currentMonth, -1);
+    const previousMonthTotalDays = (0, import_date_fns.getDaysInMonth)(previousMonth);
+    const nextMonth = (0, import_date_fns.addMonths)(currentMonth, 1);
+    const prevDays = new Array(firstDay).fill("").map((_, index) => {
+      const date = previousMonthTotalDays - index;
+      const thisDate = new Date(
+        previousMonth.getFullYear(),
+        previousMonth.getMonth(),
+        date
+      );
+      let isSelected = false;
+      if (value) {
+        const selectedDate = new Date(value);
+        isSelected = (0, import_date_fns.isSameDay)(selectedDate, thisDate);
+      }
+      return {
+        date,
+        month: previousMonth.getMonth(),
+        isToday: (0, import_date_fns.isToday)(thisDate),
+        isSelected,
+        fullDate: thisDate
+      };
+    }).sort((a, b) => a.date - b.date);
+    const allDays2 = new Array(totalDays).fill("").map((_, index) => {
+      const date = index + 1;
+      const thisDate = new Date(
+        currentMonth.getFullYear(),
+        currentMonth.getMonth(),
+        date
+      );
+      let isSelected = false;
+      if (value) {
+        const selectedDate = new Date(value);
+        isSelected = (0, import_date_fns.isSameDay)(selectedDate, thisDate);
+      }
+      return {
+        date,
+        month: currentMonth.getMonth(),
+        isToday: (0, import_date_fns.isToday)(thisDate),
+        isSelected,
+        fullDate: thisDate
+      };
+    });
+    const nextDays = new Array(
+      42 - prevDays.length - allDays2.length
+    ).fill("").map((_, index) => {
+      const date = index + 1;
+      const thisDate = new Date(
+        nextMonth.getFullYear(),
+        nextMonth.getMonth(),
+        date
+      );
+      let isSelected = false;
+      if (value) {
+        const selectedDate = new Date(value);
+        isSelected = (0, import_date_fns.isSameDay)(selectedDate, thisDate);
+      }
+      return {
+        date,
+        month: nextMonth.getMonth(),
+        isToday: (0, import_date_fns.isToday)(thisDate),
+        isSelected,
+        fullDate: thisDate
+      };
+    });
+    return [...prevDays, ...allDays2, ...nextDays];
+  }, [currentMonth, value]);
+  const pickerTopLabel = (0, import_react2.useMemo)(() => {
+    if (selectionMode == "day") {
+      return (0, import_date_fns.format)(currentMonth, "MMM, yyyy");
+    } else if (selectionMode == "month") {
+      return (0, import_date_fns.format)(currentMonth, "yyyy");
+    } else if (selectionMode == "year") {
+      const currentYear = currentMonth.getFullYear();
+      const startYear = currentYear - currentYear % 10 - 1;
+      const endYear = startYear + 10 + 2;
+      setAllYears(
+        new Array(endYear - startYear).fill("").map((_, ind) => startYear + ind)
+      );
+      return (0, import_date_fns.format)(currentMonth, `${startYear + 1} - ${endYear - 2}`);
+    }
+  }, [currentMonth, selectionMode]);
+  const datesContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "dateMainContainer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "daysContainer", children: daysShortName.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dateItem", children: day }, `${day}_${index}`)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dateContainer", children: allDays.map((day) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        className: `dateItem ${day.month != currentMonth.getMonth() && "nextPreviousDate__"} ${day.isToday && "isToday__"} ${day.isSelected && "isSelected__"}`,
+        onClick: () => {
+          onChange(day.fullDate);
+          updateShow(false);
+        },
+        children: day.date
+      }
+    )) })
+  ] });
+  const monthsContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "monthContainer", children: monthsShortName.map((mth, mthInd) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      className: `monthItem ${mth == monthsShortName[(/* @__PURE__ */ new Date()).getMonth()] && (/* @__PURE__ */ new Date()).getFullYear() == currentMonth.getFullYear() && "isToday__"} ${value && mth == monthsShortName[new Date(value).getMonth()] && currentMonth.getFullYear() == new Date(value).getFullYear() && "isSelected__"}`,
+      onClick: () => {
+        setCurrentMonth((0, import_date_fns.setMonth)(currentMonth, mthInd));
+        setTimeout(() => {
+          setSelectionMode("day");
+        }, 10);
+      },
+      children: mth
+    }
+  )) });
+  const yearContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "monthContainer", children: allYears.map((yr, yrInd) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      className: `monthItem ${(/* @__PURE__ */ new Date()).getFullYear() == yr && "isToday__"} ${value && yr == new Date(value).getFullYear() && "isSelected__"} ${(yrInd == 0 || yrInd == allYears.length - 1) && "nextPreviousDate__"}`,
+      onClick: () => {
+        setCurrentMonth((0, import_date_fns.setYear)(currentMonth, yr));
+        setTimeout(() => {
+          setSelectionMode("month");
+        }, 10);
+      },
+      children: yr
+    }
+  )) });
+  const pickerContent = (0, import_react2.useMemo)(() => {
+    if (selectionMode == "day") {
+      return datesContent;
+    } else if (selectionMode == "month") {
+      return monthsContent;
+    } else if (selectionMode == "year") {
+      return yearContent;
+    }
+  }, [selectionMode, allDays, currentMonth, allYears]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `webDatePickerMainContainer ${show ? "show__" : "hide__"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "topContainer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          className: `monthName ${selectionMode == "year" && "noClick__"}`,
+          onClick: switchMode,
+          children: pickerTopLabel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { onClick: onMinus, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { className: `nextPreviousIcon previous__`, src: dropdown_default }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { onClick: onAdd, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { className: "nextPreviousIcon", src: dropdown_default }) })
+    ] }),
+    pickerContent,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Button_default,
+      {
+        onClick: () => setCurrentMonth(/* @__PURE__ */ new Date()),
+        className: "todayButton",
+        size: "small",
+        removeMinWidth: true,
+        children: "Today"
+      }
+    )
+  ] });
+};
+var WebDatePicker_default = WebDatePicker;
+
+// src/components/datePicker/DatePicker.tsx
+var import_react_hook_form3 = require("react-hook-form");
+var import_date_fns2 = require("date-fns");
+
+// src/components/drawer/Drawer.tsx
+var import_react3 = require("react");
+var import_Drawer = require("./Drawer-5ZWJQFIQ.css");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Drawer = ({ show, updateShow, children }) => {
+  (0, import_react3.useEffect)(() => {
+    document.body.style.overflow = show ? "hidden" : "auto";
+  }, [show]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "drawerMainContainer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        onClick: () => updateShow(false),
+        className: `drawerBackgroundContainer ${show ? "show__" : "hide__"}`
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `drawerContentContainer ${show ? "show__" : "hide__"}`, children })
+  ] });
+};
+var Drawer_default = Drawer;
+
+// src/components/datePicker/DatePicker.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var DatePicker = ({
+  id,
+  label = "Label",
+  placeholder = "Placeholder",
+  loading = false,
+  disabled = false
+}) => {
+  const datePickerRef = (0, import_react4.useRef)(null);
+  const isMobile = false;
+  const { getValues } = (0, import_react_hook_form3.useFormContext)();
+  const [showPicker, setShowPicker] = (0, import_react4.useState)(false);
+  const docOnClickHandler = (e) => {
+    if (datePickerRef.current && e.target) {
+      if (datePickerRef.current && !datePickerRef.current.contains(e.target)) {
+        setShowPicker(false);
+      }
+    }
+  };
+  (0, import_react4.useEffect)(() => {
+    document.addEventListener("click", docOnClickHandler);
+    return () => {
+      document.removeEventListener("click", docOnClickHandler);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "datePickerMainContainer", ref: datePickerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className: `pickerContainer ${disabled && disabled}`,
+        onClick: () => {
+          if (!disabled) {
+            setShowPicker(!showPicker);
+          }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "valueContainer", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${!getValues(id) && placeholder}`, children: getValues(id) ? (0, import_date_fns2.format)(getValues(id), "dd MMM yyyy") : placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              Icon_default,
+              {
+                src: dropdown_default,
+                className: `dropdownIcon ${showPicker ? "dropdownIconFlip" : ""}`
+              }
+            )
+          ] }),
+          loading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonLoading_default, { radius: 8 })
+        ]
+      }
+    ),
+    isMobile ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Drawer_default, { show: showPicker, updateShow: setShowPicker, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(WebDatePicker_default, { id, show: showPicker, updateShow: setShowPicker }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(WebDatePicker_default, { id, show: showPicker, updateShow: setShowPicker })
+  ] });
+};
+var DatePicker_default = DatePicker;
+
+// src/components/dropdown/Dropdown.tsx
+var import_react5 = require("react");
+var import_react_hook_form4 = require("react-hook-form");
+
+// src/assets/check.svg
+var check_default = 'data:image/svg+xml,<?xml version="1.0" encoding="iso-8859-1"?>%0A<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0A<svg fill="%231A1A1A" version="1.1" baseProfile="basic" id="Layer_1"%0A%09 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 72"%0A%09 xml:space="preserve">%0A<path d="M57.658,12.643c1.854,1.201,2.384,3.678,1.183,5.532l-25.915,40c-0.682,1.051-1.815,1.723-3.064,1.814%0A%09C29.764,59.997,29.665,60,29.568,60c-1.146,0-2.241-0.491-3.003-1.358L13.514,43.807c-1.459-1.659-1.298-4.186,0.36-5.646%0A%09c1.662-1.46,4.188-1.296,5.646,0.361l9.563,10.87l23.043-35.567C53.329,11.971,55.806,11.442,57.658,12.643z"/>%0A</svg>';
+
+// src/components/dropdown/Dropdown.tsx
+var import_Dropdown = require("./Dropdown-VC55KPC2.css");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Dropdown = ({
+  id,
+  options,
+  label = "Label",
+  placeholder = "Placeholder",
+  loading = false,
+  disabled = false
+}) => {
+  const isMobile = false;
+  const dropdownContainerRef = (0, import_react5.useRef)(null);
+  const [showDropdown, setShowDropdown] = (0, import_react5.useState)(false);
+  const {
+    field: { onChange, value }
+  } = (0, import_react_hook_form4.useController)({ name: id });
+  const docOnClickHandler = (e) => {
+    if (dropdownContainerRef.current && e.target) {
+      if (dropdownContainerRef.current && !dropdownContainerRef.current.contains(e.target)) {
+        setShowDropdown(false);
+      }
+    }
+  };
+  (0, import_react5.useEffect)(() => {
+    document.addEventListener("click", docOnClickHandler);
+    return () => {
+      document.removeEventListener("click", docOnClickHandler);
+    };
+  }, []);
+  const selectedLabel = (0, import_react5.useMemo)(() => {
+    if (value) {
+      const selected = options.find((opt) => opt.value == value);
+      return selected ? selected.label : "";
+    }
+    return "";
+  }, [value, options]);
+  const dropdownOptionContent = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      className: `dropdownOptionsContainer ${showDropdown ? "show__" : "hide__"}`,
+      children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "div",
+        {
+          className: "dropdownOptions",
+          onClick: () => {
+            onChange(opt.value);
+            setShowDropdown(false);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: opt.label }),
+            value == opt.value && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon_default, { src: check_default, className: "dropdownIcon" })
+          ]
+        }
+      ))
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dropdownContainer", ref: dropdownContainerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        className: `dropdown ${!selectedLabel && "placeholder__"} ${disabled && "disabled__"}`,
+        onClick: () => {
+          if (!disabled) {
+            setShowDropdown(!showDropdown);
+          }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: selectedLabel || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            Icon_default,
+            {
+              src: dropdown_default,
+              className: `dropdownIcon ${showDropdown && "dropdownIconFlip"}`
+            }
+          ),
+          loading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonLoading_default, {})
+        ]
+      }
+    ),
+    isMobile ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Drawer_default, { show: showDropdown, updateShow: setShowDropdown, children: dropdownOptionContent }) : dropdownOptionContent
+  ] });
+};
+var Dropdown_default = Dropdown;
+
+// src/hooks/useSnackbar.ts
+var import_react6 = require("react");
+var useSnackbar = (body, id = "snackbarRoot", timeout = 3e3) => {
+  const snackbarElement = (0, import_react6.useRef)(null);
+  const timeoutId = (0, import_react6.useRef)(null);
+  let root = document.getElementById(id);
+  const [isShowing, setIsShowing] = (0, import_react6.useState)(false);
+  const hoverInHandler = () => {
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+    }
+  };
+  const hoverOutHandler = () => {
+    timeoutId.current = setTimeout(() => {
+      closeSnackbar();
+    }, timeout);
+  };
+  (0, import_react6.useEffect)(() => {
+    if (!root) {
+      const rootDiv = document.createElement("div");
+      rootDiv.setAttribute("id", id);
+      const contentDiv = document.createElement("div");
+      contentDiv.className = "snackbarContentContainer";
+      const contentInnerDiv = document.createElement("div");
+      contentInnerDiv.className = "hide__";
+      contentDiv.appendChild(contentInnerDiv);
+      rootDiv.appendChild(contentDiv);
+      if (body) {
+        body.appendChild(rootDiv);
+      } else {
+        document.body.appendChild(rootDiv);
+      }
+      root = rootDiv;
+    }
+    if (root) {
+      const snackbarContainer = root.children[0];
+      if (snackbarContainer) {
+        const snackbar = snackbarContainer.children[0];
+        if (snackbar) {
+          snackbarElement.current = snackbar;
+        }
+      }
+    }
+  }, []);
+  const showSnackbar = (message, type = "info") => {
+    let animTimeout = 0;
+    if (isShowing) {
+      closeSnackbar();
+      animTimeout = 300;
+    }
+    setTimeout(() => {
+      if (snackbarElement.current) {
+        snackbarElement.current.innerHTML = message;
+        snackbarElement.current.className = `show__ ${type}__`;
+        setIsShowing(true);
+      }
+    }, animTimeout);
+  };
+  const closeSnackbar = () => {
+    if (snackbarElement.current) {
+      snackbarElement.current.className = `hide__`;
+      setIsShowing(false);
+    }
+  };
+  (0, import_react6.useEffect)(() => {
+    if (isShowing && snackbarElement.current) {
+      snackbarElement.current.addEventListener("mouseenter", hoverInHandler);
+      snackbarElement.current.addEventListener("mouseleave", hoverOutHandler);
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+      timeoutId.current = setTimeout(() => {
+        closeSnackbar();
+      }, timeout);
+    } else if (snackbarElement.current) {
+      snackbarElement.current.removeEventListener("mouseenter", hoverInHandler);
+      snackbarElement.current.removeEventListener(
+        "mouseleave",
+        hoverOutHandler
+      );
+    }
+  }, [isShowing]);
+  return {
+    showSnackbar
+  };
+};
+
+// src/hooks/usePostMessage.ts
+var import_react7 = require("react");
+var usePostMessage = (url) => {
+  const sendDimension = () => {
+    const body = document.body;
+    const html = document.documentElement;
+    const width = Math.max(
+      body.scrollWidth,
+      body.offsetWidth,
+      html.clientWidth,
+      html.scrollWidth,
+      html.offsetWidth
+    );
+    const height = Math.max(
+      body.scrollHeight,
+      body.offsetHeight,
+      html.clientHeight,
+      html.scrollHeight,
+      html.offsetHeight
+    );
+    window.parent.postMessage({ type: "resize", height, width }, url);
+  };
+  const postMessage = (data) => {
+    window.parent.postMessage(data, url);
+  };
+  const postNotification = (data) => {
+    window.parent.postMessage(
+      {
+        type: "noti",
+        data
+      },
+      url
+    );
+  };
+  const postPopup = (data) => {
+    window.parent.postMessage({ type: "popup", data }, url);
+  };
+  const postQuestion = (data) => {
+    window.parent.postMessage({ type: "question", data }, url);
+    let resolve;
+    const prom = new Promise((res) => resolve = res);
+    const messageHandler = (ev) => {
+      resolve(ev.data);
+      window.removeEventListener("message", messageHandler);
+    };
+    window.addEventListener("message", messageHandler);
+    return prom;
+  };
+  (0, import_react7.useEffect)(() => {
+    sendDimension();
+    window.addEventListener("DOMContentLoaded", sendDimension);
+    window.addEventListener("resize", sendDimension);
+    return () => {
+      window.removeEventListener("DOMContentLoaded", sendDimension);
+      window.removeEventListener("resize", sendDimension);
+    };
+  }, []);
+  return {
+    sendDimension,
+    postMessage,
+    postNotification,
+    postPopup,
+    postQuestion
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Button,
+  DatePicker,
+  Drawer,
+  Dropdown,
+  Icon,
   Input,
-  SkeletonLoading
+  SkeletonLoading,
+  usePostMessage,
+  useSnackbar
 });
 //# sourceMappingURL=index.js.map