opus-toolkit-components 0.6.4 → 0.6.6

package/lib/{main.150d0110766978527710.js → main.824df0449a5aae477ded.js}

@@ -34,7 +34,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ``, "",{"version":3,"sources":[],"names
 
 /***/ }),
 
-/***/ 865:
+/***/ 117:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
@@ -49,7 +49,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ``, "",{"version":3,"sources":[],"names
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.dark-card{color:#fff}.light-card{background-color:#fff}`, "",{"version":3,"sources":["webpack://./src/components/Cards/card.scss"],"names":[],"mappings":"AAGA,WAEI,UAAA,CAEJ,YACI,qBAAA","sourcesContent":["@import 'opus-toolkit-styles/fragments/colours';\r\n\r\n\r\n.dark-card {\r\n    // background-color: $opusNavy;\r\n    color: white;\r\n}\r\n.light-card {\r\n    background-color: white;\r\n    // color: $opusDeepBlue;\r\n}"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, `input[type=date]::-webkit-calendar-picker-indicator{display:none}`, "",{"version":3,"sources":["webpack://./src/components/Forms/Datepickers/datepicker.scss"],"names":[],"mappings":"AAAA,oDACI,YAAA","sourcesContent":["input[type=\"date\"]::-webkit-calendar-picker-indicator {\r\n    display: none;\r\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -633,21 +633,21 @@ const Accordion = _ref => {
     }
   }, [activeIndex]);
   return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "accordion rounded-md"
+    className: "accordion rounded-md bg-[--color-primary-bg] border border-[--color-stroke] drop-shadow-raised w-full"
   }, /*#__PURE__*/external_react_default().createElement("div", {
     className: "accordion-item rounded-lg",
     key: index
   }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "accordion-header flex justify-between p-2",
+    className: "accordion-header flex justify-between p-3",
     onClick: toggle // Handle both internal and external toggles
     ,
     style: {
       cursor: "pointer"
     }
   }, /*#__PURE__*/external_react_default().createElement("h2", {
-    className: "text-1xl text-gray-800"
+    className: "text-1xl text-[--color-text-strong]"
   }, title), /*#__PURE__*/external_react_default().createElement("div", null, isActive ? "-" : "+"))), isActive && /*#__PURE__*/external_react_default().createElement("div", {
-    className: "accordion-body p-2"
+    className: "accordion-body border-0 border border-t-2 border-solid border-greyLight100 p-3"
   }, children));
 };
 /* harmony default export */ const Accordions_Accordion = (Accordion);
@@ -3509,9 +3509,9 @@ function Button(_ref) {
   } = _ref;
   // Define styles for button ranks
   const rankStyles = {
-    primary: 'bg-brandPink600 hover:bg-brandPink700 text-greyBaseLight',
+    primary: 'bg-[--color-primary-btn] hover:bg-[--color-primary-btn-hover] text-greyBaseLight',
     secondary: 'bg-greyBaseDark900 hover:bg-brandPink700 text-greyBaseLight',
-    outline: 'bg-greyLight50 border-solid border-2 border-greyLight100 hover:border-greyLight700 hover:greyLight100 text-greyLight700',
+    outline: 'bg-greyLight50 border-solid border-2 border-[--color-outline-btn] hover:border-[--color-outline-btn-hover] text-[--color-text-strong]',
     neutral: 'bg-greyLight50 hover:bg-greyLight100 text-greyLight700',
     destructive: 'bg-utilRed1000 hover:bg-utilRed800 text-greyBaseLight'
   };
