@addsign/moje-agenda-shared-lib 1.0.61 → 2.0.0

package/dist/components/Button.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import '../assets/tailwind.css';/* empty css                   */
+import "../tailwind-l0sNRNKZ.js";
 import Spinner from "./Spinner.js";
 const commonStyles = " py-1 px-4 leading-[32px]   min-h-[32px] w-fit rounded-lg whitespace-nowrap font-medium disabled:opacity-50 ";
 const buttonStyles = {

package/dist/components/datatable/DataTable.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import '../../assets/tailwind.css';/* empty css                      */
+import "../../tailwind-l0sNRNKZ.js";
 import Button from "../Button.js";
 import { f as MdOutlineFilterAlt, g as MdOutlineFilterAltOff, h as MdSearch, b as MdClose, i as MdArrowBack, j as MdArrowForward, k as MdArrowUpward, l as MdArrowDownward } from "../../index-DVD0PiGU.js";
 import FormField from "../form/FormField.js";

package/dist/components/datatable/DataTableServer.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useMemo, useEffect, useCallback } from "react";
-import '../../assets/tailwind.css';/* empty css                      */
+import "../../tailwind-l0sNRNKZ.js";
 import Button from "../Button.js";
 import { f as MdOutlineFilterAlt, g as MdOutlineFilterAltOff, h as MdSearch, b as MdClose, i as MdArrowBack, j as MdArrowForward, k as MdArrowUpward, l as MdArrowDownward } from "../../index-DVD0PiGU.js";
 import FormField from "../form/FormField.js";

package/dist/components/form/AutocompleteSearchBar.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
-import '../../assets/tailwind.css';/* empty css                      */
+import "../../tailwind-l0sNRNKZ.js";
 import { M as MdExpandLess, a as MdExpandMore, b as MdClose } from "../../index-DVD0PiGU.js";
 import "../../index.esm-ifS8v9eQ.js";
 import "../../jspdf.plugin.autotable-7hp3hM-a.js";

package/dist/components/form/AutocompleteSearchBarServer.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { M as MdExpandLess } from "../../index-DVD0PiGU.js";
-import '../../assets/tailwind.css';/* empty css                      */
+import "../../tailwind-l0sNRNKZ.js";
 import InputField from "./InputField.js";
 import "../../index.esm-ifS8v9eQ.js";
 import "../../jspdf.plugin.autotable-7hp3hM-a.js";

package/dist/components/form/FileInput.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from "react";
 import { u as useDropzone } from "../../index-Bp9GiUkg.js";
-import '../../assets/tailwind.css';/* empty css                      */
+import "../../tailwind-l0sNRNKZ.js";
 import { d as MdInsertDriveFile, e as MdDeleteOutline } from "../../index-DVD0PiGU.js";
 import "../../index.esm-ifS8v9eQ.js";
 import "../../jspdf.plugin.autotable-7hp3hM-a.js";

package/dist/components/form/FileInputMultiple.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { u as useDropzone } from "../../index-Bp9GiUkg.js";
 import { d as MdInsertDriveFile, e as MdDeleteOutline } from "../../index-DVD0PiGU.js";
-import '../../assets/tailwind.css';/* empty css                      */
+import "../../tailwind-l0sNRNKZ.js";
 import "../../index.esm-ifS8v9eQ.js";
 import "../../jspdf.plugin.autotable-7hp3hM-a.js";
 import "../../contexts/FederationContext.js";

package/dist/components/form/FormField.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { b as MdClose } from "../../index-DVD0PiGU.js";
-import '../../assets/tailwind.css';/* empty css                      */
+import "../../tailwind-l0sNRNKZ.js";
 import "../../index.esm-ifS8v9eQ.js";
 import "../../jspdf.plugin.autotable-7hp3hM-a.js";
 import "../../contexts/FederationContext.js";

package/dist/components/form/PositionsSelectorSingle.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import '../../assets/tailwind.css';/* empty css                      */
+import "../../tailwind-l0sNRNKZ.js";
 import Button from "../Button.js";
 import AutocompleteSearchBar from "./AutocompleteSearchBar.js";
 import { c as MdCheck } from "../../index-DVD0PiGU.js";

package/dist/components/form/SelectField.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { b as MdClose, M as MdExpandLess, a as MdExpandMore, c as MdCheck } from "../../index-DVD0PiGU.js";
-import '../../assets/tailwind.css';/* empty css                      */
+import "../../tailwind-l0sNRNKZ.js";
 import { c as FaSpinner } from "../../index-DH-TC1O6.js";
 import SpinnerIcon from "../SpinnerIcon.js";
 import "../../index.esm-ifS8v9eQ.js";

