opus-toolkit-components 1.5.2 → 1.5.4

package/lib/opus-components.main.js

@@ -12,6 +12,25 @@ return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
+/***/ 20:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+var __webpack_unused_export__;
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var f=__webpack_require__(155),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
+function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}__webpack_unused_export__=l;exports.jsx=q;exports.jsxs=q;
+
+
+/***/ }),
+
 /***/ 56:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -556,6 +575,19 @@ ___CSS_LOADER_EXPORT___.push([module.id, ``, "",{"version":3,"sources":[],"names
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 848:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+if (true) {
+  module.exports = __webpack_require__(20);
+} else // removed by dead control flow
+{}
+
+
 /***/ }),
 
 /***/ 908:
@@ -764,8 +796,11 @@ function ChevronDownIcon({
 }
 const ChevronDownIcon_ForwardRef = /*#__PURE__*/ external_react_.forwardRef(ChevronDownIcon);
 /* harmony default export */ const esm_ChevronDownIcon = (ChevronDownIcon_ForwardRef);
+// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
+var jsx_runtime = __webpack_require__(848);
 ;// ./src/components/Pills/Pill.jsx
 
+
 const statusClasses = {
   primary: 'bg-[--color-primary-btn] text-[--color-white]',
   danger: 'bg-[--color-util-red] text-[--color-white]',
@@ -783,11 +818,12 @@ const Pill = _ref => {
   } = _ref;
   const baseClasses = 'inline-flex items-center gap-1 text-xs font-medium px-3 py-1 rounded-full';
   const statusClass = statusClasses[status] || statusClasses.info;
-  return /*#__PURE__*/external_react_default().createElement("span", {
-    className: "".concat(baseClasses, " ").concat(statusClass, " ").concat(className)
-  }, Icon && /*#__PURE__*/external_react_default().createElement(Icon, {
-    className: "w-4 h-4"
-  }), text);
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("span", {
+    className: "".concat(baseClasses, " ").concat(statusClass, " ").concat(className),
+    children: [Icon && /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
+      className: "w-4 h-4"
+    }), text]
+  });
 };
 /* harmony default export */ const Pills_Pill = (Pill);
 ;// ./src/utils/getDataCy.js
@@ -803,11 +839,16 @@ const getDataCy = function () {
 };
 ;// ./src/components/Text/Text.jsx
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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",
   h2: "text-3xl leading-snug",
@@ -845,19 +886,22 @@ function Text(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   const Component = as || elementMap[variant] || "p";
   const variantClass = variantMap[variant] || variantMap.body;
-  return /*#__PURE__*/external_react_default().createElement(Component, _extends({
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(Component, _objectSpread(_objectSpread({
     className: "".concat(variantClass, " ").concat(color, " ").concat(className),
     "data-cy": getDataCy({
       name,
       dataCy
     })
-  }, rest), children);
+  }, rest), {}, {
+    children: children
+  }));
 }
 ;// ./src/components/Accordions/Accordion.jsx
 
 
 
 
+
 const Accordion = _ref => {
   let {
     title,
@@ -895,43 +939,52 @@ const Accordion = _ref => {
       setInternalActiveIndex(activeIndex);
     }
   }, [activeIndex]);
