opus-toolkit-components 1.3.1 → 1.3.2

package/lib/opus-components.main.js

@@ -382,28 +382,6 @@ if (true) {
 {}
 
 
-/***/ }),
-
-/***/ 494:
-/***/ ((module, __webpack_exports__, __webpack_require__) => {
-
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(354);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
-// Imports
-
-
-var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
-// Module
-___CSS_LOADER_EXPORT___.push([module.id, `table{width:100%}table thead th:first-of-type{border-top-left-radius:8px}table thead th:last-of-type{border-top-right-radius:8px}table tr:last-of-type td:first-of-type{border-bottom-left-radius:8px}table tr:last-of-type td:last-of-type{border-bottom-right-radius:8px}@media(max-width: 640px){.responsive-table-wrapper td::before{content:attr(data-label);display:block;font-weight:600;text-transform:uppercase;margin-bottom:.25rem;color:var(--color-text-strong)}button{width:100%}.responsive-table-wrapper tr{display:block}.responsive-table-wrapper td{display:block}.responsive-table-wrapper thead{display:none}}`, "",{"version":3,"sources":["webpack://./src/components/Tables/table.scss"],"names":[],"mappings":"AAAA,MAuBI,UAAA,CApBQ,6BACI,0BAAA,CAEJ,4BACI,2BAAA,CAOA,uCACI,6BAAA,CAEJ,sCACI,8BAAA,CAQpB,yBACI,qCACE,wBAAA,CACA,aAAA,CACA,eAAA,CACA,wBAAA,CACA,oBAAA,CACA,8BAAA,CAEF,OACI,UAAA,CAEJ,6BACE,aAAA,CAGF,6BACE,aAAA,CAGF,gCACE,YAAA,CAAA","sourcesContent":["table {\r\n    thead {\r\n        th {\r\n            &:first-of-type {\r\n                border-top-left-radius: 8px;\r\n            }\r\n            &:last-of-type {\r\n                border-top-right-radius: 8px;\r\n            }\r\n        }\r\n    }\r\n    tr {\r\n        &:last-of-type {\r\n            td {\r\n                &:first-of-type {\r\n                    border-bottom-left-radius: 8px;\r\n                }\r\n                &:last-of-type {\r\n                    border-bottom-right-radius: 8px;\r\n                }\r\n            }\r\n        }  \r\n    }\r\n    width: 100%; \r\n}\r\n\r\n@media (max-width: 640px) {\r\n    .responsive-table-wrapper td::before {\r\n      content: attr(data-label);\r\n      display: block;\r\n      font-weight: 600;\r\n      text-transform: uppercase;\r\n      margin-bottom: 0.25rem;\r\n      color: var(--color-text-strong);\r\n    }\r\n    button {\r\n        width:100%;\r\n    }\r\n    .responsive-table-wrapper tr {\r\n      display: block;\r\n    }\r\n  \r\n    .responsive-table-wrapper td {\r\n      display: block;\r\n    }\r\n  \r\n    .responsive-table-wrapper thead {\r\n      display: none;\r\n    }\r\n  }"],"sourceRoot":""}]);
-// Exports
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
-
-
 /***/ }),
 
 /***/ 514:
@@ -427,6 +405,30 @@ function insertStyleElement(options) {
 }
 module.exports = insertStyleElement;
 
