@apexcura/ui-components 0.0.14-Beta215 → 0.0.14-Beta218

package/dist/index.css

@@ -344,9 +344,6 @@ video {
 .m-\[10px\] {
   margin: 10px;
 }
-.inline-block {
-  display: inline-block;
-}
 .flex {
   display: flex;
 }
@@ -394,6 +391,14 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .shadow-\[0px_0px_1px_1px_\#919191\] {
   --tw-shadow: 0px 0px 1px 1px #919191;
   --tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color);

package/dist/index.js

@@ -384,8 +384,15 @@ var MultipleSelectElement = (props) => {
 // src/Components/Button.tsx
 var import_react11 = __toESM(require("react"));
 var ButtonElement = (props) => {
+  const tailwindColorMap = {
+    "text-white": "#ffffff",
+    "text-gray-500": "#6b7280"
+  };
+  const getColorFromClass = (className) => {
+    return tailwindColorMap[className] || "inherit";
+  };
   const textColorClass = props.className?.match(/text-[\w-]+/g)?.[0];
-  console.log(textColorClass);
+  const fillColor = getColorFromClass(textColorClass);
   return /* @__PURE__ */ import_react11.default.createElement(
     "button",
     {
@@ -400,15 +407,13 @@ var ButtonElement = (props) => {
       "span",
       {
         className: props.iconsClassName,
-        dangerouslySetInnerHTML: { __html: props.icon || "" },
-        style: {
-          display: "inline-block",
-          color: textColorClass ? textColorClass : "inherit"
-        }
+        dangerouslySetInnerHTML: { __html: props.icon || "" }
       }
-    ), /* @__PURE__ */ import_react11.default.createElement("style", null, `.${props.iconsClassName}:hover {
-           filter: brightness(0) invert(1);
-          }`)), props.label)
+    ), /* @__PURE__ */ import_react11.default.createElement("style", null, `.${props.iconsClassName} path {
+              fill: ${fillColor};
+            }`, `.${props.iconsClassName}:hover path {
+              filter: brightness(0) invert(1);
+            }`)), props.label)
   );
 };
 

package/dist/index.mjs

@@ -318,8 +318,15 @@ var MultipleSelectElement = (props) => {
 // src/Components/Button.tsx
 import React11 from "react";
 var ButtonElement = (props) => {
+  const tailwindColorMap = {
+    "text-white": "#ffffff",
+    "text-gray-500": "#6b7280"
+  };
+  const getColorFromClass = (className) => {
+    return tailwindColorMap[className] || "inherit";
+  };
   const textColorClass = props.className?.match(/text-[\w-]+/g)?.[0];
-  console.log(textColorClass);
+  const fillColor = getColorFromClass(textColorClass);
   return /* @__PURE__ */ React11.createElement(
     "button",
     {
@@ -334,15 +341,13 @@ var ButtonElement = (props) => {
       "span",
       {
         className: props.iconsClassName,
-        dangerouslySetInnerHTML: { __html: props.icon || "" },
-        style: {
-          display: "inline-block",
-          color: textColorClass ? textColorClass : "inherit"
-        }
+        dangerouslySetInnerHTML: { __html: props.icon || "" }
       }
-    ), /* @__PURE__ */ React11.createElement("style", null, `.${props.iconsClassName}:hover {
-           filter: brightness(0) invert(1);
-          }`)), props.label)
+    ), /* @__PURE__ */ React11.createElement("style", null, `.${props.iconsClassName} path {
+              fill: ${fillColor};
+            }`, `.${props.iconsClassName}:hover path {
+              filter: brightness(0) invert(1);
+            }`)), props.label)
   );
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.14-Beta215",
+  "version": "0.0.14-Beta218",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",