-  return /*#__PURE__*/external_react_default().createElement("div", {
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
     id: "accordion-".concat(index),
-    className: "accordion w-full border border-[--color-stroke] shadow-lg ".concat(disabled ? "pointer-events-none opacity-50" : "", " rounded-lg")
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "accordion-item",
-    key: index
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    onClick: !isPreview && !isLocked ? toggle : null,
-    className: "accordion-header flex items-center justify-between rounded-t-lg bg-[--color-accordion-header] ".concat(isActive || isPreview ? "" : "rounded-b-lg", " hover: ").concat(!isLocked ? "cursor-pointer" : null, " ")
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex items-center justify-between gap-2"
-  }, /*#__PURE__*/external_react_default().createElement(Text, {
-    as: "h2",
-    variant: "h2",
-    className: "text-h4 mx-4 my-2 text-[--color-text-strong]"
-  }, title)), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex items-center gap-4"
-  }, isPill && /*#__PURE__*/external_react_default().createElement(Pills_Pill, {
-    text: pillText,
-    status: pillStatus,
-    icon: pillIcon
-  }), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "border-0 ".concat(!isLocked && "cursor-pointer border-l-2", " border-solid border-[--color-stroke] p-4"),
-    onClick: !isLocked ? toggle : null // toggle only here
-  }, isPreview && !isLocked ? /*#__PURE__*/external_react_default().createElement(esm_PencilSquareIcon, {
-    className: "h-5 w-5 text-[--color-text-strong]",
-    onClick: e => {
-      e.stopPropagation(); // prevent toggle from firing on pencil click
-      onExitPreview(); // trigger exit preview
-    }
-  }) : !isLocked ? /*#__PURE__*/external_react_default().createElement(esm_ChevronDownIcon, {
-    className: "h-4 w-4 transform text-[--color-text-strong] transition-transform ".concat(isActive ? "rotate-180" : "rotate-0")
-  }) : null)))), isActive && /*#__PURE__*/external_react_default().createElement("div", {
-    className: "accordion-body rounded-b-lg border-0 border-t-2 border-solid border-[--color-stroke] bg-[--color-accordion-body] p-3 text-[--color-text-weak]"
-  }, content), isPreview && activeIndex !== index && /*#__PURE__*/external_react_default().createElement("div", {
-    className: "accordion-body rounded-b-lg border-0 border-t-2 border-solid border-[--color-stroke] bg-[--color-accordion-body] p-3 text-[--color-text-weak]"
-  }, preview));
+    className: "accordion w-full border border-[--color-stroke] shadow-lg ".concat(disabled ? "pointer-events-none opacity-50" : "", " rounded-lg"),
+    children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      className: "accordion-item",
+      children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+        onClick: !isPreview && !isLocked ? toggle : null,
+        className: "accordion-header flex items-center justify-between rounded-t-lg bg-[--color-accordion-header] ".concat(isActive || isPreview ? "" : "rounded-b-lg", " hover: ").concat(!isLocked ? "cursor-pointer" : null, " "),
+        children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+          className: "flex items-center justify-between gap-2",
+          children: /*#__PURE__*/(0,jsx_runtime.jsx)(Text, {
+            as: "h2",
+            variant: "h2",
+            className: "text-h4 mx-4 my-2 text-[--color-text-strong]",
+            children: title
+          })
+        }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+          className: "flex items-center gap-4",
+          children: [isPill && /*#__PURE__*/(0,jsx_runtime.jsx)(Pills_Pill, {
+            text: pillText,
+            status: pillStatus,
+            icon: pillIcon
+          }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+            className: "border-0 ".concat(!isLocked && "cursor-pointer border-l-2", " border-solid border-[--color-stroke] p-4"),
+            onClick: !isLocked ? toggle : null // toggle only here
+            ,
+            children: isPreview && !isLocked ? /*#__PURE__*/(0,jsx_runtime.jsx)(esm_PencilSquareIcon, {
+              className: "h-5 w-5 text-[--color-text-strong]",
+              onClick: e => {
+                e.stopPropagation(); // prevent toggle from firing on pencil click
+                onExitPreview(); // trigger exit preview
+              }
+            }) : !isLocked ? /*#__PURE__*/(0,jsx_runtime.jsx)(esm_ChevronDownIcon, {
+              className: "h-4 w-4 transform text-[--color-text-strong] transition-transform ".concat(isActive ? "rotate-180" : "rotate-0")
+            }) : null
+          })]
+        })]
+      })
+    }, index), isActive && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      className: "accordion-body rounded-b-lg border-0 border-t-2 border-solid border-[--color-stroke] bg-[--color-accordion-body] p-3 text-[--color-text-weak]",
+      children: content
+    }), isPreview && activeIndex !== index && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      className: "accordion-body rounded-b-lg border-0 border-t-2 border-solid border-[--color-stroke] bg-[--color-accordion-body] p-3 text-[--color-text-weak]",
+      children: preview
+    })]
+  });
 };
 /* harmony default export */ const Accordions_Accordion = (Accordion);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
@@ -1215,22 +1268,22 @@ var IconContext = external_react_.createContext && /*#__PURE__*/external_react_.
 var iconBase_excluded = ["attr", "size", "title"];
 function iconBase_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = iconBase_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function iconBase_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
