opus-toolkit-components 1.4.9 → 1.5.2

package/lib/opus-components.main.js

@@ -573,7 +573,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ``, "",{"version":3,"sources":[],"names
 
 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, `.navbar .nav-logo{max-height:40px}`, "",{"version":3,"sources":["webpack://./src/components/Navbar/navbar.scss"],"names":[],"mappings":"AACI,kBACI,eAAA","sourcesContent":[".navbar {\r\n    .nav-logo {\r\n        max-height: 40px;\r\n    }\r\n}"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, `.navbar .nav-logo{height:40px;width:auto}`, "",{"version":3,"sources":["webpack://./src/components/Navbar/navbar.scss"],"names":[],"mappings":"AACI,kBACI,WAAA,CACA,UAAA","sourcesContent":[".navbar {\r\n    .nav-logo {\r\n        height: 40px;\r\n        width: auto;\r\n    }\r\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -802,50 +802,51 @@ const getDataCy = function () {
   return name || '';
 };
 ;// ./src/components/Text/Text.jsx
-const _excluded = ["variant", "as", "className", "children", "name", "dataCy"];
+const _excluded = ["variant", "as", "className", "color", "children", "name", "dataCy"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 
 
 const variantMap = {
-  h1: 'text-4xl font-bold leading-tight text-[--color-text-strong]',
-  h2: 'text-3xl leading-snug text-[--color-text-strong]',
-  h3: 'text-2xl font-semibold leading-snug text-[--color-text-strong]',
-  h4: 'text-xl font-medium text-[--color-text-strong]',
-  h5: 'text-lg font-medium text-[--color-text-strong]',
-  h6: 'text-base font-medium text-[--color-text-strong]',
-  body: 'text-base text-[--color-text-strong]',
-  small: 'text-sm text-[--color-text-strong]',
-  caption: 'text-xs text-[--color-text-strong]',
-  label: 'text-md text-[--color-text-weak]'
+  h1: "text-4xl font-bold leading-tight",
+  h2: "text-3xl leading-snug",
+  h3: "text-2xl font-semibold leading-snug",
+  h4: "text-xl font-medium",
+  h5: "text-lg font-medium",
+  h6: "text-base font-medium",
+  body: "text-base",
+  small: "text-sm",
+  caption: "text-xs",
+  label: "text-md"
 };
 const elementMap = {
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-  h5: 'h5',
-  h6: 'h6',
-  body: 'p',
-  small: 'small',
-  caption: 'span',
-  label: 'label'
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  body: "p",
+  small: "small",
+  caption: "span",
+  label: "label"
 };
 function Text(_ref) {
   let {
-      variant = 'body',
+      variant = "body",
       as,
-      className = '',
+      className = "",
+      color = "text-[--color-text-strong]",
       children,
       name,
       dataCy
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  const Component = as || elementMap[variant] || 'p';
+  const Component = as || elementMap[variant] || "p";
   const variantClass = variantMap[variant] || variantMap.body;
   return /*#__PURE__*/external_react_default().createElement(Component, _extends({
-    className: "".concat(variantClass, " ").concat(className),
+    className: "".concat(variantClass, " ").concat(color, " ").concat(className),
     "data-cy": getDataCy({
       name,
       dataCy
@@ -4121,24 +4122,24 @@ const RadioButton = _ref => {
   let {
     label,
     options = [{
-      value: 'single',
-      label: 'Single'
+      value: "single",
+      label: "Single"
     }, {
-      value: 'married',
-      label: 'Married / Living with Partner'
+      value: "married",
+      label: "Married / Living with Partner"
     }, {
-      value: 'divorced',
-      label: 'Divorced'
+      value: "divorced",
+      label: "Divorced"
     }, {
-      value: 'other',
-      label: 'Other'
+      value: "other",
+      label: "Other"
     }],
     name,
     value,
     onChange,
-    className = '',
-    tabIndex = '',
-    title = '',
+    className = "",
+    tabIndex = "",
+    title = "",
     isValid = true,
     errorMessage = "".concat(label, " is required"),
     required = false,
@@ -4157,15 +4158,15 @@ const RadioButton = _ref => {
     onChange === null || onChange === void 0 || onChange(event);
   };
   return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex flex-col mb-4 ".concat(className)
+    className: "mb-4 flex flex-col ".concat(className)
   }, /*#__PURE__*/external_react_default().createElement(Text, {
     as: "label",
     variant: "label",
-    className: "text-[--color-text-strong] mb-2 flex items-center"
+    className: "mb-2 flex items-center text-[--color-text-strong]"
   }, label, required && /*#__PURE__*/external_react_default().createElement(Text, {
     as: "span",
     variant: "small",
-    className: "text-[--color-util-red] ml-1"
+    className: "ml-1 text-[--color-util-red]"
   }, "*")), /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex flex-wrap gap-4 md:flex-nowrap md:gap-0 md:space-x-4"
   }, options.map(option => {
@@ -4173,7 +4174,7 @@ const RadioButton = _ref => {
     return /*#__PURE__*/external_react_default().createElement("label", {
       key: option.value,
       htmlFor: id,
-      className: "py-2 px-4 mb-1 text-center whitespace-break-spaces border hover:border-[--color-primary-btn] rounded-lg transition duration-200 flex items-center  ".concat(selectedValue === option.value ? 'bg-[--color-primary-btn] text-[--color-white] border-[--color-stroke]' : "bg-[--color-input-bg] text-[--color-text-strong] ".concat(!isValid && selectedValue === '' ? 'border-[--color-util-red]' : 'border-[--color-stroke]'), " ").concat(disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer')
+      className: "mb-1 flex items-center whitespace-break-spaces rounded-lg border px-4 py-2 text-center transition duration-200 hover:border-[--color-primary-btn] ".concat(selectedValue === option.value ? "border-[--color-stroke] bg-[--color-primary-btn] text-[--color-white]" : "bg-[--color-input-bg] text-[--color-text-strong] ".concat(!isValid && selectedValue === "" ? "border-[--color-util-red]" : "border-[--color-stroke]"), " ").concat(disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer")
     }, /*#__PURE__*/external_react_default().createElement("input", {
       id: id,
       type: "radio",
@@ -4199,7 +4200,7 @@ const RadioButton = _ref => {
     className: "text-[--color-util-red]"
   }, errorMessage));
 };
-RadioButton.displayName = 'RadioButton';
+RadioButton.displayName = "RadioButton";
 /* harmony default export */ const Radios_RadioButton = (RadioButton);
 ;// ./src/components/Forms/Checkbox/Checkbox.jsx
 
@@ -12989,31 +12990,38 @@ var navbar_update = injectStylesIntoStyleTag_default()(navbar/* default */.A, na
 
        /* harmony default export */ const Navbar_navbar = (navbar/* default */.A && navbar/* default */.A.locals ? navbar/* default */.A.locals : undefined);
 
-;// external "opus-toolkit-styles/assets/logos/c247-icon-only.svg"
-const c247_icon_only_svg_namespaceObject = require("opus-toolkit-styles/assets/logos/c247-icon-only.svg");
-var c247_icon_only_svg_default = /*#__PURE__*/__webpack_require__.n(c247_icon_only_svg_namespaceObject);
+;// external "opus-toolkit-styles/assets/logos/c247-icon-only.png"
+const c247_icon_only_png_namespaceObject = require("opus-toolkit-styles/assets/logos/c247-icon-only.png");
+var c247_icon_only_png_default = /*#__PURE__*/__webpack_require__.n(c247_icon_only_png_namespaceObject);
+;// external "opus-toolkit-styles/assets/logos/c247-icon-only-2x.png"
+const c247_icon_only_2x_png_namespaceObject = require("opus-toolkit-styles/assets/logos/c247-icon-only-2x.png");
+var c247_icon_only_2x_png_default = /*#__PURE__*/__webpack_require__.n(c247_icon_only_2x_png_namespaceObject);
 ;// ./src/components/Navbar/Navbar.jsx
 
 
 
+// Default logo variants
+
+
 const Navbar = _ref => {
   let {
     children,
     logo,
-    className = '',
-    maxWidth = '1200px'
+    className = "",
+    maxWidth = "1200px"
   } = _ref;
   return /*#__PURE__*/external_react_default().createElement("nav", {
-    className: "p-4 w-full bg-[--color-primary-bg] shadow-lg navbar ".concat(className)
+    className: "navbar w-full bg-[--color-primary-bg] p-4 shadow-lg ".concat(className)
   }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "mx-auto flex items-center justify-between w-full",
+    className: "mx-auto flex w-full items-center justify-between",
     style: {
       maxWidth
     }
   }, /*#__PURE__*/external_react_default().createElement("img", {
-    src: logo || (c247_icon_only_svg_default()),
+    src: logo || (c247_icon_only_png_default()),
+    srcSet: "".concat((c247_icon_only_png_default()), " 1x, ").concat((c247_icon_only_2x_png_default()), " 2x"),
     alt: "Navbar Logo",
-    className: "nav-logo"
+    className: "nav-logo h-10 w-auto"
   }), /*#__PURE__*/external_react_default().createElement("div", {
     className: "right-content text-[--color-text-strong]"
   }, children)));
@@ -13143,23 +13151,27 @@ const Modal = _ref => {
   }, footer)));
 };
 /* harmony default export */ const Modals_Modal = (Modal);
-;// 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);
+;// external "opus-toolkit-styles/assets/logos/footer-logo-group.png"
+const footer_logo_group_png_namespaceObject = require("opus-toolkit-styles/assets/logos/footer-logo-group.png");
+var footer_logo_group_png_default = /*#__PURE__*/__webpack_require__.n(footer_logo_group_png_namespaceObject);
+;// external "opus-toolkit-styles/assets/logos/footer-logo-group-2x.png"
+const footer_logo_group_2x_png_namespaceObject = require("opus-toolkit-styles/assets/logos/footer-logo-group-2x.png");
+var footer_logo_group_2x_png_default = /*#__PURE__*/__webpack_require__.n(footer_logo_group_2x_png_namespaceObject);
 ;// ./src/components/Cookie/Cookie.jsx
 
 
 
 
+
 const CookieBanner = _ref => {
   let {
     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',
+    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",
     isVisible = true,
     onAccept = () => {},
     onLearnMore = () => {},
-    intent = 'brandSecondary'
+    intent = "brandSecondary"
   } = _ref;
   const [show, setShow] = (0,external_react_.useState)(false);
   const [render, setRender] = (0,external_react_.useState)(isVisible);
@@ -13184,13 +13196,14 @@ const CookieBanner = _ref => {
   if (!render) return null;
   return /*#__PURE__*/external_react_default().createElement(Card, {
     intent: intent,
-    className: "\n        md:flex \n        items-center \n        justify-between \n        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      ")
+    className: "items-center justify-between space-x-4 p-4 transition-all duration-300 ease-in-out md:flex ".concat(show ? "translate-y-0 opacity-100" : "translate-y-3 opacity-0", " ")
   }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "md:flex items-center"
+    className: "items-center md:flex"
   }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex-shrink-0 mr-4"
+    className: "flex-shrink-1 mr-4"
   }, /*#__PURE__*/external_react_default().createElement("img", {
-    src: logo || (footer_logos_svg_default()),
+    src: logo || (footer_logo_group_png_default()),
+    srcSet: "".concat((footer_logo_group_png_default()), " 1x, ").concat((footer_logo_group_2x_png_default()), " 2x"),
     alt: "C247 Logo",
     className: "w-full object-contain",
     onLoad: () => setImageLoaded(true)