hplx-react-elements-dev 1.0.35 → 1.0.37

package/dist/esm/index.js

@@ -1949,19 +1949,19 @@ var getVariantClassName = function getVariantClassName(variant) {
 
   switch (variant) {
     case "Regular":
-      className = "font-inter-0";
+      className = "hplxt-font-inter-0";
       break;
 
     case "Medium":
-      className = "font-inter-1";
+      className = "hplxt-font-inter-1";
       break;
 
     case "Semibold":
-      className = "font-inter-2";
+      className = "hplxt-font-inter-2";
       break;
 
     case "Bold":
-      className = "font-inter-3";
+      className = "hplxt-font-inter-3";
       break;
 
     default:
@@ -1977,51 +1977,51 @@ var getTypeClassName = function getTypeClassName(type) {
 
   switch (type) {
     case "Display 2xl":
-      className = "font-inter leading-0 text-10 tracking-0";
+      className = "hplxt-font-inter hplxt-leading-0 hplxt-text-10 hplxt-tracking-0";
       break;
 
     case "Display xl":
-      className = "font-inter leading-1 text-9 tracking-0";
+      className = "hplxt-font-inter hplxt-leading-1 hplxt-text-9 hplxt-tracking-0";
       break;
 
     case "Display lg":
-      className = "font-inter leading-2 text-8 tracking-0";
+      className = "hplxt-font-inter hplxt-leading-2 hplxt-text-8 hplxt-tracking-0";
       break;
 
     case "Display md":
-      className = "font-inter leading-3 text-7 tracking-0";
+      className = "hplxt-font-inter hplxt-leading-3 hplxt-text-7 hplxt-tracking-0";
       break;
 
     case "Display sm":
-      className = "font-inter leading-4 text-6 tracking-1";
+      className = "hplxt-font-inter hplxt-leading-4 hplxt-text-6 hplxt-tracking-1";
       break;
 
     case "Display xs":
-      className = "font-inter leading-5 text-5 tracking-1";
+      className = "hplxt-font-inter hplxt-leading-5 hplxt-text-5 hplxt-tracking-1";
       break;
 
     case "Text xl":
-      className = "font-inter leading-7 text-4 tracking-1";
+      className = "hplxt-font-inter hplxt-leading-7 hplxt-text-4 hplxt-tracking-1";
       break;
 
     case "Text lg":
-      className = "font-inter leading-8 text-3 tracking-1";
+      className = "hplxt-font-inter hplxt-leading-8 hplxt-text-3 hplxt-tracking-1";
       break;
 
     case "Text md":
-      className = "font-inter leading-9 text-2 tracking-1";
+      className = "hplxt-font-inter hplxt-leading-9 hplxt-text-2 hplxt-tracking-1";
       break;
 
     case "Text sm":
-      className = "font-inter leading-10 text-1 tracking-1";
+      className = "hplxt-font-inter hplxt-leading-10 hplxt-text-1 hplxt-tracking-1";
       break;
 
     case "Text xs":
-      className = "font-inter  leading-11 text-0 tracking-1";
+      className = "hplxt-font-inter  hplxt-leading-11 hplxt-text-0 hplxt-tracking-1";
       break;
 
     default:
-      className = "font-inter";
+      className = "hplxt-font-inter";
   }
 
   return className;
@@ -2071,18 +2071,18 @@ var DropdownItems = function DropdownItems(_a) {
     onClick: function onClick() {
       !disabled && onSelect && onSelect(value);
     },
-    className: "h-10 flex items-center px-2  ".concat(disabled ? "cursor-not-allowed" : "hover:bg-Gray-50 cursor-pointer"),
+    className: "hplxt-h-10 hplxt-flex hplxt-items-center hplxt-px-2  ".concat(disabled ? "hplxt-cursor-not-allowed" : "hover:hplxt-bg-Gray-50 hplxt-cursor-pointer"),
     onMouseEnter: onMouseEnterHandler,
     onMouseLeave: onMouseLeaveHandler
   }, {
     children: [Boolean(start_icon) && jsxRuntime.exports.jsx("div", __assign({
-      className: "mr-2 ".concat(disabled ? "text-Gray-200" : hover ? "text-Gray-700" : "text-Gray-500")
+      className: "hplxt-mr-2 ".concat(disabled ? "hplxt-text-Gray-200" : hover ? "hplxt-text-Gray-700" : "hplxt-text-Gray-500")
     }, {
       children: jsxRuntime.exports.jsx("span", {
         className: start_icon
       })
     })), jsxRuntime.exports.jsx("div", __assign({
-      className: "flex-1 ".concat(disabled ? "text-Gray-200" : "text-Gray-700", " ").concat(className)
+      className: "hplxt-flex-1 ".concat(disabled ? "hplxt-text-Gray-200" : "hplxt-text-Gray-700", " ").concat(className)
     }, {
       children: jsxRuntime.exports.jsx(Typography, __assign({
         variant: hover && !disabled ? "Medium" : "Regular",
@@ -2091,7 +2091,7 @@ var DropdownItems = function DropdownItems(_a) {
         children: label
       }))
     })), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
-      className: "ml-2 ".concat(!disabled && (hover || active) ? "text-Primary-700" : "text-Gray-200")
+      className: "hplxt-ml-2 ".concat(!disabled && (hover || active) ? "hplxt-text-Primary-700" : "hplxt-text-Gray-200")
     }, {
       children: jsxRuntime.exports.jsx("span", {
         className: end_icon
@@ -2126,30 +2126,30 @@ var InputField = function InputField(_a) {
       _g = _a.isSuffixEditable,
       isSuffixEditable = _g === void 0 ? false : _g,
       suffixPlaceholder = _a.suffixPlaceholder,
+      fieldColor = _a.fieldColor,
       _h = _a.handleSuffixClick,
       handleSuffixClick = _h === void 0 ? function (_) {} : _h;
-      _a.handleSuffixValChange;
 
-  var _k = inputProps || {},
-      disabled = _k.disabled,
-      onFocus = _k.onFocus,
-      onBlur = _k.onBlur;
+  var _j = inputProps || {},
+      disabled = _j.disabled,
+      onFocus = _j.onFocus,
+      onBlur = _j.onBlur;
 
-  var _l = useState(false),
-      active = _l[0],
-      setActive = _l[1];
+  var _k = useState(false),
+      active = _k[0],
+      setActive = _k[1];
 
-  var _m = useState(false),
-      showSuffixDropdown = _m[0],
-      setShowSuffixDropdown = _m[1];
+  var _l = useState(false),
+      showSuffixDropdown = _l[0],
+      setShowSuffixDropdown = _l[1];
 
-  var _o = useState(""),
-      suffixValue = _o[0],
-      setSuffixValue = _o[1];
+  var _m = useState(""),
+      suffixValue = _m[0],
+      setSuffixValue = _m[1];
 
-  var _p = useState([]),
-      suffixFilterList = _p[0],
-      setSuffixFilterList = _p[1];
+  var _o = useState([]),
+      suffixFilterList = _o[0],
+      setSuffixFilterList = _o[1];
 
   var wrapperRef = useRef(null);
   useEffect(function () {
@@ -2198,13 +2198,13 @@ var InputField = function InputField(_a) {
   }); // console.log("Input Field",suffixDropdown)
 
   return jsxRuntime.exports.jsxs("div", __assign({
-    className: "inputfield "
+    className: "inputfield  "
   }, {
     children: [jsxRuntime.exports.jsxs("div", __assign({
-      className: "flex justify-between"
+      className: "hplxt-flex hplxt-justify-between"
     }, {
       children: [Boolean(label) && jsxRuntime.exports.jsx("div", __assign({
-        className: "".concat(labelColor ? labelColor : "text-Gray-700", " mb-1")
+        className: "".concat(labelColor ? labelColor : "hplxt-text-Gray-700", " hplxt-mb-1")
       }, {
         children: jsxRuntime.exports.jsx(Typography, __assign({
           type: "".concat(labelSize ? labelSize : "Text sm"),
@@ -2213,7 +2213,7 @@ var InputField = function InputField(_a) {
           children: label
         }))
       })), Boolean(char_count) && jsxRuntime.exports.jsx("div", __assign({
-        className: "text-Gray-700 mb-1"
+        className: "hplxt-text-Gray-700 hplxt-mb-1"
       }, {
         children: jsxRuntime.exports.jsx(Typography, __assign({
           type: "Text sm",
@@ -2228,11 +2228,11 @@ var InputField = function InputField(_a) {
     }, {
       children: jsxRuntime.exports.jsxs("div", __assign({
         "data-setid": "error-msg",
-        className: "flex ".concat(isborderRequired ? "border-1 shadow-xs rounded-lg" : "", " overflow-hidden placeholder:text-Gray-500 ").concat(errorMsg ? "border-Error-300" : "border-Gray-300", "   ").concat(height ? height : "h-10", " ").concat(disabled ? "bg-Gray-50" : "bg-White ".concat(errorMsg ? "hover:shadow-xs-error ".concat(active && "shadow-xs-error") : " ".concat(isborderRequired ? "hover:border-Primary-300 hover:shadow-xs-primary ".concat(active && "border-Primary-300 shadow-xs-primary") : " ")))
+        className: "hplxt-flex ".concat(isborderRequired ? "hplxt-border-1 hplxt-shadow-xs hplxt-rounded-lg" : "", " hplxt-overflow-hidden placeholder:hplxt-text-Gray-500 ").concat(errorMsg ? "hplxt-border-Error-300" : "hplxt-border-Gray-300", "   ").concat(height ? height : "hplxt-h-10", " ").concat(disabled ? "hplxt-bg-Gray-50" : "".concat(fieldColor ? fieldColor : "hplxt-bg-White", " ").concat(errorMsg ? "hover:hplxt-shadow-xs-error ".concat(active && "hplxt-shadow-xs-error") : " ".concat(isborderRequired ? "hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary ".concat(active && "hplxt-border-Primary-300 hplxt-shadow-xs-primary") : " ")))
       }, {
         children: [Boolean(prefix) && jsxRuntime.exports.jsx("div", __assign({
           "data-testid": "input-prefix",
-          className: "bg-Gray-50 border-r-1 border-r-Gray-300 text-Gray-500 flex items-center px-3"
+          className: "".concat(fieldColor ? fieldColor : "hplxt-bg-Gray-50", " hplxt-border-r-1 hplxt-border-r-Gray-300 hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-px-3")
         }, {
           children: jsxRuntime.exports.jsx(Typography, __assign({
             type: "Text md",
@@ -2241,27 +2241,30 @@ var InputField = function InputField(_a) {
             children: prefix
           }))
         })), Boolean(start_icon) && jsxRuntime.exports.jsx("div", __assign({
-          className: "text-Gray-500 flex items-center pl-2"
+          className: "hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-pl-2"
         }, {
           children: jsxRuntime.exports.jsx("span", {
             className: start_icon
           })
         })), jsxRuntime.exports.jsx("input", __assign({
           type: "text",
-          className: "flex-1 pl-[14px] pr-[12px] py-1 focus-visible:outline-0 border-0 focus:border-0",
+          style: {
+            background: "".concat(fieldColor === null || fieldColor === void 0 ? void 0 : fieldColor.split("-")[1])
+          },
+          className: "hplxt-flex-1 hplxt-pl-[14px] ".concat(fieldColor, "  hplxt-pr-[12px] hplxt-py-1 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0"),
           "data-testid": "text-input"
         }, inputProps, {
           onFocus: handleFocus,
           onBlur: handleBlur
         })), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
-          className: "text-Gray-500 flex items-center pr-2"
+          className: "hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-pr-2"
         }, {
           children: jsxRuntime.exports.jsx("span", {
             className: end_icon
           })
         })), Boolean(suffix) && !isSuffixEditable && jsxRuntime.exports.jsx("div", __assign({
           "data-testid": "input-suffix",
-          className: "bg-Gray-50 border-l-1 border-l-Gray-300 text-Gray-500 flex items-center pr-3 pl-[14px]",
+          className: "".concat(fieldColor ? fieldColor : "hplxt-bg-Gray-50", " hplxt-border-l-1 hplxt-border-l-Gray-300 hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-pr-3 hplxt-pl-[14px]"),
           onClick: function onClick() {
             return setShowSuffixDropdown(true);
           }
@@ -2275,14 +2278,14 @@ var InputField = function InputField(_a) {
         })), isSuffixEditable && jsxRuntime.exports.jsxs("div", {
           children: [jsxRuntime.exports.jsx("div", __assign({
             "data-testid": "input-suffix",
-            className: "bg-Gray-50 border-l-1 border-l-Gray-300 text-Gray-500 flex items-center pr-3 pl-[14px]",
+            className: "".concat(fieldColor ? fieldColor : "hplxt-bg-Gray-50", "  hplxt-bg-none hplxt-border-l-1 hplxt-border-l-Gray-300 hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-pr-3 hplxt-pl-[14px]"),
             onClick: function onClick() {
               return setShowSuffixDropdown(true);
             }
           }, {
             children: isSuffixEditable && jsxRuntime.exports.jsx("input", __assign({
               type: "text",
-              className: "flex-1 pl-[4px] w-36 pr-[1px] bg-Gray-50 py-2 focus-visible:outline-0 border-0 focus:border-0",
+              className: "hplxt-flex-1 hplxt-pl-[4px] hplxt-w-36 hplxt-pr-[1px] hplxt-bg-Gray-50 hplxt-py-2 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0",
               "data-testid": "text-input",
               placeholder: suffixPlaceholder
             }, suffixInputProps, {
@@ -2293,20 +2296,19 @@ var InputField = function InputField(_a) {
             }))
           })), showSuffixDropdown && jsxRuntime.exports.jsx("div", __assign({
             ref: wrapperRef,
-            className: "absolute mt-1 min-w-max rounded-lg bg-White overflow-y-auto shadow-md z-10 max-h-80 "
+            className: "hplxt-absolute hplxt-mt-1 hplxt-min-w-max hplxt-rounded-lg ".concat(fieldColor ? fieldColor : "hplxt-bg-White", "  hplxt-overflow-y-auto hplxt-shadow-md hplxt-z-10 hplxt-max-h-80 ")
           }, {
             children: suffixFilterList && suffixFilterList.length > 0 && jsxRuntime.exports.jsx("div", {
               children: (suffixFilterList === null || suffixFilterList === void 0 ? void 0 : suffixFilterList.constructor) === Array && suffixFilterList.length ? suffixFilterList.map(function (option) {
-                var restOptions = __rest(option || {}, []);
-
+                // const { ...restOptions } = option || {}
                 return jsxRuntime.exports.jsx(DropdownItems, __assign({
+                  className: "hplxt-text-Primary-700"
+                }, option, {
                   label: option["label"],
-                  className: "text-Primary-700"
-                }, restOptions, {
                   onSelect: function onSelect() {
-                    setSuffixValue(restOptions.label);
+                    setSuffixValue(option.label);
                     setShowSuffixDropdown(false);
-                    handleSuffixClick(restOptions);
+                    handleSuffixClick(option);
                   }
                 }));
               }) : null
@@ -2314,7 +2316,7 @@ var InputField = function InputField(_a) {
           }))]
         }), Boolean(suffixButton) && jsxRuntime.exports.jsx("div", __assign({
           "data-testid": "input-suffixButton",
-          className: " flex items-center px-1"
+          className: " hplxt-flex hplxt-items-center hplxt-px-1"
         }, {
           children: jsxRuntime.exports.jsx(Typography, __assign({
             type: "Text md",
@@ -2325,7 +2327,7 @@ var InputField = function InputField(_a) {
         }))]
       }))
     })), (Boolean(hint_text) || Boolean(errorMsg)) && jsxRuntime.exports.jsx("div", __assign({
-      className: "".concat(errorMsg ? "text-Error-500" : "text-Gray-500 mt-1")
+      className: "".concat(errorMsg ? "hplxt-text-Error-500" : "hplxt-text-Gray-500 hplxt-mt-1")
     }, {
       children: jsxRuntime.exports.jsx(Typography, __assign({
         type: "Text sm",
@@ -2409,10 +2411,10 @@ var InputFieldSplit = function InputFieldSplit(_a) {
     className: "inputfieldsplit"
   }, {
     children: [jsxRuntime.exports.jsxs("div", __assign({
-      className: "flex justify-between"
+      className: "hplxt-flex hplxt-justify-between"
     }, {
       children: [Boolean(label) && jsxRuntime.exports.jsx("div", __assign({
-        className: "".concat(labelColor ? labelColor : "text-Gray-700", " mb-1")
+        className: "".concat(labelColor ? labelColor : "hplxt-text-Gray-700", " hplxt-mb-1")
       }, {
         children: jsxRuntime.exports.jsx(Typography, __assign({
           type: "".concat(labelSize ? labelSize : "Text sm"),
@@ -2421,7 +2423,7 @@ var InputFieldSplit = function InputFieldSplit(_a) {
           children: label
         }))
       })), Boolean(char_count) && jsxRuntime.exports.jsx("div", __assign({
-        className: "text-Gray-700 mb-1"
+        className: "hplxt-text-Gray-700 hplxt-mb-1"
       }, {
         children: jsxRuntime.exports.jsx(Typography, __assign({
           type: "Text sm",
@@ -2435,11 +2437,11 @@ var InputFieldSplit = function InputFieldSplit(_a) {
       type: "Text md"
     }, {
       children: jsxRuntime.exports.jsxs("div", __assign({
-        className: "flex border-1 overflow-hidden placeholder:text-Gray-500 ".concat(errorMsg ? "border-Error-300" : "border-Gray-300", " shadow-xs rounded-lg ").concat(height ? height : "h-10", " ").concat(disabled ? "bg-Gray-50" : "bg-White ".concat(errorMsg ? "hover:shadow-xs-error ".concat((active[fieldNames[0]] || active[fieldNames[1]]) && "shadow-xs-error") : "hover:border-Primary-300 hover:shadow-xs-primary ".concat((active[fieldNames[0]] || active[fieldNames[1]]) && "border-Primary-300 shadow-xs-primary")))
+        className: "hplxt-flex hplxt-border-1 hplxt-overflow-hidden placeholder:hplxt-text-Gray-500 ".concat(errorMsg ? "hplxt-border-Error-300" : "hplxt-border-Gray-300", " hplxt-shadow-xs hplxt-rounded-lg ").concat(height ? height : "hplxt-h-10", " ").concat(disabled ? "hplxt-bg-Gray-50" : "hplxt-bg-White ".concat(errorMsg ? "hover:hplxt-shadow-xs-error ".concat((active[fieldNames[0]] || active[fieldNames[1]]) && "hplxt-shadow-xs-error") : "hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary ".concat((active[fieldNames[0]] || active[fieldNames[1]]) && "hplxt-border-Primary-300 hplxt-shadow-xs-primary")))
       }, {
         children: [Boolean(prefix) && jsxRuntime.exports.jsx("div", __assign({
           "data-testid": "input-prefix",
-          className: "bg-Gray-50 border-r-1 border-r-Gray-300 text-Gray-500 flex items-center px-3"
+          className: "hplxt-bg-Gray-50 hplxt-border-r-1 hplxt-border-r-Gray-300 hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-px-3"
         }, {
           children: jsxRuntime.exports.jsx(Typography, __assign({
             type: "Text md",
@@ -2448,17 +2450,17 @@ var InputFieldSplit = function InputFieldSplit(_a) {
             children: prefix
           }))
         })), Boolean(start_icon) && jsxRuntime.exports.jsx("div", __assign({
-          className: "text-Gray-500 flex items-center pl-2"
+          className: "hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-pl-2"
         }, {
           children: jsxRuntime.exports.jsx("span", {
             className: start_icon
           })
         })), jsxRuntime.exports.jsxs("div", __assign({
-          className: "flex-1 relative flex min-w-105"
+          className: "hplxt-flex-1 hplxt-relative hplxt-flex hplxt-min-w-105"
         }, {
           children: [jsxRuntime.exports.jsx("input", __assign({
             type: "text",
-            className: "pl-[14px] py-1 focus-visible:outline-0 absolute top-0 bottom-0 left-0 right-1/2 mr-2 border-0 focus:border-0"
+            className: "hplxt-pl-[14px] hplxt-py-1 focus-visible:hplxt-outline-0 hplxt-absolute hplxt-top-0 hplxt-bottom-0 hplxt-left-0 hplxt-right-1/2 hplxt-mr-2 hplxt-border-0 focus:hplxt-border-0"
           }, inputProps, {
             value: value && value[fieldNames[0]],
             onChange: handleChange(fieldNames[0]),
@@ -2466,18 +2468,18 @@ var InputFieldSplit = function InputFieldSplit(_a) {
             onBlur: handleBlur(fieldNames[0]),
             "data-testid": "text1-input"
           })), jsxRuntime.exports.jsx("div", __assign({
-            className: "flex-1 flex justify-center items-center"
+            className: "hplxt-flex-1 hplxt-flex hplxt-justify-center hplxt-items-center"
           }, {
             children: jsxRuntime.exports.jsx(Typography, __assign({
               type: "Text md",
               variant: "Regular",
-              className: "text-Gray-300"
+              className: "hplxt-text-Gray-300"
             }, {
               children: "/"
             }))
           })), jsxRuntime.exports.jsx("input", __assign({
             type: "text",
-            className: "pr-2 py-1 focus-visible:outline-0 absolute top-0 bottom-0 left-1/2 right-0 ml-2 border-0 focus:border-0"
+            className: "hplxt-pr-2 hplxt-py-1 focus-visible:hplxt-outline-0 hplxt-absolute hplxt-top-0 hplxt-bottom-0 hplxt-left-1/2 hplxt-right-0 hplxt-ml-2 hplxt-border-0 focus:hplxt-border-0"
           }, inputProps, {
             value: value && value[fieldNames[1]],
             onChange: handleChange(fieldNames[1]),
@@ -2486,14 +2488,14 @@ var InputFieldSplit = function InputFieldSplit(_a) {
             "data-testid": "text2-input"
           }))]
         })), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
-          className: "text-Gray-500 flex items-center pr-2"
+          className: "hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-pr-2"
         }, {
           children: jsxRuntime.exports.jsx("span", {
             className: end_icon
           })
         })), Boolean(suffix) && jsxRuntime.exports.jsx("div", __assign({
           "data-testid": "input-suffix",
-          className: "bg-Gray-50 border-l-1 border-l-Gray-300 text-Gray-500 flex items-center pr-3 pl-[14px]"
+          className: "hplxt-bg-Gray-50 hplxt-border-l-1 hplxt-border-l-Gray-300 hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-pr-3 hplxt-pl-[14px]"
         }, {
           children: jsxRuntime.exports.jsx(Typography, __assign({
             type: "Text md",
@@ -2504,7 +2506,7 @@ var InputFieldSplit = function InputFieldSplit(_a) {
         }))]
       }))
     })), (Boolean(hint_text) || Boolean(errorMsg)) && jsxRuntime.exports.jsx("div", __assign({
-      className: "".concat(errorMsg ? "text-Error-500" : "text-Gray-500 mt-1")
+      className: "".concat(errorMsg ? "hplxt-text-Error-500" : "hplxt-text-Gray-500 hplxt-mt-1")
     }, {
       children: jsxRuntime.exports.jsx(Typography, __assign({
         type: "Text sm",
@@ -2529,7 +2531,7 @@ var TextAreaField = function TextAreaField(_a) {
       errorMsg = _c === void 0 ? "" : _c,
       inputProps = _a.inputProps,
       _d = _a.height,
-      height = _d === void 0 ? "h-32" : _d;
+      height = _d === void 0 ? "hplxt-h-32" : _d;
 
   var _e = inputProps || {},
       disabled = _e.disabled,
@@ -2554,7 +2556,7 @@ var TextAreaField = function TextAreaField(_a) {
     className: "textfield"
   }, {
     children: [Boolean(label) && jsxRuntime.exports.jsx("div", __assign({
-      className: "text-Gray-700 mb-1"
+      className: "hplxt-text-Gray-700 hplxt-mb-1"
     }, {
       children: jsxRuntime.exports.jsx(Typography, __assign({
         type: "Text sm",
@@ -2567,17 +2569,17 @@ var TextAreaField = function TextAreaField(_a) {
       type: "Text md"
     }, {
       children: jsxRuntime.exports.jsx("div", __assign({
-        className: "flex border-1 overflow-hidden placeholder:text-Gray-500 ".concat(errorMsg ? "border-Error-300" : "border-Gray-300", " shadow-xs rounded-lg ").concat(height, " ").concat(disabled ? "bg-Gray-50" : "bg-White ".concat(errorMsg ? "hover:shadow-xs-error ".concat(active && "shadow-xs-error") : "hover:border-Primary-300 hover:shadow-xs-primary ".concat(active && "border-Primary-300 shadow-xs-primary")))
+        className: "hplxt-flex hplxt-border-1 hplxt-overflow-hidden placeholder:hplxt-text-Gray-500 ".concat(errorMsg ? "hplxt-border-Error-300" : "hplxt-border-Gray-300", " hplxt-shadow-xs hplxt-rounded-lg ").concat(height, " ").concat(disabled ? "hplxt-bg-Gray-50" : "hplxt-bg-White ".concat(errorMsg ? "hover:hplxt-shadow-xs-error ".concat(active && "hplxt-shadow-xs-error") : "hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary ".concat(active && "hplxt-border-Primary-300 hplxt-shadow-xs-primary")))
       }, {
         children: jsxRuntime.exports.jsx("textarea", __assign({
-          className: "flex-1 px-2 py-2 focus-visible:outline-0 border-0 focus:border-0"
+          className: "hplxt-flex-1 hplxt-px-2 hplxt-py-2 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0"
         }, inputProps, {
           onFocus: handleFocus,
           onBlur: handleBlur
         }))
       }))
     })), (Boolean(hint_text) || Boolean(errorMsg)) && jsxRuntime.exports.jsx("div", __assign({
-      className: "".concat(errorMsg ? "text-Error-500" : "text-Gray-500 mt-1")
+      className: "".concat(errorMsg ? "hplxt-text-Error-500" : "hplxt-text-Gray-500 hplxt-mt-1")
     }, {
       children: jsxRuntime.exports.jsx(Typography, __assign({
         type: "Text sm",
@@ -2598,15 +2600,15 @@ var getSizeClassName$6 = function getSizeClassName(size) {
 
   switch (size) {
     case "sm":
-      className = "w-16 h-16";
+      className = "hplxt-w-16 hplxt-h-16";
       break;
 
     case "md":
-      className = "w-20 h-20";
+      className = "hplxt-w-20 hplxt-h-20";
       break;
 
     case "lg":
-      className = "w-24 h-24";
+      className = "hplxt-w-24 hplxt-h-24";
       break;
 
     default:
@@ -2654,7 +2656,7 @@ var OtpField = function OtpField(_a) {
     className: "otpfield"
   }, {
     children: [Boolean(label) && jsxRuntime.exports.jsx("div", __assign({
-      className: "text-Gray-700 mb-1"
+      className: "hplxt-text-Gray-700 hplxt-mb-1"
     }, {
       children: jsxRuntime.exports.jsx(Typography, __assign({
         type: "Text sm",
@@ -2663,24 +2665,24 @@ var OtpField = function OtpField(_a) {
         children: label
       }))
     })), jsxRuntime.exports.jsxs("div", __assign({
-      className: "relative inline-block"
+      className: "hplxt-relative hplxt-inline-block"
     }, {
       children: [jsxRuntime.exports.jsx("input", __assign({
         type: "text",
-        className: "absolute top-0 bottom-0 left-0 right-0 opacity-0 border-0 focus:border-0",
+        className: "hplxt-absolute hplxt-top-0 hplxt-bottom-0 hplxt-left-0 hplxt-right-0 hplxt-opacity-0 hplxt-border-0 focus:hplxt-border-0",
         maxLength: digits
       }, inputProps, {
         onFocus: handleFocus,
         onBlur: handleBlur
       })), jsxRuntime.exports.jsx("div", __assign({
-        className: "flex pointer-events-none"
+        className: "hplxt-flex hplxt-pointer-events-none"
       }, {
         children: Array(digits).fill("").map(function (_, index) {
           return jsxRuntime.exports.jsxs("div", __assign({
-            className: "flex items-center justify-center"
+            className: "hplxt-flex hplxt-items-center hplxt-justify-center"
           }, {
             children: [digits === 6 && index === 3 && jsxRuntime.exports.jsx("div", __assign({
-              className: "text-Gray-300"
+              className: "hplxt-text-Gray-300"
             }, {
               children: jsxRuntime.exports.jsx(Typography, __assign({
                 type: "Display xl",
@@ -2689,7 +2691,7 @@ var OtpField = function OtpField(_a) {
                 children: "-"
               }))
             })), jsxRuntime.exports.jsx("div", __assign({
-              className: "flex items-center justify-center border-1 ".concat(errorMsg ? "border-Error-300" : "border-Gray-300", " ").concat(disabled ? "bg-Gray-50" : typeof value === "string" && value.length === index && "bg-White ".concat(errorMsg ? "hover:shadow-xs-error ".concat(active && "shadow-xs-error") : "hover:border-Primary-300 hover:shadow-xs-primary ".concat(active && "border-Primary-300 shadow-xs-primary")), " rounded-lg mx-1 ").concat(getSizeClassName$6(size))
+              className: "hplxt-flex hplxt-items-center hplxt-justify-center hplxt-border-1 ".concat(errorMsg ? "hplxt-border-Error-300" : "hplxt-border-Gray-300", " ").concat(disabled ? "hplxt-bg-Gray-50" : typeof value === "string" && value.length === index && "hplxt-bg-White ".concat(errorMsg ? "hover:hplxt-shadow-xs-error ".concat(active && "hplxt-shadow-xs-error") : "hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary ".concat(active && "hplxt-border-Primary-300 hplxt-shadow-xs-primary")), " hplxt-rounded-lg hplxt-mx-1 ").concat(getSizeClassName$6(size))
             }, {
               children: typeof value === "string" && !!value[index] ? jsxRuntime.exports.jsx(Typography, __assign({
                 type: size === "lg" ? "Display xl" : "Display lg",
@@ -2697,7 +2699,7 @@ var OtpField = function OtpField(_a) {
               }, {
                 children: value[index]
               })) : jsxRuntime.exports.jsx("div", __assign({
-                className: "text-Gray-300"
+                className: "hplxt-text-Gray-300"
               }, {
                 children: jsxRuntime.exports.jsx(Typography, __assign({
                   type: size === "lg" ? "Display xl" : "Display lg",
@@ -2711,7 +2713,7 @@ var OtpField = function OtpField(_a) {
         })
       }))]
     })), (Boolean(hint_text) || Boolean(errorMsg)) && jsxRuntime.exports.jsx("div", __assign({
-      className: "".concat(errorMsg ? "text-Error-500" : "text-Gray-500 mt-1")
+      className: "".concat(errorMsg ? "hplxt-text-Error-500" : "hplxt-text-Gray-500 hplxt-mt-1")
     }, {
       children: jsxRuntime.exports.jsx(Typography, __assign({
         type: "Text sm",
@@ -2759,7 +2761,7 @@ var ButtonGroups = function ButtonGroups(_a) {
   };
 
   return jsxRuntime.exports.jsx("div", __assign({
-    className: "border-1 border-Gray-300 rounded-lg flex overflow-hidden"
+    className: "hplxt-border-1 hplxt-border-Gray-300 hplxt-rounded-lg hplxt-flex hplxt-overflow-hidden"
   }, {
     children: !!options && options.constructor === Array && options.map(function (option, index) {
       var _a = option || {},
@@ -2775,17 +2777,17 @@ var ButtonGroups = function ButtonGroups(_a) {
         disabled: disabled,
         onMouseEnter: onMouseEnterHandler(index),
         onMouseLeave: onMouseLeaveHandler,
-        className: "flex items-center justify-center flex-1 h-10\n              ".concat(!disabled && isSelected ? "bg-Primary-50" : "bg-White", "\n              ").concat(index + 1 !== options.length && "border-r-1 border-Gray-300"),
+        className: "hplxt-flex hplxt-items-center hplxt-justify-center hplxt-flex-1 hplxt-h-10\n              ".concat(!disabled && isSelected ? "hplxt-bg-Primary-50" : "hplxt-bg-White", "\n              ").concat(index + 1 !== options.length && "hplxt-border-r-1 hplxt-border-Gray-300"),
         onClick: handleChange(buttonValue)
       }, ButtonGroupsProps, {
         children: [Boolean(start_icon) && jsxRuntime.exports.jsx("div", __assign({
-          className: "flex items-center pl-2 ".concat(!label && "pr-2", " ").concat(disabled ? "text-Gray-300" : isSelected ? "text-Primary-700" : isHovered ? "text-Gray-800" : "text-Gray-500")
+          className: "hplxt-flex hplxt-items-center hplxt-pl-2 ".concat(!label && "hplxt-pr-2", " ").concat(disabled ? "hplxt-text-Gray-300" : isSelected ? "hplxt-text-Primary-700" : isHovered ? "hplxt-text-Gray-800" : "hplxt-text-Gray-500")
         }, {
           children: jsxRuntime.exports.jsx("span", {
             className: start_icon
           })
         })), Boolean(label) && jsxRuntime.exports.jsx("div", __assign({
-          className: "px-2 ".concat(disabled ? "text-Gray-300" : isSelected ? "text-Primary-700" : isHovered ? "text-Gray-800" : "text-Gray-700")
+          className: "hplxt-px-2 ".concat(disabled ? "hplxt-text-Gray-300" : isSelected ? "hplxt-text-Primary-700" : isHovered ? "hplxt-text-Gray-800" : "hplxt-text-Gray-700")
         }, {
           children: jsxRuntime.exports.jsx(Typography, __assign({
             variant: "Medium",
@@ -2794,7 +2796,7 @@ var ButtonGroups = function ButtonGroups(_a) {
             children: label
           }))
         })), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
-          className: "flex items-center pr-2 ".concat(!label && "pl-2", " ").concat(disabled ? "text-Gray-300" : isSelected ? "text-Primary-700" : isHovered ? "text-Gray-800" : "text-Gray-500")
+          className: "hplxt-flex hplxt-items-center hplxt-pr-2 ".concat(!label && "hplxt-pl-2", " ").concat(disabled ? "hplxt-text-Gray-300" : isSelected ? "hplxt-text-Primary-700" : isHovered ? "hplxt-text-Gray-800" : "hplxt-text-Gray-500")
         }, {
           children: jsxRuntime.exports.jsx("span", {
             className: end_icon
@@ -2810,31 +2812,31 @@ var getVariantPlacement = function getVariantPlacement(variant) {
 
   switch (variant) {
     case "Bottom":
-      placement = "absolute block z-10 top-full left-1/2 translate-x-[-50%]";
+      placement = "hplxt-absolute hplxt-block hplxt-z-10 hplxt-top-full hplxt-left-1/2 hplxt-translate-x-[-50%]";
       break;
 
     case "Left":
-      placement = "absolute block z-10 right-full top-1/2 translate-y-[-50%]";
+      placement = "hplxt-absolute hplxt-block hplxt-z-10 hplxt-right-full hplxt-top-1/2 hplxt-translate-y-[-50%]";
       break;
 
     case "Right":
-      placement = "absolute block z-10 left-full top-1/2 translate-y-[-50%]";
+      placement = "hplxt-absolute hplxt-block hplxt-z-10 hplxt-left-full hplxt-top-1/2 hplxt-translate-y-[-50%]";
       break;
 
     case "Top":
-      placement = "absolute block z-10 bottom-full left-1/2 translate-x-[-50%]";
+      placement = "hplxt-absolute hplxt-block hplxt-z-10 hplxt-bottom-full hplxt-left-1/2 hplxt-translate-x-[-50%]";
       break;
 
     case "Top end":
-      placement = "absolute block z-10 bottom-full left-full";
+      placement = "hplxt-absolute hplxt-block hplxt-z-10 hplxt-bottom-full hplxt-left-full";
       break;
 
     case "Top start":
-      placement = "absolute block z-10 bottom-full left-0";
+      placement = "hplxt-absolute hplxt-block hplxt-z-10 hplxt-bottom-full hplxt-left-0";
       break;
 
     default:
-      placement = "absolute block z-10 bottom-full left-1/2 translate-x-[-50%]";
+      placement = "hplxt-absolute hplxt-block hplxt-z-10 hplxt-bottom-full hplxt-left-1/2 hplxt-translate-x-[-50%]";
       break;
   }
 
@@ -2846,31 +2848,31 @@ var getVariantMessagePlacement = function getVariantMessagePlacement(variant) {
 
   switch (variant) {
     case "Bottom":
-      placement = "mt-3 ";
+      placement = "hplxt-mt-3 ";
       break;
 
     case "Left":
-      placement = "mr-3";
+      placement = "hplxt-mr-3";
       break;
 
     case "Right":
-      placement = "ml-3";
+      placement = "hplxt-ml-3";
       break;
 
     case "Top":
-      placement = "mb-3";
+      placement = "hplxt-mb-3";
       break;
 
     case "Top end":
-      placement = "mb-3 -ml-4";
+      placement = "hplxt-mb-3 -hplxt-ml-4";
       break;
 
     case "Top start":
-      placement = "mb-3 -ml-4";
+      placement = "hplxt-mb-3 -hplxt-ml-4";
       break;
 
     default:
-      placement = "mb-3";
+      placement = "hplxt-mb-3";
       break;
   }
 
@@ -2882,31 +2884,31 @@ var getVariantArrowPlacement = function getVariantArrowPlacement(variant) {
 
   switch (variant) {
     case "Bottom":
-      placement = "top-2 left-1/2 translate-x-[-50%]";
+      placement = "hplxt-top-2 hplxt-left-1/2 hplxt-translate-x-[-50%]";
       break;
 
     case "Left":
-      placement = "right-2 top-1/2 translate-y-[-50%]";
+      placement = "hplxt-right-2 hplxt-top-1/2 hplxt-translate-y-[-50%]";
       break;
 
     case "Right":
-      placement = "left-2 top-1/2 translate-y-[-50%]";
+      placement = "hplxt-left-2 hplxt-top-1/2 hplxt-translate-y-[-50%]";
       break;
 
     case "Top":
-      placement = "bottom-2 left-1/2 translate-x-[-50%]";
+      placement = "hplxt-bottom-2 hplxt-left-1/2 hplxt-translate-x-[-50%]";
       break;
 
     case "Top start":
-      placement = "bottom-2 -left-1.5";
+      placement = "hplxt-bottom-2 -hplxt-left-1.5";
       break;
 
     case "Top end":
-      placement = "bottom-2 -left-1.5";
+      placement = "hplxt-bottom-2 -hplxt-left-1.5";
       break;
 
     default:
-      placement = "hidden";
+      placement = "hplxt-hidden";
       break;
   }
 
@@ -2918,15 +2920,15 @@ var getTheme = function getTheme(theme) {
 
   switch (theme) {
     case "dark":
-      t = "text-White bg-Gray-900";
+      t = "hplxt-text-White hplxt-bg-Gray-900";
       break;
 
     case "light":
-      t = "bg-White text:Gray-700";
+      t = "hplxt-bg-White text:hplxt-Gray-700";
       break;
 
     default:
-      t = "bg-White text:Gray-700";
+      t = "hplxt-bg-White text:hplxt-Gray-700";
       break;
   }
 
@@ -2948,7 +2950,7 @@ var Tooltip = function Tooltip(props) {
       supportingText = _b.supportingText;
 
   return jsxRuntime.exports.jsxs("div", __assign({
-    className: "relative inline-block",
+    className: "hplxt-relative hplxt-inline-block",
     onMouseEnter: function onMouseEnter() {
       return setActive(true);
     },
@@ -2957,11 +2959,11 @@ var Tooltip = function Tooltip(props) {
     }
   }, {
     children: [children, jsxRuntime.exports.jsxs("div", __assign({
-      className: "w-max text-left max-w-xs ".concat(getVariantPlacement(variant))
+      className: "hplxt-w-max hplxt-text-left hplxt-max-w-xs ".concat(getVariantPlacement(variant))
     }, {
       children: [// using short circuit operator to show the tooltip //{`${getVariantMessagePlacement(variant)}`}
       active && (text || supportingText) && jsxRuntime.exports.jsxs("div", __assign({
-        className: "px-3 py-2 shadow-lg rounded-lg ".concat(getTheme(theme), " ").concat(getVariantMessagePlacement(variant))
+        className: "hplxt-px-3 hplxt-py-2 hplxt-shadow-lg hplxt-rounded-lg ".concat(getTheme(theme), " ").concat(getVariantMessagePlacement(variant))
       }, {
         children: [jsxRuntime.exports.jsx(Typography, __assign({
           variant: "Medium",
@@ -2976,7 +2978,7 @@ var Tooltip = function Tooltip(props) {
         }))]
       })), // using short circuit operator to show the tooltip arrow
       active && variant && (text || supportingText) && jsxRuntime.exports.jsx("div", {
-        className: "absolute w-3 h-3 rotate-45 ".concat(getTheme(theme), " ").concat(getVariantArrowPlacement(variant))
+        className: "hplxt-absolute hplxt-w-3 hplxt-h-3 hplxt-rotate-45 ".concat(getTheme(theme), " ").concat(getVariantArrowPlacement(variant))
       })]
     }))]
   }));
@@ -3011,13 +3013,13 @@ var ProgressBar = function ProgressBar(_a) {
     }
   }, [hovered]);
   return jsxRuntime.exports.jsxs("div", __assign({
-    className: "flex ".concat(label === "Bottom" ? "flex-col" : "flex-row items-center")
+    className: "hplxt-flex ".concat(label === "Bottom" ? "hplxt-flex-col" : "hplxt-flex-row hplxt-items-center")
   }, {
     children: [jsxRuntime.exports.jsxs("div", __assign({}, ProgressBarProps, {
-      className: "w-full h-2 rounded relative"
+      className: "hplxt-w-full hplxt-h-2 hplxt-rounded hplxt-relative"
     }, {
       children: [jsxRuntime.exports.jsx("div", {
-        className: "absolute top-0 left-0 right-0 bg-Primary-50 bottom-0"
+        className: "hplxt-absolute hplxt-top-0 hplxt-left-0 hplxt-right-0 hplxt-bg-Primary-50 hplxt-bottom-0"
       }), jsxRuntime.exports.jsx("div", __assign({
         "data-testid": "progressbar",
         onMouseEnter: function onMouseEnter() {
@@ -3029,7 +3031,7 @@ var ProgressBar = function ProgressBar(_a) {
         style: {
           right: "".concat(100 - progress, "%")
         },
-        className: "absolute top-0 left-0 bottom-0 bg-Primary-600 ease-linear	duration-200 rounded flex justify-end"
+        className: "hplxt-absolute hplxt-top-0 hplxt-left-0 hplxt-bottom-0 hplxt-bg-Primary-600 hplxt-ease-linear	hplxt-duration-200 hplxt-rounded hplxt-flex hplxt-justify-end"
       }, {
         children: (label === "Top floating" || label === "Bottom floating") && jsxRuntime.exports.jsx(Tooltip, __assign({
           "data-testid": "tooltip",
@@ -3037,13 +3039,13 @@ var ProgressBar = function ProgressBar(_a) {
           text: "".concat(progress, "%")
         }, {
           children: jsxRuntime.exports.jsx("div", {
-            className: "w-2 h-2",
+            className: "hplxt-w-2 hplxt-h-2",
             ref: tooltipRef
           })
         }))
       }))]
     })), label === "Right" && jsxRuntime.exports.jsx("div", __assign({
-      className: "ml-2 w-10"
+      className: "hplxt-ml-2 hplxt-w-10"
     }, {
       children: jsxRuntime.exports.jsxs(Typography, __assign({
         type: "Text sm",
@@ -3052,7 +3054,7 @@ var ProgressBar = function ProgressBar(_a) {
         children: [progress, "%"]
       }))
     })), label === "Bottom" && jsxRuntime.exports.jsx("div", __assign({
-      className: "ml-auto"
+      className: "hplxt-ml-auto"
     }, {
       children: jsxRuntime.exports.jsxs(Typography, __assign({
         type: "Text sm",
@@ -3147,21 +3149,21 @@ var ProgressCircle = function ProgressCircle(_a) {
       dashOffset = dashArray * ((100 - (shape === "Half circle" ? progress / 2 : progress)) / 100);
   return jsxRuntime.exports.jsx(jsxRuntime.exports.Fragment, {
     children: jsxRuntime.exports.jsxs("div", __assign({
-      className: "relative",
+      className: "hplxt-relative",
       style: {
         width: sizeNumber,
         height: shape === "Half circle" ? sizeNumber / 2 + trackWidth / 2 : sizeNumber
       }
     }, {
       children: [jsxRuntime.exports.jsxs("svg", __assign({
-        className: shape === "Half circle" ? "-rotate-180" : "-rotate-90",
+        className: shape === "Half circle" ? "-hplxt-rotate-180" : "-hplxt-rotate-90",
         style: {
           width: sizeNumber,
           height: shape === "Half circle" ? sizeNumber / 2 + trackWidth / 2 : sizeNumber
         }
       }, {
         children: [jsxRuntime.exports.jsx("circle", {
-          className: "stroke-Primary-50",
+          className: "hplxt-stroke-Primary-50",
           cx: center,
           cy: shape === "Half circle" ? trackWidth / 2 : center,
           fill: "transparent",
@@ -3171,7 +3173,7 @@ var ProgressCircle = function ProgressCircle(_a) {
           strokeDashoffset: shape === "Half circle" ? dashArray / 2 : dashArray * 2,
           strokeLinecap: "round"
         }), jsxRuntime.exports.jsx("circle", {
-          className: "".concat(spinnerMode && shape !== "Half circle" ? "animate-spin origin-center" : "ease-linear	duration-200", " stroke-Primary-600"),
+          className: "".concat(spinnerMode && shape !== "Half circle" ? "hplxt-animate-spin hplxt-origin-center" : "hplxt-ease-linear	hplxt-duration-200", " hplxt-stroke-Primary-600"),
           cx: center,
           cy: shape === "Half circle" ? trackWidth / 2 : center,
           fill: "transparent",
@@ -3182,10 +3184,10 @@ var ProgressCircle = function ProgressCircle(_a) {
           strokeLinecap: "round"
         })]
       })), jsxRuntime.exports.jsxs("div", __assign({
-        className: "absolute ".concat(shape === "Half circle" ? "bottom-0" : "top-1/2 translate-y-[-50%]", " left-1/2 translate-x-[-50%]  text-center")
+        className: "hplxt-absolute ".concat(shape === "Half circle" ? "hplxt-bottom-0" : "hplxt-top-1/2 hplxt-translate-y-[-50%]", " hplxt-left-1/2 hplxt-translate-x-[-50%]  hplxt-text-center")
       }, {
         children: [Boolean(label) && size !== "xxs" && jsxRuntime.exports.jsx("div", __assign({
-          className: "text-Gray-500"
+          className: "hplxt-text-Gray-500"
         }, {
           children: jsxRuntime.exports.jsx(Typography, __assign({
             variant: "Medium",
@@ -3194,7 +3196,7 @@ var ProgressCircle = function ProgressCircle(_a) {
             children: label
           }))
         })), (!spinnerMode || shape === "Half circle") && jsxRuntime.exports.jsx("div", __assign({
-          className: "text-Gray-900"
+          className: "hplxt-text-Gray-900"
         }, {
           children: jsxRuntime.exports.jsx(Typography, __assign({
             type: textType,
@@ -3250,39 +3252,39 @@ if (NOT_GENERIC || INCORRECT_NAME) {
 var getHierarchyClassName = function getHierarchyClassName(hierarchy, disabled) {
   switch (hierarchy) {
     case "Primary":
-      return disabled ? "bg-Primary-200 text-White content-center" //Disabled Primary Button
-      : "bg-Primary-600 active:bg-Primary-600 hover:bg-Primary-700 focus:outline-bg-Primary-200 focus:ring shadow-xs text-White";
+      return disabled ? "hplxt-bg-Primary-200 hplxt-text-White hplxt-content-center" //Disabled Primary Button
+      : "hplxt-bg-Primary-600 active:hplxt-bg-Primary-600 hover:hplxt-bg-Primary-700 focus:hplxt-outline-bg-Primary-200 focus:hplxt-ring hplxt-shadow-xs hplxt-text-White";
 
     case "Secondary":
-      return disabled ? "bg-Primary-25 text-Primary-300" //Disabled Secondary Button
-      : "bg-Primary-50 active:bg-Primary-50 hover:bg-Primary-100 focus:outline-bg-Primary-200 focus:ring shadow-xs text-Primary-700";
+      return disabled ? "hplxt-bg-Primary-25 hplxt-text-Primary-300" //Disabled Secondary Button
+      : "hplxt-bg-Primary-50 active:hplxt-bg-Primary-50 hover:hplxt-bg-Primary-100 focus:hplxt-outline-bg-Primary-200 focus:hplxt-ring hplxt-shadow-xs hplxt-text-Primary-700";
 
     case "Secondary-Grey":
-      return disabled ? "bg-White text-Gray-300 border-solid border border-Gray-200" //Disabled Secondary-Grey Button
-      : "bg-white border-solid border border-Gray-300 active:bg-white hover:bg-Gray-25 focus shadow-xs text-Gray-700";
+      return disabled ? "hplxt-bg-White hplxt-text-Gray-300 hplxt-border-solid hplxt-border hplxt-border-Gray-200" //Disabled Secondary-Grey Button
+      : "hplxt-bg-white hplxt-border-solid hplxt-border hplxt-border-Gray-300 active:hplxt-bg-white hover:hplxt-bg-Gray-25 focus hplxt-shadow-xs hplxt-text-Gray-700";
 
     case "Secondary-Grey-Dashed":
-      return disabled ? "bg-White text-Gray-300 border-solid border border-Gray-200" //Disabled Secondary-Grey Button
-      : "bg-Gray-25 border-dashed border border-Gray-200 focus shadow-xs text-Gray-700";
+      return disabled ? "hplxt-bg-White hplxt-text-Gray-300 hplxt-border-solid hplxt-border hplxt-border-Gray-200" //Disabled Secondary-Grey Button
+      : "hplxt-bg-Gray-25 hplxt-border-dashed hplxt-border hplxt-border-Gray-200 focus hplxt-shadow-xs hplxt-text-Gray-700";
 
     case "Tertiary":
-      return disabled ? "text-Gray-300" //Disabled Tertiary Button
-      : "active:bg-white hover:bg-Primary-50 focus text-Primary-700";
+      return disabled ? "hplxt-text-Gray-300" //Disabled Tertiary Button
+      : "active:hplxt-bg-white hover:hplxt-bg-Primary-50 focus hplxt-text-Primary-700";
 
     case "Tertiary-Grey":
-      return disabled ? "text-Gray-300" //Disabled Tertiary-Grey Button
-      : "active:bg-white hover:bg-Gray-50 focus text-Gray-700";
+      return disabled ? "hplxt-text-Gray-300" //Disabled Tertiary-Grey Button
+      : "active:hplxt-bg-white hover:hplxt-bg-Gray-50 focus hplxt-text-Gray-700";
 
     case "Link-Colour":
-      return disabled ? "text-Gray-300" //Disabled Link-Colour Button
-      : "text-Primary-700 active:bg-white hover:text-Primary-800 focus:text-Primary-700 ";
+      return disabled ? "hplxt-text-Gray-300" //Disabled Link-Colour Button
+      : "hplxt-text-Primary-700 active:hplxt-bg-white hover:hplxt-text-Primary-800 focus:hplxt-text-Primary-700 ";
 
     case "Link-Grey":
-      return disabled ? "text-Gray-300" //Disabled Link-Grey Button
-      : "text-Gray-500 active:bg-white hover:text-Gray-700";
+      return disabled ? "hplxt-text-Gray-300" //Disabled Link-Grey Button
+      : "hplxt-text-Gray-500 active:hplxt-bg-white hover:hplxt-text-Gray-700";
 
     default:
-      return "bg-Primary-600 active:bg-Primary-600 hover:bg-Primary-700 focus:outline-bg-Primary-200 focus:ring shadow-xs text-White";
+      return "hplxt-bg-Primary-600 active:hplxt-bg-Primary-600 hover:hplxt-bg-Primary-700 focus:hplxt-outline-bg-Primary-200 focus:hplxt-ring hplxt-shadow-xs hplxt-text-White";
   }
 }; //getSizeClassName is used to get the size of the button
 
@@ -3313,22 +3315,22 @@ var getSizeClassName$5 = function getSizeClassName(size) {
 var getPaddingClassName$3 = function getPaddingClassName(size, icon, iconFile) {
   switch (size) {
     case "sm":
-      return icon && iconFile && icon === "Only" ? "h-8 w-[34px] px-[5.8px]" : "h-8 px-4";
+      return icon && iconFile && icon === "Only" ? "hplxt-h-8 hplxt-w-[34px] hplxt-px-[5.8px]" : "hplxt-h-8 hplxt-px-4";
 
     case "md":
-      return icon && iconFile && icon === "Only" ? "h-9 w-[42px] px-[9.8px]" : "h-9 px-4";
+      return icon && iconFile && icon === "Only" ? "hplxt-h-9 hplxt-w-[42px] hplxt-px-[9.8px]" : "hplxt-h-9 hplxt-px-4";
 
     case "lg":
-      return icon && iconFile && icon === "Only" ? "h-10 w-[42px] px-[9.8px]" : "h-10 px-4";
+      return icon && iconFile && icon === "Only" ? "hplxt-h-10 hplxt-w-[42px] hplxt-px-[9.8px]" : "hplxt-h-10 hplxt-px-4";
 
     case "xl":
-      return icon && iconFile && icon === "Only" ? "h-11 w-[46px] px-[11.8px]" : "h-11 px-4";
+      return icon && iconFile && icon === "Only" ? "hplxt-h-11 hplxt-w-[46px] hplxt-px-[11.8px]" : "hplxt-h-11 hplxt-px-4";
 
     case "2xl":
-      return icon && iconFile && icon === "Only" ? "h-12 w-[50px] px-[13.8px]" : "h-12 px-4";
+      return icon && iconFile && icon === "Only" ? "hplxt-h-12 hplxt-w-[50px] hplxt-px-[13.8px]" : "hplxt-h-12 hplxt-px-4";
 
     default:
-      return icon && iconFile && icon === "Only" ? "h-8 w-[34px] px-[5.8px]" : "h-8 px-4";
+      return icon && iconFile && icon === "Only" ? "hplxt-h-8 hplxt-w-[34px] hplxt-px-[5.8px]" : "hplxt-h-8 hplxt-px-4";
   }
 };
 
@@ -3345,7 +3347,7 @@ var Button = function Button(_a) {
       buttonProps = __rest(_a, ["hierarchy", "size", "textField", "icon", "iconFile", "disabled", "children", "className"]);
 
   return jsxRuntime.exports.jsxs("button", __assign({
-    className: "truncate text-center inline-flex items-center ".concat(getHierarchyClassName(hierarchy, disabled), " ").concat(getPaddingClassName$3(size, icon, iconFile), " rounded-lg ").concat(className),
+    className: "hplxt-truncate hplxt-text-center hplxt-inline-flex hplxt-items-center ".concat(getHierarchyClassName(hierarchy, disabled), " ").concat(getPaddingClassName$3(size, icon, iconFile), " hplxt-rounded-lg ").concat(className),
     disabled: disabled
   }, buttonProps, {
     children: [icon && iconFile && icon === "Left" && jsxRuntime.exports.jsx("span", {
@@ -3380,18 +3382,18 @@ var getSizeClassName$4 = function getSizeClassName(size) {
 var getPaddingClassName$2 = function getPaddingClassName(size) {
   switch (size) {
     case "sm":
-      return "w-4 h-4 mr-2 gap-1 text-[14px] rounded-[4px]";
+      return "hplxt-w-4 hplxt-h-4 hplxt-mr-2 hplxt-gap-1 hplxt-text-[14px] hplxt-rounded-[4px]";
 
     case "md":
-      return "w-5 h-5 mr-3 gap-2 text-[18px] rounded-[6px]";
+      return "hplxt-w-5 hplxt-h-5 hplxt-mr-3 hplxt-gap-2 hplxt-text-[18px] hplxt-rounded-[6px]";
 
     default:
-      return "gap-1";
+      return "hplxt-gap-1";
   }
 };
 
 var getLabelStyle$2 = function getLabelStyle(disabled) {
-  return disabled ? "flex flex-col text-Gray-300" : "flex flex-col text-Gray-700";
+  return disabled ? "hplxt-flex hplxt-flex-col hplxt-text-Gray-300" : "hplxt-flex hplxt-flex-col hplxt-text-Gray-700";
 };
 
 var Checkbox = function Checkbox(_a) {
@@ -3416,11 +3418,11 @@ var Checkbox = function Checkbox(_a) {
   };
 
   return jsxRuntime.exports.jsxs("div", __assign({
-    className: "flex"
+    className: "hplxt-flex"
   }, {
     children: [jsxRuntime.exports.jsx("div", {
       "data-testid": "box",
-      className: "".concat(disabled ? "".concat(getPaddingClassName$2(size), " text-Gray-200 bg-Gray-100 border-1 border-Gray-200") : "".concat(isChecked ? "hx_checkmark text-Primary-600 border-Primary-600 bg-Primary-50" : "bg-Gray-100 border-Gray-300", " ").concat(getPaddingClassName$2(size), " flex justify-center items-center border-1 hover:text-Primary-600 hover:border-Primary-600 hover:bg-Primary-50 active:ring-4 active:ring-Primary-100"), "}"),
+      className: "".concat(disabled ? "".concat(getPaddingClassName$2(size), " hplxt-text-Gray-200 hplxt-bg-Gray-100 hplxt-border-1 hplxt-border-Gray-200") : "".concat(isChecked ? "hx_checkmark hplxt-text-Primary-600 hplxt-border-Primary-600 hplxt-bg-Primary-50" : "hplxt-bg-Gray-100 hplxt-border-Gray-300", " ").concat(getPaddingClassName$2(size), " hplxt-flex hplxt-justify-center hplxt-items-center hplxt-border-1 hover:hplxt-text-Primary-600 hover:hplxt-border-Primary-600 hover:hplxt-bg-Primary-50 active:hplxt-ring-4 active:hplxt-ring-Primary-100"), "}"),
       onClick: disabled ? undefined : OnButtonClick,
       style: {
         fontWeight: 1000
@@ -3453,42 +3455,42 @@ var getSize = function getSize(size) {
 
   switch (size) {
     case "Display xs":
-      s = "w-16 h-16";
+      s = "hplxt-w-16 hplxt-h-16";
       p = 32;
       break;
 
     case "Text xl":
-      s = "w-14 h-14";
+      s = "hplxt-w-14 hplxt-h-14";
       p = 28;
       break;
 
     case "Text lg":
-      s = "w-12 h-12";
+      s = "hplxt-w-12 hplxt-h-12";
       p = 24;
       break;
 
     case "Text md":
-      s = "w-10 h-10";
+      s = "hplxt-w-10 hplxt-h-10";
       p = 20;
       break;
 
     case "Text sm":
-      s = "w-8 h-8";
+      s = "hplxt-w-8 hplxt-h-8";
       p = 16;
       break;
 
     case "Text xs":
-      s = "w-6 h-6";
+      s = "hplxt-w-6 hplxt-h-6";
       p = 12;
       break;
 
     case "Text xxs":
-      s = "w-4 h-4";
+      s = "hplxt-w-4 hplxt-h-4";
       p = 8;
       break;
 
     default:
-      s = "w-10 h-10";
+      s = "hplxt-w-10 hplxt-h-10";
       p = 20;
       break;
   }
@@ -3505,42 +3507,42 @@ var getStatusSize = function getStatusSize(size) {
 
   switch (size) {
     case "Display xs":
-      s = "w-5 h-5";
+      s = "hplxt-w-5 hplxt-h-5";
       p = 10;
       break;
 
     case "Text xl":
-      s = "w-[18px] h-[18px]";
+      s = "hplxt-w-[18px] hplxt-h-[18px]";
       p = 9;
       break;
 
     case "Text lg":
-      s = "w-4 h-4";
+      s = "hplxt-w-4 hplxt-h-4";
       p = 8;
       break;
 
     case "Text md":
-      s = "w-3.5 h-3.5";
+      s = "hplxt-w-3.5 hplxt-h-3.5";
       p = 7;
       break;
 
     case "Text sm":
-      s = "w-3 h-3";
+      s = "hplxt-w-3 hplxt-h-3";
       p = 6;
       break;
 
     case "Text xs":
-      s = "w-2.5 h-2.5";
+      s = "hplxt-w-2.5 hplxt-h-2.5";
       p = 5;
       break;
 
     case "Text xxs":
-      s = "w-2 h-2";
+      s = "hplxt-w-2 hplxt-h-2";
       p = 4;
       break;
 
     default:
-      s = "w-3.5 h-3.5";
+      s = "hplxt-w-3.5 hplxt-h-3.5";
       p = 7;
       break;
   }
@@ -3562,7 +3564,7 @@ function Status(props) {
   if (statusIcon === "online") {
     return jsxRuntime.exports.jsx("div", {
       "data-testid": "status-online",
-      className: "".concat(sizeClassName, " rounded-full bg-Success-500 border-White border-1")
+      className: "".concat(sizeClassName, " hplxt-rounded-full hplxt-bg-Success-500 hplxt-border-White hplxt-border-1")
     });
   } //  Offline status
 
@@ -3570,7 +3572,7 @@ function Status(props) {
   if (statusIcon === "offline") {
     return jsxRuntime.exports.jsx("div", {
       "data-testid": "status-offline",
-      className: "".concat(sizeClassName, " rounded-full bg-Gray-300 border-White border-1")
+      className: "".concat(sizeClassName, " hplxt-rounded-full hplxt-bg-Gray-300 hplxt-border-White hplxt-border-1")
     });
   } // Healthplix company logo
 
@@ -3608,7 +3610,7 @@ function Icon(props) {
   if (placeholder === true && text === false) {
     return jsxRuntime.exports.jsx("div", {
       "data-testid": "icon-abstract",
-      className: "hx_person text-Primary-700"
+      className: "hx_person hplxt-text-Primary-700"
     });
   } //actual user image
 
@@ -3621,12 +3623,12 @@ function Icon(props) {
 
     return hasError ? jsxRuntime.exports.jsx("div", {
       "data-testid": "icon-abstract",
-      className: "hx_person text-Primary-700"
+      className: "hx_person hplxt-text-Primary-700"
     }) : jsxRuntime.exports.jsx("img", {
       "data-testid": "icon-img",
       src: url,
       alt: name,
-      className: "w-[100%] h-[100%]",
+      className: "hplxt-w-[100%] hplxt-h-[100%]",
       onError: function onError() {
         return setHasError_1(true);
       }
@@ -3637,12 +3639,12 @@ function Icon(props) {
   if (name !== "" && text === true && placeholder === false) {
     return jsxRuntime.exports.jsx(Typography, __assign({
       "data-testid": "icon-initial",
-      className: "uppercase",
+      className: "hplxt-uppercase",
       variant: "Medium",
       type: size
     }, {
       children: jsxRuntime.exports.jsx("div", __assign({
-        className: "text-Primary-600"
+        className: "hplxt-text-Primary-600"
       }, {
         children: name.split(" ").map(function (n) {
           return n[0];
@@ -3652,7 +3654,7 @@ function Icon(props) {
   } else {
     return jsxRuntime.exports.jsx("div", {
       "data-testid": "icon-abstract",
-      className: "hx_person text-Primary-700"
+      className: "hx_person hplxt-text-Primary-700"
     });
   }
 }
@@ -3660,7 +3662,7 @@ function Icon(props) {
 var Avatar = function Avatar(props) {
   var _a = props || {},
       _b = _a.shape,
-      shape = _b === void 0 ? "rounded-full" : _b,
+      shape = _b === void 0 ? "hplxt-rounded-full" : _b,
       _c = _a.name,
       name = _c === void 0 ? "" : _c,
       _d = _a.url,
@@ -3681,10 +3683,10 @@ var Avatar = function Avatar(props) {
 
   var sizeStatusClassName = getStatusSize(size).s;
   return jsxRuntime.exports.jsxs("div", __assign({
-    className: "relative inline-block"
+    className: "hplxt-relative hplxt-inline-block"
   }, {
     children: [jsxRuntime.exports.jsx("div", __assign({
-      className: "".concat(sizeClassName, " ").concat(shape, " flex justify-center items-center bg-Primary-50 active:ring-4 active:ring-Primary-100 overflow-hidden")
+      className: "".concat(sizeClassName, " ").concat(shape, " hplxt-flex hplxt-justify-center hplxt-items-center hplxt-bg-Primary-50 active:hplxt-ring-4 active:hplxt-ring-Primary-100 hplxt-overflow-hidden")
     }, {
       children: jsxRuntime.exports.jsx(Icon, {
         text: text,
@@ -3694,10 +3696,10 @@ var Avatar = function Avatar(props) {
         size: size
       })
     })), jsxRuntime.exports.jsx("div", __assign({
-      className: " absolute ",
+      className: " hplxt-absolute ",
       style: {
-        bottom: shape !== "rounded-full" ? 0 : sizePixels - 4 + sizePixels * Math.cos(ICON_ANGLE * Math.PI / 180),
-        left: shape !== "rounded-full" ? 2 * sizePixels * Math.sin(ICON_ANGLE * Math.PI / 180) : sizePixels - 4 + sizePixels * Math.sin(ICON_ANGLE * Math.PI / 180)
+        bottom: shape !== "hplxt-rounded-full" ? 0 : sizePixels - 4 + sizePixels * Math.cos(ICON_ANGLE * Math.PI / 180),
+        left: shape !== "hplxt-rounded-full" ? 2 * sizePixels * Math.sin(ICON_ANGLE * Math.PI / 180) : sizePixels - 4 + sizePixels * Math.sin(ICON_ANGLE * Math.PI / 180)
       }
     }, {
       children: jsxRuntime.exports.jsx(Status, {
@@ -3715,59 +3717,59 @@ var getColourClassName = function getColourClassName(colour) {
 
   switch (colour) {
     case "Gray":
-      className = "bg-Gray-100 text-Gray-700 ";
+      className = "hplxt-bg-Gray-100 hplxt-text-Gray-700 ";
       break;
 
     case "Primary":
-      className = "bg-Primary-50 text-Primary-700";
+      className = "hplxt-bg-Primary-50 hplxt-text-Primary-700";
       break;
 
     case "Error":
-      className = "bg-Error-50 text-Error-700";
+      className = "hplxt-bg-Error-50 hplxt-text-Error-700";
       break;
 
     case "Warning":
-      className = "bg-Warning-50 text-Warning-700";
+      className = "hplxt-bg-Warning-50 hplxt-text-Warning-700";
       break;
 
     case "Success":
-      className = "bg-Success-50 text-Success-700";
+      className = "hplxt-bg-Success-50 hplxt-text-Success-700";
       break;
 
     case "BlueGray":
-      className = "bg-Blue_gray-50 text-Blue_gray-700";
+      className = "hplxt-bg-Blue_gray-50 hplxt-text-Blue_gray-700";
       break;
 
     case "Default":
-      className = "bg-Blue_light-50 text-Blue_light-700 ";
+      className = "hplxt-bg-Blue_light-50 hplxt-text-Blue_light-700 ";
       break;
 
     case "Blue":
-      className = "bg-Blue-50 text-Blue-700";
+      className = "hplxt-bg-Blue-50 hplxt-text-Blue-700";
       break;
 
     case "Indigo":
-      className = "bg-Indigo-50 text-Indigo-700";
+      className = "hplxt-bg-Indigo-50 hplxt-text-Indigo-700";
       break;
 
     case "Purple":
-      className = "bg-Purple-50 text-Purple-700";
+      className = "hplxt-bg-Purple-50 hplxt-text-Purple-700";
       break;
 
     case "Pink":
-      className = "bg-Pink-50 text-Pink-700";
+      className = "hplxt-bg-Pink-50 hplxt-text-Pink-700";
       break;
 
     case "Rose":
-      className = "bg-Rose-50 text-Rose-700";
+      className = "hplxt-bg-Rose-50 hplxt-text-Rose-700";
       break;
 
     case "Orange":
-      className = "bg-Orange-50 text-Orange-700";
+      className = "hplxt-bg-Orange-50 hplxt-text-Orange-700";
       break;
 
     default:
-      className = "bg-Blue_light-50 text-Blue_light-700";
+      className = "hplxt-bg-Blue_light-50 hplxt-text-Blue_light-700";
       break;
   }
 
@@ -3778,13 +3780,13 @@ var getColourClassName1 = function getColourClassName1(colour, theme) {
     case "Gray":
       switch (theme) {
         case "Dark":
-          return "bg-Gray-50 text-Gray-700 ";
+          return "hplxt-bg-Gray-50 hplxt-text-Gray-700 ";
 
         case "Medium":
-          return "bg-Gray-100 text-Gray-700";
+          return "hplxt-bg-Gray-100 hplxt-text-Gray-700";
 
         case "Light":
-          return "bg-Gray-50 text-Gray-700";
+          return "hplxt-bg-Gray-50 hplxt-text-Gray-700";
 
         default:
           return "";
@@ -3793,13 +3795,13 @@ var getColourClassName1 = function getColourClassName1(colour, theme) {
     case "Primary":
       switch (theme) {
         case "Dark":
-          return "bg-Primary-50 text-Primary-700";
+          return "hplxt-bg-Primary-50 hplxt-text-Primary-700";
 
         case "Medium":
-          return "bg-Primary-100 text-Primary-700";
+          return "hplxt-bg-Primary-100 hplxt-text-Primary-700";
 
         case "Light":
-          return "bg-Primary-50 text-Primary-700";
+          return "hplxt-bg-Primary-50 hplxt-text-Primary-700";
 
         default:
           return "";
@@ -3808,13 +3810,13 @@ var getColourClassName1 = function getColourClassName1(colour, theme) {
     case "Error":
       switch (theme) {
         case "Dark":
-          return "bg-Error-50 text-Error-700";
+          return "hplxt-bg-Error-50 hplxt-text-Error-700";
 
         case "Medium":
-          return "bg-Error-100 text-Error-700";
+          return "hplxt-bg-Error-100 hplxt-text-Error-700";
 
         case "Light":
-          return "bg-Error-50 text-Error-700";
+          return "hplxt-bg-Error-50 hplxt-text-Error-700";
 
         default:
           return "";
@@ -3823,13 +3825,13 @@ var getColourClassName1 = function getColourClassName1(colour, theme) {
     case "Warning":
       switch (theme) {
         case "Dark":
-          return "bg-Warning-50 text-Warning-700";
+          return "hplxt-bg-Warning-50 hplxt-text-Warning-700";
 
         case "Medium":
-          return "bg-Warning-100 text-Warning-700";
+          return "hplxt-bg-Warning-100 hplxt-text-Warning-700";
 
         case "Light":
-          return "bg-Warning-50 text-Warning-700";
+          return "hplxt-bg-Warning-50 hplxt-text-Warning-700";
 
         default:
           return "";
@@ -3838,20 +3840,20 @@ var getColourClassName1 = function getColourClassName1(colour, theme) {
     case "Success":
       switch (theme) {
         case "Dark":
-          return "bg-Success-50 text-Success-700";
+          return "hplxt-bg-Success-50 hplxt-text-Success-700";
 
         case "Medium":
-          return "bg-Success-100 text-Success-700";
+          return "hplxt-bg-Success-100 hplxt-text-Success-700";
 
         case "Light":
-          return "bg-Success-50 text-Success-700";
+          return "hplxt-bg-Success-50 hplxt-text-Success-700";
 
         default:
           return "";
       }
 
     default:
-      return "bg-Primary-100 text-Primary-700";
+      return "hplxt-bg-Primary-100 hplxt-text-Primary-700";
   }
 };
 var getColourClassName2 = function getColourClassName2(colour, theme) {
@@ -3859,13 +3861,13 @@ var getColourClassName2 = function getColourClassName2(colour, theme) {
     case "Gray":
       switch (theme) {
         case "Dark":
-          return "bg-Gray-600 text-White";
+          return "hplxt-bg-Gray-600 hplxt-text-White";
 
         case "Medium":
-          return "bg-Gray-50 text-Gray700";
+          return "hplxt-bg-Gray-50 hplxt-text-Gray700";
 
         case "Light":
-          return "bg-White text-Gray700";
+          return "hplxt-bg-White hplxt-text-Gray700";
 
         default:
           return "";
@@ -3874,13 +3876,13 @@ var getColourClassName2 = function getColourClassName2(colour, theme) {
     case "Primary":
       switch (theme) {
         case "Dark":
-          return "bg-Primary-600 text-White";
+          return "hplxt-bg-Primary-600 hplxt-text-White";
 
         case "Medium":
-          return "bg-Primary-50 text-Primary-700";
+          return "hplxt-bg-Primary-50 hplxt-text-Primary-700";
 
         case "Light":
-          return "bg-White text-Primary-700";
+          return "hplxt-bg-White hplxt-text-Primary-700";
 
         default:
           return "";
@@ -3889,13 +3891,13 @@ var getColourClassName2 = function getColourClassName2(colour, theme) {
     case "Error":
       switch (theme) {
         case "Dark":
-          return "bg-Error-600 text-White";
+          return "hplxt-bg-Error-600 hplxt-text-White";
 
         case "Medium":
-          return "bg-Error-50 text-Error-700";
+          return "hplxt-bg-Error-50 hplxt-text-Error-700";
 
         case "Light":
-          return "bg-White text-Error-700";
+          return "hplxt-bg-White hplxt-text-Error-700";
 
         default:
           return "";
@@ -3904,13 +3906,13 @@ var getColourClassName2 = function getColourClassName2(colour, theme) {
     case "Warning":
       switch (theme) {
         case "Dark":
-          return "bg-Warning-600 text-White";
+          return "hplxt-bg-Warning-600 hplxt-text-White";
 
         case "Medium":
-          return "bg-Warning-50 text-Warning-700";
+          return "hplxt-bg-Warning-50 hplxt-text-Warning-700";
 
         case "Light":
-          return "bg-White text-Warning-700";
+          return "hplxt-bg-White hplxt-text-Warning-700";
 
         default:
           return "";
@@ -3919,20 +3921,20 @@ var getColourClassName2 = function getColourClassName2(colour, theme) {
     case "Success":
       switch (theme) {
         case "Dark":
-          return "bg-Success-600 text-White";
+          return "hplxt-bg-Success-600 hplxt-text-White";
 
         case "Medium":
-          return "bg-Success-50 text-Success-700";
+          return "hplxt-bg-Success-50 hplxt-text-Success-700";
 
         case "Light":
-          return "bg-White text-Success-700";
+          return "hplxt-bg-White hplxt-text-Success-700";
 
         default:
           return "";
       }
 
     default:
-      return "bg-Primary-50 text-Primary-700";
+      return "hplxt-bg-Primary-50 hplxt-text-Primary-700";
   }
 };
 
@@ -3941,23 +3943,23 @@ var getColourClassName2 = function getColourClassName2(colour, theme) {
 // lg-Large,
 
 var getPaddingClassName$1 = function getPaddingClassName(size) {
-  var className = "flex flex-row px-2 rounded-full justify-content-center items-center ";
+  var className = "hplxt-flex hplxt-flex-row hplxt-px-2 hplxt-rounded-full hplxt-justify-content-center hplxt-items-center ";
 
   switch (size) {
     case "sm":
-      className = className + "h-[22px]";
+      className = className + "hplxt-h-[22px]";
       break;
 
     case "md":
-      className = className + "h-6";
+      className = className + "hplxt-h-6";
       break;
 
     case "lg":
-      className = className + "h-7 ";
+      className = className + "hplxt-h-7 ";
       break;
 
     default:
-      className = className + "h-6 ";
+      className = className + "hplxt-h-6 ";
       break;
   }
 
@@ -4011,7 +4013,7 @@ var Badge = function Badge(_a) {
       children: [jsxRuntime.exports.jsx("div", {
         children: iconFile === "avatar" && icon === "Only" && jsxRuntime.exports.jsx("div", __assign({
           "data-testid": "badge-avatar",
-          className: "flex  rounded-full my-auto mx-auto px-0.5 relative items-center "
+          className: "hplxt-flex  hplxt-rounded-full hplxt-my-auto hplxt-mx-auto hplxt-px-0.5 hplxt-relative hplxt-items-center "
         }, {
           children: jsxRuntime.exports.jsx(Avatar, {
             url: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
@@ -4075,10 +4077,10 @@ var DropdownField = function DropdownField(_a) {
 
   return jsxRuntime.exports.jsxs("div", {
     children: [jsxRuntime.exports.jsx("div", __assign({
-      className: "flex justify-between"
+      className: "hplxt-flex hplxt-justify-between"
     }, {
       children: Boolean(label) && jsxRuntime.exports.jsx("div", __assign({
-        className: "text-Gray-700 mb-1"
+        className: "hplxt-text-Gray-700 hplxt-mb-1"
       }, {
         children: jsxRuntime.exports.jsx(Typography, __assign({
           type: "Text sm",
@@ -4088,14 +4090,14 @@ var DropdownField = function DropdownField(_a) {
         }))
       }))
     })), jsxRuntime.exports.jsxs("div", __assign({
-      className: "relative block"
+      className: "hplxt-relative hplxt-block"
     }, {
       children: [jsxRuntime.exports.jsxs("div", __assign({
         onClick: handleFieldClick,
-        className: "flex-1 flex items-center pl-2 placeholder:text-Gray-500 justify-between border-1 ".concat(errorMsg ? "border-Error-300" : "border-Gray-300", " shadow-xs rounded-lg  h-10 ").concat(disabled ? "bg-Gray-50 cursor-not-allowed" : "bg-White cursor-pointer ".concat(errorMsg ? "hover:shadow-xs-error" : "".concat(openDropdown ? "border-Primary-300 shadow-xs-primary" : "", " hover:border-Primary-300 hover:shadow-xs-primary")))
+        className: "hplxt-flex-1 hplxt-flex hplxt-items-center hplxt-pl-2 placeholder:hplxt-text-Gray-500 hplxt-justify-between hplxt-border-1 ".concat(errorMsg ? "hplxt-border-Error-300" : "hplxt-border-Gray-300", " hplxt-shadow-xs hplxt-rounded-lg  hplxt-h-10 ").concat(disabled ? "hplxt-bg-Gray-50 hplxt-cursor-not-allowed" : "hplxt-bg-White hplxt-cursor-pointer ".concat(errorMsg ? "hover:hplxt-shadow-xs-error" : "".concat(openDropdown ? "hplxt-border-Primary-300 hplxt-shadow-xs-primary" : "", " hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary")))
       }, {
         children: [!!value ? jsxRuntime.exports.jsx("div", __assign({
-          className: "text-Gray-900"
+          className: "hplxt-text-Gray-900"
         }, {
           children: jsxRuntime.exports.jsx(Typography, __assign({
             "data-testid": "dropdown-selected-value",
@@ -4105,7 +4107,7 @@ var DropdownField = function DropdownField(_a) {
             children: value["label"] || value["value"]
           }))
         })) : jsxRuntime.exports.jsx("div", __assign({
-          className: "text-Gray-500"
+          className: "hplxt-text-Gray-500"
         }, {
           children: jsxRuntime.exports.jsx(Typography, __assign({
             variant: "Regular",
@@ -4114,7 +4116,7 @@ var DropdownField = function DropdownField(_a) {
             children: placeholder
           }))
         })), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
-          className: "text-Gray-500 flex items-center mr-2 ease-linear duration-300 ".concat(end_icon === "hx_down" && openDropdown && "rotate-180"),
+          className: "hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-mr-2 hplxt-ease-linear hplxt-duration-300 ".concat(end_icon === "hx_down" && openDropdown && "hplxt-rotate-180"),
           "data-testid": "dropdown-selected-icon"
         }, {
           children: jsxRuntime.exports.jsx("span", {
@@ -4122,7 +4124,7 @@ var DropdownField = function DropdownField(_a) {
           })
         }))]
       })), jsxRuntime.exports.jsx("div", __assign({
-        className: "absolute mt-1 left-0 right-0 min-w-max rounded-lg bg-White overflow-y-scroll shadow-md z-10 max-h-80 ".concat(openDropdown ? "block" : "hidden")
+        className: "hplxt-absolute hplxt-mt-1 hplxt-left-0 hplxt-right-0 hplxt-min-w-max hplxt-rounded-lg hplxt-bg-White hplxt-overflow-y-scroll hplxt-shadow-md hplxt-z-10 hplxt-max-h-80 ".concat(openDropdown ? "hplxt-block" : "hplxt-hidden")
       }, {
         children: (options === null || options === void 0 ? void 0 : options.constructor) === Array && options.length ? options.map(function (option) {
           var _a = option || {},
@@ -4139,10 +4141,10 @@ var DropdownField = function DropdownField(_a) {
             }
           }));
         }) : jsxRuntime.exports.jsx("div", __assign({
-          className: "h-10 flex items-center px-2"
+          className: "hplxt-h-10 hplxt-flex hplxt-items-center hplxt-px-2"
         }, {
           children: jsxRuntime.exports.jsx("div", __assign({
-            className: "flex-1 text-Gray-700"
+            className: "hplxt-flex-1 hplxt-text-Gray-700"
           }, {
             children: jsxRuntime.exports.jsx(Typography, __assign({
               variant: "Regular",
@@ -4154,7 +4156,7 @@ var DropdownField = function DropdownField(_a) {
         }))
       }))]
     })), (Boolean(hint_text) || Boolean(errorMsg)) && jsxRuntime.exports.jsx("div", __assign({
-      className: "".concat(errorMsg ? "text-Error-500" : "text-Gray-500 mt-1")
+      className: "".concat(errorMsg ? "hplxt-text-Error-500" : "hplxt-text-Gray-500 hplxt-mt-1")
     }, {
       children: jsxRuntime.exports.jsx(Typography, __assign({
         type: "Text sm",
@@ -4178,14 +4180,14 @@ var Card = function Card(_a) {
   };
 
   return jsxRuntime.exports.jsxs("div", __assign({
-    className: "relative flex flex-col h-100 "
+    className: "hplxt-relative hplxt-flex hplxt-flex-col hplxt-h-100 "
   }, {
     children: [jsxRuntime.exports.jsx("div", __assign({
-      className: "w-full flex p-4 items-center text-center bg-Gray-100 h-20 absolute top-0"
+      className: "hplxt-w-full hplxt-flex hplxt-p-4 hplxt-items-center hplxt-text-center hplxt-bg-Gray-100 hplxt-h-20 hplxt-absolute hplxt-top-0"
     }, {
       children: title
     })), jsxRuntime.exports.jsx("div", __assign({
-      className: "overflow-y-scroll h-80 my-20"
+      className: "hplxt-overflow-y-scroll hplxt-h-80 hplxt-my-20"
     }, {
       children: jsxRuntime.exports.jsxs("div", {
         children: [jsxRuntime.exports.jsx("h3", {
@@ -4223,7 +4225,7 @@ var Card = function Card(_a) {
         })]
       })
     })), jsxRuntime.exports.jsxs("div", __assign({
-      className: "w-full  flex p-4 items-center text-center border-t border-Gray-200 h-20 absolute bottom-0"
+      className: "hplxt-w-full  hplxt-flex hplxt-p-4 hplxt-items-center hplxt-text-center hplxt-border-t hplxt-border-Gray-200 hplxt-h-20 hplxt-absolute hplxt-bottom-0"
     }, {
       children: ["footer", jsxRuntime.exports.jsx(Button, {
         hierarchy: "Primary",
@@ -4239,19 +4241,19 @@ var Card = function Card(_a) {
 var getPostionClassName = function getPostionClassName(directionClass) {
   switch (directionClass) {
     case "lefttrue":
-      return "w-72 -mr-72";
+      return "hplxt-w-72 -hplxt-mr-72";
 
     case "leftfalse":
-      return "w-16 -mr-16";
+      return "hplxt-w-16 -hplxt-mr-16";
 
     case "righttrue":
-      return "w-72";
+      return "hplxt-w-72";
 
     case "rightfalse":
-      return "w-16";
+      return "hplxt-w-16";
 
     default:
-      return "w-72 -ml-72 left-full";
+      return "hplxt-w-72 -hplxt-ml-72 hplxt-left-full";
   }
 };
 
@@ -4303,10 +4305,10 @@ var CollapsibleCard = function CollapsibleCard(props) {
   };
 
   var getIconClass = function getIconClass() {
-    var clsName = "mt-2 absolute cursor-pointer items-center text-center right-2 top-0";
+    var clsName = "hplxt-mt-2 hplxt-absolute hplxt-cursor-pointer hplxt-items-center hplxt-text-center hplxt-right-2 hplxt-top-0";
 
     if (disabled) {
-      clsName += " hidden";
+      clsName += " hplxt-hidden";
     }
 
     if (direction === "right") {
@@ -4316,7 +4318,7 @@ var CollapsibleCard = function CollapsibleCard(props) {
     }
 
     if (!active) {
-      clsName += " rotate-180 overflow-hidden";
+      clsName += " hplxt-rotate-180 hplxt-overflow-hidden";
     }
 
     return clsName;
@@ -4324,10 +4326,10 @@ var CollapsibleCard = function CollapsibleCard(props) {
 
   if (direction === "up" || direction === "down") {
     return jsxRuntime.exports.jsxs("div", __assign({
-      className: "flex m-5 ".concat(direction === "down" ? "flex-col" : "flex-col-reverse")
+      className: "hplxt-flex hplxt-m-5 ".concat(direction === "down" ? "hplxt-flex-col" : "hplxt-flex-col-reverse")
     }, {
       children: [jsxRuntime.exports.jsxs("div", __assign({
-        className: "flex flex-1 flex-row items-center"
+        className: "hplxt-flex hplxt-flex-1 hplxt-flex-row hplxt-items-center"
       }, {
         children: [jsxRuntime.exports.jsx(Tooltip, __assign({
           variant: "Top",
@@ -4349,14 +4351,14 @@ var CollapsibleCard = function CollapsibleCard(props) {
         onAnimationEnd: function onAnimationEnd() {
           console.log("onAnimationEnd called");
         },
-        className: "".concat(active ? "max-h-[1000px] overflow-visible" : "max-h-0 overflow-hidden", " ").concat(active ? "p-5" : "p-0", " transition-all duration-500 ease-in-out mt-5 ").concat(getWidth(width), " ").concat(getHeight(height), " text-ellipsis")
+        className: "".concat(active ? "hplxt-max-h-[1000px] hplxt-overflow-visible" : "hplxt-max-h-0 hplxt-overflow-hidden", " ").concat(active ? "hplxt-p-5" : "hplxt-p-0", " hplxt-transition-all hplxt-duration-500 hplxt-ease-in-out hplxt-mt-5 ").concat(getWidth(width), " ").concat(getHeight(height), " hplxt-text-ellipsis")
       }, {
         children: [header && jsxRuntime.exports.jsx("div", __assign({
-          className: "flex flex-1 m-1 p-4"
+          className: "hplxt-flex hplxt-flex-1 hplxt-m-1 hplxt-p-4"
         }, {
           children: header
         })), children, footer && jsxRuntime.exports.jsx("div", __assign({
-          className: "flex flex-1 m-1 p-4"
+          className: "hplxt-flex hplxt-flex-1 hplxt-m-1 hplxt-p-4"
         }, {
           children: footer
         }))]
@@ -4364,17 +4366,17 @@ var CollapsibleCard = function CollapsibleCard(props) {
     }));
   } else {
     return jsxRuntime.exports.jsx("div", __assign({
-      className: "flex"
+      className: "hplxt-flex"
     }, {
       children: jsxRuntime.exports.jsxs("div", __assign({
-        className: "".concat(getPostionClassName(direction + active), " duration-300 bg-Gray-100 relative")
+        className: "".concat(getPostionClassName(direction + active), " hplxt-duration-300 hplxt-bg-Gray-100 hplxt-relative")
       }, {
         children: [jsxRuntime.exports.jsx("div", {
           "data-testid": "CollapseIcon",
-          // className={`${disabled ? "hidden" : ""} ${
+          // className={`${disabled ? "hplxt-hidden" : ""} ${
           //   direction === "right" ? "hx_right" : "hx_left"
-          // } mt-2 absolute cursor-pointer items-center text-center right-[10px] top-0 ${
-          //   !active && "rotate-180 overflow-hidden"
+          // } hplxt-mt-2 hplxt-absolute hplxt-cursor-pointer hplxt-items-center hplxt-text-center hplxt-right-[10px] hplxt-top-0 ${
+          //   !active && "hplxt-rotate-180 hplxt-overflow-hidden"
           // }`}
           className: getIconClass(),
           onClick: function onClick() {
@@ -4386,11 +4388,11 @@ var CollapsibleCard = function CollapsibleCard(props) {
           }
         }), active && jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
           children: [jsxRuntime.exports.jsx("div", __assign({
-            className: "flex flex-1 m-1 p-4"
+            className: "hplxt-flex hplxt-flex-1 hplxt-m-1 hplxt-p-4"
           }, {
             children: header
           })), children, jsxRuntime.exports.jsx("div", __assign({
-            className: "flex flex-1 m-1 p-4"
+            className: "hplxt-flex hplxt-flex-1 hplxt-m-1 hplxt-p-4"
           }, {
             children: footer
           }))]
@@ -4416,30 +4418,30 @@ var getSizeClassName$2 = function getSizeClassName(size) {
 var getPaddingClassName = function getPaddingClassName(size, disabled) {
   switch (size) {
     case "sm":
-      return disabled ? "flex  w-4 h-4 bg-white border border-Gray-300 border-Gray-300 rounded-full cursor-pointer focus:outline-none bg-Gray-200 p-2 " : "flex  w-4 h-4 bg-white border border-Gray-300 hover:border-Primary-600 peer-checked:border-Primary-600 rounded-full cursor-pointer focus:outline-none hover:bg-Primary-50 peer-checked:bg-Primary-600 p-2 peer-checked:ring-2 ring-Primary-300 peer-checked:border-transparent ";
+      return disabled ? "hplxt-flex  hplxt-w-4 hplxt-h-4 hplxt-bg-white hplxt-border hplxt-border-Gray-300 hplxt-border-Gray-300 hplxt-rounded-full hplxt-cursor-pointer focus:hplxt-outline-none hplxt-bg-Gray-200 hplxt-p-2 " : "hplxt-flex  hplxt-w-4 hplxt-h-4 hplxt-bg-white hplxt-border hplxt-border-Gray-300 hover:hplxt-border-Primary-600 peer-checked:hplxt-border-Primary-600 hplxt-rounded-full hplxt-cursor-pointer focus:hplxt-outline-none hover:hplxt-bg-Primary-50 peer-checked:hplxt-bg-Primary-600 hplxt-p-2 peer-checked:hplxt-ring-2 hplxt-ring-Primary-300 peer-checked:hplxt-border-transparent ";
 
     case "md":
-      return disabled ? "flex w-5 h-5 bg-white border border-Gray-300 border-Gray-300 rounded-full cursor-pointer focus:outline-none bg-Gray-200 p-2 " : "flex w-5 h-5 bg-white border border-Gray-300 hover:border-Primary-600 peer-checked:border-Primary-600  rounded-full cursor-pointer focus:outline-none hover:bg-Primary-50 peer-checked:bg-Primary-600 p-2 peer-checked:ring-2  peer-checked:border-transparent ";
+      return disabled ? "hplxt-flex hplxt-w-5 hplxt-h-5 hplxt-bg-white hplxt-border hplxt-border-Gray-300 hplxt-border-Gray-300 hplxt-rounded-full hplxt-cursor-pointer focus:hplxt-outline-none hplxt-bg-Gray-200 hplxt-p-2 " : "hplxt-flex hplxt-w-5 hplxt-h-5 hplxt-bg-white hplxt-border hplxt-border-Gray-300 hover:hplxt-border-Primary-600 peer-checked:hplxt-border-Primary-600  hplxt-rounded-full hplxt-cursor-pointer focus:hplxt-outline-none hover:hplxt-bg-Primary-50 peer-checked:hplxt-bg-Primary-600 hplxt-p-2 peer-checked:hplxt-ring-2  peer-checked:hplxt-border-transparent ";
 
     default:
-      return "flex w-4 h-4 bg-white border border-Gray-300 hover:border-Primary-600 peer-checked:border-Primary-600 rounded-full cursor-pointer focus:outline-none hover:bg-Primary-50 peer-checked:bg-Primary-600 p-2 peer-checked:ring-2 ring-Primary-300 peer-checked:border-transparent ";
+      return "hplxt-flex hplxt-w-4 hplxt-h-4 hplxt-bg-white hplxt-border hplxt-border-Gray-300 hover:hplxt-border-Primary-600 peer-checked:hplxt-border-Primary-600 hplxt-rounded-full hplxt-cursor-pointer focus:hplxt-outline-none hover:hplxt-bg-Primary-50 peer-checked:hplxt-bg-Primary-600 hplxt-p-2 peer-checked:hplxt-ring-2 hplxt-ring-Primary-300 peer-checked:hplxt-border-transparent ";
   }
 };
 
 var getLabelStyle$1 = function getLabelStyle(disabled) {
-  return disabled ? "flex flex-col text-Gray-300" : "flex flex-col text-Gray-700";
+  return disabled ? "hplxt-flex hplxt-flex-col hplxt-text-Gray-300" : "hplxt-flex hplxt-flex-col hplxt-text-Gray-700";
 };
 
 var getIconTypeClassName = function getIconTypeClassName(iconfile, size, disabled) {
   switch (iconfile) {
     case "dot":
-      return size === "sm" ? disabled ? "ring-4 p-1 ring-Gray-50 bg-Gray-300 -ml-[13px] mt-[4.95px] w-2 h-2 rounded-full peer-checked:block" : "hidden ring-4 p-1 ring-Primary-50 -ml-[13px] mt-[4.95px] w-2 h-2 rounded-full peer-checked:block" : disabled ? "ring-4 p-1 ring-Gray-50 bg-Gray-300 -ml-[14px] mt-[6px] w-2 h-2 rounded-full peer-checked:block" : "hidden ring-4 p-1 ring-Primary-50 -ml-[14px] mt-[6px] w-2 h-2 rounded-full peer-checked:block";
+      return size === "sm" ? disabled ? "hplxt-ring-4 hplxt-p-1 hplxt-ring-Gray-50 hplxt-bg-Gray-300 -hplxt-ml-[13px] hplxt-mt-[4.95px] hplxt-w-2 hplxt-h-2 hplxt-rounded-full peer-checked:hplxt-block" : "hplxt-hidden hplxt-ring-4 hplxt-p-1 hplxt-ring-Primary-50 -hplxt-ml-[13px] hplxt-mt-[4.95px] hplxt-w-2 hplxt-h-2 hplxt-rounded-full peer-checked:hplxt-block" : disabled ? "hplxt-ring-4 hplxt-p-1 hplxt-ring-Gray-50 hplxt-bg-Gray-300 -hplxt-ml-[14px] hplxt-mt-[6px] hplxt-w-2 hplxt-h-2 hplxt-rounded-full peer-checked:hplxt-block" : "hplxt-hidden hplxt-ring-4 hplxt-p-1 hplxt-ring-Primary-50 -hplxt-ml-[14px] hplxt-mt-[6px] hplxt-w-2 hplxt-h-2 hplxt-rounded-full peer-checked:hplxt-block";
 
     case "checkmark":
-      return size === "sm" ? disabled ? "hx_checkmark text-[12px] -ml-[17px] mt-[3px] text-White peer-checked:block " : "hidden hx_checkmark text-[12px] -ml-[17px] mt-[3px] text-White peer-checked:block" : disabled ? "hx_checkmark -ml-[21px] mt-[2px] text-White peer-checked:block " : "hidden hx_checkmark -ml-[21px] mt-[2px] text-White peer-checked:block";
+      return size === "sm" ? disabled ? "hx_checkmark hplxt-text-[12px] -hplxt-ml-[17px] hplxt-mt-[3px] hplxt-text-White peer-checked:hplxt-block " : "hplxt-hidden hx_checkmark hplxt-text-[12px] -hplxt-ml-[17px] hplxt-mt-[3px] hplxt-text-White peer-checked:hplxt-block" : disabled ? "hx_checkmark -hplxt-ml-[21px] hplxt-mt-[2px] hplxt-text-White peer-checked:hplxt-block " : "hplxt-hidden hx_checkmark -hplxt-ml-[21px] hplxt-mt-[2px] hplxt-text-White peer-checked:hplxt-block";
 
     default:
-      return size === "sm" ? "hidden ring-4 p-1 ring-Primary-50 -ml-[13px] mt-[4.95px] w-2 h-2 rounded-full peer-checked:block" : "hidden ring-4 p-1 ring-Primary-50 -ml-[14px] mt-[6px] w-2 h-2 rounded-full peer-checked:block";
+      return size === "sm" ? "hplxt-hidden hplxt-ring-4 hplxt-p-1 hplxt-ring-Primary-50 -hplxt-ml-[13px] hplxt-mt-[4.95px] hplxt-w-2 hplxt-h-2 hplxt-rounded-full peer-checked:hplxt-block" : "hplxt-hidden hplxt-ring-4 hplxt-p-1 hplxt-ring-Primary-50 -hplxt-ml-[14px] hplxt-mt-[6px] hplxt-w-2 hplxt-h-2 hplxt-rounded-full peer-checked:hplxt-block";
   }
 };
 
@@ -4454,10 +4456,10 @@ var RadioBtn = function RadioBtn(_a) {
     className: "radiobutton"
   }, {
     children: jsxRuntime.exports.jsxs("div", __assign({
-      className: "p-4 flex flex-row flex-1 "
+      className: "hplxt-p-4 hplxt-flex hplxt-flex-row hplxt-flex-1 "
     }, {
       children: [jsxRuntime.exports.jsx("input", {
-        className: "sr-only peer border-0 focus:border-0",
+        className: "hplxt-sr-only hplxt-peer hplxt-border-0 focus:hplxt-border-0",
         type: "radio",
         value: "first",
         name: "radioBtn",
@@ -4470,7 +4472,7 @@ var RadioBtn = function RadioBtn(_a) {
       }), jsxRuntime.exports.jsx("div", {
         className: "".concat(getIconTypeClassName(iconfile, size, disabled))
       }), jsxRuntime.exports.jsxs("label", __assign({
-        className: " mx-4  ".concat(getLabelStyle$1(disabled), " "),
+        className: " hplxt-mx-4  ".concat(getLabelStyle$1(disabled), " "),
         htmlFor: id
       }, {
         children: [jsxRuntime.exports.jsx(Typography, __assign({
@@ -4505,31 +4507,31 @@ var getSizeClassName$1 = function getSizeClassName(size) {
 var getToggleSizeClassName = function getToggleSizeClassName(size, disabled) {
   switch (size) {
     case "sm":
-      return disabled ? "bg-Gray-200  md:w-9 md:h-5 w-5 h-4" : "md:w-9 md:h-5 w-5 h-4";
+      return disabled ? "hplxt-bg-Gray-200  md:hplxt-w-9 md:hplxt-h-5 hplxt-w-5 hplxt-h-4" : "md:hplxt-w-9 md:hplxt-h-5 hplxt-w-5 hplxt-h-4";
 
     case "md":
-      return disabled ? "md:w-11 md:h-6 w-6 h-5 bg-Gray-200" : "md:w-11 md:h-6 w-6 h-5";
+      return disabled ? "md:hplxt-w-11 md:hplxt-h-6 hplxt-w-6 hplxt-h-5 hplxt-bg-Gray-200" : "md:hplxt-w-11 md:hplxt-h-6 hplxt-w-6 hplxt-h-5";
 
     default:
-      return "md:w-9 md:h-5 w-5 h-4";
+      return "md:hplxt-w-9 md:hplxt-h-5 hplxt-w-5 hplxt-h-4";
   }
 };
 
 var getThemeClassName = function getThemeClassName(theme, toggled, disabled) {
   switch (theme) {
     case "Dark":
-      return disabled ? toggled ? "bg-Gray-200" : "bg-Gray-200" : toggled ? "bg-Primary-600" : "bg-Gray-200";
+      return disabled ? toggled ? "hplxt-bg-Gray-200" : "hplxt-bg-Gray-200" : toggled ? "hplxt-bg-Primary-600" : "hplxt-bg-Gray-200";
 
     case "Light":
-      return disabled ? toggled ? "bg-Gray-200" : "bg-Gray-50" : toggled ? "bg-Primary-200" : "bg-Primary-50";
+      return disabled ? toggled ? "hplxt-bg-Gray-200" : "hplxt-bg-Gray-50" : toggled ? "hplxt-bg-Primary-200" : "hplxt-bg-Primary-50";
 
     default:
-      return toggled ? "bg-Primary-600" : "bg-Gray-200";
+      return toggled ? "hplxt-bg-Primary-600" : "hplxt-bg-Gray-200";
   }
 };
 
 var getLabelStyle = function getLabelStyle(disabled) {
-  return disabled ? "flex flex-col text-Gray-300 " : "flex flex-col text-Gray-700";
+  return disabled ? "hplxt-flex hplxt-flex-col hplxt-text-Gray-300 " : "hplxt-flex hplxt-flex-col hplxt-text-Gray-700";
 };
 
 var ToggleSwitch = function ToggleSwitch(_a) {
@@ -4542,9 +4544,9 @@ var ToggleSwitch = function ToggleSwitch(_a) {
       _b = _a.onClick,
       onClick = _b === void 0 ? function () {} : _b,
       isToggled = _a.isToggled;
-  var toggleClass = size === "sm" ? "transform  translate-x-[14px]" : "transform  translate-x-[18px]";
+  var toggleClass = size === "sm" ? "hplxt-transform  hplxt-translate-x-[14px]" : "hplxt-transform  hplxt-translate-x-[18px]";
   return jsxRuntime.exports.jsxs("div", __assign({
-    className: "flex flex-row items-center p-2"
+    className: "hplxt-flex hplxt-flex-row hplxt-items-center hplxt-p-2"
   }, {
     children: [jsxRuntime.exports.jsx("button", __assign({
       onClick: onClick,
@@ -4552,13 +4554,13 @@ var ToggleSwitch = function ToggleSwitch(_a) {
       id: id,
       "data-testid": id,
       defaultChecked: isToggled,
-      className: "".concat(getToggleSizeClassName(size, disabled), " flex items-center  ").concat(getThemeClassName(theme, isToggled, disabled), " rounded-full p-1 cursor-pointer focus:ring-4 ring-Primary-100")
+      className: "".concat(getToggleSizeClassName(size, disabled), " hplxt-flex hplxt-items-center  ").concat(getThemeClassName(theme, isToggled, disabled), " hplxt-rounded-full hplxt-p-1 hplxt-cursor-pointer focus:hplxt-ring-4 hplxt-ring-Primary-100")
     }, {
       children: jsxRuntime.exports.jsx("div", {
-        className: "bg-White\n            ".concat(size === "sm" ? "md: w-4 md:h-4" : "md: w-5 md:h-5", " rounded-full shadow-md transition transform\n            ").concat(isToggled ? toggleClass : null)
+        className: "hplxt-bg-White\n            ".concat(size === "sm" ? "md:hplxt-w-4 md:hplxt-h-4" : "md:hplxt-w-5 md:hplxt-h-5", " hplxt-rounded-full hplxt-shadow-md hplxt-transition hplxt-transform\n            ").concat(isToggled ? toggleClass : null)
       })
     })), jsxRuntime.exports.jsxs("label", __assign({
-      className: " mx-5 ".concat(getLabelStyle(disabled), " "),
+      className: " hplxt-mx-5 ".concat(getLabelStyle(disabled), " "),
       htmlFor: id
     }, {
       children: [jsxRuntime.exports.jsx(Typography, __assign({
@@ -4578,7 +4580,7 @@ var ToggleSwitch = function ToggleSwitch(_a) {
 
 function Checkmark(disabled, size, isActive) {
   return jsxRuntime.exports.jsx("div", {
-    className: "".concat(size === "sm" ? "w-4 h-4" : "w-5 h-5", " ").concat(isActive ? "hx_checkmark bg-Primary-600" : "", " ").concat(disabled ? "" : "group-hover:border-Primary-600 group-active:ring-4 group-active:ring-Primary-100", " absolute flex m-4 top-0 right-0 my-auto bottom-0 rounded-full justify-center items-center border-1 border-Gray-300 text-White "),
+    className: "".concat(size === "sm" ? "hplxt-w-4 hplxt-h-4" : "hplxt-w-5 hplxt-h-5", " ").concat(isActive ? "hx_checkmark hplxt-bg-Primary-600" : "", " ").concat(disabled ? "" : "group-hover:hplxt-border-Primary-600 group-active:hplxt-ring-4 group-active:hplxt-ring-Primary-100", " hplxt-absolute hplxt-flex hplxt-m-4 hplxt-top-0 hplxt-right-0 hplxt-my-auto hplxt-bottom-0 hplxt-rounded-full hplxt-justify-center hplxt-items-center hplxt-border-1 hplxt-border-Gray-300 hplxt-text-White "),
     style: {
       fontSize: size === "sm" ? 12 : 16,
       fontWeight: 1000
@@ -4606,26 +4608,26 @@ var CheckboxGroupItem = function CheckboxGroupItem(_a) {
   switch (variant) {
     case "Icon Simple":
       return jsxRuntime.exports.jsx("div", __assign({
-        className: "relative group",
+        className: "hplxt-relative hplxt-group",
         onClick: disabled ? undefined : onClick
       }, {
         children: jsxRuntime.exports.jsxs("div", __assign({
-          className: "".concat(disabled ? "bg-Gray-50" : "".concat(isActive ? "bg-Primary-50 border-Primary-300 hover:border-Primary-500" : "hover:border-Primary-300", " active:ring-4 active:ring-Primary-100"), " flex items-center gap-4 p-4 border-1 border-Gray-200 rounded-lg ")
+          className: "".concat(disabled ? "hplxt-bg-Gray-50" : "".concat(isActive ? "hplxt-bg-Primary-50 hplxt-border-Primary-300 hover:hplxt-border-Primary-500" : "hover:hplxt-border-Primary-300", " active:hplxt-ring-4 active:hplxt-ring-Primary-100"), " hplxt-flex hplxt-items-center hplxt-gap-4 hplxt-p-4 hplxt-border-1 hplxt-border-Gray-200 hplxt-rounded-lg ")
         }, {
           children: [jsxRuntime.exports.jsx("div", {
-            className: "".concat(icon_name, " ").concat(disabled ? "border-6 border-Gray-50 bg-Gray-100 text-Gray-300" : "border-4 border-Primary-50 bg-Primary-100 text-Primary-600", " ").concat(size === "sm" ? "w-8 h-8" : "w-10 h-10", " flex justify-center items-center rounded-full"),
+            className: "".concat(icon_name, " ").concat(disabled ? "hplxt-border-6 hplxt-border-Gray-50 hplxt-bg-Gray-100 hplxt-text-Gray-300" : "hplxt-border-4 hplxt-border-Primary-50 hplxt-bg-Primary-100 hplxt-text-Primary-600", " ").concat(size === "sm" ? "hplxt-w-8 hplxt-h-8" : "hplxt-w-10 hplxt-h-10", " hplxt-flex hplxt-justify-center hplxt-items-center hplxt-rounded-full"),
             style: {
               fontWeight: 1000
             }
           }), jsxRuntime.exports.jsxs(Typography, __assign({
             variant: "Medium",
             type: "Text ".concat(size),
-            className: "".concat(isActive ? "text-Primary-800" : "text-Gray-700")
+            className: "".concat(isActive ? "hplxt-text-Primary-800" : "hplxt-text-Gray-700")
           }, {
             children: [plan_name, " ", " ", jsxRuntime.exports.jsxs(Typography, __assign({
               variant: "Regular",
               type: "Text ".concat(size),
-              className: "".concat(isActive ? "text-Primary-600" : "text-Gray-500", " inline")
+              className: "".concat(isActive ? "hplxt-text-Primary-600" : "hplxt-text-Gray-500", " hplxt-inline")
             }, {
               children: [monthly_cost, "/month", jsxRuntime.exports.jsx("br", {}), plan_details]
             }))]
@@ -4636,60 +4638,60 @@ var CheckboxGroupItem = function CheckboxGroupItem(_a) {
 
     case "Icon Card":
       return jsxRuntime.exports.jsx("div", __assign({
-        className: "relative group",
+        className: "hplxt-relative hplxt-group",
         onClick: disabled ? undefined : onClick
       }, {
         children: jsxRuntime.exports.jsxs("div", __assign({
-          className: "flex flex-col ".concat(disabled ? "bg-Gray-50" : "".concat(isActive ? "bg-White border-Primary-300 hover:border-Primary-500" : "hover:border-Primary-300", " active:ring-4 active:ring-Primary-100"), "  border-1 border-Gray-200 rounded-lg ")
+          className: "hplxt-flex hplxt-flex-col ".concat(disabled ? "hplxt-bg-Gray-50" : "".concat(isActive ? "hplxt-bg-White hplxt-border-Primary-300 hover:hplxt-border-Primary-500" : "hover:hplxt-border-Primary-300", " active:hplxt-ring-4 active:hplxt-ring-Primary-100"), "  hplxt-border-1 hplxt-border-Gray-200 hplxt-rounded-lg ")
         }, {
           children: [jsxRuntime.exports.jsx("div", __assign({
-            className: "border-b border-Gray-200 ".concat(disabled ? "bg-Gray-50" : "".concat(isActive ? "bg-Primary-50 border-Primary-300 group-hover:border-Primary-500 text-Primary-800" : "text-Gray-700 group-hover:border-Primary-300", " "))
+            className: "hplxt-border-b hplxt-border-Gray-200 ".concat(disabled ? "hplxt-bg-Gray-50" : "".concat(isActive ? "hplxt-bg-Primary-50 hplxt-border-Primary-300 group-hover:hplxt-border-Primary-500 hplxt-text-Primary-800" : "hplxt-text-Gray-700 group-hover:hplxt-border-Primary-300", " "))
           }, {
             children: jsxRuntime.exports.jsxs("div", __assign({
-              className: "flex m-2 "
+              className: "hplxt-flex hplxt-m-2 "
             }, {
               children: [jsxRuntime.exports.jsx("div", {
-                className: " ".concat(icon_name, " ").concat(disabled ? "border-6 border-Gray-50 bg-Gray-100 text-Gray-300" : "border-4 border-Primary-50 bg-Primary-100 text-Primary-600", " ").concat(size === "sm" ? "w-8 h-8" : "w-10 h-10", " flex justify-center items-center rounded-full"),
+                className: " ".concat(icon_name, " ").concat(disabled ? "hplxt-border-6 hplxt-border-Gray-50 hplxt-bg-Gray-100 hplxt-text-Gray-300" : "hplxt-border-4 hplxt-border-Primary-50 hplxt-bg-Primary-100 hplxt-text-Primary-600", " ").concat(size === "sm" ? "hplxt-w-8 hplxt-h-8" : "hplxt-w-10 hplxt-h-10", " hplxt-flex hplxt-justify-center hplxt-items-center hplxt-rounded-full"),
                 style: {
                   fontWeight: 1000
                 }
               }), jsxRuntime.exports.jsx(Typography, __assign({
                 variant: "Medium",
                 type: "Text ".concat(size === "sm" ? "md" : "lg"),
-                className: "flex p-2 ".concat(disabled ? "bg-Gray-50 text-Gray-700" : "".concat(isActive ? "bg-Primary-50 border-Primary-300 group-hover:border-Primary-500 text-Primary-800" : " group-hover:border-Primary-300"))
+                className: "hplxt-flex hplxt-p-2 ".concat(disabled ? "hplxt-bg-Gray-50 hplxt-text-Gray-700" : "".concat(isActive ? "hplxt-bg-Primary-50 hplxt-border-Primary-300 group-hover:hplxt-border-Primary-500 hplxt-text-Primary-800" : " group-hover:hplxt-border-Primary-300"))
               }, {
                 children: plan_name
               })), jsxRuntime.exports.jsx("div", __assign({
-                className: " absolute p-4 right-0"
+                className: " hplxt-absolute hplxt-p-4 hplxt-right-0"
               }, {
                 children: Checkmark(disabled, size, isActive)
               }))]
             }))
           })), jsxRuntime.exports.jsxs("div", __assign({
-            className: "p-4"
+            className: "hplxt-p-4"
           }, {
             children: [limited && jsxRuntime.exports.jsx(Typography, __assign({
               variant: "Medium",
               type: "Text ".concat(size === "sm" ? "xs" : "sm"),
-              className: "absolute right-0 mr-4 ".concat(disabled ? "bg-Gray-100 text-Gray-700" : "bg-Success-50 text-Success-700", " rounded-2xl px-2 py-1")
+              className: "hplxt-absolute hplxt-right-0 hplxt-mr-4 ".concat(disabled ? "hplxt-bg-Gray-100 hplxt-text-Gray-700" : "hplxt-bg-Success-50 hplxt-text-Success-700", " hplxt-rounded-2xl hplxt-px-2 hplxt-py-1")
             }, {
               children: "Limited time only"
             })), jsxRuntime.exports.jsx(Typography, __assign({
               variant: "".concat(size === "sm" ? "Semibold" : "Medium"),
               type: "Display ".concat(size === "sm" ? "xs" : "sm"),
-              className: "inline-flex text-Gray-700 "
+              className: "hplxt-inline-flex hplxt-text-Gray-700 "
             }, {
               children: monthly_cost
             })), jsxRuntime.exports.jsx(Typography, __assign({
               variant: "Regular",
               type: "Text ".concat(size),
-              className: " inline-flex text-Gray-500"
+              className: " hplxt-inline-flex hplxt-text-Gray-500"
             }, {
               children: "per month"
             })), jsxRuntime.exports.jsx(Typography, __assign({
               variant: "Regular",
               type: "Text ".concat(size),
-              className: " text-Gray-500"
+              className: " hplxt-text-Gray-500"
             }, {
               children: plan_details
             }))]
@@ -4700,11 +4702,11 @@ var CheckboxGroupItem = function CheckboxGroupItem(_a) {
 
     case "Avatar":
       return jsxRuntime.exports.jsxs("div", __assign({
-        className: "relative group",
+        className: "hplxt-relative hplxt-group",
         onClick: disabled ? undefined : onClick
       }, {
         children: [jsxRuntime.exports.jsxs("div", __assign({
-          className: "".concat(disabled ? "bg-Gray-50" : "".concat(isActive ? "bg-Primary-50 border-Primary-300 hover:border-Primary-500" : "hover:border-Primary-300", " active:ring-4 active:ring-Primary-100"), " flex items-center gap-4 p-4 border-1 border-Gray-200 rounded-lg ")
+          className: "".concat(disabled ? "hplxt-bg-Gray-50" : "".concat(isActive ? "hplxt-bg-Primary-50 hplxt-border-Primary-300 hover:hplxt-border-Primary-500" : "hover:hplxt-border-Primary-300", " active:hplxt-ring-4 active:hplxt-ring-Primary-100"), " hplxt-flex hplxt-items-center hplxt-gap-4 hplxt-p-4 hplxt-border-1 hplxt-border-Gray-200 hplxt-rounded-lg ")
         }, {
           children: [jsxRuntime.exports.jsx(Avatar, {
             url: icon_name,
@@ -4714,12 +4716,12 @@ var CheckboxGroupItem = function CheckboxGroupItem(_a) {
           }), jsxRuntime.exports.jsxs(Typography, __assign({
             variant: "Medium",
             type: "Text ".concat(size),
-            className: "".concat(isActive ? "text-Primary-800" : "text-Gray-700")
+            className: "".concat(isActive ? "hplxt-text-Primary-800" : "hplxt-text-Gray-700")
           }, {
             children: [plan_name, " ", " ", jsxRuntime.exports.jsxs(Typography, __assign({
               variant: "Regular",
               type: "Text ".concat(size),
-              className: "".concat(isActive ? "text-Primary-600" : "text-Gray-500", " inline")
+              className: "".concat(isActive ? "hplxt-text-Primary-600" : "hplxt-text-Gray-500", " hplxt-inline")
             }, {
               children: [monthly_cost, jsxRuntime.exports.jsx("br", {}), plan_details]
             }))]
@@ -4730,28 +4732,28 @@ var CheckboxGroupItem = function CheckboxGroupItem(_a) {
     case "Payment icon":
       return jsxRuntime.exports.jsxs("div", __assign({
         "data-testid": "payment-".concat(plan_name),
-        className: "relative group",
+        className: "hplxt-relative hplxt-group",
         onClick: disabled ? undefined : onClick
       }, {
         children: [jsxRuntime.exports.jsxs("div", __assign({
-          className: "".concat(disabled ? "bg-Gray-50" : "".concat(isActive ? "bg-Primary-50 border-Primary-300 hover:border-Primary-500" : "hover:border-Primary-300", " active:ring-4 active:ring-Primary-100"), " flex items-center gap-4 p-4 border-1 border-Gray-200 rounded-lg ")
+          className: "".concat(disabled ? "hplxt-bg-Gray-50" : "".concat(isActive ? "hplxt-bg-Primary-50 hplxt-border-Primary-300 hover:hplxt-border-Primary-500" : "hover:hplxt-border-Primary-300", " active:hplxt-ring-4 active:hplxt-ring-Primary-100"), " hplxt-flex hplxt-items-center hplxt-gap-4 hplxt-p-4 hplxt-border-1 hplxt-border-Gray-200 hplxt-rounded-lg ")
         }, {
           children: [jsxRuntime.exports.jsx("div", {
             "data-testid": "payment-icon",
-            className: "".concat(icon_name, " ").concat(disabled ? "border-6 border-Gray-50 bg-Gray-100 text-Gray-300" : "border-4 border-Primary-50 bg-Primary-100 text-Primary-600", " ").concat(size === "sm" ? "w-8 h-8" : "w-10 h-10", " flex justify-center items-center rounded-full"),
+            className: "".concat(icon_name, " ").concat(disabled ? "hplxt-border-6 hplxt-border-Gray-50 hplxt-bg-Gray-100 hplxt-text-Gray-300" : "hplxt-border-4 hplxt-border-Primary-50 hplxt-bg-Primary-100 hplxt-text-Primary-600", " ").concat(size === "sm" ? "hplxt-w-8 hplxt-h-8" : "hplxt-w-10 hplxt-h-10", " hplxt-flex hplxt-justify-center hplxt-items-center hplxt-rounded-full"),
             style: {
               fontWeight: 1000
             }
           }), jsxRuntime.exports.jsxs(Typography, __assign({
             variant: "Medium",
             type: "Text ".concat(size),
-            className: "".concat(isActive ? "text-Primary-800" : "text-Gray-700")
+            className: "".concat(isActive ? "hplxt-text-Primary-800" : "hplxt-text-Gray-700")
           }, {
             children: [plan_name, " ", "ending in ", " ", monthly_cost, jsxRuntime.exports.jsx(Typography, __assign({
               "data-testid": "plan-details",
               variant: "Regular",
               type: "Text ".concat(size),
-              className: "".concat(isActive ? "text-Primary-600" : "text-Gray-500")
+              className: "".concat(isActive ? "hplxt-text-Primary-600" : "hplxt-text-Gray-500")
             }, {
               children: plan_details
             })), jsxRuntime.exports.jsx("div", __assign({
@@ -4764,7 +4766,7 @@ var CheckboxGroupItem = function CheckboxGroupItem(_a) {
                 "data-testid": "set-as-default",
                 variant: "Medium",
                 type: "Text sm",
-                className: "".concat(isActive ? "text-Primary-600" : "text-Gray-500", " inline gap-4")
+                className: "".concat(isActive ? "hplxt-text-Primary-600" : "hplxt-text-Gray-500", " hplxt-inline hplxt-gap-4")
               }, {
                 children: "Set as default"
               }))
@@ -4778,7 +4780,7 @@ var CheckboxGroupItem = function CheckboxGroupItem(_a) {
                 "data-testid": "edit",
                 variant: "Medium",
                 type: "Text sm",
-                className: "inline text-Primary-700"
+                className: "hplxt-inline hplxt-text-Primary-700"
               }, {
                 children: "Edit"
               }))
@@ -4790,30 +4792,30 @@ var CheckboxGroupItem = function CheckboxGroupItem(_a) {
 
     case "Radio button":
       return jsxRuntime.exports.jsxs("div", __assign({
-        className: "relative group",
+        className: "hplxt-relative hplxt-group",
         onClick: disabled ? undefined : onClick
       }, {
         children: [jsxRuntime.exports.jsx("div", __assign({
-          className: "".concat(disabled ? "bg-Gray-50" : "".concat(isActive ? "bg-Primary-50 border-Primary-300 hover:border-Primary-500" : "hover:border-Primary-300", " active:ring-4 active:ring-Primary-100"), " flex items-center gap-4 p-4 border-1 border-Gray-200 rounded-lg ")
+          className: "".concat(disabled ? "hplxt-bg-Gray-50" : "".concat(isActive ? "hplxt-bg-Primary-50 hplxt-border-Primary-300 hover:hplxt-border-Primary-500" : "hover:hplxt-border-Primary-300", " active:hplxt-ring-4 active:hplxt-ring-Primary-100"), " hplxt-flex hplxt-items-center hplxt-gap-4 hplxt-p-4 hplxt-border-1 hplxt-border-Gray-200 hplxt-rounded-lg ")
         }, {
           children: jsxRuntime.exports.jsxs(Typography, __assign({
             variant: "Medium",
             type: "Text ".concat(size),
-            className: "".concat(isActive ? "text-Primary-800" : "text-Gray-700", " ml-8")
+            className: "".concat(isActive ? "hplxt-text-Primary-800" : "hplxt-text-Gray-700", " hplxt-ml-8")
           }, {
             children: [plan_name, " ", " ", jsxRuntime.exports.jsxs(Typography, __assign({
               variant: "Regular",
               type: "Text ".concat(size),
-              className: "".concat(isActive ? "text-Primary-600" : "text-Gray-500", " inline")
+              className: "".concat(isActive ? "hplxt-text-Primary-600" : "hplxt-text-Gray-500", " hplxt-inline")
             }, {
               children: [monthly_cost, "/month", jsxRuntime.exports.jsx("br", {}), plan_details]
             }))]
           }))
         })), jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
           children: [jsxRuntime.exports.jsx("div", {
-            className: "".concat(size === "sm" ? "w-4 h-4" : "w-5 h-5", " ").concat(disabled ? "" : "".concat(isActive ? "border-Primary-600" : "", " group-active:ring-4 group-active ring-Primary-100 group-hover:bg-Primary-50 group-hover:border-Primary-600"), " absolute flex m-4 top-0 left-0 my-auto bottom-0 rounded-full border-1 border-Gray-300 ")
+            className: "".concat(size === "sm" ? "hplxt-w-4 hplxt-h-4" : "hplxt-w-5 hplxt-h-5", " ").concat(disabled ? "" : "".concat(isActive ? "hplxt-border-Primary-600" : "", " group-active:hplxt-ring-4 group-active hplxt-ring-Primary-100 group-hover:hplxt-bg-Primary-50 group-hover:hplxt-border-Primary-600"), " hplxt-absolute hplxt-flex hplxt-m-4 hplxt-top-0 hplxt-left-0 hplxt-my-auto hplxt-bottom-0 hplxt-rounded-full hplxt-border-1 hplxt-border-Gray-300 ")
           }), jsxRuntime.exports.jsx("div", {
-            className: "".concat(size === "sm" ? "w-[7px] h-[7px] m-[20.5px]" : "w-2 h-2 m-[22px]", " ").concat(isActive ? "scale-100 border-Primary-600" : "scale-0", " absolute flex m-4 top-0 left-0 my-auto bottom-0 rounded-full justify-center items-center bg-Primary-600 "),
+            className: "".concat(size === "sm" ? "hplxt-w-[7px] hplxt-h-[7px] hplxt-m-[20.5px]" : "hplxt-w-2 hplxt-h-2 hplxt-m-[22px]", " ").concat(isActive ? "hplxt-scale-100 hplxt-border-Primary-600" : "hplxt-scale-0", " hplxt-absolute hplxt-flex hplxt-m-4 hplxt-top-0 hplxt-left-0 hplxt-my-auto hplxt-bottom-0 hplxt-rounded-full hplxt-justify-center hplxt-items-center hplxt-bg-Primary-600 "),
             style: {
               fontSize: size === "sm" ? 12 : 16,
               fontWeight: 1000
@@ -4824,27 +4826,27 @@ var CheckboxGroupItem = function CheckboxGroupItem(_a) {
 
     case "Checkbox":
       return jsxRuntime.exports.jsxs("div", __assign({
-        className: "relative group",
+        className: "hplxt-relative hplxt-group",
         onClick: disabled ? undefined : onClick
       }, {
         children: [jsxRuntime.exports.jsx("div", __assign({
-          className: "".concat(disabled ? "bg-Gray-50" : "".concat(isActive ? "bg-Primary-50 border-Primary-300 hover:border-Primary-500" : "hover:border-Primary-300", " active:ring-4 active:ring-Primary-100"), " flex items-center gap-4 p-4 border-1 border-Gray-200 rounded-lg ")
+          className: "".concat(disabled ? "hplxt-bg-Gray-50" : "".concat(isActive ? "hplxt-bg-Primary-50 hplxt-border-Primary-300 hover:hplxt-border-Primary-500" : "hover:hplxt-border-Primary-300", " active:hplxt-ring-4 active:hplxt-ring-Primary-100"), " hplxt-flex hplxt-items-center hplxt-gap-4 hplxt-p-4 hplxt-border-1 hplxt-border-Gray-200 hplxt-rounded-lg ")
         }, {
           children: jsxRuntime.exports.jsxs(Typography, __assign({
             variant: "Medium",
             type: "Text ".concat(size),
-            className: "".concat(isActive ? "text-Primary-800" : "text-Gray-700", " ml-8")
+            className: "".concat(isActive ? "hplxt-text-Primary-800" : "hplxt-text-Gray-700", " hplxt-ml-8")
           }, {
             children: [plan_name, " ", " ", jsxRuntime.exports.jsxs(Typography, __assign({
               variant: "Regular",
               type: "Text ".concat(size),
-              className: "".concat(isActive ? "text-Primary-600" : "text-Gray-500", " inline")
+              className: "".concat(isActive ? "hplxt-text-Primary-600" : "hplxt-text-Gray-500", " hplxt-inline")
             }, {
               children: [monthly_cost, "/month", jsxRuntime.exports.jsx("br", {}), plan_details]
             }))]
           }))
         })), jsxRuntime.exports.jsx("div", {
-          className: "".concat(size === "sm" ? "w-4 h-4 rounded-[4px]" : "w-5 h-5 rounded-md", " ").concat(isActive ? "hx_checkmark text-Primary-600 border-Primary-600 bg-Primary-50" : "", " ").concat(disabled ? "" : "group-hover:border-Primary-600 group-active:ring-4 group-active:ring-Primary-100", " absolute flex m-4 top-0 left-0 my-auto bottom-0 rounded-full justify-center items-center border-1 border-Gray-300"),
+          className: "".concat(size === "sm" ? "hplxt-w-4 hplxt-h-4 hplxt-rounded-[4px]" : "hplxt-w-5 hplxt-h-5 hplxt-rounded-md", " ").concat(isActive ? "hx_checkmark hplxt-text-Primary-600 hplxt-border-Primary-600 hplxt-bg-Primary-50" : "", " ").concat(disabled ? "" : "group-hover:hplxt-border-Primary-600 group-active:hplxt-ring-4 group-active:hplxt-ring-Primary-100", " hplxt-absolute hplxt-flex hplxt-m-4 hplxt-top-0 hplxt-left-0 hplxt-my-auto hplxt-bottom-0 hplxt-rounded-full hplxt-justify-center hplxt-items-center hplxt-border-1 hplxt-border-Gray-300"),
           style: {
             fontSize: size === "sm" ? 16 : 20,
             fontWeight: 1000
@@ -4874,7 +4876,7 @@ var CheckboxGroup = function CheckboxGroup(_a) {
   };
 
   return jsxRuntime.exports.jsx("div", __assign({
-    className: "flex flex-col gap-2"
+    className: "hplxt-flex hplxt-flex-col hplxt-gap-2"
   }, {
     children: (options === null || options === void 0 ? void 0 : options.constructor) === Array && options.length ? options.map(function (option, index) {
       var _a = option || {};
@@ -4896,57 +4898,57 @@ var CheckboxGroup = function CheckboxGroup(_a) {
 var getLeftPositionClassName = function getLeftPositionClassName(minValue) {
   switch (minValue) {
     case "0":
-      return "flex ml-0";
+      return "hplxt-flex hplxt-ml-0";
 
     case "25":
-      return "flex ml-[65px]";
+      return "hplxt-flex hplxt-ml-[65px]";
 
     case "50":
-      return "flex ml-[140px]";
+      return "hplxt-flex hplxt-ml-[140px]";
 
     case "75":
-      return "flex ml-[215px]";
+      return "hplxt-flex hplxt-ml-[215px]";
 
     default:
-      return "flex ml-0";
+      return "hplxt-flex hplxt-ml-0";
   }
 };
 
 var getRightPositionClassName = function getRightPositionClassName(maxValue) {
   switch (maxValue) {
     case "25":
-      return "flex ml-[65px]";
+      return "hplxt-flex hplxt-ml-[65px]";
 
     case "50":
-      return "flex ml-[140px]";
+      return "hplxt-flex hplxt-ml-[140px]";
 
     case "75":
-      return "flex ml-[215px]";
+      return "hplxt-flex hplxt-ml-[215px]";
 
     case "100":
-      return "flex ml-[290px]";
+      return "hplxt-flex hplxt-ml-[290px]";
 
     default:
-      return "flex ml-[65px]";
+      return "hplxt-flex hplxt-ml-[65px]";
   }
 };
 
 var getLabelClassName = function getLabelClassName(position) {
   switch (position) {
     case "topFloating":
-      return "absolute -mt-6 py-1 px-2 text-[12px] text-Gray-700 bg-White shadow-xl rounded-lg";
+      return "hplxt-absolute -hplxt-mt-6 hplxt-py-1 hplxt-px-2 hplxt-text-[12px] hplxt-text-Gray-700 hplxt-bg-White hplxt-shadow-xl hplxt-rounded-lg";
 
     case "bottomFloating":
-      return "absolute mt-8 py-1 px-2 text-[12px] text-Gray-700 bg-White shadow-xl rounded-lg";
+      return "hplxt-absolute hplxt-mt-8 hplxt-py-1 hplxt-px-2 hplxt-text-[12px] hplxt-text-Gray-700 hplxt-bg-White hplxt-shadow-xl hplxt-rounded-lg";
 
     case "labelBottom":
-      return "absolute mt-8 py-1 px-2 text-[16px] text-Gray-700 ";
+      return "hplxt-absolute hplxt-mt-8 hplxt-py-1 hplxt-px-2 hplxt-text-[16px] hplxt-text-Gray-700 ";
 
     case "noLabel":
-      return "hidden";
+      return "hplxt-hidden";
 
     default:
-      return "absolute mt-8 py-1 px-2 text-[12px] text-Gray-700 bg-White shadow-xl rounded-lg";
+      return "hplxt-absolute hplxt-mt-8 hplxt-py-1 hplxt-px-2 hplxt-text-[12px] hplxt-text-Gray-700 hplxt-bg-White hplxt-shadow-xl hplxt-rounded-lg";
   }
 };
 
@@ -4977,10 +4979,10 @@ var Slider = function Slider(_a) {
     className: "slider"
   }, {
     children: jsxRuntime.exports.jsxs("div", __assign({
-      className: "flex flex-col w-96 px-8 py-4"
+      className: "hplxt-flex hplxt-flex-col hplxt-w-96 hplxt-px-8 hplxt-py-4"
     }, {
       children: [jsxRuntime.exports.jsxs("div", __assign({
-        className: "relative my-4 "
+        className: "hplxt-relative hplxt-my-4 "
       }, {
         children: [jsxRuntime.exports.jsx("div", __assign({
           className: "".concat(getLeftPositionClassName(minValue), " ")
@@ -5000,18 +5002,18 @@ var Slider = function Slider(_a) {
           }))
         }))]
       })), jsxRuntime.exports.jsxs("div", __assign({
-        className: "mb-4"
+        className: "hplxt-mb-4"
       }, {
         children: [jsxRuntime.exports.jsx("div", __assign({
-          className: "slider relative h-2 rounded-md bg-Gray-200"
+          className: "slider hplxt-relative hplxt-h-2 hplxt-rounded-md hplxt-bg-Gray-200"
         }, {
           children: jsxRuntime.exports.jsx("div", {
-            className: "progress absolute h-2 bg-Primary-600 rounded",
+            className: "progress hplxt-absolute hplxt-h-2 hplxt-bg-Primary-600 hplxt-rounded",
             ref: progressRef
           })
         })), jsxRuntime.exports.jsxs("div", __assign({
           "data-testid": "Slider",
-          className: "range-input relative"
+          className: "range-input hplxt-relative"
         }, {
           children: [jsxRuntime.exports.jsx("input", {
             onChange: function onChange(e) {
@@ -5022,7 +5024,7 @@ var Slider = function Slider(_a) {
             step: 25,
             max: max,
             value: minValue,
-            className: "range-min absolute w-full -top-2  h-2  bg-transparent  appearance-none bg-Black/0 accent-White border-0 focus:border-0"
+            className: "range-min hplxt-absolute hplxt-w-full -hplxt-top-2  hplxt-h-2  hplxt-bg-transparent  hplxt-appearance-none hplxt-bg-Black/0 hplxt-accent-White hplxt-border-0 focus:hplxt-border-0"
           }), jsxRuntime.exports.jsx("input", {
             onChange: function onChange(e) {
               setMaxValue(e.target.value);
@@ -5032,7 +5034,7 @@ var Slider = function Slider(_a) {
             step: 25,
             max: max,
             value: maxValue,
-            className: "range-max absolute w-full -top-2 h-2  bg-transparent appearance-none bg-Black/0 accent-White border-0 focus:border-0"
+            className: "range-max hplxt-absolute hplxt-w-full -hplxt-top-2 hplxt-h-2  hplxt-bg-transparent hplxt-appearance-none hplxt-bg-Black/0 hplxt-accent-White hplxt-border-0 focus:hplxt-border-0"
           })]
         }))]
       }))]
@@ -5044,19 +5046,19 @@ var Slider = function Slider(_a) {
 // lg-Large,
 
 var getPaddingClassName1 = function getPaddingClassName1(size) {
-  var className = "flex flex-row px-2 rounded-2xl justify-content-center items-center ";
+  var className = "hplxt-flex hplxt-flex-row hplxt-px-2 hplxt-rounded-2xl hplxt-justify-content-center hplxt-items-center ";
 
   switch (size) {
     case "md":
-      className = className + "h-[30px]";
+      className = className + "hplxt-h-[30px]";
       break;
 
     case "lg":
-      className = className + "h-8 ";
+      className = className + "hplxt-h-8 ";
       break;
 
     default:
-      className = className + "h-[30px] ";
+      className = className + "hplxt-h-[30px] ";
       break;
   }
 
@@ -5064,19 +5066,19 @@ var getPaddingClassName1 = function getPaddingClassName1(size) {
 };
 
 var getPaddingClassName2 = function getPaddingClassName2(size) {
-  var className = "flex flex-row px-2 mx-1 rounded-2xl justify-content-center items-center ";
+  var className = "hplxt-flex hplxt-flex-row hplxt-px-2 hplxt-mx-1 hplxt-rounded-2xl hplxt-justify-content-center hplxt-items-center ";
 
   switch (size) {
     case "md":
-      className = className + "h-[22px]";
+      className = className + "hplxt-h-[22px]";
       break;
 
     case "lg":
-      className = className + "h-6 ";
+      className = className + "hplxt-h-6 ";
       break;
 
     default:
-      className = className + "h-[22px] ";
+      className = className + "hplxt-h-[22px] ";
       break;
   }
 
@@ -5202,7 +5204,7 @@ var AddSuggestion = function AddSuggestion(_a) {
       _l = _a.onSuggestionClick,
       onSuggestionClick = _l === void 0 ? function (_selectedValue) {} : _l,
       _m = _a.height,
-      height = _m === void 0 ? "h-32" : _m,
+      height = _m === void 0 ? "hplxt-h-32" : _m,
       _o = _a.hint_text_icon,
       hint_text_icon = _o === void 0 ? "" : _o,
       hint_text = _a.hint_text,
@@ -5283,7 +5285,7 @@ var AddSuggestion = function AddSuggestion(_a) {
     };
   });
   return jsxRuntime.exports.jsxs("div", __assign({
-    className: "input__wrapper relative"
+    className: "input__wrapper hplxt-relative"
   }, {
     children: [isInputField ? jsxRuntime.exports.jsx(InputField, {
       label: label,
@@ -5324,14 +5326,14 @@ var AddSuggestion = function AddSuggestion(_a) {
       })
     }), showDropdown && jsxRuntime.exports.jsx("div", __assign({
       ref: wrapperRef,
-      className: "absolute mt-1 min-w-max rounded-lg bg-White overflow-y-auto shadow-md z-10 max-h-80 "
+      className: "hplxt-absolute hplxt-mt-1 hplxt-min-w-max hplxt-rounded-lg hplxt-bg-White hplxt-overflow-y-auto hplxt-shadow-md hplxt-z-10 hplxt-max-h-80 "
     }, {
       children: suggestionArr && suggestionArr.length > 0 && jsxRuntime.exports.jsx("div", {
         children: (suggestionArr === null || suggestionArr === void 0 ? void 0 : suggestionArr.constructor) === Array && suggestionArr.length ? suggestionArr.map(function (option) {
           var restOptions = __rest(option || {}, []);
 
           return jsxRuntime.exports.jsx(DropdownItems, __assign({
-            className: "text-Primary-700"
+            className: "hplxt-text-Primary-700"
           }, restOptions, {
             onSelect: function onSelect() {
               return handleSuggestionClick(restOptions);
@@ -5407,29 +5409,29 @@ var Toast = function Toast(props) {
   var getTypeColor = function getTypeColor(color) {
     switch (color) {
       case "Success":
-        return "text-Gray-700 bg-Success-100";
+        return "hplxt-text-Gray-700 hplxt-bg-Success-100";
 
       case "Error":
-        return "text-Error-600 bg-Error-100";
+        return "hplxt-text-Error-600 hplxt-bg-Error-100";
 
       default:
-        return "text-Gray-700 bg-Error-100";
+        return "hplxt-text-Gray-700 hplxt-bg-Error-100";
     }
   };
 
   return jsxRuntime.exports.jsx(jsxRuntime.exports.Fragment, {
     children: jsxRuntime.exports.jsxs("div", __assign({
-      className: "px-2 py-1.5 w-72 h-15 rounded ".concat(getTypeColor(toastDetails === null || toastDetails === void 0 ? void 0 : toastDetails.type))
+      className: "hplxt-px-2 hplxt-py-1.5 hplxt-w-72 hplxt-h-15 hplxt-rounded ".concat(getTypeColor(toastDetails === null || toastDetails === void 0 ? void 0 : toastDetails.type))
     }, {
       children: [jsxRuntime.exports.jsxs("div", __assign({
-        className: "flex flex-row items-center justify-between"
+        className: "hplxt-flex hplxt-flex-row hplxt-items-center hplxt-justify-between"
       }, {
         children: [jsxRuntime.exports.jsx("div", __assign({
           className: ""
         }, {
           children: toastDetails === null || toastDetails === void 0 ? void 0 : toastDetails.title
         })), jsxRuntime.exports.jsx("div", {
-          className: "hx_close-circle cursor-pointer",
+          className: "hx_close-circle hplxt-cursor-pointer",
           onClick: clearToast
         })]
       })), jsxRuntime.exports.jsx("div", __assign({
@@ -5438,7 +5440,7 @@ var Toast = function Toast(props) {
         children: jsxRuntime.exports.jsx(Typography, __assign({
           variant: "Regular",
           type: "Text sm",
-          className: "text-Gray-500"
+          className: "hplxt-text-Gray-500"
         }, {
           children: toastDetails === null || toastDetails === void 0 ? void 0 : toastDetails.description
         }))
@@ -5470,7 +5472,7 @@ var MessageToast = function MessageToast(_a) {
       setList = _b[1];
 
   return jsxRuntime.exports.jsx("div", __assign({
-    className: "fixed z-90 bottom-10 right-8 flex flex-col justify-center items-center"
+    className: "hplxt-fixed hplxt-z-90 hplxt-bottom-10 hplxt-right-8 hplxt-flex hplxt-flex-col hplxt-justify-center hplxt-items-center"
   }, {
     children: list.map(function (item) {
       return jsxRuntime.exports.jsx(Toast, {
@@ -5593,18 +5595,18 @@ var NestedDropdownItem = function NestedDropdownItem(_a) {
     onClick: function onClick() {
       !disabled && onSelect && onSelect(value);
     },
-    className: "relative h-10 flex items-center px-2  ".concat(disabled ? "cursor-not-allowed" : "hover:bg-Gray-50 cursor-pointer"),
+    className: "hplxt-relative hplxt-h-10 hplxt-flex hplxt-items-center hplxt-px-2  ".concat(disabled ? "hplxt-cursor-not-allowed" : "hover:hplxt-bg-Gray-50 hplxt-cursor-pointer"),
     onMouseEnter: onMouseEnterHandler,
     onMouseLeave: onMouseLeaveHandler
   }, {
     children: [Boolean(start_icon) && jsxRuntime.exports.jsx("div", __assign({
-      className: "mr-2 ".concat(disabled ? "text-Gray-200" : hover ? "text-Gray-700" : "text-Gray-500")
+      className: "hplxt-mr-2 ".concat(disabled ? "hplxt-text-Gray-200" : hover ? "hplxt-text-Gray-700" : "hplxt-text-Gray-500")
     }, {
       children: jsxRuntime.exports.jsx("span", {
         className: start_icon
       })
     })), jsxRuntime.exports.jsx("div", __assign({
-      className: "flex-1 ".concat(disabled ? "text-Gray-200" : "text-Gray-700")
+      className: "hplxt-flex-1 ".concat(disabled ? "hplxt-text-Gray-200" : "hplxt-text-Gray-700")
     }, {
       children: jsxRuntime.exports.jsx(Typography, __assign({
         variant: hover && !disabled ? "Medium" : "Regular",
@@ -5613,7 +5615,7 @@ var NestedDropdownItem = function NestedDropdownItem(_a) {
         children: label
       }))
     })), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
-      className: "ml-2 ".concat(!disabled && (hover || active) ? "text-Primary-700" : "text-Gray-200")
+      className: "hplxt-ml-2 ".concat(!disabled && (hover || active) ? "hplxt-text-Primary-700" : "hplxt-text-Gray-200")
     }, {
       children: jsxRuntime.exports.jsx("span", {
         className: end_icon
@@ -5750,7 +5752,7 @@ var NestedDropdown = function NestedDropdown(_a) {
           top: "".concat(res.topPosVal, "px"),
           left: "".concat(res.leftPosVal, "px")
         },
-        className: "absolute pr-16 pl-6 py-2 z-10 bg-White border-1 border-Gray-200 shadow-lg whitespace-nowrap\t left-[400px]"
+        className: "hplxt-absolute hplxt-pr-16 hplxt-pl-6 hplxt-py-2 hplxt-z-10 hplxt-bg-White hplxt-border-1 hplxt-border-Gray-200 hplxt-shadow-lg hplxt-whitespace-nowrap\t hplxt-left-[400px]"
       }, {
         children: nestedDropdown
       }));
@@ -5784,10 +5786,10 @@ var NestedDropdown = function NestedDropdown(_a) {
 
   return jsxRuntime.exports.jsxs("div", {
     children: [jsxRuntime.exports.jsx("div", __assign({
-      className: "relative flex justify-between"
+      className: "hplxt-relative hplxt-flex hplxt-justify-between"
     }, {
       children: Boolean(label) && jsxRuntime.exports.jsx("div", __assign({
-        className: "text-Gray-700 mb-1"
+        className: "hplxt-text-Gray-700 hplxt-mb-1"
       }, {
         children: jsxRuntime.exports.jsx(Typography, __assign({
           type: "Text sm",
@@ -5797,13 +5799,13 @@ var NestedDropdown = function NestedDropdown(_a) {
         }))
       }))
     })), jsxRuntime.exports.jsxs("div", __assign({
-      className: "relative block"
+      className: "hplxt-relative hplxt-block"
     }, {
       children: [jsxRuntime.exports.jsxs("div", __assign({
         className: "".concat(className)
       }, {
         children: [value && ("label" in value || "value" in value) ? jsxRuntime.exports.jsx("div", __assign({
-          className: "text-Gray-900"
+          className: "hplxt-text-Gray-900"
         }, {
           children: jsxRuntime.exports.jsx(Typography, __assign({
             "data-testid": "nested-dropdown-selected-value",
@@ -5813,7 +5815,7 @@ var NestedDropdown = function NestedDropdown(_a) {
             children: value["label"] || value["value"]
           }))
         })) : jsxRuntime.exports.jsx("div", __assign({
-          className: "text-Gray-500"
+          className: "hplxt-text-Gray-500"
         }, {
           children: jsxRuntime.exports.jsx(Typography, __assign({
             variant: "Regular",
@@ -5830,19 +5832,19 @@ var NestedDropdown = function NestedDropdown(_a) {
           }
         })]
       })), jsxRuntime.exports.jsxs("div", __assign({
-        className: "relative ".concat(className)
+        className: "hplxt-relative ".concat(className)
       }, {
         children: [jsxRuntime.exports.jsx("div", __assign({
           ref: dropdownRef,
-          className: "".concat(className, " absolute mt-1 left-0 right-0 min-w-max rounded-lg bg-White overflow-y-scroll shadow-md z-10 max-h-80 ").concat(openDropdown ? "block" : "hidden"),
+          className: "".concat(className, " hplxt-absolute hplxt-mt-1 hplxt-left-0 hplxt-right-0 hplxt-min-w-max hplxt-rounded-lg hplxt-bg-White hplxt-overflow-y-scroll hplxt-shadow-md hplxt-z-10 hplxt-max-h-80 ").concat(openDropdown ? "hplxt-block" : "hplxt-hidden"),
           onScroll: handleDropdownScroll
         }, {
           children: jsxRuntime.exports.jsx("div", {
             children: (nestDropdownOption === null || nestDropdownOption === void 0 ? void 0 : nestDropdownOption.constructor) === Array && nestDropdownOption.length ? renderDropdownOption() : jsxRuntime.exports.jsx("div", __assign({
-              className: "h-10 flex items-center px-2"
+              className: "hplxt-h-10 hplxt-flex hplxt-items-center hplxt-px-2"
             }, {
               children: jsxRuntime.exports.jsx("div", __assign({
-                className: "flex-1 text-Gray-700"
+                className: "hplxt-flex-1 hplxt-text-Gray-700"
               }, {
                 children: jsxRuntime.exports.jsx(Typography, __assign({
                   variant: "Regular",
@@ -5856,7 +5858,7 @@ var NestedDropdown = function NestedDropdown(_a) {
         })), isShowMedAd && openDropdown && ((_b = medicineAdData === null || medicineAdData === void 0 ? void 0 : medicineAdData.nestedOptionData) === null || _b === void 0 ? void 0 : _b.length) > 0 && renderNestedDropdown()]
       }))]
     })), (Boolean(hint_text) || Boolean(errorMsg)) && jsxRuntime.exports.jsx("div", __assign({
-      className: "".concat(errorMsg ? "text-Error-500" : "text-Gray-500 mt-1")
+      className: "".concat(errorMsg ? "hplxt-text-Error-500" : "hplxt-text-Gray-500 hplxt-mt-1")
     }, {
       children: jsxRuntime.exports.jsx(Typography, __assign({
         type: "Text sm",
@@ -16883,6 +16885,7 @@ var DatePicker = function DatePicker(_a) {
       dateVar = _a.dateVar,
       minDate = _a.minDate,
       maxDate = _a.maxDate,
+      fieldColor = _a.fieldColor,
       _c = _a.isborderRequired,
       isborderRequired = _c === void 0 ? true : _c;
 
@@ -16919,22 +16922,23 @@ var DatePicker = function DatePicker(_a) {
     };
   }, [clicked]);
   return jsxRuntime.exports.jsxs("div", __assign({
-    className: " px-[14px] py-[10px]"
+    className: ""
   }, {
     children: [jsxRuntime.exports.jsx("div", __assign({
-      className: "relative w-[189px]"
+      className: "hplxt-relative hplxt-w-[189px]"
     }, {
       children: jsxRuntime.exports.jsx(InputField, {
         isborderRequired: isborderRequired,
-        start_icon: "hx_calendar",
+        start_icon: "hx_calendar hplxt-text-4",
         inputProps: {
           placeholder: "Select date",
           onClick: inputClick,
           value: date ? dayjs(date).format("MMM DD, YYYY") : selectDate === null || selectDate === void 0 ? void 0 : selectDate.toString()
-        }
+        },
+        fieldColor: fieldColor
       })
     })), jsxRuntime.exports.jsx("div", __assign({
-      className: "absolute mt-1 z-10 "
+      className: "hplxt-absolute hplxt-mt-1 hplxt-z-10"
     }, {
       children: clicked ? jsxRuntime.exports.jsx(dist.Calendar, {
         date: dayjs(date).isValid() ? date : new Date(),