opus-toolkit-components 1.0.9 → 1.1.1

package/lib/{main.5d4f09a62f10ac5f2dda.js → main.af7bdb60c408fab716fd.js}

@@ -505,7 +505,7 @@ module.exports = insertBySelector;
 
 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 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}`, "",{"version":3,"sources":["webpack://./src/components/Tables/table.scss"],"names":[],"mappings":"AAGY,6BACI,0BAAA,CAEJ,4BACI,2BAAA,CAOA,uCACI,6BAAA,CAEJ,sCACI,8BAAA","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}"],"sourceRoot":""}]);
+___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)}.responsive-table-wrapper tr{display:block}.responsive-table-wrapper td{display:block;padding-left:1rem;padding-right:1rem}.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,CAGF,6BACE,aAAA,CAGF,6BACE,aAAA,CACA,iBAAA,CACA,kBAAA,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  \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      padding-left: 1rem;\r\n      padding-right: 1rem;\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___);
 
@@ -692,7 +692,7 @@ __webpack_require__.d(__webpack_exports__, {
   Button: () => (/* reexport */ Button),
   Card: () => (/* reexport */ Card),
   Checkbox: () => (/* reexport */ Checkbox),
-  CookieBanner: () => (/* reexport */ Cookies_CookieBanner),
+  CookieBanner: () => (/* reexport */ Cookie),
   DatePicker: () => (/* reexport */ DatePicker),
   Dropdown: () => (/* reexport */ Dropdown),
   Input: () => (/* reexport */ Inputs_Input),
@@ -4180,30 +4180,36 @@ var table_update = injectStylesIntoStyleTag_default()(table/* default */.A, tabl
 function Table(_ref) {
   let {
     data = [],
-    // Array defining columns and rendering logic
     rows = [],
-    // Array defining rows
     className = '',
     rowClassName = '',
     cellClassName = '',
     headRowClassName = '',
     headCellClassName = '',
-    rowKeyExtractor = (row, index) => index // Function to extract unique keys for rows
+    rowKeyExtractor = (row, index) => index
   } = _ref;
-  return /*#__PURE__*/external_react_default().createElement("table", {
-    className: "w-full table-auto text-left border-collapse ".concat(className)
-  }, /*#__PURE__*/external_react_default().createElement("thead", null, /*#__PURE__*/external_react_default().createElement("tr", {
+  return /*#__PURE__*/external_react_default().createElement("div", {
+    className: "responsive-table-wrapper w-full ".concat(className)
+  }, /*#__PURE__*/external_react_default().createElement("table", {
+    className: "min-w-full table-auto text-left border-collapse"
+  }, /*#__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-text-strong] ".concat(headCellClassName)
-  }, column.header)))), /*#__PURE__*/external_react_default().createElement("tbody", null, rows.map((row, index) => /*#__PURE__*/external_react_default().createElement("tr", {
-    key: rowKeyExtractor(row, index),
-    className: "".concat(index % 2 === 0 ? "bg-[--color-table-row-bg-even]" : "bg-[--color-table-row-bg-odd]", " hover:bg-[--color-table-row-bg-hover] ").concat(rowClassName)
-  }, data.map(column => /*#__PURE__*/external_react_default().createElement("td", {
-    key: column.key,
-    className: "p-4 text-sm text-[--color-text-weak] ".concat(cellClassName)
-  }, column.render ? column.render(row) : row[column.key]))))));
+    className: "border-b border-[--color-stroke] py-2 px-4 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)
+    }, data.map(column => /*#__PURE__*/external_react_default().createElement("td", {
+      key: column.key,
+      className: "block sm:table-cell px-4 py-2 text-sm text-[--color-text-weak] ".concat(cellClassName),
+      "data-label": column.header
+    }, column.render ? column.render(row) : row[column.key])));
+  }))));
 }
 ;// ./node_modules/@react-aria/utils/dist/useLayoutEffect.mjs
 
@@ -12911,8 +12917,7 @@ function Loader(_ref) {
 }
 ;// 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);
-;// ./src/components/Cookies/CookieBanner.js
+;// ./src/components/Cookie/Cookie.js
 
 
 
@@ -12922,32 +12927,54 @@ const CookieBanner = _ref => {
     logo,
     policyTxt = "This website uses cookies to ensure you get the best experience on our site. By clicking Accept, you consent to the use of cookies.",
     linkTxt = "Learn More",
-    // New props for control
     isVisible = true,
-    // show/hide banner
     onAccept = () => {},
-    // accept button handler
-    onLearnMore = () => {} // Learn More click handler
+    onLearnMore = () => {}
   } = _ref;
-  if (!isVisible) return null; // hide banner if not visible
+  const [show, setShow] = (0,external_react_.useState)(false);
+  const [render, setRender] = (0,external_react_.useState)(isVisible);
+  const [imageLoaded, setImageLoaded] = (0,external_react_.useState)(!logo); // if no logo image, consider loaded
 
+  (0,external_react_.useEffect)(() => {
+    if (isVisible) {
+      setRender(true);
+      if (logo) setImageLoaded(false);
+    } else {
+      setShow(false);
+      const timeout = setTimeout(() => setRender(false), 300);
+      return () => clearTimeout(timeout);
+    }
+  }, [isVisible]);
+  (0,external_react_.useEffect)(() => {
+    if (imageLoaded && render) {
+      const timeout = setTimeout(() => setShow(true), 10);
+      return () => clearTimeout(timeout);
+    }
+  }, [imageLoaded, render]);
+  if (!render) return null;
   return /*#__PURE__*/external_react_default().createElement(Card, {
     intent: "brandSecondary",
-    className: "flex items-center justify-between p-4 space-x-4"
+    className: "\n        md:flex items-center justify-between p-4 space-x-4\n        transition-all duration-300 ease-in-out\n        ".concat(show ? "opacity-100 translate-y-0" : "opacity-0 translate-y-3", "\n      ")
   }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex items-center"
-  }, /*#__PURE__*/external_react_default().createElement("img", {
-    src: logo || (footer_logos_svg_default()),
+    className: "md:flex items-center"
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: "flex-shrink-0 mr-4"
+  }, logo ? /*#__PURE__*/external_react_default().createElement("img", {
+    src: logo,
     alt: "C247 Logo",
-    className: "mr-4"
-  }), /*#__PURE__*/external_react_default().createElement("p", {
+    className: "w-full object-contain",
+    onLoad: () => setImageLoaded(true),
+    loading: "eager"
+  }) : /*#__PURE__*/external_react_default().createElement(footer_logos_svg_namespaceObject.ReactComponent, {
+    className: "w-full h-full"
+  })), /*#__PURE__*/external_react_default().createElement("p", {
     className: "mr-4"
   }, policyTxt)), /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex items-center space-x-4"
   }, /*#__PURE__*/external_react_default().createElement(Button, {
     rank: "primary",
     text: "Accept",
-    onClick: onAccept // call passed handler
+    onClick: onAccept
   }), /*#__PURE__*/external_react_default().createElement(Button, {
     rank: "secondary",
     text: linkTxt,
@@ -12957,7 +12984,7 @@ const CookieBanner = _ref => {
     }
   })));
 };
-/* harmony default export */ const Cookies_CookieBanner = (CookieBanner);
+/* harmony default export */ const Cookie = (CookieBanner);
 ;// ./src/index.js
 
 
@@ -12977,4 +13004,4 @@ const CookieBanner = _ref => {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.5d4f09a62f10ac5f2dda.js.map
+//# sourceMappingURL=main.af7bdb60c408fab716fd.js.map