labsense-ui-kit 1.0.13 → 1.0.14

package/dist/Icons/SVGs/AddProfile.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SVGProps } from "..";
+declare const AddProfile: React.FC<SVGProps>;
+export default AddProfile;

package/dist/Icons/SVGs/CloseEye.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SVGProps } from "..";
+declare const CloseEye: React.FC<SVGProps>;
+export default CloseEye;

package/dist/Icons/SVGs/OpenEye.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SVGProps } from "..";
+declare const OpenEye: React.FC<SVGProps>;
+export default OpenEye;

package/dist/Icons/SVGs/Return.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SVGProps } from "..";
+declare const Return: React.FC<SVGProps>;
+export default Return;

package/dist/Icons/SVGs/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Add } from './Add';
+export { default as AddProfile } from './AddProfile';
 export { default as Back } from './Back';
 export { default as Bin } from './Bin';
 export { default as Business } from './Business';
@@ -13,13 +14,13 @@ export { default as CircularWarning } from './CircularWarning';
 export { default as Client } from './Client';
 export { default as Close } from './Close';
 export { default as CloseCircle } from './CloseCircle';
+export { default as CloseEye } from './CloseEye';
 export { default as Copy } from './Copy';
 export { default as Cyber } from './Cyber';
 export { default as DownArrow } from './/DownArrow';
 export { default as Download } from './Download';
 export { default as Email } from './Email';
 export { default as ExitFullScreen } from './ExitFullScreen';
-export { default as Eye } from './Eye';
 export { default as FilesBox } from './FilesBox';
 export { default as FilledCircle } from './FilledCircle';
 export { default as Filter_1 } from './Filter_1';
@@ -49,11 +50,13 @@ export { default as MuteVolume } from './MuteVolume';
 export { default as NoCam } from './NoCam';
 export { default as Notifications } from './Notifications';
 export { default as OpenBin } from './OpenBin';
+export { default as OpenEye } from './OpenEye';
 export { default as Phone } from './Phone';
 export { default as Play } from './Play';
 export { default as Profile_1 } from './Profile_1';
 export { default as Profile_2 } from './Profile_2';
 export { default as Recording } from './Recording';
+export { default as Return } from './Return';
 export { default as Rewind_10_Sec } from './Rewind_10_Sec';
 export { default as RightArrow } from './RightArrow';
 export { default as RunAway } from './RunAway';

package/dist/Icons/index.d.ts

@@ -9,7 +9,7 @@ export interface SVGProps {
     color: string;
     weight: string;
 }