-function iconBase_extends() { iconBase_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return iconBase_extends.apply(this, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function iconBase_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function iconBase_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? iconBase_ownKeys(Object(t), !0).forEach(function (r) { iconBase_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : iconBase_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function iconBase_defineProperty(obj, key, value) { key = iconBase_toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function iconBase_toPropertyKey(t) { var i = iconBase_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function iconBase_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 
 
 function Tree2Element(tree) {
-  return tree && tree.map((node, i) => /*#__PURE__*/external_react_.createElement(node.tag, _objectSpread({
+  return tree && tree.map((node, i) => /*#__PURE__*/external_react_.createElement(node.tag, iconBase_objectSpread({
     key: i
   }, node.attr), Tree2Element(node.child)));
 }
 function iconBase_GenIcon(data) {
-  return props => /*#__PURE__*/external_react_.createElement(IconBase, iconBase_extends({
-    attr: _objectSpread({}, data.attr)
+  return props => /*#__PURE__*/external_react_.createElement(IconBase, _extends({
+    attr: iconBase_objectSpread({}, data.attr)
   }, props), Tree2Element(data.child));
 }
 function IconBase(props) {
@@ -1245,13 +1298,13 @@ function IconBase(props) {
     var className;
     if (conf.className) className = conf.className;
     if (props.className) className = (className ? className + " " : "") + props.className;
-    return /*#__PURE__*/external_react_.createElement("svg", iconBase_extends({
+    return /*#__PURE__*/external_react_.createElement("svg", _extends({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
     }, conf.attr, attr, svgProps, {
       className: className,
-      style: _objectSpread(_objectSpread({
+      style: iconBase_objectSpread(iconBase_objectSpread({
         color: props.color || conf.color
       }, conf.style), props.style),
       height: computedSize,
@@ -3768,6 +3821,7 @@ function AiTwotoneWarning (props) {
  // Import a spinner icon
 
 // test 2 for Husky
+
 function Button(_ref) {
   let {
     type = "button",
@@ -3811,7 +3865,7 @@ function Button(_ref) {
 
   // Main button class names
   const classNames = " \n    ".concat(state === "disabled" || isSaving ? disabledStyles : rankStyles[rank] || rankStyles.primary, "\n    group \n    transition \n    ease-in-out \n    duration-700 \n    rounded-md\n    hover:shadow-lg\n    px-5 \n    py-1.5 \n    text-").concat(size, " \n    flex \n    items-center \n    justify-center \n    whitespace-nowrap // Prevents text wrapping\n    ").concat(isFullWidth ? "w-full" : "", "\n    ").concat(className, "\n  ");
-  return /*#__PURE__*/external_react_default().createElement("button", {
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("button", {
     type: type,
     title: title,
     name: name,
@@ -3823,22 +3877,25 @@ function Button(_ref) {
       dataCy
     }),
     onClick: !isSaving && state !== "disabled" ? onClick : null,
-    disabled: isSaving || state === "disabled"
-  }, isSaving ? /*#__PURE__*/external_react_default().createElement(AiOutlineLoading3Quarters, {
-    className: iconClassNames
-  }) : iconPosition === "left" && Icon && /*#__PURE__*/external_react_default().createElement(Icon, {
-    className: iconClassNames
-  }), /*#__PURE__*/external_react_default().createElement("span", {
-    className: isSaving ? "ml-2" : ""
-  }, isSaving ? savingText : text), !isSaving && iconPosition === "right" && Icon && /*#__PURE__*/external_react_default().createElement(Icon, {
-    className: iconClassNames
-  }));
+    disabled: isSaving || state === "disabled",
+    children: [isSaving ? /*#__PURE__*/(0,jsx_runtime.jsx)(AiOutlineLoading3Quarters, {
+      className: iconClassNames
+    }) : iconPosition === "left" && Icon && /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
+      className: iconClassNames
+    }), /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
+      className: isSaving ? "ml-2" : "",
+      children: isSaving ? savingText : text
+    }), !isSaving && iconPosition === "right" && Icon && /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
+      className: iconClassNames
+    })]
+  });
 }
 ;// ./node_modules/clsx/dist/clsx.mjs
 function clsx_r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=clsx_r(e[t]))&&(n&&(n+=" "),n+=f)}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=clsx_r(e))&&(n&&(n+=" "),n+=t);return n}/* harmony default export */ const dist_clsx = (clsx);
 ;// ./src/components/Cards/Card.jsx
 
 
+
 function Card(_ref) {
   let {
     intent,
@@ -3857,9 +3914,10 @@ function Card(_ref) {
   };
   const resolvedIntent = intent || 'default';
   const cardClasses = dist_clsx('p-5', 'rounded-lg', 'shadow-lg', 'border-2 border-solid border-[--color-stroke]', intentClasses[resolvedIntent], className);
-  return /*#__PURE__*/external_react_default().createElement("div", {
-    className: cardClasses
-  }, children);
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    className: cardClasses,
+    children: children
+  });
 }
 ;// ./src/components/Forms/Inputs/Input.jsx
 function Input_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -3870,6 +3928,7 @@ function Input_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var
 
 
 
+
 const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
   let {
     label,
@@ -3903,52 +3962,59 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
   } = _ref;
   const inputClasses = "".concat(className, " flex items-center rounded-md bg-[--color-input-bg] border ").concat(isValid ? 'border-[--color-stroke]' : 'border-utilRed1000', " text-md font-normal text-[--color-text-strong] ").concat(disabled ? 'opacity-50 cursor-not-allowed' : '');
   const iconClasses = "h-5 w-5 ".concat(isAnimated ? 'transition-transform duration-200 group-focus-within:scale-125' : '', " text-[--color-text-weak]");
-  return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex flex-col mb-4"
-  }, /*#__PURE__*/external_react_default().createElement(Text, {
-    as: "label",
-    variant: "label",
-    htmlFor: name,
-    className: "mb-1 flex items-center"
-  }, label, required && /*#__PURE__*/external_react_default().createElement(Text, {
-    as: "span",
-    variant: "small",
-    className: "text-[--color-util-red] ml-1"
-  }, "*")), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "".concat(inputClasses, " relative")
-  }, Icon && iconPosition === 'left' && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "absolute left-3 flex items-center pointer-events-none"
-  }, /*#__PURE__*/external_react_default().createElement(Icon, {
-    className: iconClasses
-  })), /*#__PURE__*/external_react_default().createElement("input", {
-    id: name,
-    ref: ref,
-    className: "w-full ".concat(Icon ? iconPosition === 'left' ? 'pl-10' : 'pr-10' : '', " bg-[--color-input-bg] border-none focus:ring-0 focus:outline-none rounded-md py-2 px-3"),
-    type: type,
-    name: name,
-    placeholder: placeholder,
-    onChange: onChange,
-    value: value,
-    title: title,
-    tabIndex: tabIndex,
-    required: required,
-    disabled: disabled,
-    "data-cy": getDataCy({
-      name,
-      dataCy
-    }),
-    "aria-invalid": !isValid,
-    "aria-describedby": !isValid ? "".concat(name, "-error") : undefined
-  }), Icon && iconPosition === 'right' && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "absolute right-3 flex items-center pointer-events-none"
-  }, /*#__PURE__*/external_react_default().createElement(Icon, {
-    className: iconClasses
-  }))), !isValid && /*#__PURE__*/external_react_default().createElement(Text, {
-    as: "span",
-    variant: "small",
-    id: "".concat(name, "-error"),
-    className: "text-[--color-util-red]"
-  }, errorMessage), shouldRenderCustomComponent && customComponent && /*#__PURE__*/external_react_default().createElement(customComponent, Input_objectSpread({}, customComponentProps)));
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+    className: "flex flex-col mb-4",
+    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)(Text, {
+      as: "label",
+      variant: "label",
+      htmlFor: name,
+      className: "mb-1 flex items-center",
+      children: [label, required && /*#__PURE__*/(0,jsx_runtime.jsx)(Text, {
+        as: "span",
+        variant: "small",
+        className: "text-[--color-util-red] ml-1",
+        children: "*"
+      })]
+    }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+      className: "".concat(inputClasses, " relative"),
+      children: [Icon && iconPosition === 'left' && /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
+        className: "absolute left-3 flex items-center pointer-events-none",
+        children: /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
+          className: iconClasses
+        })
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)("input", {
+        id: name,
+        ref: ref,
+        className: "w-full ".concat(Icon ? iconPosition === 'left' ? 'pl-10' : 'pr-10' : '', " bg-[--color-input-bg] border-none focus:ring-0 focus:outline-none rounded-md py-2 px-3"),
+        type: type,
+        name: name,
+        placeholder: placeholder,
+        onChange: onChange,
+        value: value,
+        title: title,
+        tabIndex: tabIndex,
+        required: required,
+        disabled: disabled,
+        "data-cy": getDataCy({
+          name,
+          dataCy
+        }),
+        "aria-invalid": !isValid,
+        "aria-describedby": !isValid ? "".concat(name, "-error") : undefined
+      }), Icon && iconPosition === 'right' && /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
+        className: "absolute right-3 flex items-center pointer-events-none",
+        children: /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
+          className: iconClasses
+        })
+      })]
+    }), !isValid && /*#__PURE__*/(0,jsx_runtime.jsx)(Text, {
+      as: "span",
+      variant: "small",
+      id: "".concat(name, "-error"),
+      className: "text-[--color-util-red]",
+      children: errorMessage
+    }), shouldRenderCustomComponent && customComponent && /*#__PURE__*/external_react_default().createElement(customComponent, Input_objectSpread({}, customComponentProps))]
+  });
 });
 /* harmony default export */ const Inputs_Input = (Input);
 ;// ./node_modules/@heroicons/react/24/outline/esm/CalendarIcon.js