@@ -3520,10 +3520,10 @@ function Button(_ref) {
   const disabledStyles = 'bg-greyLight100 text-greyLight500 cursor-not-allowed';
 
   // Icon animation style (if applicable)
-  const iconClassNames = "\n    inline-block \n    transition-transform \n    ease-in-out \n    duration-200\n    h-5 w-5\n    ".concat(iconPosition === 'right' ? 'ml-2' : 'mr-2', "\n    ").concat(isIconAnimated && !isSaving ? 'group-hover:translate-x-1' : '', "\n    ").concat(isSaving ? 'animate-spin' : '', " // Add spinning animation\n  ");
+  const iconClassNames = "inline-block \n    transition-transform \n    ease-in-out \n    duration-200\n    h-5 w-5\n    ".concat(iconPosition === 'right' ? 'ml-2' : 'mr-2', "\n    ").concat(isIconAnimated && !isSaving ? 'group-hover:translate-x-1' : '', "\n    ").concat(isSaving ? 'animate-spin' : '', " // Add spinning animation\n  ");
 
   // 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-lg \n    px-6 \n    py-2 \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  ");
+  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-lg \n    px-5 \n    py-2 \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", {
     type: type,
     title: title,
@@ -3535,49 +3535,21 @@ function Button(_ref) {
     className: iconClassNames
   }) : iconPosition === 'left' && Icon && /*#__PURE__*/external_react_default().createElement(Icon, {
     className: iconClassNames
-  }), isSaving ? savingText : text, !isSaving && iconPosition === 'right' && Icon && /*#__PURE__*/external_react_default().createElement(Icon, {
+  }), /*#__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
   }));
 }
-// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Cards/card.scss
-var card = __webpack_require__(865);
-;// ./src/components/Cards/card.scss
-
-      
-      
-      
-      
-      
-      
-      
-      
-      
-
-var card_options = {};
-
-card_options.styleTagTransform = (styleTagTransform_default());
-card_options.setAttributes = (setAttributesWithoutAttributes_default());
-card_options.insert = insertBySelector_default().bind(null, "head");
-card_options.domAPI = (styleDomAPI_default());
-card_options.insertStyleElement = (insertStyleElement_default());
-
-var card_update = injectStylesIntoStyleTag_default()(card/* default */.A, card_options);
-
-
-
-
-       /* harmony default export */ const Cards_card = (card/* default */.A && card/* default */.A.locals ? card/* default */.A.locals : undefined);
-
 ;// ./src/components/Cards/Card.js
 
-
 function Card(_ref) {
   let {
     mode = 'light',
     className = '',
     children
   } = _ref;
-  const cardClasses = "p-5 ".concat(mode, "-card rounded-lg shadow-lg border-solid border-2 border-greyLight100 ").concat(className);
+  const cardClasses = "\n        p-5 \n        bg-[--color-primary-bg] \n        text-[--color-text-weak] \n        rounded-lg \n        shadow-lg \n        border-solid \n        border-2 \n        border-[--color-stroke] \n        ".concat(className, "\n    ");
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: cardClasses
   }, children);
@@ -3616,12 +3588,12 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
     // Custom component to render
     customComponentProps = {} // Props for the custom component
   } = _ref;
-  const inputClasses = "".concat(className, " flex items-center rounded-md bg-white border ").concat(isValid ? 'border-greyLight500' : 'border-utilRed1000', " text-md font-normal text-gray-900");
-  const iconClasses = "h-5 w-5 ".concat(isAnimated ? 'transition-transform duration-200 group-focus-within:scale-125' : '', " text-gray-400");
+  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-weak]");
+  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-greyLight1000 mb-1 flex items-center"
+    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("div", {
@@ -3632,7 +3604,7 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
     className: iconClasses
   })), /*#__PURE__*/external_react_default().createElement("input", {
     ref: ref,
-    className: "w-full ".concat(Icon ? iconPosition === 'left' ? 'pl-10' : 'pr-10' : '', " bg-transparent border-none focus:ring-0 focus:outline-none rounded-md p-3"),
+    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 p-3"),
     type: type,
     name: name,
     placeholder: placeholder,
@@ -3651,8 +3623,66 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
   }, 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
+
+function CalendarIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/external_react_.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/external_react_.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/external_react_.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+  }));
+}
+const ForwardRef = /*#__PURE__*/ external_react_.forwardRef(CalendarIcon);
+/* harmony default export */ const esm_CalendarIcon = (ForwardRef);
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Forms/Datepickers/datepicker.scss
+var datepicker = __webpack_require__(117);
+;// ./src/components/Forms/Datepickers/datepicker.scss
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var datepicker_options = {};
+
+datepicker_options.styleTagTransform = (styleTagTransform_default());
+datepicker_options.setAttributes = (setAttributesWithoutAttributes_default());
+datepicker_options.insert = insertBySelector_default().bind(null, "head");
+datepicker_options.domAPI = (styleDomAPI_default());
+datepicker_options.insertStyleElement = (insertStyleElement_default());
+
+var datepicker_update = injectStylesIntoStyleTag_default()(datepicker/* default */.A, datepicker_options);
+
+
+
+
+       /* harmony default export */ const Datepickers_datepicker = (datepicker/* default */.A && datepicker/* default */.A.locals ? datepicker/* default */.A.locals : undefined);
+
 ;// ./src/components/Forms/Datepickers/DatePicker.js
 
