opus-toolkit-components 1.5.3 → 1.5.5

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__) => {
 
@@ -578,6 +597,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:
@@ -1133,8 +1165,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]',
@@ -1152,11 +1187,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
@@ -1172,11 +1208,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",
@@ -1214,19 +1255,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,
@@ -1264,43 +1308,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
@@ -1584,22 +1637,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) {
@@ -1614,13 +1667,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,
@@ -4137,6 +4190,7 @@ function AiTwotoneWarning (props) {
  // Import a spinner icon
 
 // test 2 for Husky
+
 function Button(_ref) {
   let {
     type = "button",
@@ -4180,7 +4234,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,
@@ -4192,22 +4246,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,
@@ -4226,9 +4283,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; }
@@ -4239,6 +4297,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,
@@ -4272,52 +4331,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
@@ -4382,6 +4448,7 @@ var datepicker_update = injectStylesIntoStyleTag_default()(datepicker/* default
 
 
 
+
 function DatePicker(_ref) {
   let {
     initialDate = '',
@@ -4442,51 +4509,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,
@@ -4526,48 +4599,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);
@@ -4575,6 +4653,7 @@ RadioButton.displayName = "RadioButton";
 
 
 
+
 function Checkbox(_ref) {
   let {
     label,
@@ -4590,39 +4669,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);
@@ -4656,6 +4739,7 @@ var table_update = injectStylesIntoStyleTag_default()(table/* default */.A, tabl
 ;// ./src/components/Tables/Table.jsx
 
 
+
 function Table(_ref) {
   let {
     data = [],
@@ -4667,28 +4751,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
 
@@ -13237,6 +13327,7 @@ const esm_ChevronDownIcon_ForwardRef = /*#__PURE__*/ external_react_.forwardRef(
 
 
 
+
 function Dropdown(_ref) {
   let {
     items = [],
@@ -13272,63 +13363,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);
@@ -13372,6 +13477,7 @@ var c247_icon_only_2x_png_default = /*#__PURE__*/__webpack_require__.n(c247_icon
 // Default logo variants
 
 
+
 const Navbar = _ref => {
   let {
     children,
@@ -13379,21 +13485,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"
@@ -13415,20 +13524,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
 
@@ -13459,6 +13571,7 @@ const XMarkIcon_ForwardRef = /*#__PURE__*/ external_react_.forwardRef(XMarkIcon)
 
 
 
+
 const Modal = _ref => {
   let {
     isOpen,
@@ -13485,39 +13598,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"
@@ -13532,6 +13654,7 @@ var footer_logo_group_2x_png_default = /*#__PURE__*/__webpack_require__.n(footer
 
 
 
+
 const CookieBanner = _ref => {
   let {
     logo,
@@ -13563,35 +13686,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);
 ;// ./node_modules/@heroicons/react/24/outline/esm/ArrowLeftIcon.js
@@ -22178,6 +22306,11 @@ const support_icon_svg_namespaceObject = require("opus-toolkit-styles/assets/ico
 ;// external "opus-toolkit-styles/assets/icons/task-manage-icon.svg"
 const task_manage_icon_svg_namespaceObject = require("opus-toolkit-styles/assets/icons/task-manage-icon.svg");
 ;// ./src/components/Icon/index.js
+function Icon_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 Icon_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? Icon_ownKeys(Object(t), !0).forEach(function (r) { Icon_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Icon_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function Icon_defineProperty(e, r, t) { return (r = Icon_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function Icon_toPropertyKey(t) { var i = Icon_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function Icon_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); }
 // index.js
 
 
@@ -22189,16 +22322,17 @@ const task_manage_icon_svg_namespaceObject = require("opus-toolkit-styles/assets
 
 
 
-const C247Billing = props => /*#__PURE__*/React.createElement(billing_icon_svg_namespaceObject.ReactComponent, props);
-const C247Dashboard = props => /*#__PURE__*/React.createElement(dashboard_icon_svg_namespaceObject.ReactComponent, props);
-const C247Deployment = props => /*#__PURE__*/React.createElement(deployment_icon_svg_namespaceObject.ReactComponent, props);
-const C247Form = props => /*#__PURE__*/React.createElement(form_icon_svg_namespaceObject.ReactComponent, props);
-const C247Planner = props => /*#__PURE__*/React.createElement(planner_icon_svg_namespaceObject.ReactComponent, props);
-const C247Reports = props => /*#__PURE__*/React.createElement(reports_icon_svg_namespaceObject.ReactComponent, props);
-const C247Screening = props => /*#__PURE__*/React.createElement(screening_icon_svg_namespaceObject.ReactComponent, props);
-const C247Settings = props => /*#__PURE__*/React.createElement(settings_icon_svg_namespaceObject.ReactComponent, props);
-const C247Support = props => /*#__PURE__*/React.createElement(support_icon_svg_namespaceObject.ReactComponent, props);
-const C247Tasks = props => /*#__PURE__*/React.createElement(task_manage_icon_svg_namespaceObject.ReactComponent, props);
+
+const C247Billing = props => /*#__PURE__*/(0,jsx_runtime.jsx)(billing_icon_svg_namespaceObject.ReactComponent, Icon_objectSpread({}, props));
+const C247Dashboard = props => /*#__PURE__*/(0,jsx_runtime.jsx)(dashboard_icon_svg_namespaceObject.ReactComponent, Icon_objectSpread({}, props));
+const C247Deployment = props => /*#__PURE__*/(0,jsx_runtime.jsx)(deployment_icon_svg_namespaceObject.ReactComponent, Icon_objectSpread({}, props));
+const C247Form = props => /*#__PURE__*/(0,jsx_runtime.jsx)(form_icon_svg_namespaceObject.ReactComponent, Icon_objectSpread({}, props));
+const C247Planner = props => /*#__PURE__*/(0,jsx_runtime.jsx)(planner_icon_svg_namespaceObject.ReactComponent, Icon_objectSpread({}, props));
+const C247Reports = props => /*#__PURE__*/(0,jsx_runtime.jsx)(reports_icon_svg_namespaceObject.ReactComponent, Icon_objectSpread({}, props));
+const C247Screening = props => /*#__PURE__*/(0,jsx_runtime.jsx)(screening_icon_svg_namespaceObject.ReactComponent, Icon_objectSpread({}, props));
+const C247Settings = props => /*#__PURE__*/(0,jsx_runtime.jsx)(settings_icon_svg_namespaceObject.ReactComponent, Icon_objectSpread({}, props));
+const C247Support = props => /*#__PURE__*/(0,jsx_runtime.jsx)(support_icon_svg_namespaceObject.ReactComponent, Icon_objectSpread({}, props));
+const C247Tasks = props => /*#__PURE__*/(0,jsx_runtime.jsx)(task_manage_icon_svg_namespaceObject.ReactComponent, Icon_objectSpread({}, props));
 ;// ./src/components/Icon/Icon.jsx
 // Icon.jsx
 
@@ -22215,6 +22349,7 @@ const C247Tasks = props => /*#__PURE__*/React.createElement(task_manage_icon_svg
  * - className: string
  * - color: string
  */
+
 const Icon = _ref => {
   let {
     name,
@@ -22225,7 +22360,7 @@ const Icon = _ref => {
   } = _ref;
   const IconComponent = library === "hero" ? esm_namespaceObject[name] : Icon_namespaceObject[name];
   if (!IconComponent) return null;
-  return /*#__PURE__*/external_react_default().createElement(IconComponent, {
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(IconComponent, {
     className: className,
     width: size,
     height: size,
@@ -22237,11 +22372,16 @@ const Icon = _ref => {
 /* harmony default export */ const Icon_Icon = (Icon);
 ;// ./src/components/Sidebar/SidebarItem.jsx
 const SidebarItem_excluded = ["menu", "open", "active", "as", "onClick"];
-function SidebarItem_extends() { return SidebarItem_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; }, SidebarItem_extends.apply(null, arguments); }
+function SidebarItem_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 SidebarItem_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? SidebarItem_ownKeys(Object(t), !0).forEach(function (r) { SidebarItem_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : SidebarItem_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function SidebarItem_defineProperty(e, r, t) { return (r = SidebarItem_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function SidebarItem_toPropertyKey(t) { var i = SidebarItem_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function SidebarItem_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 SidebarItem_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = SidebarItem_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 SidebarItem_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; }
 
 
+
 function SidebarItem(_ref) {
   let {
       menu,
@@ -22251,25 +22391,38 @@ function SidebarItem(_ref) {
       onClick
     } = _ref,
     props = SidebarItem_objectWithoutProperties(_ref, SidebarItem_excluded);
-  return /*#__PURE__*/React.createElement(Component, SidebarItem_extends({
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)(Component, SidebarItem_objectSpread(SidebarItem_objectSpread({
     onClick: onClick,
     className: "group relative flex cursor-pointer items-center justify-between p-4 transition-all duration-500 ease-in-out ".concat(active ? "bg-[--color-primary-hover]" : "", " ")
-  }, props), /*#__PURE__*/React.createElement("div", {
-    className: "absolute left-0 top-0 h-full w-[5px] rounded-r transition-all duration-500 ease-in-out ".concat(active ? "bg-[--color-brand-primary]" : "bg-transparent group-hover:bg-[--color-brand-primary]", " ")
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "relative flex items-center gap-3"
-  }, menu.iconProps && /*#__PURE__*/React.createElement("div", {
-    className: "relative flex items-center"
-  }, /*#__PURE__*/React.createElement(Icon_Icon, menu.iconProps), !open && /*#__PURE__*/React.createElement("span", {
-    className: "absolute left-full top-1/2 ml-2 -translate-y-1/2 whitespace-nowrap rounded bg-[--color-primary-bg] px-2 py-1 text-xs text-[--color-text-strong] opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-  }, menu.name)), /*#__PURE__*/React.createElement("div", {
-    className: "overflow-hidden whitespace-nowrap transition-all duration-500 ease-in-out ".concat(open ? "ml-2 w-auto translate-y-0 opacity-100" : "ml-0 w-0 translate-y-2 opacity-0", " ")
-  }, /*#__PURE__*/React.createElement(Text, {
-    as: "span",
-    variant: "label"
-  }, menu.name))));
+  }, props), {}, {
+    children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      className: "absolute left-0 top-0 h-full w-[5px] rounded-r transition-all duration-500 ease-in-out ".concat(active ? "bg-[--color-brand-primary]" : "bg-transparent group-hover:bg-[--color-brand-primary]", " ")
+    }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+      className: "relative flex items-center gap-3",
+      children: [menu.iconProps && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+        className: "relative flex items-center",
+        children: [/*#__PURE__*/(0,jsx_runtime.jsx)(Icon_Icon, SidebarItem_objectSpread({}, menu.iconProps)), !open && /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
+          className: "absolute left-full top-1/2 ml-2 -translate-y-1/2 whitespace-nowrap rounded bg-[--color-primary-bg] px-2 py-1 text-xs text-[--color-text-strong] opacity-0 transition-opacity duration-300 group-hover:opacity-100",
+          children: menu.name
+        })]
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        className: "overflow-hidden whitespace-nowrap transition-all duration-500 ease-in-out ".concat(open ? "ml-2 w-auto translate-y-0 opacity-100" : "ml-0 w-0 translate-y-2 opacity-0", " "),
+        children: /*#__PURE__*/(0,jsx_runtime.jsx)(Text, {
+          as: "span",
+          variant: "label",
+          children: menu.name
+        })
+      })]
+    })]
+  }));
 }
 ;// ./src/components/Sidebar/SidebarGroup.jsx
+function SidebarGroup_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 SidebarGroup_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? SidebarGroup_ownKeys(Object(t), !0).forEach(function (r) { SidebarGroup_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : SidebarGroup_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function SidebarGroup_defineProperty(e, r, t) { return (r = SidebarGroup_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function SidebarGroup_toPropertyKey(t) { var i = SidebarGroup_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function SidebarGroup_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); }
+
 
 
 
@@ -22284,41 +22437,53 @@ function SidebarGroup(_ref) {
     toggleSidebar
   } = _ref;
   const [expanded, setExpanded] = (0,external_react_.useState)(false);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "group relative flex cursor-pointer items-center justify-between p-4 transition-all duration-500 ease-in-out",
-    onClick: () => {
-      if (!open) toggleSidebar(true);
-      setExpanded(!expanded);
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "absolute left-0 top-0 h-full w-[5px] rounded-r transition-all duration-300 ease-in-out ".concat(expanded || activeItem === menu.key ? "bg-[--color-brand-primary]" : "bg-[--color-stroke] group-hover:bg-[--color-brand-primary]", " ")
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-3"
-  }, menu.iconProps && /*#__PURE__*/React.createElement(Icon_Icon, menu.iconProps), !open && /*#__PURE__*/React.createElement("span", {
-    className: "absolute left-full top-1/2 ml-2 -translate-y-1/2 whitespace-nowrap rounded bg-[--color-primary-bg] px-2 py-1 text-xs text-[--color-text-strong] opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-  }, menu.name), /*#__PURE__*/React.createElement("div", {
-    className: "overflow-hidden whitespace-nowrap transition-all duration-500 ease-in-out ".concat(open ? "ml-2 w-auto translate-y-0 opacity-100" : "ml-0 w-0 translate-y-2 opacity-0", " ")
-  }, /*#__PURE__*/React.createElement(Text, {
-    as: "span",
-    variant: "label"
-  }, menu.name))), open && /*#__PURE__*/React.createElement(esm_ChevronDownIcon, {
-    className: "h-4 w-4 transition-transform duration-300 ".concat(expanded ? "rotate-180" : "")
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "ml-10 mt-1 overflow-hidden transition-all duration-300 ease-in-out ".concat(expanded && open ? "max-h-96 opacity-100" : "max-h-0 opacity-0")
-  }, menu.children.map(child => /*#__PURE__*/React.createElement(SidebarItem, {
-    key: child.id || child.name,
-    menu: child,
-    open: open,
-    active: activeItem === child.key,
-    onClick: () => onItemClick(child.key)
-  }))));
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+      className: "group relative flex cursor-pointer items-center justify-between p-4 transition-all duration-500 ease-in-out",
+      onClick: () => {
+        if (!open) toggleSidebar(true);
+        setExpanded(!expanded);
+      },
+      children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        className: "absolute left-0 top-0 h-full w-[5px] rounded-r transition-all duration-300 ease-in-out ".concat(expanded || activeItem === menu.key ? "bg-[--color-brand-primary]" : "bg-[--color-stroke] group-hover:bg-[--color-brand-primary]", " ")
+      }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+        className: "flex items-center gap-3",
+        children: [menu.iconProps && /*#__PURE__*/(0,jsx_runtime.jsx)(Icon_Icon, SidebarGroup_objectSpread({}, menu.iconProps)), !open && /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
+          className: "absolute left-full top-1/2 ml-2 -translate-y-1/2 whitespace-nowrap rounded bg-[--color-primary-bg] px-2 py-1 text-xs text-[--color-text-strong] opacity-0 transition-opacity duration-300 group-hover:opacity-100",
+          children: menu.name
+        }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+          className: "overflow-hidden whitespace-nowrap transition-all duration-500 ease-in-out ".concat(open ? "ml-2 w-auto translate-y-0 opacity-100" : "ml-0 w-0 translate-y-2 opacity-0", " "),
+          children: /*#__PURE__*/(0,jsx_runtime.jsx)(Text, {
+            as: "span",
+            variant: "label",
+            children: menu.name
+          })
+        })]
+      }), open && /*#__PURE__*/(0,jsx_runtime.jsx)(esm_ChevronDownIcon, {
+        className: "h-4 w-4 transition-transform duration-300 ".concat(expanded ? "rotate-180" : "")
+      })]
+    }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      className: "ml-10 mt-1 overflow-hidden transition-all duration-300 ease-in-out ".concat(expanded && open ? "max-h-96 opacity-100" : "max-h-0 opacity-0"),
+      children: menu.children.map(child => /*#__PURE__*/(0,jsx_runtime.jsx)(SidebarItem, {
+        menu: child,
+        open: open,
+        active: activeItem === child.key,
+        onClick: () => onItemClick(child.key)
+      }, child.id || child.name))
+    })]
+  });
 }
 ;// ./src/components/Link/Link.jsx
 const Link_excluded = ["href", "children", "className", "newTab"];
-function Link_extends() { return Link_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; }, Link_extends.apply(null, arguments); }
+function Link_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 Link_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? Link_ownKeys(Object(t), !0).forEach(function (r) { Link_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Link_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function Link_defineProperty(e, r, t) { return (r = Link_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function Link_toPropertyKey(t) { var i = Link_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function Link_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 Link_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = Link_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 Link_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; }
 
+
 function Link(_ref) {
   let {
       href,
@@ -22328,57 +22493,67 @@ function Link(_ref) {
     } = _ref,
     props = Link_objectWithoutProperties(_ref, Link_excluded);
   const isExternal = href.startsWith("http");
-  return /*#__PURE__*/React.createElement("a", Link_extends({
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("a", Link_objectSpread(Link_objectSpread({
     href: href,
     target: newTab || isExternal ? "_blank" : undefined,
     rel: newTab || isExternal ? "noopener noreferrer" : undefined,
     className: dist_clsx("text-[--color-text-strong] hover:underline", className)
-  }, props), children);
+  }, props), {}, {
+    children: children
+  }));
 }
 ;// ./src/components/Profile/ProfileCard/ProfileCard.jsx
 
 
 
+
 function ProfileCard(_ref) {
   let {
     user,
     href
   } = _ref;
   const Wrapper = href ? Link : "div";
-  return /*#__PURE__*/React.createElement(Wrapper, {
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)(Wrapper, {
     href: href,
     className: "flex transition-all items-center rounded-lg border-2 border-[--color-stroke] px-4 py-2 ".concat(href ? "cursor-pointer hover:bg-[--color-primary-bg-hover] hover:border-[--color-primary]" : "", " "),
-    "data-cy": "profileCard"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
-    variant: "body",
-    as: "p"
-  }, user.name), /*#__PURE__*/React.createElement(Text, {
-    variant: "caption",
-    as: "p"
-  }, user.role)), /*#__PURE__*/React.createElement(esm_IdentificationIcon, {
-    className: "ml-4 h-6 w-6 text-gray-500"
-  }));
+    "data-cy": "profileCard",
+    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+      children: [/*#__PURE__*/(0,jsx_runtime.jsx)(Text, {
+        variant: "body",
+        as: "p",
+        children: user.name
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)(Text, {
+        variant: "caption",
+        as: "p",
+        children: user.role
+      })]
+    }), /*#__PURE__*/(0,jsx_runtime.jsx)(esm_IdentificationIcon, {
+      className: "ml-4 h-6 w-6 text-gray-500"
+    })]
+  });
 }
 ;// ./src/components/Sidebar/SidebarProfile.jsx
 
+
 function SidebarProfile(_ref) {
   let {
     user,
     open,
     href
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "mt-auto flex items-center gap-3 p-2 pb-4"
-  }, /*#__PURE__*/React.createElement("img", {
-    src: user.avatar,
-    alt: "profile",
-    className: "h-8 w-8 rounded-full"
-  }), open && /*#__PURE__*/React.createElement(ProfileCard, {
-    user: user,
-    href: href // ← Passed down cleanly
-    ,
-    variant: "sidebar"
-  }));
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+    className: "mt-auto flex items-center gap-3 p-2 pb-4",
+    children: [/*#__PURE__*/(0,jsx_runtime.jsx)("img", {
+      src: user.avatar,
+      alt: "profile",
+      className: "h-8 w-8 rounded-full"
+    }), open && /*#__PURE__*/(0,jsx_runtime.jsx)(ProfileCard, {
+      user: user,
+      href: href // ← Passed down cleanly
+      ,
+      variant: "sidebar"
+    })]
+  });
 }
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/Sidebar/sidebar.scss
 var sidebar = __webpack_require__(126);
@@ -22419,6 +22594,7 @@ var sidebar_update = injectStylesIntoStyleTag_default()(sidebar/* default */.A,
 
 
 
+
 function Sidebar(_ref) {
   let {
     menus,
@@ -22430,70 +22606,80 @@ function Sidebar(_ref) {
     onSearchChange
   } = _ref;
   const [open, setOpen] = (0,external_react_.useState)(false);
-  return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex"
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: " ".concat(open ? "w-[20rem]" : "w-[3rem]", " transition-width flex min-h-screen flex-col rounded bg-[--color-primary-bg] text-[--color-text-strong] duration-300 ease-in-out")
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex items-center justify-between p-3 pr-0"
-  }, /*#__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: "C247 Logo",
-    className: "sidebar-logo w-75 object-contain"
-  }), /*#__PURE__*/external_react_default().createElement("button", {
-    className: "rounded-l-lg bg-[--color-primary-btn] p-2 transition-all duration-400 ease-in-out hover:bg-[--color-primary-btn-hover] focus:outline-none ".concat(open ? "translate-x-0 opacity-100" : "translate-x-4 opacity-0", " "),
-    onClick: () => setOpen(!open)
-  }, /*#__PURE__*/external_react_default().createElement(esm_ArrowLeftIcon, {
-    className: "h-5 w-5 text-[--color-white]"
-  }))), !open && /*#__PURE__*/external_react_default().createElement("button", {
-    className: "p-3 transition-all duration-700 ease-in-out focus:outline-none",
-    onClick: () => setOpen(!open)
-  }, /*#__PURE__*/external_react_default().createElement(esm_Bars3Icon, {
-    className: "h-6 w-6 text-[--color-text-strong] hover:text-[--color-primary-hover]"
-  })), /*#__PURE__*/external_react_default().createElement("nav", {
-    className: "mt-2 flex-1 space-y-1"
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "border-b-solid border-b-2 border-[--color-stroke] px-3 pb-2"
-  }, open ? /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex items-center gap-3 rounded bg-[--color-primary-bg-hover]"
-  }, /*#__PURE__*/external_react_default().createElement(esm_MagnifyingGlassIcon, {
-    className: "mb-2 h-6 w-6 text-[--color-text-strong]"
-  }), /*#__PURE__*/external_react_default().createElement(Inputs_Input, {
-    type: "text",
-    placeholder: "Search\u2026",
-    className: "mb-0",
-    value: searchValue,
-    onChange: e => onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(e.target.value)
-  })) : /*#__PURE__*/external_react_default().createElement("button", {
-    className: "transition-all duration-700 ease-in-out focus:outline-none",
-    onClick: () => setOpen(true)
-  }, /*#__PURE__*/external_react_default().createElement(esm_MagnifyingGlassIcon, {
-    className: "h-6 w-6 text-[--color-text-strong] hover:text-[--color-primary-hover]"
-  }))), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "menu-item-container"
-  }, menus.map(menu => menu.children ? /*#__PURE__*/external_react_default().createElement(SidebarGroup, {
-    key: menu.id || menu.name,
-    menu: menu,
-    open: open,
-    activeItem: activeItem,
-    onItemClick: onItemClick,
-    toggleSidebar: setOpen
-  }) : /*#__PURE__*/external_react_default().createElement(SidebarItem, {
-    key: menu.id || menu.name,
-    menu: menu,
-    open: open,
-    active: activeItem === menu.key,
-    onClick: () => onItemClick(menu.key)
-  })))), /*#__PURE__*/external_react_default().createElement(SidebarProfile, {
-    user: user,
-    open: open,
-    href: "/users/".concat(user.id)
-  })), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex-1 p-6"
-  }, /*#__PURE__*/external_react_default().createElement("h1", {
-    className: "text-2xl font-bold text-[--color-text-strong]"
-  }, "Dashboard Content")));
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+    className: "flex",
+    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+      className: " ".concat(open ? "w-[20rem]" : "w-[3rem]", " transition-width flex min-h-screen flex-col rounded bg-[--color-primary-bg] text-[--color-text-strong] duration-300 ease-in-out"),
+      children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+        className: "flex items-center justify-between p-3 pr-0",
+        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: "C247 Logo",
+          className: "sidebar-logo w-75 object-contain"
+        }), /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
+          className: "rounded-l-lg bg-[--color-primary-btn] p-2 transition-all duration-400 ease-in-out hover:bg-[--color-primary-btn-hover] focus:outline-none ".concat(open ? "translate-x-0 opacity-100" : "translate-x-4 opacity-0", " "),
+          onClick: () => setOpen(!open),
+          children: /*#__PURE__*/(0,jsx_runtime.jsx)(esm_ArrowLeftIcon, {
+            className: "h-5 w-5 text-[--color-white]"
+          })
+        })]
+      }), !open && /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
+        className: "p-3 transition-all duration-700 ease-in-out focus:outline-none",
+        onClick: () => setOpen(!open),
+        children: /*#__PURE__*/(0,jsx_runtime.jsx)(esm_Bars3Icon, {
+          className: "h-6 w-6 text-[--color-text-strong] hover:text-[--color-primary-hover]"
+        })
+      }), /*#__PURE__*/(0,jsx_runtime.jsxs)("nav", {
+        className: "mt-2 flex-1 space-y-1",
+        children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+          className: "border-b-solid border-b-2 border-[--color-stroke] px-3 pb-2",
+          children: open ? /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+            className: "flex items-center gap-3 rounded bg-[--color-primary-bg-hover]",
+            children: [/*#__PURE__*/(0,jsx_runtime.jsx)(esm_MagnifyingGlassIcon, {
+              className: "mb-2 h-6 w-6 text-[--color-text-strong]"
+            }), /*#__PURE__*/(0,jsx_runtime.jsx)(Inputs_Input, {
+              type: "text",
+              placeholder: "Search\u2026",
+              className: "mb-0",
+              value: searchValue,
+              onChange: e => onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(e.target.value)
+            })]
+          }) : /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
+            className: "transition-all duration-700 ease-in-out focus:outline-none",
+            onClick: () => setOpen(true),
+            children: /*#__PURE__*/(0,jsx_runtime.jsx)(esm_MagnifyingGlassIcon, {
+              className: "h-6 w-6 text-[--color-text-strong] hover:text-[--color-primary-hover]"
+            })
+          })
+        }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+          className: "menu-item-container",
+          children: menus.map(menu => menu.children ? /*#__PURE__*/(0,jsx_runtime.jsx)(SidebarGroup, {
+            menu: menu,
+            open: open,
+            activeItem: activeItem,
+            onItemClick: onItemClick,
+            toggleSidebar: setOpen
+          }, menu.id || menu.name) : /*#__PURE__*/(0,jsx_runtime.jsx)(SidebarItem, {
+            menu: menu,
+            open: open,
+            active: activeItem === menu.key,
+            onClick: () => onItemClick(menu.key)
+          }, menu.id || menu.name))
+        })]
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)(SidebarProfile, {
+        user: user,
+        open: open,
+        href: "/users/".concat(user.id)
+      })]
+    }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      className: "flex-1 p-6",
+      children: /*#__PURE__*/(0,jsx_runtime.jsx)("h1", {
+        className: "text-2xl font-bold text-[--color-text-strong]",
+        children: "Dashboard Content"
+      })
+    })]
+  });
 }
 ;// ./src/index.js