package/dist/components/profiles/ProfileOverview.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect } from "react";
 import SectionTitle from "../layout/SectionTitle.js";
-import '../../assets/tailwind.css';/* empty css                      */
+import "../../tailwind-l0sNRNKZ.js";
 import "../../index.esm-ifS8v9eQ.js";
 import "../../jspdf.plugin.autotable-7hp3hM-a.js";
 import "../../contexts/FederationContext.js";

package/dist/main.js

@@ -1,4 +1,4 @@
-import './assets/tailwind.css';/* empty css                  */
+import "./tailwind-l0sNRNKZ.js";
 import { default as default2 } from "./components/Button.js";
 import { default as default3 } from "./components/form/AutocompleteSearchBar.js";
 import { default as default4 } from "./components/form/AutocompleteSearchBarServer.js";

package/dist/tailwind-l0sNRNKZ.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=tailwind-l0sNRNKZ.js.map

package/dist/tailwind-l0sNRNKZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-l0sNRNKZ.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/components/Button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import "../css/tailwind.css";
+import Spinner from "./Spinner";
+
+type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "transparent"
+  | "success"
+  | "danger"
+  | "warning"
+  | "icon";
+
+interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  isLoading?: boolean;
+}
+const commonStyles =
+  " py-1 px-4 leading-[32px]   min-h-[32px] w-fit rounded-lg whitespace-nowrap font-medium disabled:opacity-50 ";
+const buttonStyles: { [key in ButtonVariant]: string } = {
+  primary: "!bg-primary hover:!bg-primary-hover text-primary-text   ",
+  secondary:
+    "!bg-secondary hover:!bg-secondary-hover  text-secondary-text border border-secondary-border  ",
+  transparent:
+    "!bg-transparent border border-transparent hover:bg-gray-100 hover:border-gray-200 ",
+  success: "!bg-success hover:!bg-success-hover  text-success-text    ",
+  danger: "!bg-danger hover:!bg-danger-hover  text-danger-text ",
+  warning:
+    "!bg-warning hover:!bg-warning-hover  text-warning-text  border border-warning-border",
+  icon: " !rounded-full text-center inline-flex items-center ",
+};
+const Button: React.FC<IButtonProps> = ({
+  variant = "primary",
+  isLoading = false,
+  children,
+  onClick,
+  className,
+  ...props
+}) => {
+  const classNames = commonStyles + buttonStyles[variant];
+  return (
+    <button
+      className={classNames + " " + (className || " sharedLibraryource ")}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+      {isLoading && (
+        <span className="ml-2 inline-flex ">
+          <Spinner />{" "}
+        </span>
+      )}
+    </button>
+  );
+};
+
+export default Button;

package/lib/components/Calendar.tsx