@@ -4013,6 +4079,7 @@ var datepicker_update = injectStylesIntoStyleTag_default()(datepicker/* default
 
 
 
+
 function DatePicker(_ref) {
   let {
     initialDate = '',
@@ -4073,51 +4140,57 @@ function DatePicker(_ref) {
       inputRef.current.showPicker();
     }
   };
-  return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "relative flex flex-col mb-4"
-  }, /*#__PURE__*/external_react_default().createElement(Text, {
-    as: "label",
-    variant: "label",
-    htmlFor: name,
-    className: "mb-1"
-  }, label, required && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "text-[--color-util-red] ml-1"
-  }, "*")), /*#__PURE__*/external_react_default().createElement("input", {
-    type: "date",
-    id: name,
-    name: name,
-    ref: inputRef,
-    value: selectedDate,
-    title: title,
-    onChange: handleDateChange,
-    required: required,
-    disabled: disabled,
-    "data-cy": getDataCy({
-      name,
-      dataCy
-    }),
-    "aria-invalid": !isValid,
-    "aria-describedby": !isValid ? "".concat(name, "-error") : undefined,
-    className: "w-full py-2 px-3 pr-10 rounded-md bg-[--color-input-bg] border ".concat(isValid ? 'border-[--color-stroke]' : 'border-[--color-util-red]', " text-md font-normal text-[--color-text-strong] ").concat(disabled ? 'opacity-50 cursor-not-allowed' : '', " ").concat(className)
-  }), /*#__PURE__*/external_react_default().createElement("button", {
-    type: "button",
-    onClick: handleIconClick,
-    className: "absolute top-1/2 mt-1 right-3 transform datepicker-icon-button",
-    "aria-label": "Open date picker",
-    disabled: disabled
-  }, /*#__PURE__*/external_react_default().createElement(esm_CalendarIcon, {
-    className: "w-5 h-5 ".concat(disabled ? 'text-[--color-text-disabled]' : 'text-[--color-text-weak] hover:text-[--color-primary-btn-hover]', " transition")
-  })), !isValid && /*#__PURE__*/external_react_default().createElement(Text, {
-    as: "span",
-    id: "".concat(name, "-error"),
-    variant: "small",
-    className: "text-[--color-util-red]"
-  }, errorMessage));
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+    className: "relative flex flex-col mb-4",
+    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)(Text, {
+      as: "label",
+      variant: "label",
+      htmlFor: name,
+      className: "mb-1",
+      children: [label, required && /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
+        className: "text-[--color-util-red] ml-1",
+        children: "*"
+      })]
+    }), /*#__PURE__*/(0,jsx_runtime.jsx)("input", {
+      type: "date",
+      id: name,
+      name: name,
+      ref: inputRef,
+      value: selectedDate,
+      title: title,
+      onChange: handleDateChange,
+      required: required,
+      disabled: disabled,
+      "data-cy": getDataCy({
+        name,
+        dataCy
+      }),
+      "aria-invalid": !isValid,
+      "aria-describedby": !isValid ? "".concat(name, "-error") : undefined,
+      className: "w-full py-2 px-3 pr-10 rounded-md bg-[--color-input-bg] border ".concat(isValid ? 'border-[--color-stroke]' : 'border-[--color-util-red]', " text-md font-normal text-[--color-text-strong] ").concat(disabled ? 'opacity-50 cursor-not-allowed' : '', " ").concat(className)
+    }), /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
+      type: "button",
+      onClick: handleIconClick,
+      className: "absolute top-1/2 mt-1 right-3 transform datepicker-icon-button",
+      "aria-label": "Open date picker",
+      disabled: disabled,
+      children: /*#__PURE__*/(0,jsx_runtime.jsx)(esm_CalendarIcon, {
+        className: "w-5 h-5 ".concat(disabled ? 'text-[--color-text-disabled]' : 'text-[--color-text-weak] hover:text-[--color-primary-btn-hover]', " transition")
+      })
+    }), !isValid && /*#__PURE__*/(0,jsx_runtime.jsx)(Text, {
+      as: "span",
+      id: "".concat(name, "-error"),
+      variant: "small",
+      className: "text-[--color-util-red]",
+      children: errorMessage
+    })]
+  });
 }
 ;// ./src/components/Forms/Radios/RadioButton.jsx
 
 
 
