opus-toolkit-components 1.2.5 → 1.2.7

package/lib/opus-components.main.js

@@ -801,7 +801,8 @@ const Accordion = _ref => {
     index,
     isPreview,
     onExitPreview = () => {},
-    children,
+    content,
+    preview,
     isPill = false,
     pillText,
     pillStatus,
@@ -859,9 +860,9 @@ const Accordion = _ref => {
     className: "w-4 h-4 text-[--color-text-strong] transition-transform transform ".concat(isActive ? 'rotate-180' : 'rotate-0')
   }))))), isActive && /*#__PURE__*/external_react_default().createElement("div", {
     className: "accordion-body rounded-b-lg text-[--color-text-weak] bg-[--color-accordion-body] border-0 border-t-2 border-solid border-[--color-stroke] p-3"
-  }, children.content), isPreview && activeIndex !== index && /*#__PURE__*/external_react_default().createElement("div", {
+  }, content), isPreview && activeIndex !== index && /*#__PURE__*/external_react_default().createElement("div", {
     className: "accordion-body rounded-b-lg bg-[--color-accordion-body] text-[--color-text-weak] border-0 border-t-2 border-solid border-[--color-stroke] p-3"
-  }, children.preview));
+  }, preview));
 };
 /* harmony default export */ const Accordions_Accordion = (Accordion);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
@@ -3737,11 +3738,11 @@ function Button(_ref) {
   } = _ref;
   // Define styles for button ranks
   const rankStyles = {
-    primary: 'bg-[--color-primary-btn] hover:bg-[--color-primary-btn-hover] text-[--color-primary-btn-txt]',
+    primary: 'bg-[--color-primary-btn] hover:bg-[--color-primary-btn-hover] text-[--color-primary-btn-txt] border-solid border-2 border-[--color-primary-btn] hover:border-[--color-primary-btn-hover]',
     secondary: 'bg-transparent border-2 border-[--color-primary-btn] hover:border-[--color-secondary-btn-hover] hover:text-[--color-secondary-btn-hover] text-[--color-primary-btn]',
     tertiary: 'bg-transparent underline text-[--color-text-strong]',
     outline: 'bg-[--color-input-bg] border-solid border-2 border-[--color-outline-btn] hover:border-[--color-outline-btn-hover] text-[--color-text-strong]',
-    destructive: 'bg-[--color-destructive-btn] hover:bg-[--color-destructive-btn-hover] text-[--color-destructive-btn-txt]'
+    destructive: 'bg-[--color-destructive-btn] hover:bg-[--color-destructive-btn-hover] text-[--color-destructive-btn-txt] border-solid border-2 border-[--color-destructive-btn] hover:border-[--color-destructive-btn-hover]'
   };
 
   // Disabled styles for button
@@ -3801,6 +3802,57 @@ function Card(_ref) {
     className: cardClasses
   }, children);
 }