+/***/ }),
+
+/***/ 601:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* unused harmony export wrapper */
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, `.ZEJeKqDMXwlCjQ6aN7ER{width:100%}.ZEJeKqDMXwlCjQ6aN7ER table{width:100%}.ZEJeKqDMXwlCjQ6aN7ER table thead th:first-of-type{border-top-left-radius:8px}.ZEJeKqDMXwlCjQ6aN7ER table thead th:last-of-type{border-top-right-radius:8px}.ZEJeKqDMXwlCjQ6aN7ER table tbody tr:last-of-type td:first-of-type{border-bottom-left-radius:8px}.ZEJeKqDMXwlCjQ6aN7ER table tbody tr:last-of-type td:last-of-type{border-bottom-right-radius:8px}@media(max-width: 640px){.ZEJeKqDMXwlCjQ6aN7ER td::before{content:attr(data-label);display:block;font-weight:600;text-transform:uppercase;margin-bottom:.25rem;color:var(--color-text-strong)}.ZEJeKqDMXwlCjQ6aN7ER tr{display:block}.ZEJeKqDMXwlCjQ6aN7ER td{display:block}.ZEJeKqDMXwlCjQ6aN7ER thead{display:none}.ZEJeKqDMXwlCjQ6aN7ER button{width:100%}}`, "",{"version":3,"sources":["webpack://./src/components/Tables/table.module.scss"],"names":[],"mappings":"AAAA,sBACE,UAAA,CAEA,4BACE,UAAA,CAII,mDACE,0BAAA,CAGF,kDACE,2BAAA,CASE,mEACE,6BAAA,CAGF,kEACE,8BAAA,CAQZ,yBACE,iCACE,wBAAA,CACA,aAAA,CACA,eAAA,CACA,wBAAA,CACA,oBAAA,CACA,8BAAA,CAGF,yBACE,aAAA,CAGF,yBACE,aAAA,CAGF,4BACE,YAAA,CAGF,6BACE,UAAA,CAAA","sourcesContent":[".wrapper {\r\n  width: 100%;\r\n\r\n  table {\r\n    width: 100%;\r\n\r\n    thead {\r\n      th {\r\n        &:first-of-type {\r\n          border-top-left-radius: 8px;\r\n        }\r\n\r\n        &:last-of-type {\r\n          border-top-right-radius: 8px;\r\n        }\r\n      }\r\n    }\r\n\r\n    tbody {\r\n      tr {\r\n        &:last-of-type {\r\n          td {\r\n            &:first-of-type {\r\n              border-bottom-left-radius: 8px;\r\n            }\r\n\r\n            &:last-of-type {\r\n              border-bottom-right-radius: 8px;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    td::before {\r\n      content: attr(data-label);\r\n      display: block;\r\n      font-weight: 600;\r\n      text-transform: uppercase;\r\n      margin-bottom: 0.25rem;\r\n      color: var(--color-text-strong);\r\n    }\r\n\r\n    tr {\r\n      display: block;\r\n    }\r\n\r\n    td {\r\n      display: block;\r\n    }\r\n\r\n    thead {\r\n      display: none;\r\n    }\r\n\r\n    button {\r\n      width: 100%;\r\n    }\r\n  }\r\n}"],"sourceRoot":""}]);
+// Exports
+var wrapper = (/* unused pure expression or super */ null && (`ZEJeKqDMXwlCjQ6aN7ER`));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 659:
@@ -4245,9 +4247,9 @@ function Checkbox(_ref) {
     className: "text-[--color-util-red] mt-1"
   }, errorMessage));
 }
-// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/Tables/table.scss
-var table = __webpack_require__(494);
-;// ./src/components/Tables/table.scss
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/Tables/table.module.scss
+var table_module = __webpack_require__(601);
+;// ./src/components/Tables/table.module.scss
 
       
       
@@ -4259,20 +4261,20 @@ var table = __webpack_require__(494);
       
       
 
-var table_options = {};
+var table_module_options = {};
 
-table_options.styleTagTransform = (styleTagTransform_default());
-table_options.setAttributes = (setAttributesWithoutAttributes_default());
-table_options.insert = insertBySelector_default().bind(null, "head");
-table_options.domAPI = (styleDomAPI_default());
-table_options.insertStyleElement = (insertStyleElement_default());
+table_module_options.styleTagTransform = (styleTagTransform_default());
+table_module_options.setAttributes = (setAttributesWithoutAttributes_default());
+table_module_options.insert = insertBySelector_default().bind(null, "head");
+table_module_options.domAPI = (styleDomAPI_default());
+table_module_options.insertStyleElement = (insertStyleElement_default());
 
-var table_update = injectStylesIntoStyleTag_default()(table/* default */.A, table_options);
+var table_module_update = injectStylesIntoStyleTag_default()(table_module/* default */.A, table_module_options);
 
 
 
 
-       /* harmony default export */ const Tables_table = (table/* default */.A && table/* default */.A.locals ? table/* default */.A.locals : undefined);
+       /* harmony default export */ const Tables_table_module = (table_module/* default */.A && table_module/* default */.A.locals ? table_module/* default */.A.locals : undefined);
 
 ;// ./src/components/Tables/Table.js
 
@@ -4289,24 +4291,24 @@ function Table(_ref) {
     rowKeyExtractor = (row, index) => index
   } = _ref;
   return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "responsive-table-wrapper w-full ".concat(className)