+
 const RadioButton = _ref => {
   let {
     label,
@@ -4157,48 +4230,53 @@ const RadioButton = _ref => {
     };
     onChange === null || onChange === void 0 || onChange(event);
   };
-  return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "mb-4 flex flex-col ".concat(className)
-  }, /*#__PURE__*/external_react_default().createElement(Text, {
-    as: "label",
-    variant: "label",
-    className: "mb-2 flex items-center text-[--color-text-strong]"
-  }, label, required && /*#__PURE__*/external_react_default().createElement(Text, {
-    as: "span",
-    variant: "small",
-    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 => {
-    const id = "".concat(name, "-").concat(option.value);
-    return /*#__PURE__*/external_react_default().createElement("label", {
-      key: option.value,
-      htmlFor: id,
-      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",
-      tabIndex: tabIndex,
-      title: title,
-      name: name,
-      value: option.value,
-      checked: selectedValue === option.value,
-      onChange: () => handleChange(option),
-      className: "hidden",
-      disabled: disabled,
-      "data-cy": getDataCy({
-        name,
-        value: option.value,
-        dataCy
-      }),
-      "aria-describedby": !isValid ? "".concat(name, "-error") : undefined
-    }), option.label);
-  })), !isValid && /*#__PURE__*/external_react_default().createElement(Text, {
-    as: "span",
-    variant: "small",
-    id: "".concat(name, "-error"),
-    className: "text-[--color-util-red]"
-  }, errorMessage));
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+    className: "mb-4 flex flex-col ".concat(className),
+    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)(Text, {
+      as: "label",
+      variant: "label",
+      className: "mb-2 flex items-center text-[--color-text-strong]",
+      children: [label, required && /*#__PURE__*/(0,jsx_runtime.jsx)(Text, {
+        as: "span",
+        variant: "small",
+        className: "ml-1 text-[--color-util-red]",
+        children: "*"
+      })]
+    }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      className: "flex flex-wrap gap-4 md:flex-nowrap md:gap-0 md:space-x-4",
+      children: options.map(option => {
+        const id = "".concat(name, "-").concat(option.value);
+        return /*#__PURE__*/(0,jsx_runtime.jsxs)("label", {
+          htmlFor: id,
+          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"),
+          children: [/*#__PURE__*/(0,jsx_runtime.jsx)("input", {
+            id: id,
+            type: "radio",
+            tabIndex: tabIndex,
+            title: title,
+            name: name,
+            value: option.value,
+            checked: selectedValue === option.value,
+            onChange: () => handleChange(option),
+            className: "hidden",
+            disabled: disabled,
+            "data-cy": getDataCy({
+              name,
+              value: option.value,
+              dataCy
+            }),
+            "aria-describedby": !isValid ? "".concat(name, "-error") : undefined
+          }), option.label]
+        }, option.value);
+      })
+    }), !isValid && /*#__PURE__*/(0,jsx_runtime.jsx)(Text, {
+      as: "span",
+      variant: "small",
+      id: "".concat(name, "-error"),
+      className: "text-[--color-util-red]",
+      children: errorMessage
+    })]
+  });
 };
 RadioButton.displayName = "RadioButton";
 /* harmony default export */ const Radios_RadioButton = (RadioButton);
@@ -4206,6 +4284,7 @@ RadioButton.displayName = "RadioButton";
 
 
 