@@ -0,0 +1,242 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
+
+export interface ICalendarItem {
+  id: number;
+  label?: string;
+  from: Date;
+  to: Date;
+  background?: string;
+  color?: string;
+  tooltip?: string;
+}
+
+type ICalendarProps = {
+  items: ICalendarItem[];
+  startingDate?: Date;
+  publicHolidays?: string[];
+};
+
+// Check if a day is within any item's date range
+
+const Calendar: React.FunctionComponent<ICalendarProps> = ({
+  items,
+  startingDate,
+  publicHolidays,
+}) => {
+  const [currentMonth, setCurrentMonth] = useState(
+    startingDate ? startingDate.getMonth() : new Date().getMonth()
+  );
+
+  const [currentYear, setCurrentYear] = useState(
+    startingDate ? startingDate.getFullYear() : new Date().getFullYear()
+  );
+
+  useEffect(() => {
+    if (startingDate) {
+      setCurrentMonth(startingDate.getMonth());
+      setCurrentYear(startingDate.getFullYear());
+    }
+  }, [startingDate]);
+  const [calendarData, setCalendarData] = useState<
+    (string | number | JSX.Element)[][]
+  >([]);
+
+  const monthNames: string[] = [
+    "Leden",
+    "Únor",
+    "Březen",
+    "Duben",
+    "Květen",
+    "Červen",
+    "Červenec",
+    "Srpen",
+    "Září",
+    "Říjen",
+    "Listopad",
+    "Prosinec",
+  ];
+  const dayNames: string[] = [
+    "Pondělí",
+    "Úterý",
+    "Středa",
+    "Čtvrtek",
+    "Pátek",
+    "So",
+    "Ne",
+  ];
+
+  // Leap year check
+  const isLeapYear = (year: number) =>
+    (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+
+  // Days in each month
+  const daysInMonth = useCallback((month: number, year: number) => {
+    if (month === 1) {
+      // February
+      return isLeapYear(year) ? 29 : 28;
+    }
+    if ([0, 2, 4, 6, 7, 9, 11].includes(month)) {
+      // Months with 31 days
+
+      return 31;
+    }
+
+    return 30; // Months with 30 days
+  }, []);
+
+  // Generate days for a month
+  const generateMonthDays = useCallback(
+    (month: number, year: number) => {
+      const days = [];
+      //  const firstDayOfMonth = new Date(year, month, 1).getDay()
+
+      // Adjusted to make week start from Monday
+      let firstDayOfMonth = new Date(year, month, 1).getDay() - 1;
+      if (firstDayOfMonth === -1) firstDayOfMonth = 6; // Sunday becomes 6 instead of -1
+
+      let dayCounter = 1;
+
+      for (let week = 0; week < 6; week++) {
+        const weekDays = [];
+        for (let day = 0; day < 7; day++) {
+          if (week === 0 && day < firstDayOfMonth) {
+            weekDays.push("");
+          } else if (dayCounter > daysInMonth(month, year)) {
+            weekDays.push("");
+          } else {
+            weekDays.push(dayCounter++);
+          }
+        }
+        days.push(weekDays);
+      }
+      return days;
+    },
+    [daysInMonth]
+  );
+
+  useEffect(() => {
+    setCalendarData(generateMonthDays(currentMonth, currentYear));
+  }, [currentMonth, currentYear, generateMonthDays]);
+
+  // Navigation handlers
+  const goToNextMonth = () => {
+    setCurrentMonth((prev) => (prev === 11 ? 0 : prev + 1));
+    if (currentMonth === 11) {
+      setCurrentYear((prev) => prev + 1);
+    }
+  };
+
+  const goToPreviousMonth = () => {
+    setCurrentMonth((prev) => (prev === 0 ? 11 : prev - 1));
+    if (currentMonth === 0) {
+      setCurrentYear((prev) => prev - 1);
+    }
+  };
+  const findItemsForDay = (
+    day: number,
+    month: number,
+    year: number
+  ): ICalendarItem[] => {
+    const date = new Date(year, month, day);
+
+    return items.filter((item) => date >= item.from && date <= item.to);
+  };
+  return (
+    <div className="flex flex-col bg-white   flex-grow text-xs  border  overflow-hidden  ">
+      <div className="flex justify-between items-center text-black p-2">
+        <div
+          onClick={goToPreviousMonth}
+          className="mr-5 px-10 py-4 cursor-pointer hover:bg-gray-150 rounded-lg text-sm"
+        >
+          <FaChevronLeft />
+        </div>
+        <h2 className="font-semibold text-base">
+          {monthNames[currentMonth]} {currentYear}
+        </h2>
+
+        <div
+          onClick={goToNextMonth}
+          className="px-10 py-4 cursor-pointer hover:bg-gray-150 rounded-lg text-sm"
+        >
+          <FaChevronRight />
+        </div>
+      </div>
+      <div className="grid grid-cols-[repeat(17,minmax(0,1fr))] pb-0 ">
+        {dayNames.map((day, index) => (
+          <div
+            key={index}
+            className={
+              "py-1 px-4  text-center font-semibold border-t  " +
+              (index > 4 ? " bg-gray-100   col-span-1 " : "  col-span-3 ")
+            }
+          >
+            {day}
+          </div>
+        ))}
+        {calendarData.map((week, weekIndex) => (
+          <React.Fragment key={weekIndex}>
+            {week.map((day, dayIndex) => {
+              const itemsForDay = day
+                ? findItemsForDay(day as number, currentMonth, currentYear)
+                : [];
+
+              const date = new Date(
+                currentYear,
+                currentMonth,
+                (day as number) + 1
+              );
+              const isPublicHoliday = publicHolidays?.includes(
+                date.toISOString().split("T")[0]
+              );
+
+              return (
+                <div
+                  key={dayIndex}
+                  className={
+                    "p-0 align-middle justify-center text-center  border-t cursor-not-allowed " +
+                    (dayIndex > 4
+                      ? "bg-gray-100    col-span-1 "
+                      : "  col-span-3 ") +
+                    (isPublicHoliday ? " bg-gray-150 " : "") +
+                    (dayIndex !== 0 ? " border-l " : "")
+                  }
+                >
+                  {day && <div className="py-1">{day} </div>}
+                  {itemsForDay.map((item, itemIndex) => (
+                    <div
+                      key={itemIndex}
+                      className={
+                        "dataItem w-full py-1  text-white text-center mt-0 -pr-1 "
+                      }
+                      style={{
+                        backgroundColor:
+                          isPublicHoliday || dayIndex > 4
+                            ? "#c1c1c1"
+                            : item.background,
+                        color:
+                          isPublicHoliday || dayIndex > 4
+                            ? "white"
+                            : item.color,
+                      }}
+                      data-tooltip-target={"tooltip-" + item.id}
+                      title={item.tooltip}
+                    >
+                      {!isPublicHoliday && dayIndex < 5 ? (
+                        item.label
+                      ) : (
+                        <>&nbsp;</>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              );
+            })}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Calendar;

package/lib/components/ConfirmationModalDialog.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useState } from "react";
+import { FaRegTrashAlt } from "react-icons/fa";
+import { IoCloseOutline } from "react-icons/io5";
+import Button from "./Button";
+
+export interface IConfirmationModalDialogProps {
+  title: string;
+  confirmAction: () => void;
+  cancelAction: () => void;
+  description?: string;
+  agreeeText?: string;
+  cancelText?: string;
+}
+
+export function ConfirmationModalDialog({
+  title,
+  confirmAction,
+  cancelAction,
+  description,
+  agreeeText,
+  cancelText,
+}: IConfirmationModalDialogProps) {
+  const [isConfirming, setIsConfirming] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        cancelAction();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [cancelAction]);
+
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center p-4"
+      style={{ zIndex: 50 }}
+    >
+      <div className="w-96 h-64 bg-white rounded-xl shadow flex-col justify-start items-center inline-flex relative overflow-hidden">
+        <div
+          id="graphics"
+          className="w-80 h-80 left-[-120px] top-[-120px] absolute "
+        >
+          <div className="w-80 h-80 left-0 top-0 absolute">
+            <div className="w-24 h-24 left-[120px] top-[120px] absolute rounded-full border border-gray-150" />
+            <div className="w-36 h-36 left-[96px] top-[96px] absolute rounded-full border border-gray-100  " />
+            <div className="w-48 h-48 left-[72px] top-[72px] absolute rounded-full border border-gray-100  " />
+            <div className="w-60 h-60 left-[48px] top-[48px] absolute rounded-full border border-gray-50   " />
+            <div className="w-72 h-72 left-[24px] top-[24px] absolute rounded-full border border-gray-50" />
+          </div>
+        </div>
+        <div
+          id="header"
+          className="self-stretch h-40 flex-col justify-start items-center flex z-40"
+        >
+          <div className="self-stretch h-40 px-6 pt-6 flex-col justify-start items-start gap-4 flex">
+            <div className="w-12 h-12 relative bg-red-100 rounded-full">
+              <FaRegTrashAlt className="w-6 h-6 left-[12px] top-[12px] absolute" />
+            </div>
+            <div className="self-stretch h-16 flex-col justify-start items-start gap-1 flex">
+              <div className="self-stretch text-gray-900 text-lg font-semibold font-['Inter'] leading-7">
+                {title}
+              </div>
+              <div className="self-stretch text-slate-600 text-sm font-normal font-['Open Sans'] leading-tight">
+                {description}
+              </div>
+            </div>
+          </div>
+          <div
+            className="w-11 h-11 p-2 right-0 top-[16px] absolute rounded-full justify-center items-center inline-flex mr-4 hover:bg-gray-100"
+            onClick={cancelAction}
+          >
+            <IoCloseOutline className="w-6 h-6 relative text-gray-400" />
+          </div>
+        </div>
+        <div
+          id="actions"
+          className="self-stretch h-24 pt-8 flex-col justify-start items-start flex z-40"
+        >
+          <div className="self-stretch px-6 pb-6 justify-start items-start gap-3  flex">
+            <Button
+              id="ConfirmationModalDialog:back"
+              type="button"
+              variant="secondary"
+              onClick={cancelAction}
+              className="flex-1"
+            >
+              {cancelText || "Zrušit"}
+            </Button>
+            <Button
+              id="ConfirmationModalDialog:agree"
+              type="button"
+              variant="danger"
+              onClick={() => {
+                if (!isConfirming) {
+                  setIsConfirming(true);
+                  confirmAction();
+                }
+              }}
+              disabled={isConfirming}
+              className="flex-1"
+            >
+              {agreeeText || "OK"}{" "}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ConfirmationModalDialog;

package/lib/components/Modal.tsx

@@ -0,0 +1,73 @@
+import { FaRegTrashAlt } from "react-icons/fa";
+import Button from "./Button";
+
+export interface IConfirmationModalDialogProps {
+  title: string;
+  confirmAction: () => void;
+  description?: string;
+  agreeeText?: string;
+}
+
+export function Modal({
+  title,
+  confirmAction,
+  description,
+  agreeeText = "OK",
+}: IConfirmationModalDialogProps) {
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center p-4"
+      style={{ zIndex: 50 }}
+    >
+      <div className="w-[500px] h-[300px] bg-white rounded-xl shadow flex-col justify-start items-center inline-flex relative overflow-hidden">
+        <div
+          id="graphics"
+          className="w-80 h-80 left-[-120px] top-[-120px] absolute "
+        >
+          <div className="w-80 h-80 left-0 top-0 absolute">
+            <div className="w-24 h-24 left-[120px] top-[120px] absolute rounded-full border border-gray-150" />
+            <div className="w-36 h-36 left-[96px] top-[96px] absolute rounded-full border border-gray-100  " />
+            <div className="w-48 h-48 left-[72px] top-[72px] absolute rounded-full border border-gray-100  " />
+            <div className="w-60 h-60 left-[48px] top-[48px] absolute rounded-full border border-gray-50   " />
+            <div className="w-72 h-72 left-[24px] top-[24px] absolute rounded-full border border-gray-50" />
+          </div>
+        </div>
+        <div
+          id="header"
+          className="self-stretch h-40 flex-col justify-start items-center flex z-40"
+        >
+          <div className="self-stretch h-40 px-6 pt-6 flex-col justify-start items-start gap-4 flex">
+            <div className="w-12 h-12 relative bg-red-100 rounded-full">
+              <FaRegTrashAlt className="w-6 h-6 left-[12px] top-[12px] absolute" />
+            </div>
+            <div className="self-stretch h-16 flex-col justify-start items-start gap-1 flex">
+              <div className="self-stretch text-gray-900 text-lg font-semibold font-['Inter'] leading-7">
+                {title}
+              </div>
+              <div className="self-stretch text-slate-600 text-sm font-normal font-['Open Sans'] leading-tight">
+                {description}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          id="actions"
+          className="self-stretch h-24 pt-8 flex-col justify-start items-start flex z-40"
+        >
+          <div className="self-stretch px-6 pb-6 justify-start items-start gap-3  flex">
+            <Button
+              type="button"
+              variant="primary"
+              onClick={confirmAction}
+              className="flex-1"
+            >
+              {agreeeText || "OK"}{" "}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Modal;

package/lib/components/ModalDialog.tsx

@@ -0,0 +1,63 @@
+import { createRef, useEffect } from "react";
+import { IoCloseOutline } from "react-icons/io5";
+import { useClickAway } from "react-use";
+
+export interface IModalDialogProps {
+  cancelAction: () => void;
+  children?: React.ReactNode;
+  classNameWrapper?: string;
+  closeOnCLickAway?: boolean;
+}
+
+export function ModalDialog({
+  cancelAction,
+  classNameWrapper,
+  children,
+  closeOnCLickAway = true,
+}: IModalDialogProps) {
+  const ref = createRef<HTMLDivElement>();
+
+  useClickAway(ref, () => {
+    closeOnCLickAway ? cancelAction() : null;
+  });
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        cancelAction();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [cancelAction]);
+
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center p-4"
+      style={{ zIndex: 50 }}
+    >
+      <div
+        ref={ref}
+        className={
+          `w-full max-w-[80vw] bg-white rounded-lg shadow-lg flex flex-col justify-start items-center 
+           relative gap-5 p-5  ` +
+          (classNameWrapper ? ` ${classNameWrapper}` : "")
+        }
+        style={{ maxHeight: "90vh" }}
+      >
+        <div
+          className="w-11 h-11 p-2 right-0 top-[16px] absolute rounded-full justify-center items-center inline-flex mr-4 hover:bg-gray-100 cursor-pointer"
+          onClick={cancelAction}
+        >
+          <IoCloseOutline className="w-6 h-6 relative text-gray-400" />
+        </div>
+
+        {children && <div className="text-left w-full">{children}</div>}
+      </div>
+    </div>
+  );
+}
+
+export default ModalDialog;