+    className: "".concat(Tables_table_module.wrapper, " w-full ").concat(className)
   }, /*#__PURE__*/external_react_default().createElement("table", {
-    className: "min-w-full table-auto text-left border-collapse"
+    className: "\n        min-w-full \n        table-auto \n        text-left \n        border-collapse \n        ".concat(Tables_table_module.table, "\n      ")
   }, /*#__PURE__*/external_react_default().createElement("thead", {
     className: "hidden sm:table-header-group"
   }, /*#__PURE__*/external_react_default().createElement("tr", {
     className: "bg-[--color-table-head-bg] ".concat(headRowClassName)
   }, data.map(column => /*#__PURE__*/external_react_default().createElement("th", {
     key: column.key,
-    className: "border-b border-[--color-stroke] py-2 px-4 text-sm font-normal text-[--color-table-head-txt] ".concat(headCellClassName)
+    className: "\n                  border-b border-[--color-stroke] \n                  py-2 px-4 \n                  text-sm font-normal text-[--color-table-head-txt] ".concat(headCellClassName)
   }, column.header)))), /*#__PURE__*/external_react_default().createElement("tbody", null, rows.map((row, index) => {
     const backgroundClass = index % 2 === 0 ? 'bg-[--color-table-row-bg-even]' : 'bg-[--color-table-row-bg-odd]';
     return /*#__PURE__*/external_react_default().createElement("tr", {
       key: rowKeyExtractor(row, index),
-      className: "block sm:table-row mb-4 sm:mb-0 rounded-lg sm:rounded-none border sm:border-0 border-[--color-stroke] p-4 sm:p-0 shadow-sm sm:shadow-none hover:bg-[--color-table-row-bg-hover] ".concat(backgroundClass, " ").concat(rowClassName)
+      className: "block \n                  sm:table-row \n                  mb-4 sm:mb-0 \n                  rounded-lg sm:rounded-none \n                  border sm:border-0 border-[--color-stroke] \n                  p-4 sm:p-0 \n                  shadow-sm sm:shadow-none \n                  hover:bg-[--color-table-row-bg-hover] ".concat(backgroundClass, " ").concat(rowClassName)
     }, data.map(column => /*#__PURE__*/external_react_default().createElement("td", {
       key: column.key,
-      className: "block sm:table-cell lg:px-4 lg:py-2 text-sm text-[--color-text-weak] ".concat(cellClassName),
+      className: "\n                      block sm:table-cell \n                      lg:px-4 lg:py-2 \n                      text-sm text-[--color-text-weak] ".concat(cellClassName),
       "data-label": column.header
     }, column.render ? column.render(row) : row[column.key])));
   }))));