-export declare type IconNames = 'Add' | 'Back' | 'Bin' | 'Business' | 'Calendar' | 'CCTV_1' | 'CCTV_2' | 'Circle' | 'CircularEdit' | 'CircularPause' | 'CircularPlay' | 'CircularWarning' | 'Client' | 'Close' | 'CloseCircle' | 'Copy' | 'Cyber' | 'DownArrow' | 'Download' | 'Email' | 'ExitFullScreen' | 'Eye' | 'FilesBox' | 'FilledCircle' | 'Filter_1' | 'Filter_2' | 'Forward_10_Sec' | 'Forward' | 'FullScreen' | 'Grid_2x2_Hollow' | 'Grid_2x2' | 'Grid_3x3' | 'Grid_4x4' | 'Grid_5x5' | 'History' | 'Information' | 'Key' | 'KeyDown' | 'LeftArrow' | 'Letter' | 'Live' | 'Lock' | 'Logout' | 'MediumVolume' | 'Mute' | 'MuteVolume' | 'Menu' | 'NoCam' | 'Notifications' | 'OpenBin' | 'Phone' | 'Play' | 'Profile_1' | 'Profile_2' | 'Recording' | 'Rewind_10_Sec' | 'RightArrow' | 'RunAway' | 'SandTimer' | 'Search' | 'Settings' | 'Shield' | 'SquareEdit' | 'SquareTick' | 'Tag' | 'Team' | 'ThreeDots' | 'ThumbsUp' | 'Tick' | 'UpArrow' | 'Video' | 'FullVolume' | 'Wallet' | 'WiFiCam' | 'Zapper';
+export declare type IconNames = 'Add' | 'AddProfile' | 'Back' | 'Bin' | 'Business' | 'Calendar' | 'CCTV_1' | 'CCTV_2' | 'Circle' | 'CircularEdit' | 'CircularPause' | 'CircularPlay' | 'CircularWarning' | 'Client' | 'Close' | 'CloseCircle' | 'CloseEye' | 'Copy' | 'Cyber' | 'DownArrow' | 'Download' | 'Email' | 'ExitFullScreen' | 'OpenEye' | 'FilesBox' | 'FilledCircle' | 'Filter_1' | 'Filter_2' | 'Forward_10_Sec' | 'Forward' | 'FullScreen' | 'Grid_2x2_Hollow' | 'Grid_2x2' | 'Grid_3x3' | 'Grid_4x4' | 'Grid_5x5' | 'History' | 'Information' | 'Key' | 'KeyDown' | 'LeftArrow' | 'Letter' | 'Live' | 'Lock' | 'Logout' | 'MediumVolume' | 'Mute' | 'MuteVolume' | 'Menu' | 'NoCam' | 'Notifications' | 'OpenBin' | 'OpenEye' | 'Phone' | 'Play' | 'Profile_1' | 'Profile_2' | 'Recording' | 'Return' | 'Rewind_10_Sec' | 'RightArrow' | 'RunAway' | 'SandTimer' | 'Search' | 'Settings' | 'Shield' | 'SquareEdit' | 'SquareTick' | 'Tag' | 'Team' | 'ThreeDots' | 'ThumbsUp' | 'Tick' | 'UpArrow' | 'Video' | 'FullVolume' | 'Wallet' | 'WiFiCam' | 'Zapper';
 export interface IconProps {
     icon: IconNames;
     size?: number;

package/dist/hooks/index.d.ts

@@ -1,2 +1,3 @@
 import useClickOutside from "./useClickOutside";
-export { useClickOutside };
+import useCustomModal from "./useCustomModal";
+export { useClickOutside, useCustomModal };

package/dist/hooks/useCustomModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface UseModalProps {
+    maxWidth?: string;
+}
+declare const useCustomModal: ({ maxWidth }: UseModalProps) => {
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    createModal: (content: React.ReactNode) => React.JSX.Element;
+};
+export default useCustomModal;

package/dist/index.d.ts

@@ -5,8 +5,8 @@ import { Tabs } from './Tabs';
 import { ProgressBar } from './ProgressBar';
 import { colorVariables } from "./Themes/Colors";
 import { CircularLoader } from './Loader';
-import { useClickOutside } from './hooks';
+import { useClickOutside, useCustomModal } from './hooks';
 export { Button, Input, Icon, Tabs, ProgressBar, colorVariables };
 export { CircularLoader };
 export { IconNames, ButtonProps };
-export { useClickOutside };
+export { useClickOutside, useCustomModal };

package/dist/index.js

@@ -32,6 +32,23 @@ var Add = function Add(_ref) {
   }));
 };
 