+
 function Checkbox(_ref) {
   let {
     label,
@@ -4221,39 +4300,43 @@ function Checkbox(_ref) {
   const id = "checkbox-".concat(name);
   const errorId = "".concat(id, "-error");
   const showError = !isValid && errorMessage;
-  return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex flex-col mb-4"
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex items-center"
-  }, /*#__PURE__*/external_react_default().createElement("input", {
-    id: id,
-    type: "checkbox",
-    name: name,
-    checked: value,
-    onChange: onChange,
-    disabled: disabled,
-    title: title,
-    "data-cy": getDataCy({
-      name,
-      dataCy
-    }),
-    "aria-invalid": !isValid,
-    "aria-describedby": showError ? errorId : undefined,
-    "aria-disabled": disabled,
-    style: {
-      accentColor: 'var(--color-primary-btn)'
-    },
-    className: "\n            mr-2 \n            rounded-sm\n            ".concat(disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer')
-  }), /*#__PURE__*/external_react_default().createElement(Text, {
-    variant: "label",
-    as: "label",
-    htmlFor: id
-  }, label)), !isValid && errorMessage && /*#__PURE__*/external_react_default().createElement(Text, {
-    id: errorId,
-    variant: "small",
-    as: "span",
-    className: "text-[--color-util-red] mt-1"
-  }, errorMessage));
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+    className: "flex flex-col mb-4",
+    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+      className: "flex items-center",
+      children: [/*#__PURE__*/(0,jsx_runtime.jsx)("input", {
+        id: id,
+        type: "checkbox",
+        name: name,
+        checked: value,
+        onChange: onChange,
+        disabled: disabled,
+        title: title,
+        "data-cy": getDataCy({
+          name,
+          dataCy
+        }),
+        "aria-invalid": !isValid,
+        "aria-describedby": showError ? errorId : undefined,
+        "aria-disabled": disabled,
+        style: {
+          accentColor: 'var(--color-primary-btn)'
+        },
+        className: "\n            mr-2 \n            rounded-sm\n            ".concat(disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer')
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)(Text, {
+        variant: "label",
+        as: "label",
+        htmlFor: id,
+        children: label
+      })]
+    }), !isValid && errorMessage && /*#__PURE__*/(0,jsx_runtime.jsx)(Text, {
+      id: errorId,
+      variant: "small",
+      as: "span",
+      className: "text-[--color-util-red] mt-1",
+      children: 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);
@@ -4287,6 +4370,7 @@ var table_update = injectStylesIntoStyleTag_default()(table/* default */.A, tabl
 ;// ./src/components/Tables/Table.jsx
 
 
+
 function Table(_ref) {
   let {
     data = [],
@@ -4298,28 +4382,34 @@ function Table(_ref) {
     headCellClassName = '',
     rowKeyExtractor = (row, index) => index
   } = _ref;
-  return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "wrapper w-full ".concat(className)
-  }, /*#__PURE__*/external_react_default().createElement("table", {
-    className: "\r min-w-full \r table-auto \r text-left \r border-collapse \r table"
-  }, /*#__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: "\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 \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: "\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])));
-  }))));
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    className: "wrapper w-full ".concat(className),
+    children: /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
+      className: "\r min-w-full \r table-auto \r text-left \r border-collapse \r table",
+      children: [/*#__PURE__*/(0,jsx_runtime.jsx)("thead", {
+        className: "hidden sm:table-header-group",
+        children: /*#__PURE__*/(0,jsx_runtime.jsx)("tr", {
+          className: "bg-[--color-table-head-bg] ".concat(headRowClassName),
+          children: data.map(column => /*#__PURE__*/(0,jsx_runtime.jsx)("th", {
+            className: "\n                  border-b border-[--color-stroke] \n                  py-2 px-4 \n                  text-sm font-normal text-[--color-table-head-txt] ".concat(headCellClassName),
+            children: column.header
+          }, column.key))
+        })
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)("tbody", {
+        children: rows.map((row, index) => {
+          const backgroundClass = index % 2 === 0 ? 'bg-[--color-table-row-bg-even]' : 'bg-[--color-table-row-bg-odd]';
+          return /*#__PURE__*/(0,jsx_runtime.jsx)("tr", {
+            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),
+            children: data.map(column => /*#__PURE__*/(0,jsx_runtime.jsx)("td", {
+              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,
+              children: column.render ? column.render(row) : row[column.key]
+            }, column.key))
+          }, rowKeyExtractor(row, index));
+        })
+      })]
+    })
+  });
 }
 ;// ./node_modules/@react-aria/utils/dist/useLayoutEffect.mjs
 