@@ -12888,7 +12890,7 @@ function Dropdown(_ref) {
       "aria-hidden": "true",
       className: "-mr-1 h-5 w-5 text-[--color-text-weak] transition-transform duration-200 ".concat(open ? 'rotate-180' : 'rotate-0')
     })), !disabled && /*#__PURE__*/external_react_default().createElement(Pt, {
-      className: " absolute  right-0  z-10  mt-2  w-56  origin-top-right  rounded-md  bg-[--color-primary-bg]  shadow-lg  ring-1  ring-[--color-stroke]  ring-opacity-1  focus:outline-none  max-h-48  overflow-y-auto "
+      className: "\r absolute \r right-0 \r z-10 \r mt-2 \r w-56 \r origin-top-right \r rounded-md \r bg-[--color-primary-bg] \r shadow-lg \r ring-1 \r ring-[--color-stroke] \r ring-opacity-1 \r focus:outline-none \r max-h-48 \r overflow-y-auto\r "
     }, /*#__PURE__*/external_react_default().createElement("div", {
       className: "py-1"
     }, items.map((item, index) => /*#__PURE__*/external_react_default().createElement(Et, {
@@ -12965,6 +12967,38 @@ const Navbar = _ref => {
   }, children)));
 };
 /* harmony default export */ const Navbar_Navbar = (Navbar);
+;// external "opus-toolkit-styles/assets/logos/c247-loader.gif"
+const c247_loader_gif_namespaceObject = require("opus-toolkit-styles/assets/logos/c247-loader.gif");
+var c247_loader_gif_default = /*#__PURE__*/__webpack_require__.n(c247_loader_gif_namespaceObject);
+;// ./src/components/Loader/Loader.js
+
+
+
+// TODO: Consider refactoring Loader to remove internal isLoading logic.
+// It's currently responsible for both rendering logic and presentation.
+// In production, it's better to let the parent control rendering to keep Loader focused on UI.
+// This change would improve testability, flexibility, and follow React best practices.
+
+function Loader(_ref) {
+  let {
+    isLoading,
+    loaderText = 'loading...',
+    customLoader,
+    className = ''
+  } = _ref;
+  return isLoading && /*#__PURE__*/external_react_default().createElement("div", {
+    role: "status",
+    "aria-live": "polite",
+    className: "fixed inset-0 flex flex-col items-center justify-center bg-[--color-primary-bg] bg-opacity-50 z-50 ".concat(className)
+  }, customLoader ? customLoader : /*#__PURE__*/external_react_default().createElement("img", {
+    src: (c247_loader_gif_default()),
+    alt: "Loading",
+    className: "h-60"
+  }), /*#__PURE__*/external_react_default().createElement(Text, {
+    variant: "h4",
+    className: "mt-4 animate-pulse text-center"
+  }, loaderText));
+}
 ;// ./node_modules/@heroicons/react/24/solid/esm/XMarkIcon.js
 
 function XMarkIcon({
@@ -12994,10 +13028,13 @@ const XMarkIcon_ForwardRef = /*#__PURE__*/ external_react_.forwardRef(XMarkIcon)
 
 
 
+
 const Modal = _ref => {
   let {
     isOpen,
     onClose,
+    isLoading = false,
+    loaderText = 'Loading...',
     header,
     body,
     footer,
@@ -13025,9 +13062,15 @@ const Modal = _ref => {
     "aria-modal": "true",
     "aria-labelledby": "modal-title",
     "aria-describedby": "modal-description",
-    className: "bg-[--color-primary-bg] rounded-lg shadow-xl w-11/12 max-w-fit p-6 ".concat(className)
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex justify-end pb-3"
+    className: "relative bg-[--color-primary-bg] rounded-lg shadow-xl w-11/12 max-w-fit p-6 ".concat(className)
+  }, isLoading && /*#__PURE__*/external_react_default().createElement("div", {
+    className: "absolute inset-0 z-10 flex flex-col bg-[--color-primary-bg] items-center justify-center rounded-lg ".concat(isLoading ? 'opacity-1' : 'opacity-0 pointer-events-none')
+  }, /*#__PURE__*/external_react_default().createElement(Loader, {
+    isLoading: true,
+    loaderText: loaderText,
+    className: "relative z-20 w-[150px] h-[110px]"
+  })), /*#__PURE__*/external_react_default().createElement("div", {
+    className: "flex justify-end pb-3 relative z-0"
   }, /*#__PURE__*/external_react_default().createElement("button", {
     onClick: onClose,
     className: "hover:cursor-pointer text-[--color-text-strong]",
@@ -13036,44 +13079,17 @@ const Modal = _ref => {
     width: "24px",
     className: "text-[--color-text-strong]"
   }))), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "border-b border-[--color-stroke] pb-4 text-[--color-text-strong] ".concat(headerClassName)
+    className: "border-b border-[--color-stroke] pb-4 text-[--color-text-strong] relative z-0 ".concat(headerClassName)
   }, /*#__PURE__*/external_react_default().createElement("div", {
     id: "modal-title"
   }, header)), /*#__PURE__*/external_react_default().createElement("div", {
     id: "modal-description",
-    className: "my-4 text-[--color-text-weak]"
+    className: "my-4 text-[--color-text-weak] relative z-0"
   }, body), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "text-[--color-text-weak] ".concat(footerClassName)
+    className: "text-[--color-text-weak] relative z-0 ".concat(footerClassName)
   }, footer)));
 };
 /* harmony default export */ const Modals_Modal = (Modal);
-;// external "opus-toolkit-styles/assets/logos/c247-loader.gif"
-const c247_loader_gif_namespaceObject = require("opus-toolkit-styles/assets/logos/c247-loader.gif");
-var c247_loader_gif_default = /*#__PURE__*/__webpack_require__.n(c247_loader_gif_namespaceObject);
-;// ./src/components/Loader/Loader.js
-
-
-
-function Loader(_ref) {
-  let {
-    isLoading,
-    loaderText = 'loading...',
-    customLoader,
-    className = ''
-  } = _ref;
-  return isLoading && /*#__PURE__*/external_react_default().createElement("div", {
-    role: "status",
-    "aria-live": "polite",
-    className: "fixed inset-0 flex flex-col items-center justify-center bg-greySunkenDark1000 bg-opacity-80 z-50 ".concat(className)
-  }, customLoader ? customLoader : /*#__PURE__*/external_react_default().createElement("img", {
-    src: (c247_loader_gif_default()),
-    alt: "Loading",
-    className: "h-60"
-  }), /*#__PURE__*/external_react_default().createElement(Text, {
-    variant: "h4",
-    className: "mt-4 animate-pulse"
-  }, loaderText));
-}
 ;// external "opus-toolkit-styles/assets/logos/footer-logos.svg"
 const footer_logos_svg_namespaceObject = require("opus-toolkit-styles/assets/logos/footer-logos.svg");
 var footer_logos_svg_default = /*#__PURE__*/__webpack_require__.n(footer_logos_svg_namespaceObject);