+var AddProfile = function AddProfile(_ref) {
+  var size = _ref.size,
+    color = _ref.color,
+    weight = _ref.weight;
+  return React__default.createElement("svg", {
+    width: size,
+    height: size,
+    strokeWidth: weight,
+    viewBox: "0 0 16 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M3.52362 0.125C1.64937 0.125 0.125 1.79675 0.125 3.85213V10.2804C0.125 12.2188 1.55375 13.625 3.52362 13.625H8.15862C8.45604 14.3444 8.95991 14.9595 9.60663 15.3928C10.2533 15.8261 11.0139 16.0581 11.7924 16.0595C13.9636 16.0595 15.7299 14.2932 15.7299 12.122C15.7299 10.6156 14.8693 9.31962 13.6228 8.657V3.85213C13.6239 1.90138 11.8745 0.125 9.953 0.125H3.52362ZM3.52362 1.25H9.953C11.2625 1.25 12.5 2.51338 12.5 3.85213V8.25537C12.2675 8.21063 12.0314 8.18691 11.7946 8.1845C10.9643 8.18702 10.1564 8.45421 9.48837 8.94725C8.67138 8.47396 7.74807 8.21469 6.80412 8.1935C7.53157 8.17246 8.22228 7.86914 8.73001 7.34776C9.23774 6.82638 9.52263 6.12788 9.52437 5.40013C9.52318 4.65696 9.22743 3.94457 8.70193 3.41907C8.17643 2.89357 7.46404 2.59782 6.72087 2.59663C5.97821 2.59752 5.26622 2.89294 4.74108 3.41808C4.21594 3.94322 3.92052 4.65521 3.91963 5.39787C3.92113 6.1213 4.20245 6.81609 4.70468 7.33677C5.20691 7.85745 5.8911 8.16365 6.614 8.19125C5.5486 8.20137 4.50814 8.5149 3.61453 9.09511C2.72091 9.67531 2.01114 10.4982 1.56837 11.4672C1.35581 11.1081 1.24569 10.6977 1.25 10.2804V3.85213C1.25 2.6 2.1185 1.25 3.52362 1.25ZM6.72087 3.72163C7.64563 3.72163 8.39937 4.47312 8.39937 5.39787C8.39937 6.32262 7.64563 7.0775 6.72087 7.0775C5.79612 7.0775 5.04463 6.32375 5.04463 5.399C5.04463 4.47425 5.79612 3.72163 6.72087 3.72163ZM6.686 9.3095C7.37675 9.3095 8.04725 9.467 8.65925 9.764C8.14055 10.4409 7.858 11.2692 7.85487 12.122C7.85487 12.2514 7.88188 12.374 7.89425 12.5H3.52362C3.1265 12.5 2.771 12.4111 2.45825 12.2649C2.77357 11.3973 3.34867 10.6481 4.10521 10.1193C4.86175 9.5904 5.76294 9.30764 6.686 9.3095ZM11.7946 9.3095C13.3449 9.3095 14.6071 10.5706 14.6071 12.122C14.6071 13.6722 13.3449 14.9345 11.7946 14.9345C11.049 14.9336 10.3341 14.637 9.80687 14.1098C9.27962 13.5825 8.98302 12.8676 8.98213 12.122C8.98213 10.5717 10.2444 9.3095 11.7946 9.3095ZM11.2096 10.4345V11.555H10.0869V12.68H11.2108V13.8005H12.3358V12.68H13.4563V11.555H12.3358V10.4345H11.2108H11.2096Z",
+    fill: color
+  }));
+};
+
 var Back = function Back(_ref) {
   var size = _ref.size,
     color = _ref.color,
@@ -368,7 +385,6 @@ var CloseCircle = function CloseCircle(_ref) {
   return React__default.createElement("svg", {
     width: size,
     height: size,
-    stroke: color,
     strokeWidth: weight,
     viewBox: "0 0 20 20",
     fill: "none",
@@ -379,6 +395,45 @@ var CloseCircle = function CloseCircle(_ref) {
   }));
 };
 
+var CloseEye = function CloseEye(_ref) {
+  var size = _ref.size,
+    color = _ref.color,
+    weight = _ref.weight;
+  return React__default.createElement("svg", {
+    width: size,
+    height: size,
+    strokeWidth: weight,
+    viewBox: "0 0 14 7",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M11.5718 1.95703L12.9974 4.42628",
+    stroke: color,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), React__default.createElement("path", {
+    d: "M8.63647 3.3291L9.0811 5.8506",
+    stroke: color,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), React__default.createElement("path", {
+    d: "M5.35802 3.32812L4.91333 5.85",
+    stroke: color,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), React__default.createElement("path", {
+    d: "M2.42566 1.9541L0.993164 4.43529",
+    stroke: color,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), React__default.createElement("path", {
+    d: "M1 0.554688C2.05078 1.85534 3.97713 3.49999 7.00004 3.49999C10.0229 3.49999 11.9493 1.85535 13.0001 0.554702",
+    stroke: color,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
 var Copy = function Copy(_ref) {
   var size = _ref.size,
     color = _ref.color,
@@ -501,26 +556,6 @@ var ExitFullScreen = function ExitFullScreen(_ref) {
   }));
 };
 
-var Eye = function Eye(_ref) {
-  var size = _ref.size,
-    color = _ref.color,
-    weight = _ref.weight;
-  return React__default.createElement("svg", {
-    width: size,
-    height: size,
-    strokeWidth: weight,
-    viewBox: "0 0 14 10",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("path", {
-    d: "M6.99995 9.10156C6.16323 9.10156 5.29917 8.89375 4.42964 8.48633C3.74878 8.16641 3.06245 7.72344 2.3898 7.16836C1.25503 6.23047 0.555029 5.30078 0.524951 5.2625C0.407373 5.10664 0.407373 4.89336 0.524951 4.7375C0.555029 4.69922 1.25503 3.76953 2.3898 2.83164C3.06245 2.27656 3.74878 1.83359 4.42964 1.51367C5.29917 1.10625 6.16323 0.898438 6.99995 0.898438C7.83667 0.898438 8.70073 1.10625 9.57026 1.51367C10.2511 1.83359 10.9375 2.27656 11.6101 2.83164C12.7449 3.76953 13.4476 4.69922 13.475 4.7375C13.5925 4.89336 13.5925 5.10664 13.475 5.2625C13.4449 5.30078 12.7449 6.23047 11.6101 7.16836C10.9375 7.72344 10.2511 8.16641 9.57026 8.48633C8.70073 8.89375 7.83667 9.10156 6.99995 9.10156ZM1.43823 5C2.12456 5.81211 4.39136 8.22656 6.99995 8.22656C9.61401 8.22656 11.8753 5.81211 12.5617 5C11.8753 4.18789 9.60854 1.77344 6.99995 1.77344C4.38589 1.77344 2.12456 4.18789 1.43823 5Z",
-    fill: color
-  }), React__default.createElement("path", {
-    d: "M7 6.96875C5.91445 6.96875 5.03125 6.08555 5.03125 5C5.03125 3.91445 5.91445 3.03125 7 3.03125C8.08555 3.03125 8.96875 3.91445 8.96875 5C8.96875 6.08555 8.08555 6.96875 7 6.96875ZM7 3.90625C6.3957 3.90625 5.90625 4.3957 5.90625 5C5.90625 5.6043 6.3957 6.09375 7 6.09375C7.6043 6.09375 8.09375 5.6043 8.09375 5C8.09375 4.3957 7.6043 3.90625 7 3.90625Z",
-    fill: color
-  }));
-};
-
 var FilesBox = function FilesBox(_ref) {
   var size = _ref.size,
     color = _ref.color,
@@ -1358,6 +1393,26 @@ var OpenBin = function OpenBin(_ref) {
   }));
 };
 
+var OpenEye = function OpenEye(_ref) {
+  var size = _ref.size,
+    color = _ref.color,
+    weight = _ref.weight;
+  return React__default.createElement("svg", {
+    width: size,
+    height: size,
+    strokeWidth: weight,
+    viewBox: "0 0 14 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M6.99995 9.10156C6.16323 9.10156 5.29917 8.89375 4.42964 8.48633C3.74878 8.16641 3.06245 7.72344 2.3898 7.16836C1.25503 6.23047 0.555029 5.30078 0.524951 5.2625C0.407373 5.10664 0.407373 4.89336 0.524951 4.7375C0.555029 4.69922 1.25503 3.76953 2.3898 2.83164C3.06245 2.27656 3.74878 1.83359 4.42964 1.51367C5.29917 1.10625 6.16323 0.898438 6.99995 0.898438C7.83667 0.898438 8.70073 1.10625 9.57026 1.51367C10.2511 1.83359 10.9375 2.27656 11.6101 2.83164C12.7449 3.76953 13.4476 4.69922 13.475 4.7375C13.5925 4.89336 13.5925 5.10664 13.475 5.2625C13.4449 5.30078 12.7449 6.23047 11.6101 7.16836C10.9375 7.72344 10.2511 8.16641 9.57026 8.48633C8.70073 8.89375 7.83667 9.10156 6.99995 9.10156ZM1.43823 5C2.12456 5.81211 4.39136 8.22656 6.99995 8.22656C9.61401 8.22656 11.8753 5.81211 12.5617 5C11.8753 4.18789 9.60854 1.77344 6.99995 1.77344C4.38589 1.77344 2.12456 4.18789 1.43823 5Z",
+    fill: color
+  }), React__default.createElement("path", {
+    d: "M7 6.96875C5.91445 6.96875 5.03125 6.08555 5.03125 5C5.03125 3.91445 5.91445 3.03125 7 3.03125C8.08555 3.03125 8.96875 3.91445 8.96875 5C8.96875 6.08555 8.08555 6.96875 7 6.96875ZM7 3.90625C6.3957 3.90625 5.90625 4.3957 5.90625 5C5.90625 5.6043 6.3957 6.09375 7 6.09375C7.6043 6.09375 8.09375 5.6043 8.09375 5C8.09375 4.3957 7.6043 3.90625 7 3.90625Z",
+    fill: color
+  }));
+};
+
 var Phone = function Phone(_ref) {
   var size = _ref.size,
     color = _ref.color,
@@ -1467,6 +1522,23 @@ var Recording = function Recording(_ref) {
   }));
 };
 
+var Return = function Return(_ref) {
+  var size = _ref.size,
+    color = _ref.color,
+    weight = _ref.weight;
+  return React__default.createElement("svg", {
+    width: size,
+    height: size,
+    strokeWidth: weight,
+    viewBox: "0 0 12 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M11.248 5.97521C11.2474 6.92784 10.8688 7.8413 10.1954 8.51511C9.522 9.18893 8.60877 9.56805 7.65614 9.56927H1.18945C1.07342 9.56927 0.962141 9.52317 0.880094 9.44113C0.798047 9.35908 0.751953 9.2478 0.751953 9.13177C0.751953 9.01574 0.798047 8.90446 0.880094 8.82241C0.962141 8.74036 1.07342 8.69427 1.18945 8.69427H7.65614C8.37274 8.68784 9.0578 8.39866 9.56225 7.88966C10.0667 7.38066 10.3497 6.69304 10.3497 5.97641C10.3497 5.25978 10.0667 4.57215 9.56225 4.06315C9.0578 3.55416 8.37274 3.26498 7.65614 3.25855H2.41052L3.84223 4.43564C3.8869 4.47203 3.92394 4.51689 3.95122 4.56763C3.9785 4.61838 3.99549 4.67401 4.00122 4.73134C4.00695 4.78866 4.00129 4.84656 3.98458 4.90169C3.96788 4.95683 3.94044 5.00812 3.90386 5.05263C3.86727 5.09714 3.82226 5.13398 3.7714 5.16104C3.72054 5.18811 3.66483 5.20486 3.60748 5.21033C3.55013 5.21581 3.49226 5.20991 3.4372 5.19296C3.38213 5.17601 3.33096 5.14836 3.28661 5.11158L0.911641 3.1588C0.906391 3.15442 0.902453 3.14917 0.897422 3.14458C0.886033 3.13425 0.875225 3.12329 0.865047 3.11177L0.861547 3.10849C0.858484 3.10499 0.854547 3.10236 0.851484 3.09886V3.09755C0.846891 3.09208 0.843609 3.08574 0.839453 3.08005C0.830849 3.06862 0.822888 3.05671 0.815609 3.04439C0.813859 3.04155 0.811453 3.03892 0.809922 3.03586C0.808391 3.0328 0.804453 3.02864 0.802484 3.02471C0.800516 3.02077 0.797891 3.01289 0.795266 3.00721C0.789434 2.99447 0.784179 2.98148 0.779516 2.96827L0.777984 2.96433C0.768954 2.93933 0.762575 2.91345 0.758953 2.88711C0.757641 2.87902 0.755016 2.87136 0.75436 2.86327C0.753703 2.85517 0.75436 2.84774 0.75436 2.84008C0.75436 2.83242 0.752391 2.82761 0.752391 2.82105C0.752391 2.81449 0.754141 2.80836 0.75436 2.8018V2.77883C0.75436 2.77117 0.757641 2.76286 0.758953 2.75477C0.762562 2.72843 0.768942 2.70255 0.777984 2.67755L0.779516 2.67361C0.784328 2.66027 0.789359 2.64736 0.795266 2.63467C0.797891 2.62899 0.799422 2.62286 0.802484 2.61717C0.805547 2.61149 0.807734 2.60996 0.809922 2.60602C0.812109 2.60208 0.813859 2.60033 0.815609 2.59749C0.822746 2.58518 0.83056 2.57327 0.839016 2.56183C0.843172 2.55614 0.846453 2.5498 0.851047 2.54433V2.54324C0.855422 2.53777 0.860891 2.53405 0.865484 2.5288C0.875547 2.51786 0.885828 2.50692 0.896984 2.4973C0.902016 2.49271 0.905953 2.48746 0.911203 2.48308L0.913391 2.48111L3.28748 0.5303C3.33183 0.493523 3.38301 0.465867 3.43807 0.448921C3.49313 0.431974 3.551 0.42607 3.60835 0.431547C3.66571 0.437025 3.72141 0.453776 3.77227 0.480839C3.82313 0.507902 3.86815 0.544744 3.90473 0.58925C3.94132 0.633756 3.96875 0.68505 3.98546 0.740187C4.00217 0.795324 4.00782 0.853218 4.00209 0.910545C3.99637 0.967873 3.97938 1.0235 3.95209 1.07425C3.92481 1.12499 3.88777 1.16985 3.84311 1.20624L2.41139 2.38355H7.65702C8.60913 2.38482 9.52188 2.76366 10.1951 3.43697C10.8682 4.11028 11.2469 5.02309 11.248 5.97521Z",
+    fill: color
+  }));
+};
+
 var Rewind_10_Sec = function Rewind_10_Sec(_ref) {
   var size = _ref.size,
     color = _ref.color,
@@ -1898,6 +1970,7 @@ var IconWrapper = styled__default.div(_templateObject2 || (_templateObject2 = _t
 var IconWrapperForSVG = styled__default.g(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), wrapperCss);
 var IconSVGs = {
   Add: Add,
+  AddProfile: AddProfile,
   Back: Back,
   Bin: Bin,
   Business: Business,
@@ -1912,13 +1985,13 @@ var IconSVGs = {
   Client: Client,
   Close: Close,
   CloseCircle: CloseCircle,
+  CloseEye: CloseEye,
   Copy: Copy,
   Cyber: Cyber,
   DownArrow: DownArrow,
   Download: Download,
   Email: Email,
   ExitFullScreen: ExitFullScreen,
-  Eye: Eye,
   FilesBox: FilesBox,
   FilledCircle: FilledCircle,
   Filter_1: Filter_1,
@@ -1948,11 +2021,13 @@ var IconSVGs = {
   NoCam: NoCam,
   Notifications: Notifications,
   OpenBin: OpenBin,
+  OpenEye: OpenEye,
   Phone: Phone,
   Play: Play,
   Profile_1: Profile_1,
   Profile_2: Profile_2,
   Recording: Recording,
+  Return: Return,
   Rewind_10_Sec: Rewind_10_Sec,
   RightArrow: RightArrow,
   RunAway: RunAway,
@@ -2077,14 +2152,14 @@ var StyledButton = styled__default.button(_templateObject$2 || (_templateObject$
   return gap || '10px';
 }, function (_ref4) {
   var borderRadius = _ref4.borderRadius;
-  return borderRadius || '5px';
+  return borderRadius || '8px';
 }, function (_ref5) {
   var iconPosition = _ref5.iconPosition;
   return iconPosition === 'right' ? 'row-reverse' : 'row';
 }, function (_ref6) {
   var size = _ref6.size,
     padding = _ref6.padding;
-  return size === 'small' ? '8px 14.4px' : size === 'medium' ? '10px 19px' : size === 'large' ? '12px 24.5px' : size === 'custom' ? padding : '10px 16px';
+  return size === 'small' ? '8px 12.2px' : size === 'medium' ? '10px 19px' : size === 'large' ? '12px 24.5px' : size === 'custom' ? padding : '10px 16px';
 }, function (_ref7) {
   var variant = _ref7.variant,
     disabled = _ref7.disabled;
@@ -2434,6 +2509,41 @@ var useClickOutside = function useClickOutside(elRef, elCallback) {
   }, [elCallback, elRef]);
 };
 
+var _templateObject$5, _templateObject2$4;
+var ModalOverlay = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: Noto Sans, sans-serif;\n  z-index: 99999;\n"])));
+var ModalContainer = styled__default.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  max-width: ", ";\n"])), colorVariables.accent.light, function (_ref) {
+  var maxWidth = _ref.maxWidth;
+  return maxWidth ? maxWidth : '400px';
+});
+var Modal = function Modal(_ref2) {
+  var isOpen = _ref2.isOpen,
+    maxWidth = _ref2.maxWidth,
+    children = _ref2.children;
+  if (!isOpen) return null;
+  return React__default.createElement(ModalOverlay, null, React__default.createElement(ModalContainer, {
+    maxWidth: maxWidth,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, children));
+};
+var useCustomModal = function useCustomModal(_ref3) {
+  var maxWidth = _ref3.maxWidth;
+  var _useState = React.useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var createModal = function createModal(content) {
+    return React__default.createElement(Modal, {
+      isOpen: isOpen,
+      maxWidth: maxWidth
+    }, content);
+  };
+  return {
+    setIsOpen: setIsOpen,
+    createModal: createModal
+  };
+};
+
 exports.Button = ButtonComponent;
 exports.CircularLoader = CircularLoader;
 exports.Icon = Icon;
@@ -2442,4 +2552,5 @@ exports.ProgressBar = ProgressBar;
 exports.Tabs = Tabs;
 exports.colorVariables = colorVariables;
 exports.useClickOutside = useClickOutside;
+exports.useCustomModal = useCustomModal;
 //# sourceMappingURL=index.js.map