+
+
 function DatePicker(_ref) {
   let {
     initialDate = '',
@@ -3660,47 +3690,60 @@ function DatePicker(_ref) {
     isValid = true,
     errorMessage = "Error message",
     name = 'date',
-    // Add name prop for form identification
     onChange,
-    // Add onChange prop for passing event to parent
     value,
     className = '',
     title = '',
-    required = false // Add the required prop
+    required = false
   } = _ref;
   const [selectedDate, setSelectedDate] = (0,external_react_.useState)(value || initialDate);
+  const inputRef = (0,external_react_.useRef)(null); // Create a reference for the input element
+
   (0,external_react_.useEffect)(() => {
     if (value !== undefined) {
-      setSelectedDate(value); // Sync with controlled prop if it's passed
+      setSelectedDate(value);
     } else {
-      setSelectedDate(initialDate); // Fallback to initial date if uncontrolled
+      setSelectedDate(initialDate);
     }
   }, [value, initialDate]);
   const handleDateChange = e => {
     setSelectedDate(e.target.value);
     if (onChange) {
-      onChange(e); // Pass the full event object to the parent component
+      onChange(e);
+    }
+  };
+  const handleIconClick = () => {
+    if (inputRef.current) {
+      inputRef.current.showPicker(); // Opens the native date picker (supported in modern browsers)
     }
   };
-  const inputClasses = "".concat(className, " flex items-center rounded-md bg-white border ").concat(isValid ? 'border-greyLight500' : 'border-utilRed1000', " p-2 text-md font-normal text-gray-900");
   return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex flex-col mb-4"
+    className: "relative flex flex-col mb-4"
   }, /*#__PURE__*/external_react_default().createElement("label", {
-    htmlFor: "date"
+    htmlFor: name,
+    className: "text-[--color-text-weak]"
   }, label, required && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-utilRed1000 ml-1"
   }, "*")), /*#__PURE__*/external_react_default().createElement("input", {
     type: "date",
-    id: "date",
-    name: name // Pass the name to identify the input in the event
+    id: name,
+    name: name,
+    ref: inputRef // Assign the ref to the input
     ,
     value: selectedDate,
     title: title,
     "aria-label": title,
     onChange: handleDateChange,
-    className: inputClasses,
-    required: required // Apply the required attribute to the input
-  }), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
+    required: required,
+    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(className)
+  }), /*#__PURE__*/external_react_default().createElement("button", {
+    type: "button",
+    onClick: handleIconClick,
+    className: "absolute top-1/2 right-3 transform",
+    "aria-label": "Open date picker"
+  }, /*#__PURE__*/external_react_default().createElement(esm_CalendarIcon, {
+    className: "w-5 h-5 text-[--color-text-weak]"
+  })), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-utilRed1000 text-sm"
   }, errorMessage));
 }
