opus-toolkit-components 0.4.6 → 0.4.8

package/lib/{main.e2ca24f247ecc6c39f1a.js → main.27e38fb8f2be4aafc01b.js}

@@ -591,6 +591,7 @@ __webpack_require__.d(__webpack_exports__, {
   DatePicker: () => (/* reexport */ DatePicker),
   Dropdown: () => (/* reexport */ Dropdown),
   Input: () => (/* reexport */ Inputs_Input),
+  Modal: () => (/* reexport */ Modals_Modal),
   Navbar: () => (/* reexport */ Navbar_Navbar),
   RadioButton: () => (/* reexport */ Radios_RadioButton),
   Table: () => (/* reexport */ Table)
@@ -820,7 +821,7 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
     // Custom component to render
     customComponentProps = {} // Props for the custom component
   } = _ref;
-  const inputClasses = "".concat(className, " flex items-center rounded-md bg-white border ").concat(isValid ? 'border-greyLight500' : 'border-utilRed1000', " p-2 text-md font-normal text-gray-900");
+  const inputClasses = "".concat(className, " flex items-center rounded-md bg-white border ").concat(isValid ? 'border-greyLight500' : 'border-utilRed1000', " text-md font-normal text-gray-900");
   const iconClasses = "h-5 w-5 ".concat(isAnimated ? 'transition-transform duration-200 group-focus-within:scale-125' : '', " text-gray-400");
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex flex-col mb-4"
@@ -836,7 +837,7 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
     className: iconClasses
   })), /*#__PURE__*/external_react_default().createElement("input", {
     ref: ref,
-    className: "w-full ".concat(Icon ? iconPosition === 'left' ? 'pl-10' : 'pr-10' : '', " bg-transparent border-none focus:ring-0 focus:outline-none"),
+    className: "w-full ".concat(Icon ? iconPosition === 'left' ? 'pl-10' : 'pr-10' : '', " bg-transparent border-none focus:ring-0 focus:outline-none rounded-md p-3"),
     type: type,
     name: name,
     placeholder: placeholder,
@@ -9370,6 +9371,69 @@ const Navbar = _ref => {
   }, children)));
 };
 /* harmony default export */ const Navbar_Navbar = (Navbar);
+;// ./node_modules/@heroicons/react/24/solid/esm/XMarkIcon.js
+
+function XMarkIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/external_react_.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/external_react_.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/external_react_.createElement("path", {
+    fillRule: "evenodd",
+    d: "M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z",
+    clipRule: "evenodd"
+  }));
+}
+const XMarkIcon_ForwardRef = /*#__PURE__*/ external_react_.forwardRef(XMarkIcon);
+/* harmony default export */ const esm_XMarkIcon = (XMarkIcon_ForwardRef);
+;// ./src/components/Modals/Modal.js
+
+
+
+const Modal = _ref => {
+  let {
+    isOpen,
+    title,
+    text,
+    onClose,
+    children,
+    primaryAction,
+    // Props for the primary button
+    secondaryAction // Props for the secondary button
+  } = _ref;
+  if (!isOpen) return null;
+  return /*#__PURE__*/external_react_default().createElement("div", {
+    className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: "bg-greyBaseLight rounded-lg shadow-lg w-11/12 max-w-md p-6"
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: "flex justify-end items-center pb-3"
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    onClick: onClose,
+    className: "hover:cursor-pointer"
+  }, /*#__PURE__*/external_react_default().createElement(esm_XMarkIcon, {
+    width: "24px"
+  }))), /*#__PURE__*/external_react_default().createElement("div", {
+    className: "border-b border-greyLight100 pb-4"
+  }, /*#__PURE__*/external_react_default().createElement("h4", {
+    className: "text-h4"
+  }, title), /*#__PURE__*/external_react_default().createElement("p", null, text)), /*#__PURE__*/external_react_default().createElement("div", {
+    className: "mt-4"
+  }, children), /*#__PURE__*/external_react_default().createElement("div", {
+    className: "mt-6 flex justify-end gap-2"
+  }, secondaryAction && /*#__PURE__*/external_react_default().createElement(Button, secondaryAction), primaryAction && /*#__PURE__*/external_react_default().createElement(Button, primaryAction))));
+};
+/* harmony default export */ const Modals_Modal = (Modal);
 ;// ./src/index.js
 
 
@@ -9380,8 +9444,9 @@ const Navbar = _ref => {
 
 
 
+
 /******/ 	return __webpack_exports__;
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.e2ca24f247ecc6c39f1a.js.map
+//# sourceMappingURL=main.27e38fb8f2be4aafc01b.js.map