@@ -12868,6 +12958,7 @@ const esm_ChevronDownIcon_ForwardRef = /*#__PURE__*/ external_react_.forwardRef(
 
 
 
+
 function Dropdown(_ref) {
   let {
     items = [],
@@ -12903,63 +12994,77 @@ function Dropdown(_ref) {
     };
     onChange === null || onChange === void 0 || onChange(event);
   };
-  return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex flex-col mb-4 ".concat(className)
-  }, /*#__PURE__*/external_react_default().createElement(Text, {
-    as: "label",
-    variant: "label",
-    className: "mb-1",
-    htmlFor: name
-  }, label, required && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "ml-1 text-[--color-util-red]"
-  }, "*")), /*#__PURE__*/external_react_default().createElement(lo, null, _ref2 => {
-    let {
-      open
-    } = _ref2;
-    return /*#__PURE__*/external_react_default().createElement("div", {
-      className: "relative"
-    }, /*#__PURE__*/external_react_default().createElement(ft, {
-      id: name,
-      name: name,
-      title: title,
-      "aria-invalid": !isValid,
-      "aria-describedby": !isValid ? "".concat(name, "-error") : undefined,
-      tabIndex: tabIndex,
-      disabled: disabled,
-      "data-cy": getDataCy({
-        name,
-        dataCy
-      }),
-      className: inputClasses
-    }, /*#__PURE__*/external_react_default().createElement("div", {
-      className: "flex items-center gap-2"
-    }, Icon && /*#__PURE__*/external_react_default().createElement(Icon, {
-      className: "h-5 w-5 text-[--color-text-weak]"
-    }), /*#__PURE__*/external_react_default().createElement("span", null, selectedItem ? selectedItem.label : placeholder)), /*#__PURE__*/external_react_default().createElement(solid_esm_ChevronDownIcon, {
-      "aria-hidden": "true",
-      className: "ml-3 mr-1 h-5 w-5 text-[--color-text-strong] bg-transparent transition-transform duration-200 ".concat(open ? 'rotate-180' : 'rotate-0')
-    })), !disabled && /*#__PURE__*/external_react_default().createElement(yt, {
-      className: "\r absolute \r left-0 \r z-10 \r mt-2 \r w-[100%] \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(gt, {
-      key: index
-    }, _ref3 => {
-      let {
-        active
-      } = _ref3;
-      return /*#__PURE__*/external_react_default().createElement("button", {
-        type: "button",
-        onClick: () => handleSelect(item),
-        className: "block w-full px-4 py-2 text-left text-sm text-[--color-text-strong] ".concat(active ? 'bg-[--color-input-bg]' : '')
-      }, item.label);
-    })))));
-  }), !isValid && /*#__PURE__*/external_react_default().createElement(Text, {
-    as: "span",
-    variant: "small",
-    id: "".concat(name, "-error"),
-    className: "text-[--color-util-red] mt-1"
-  }, errorMessage));
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+    className: "flex flex-col mb-4 ".concat(className),
+    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)(Text, {
+      as: "label",
+      variant: "label",
+      className: "mb-1",
+      htmlFor: name,
+      children: [label, required && /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
+        className: "ml-1 text-[--color-util-red]",
+        children: "*"
+      })]
+    }), /*#__PURE__*/(0,jsx_runtime.jsx)(lo, {
+      children: _ref2 => {
+        let {
+          open
+        } = _ref2;
+        return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+          className: "relative",
+          children: [/*#__PURE__*/(0,jsx_runtime.jsxs)(ft, {
+            id: name,
+            name: name,
+            title: title,
+            "aria-invalid": !isValid,
+            "aria-describedby": !isValid ? "".concat(name, "-error") : undefined,
+            tabIndex: tabIndex,
+            disabled: disabled,
+            "data-cy": getDataCy({
+              name,
+              dataCy
+            }),
+            className: inputClasses,
+            children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+              className: "flex items-center gap-2",
+              children: [Icon && /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
+                className: "h-5 w-5 text-[--color-text-weak]"
+              }), /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
+                children: selectedItem ? selectedItem.label : placeholder
+              })]
+            }), /*#__PURE__*/(0,jsx_runtime.jsx)(solid_esm_ChevronDownIcon, {
+              "aria-hidden": "true",
+              className: "ml-3 mr-1 h-5 w-5 text-[--color-text-strong] bg-transparent transition-transform duration-200 ".concat(open ? 'rotate-180' : 'rotate-0')
+            })]
+          }), !disabled && /*#__PURE__*/(0,jsx_runtime.jsx)(yt, {
+            className: "\r absolute \r left-0 \r z-10 \r mt-2 \r w-[100%] \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 ",
+            children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+              className: "py-1",
+              children: items.map((item, index) => /*#__PURE__*/(0,jsx_runtime.jsx)(gt, {
+                children: _ref3 => {
+                  let {
+                    active
+                  } = _ref3;
+                  return /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
+                    type: "button",
+                    onClick: () => handleSelect(item),
+                    className: "block w-full px-4 py-2 text-left text-sm text-[--color-text-strong] ".concat(active ? 'bg-[--color-input-bg]' : ''),
+                    children: item.label
+                  });
+                }
+              }, index))
+            })
+          })]
+        });
+      }
+    }), !isValid && /*#__PURE__*/(0,jsx_runtime.jsx)(Text, {
+      as: "span",
+      variant: "small",
+      id: "".concat(name, "-error"),
+      className: "text-[--color-util-red] mt-1",
+      children: 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/Navbar/navbar.scss
 var navbar = __webpack_require__(908);
@@ -13003,6 +13108,7 @@ var c247_icon_only_2x_png_default = /*#__PURE__*/__webpack_require__.n(c247_icon
 // Default logo variants
 
 
+
 const Navbar = _ref => {
   let {
     children,
@@ -13010,21 +13116,24 @@ const Navbar = _ref => {
     className = "",
     maxWidth = "1200px"
   } = _ref;
-  return /*#__PURE__*/external_react_default().createElement("nav", {
-    className: "navbar w-full bg-[--color-primary-bg] p-4 shadow-lg ".concat(className)
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "mx-auto flex w-full items-center justify-between",
-    style: {
-      maxWidth
-    }
-  }, /*#__PURE__*/external_react_default().createElement("img", {
-    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 h-10 w-auto"
-  }), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "right-content text-[--color-text-strong]"
-  }, children)));
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("nav", {
+    className: "navbar w-full bg-[--color-primary-bg] p-4 shadow-lg ".concat(className),
+    children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+      className: "mx-auto flex w-full items-center justify-between",
+      style: {
+        maxWidth
+      },
+      children: [/*#__PURE__*/(0,jsx_runtime.jsx)("img", {
+        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 h-10 w-auto"
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        className: "right-content text-[--color-text-strong]",
+        children: children
+      })]
+    })
+  });
 };
 /* harmony default export */ const Navbar_Navbar = (Navbar);
 ;// external "opus-toolkit-styles/assets/logos/c247-loader.gif"
@@ -13046,20 +13155,23 @@ function Loader(_ref) {
     customLoader,
     className = ''
   } = _ref;
-  return isLoading && /*#__PURE__*/external_react_default().createElement("div", {
-    className: "fixed inset-0 z-50 flex items-center justify-center"
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "absolute inset-0 bg-[--color-primary-bg] opacity-70"
-  }), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "relative z-10 flex flex-col items-center"
-  }, 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)));
+  return isLoading && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center",
+    children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      className: "absolute inset-0 bg-[--color-primary-bg] opacity-70"
+    }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+      className: "relative z-10 flex flex-col items-center",
+      children: [customLoader ? customLoader : /*#__PURE__*/(0,jsx_runtime.jsx)("img", {
+        src: (c247_loader_gif_default()),
+        alt: "Loading",
+        className: "h-60"
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)(Text, {
+        variant: "h4",
+        className: "mt-4 animate-pulse text-center",
+        children: loaderText
+      })]
+    })]
+  });
 }
 ;// ./node_modules/@heroicons/react/24/solid/esm/XMarkIcon.js
 