@@ -3747,14 +3790,14 @@ const RadioButton = _ref => {
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex flex-col mb-4"
   }, /*#__PURE__*/external_react_default().createElement("label", {
-    className: "text-greyLight700 mb-2 flex items-center"
+    className: "text-[--color-text-strong] mb-2 flex items-center"
   }, label, required && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-utilRed1000 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: "cursor-pointer py-2 px-4 border rounded-lg ".concat(selectedValue === option.value ? 'bg-greyBaseDark900 text-greyBaseLight border-greyBaseDark900' : "bg-white text-greyLight700 ".concat(!isValid && selectedValue === '' ? 'border-utilRed1000' : 'border-greyLight500'), " transition duration-200")
+    className: "cursor-pointer py-2 px-4 border rounded-lg ".concat(selectedValue === option.value ? 'bg-[--color-primary-btn] text-[--color-text-strong] border-[--color-stroke]' : "bg-[--color-input-bg] text-[--color-text-strong] ".concat(!isValid && selectedValue === '' ? 'border-utilRed1000' : 'border-[--color-stroke]'), " transition duration-200")
   }, /*#__PURE__*/external_react_default().createElement("input", {
     type: "radio",
     tabindex: tabIndex,
@@ -12065,8 +12108,8 @@ function ChevronDownIcon({
     clipRule: "evenodd"
   }));
 }
-const ForwardRef = /*#__PURE__*/ external_react_.forwardRef(ChevronDownIcon);
-/* harmony default export */ const esm_ChevronDownIcon = (ForwardRef);
+const ChevronDownIcon_ForwardRef = /*#__PURE__*/ external_react_.forwardRef(ChevronDownIcon);
+/* harmony default export */ const esm_ChevronDownIcon = (ChevronDownIcon_ForwardRef);
 ;// ./src/components/Forms/Dropdowns/Dropdown.jsx
 
 
@@ -12191,7 +12234,7 @@ const Navbar = _ref => {
     logo
   } = _ref;
   return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "p-4 w-full bg-greyBaseDark900 navbar"
+    className: "p-4 w-full bg-[--color-primary-bg] navbar"
   }, /*#__PURE__*/external_react_default().createElement("div", {
     className: "container mx-auto flex items-center justify-between"
   }, /*#__PURE__*/external_react_default().createElement("img", {
@@ -12199,7 +12242,7 @@ const Navbar = _ref => {
     alt: "Navbar Logo",
     className: "nav-logo"
   }), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "right-content"
+    className: "right-content text-[--color-text-strong]"
   }, children)));
 };
 /* harmony default export */ const Navbar_Navbar = (Navbar);
@@ -12242,24 +12285,25 @@ const Modal = _ref => {
     footerClassName = "",
     headerClassName = ""
   } = _ref;
-  if (!isOpen) return null;
+  if (!isOpen) return true;
   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", {
-    className: "bg-greyBaseLight rounded-lg shadow-lg w-11/12 max-w-fit p-6 ".concat(className)
+    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", {
     onClick: onClose,
-    className: "hover:cursor-pointer"
+    className: "hover:cursor-pointer text-[--color-text-strong]"
   }, /*#__PURE__*/external_react_default().createElement(esm_XMarkIcon, {
-    width: "24px"
+    width: "24px",
+    className: "text-[--color-text-strong]"
   }))), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "border-b border-greyLight100 pb-4 ".concat(headerClassName)
+    className: "border-b border-[--color-stroke] pb-4 text-[--color-text-strong] ".concat(headerClassName)
   }, header), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "my-2"
+    className: "my-2 text-[--color-text-strong]"
   }, body), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "".concat(footerClassName)
+    className: "text-[--color-text-weak] ".concat(footerClassName)
   }, footer)));
 };
 /* harmony default export */ const Modals_Modal = (Modal);
@@ -12297,4 +12341,4 @@ function Loader(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.150d0110766978527710.js.map
+//# sourceMappingURL=main.824df0449a5aae477ded.js.map