+;// ./src/components/Text/Text.jsx
+const Text_excluded = ["variant", "as", "className", "children", "name", "dataCy"];
+function Text_extends() { return Text_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; }, Text_extends.apply(null, arguments); }
+function Text_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = Text_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 Text_objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+
+
+const variantMap = {
+  h1: 'text-4xl font-bold leading-tight text-[--color-text-strong]',
+  h2: 'text-3xl font-semibold leading-snug text-[--color-text-strong]',
+  h3: 'text-2xl font-semibold leading-snug text-[--color-text-strong]',
+  h4: 'text-xl font-medium text-[--color-text-strong]',
+  h5: 'text-lg font-medium text-[--color-text-strong]',
+  h6: 'text-base font-medium text-[--color-text-strong]',
+  body: 'text-base text-[--color-text-strong]',
+  small: 'text-sm text-[--color-text-strong]',
+  caption: 'text-xs text-[--color-text-strong]',
+  label: 'text-sm font-medium text-[--color-text-weak]'
+};
+const elementMap = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  body: 'p',
+  small: 'small',
+  caption: 'span',
+  label: 'label'
+};
+function Text(_ref) {
+  let {
+      variant = 'body',
+      as,
+      className = '',
+      children,
+      name,
+      dataCy
+    } = _ref,
+    rest = Text_objectWithoutProperties(_ref, Text_excluded);
+  const Component = as || elementMap[variant] || 'p';
+  const variantClass = variantMap[variant] || variantMap.body;
+  return /*#__PURE__*/external_react_default().createElement(Component, Text_extends({
+    className: "".concat(variantClass, " ").concat(className),
+    "data-cy": getDataCy({
+      name,
+      dataCy
+    })
+  }, rest), 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; }
 function Input_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? Input_ownKeys(Object(t), !0).forEach(function (r) { Input_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Input_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -3809,6 +3861,7 @@ function Input_toPropertyKey(t) { var i = Input_toPrimitive(t, "string"); return
 function Input_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); }
 
 
+
 const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
   let {
     label,
@@ -3844,10 +3897,15 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
   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("label", {
-    className: "text-[--color-text-weak] mb-1 flex items-center"
-  }, label, required && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "text-utilRed1000 ml-1"
+  }, /*#__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", {
@@ -3855,6 +3913,7 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
   }, /*#__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,
@@ -3864,19 +3923,23 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
     value: value,
     title: title,
     tabIndex: tabIndex,
-    "aria-label": title,
     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("span", {
-    className: "text-utilRed1000 text-sm"
+  }))), !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)));
 });
 /* harmony default export */ const Inputs_Input = (Input);
@@ -3941,6 +4004,7 @@ var datepicker_update = injectStylesIntoStyleTag_default()(datepicker/* default
 
 
 
+
 function DatePicker(_ref) {
   let {
     initialDate = '',
@@ -4003,11 +4067,13 @@ function DatePicker(_ref) {
   };
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "relative flex flex-col mb-4"
-  }, /*#__PURE__*/external_react_default().createElement("label", {
+  }, /*#__PURE__*/external_react_default().createElement(Text, {
+    as: "label",
+    variant: "label",
     htmlFor: name,
-    className: "text-[--color-text-weak] mb-1"
+    className: "mb-1"
   }, label, required && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "text-utilRed1000 ml-1"
+    className: "text-[--color-util-red] ml-1"
   }, "*")), /*#__PURE__*/external_react_default().createElement("input", {
     type: "date",
     id: name,
@@ -4015,7 +4081,6 @@ function DatePicker(_ref) {
     ref: inputRef,
     value: selectedDate,
     title: title,
-    "aria-label": title,
     onChange: handleDateChange,
     required: required,
     disabled: disabled,
@@ -4023,7 +4088,9 @@ function DatePicker(_ref) {
       name,
       dataCy
     }),
-    className: "w-full py-2 px-3 pr-10 rounded-md bg-[--color-input-bg] border ".concat(isValid ? 'border-[--color-stroke]' : 'border-utilRed1000', " text-md font-normal text-[--color-text-weak] ").concat(disabled ? 'opacity-50 cursor-not-allowed' : '', " ").concat(className)
+    "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-weak] ").concat(disabled ? 'opacity-50 cursor-not-allowed' : '', " ").concat(className)
   }), /*#__PURE__*/external_react_default().createElement("button", {
     type: "button",
     onClick: handleIconClick,
@@ -4032,13 +4099,17 @@ function DatePicker(_ref) {
     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("span", {
-    className: "text-utilRed1000 text-sm"
+  })), !isValid && /*#__PURE__*/external_react_default().createElement(Text, {
+    as: "span",
+    id: "".concat(name, "-error"),
+    variant: "small",
+    className: "text-[--color-util-red]"
   }, errorMessage));
 }
 ;// ./src/components/Forms/Radios/RadioButton.js
 
 
+
 const RadioButton = _ref => {
   let {
     label,
@@ -4072,43 +4143,54 @@ const RadioButton = _ref => {
     if (disabled) return;
     const event = {
       target: {
-        name: name,
+        name,
         value: item.value
       }
     };
-    if (onChange) {
-      onChange(event);
-    }
+    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("label", {
+  }, /*#__PURE__*/external_react_default().createElement(Text, {
+    as: "label",
+    variant: "label",
     className: "text-[--color-text-strong] mb-2 flex items-center"
-  }, label, required && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "text-utilRed1000 ml-1"
+  }, 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: "flex space-x-4"
-  }, options.map(option => /*#__PURE__*/external_react_default().createElement("label", {
-    key: option.value,
-    className: "py-2 px-4 border rounded-lg transition duration-200 flex items-center ".concat(selectedValue === option.value ? 'bg-[--color-primary-btn] text-[--color-white] border-[--color-stroke]' : "bg-[--color-input-bg] text-[--color-text-strong] ".concat(!isValid && selectedValue === '' ? 'border-utilRed1000' : 'border-[--color-stroke]'), " ").concat(disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer')
-  }, /*#__PURE__*/external_react_default().createElement("input", {
-    type: "radio",
-    tabIndex: tabIndex,
-    title: title,
-    "aria-label": title,
-    name: name,
-    value: option.value,
-    checked: selectedValue === option.value,
-    onChange: () => handleChange(option),
-    className: "hidden",
-    disabled: disabled,
-    "data-cy": getDataCy({
-      name,
+    className: "flex space-x-4 flex-wrap"
+  }, options.map(option => {
+    const id = "".concat(name, "-").concat(option.value);
+    return /*#__PURE__*/external_react_default().createElement("label", {
+      key: option.value,
+      htmlFor: id,
+      className: "py-2 px-4 border rounded-lg transition duration-200 flex items-center ".concat(selectedValue === option.value ? 'bg-[--color-primary-btn] text-[--color-white] border-[--color-stroke]' : "bg-[--color-input-bg] text-[--color-text-strong] ".concat(!isValid && selectedValue === '' ? 'border-[--color-util-red]' : 'border-[--color-stroke]'), " ").concat(disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer')
+    }, /*#__PURE__*/external_react_default().createElement("input", {
+      id: id,
+      type: "radio",
+      tabIndex: tabIndex,
+      title: title,
+      name: name,
       value: option.value,
-      dataCy
-    })
-  }), option.label))), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "text-utilRed1000 text-sm mt-1"
+      checked: selectedValue === option.value,
+      onChange: () => handleChange(option),
+      className: "hidden",
+      disabled: disabled,
+      "data-cy": getDataCy({
+        name,
+        value: option.value,
+        dataCy
+      }),
+      "aria-invalid": !isValid,
+      "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] mt-1"
   }, errorMessage));
 };
 RadioButton.displayName = 'RadioButton';
@@ -4116,6 +4198,7 @@ RadioButton.displayName = 'RadioButton';
 ;// ./src/components/Forms/Checkbox/Checkbox.jsx
 
 
+
 function Checkbox(_ref) {
   let {
     label,
@@ -4123,15 +4206,18 @@ function Checkbox(_ref) {
     onChange,
     value = false,
     isValid = true,
-    errorMessage = "",
+    errorMessage = '',
     disabled = false,
     dataCy
   } = _ref;
+  const id = "checkbox-".concat(name);
+  const errorId = "".concat(id, "-error");
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex flex-col mb-4"
-  }, /*#__PURE__*/external_react_default().createElement("label", {
-    className: "flex items-center text-[--color-text-weak]"
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: "flex items-center"
   }, /*#__PURE__*/external_react_default().createElement("input", {
+    id: id,
     type: "checkbox",
     name: name,
     checked: value,
@@ -4141,9 +4227,22 @@ function Checkbox(_ref) {
       name,
       dataCy
     }),
-    className: "mr-2 ".concat(disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer')
-  }), label), !isValid && errorMessage && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "text-rose-500 text-sm mt-1"
+    "aria-invalid": !isValid,
+    "aria-describedby": !isValid && errorMessage ? 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));
 }
 // 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
@@ -12717,9 +12816,10 @@ const esm_ChevronDownIcon_ForwardRef = /*#__PURE__*/ external_react_.forwardRef(
 
 
 
+
 function Dropdown(_ref) {
   let {
-    items,
+    items = [],
     label = 'Test Label',
     isValid = true,
     required = false,
@@ -12733,15 +12833,14 @@ function Dropdown(_ref) {
     Icon,
     errorMessage = 'This field is required',
     disabled = false,
-    dataCy // optional override
+    dataCy
   } = _ref;
   const [selectedItem, setSelectedItem] = (0,external_react_.useState)(null);
-  const [isOpen, setIsOpen] = (0,external_react_.useState)(false);
   (0,external_react_.useEffect)(() => {
     const newSelectedItem = items.find(item => item.value === value) || null;
     setSelectedItem(newSelectedItem);
   }, [value, items]);
-  const inputClasses = "inline-flex w-full justify-between items-center rounded-md bg-[--color-input-bg] text-md font-normal border p-2 text-[--color-text-weak] ".concat(isValid ? 'border-[--color-stroke]' : 'border-utilRed1000', " ").concat(disabled ? 'opacity-50 cursor-not-allowed' : '', " ").concat(className);
+  const inputClasses = "inline-flex w-full justify-between items-center rounded-md bg-[--color-input-bg] text-md font-normal border p-2 text-[--color-text-weak] ".concat(isValid ? 'border-[--color-stroke]' : 'border-utilRed1000', " ").concat(disabled ? 'opacity-50 cursor-not-allowed' : '');
   const handleSelect = item => {
     if (disabled) return;
     setSelectedItem(item);
@@ -12751,53 +12850,64 @@ function Dropdown(_ref) {
         value: item.value
       }
     };
-    onChange(event);
+    onChange === null || onChange === void 0 || onChange(event);
   };
-  return /*#__PURE__*/external_react_default().createElement(lo, {
-    as: "div",
-    className: "".concat(className, " relative inline-block text-left"),
-    name: name,
-    title: title,
-    "aria-label": title,
-    tabIndex: tabIndex,
-    "data-cy": getDataCy({
-      name,
-      dataCy
-    })
-  }, /*#__PURE__*/external_react_default().createElement("label", {
-    className: "flex items-center text-[--color-text-weak] mb-1"
+  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-utilRed1000"
-  }, "*")), /*#__PURE__*/external_react_default().createElement("div", null, /*#__PURE__*/external_react_default().createElement(yt, {
-    className: inputClasses,
-    onClick: () => !disabled && setIsOpen(prev => !prev),
-    disabled: disabled
-  }, /*#__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: "-mr-1 h-5 w-5 text-[--color-text-weak] transition-transform duration-200 ".concat(isOpen ? 'rotate-180' : 'rotate-0')
-  }))), !disabled && /*#__PURE__*/external_react_default().createElement(Pt, {
-    transition: true,
-    className: " absolute  right-0  z-10  mt-2  w-56  origin-top-right  rounded-md bg-[--color-primary-bg]  shadow-lg  ring-1  ring-[--color-stroke]  ring-opacity-1  transition  focus:outline-none  max-h-48  overflow-y-auto ",
-    onClick: () => setIsOpen(false)
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "py-1"
-  }, items.map((item, index) => /*#__PURE__*/external_react_default().createElement(Et, {
-    key: index
-  }, _ref2 => {
+    className: "ml-1 text-[--color-util-red]"
+  }, "*")), /*#__PURE__*/external_react_default().createElement(lo, null, _ref2 => {
     let {
-      active
+      open
     } = _ref2;
-    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-weak] ".concat(active ? 'bg-[--color-input-bg] text-[--color-text-weak]' : '', " hover:bg-[--color-input-bg]")
-    }, item.label);
-  })))), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "text-utilRed1000 text-sm"
+    return /*#__PURE__*/external_react_default().createElement("div", {
+      className: "relative"
+    }, /*#__PURE__*/external_react_default().createElement(yt, {
+      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: "-mr-1 h-5 w-5 text-[--color-text-weak] transition-transform duration-200 ".concat(open ? 'rotate-180' : 'rotate-0')
+    })), !disabled && /*#__PURE__*/external_react_default().createElement(Pt, {
+      className: " absolute  right-0  z-10  mt-2  w-56  origin-top-right  rounded-md  bg-[--color-primary-bg]  shadow-lg  ring-1  ring-[--color-stroke]  ring-opacity-1  focus:outline-none  max-h-48  overflow-y-auto "
+    }, /*#__PURE__*/external_react_default().createElement("div", {
+      className: "py-1"
+    }, items.map((item, index) => /*#__PURE__*/external_react_default().createElement(Et, {
+      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-weak] ".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));
 }
 // 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
@@ -12883,6 +12993,7 @@ const XMarkIcon_ForwardRef = /*#__PURE__*/ external_react_.forwardRef(XMarkIcon)
 ;// ./src/components/Modals/Modal.js
 
 
+
 const Modal = _ref => {
   let {
     isOpen,
@@ -12890,27 +13001,47 @@ const Modal = _ref => {
     header,
     body,
     footer,
-    className = "",
-    footerClassName = "",
-    headerClassName = ""
+    className = '',
+    footerClassName = '',
+    headerClassName = ''
   } = _ref;
-  if (!isOpen) return true;
+  // ✅ Hook must be called unconditionally
+  (0,external_react_.useEffect)(() => {
+    const handleEscape = e => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose === null || onClose === void 0 || onClose();
+      }
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  // ✅ Conditional render *after* hooks
+  if (!isOpen) return null;
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
   }, /*#__PURE__*/external_react_default().createElement("div", {
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": "modal-title",
+    "aria-describedby": "modal-description",
     className: "bg-[--color-primary-bg] rounded-lg shadow-xl w-11/12 max-w-fit p-6 ".concat(className)
   }, /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex justify-end pb-3"
-  }, /*#__PURE__*/external_react_default().createElement("div", {
+  }, /*#__PURE__*/external_react_default().createElement("button", {
     onClick: onClose,
-    className: "hover:cursor-pointer text-[--color-text-strong]"
+    className: "hover:cursor-pointer text-[--color-text-strong]",
+    "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: "border-b border-[--color-stroke] pb-4 text-[--color-text-strong] ".concat(headerClassName)
-  }, header), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "my-2 text-[--color-text-strong]"
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    id: "modal-title"
+  }, header)), /*#__PURE__*/external_react_default().createElement("div", {
+    id: "modal-description",
+    className: "my-4 text-[--color-text-weak]"
   }, body), /*#__PURE__*/external_react_default().createElement("div", {
     className: "text-[--color-text-weak] ".concat(footerClassName)
   }, footer)));
@@ -12922,19 +13053,25 @@ var c247_loader_gif_default = /*#__PURE__*/__webpack_require__.n(c247_loader_gif
 ;// ./src/components/Loader/Loader.js
 
 
+
 function Loader(_ref) {
   let {
     isLoading,
-    loaderText = "loading..."
+    loaderText = 'loading...',
+    customLoader,
+    className = ''
   } = _ref;
   return isLoading && /*#__PURE__*/external_react_default().createElement("div", {
-    className: "fixed inset-0 flex flex-col items-center justify-center bg-greySunkenDark1000 bg-opacity-80 z-50"
-  }, /*#__PURE__*/external_react_default().createElement("img", {
+    role: "status",
+    "aria-live": "polite",
+    className: "fixed inset-0 flex flex-col items-center justify-center bg-greySunkenDark1000 bg-opacity-80 z-50 ".concat(className)
+  }, customLoader ? customLoader : /*#__PURE__*/external_react_default().createElement("img", {
     src: (c247_loader_gif_default()),
     alt: "Loading",
     className: "h-60"
-  }), /*#__PURE__*/external_react_default().createElement("h4", {
-    className: "mt-4 text-greyBaseLight text-lg font-medium animate-pulse"
+  }), /*#__PURE__*/external_react_default().createElement(Text, {
+    variant: "h4",
+    className: "mt-4 animate-pulse"
   }, loaderText));
 }
 ;// external "opus-toolkit-styles/assets/logos/footer-logos.svg"