@@ -13090,6 +13202,7 @@ const XMarkIcon_ForwardRef = /*#__PURE__*/ external_react_.forwardRef(XMarkIcon)
 
 
 
+
 const Modal = _ref => {
   let {
     isOpen,
@@ -13116,39 +13229,48 @@ const Modal = _ref => {
 
   // ✅ Conditional render *after* hooks
   if (!isOpen) return null;
-  return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    role: "dialog",
-    "aria-modal": "true",
-    "aria-labelledby": "modal-title",
-    "aria-describedby": "modal-description",
-    className: "relative w-11/12 max-w-fit rounded-lg bg-[--color-primary-bg] p-6 shadow-xl ".concat(className)
-  }, isLoading && /*#__PURE__*/external_react_default().createElement("div", {
-    className: "absolute inset-0 z-10 flex flex-col items-center justify-center rounded-lg bg-[--color-primary-bg] ".concat(isLoading ? "opacity-1" : "pointer-events-none opacity-0")
-  }, /*#__PURE__*/external_react_default().createElement(Loader, {
-    isLoading: true,
-    loaderText: loaderText,
-    className: "relative z-20 h-[110px] w-[150px]"
-  })), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "relative z-0 flex justify-end pb-3"
-  }, /*#__PURE__*/external_react_default().createElement("button", {
-    onClick: onClose,
-    className: "text-[--color-text-strong] hover:cursor-pointer",
-    "aria-label": "Close modal"
-  }, /*#__PURE__*/external_react_default().createElement(esm_XMarkIcon, {
-    width: "24px",
-    className: "text-[--color-text-strong]"
-  }))), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "relative z-0 border-b border-[--color-stroke] pb-4 text-[--color-text-strong] ".concat(headerClassName)
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    id: "modal-title"
-  }, header)), /*#__PURE__*/external_react_default().createElement("div", {
-    id: "modal-description",
-    className: "relative z-0 my-4 text-[--color-text-weak]"
-  }, body), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "relative z-0 text-[--color-text-weak] ".concat(footerClassName)
-  }, footer)));
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50",
+    children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "modal-title",
+      "aria-describedby": "modal-description",
+      className: "relative w-11/12 max-w-fit rounded-lg bg-[--color-primary-bg] p-6 shadow-xl ".concat(className),
+      children: [isLoading && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        className: "absolute inset-0 z-10 flex flex-col items-center justify-center rounded-lg bg-[--color-primary-bg] ".concat(isLoading ? "opacity-1" : "pointer-events-none opacity-0"),
+        children: /*#__PURE__*/(0,jsx_runtime.jsx)(Loader, {
+          isLoading: true,
+          loaderText: loaderText,
+          className: "relative z-20 h-[110px] w-[150px]"
+        })
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        className: "relative z-0 flex justify-end pb-3",
+        children: /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
+          onClick: onClose,
+          className: "text-[--color-text-strong] hover:cursor-pointer",
+          "aria-label": "Close modal",
+          children: /*#__PURE__*/(0,jsx_runtime.jsx)(esm_XMarkIcon, {
+            width: "24px",
+            className: "text-[--color-text-strong]"
+          })
+        })
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        className: "relative z-0 border-b border-[--color-stroke] pb-4 text-[--color-text-strong] ".concat(headerClassName),
+        children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+          id: "modal-title",
+          children: header
+        })
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        id: "modal-description",
+        className: "relative z-0 my-4 text-[--color-text-weak]",
+        children: body
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        className: "relative z-0 text-[--color-text-weak] ".concat(footerClassName),
+        children: footer
+      })]
+    })
+  });
 };
 /* harmony default export */ const Modals_Modal = (Modal);
 ;// external "opus-toolkit-styles/assets/logos/footer-logo-group.png"
@@ -13163,6 +13285,7 @@ var footer_logo_group_2x_png_default = /*#__PURE__*/__webpack_require__.n(footer
 
 
 
+
 const CookieBanner = _ref => {
   let {
     logo,
@@ -13194,35 +13317,40 @@ const CookieBanner = _ref => {
     }
   }, [imageLoaded, render]);
   if (!render) return null;
-  return /*#__PURE__*/external_react_default().createElement(Card, {
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)(Card, {
     intent: intent,
-    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: "items-center md:flex"
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex-shrink-1 mr-4"
-  }, /*#__PURE__*/external_react_default().createElement("img", {
-    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)
-  })), /*#__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
-  }), /*#__PURE__*/external_react_default().createElement(Button, {
-    rank: "secondary",
-    text: linkTxt,
-    onClick: e => {
-      e.preventDefault();
-      onLearnMore();
-    }
-  })));
+    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", " "),
+    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+      className: "items-center md:flex",
+      children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        className: "flex-shrink-1 mr-4",
+        children: /*#__PURE__*/(0,jsx_runtime.jsx)("img", {
+          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)
+        })
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)("p", {
+        className: "mr-4",
+        children: policyTxt
+      })]
+    }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+      className: "flex items-center space-x-4",
+      children: [/*#__PURE__*/(0,jsx_runtime.jsx)(Button, {
+        rank: "primary",
+        text: "Accept",
+        onClick: onAccept
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)(Button, {
+        rank: "secondary",
+        text: linkTxt,
+        onClick: e => {
+          e.preventDefault();
+          onLearnMore();
+        }
+      })]
+    })]
+  });
 };
 /* harmony default export */ const Cookie = (CookieBanner);
 ;// ./src/index.js