@lanaco/lnc-react-ui 4.0.143 → 4.0.145

package/dist/Button.cjs

@@ -1,4 +1,4 @@
-"use strict";const n=require("react/jsx-runtime"),w=require("react"),l=require("./index-BpbMKBf_.cjs"),k=require("./index-DA7SIHV1.cjs"),d=require("./emotion-styled.browser.esm-BtEseadx.cjs"),t=require("./utils-Dl9xPH4c.cjs"),I=require("./Icon.cjs"),P=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),f={small:{regular:"1rem",icon:"0.75rem",justIcon:"0.5rem"},medium:{regular:"1.5rem",icon:"1rem",justIcon:"0.5rem"},large:{regular:"1.5rem",icon:"1rem",justIcon:"0.5rem"}},T=e=>`
+"use strict";const n=require("react/jsx-runtime"),w=require("react"),l=require("./index-BpbMKBf_.cjs"),f=require("./index-DA7SIHV1.cjs"),d=require("./emotion-styled.browser.esm-BtEseadx.cjs"),t=require("./utils-Dl9xPH4c.cjs"),O=require("./Icon.cjs"),P=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),k={small:{regular:"1rem",icon:"0.75rem",justIcon:"0.5rem"},medium:{regular:"1.5rem",icon:"1rem",justIcon:"0.5rem"},large:{regular:"1.5rem",icon:"1rem",justIcon:"0.5rem"}},T=e=>`
         outline: none;
         display: inline-flex;
         flex-direction: row;
@@ -11,13 +11,13 @@
 
         border-radius: ${t.getBorderRadiusValueWithUnits(e.theme,e.borderRadius)};
         
-        padding-left: ${e.hasLeadingIcon?f[e.size].icon:f[e.size].regular};
-        padding-right: ${e.hasTrailingIcon?f[e.size].icon:f[e.size].regular};
+        padding-left: ${e.hasLeadingIcon?k[e.size].icon:k[e.size].regular};
+        padding-right: ${e.hasTrailingIcon?k[e.size].icon:k[e.size].regular};
     `,W=d.styled.span`
   padding-right: ${e=>e.size==="small"?"0.25rem":"0.5rem"};
 `,D=d.styled.span`
   padding-left: ${e=>e.size==="small"?"0.25rem":"0.5rem"};
-`,O=d.styled.button`
+`,I=d.styled.button`
   ${e=>T(e)}
 
   ${e=>t.getComponentTypographyCss(e.theme,"ButtonFilled",e.size,"enabled")};
@@ -31,23 +31,23 @@
   &:disabled {
     ${e=>e.disabled===!0&&t.getDisabledStateCss(e.theme)};
     cursor: default;
-    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled","gray","disabled","background")};
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"disabled","background","backgroundOpacity")};
     color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"disabled","text")};
   }
 
   &:hover {
-    background-color: ${e=>e.disabled===!1&&t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"hover","background")};
+    background-color: ${e=>e.disabled===!1&&t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"hover","background","backgroundOpacity")};
     color: ${e=>e.disabled===!1&&t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"hover","text")};
   }
 
   &:focus {
-    background-color: ${e=>!e.disabled&&t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"focus","background")};
+    background-color: ${e=>!e.disabled&&t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"focus","background","backgroundOpacity")};
     color: ${e=>e.disabled===!1&&t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"focus","text")};
     ${e=>!e.disabled&&t.getOutlineCss(e.theme)};
   }
 
   &:active {
-    background-color: ${e=>e.disabled===!1&&t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"active","background")};
+    background-color: ${e=>e.disabled===!1&&t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"active","background","backgroundOpacity")};
     color: ${e=>e.disabled===!1&&t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"active","text")};
   }
 `,E=d.styled.button`
@@ -86,7 +86,7 @@
      */
     color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"disabled","text")};
     cursor: default;
-    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted","gray","disabled","background","backgroundOpacity")};
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"disabled","background","backgroundOpacity")};
   }
 `,v=d.styled.button`
   ${e=>T(e)}
@@ -121,9 +121,9 @@
   &:disabled {
     ${e=>e.disabled===!0&&t.getDisabledStateCss(e.theme)};
     cursor: default;
-    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic","gray","disabled","background","backgroundOpacity")};
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"disabled","background","backgroundOpacity")};
   }
 `,L=d.styled(v)`
   border: 1px solid
     ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"enabled","border","borderOpacity")};
-`,j=w.forwardRef((e,u)=>{const{text:x="",iconStyle:R="solid",leadingIcon:V=null,trailingIcon:z=null,borderRadius:F="regular",btnType:a="filled",disabled:N=!1,tabIndex:s=0,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,onLeadingIconClick:_,onTrailingIconClick:K,size:C="small",color:i="primary",className:$="",style:S={},children:U,...y}=e,o={theme:P.useTheme(),color:i,size:C,style:S,disabled:N,borderRadius:F,btnType:a,className:"lnc-ui-button "},c=!k.isEmpty(V),r=!k.isEmpty(z),q=!k.isEmpty(x),B=()=>n.jsxs(n.Fragment,{children:[c&&n.jsx(W,{size:C,children:n.jsx(I,{icon:V,sizeInUnits:"1.125rem",iconStyle:R})}),x,U,r&&n.jsx(D,{size:C,children:n.jsx(I,{icon:z,sizeInUnits:"1.125rem",iconStyle:R})})]});return a==="filled"?n.jsx(O,{ref:u,"data-type":"filled",...o,className:`${o==null?void 0:o.className} ${i}-${a}-lnc-btn ${$}`,hasLeadingIcon:c,hasTrailingIcon:r,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,tabIndex:s,btnType:a,...y,children:B()}):a==="tinted"?n.jsx(E,{ref:u,"data-type":"tinted",...o,className:`${o==null?void 0:o.className} ${i}-${a}-lnc-btn ${$}`,hasLeadingIcon:c,hasTrailingIcon:r,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,tabIndex:s,btnType:a,...y,children:B()}):a==="outline"?n.jsx(L,{ref:u,"data-type":"outline",...o,className:`${o==null?void 0:o.className} ${i}-${a}-lnc-btn ${$}`,hasLeadingIcon:c,hasTrailingIcon:r,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,tabIndex:s,btnType:a,...y,children:B()}):a==="basic"?n.jsx(v,{ref:u,"data-type":"basic",...o,className:`${o==null?void 0:o.className} ${i}-${a}-lnc-btn ${$}`,hasLeadingIcon:c,hasTrailingIcon:r,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,tabIndex:s,btnType:a,...y,children:B()}):n.jsx(O,{ref:u,"data-type":"filled",size:C,...o,className:`${o==null?void 0:o.className} ${i}-${a}-lnc-btn ${$}`,hasLeadingIcon:c,hasTrailingIcon:r,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,hasText:q,tabIndex:s,btnType:a,...y,children:B()})});j.propTypes={text:l.PropTypes.string,iconStyle:l.PropTypes.oneOf(["regular","solid"]),leadingIcon:l.PropTypes.string,trailingIcon:l.PropTypes.string,borderRadius:l.PropTypes.oneOf(["slight","regular","edged","curved","none"]),btnType:l.PropTypes.oneOf(["filled","tinted","outline","basic"]),disabled:l.PropTypes.bool,tabIndex:l.PropTypes.number,onBlur:l.PropTypes.func,onFocus:l.PropTypes.func,onClick:l.PropTypes.func,onKeyDown:l.PropTypes.func,className:l.PropTypes.string,style:l.PropTypes.object,color:l.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:l.PropTypes.oneOf(["small","medium","large"])};module.exports=j;
+`,j=w.forwardRef((e,u)=>{const{text:x="",iconStyle:R="solid",leadingIcon:V=null,trailingIcon:z=null,borderRadius:F="regular",btnType:a="filled",disabled:N=!1,tabIndex:s=0,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,onLeadingIconClick:_,onTrailingIconClick:K,size:C="small",color:i="primary",className:$="",style:S={},children:U,...y}=e,o={theme:P.useTheme(),color:i,size:C,style:S,disabled:N,borderRadius:F,btnType:a,className:"lnc-ui-button "},c=!f.isEmpty(V),r=!f.isEmpty(z),q=!f.isEmpty(x),B=()=>n.jsxs(n.Fragment,{children:[c&&n.jsx(W,{size:C,children:n.jsx(O,{icon:V,sizeInUnits:"1.125rem",iconStyle:R})}),x,U,r&&n.jsx(D,{size:C,children:n.jsx(O,{icon:z,sizeInUnits:"1.125rem",iconStyle:R})})]});return a==="filled"?n.jsx(I,{ref:u,"data-type":"filled",...o,className:`${o==null?void 0:o.className} ${i}-${a}-lnc-btn ${$}`,hasLeadingIcon:c,hasTrailingIcon:r,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,tabIndex:s,btnType:a,...y,children:B()}):a==="tinted"?n.jsx(E,{ref:u,"data-type":"tinted",...o,className:`${o==null?void 0:o.className} ${i}-${a}-lnc-btn ${$}`,hasLeadingIcon:c,hasTrailingIcon:r,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,tabIndex:s,btnType:a,...y,children:B()}):a==="outline"?n.jsx(L,{ref:u,"data-type":"outline",...o,className:`${o==null?void 0:o.className} ${i}-${a}-lnc-btn ${$}`,hasLeadingIcon:c,hasTrailingIcon:r,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,tabIndex:s,btnType:a,...y,children:B()}):a==="basic"?n.jsx(v,{ref:u,"data-type":"basic",...o,className:`${o==null?void 0:o.className} ${i}-${a}-lnc-btn ${$}`,hasLeadingIcon:c,hasTrailingIcon:r,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,tabIndex:s,btnType:a,...y,children:B()}):n.jsx(I,{ref:u,"data-type":"filled",size:C,...o,className:`${o==null?void 0:o.className} ${i}-${a}-lnc-btn ${$}`,hasLeadingIcon:c,hasTrailingIcon:r,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,hasText:q,tabIndex:s,btnType:a,...y,children:B()})});j.propTypes={text:l.PropTypes.string,iconStyle:l.PropTypes.oneOf(["regular","solid"]),leadingIcon:l.PropTypes.string,trailingIcon:l.PropTypes.string,borderRadius:l.PropTypes.oneOf(["slight","regular","edged","curved","none"]),btnType:l.PropTypes.oneOf(["filled","tinted","outline","basic"]),disabled:l.PropTypes.bool,tabIndex:l.PropTypes.number,onBlur:l.PropTypes.func,onFocus:l.PropTypes.func,onClick:l.PropTypes.func,onKeyDown:l.PropTypes.func,className:l.PropTypes.string,style:l.PropTypes.object,color:l.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:l.PropTypes.oneOf(["small","medium","large"])};module.exports=j;

package/dist/Button.js

@@ -1,9 +1,9 @@
-import { jsx as l, jsxs as W, Fragment as E } from "react/jsx-runtime";
+import { jsx as c, jsxs as W, Fragment as E } from "react/jsx-runtime";
 import { forwardRef as q } from "react";
-import { P as o } from "./index-CblbdqjE.js";
+import { P as n } from "./index-CblbdqjE.js";
 import { i as T } from "./index-6RFrSPs_.js";
 import { s as u } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { c as z, b as t, d as r, h as I, e as v, a as A } from "./utils-BdsZgOUE.js";
+import { c as O, b as t, d as r, h as z, e as I, a as A } from "./utils-BdsZgOUE.js";
 import w from "./Icon.js";
 import { u as G } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const x = {
@@ -22,7 +22,7 @@ const x = {
     icon: "1rem",
     justIcon: "0.5rem"
   }
-}, O = (e) => `
+}, v = (e) => `
         outline: none;
         display: inline-flex;
         flex-direction: row;
@@ -45,9 +45,9 @@ const x = {
 `, J = u.span`
   padding-left: ${(e) => e.size === "small" ? "0.25rem" : "0.5rem"};
 `, R = u.button`
-  ${(e) => O(e)}
+  ${(e) => v(e)}
 
-  ${(e) => z(
+  ${(e) => O(
   e.theme,
   "ButtonFilled",
   e.size,
@@ -73,14 +73,15 @@ const x = {
   max-height: ${(e) => r(e.theme, e.size)};
 
   &:disabled {
-    ${(e) => e.disabled === !0 && I(e.theme)};
+    ${(e) => e.disabled === !0 && z(e.theme)};
     cursor: default;
     background-color: ${(e) => t(
   e.theme,
   "ButtonFilled",
-  "gray",
+  e.color,
   "disabled",
-  "background"
+  "background",
+  "backgroundOpacity"
 )};
     color: ${(e) => t(
   e.theme,
@@ -97,7 +98,8 @@ const x = {
   "ButtonFilled",
   e.color,
   "hover",
-  "background"
+  "background",
+  "backgroundOpacity"
 )};
     color: ${(e) => e.disabled === !1 && t(
   e.theme,
@@ -114,7 +116,8 @@ const x = {
   "ButtonFilled",
   e.color,
   "focus",
-  "background"
+  "background",
+  "backgroundOpacity"
 )};
     color: ${(e) => e.disabled === !1 && t(
   e.theme,
@@ -123,7 +126,7 @@ const x = {
   "focus",
   "text"
 )};
-    ${(e) => !e.disabled && v(e.theme)};
+    ${(e) => !e.disabled && I(e.theme)};
   }
 
   &:active {
@@ -132,7 +135,8 @@ const x = {
   "ButtonFilled",
   e.color,
   "active",
-  "background"
+  "background",
+  "backgroundOpacity"
 )};
     color: ${(e) => e.disabled === !1 && t(
   e.theme,
@@ -143,11 +147,11 @@ const x = {
 )};
   }
 `, M = u.button`
-  ${(e) => O(e)}
+  ${(e) => v(e)}
 
   min-height: ${(e) => r(e.theme, e.size)};
   max-height: ${(e) => r(e.theme, e.size)};
-  ${(e) => z(
+  ${(e) => O(
   e.theme,
   "ButtonTinted",
   e.size,
@@ -208,7 +212,7 @@ const x = {
   "focus",
   "text"
 )};
-    ${(e) => e.disabled === !1 && v(e.theme)};
+    ${(e) => e.disabled === !1 && I(e.theme)};
   }
 
   &:active {
@@ -231,7 +235,7 @@ const x = {
   }
 
   &:disabled {
-    /* ${(e) => e.disabled === !0 && I(e.theme)};
+    /* ${(e) => e.disabled === !0 && z(e.theme)};
      */
     color: ${(e) => t(
   e.theme,
@@ -244,16 +248,16 @@ const x = {
     background-color: ${(e) => t(
   e.theme,
   "ButtonTinted",
-  "gray",
+  e.color,
   "disabled",
   "background",
   "backgroundOpacity"
 )};
   }
 `, L = u.button`
-  ${(e) => O(e)}
+  ${(e) => v(e)}
 
-  ${(e) => z(
+  ${(e) => O(
   e.theme,
   "ButtonTinted",
   e.size,
@@ -316,7 +320,7 @@ const x = {
   "text"
 )};
 
-    ${(e) => !e.disabled && v(e.theme)};
+    ${(e) => !e.disabled && I(e.theme)};
   }
 
   &:active {
@@ -338,12 +342,12 @@ const x = {
   }
 
   &:disabled {
-    ${(e) => e.disabled === !0 && I(e.theme)};
+    ${(e) => e.disabled === !0 && z(e.theme)};
     cursor: default;
     background-color: ${(e) => t(
   e.theme,
   "ButtonBasic",
-  "gray",
+  e.color,
   "disabled",
   "background",
   "backgroundOpacity"
@@ -368,9 +372,9 @@ const x = {
     borderRadius: S = "regular",
     btnType: a = "filled",
     disabled: U = !1,
-    tabIndex: m = 0,
+    tabIndex: b = 0,
     //----------------
-    onFocus: b,
+    onFocus: m,
     onBlur: g,
     onClick: h,
     onKeyDown: $,
@@ -378,14 +382,14 @@ const x = {
     onTrailingIconClick: Z,
     //----------------
     size: y = "small",
-    color: c = "primary",
+    color: l = "primary",
     className: f = "",
     style: D = {},
     children: V,
     ...B
-  } = e, n = {
+  } = e, o = {
     theme: G(),
-    color: c,
+    color: l,
     size: y,
     style: D,
     disabled: U,
@@ -393,7 +397,7 @@ const x = {
     btnType: a,
     className: "lnc-ui-button "
   }, i = !T(N), d = !T(j), K = !T(F), k = () => /* @__PURE__ */ W(E, { children: [
-    i && /* @__PURE__ */ l(H, { size: y, children: /* @__PURE__ */ l(
+    i && /* @__PURE__ */ c(H, { size: y, children: /* @__PURE__ */ c(
       w,
       {
         icon: N,
@@ -403,7 +407,7 @@ const x = {
     ) }),
     F,
     V,
-    d && /* @__PURE__ */ l(J, { size: y, children: /* @__PURE__ */ l(
+    d && /* @__PURE__ */ c(J, { size: y, children: /* @__PURE__ */ c(
       w,
       {
         icon: j,
@@ -412,94 +416,94 @@ const x = {
       }
     ) })
   ] });
-  return a === "filled" ? /* @__PURE__ */ l(
+  return a === "filled" ? /* @__PURE__ */ c(
     R,
     {
       ref: s,
       "data-type": "filled",
-      ...n,
-      className: `${n == null ? void 0 : n.className} ${c}-${a}-lnc-btn ${f}`,
+      ...o,
+      className: `${o == null ? void 0 : o.className} ${l}-${a}-lnc-btn ${f}`,
       hasLeadingIcon: i,
       hasTrailingIcon: d,
-      onFocus: b,
+      onFocus: m,
       onBlur: g,
       onClick: h,
       onKeyDown: $,
-      tabIndex: m,
+      tabIndex: b,
       btnType: a,
       ...B,
       children: k()
     }
-  ) : a === "tinted" ? /* @__PURE__ */ l(
+  ) : a === "tinted" ? /* @__PURE__ */ c(
     M,
     {
       ref: s,
       "data-type": "tinted",
-      ...n,
-      className: `${n == null ? void 0 : n.className} ${c}-${a}-lnc-btn ${f}`,
+      ...o,
+      className: `${o == null ? void 0 : o.className} ${l}-${a}-lnc-btn ${f}`,
       hasLeadingIcon: i,
       hasTrailingIcon: d,
-      onFocus: b,
+      onFocus: m,
       onBlur: g,
       onClick: h,
       onKeyDown: $,
-      tabIndex: m,
+      tabIndex: b,
       btnType: a,
       ...B,
       children: k()
     }
-  ) : a === "outline" ? /* @__PURE__ */ l(
+  ) : a === "outline" ? /* @__PURE__ */ c(
     Q,
     {
       ref: s,
       "data-type": "outline",
-      ...n,
-      className: `${n == null ? void 0 : n.className} ${c}-${a}-lnc-btn ${f}`,
+      ...o,
+      className: `${o == null ? void 0 : o.className} ${l}-${a}-lnc-btn ${f}`,
       hasLeadingIcon: i,
       hasTrailingIcon: d,
-      onFocus: b,
+      onFocus: m,
       onBlur: g,
       onClick: h,
       onKeyDown: $,
-      tabIndex: m,
+      tabIndex: b,
       btnType: a,
       ...B,
       children: k()
     }
-  ) : a === "basic" ? /* @__PURE__ */ l(
+  ) : a === "basic" ? /* @__PURE__ */ c(
     L,
     {
       ref: s,
       "data-type": "basic",
-      ...n,
-      className: `${n == null ? void 0 : n.className} ${c}-${a}-lnc-btn ${f}`,
+      ...o,
+      className: `${o == null ? void 0 : o.className} ${l}-${a}-lnc-btn ${f}`,
       hasLeadingIcon: i,
       hasTrailingIcon: d,
-      onFocus: b,
+      onFocus: m,
       onBlur: g,
       onClick: h,
       onKeyDown: $,
-      tabIndex: m,
+      tabIndex: b,
       btnType: a,
       ...B,
       children: k()
     }
-  ) : /* @__PURE__ */ l(
+  ) : /* @__PURE__ */ c(
     R,
     {
       ref: s,
       "data-type": "filled",
       size: y,
-      ...n,
-      className: `${n == null ? void 0 : n.className} ${c}-${a}-lnc-btn ${f}`,
+      ...o,
+      className: `${o == null ? void 0 : o.className} ${l}-${a}-lnc-btn ${f}`,
       hasLeadingIcon: i,
       hasTrailingIcon: d,
-      onFocus: b,
+      onFocus: m,
       onBlur: g,
       onClick: h,
       onKeyDown: $,
       hasText: K,
-      tabIndex: m,
+      tabIndex: b,
       btnType: a,
       ...B,
       children: k()
@@ -507,17 +511,17 @@ const x = {
   );
 });
 X.propTypes = {
-  text: o.string,
-  iconStyle: o.oneOf(["regular", "solid"]),
+  text: n.string,
+  iconStyle: n.oneOf(["regular", "solid"]),
   /**
    * Icon before the text
    */
-  leadingIcon: o.string,
+  leadingIcon: n.string,
   /**
    * Icon after the text
    */
-  trailingIcon: o.string,
-  borderRadius: o.oneOf([
+  trailingIcon: n.string,
+  borderRadius: n.oneOf([
     "slight",
     "regular",
     "edged",
@@ -527,18 +531,18 @@ X.propTypes = {
   /**
    * Different styles
    */
-  btnType: o.oneOf(["filled", "tinted", "outline", "basic"]),
-  disabled: o.bool,
-  tabIndex: o.number,
+  btnType: n.oneOf(["filled", "tinted", "outline", "basic"]),
+  disabled: n.bool,
+  tabIndex: n.number,
   //---------------------------------------------------------------
-  onBlur: o.func,
-  onFocus: o.func,
-  onClick: o.func,
-  onKeyDown: o.func,
+  onBlur: n.func,
+  onFocus: n.func,
+  onClick: n.func,
+  onKeyDown: n.func,
   //---------------------------------------------------------------
-  className: o.string,
-  style: o.object,
-  color: o.oneOf([
+  className: n.string,
+  style: n.object,
+  color: n.oneOf([
     "primary",
     "secondary",
     "success",
@@ -548,7 +552,7 @@ X.propTypes = {
     "neutral",
     "gray"
   ]),
-  size: o.oneOf(["small", "medium", "large"])
+  size: n.oneOf(["small", "medium", "large"])
 };
 export {
   X as default

package/dist/IconButton.cjs

@@ -1,4 +1,4 @@
-"use strict";const i=require("react/jsx-runtime"),C=require("react"),l=require("./index-BpbMKBf_.cjs"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),t=require("./utils-Dl9xPH4c.cjs"),F=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),y=e=>`
+"use strict";const c=require("react/jsx-runtime"),C=require("react"),l=require("./index-BpbMKBf_.cjs"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),t=require("./utils-Dl9xPH4c.cjs"),F=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),y=e=>`
         outline: none;
         display: inline-flex;
         flex-direction: row;
@@ -15,7 +15,7 @@
         max-width: ${t.getSizeValueWithUnits(e.theme,e.size)};
     `,S=h.styled.i`
   font-size: 1.125rem;
-`,f=h.styled.button`
+`,k=h.styled.button`
   ${e=>y(e)}
 
   ${e=>t.getComponentTypographyCss(e.theme,"ButtonFilled",e.size,"enabled")};
@@ -46,7 +46,7 @@
   &:disabled {
     ${e=>e.disabled===!0&&t.getDisabledStateCss(e.theme)};
     cursor: default;
-    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled","gray","disabled","background")};
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"disabled","background","backgroundOpacity")};
     color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"disabled","text")};
   }
 `,N=h.styled.button`
@@ -80,10 +80,10 @@
   &:disabled {
     ${e=>e.disabled===!0&&t.getDisabledStateCss(e.theme)};
     cursor: default;
-    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted","gray","disabled","background","backgroundOpacity")};
-    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted","gray","disabled","text")};
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"disabled","background","backgroundOpacity")};
+    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"disabled","text")};
   }
-`,k=h.styled.button`
+`,f=h.styled.button`
   ${e=>y(e)}
 
   ${e=>t.getComponentTypographyCss(e.theme,"ButtonTinted",e.size,"enabled")};
@@ -114,9 +114,9 @@
   &:disabled {
     ${e=>e.disabled===!0&&t.getDisabledStateCss(e.theme)};
     cursor: default;
-    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic","gray","disabled","background","backgroundOpacity")};
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"disabled","background","backgroundOpacity")};
   }
-`,w=h.styled(k)`
+`,w=h.styled(f)`
   border: 1px solid
     ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"enabled","border","borderOpacity")};
-`,V=C.forwardRef((e,c)=>{const{icon:$=null,iconStyle:R="solid",borderRadius:T="regular",btnType:a="filled",disabled:x=!1,tabIndex:j=0,onFocus:r=()=>{},onBlur:u=()=>{},onClick:d=()=>{},onKeyDown:s=()=>{},size:B="small",color:n="primary",className:g="",style:z={},...b}=e,o={theme:F.useTheme(),color:n,size:B,style:z,className:"lnc-ui-icon-button",disabled:x,borderRadius:T,btnType:a},v=()=>{var O=R==="solid"?"fas":"far";return`${O} fa-${$} fa-fw`},m=()=>C.isValidElement($)?$:i.jsx(S,{className:v()});return a==="filled"?i.jsx(f,{ref:c,"data-type":"filled",...o,className:`${o==null?void 0:o.className} ${n}-${a}-lnc-btn ${g}`,onFocus:r,onBlur:u,onClick:d,onKeyDown:s,type:a,...b,children:m()}):a==="tinted"?i.jsx(N,{ref:c,"data-type":"tinted",...o,className:`${o==null?void 0:o.className} ${n}-${a}-lnc-btn ${g}`,onFocus:r,onBlur:u,onClick:d,onKeyDown:s,...b,children:m()}):a==="outline"?i.jsx(w,{ref:c,"data-type":"outline",...o,className:`${o==null?void 0:o.className} ${n}-${a}-lnc-btn ${g}`,onFocus:r,onBlur:u,onClick:d,onKeyDown:s,...b,children:m()}):a==="basic"?i.jsx(k,{ref:c,"data-type":"basic",...o,className:`${o==null?void 0:o.className} ${n}-${a}-lnc-btn ${g}`,onFocus:r,onBlur:u,onClick:d,onKeyDown:s,...b,children:m()}):i.jsx(f,{ref:c,"data-type":"filled",size:B,...o,className:`${o==null?void 0:o.className} ${n}-${a}-lnc-btn ${g}`,onFocus:r,onBlur:u,onClick:d,onKeyDown:s,...b,children:m()})});V.propTypes={icon:l.PropTypes.oneOfType([l.PropTypes.string,l.PropTypes.element]),iconStyle:l.PropTypes.oneOf(["regular","solid"]),borderRadius:l.PropTypes.oneOf(["slight","regular","edged","curved","none"]),btnType:l.PropTypes.oneOf(["filled","tinted","outline","basic"]),disabled:l.PropTypes.bool,tabIndex:l.PropTypes.number,onBlur:l.PropTypes.func,onFocus:l.PropTypes.func,onClick:l.PropTypes.func,onKeyDown:l.PropTypes.func,className:l.PropTypes.string,style:l.PropTypes.object,color:l.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:l.PropTypes.oneOf(["small","medium","large"])};module.exports=V;
+`,V=C.forwardRef((e,i)=>{const{icon:$=null,iconStyle:R="solid",borderRadius:T="regular",btnType:a="filled",disabled:x=!1,tabIndex:j=0,onFocus:r=()=>{},onBlur:u=()=>{},onClick:d=()=>{},onKeyDown:s=()=>{},size:B="small",color:n="primary",className:g="",style:z={},...b}=e,o={theme:F.useTheme(),color:n,size:B,style:z,className:"lnc-ui-icon-button",disabled:x,borderRadius:T,btnType:a},O=()=>{var v=R==="solid"?"fas":"far";return`${v} fa-${$} fa-fw`},m=()=>C.isValidElement($)?$:c.jsx(S,{className:O()});return a==="filled"?c.jsx(k,{ref:i,"data-type":"filled",...o,className:`${o==null?void 0:o.className} ${n}-${a}-lnc-btn ${g}`,onFocus:r,onBlur:u,onClick:d,onKeyDown:s,type:a,...b,children:m()}):a==="tinted"?c.jsx(N,{ref:i,"data-type":"tinted",...o,className:`${o==null?void 0:o.className} ${n}-${a}-lnc-btn ${g}`,onFocus:r,onBlur:u,onClick:d,onKeyDown:s,...b,children:m()}):a==="outline"?c.jsx(w,{ref:i,"data-type":"outline",...o,className:`${o==null?void 0:o.className} ${n}-${a}-lnc-btn ${g}`,onFocus:r,onBlur:u,onClick:d,onKeyDown:s,...b,children:m()}):a==="basic"?c.jsx(f,{ref:i,"data-type":"basic",...o,className:`${o==null?void 0:o.className} ${n}-${a}-lnc-btn ${g}`,onFocus:r,onBlur:u,onClick:d,onKeyDown:s,...b,children:m()}):c.jsx(k,{ref:i,"data-type":"filled",size:B,...o,className:`${o==null?void 0:o.className} ${n}-${a}-lnc-btn ${g}`,onFocus:r,onBlur:u,onClick:d,onKeyDown:s,...b,children:m()})});V.propTypes={icon:l.PropTypes.oneOfType([l.PropTypes.string,l.PropTypes.element]),iconStyle:l.PropTypes.oneOf(["regular","solid"]),borderRadius:l.PropTypes.oneOf(["slight","regular","edged","curved","none"]),btnType:l.PropTypes.oneOf(["filled","tinted","outline","basic"]),disabled:l.PropTypes.bool,tabIndex:l.PropTypes.number,onBlur:l.PropTypes.func,onFocus:l.PropTypes.func,onClick:l.PropTypes.func,onKeyDown:l.PropTypes.func,className:l.PropTypes.string,style:l.PropTypes.object,color:l.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:l.PropTypes.oneOf(["small","medium","large"])};module.exports=V;

package/dist/IconButton.js

@@ -2,7 +2,7 @@ import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as I, isValidElement as S } from "react";
 import { P as n } from "./index-CblbdqjE.js";
 import { s as g } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { c as f, b as t, d as l, e as k, h as y, a as V } from "./utils-BdsZgOUE.js";
+import { c as f, b as t, d as c, e as k, h as y, a as V } from "./utils-BdsZgOUE.js";
 import { u as j } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const x = (e) => `
         outline: none;
@@ -20,11 +20,11 @@ const x = (e) => `
   e.borderRadius
 )};
 
-        min-width: ${l(e.theme, e.size)};
-        max-width: ${l(e.theme, e.size)};
+        min-width: ${c(e.theme, e.size)};
+        max-width: ${c(e.theme, e.size)};
     `, D = g.i`
   font-size: 1.125rem;
-`, T = g.button`
+`, O = g.button`
   ${(e) => x(e)}
 
   ${(e) => f(
@@ -49,8 +49,8 @@ const x = (e) => `
   "text"
 )};
 
-  min-height: ${(e) => l(e.theme, e.size)};
-  max-height: ${(e) => l(e.theme, e.size)};
+  min-height: ${(e) => c(e.theme, e.size)};
+  max-height: ${(e) => c(e.theme, e.size)};
 
   &:hover {
     background-color: ${(e) => t(
@@ -111,9 +111,10 @@ const x = (e) => `
     background-color: ${(e) => t(
   e.theme,
   "ButtonFilled",
-  "gray",
+  e.color,
   "disabled",
-  "background"
+  "background",
+  "backgroundOpacity"
 )};
     color: ${(e) => t(
   e.theme,
@@ -151,8 +152,8 @@ const x = (e) => `
   "backgroundOpacity"
 )};
 
-  min-height: ${(e) => l(e.theme, e.size)};
-  max-height: ${(e) => l(e.theme, e.size)};
+  min-height: ${(e) => c(e.theme, e.size)};
+  max-height: ${(e) => c(e.theme, e.size)};
 
   &:hover {
     background-color: ${(e) => e.disabled !== !0 && t(
@@ -214,7 +215,7 @@ const x = (e) => `
     background-color: ${(e) => t(
   e.theme,
   "ButtonTinted",
-  "gray",
+  e.color,
   "disabled",
   "background",
   "backgroundOpacity"
@@ -222,12 +223,12 @@ const x = (e) => `
     color: ${(e) => t(
   e.theme,
   "ButtonTinted",
-  "gray",
+  e.color,
   "disabled",
   "text"
 )};
   }
-`, O = g.button`
+`, T = g.button`
   ${(e) => x(e)}
 
   ${(e) => f(
@@ -254,8 +255,8 @@ const x = (e) => `
   "backgroundOpacity"
 )};
 
-  min-height: ${(e) => l(e.theme, e.size)};
-  max-height: ${(e) => l(e.theme, e.size)};
+  min-height: ${(e) => c(e.theme, e.size)};
+  max-height: ${(e) => c(e.theme, e.size)};
 
   &:hover {
     background-color: ${(e) => t(
@@ -318,13 +319,13 @@ const x = (e) => `
     background-color: ${(e) => t(
   e.theme,
   "ButtonBasic",
-  "gray",
+  e.color,
   "disabled",
   "background",
   "backgroundOpacity"
 )};
   }
-`, U = g(O)`
+`, U = g(T)`
   border: 1px solid
     ${(e) => t(
   e.theme,
@@ -339,7 +340,7 @@ const x = (e) => `
     icon: B = null,
     iconStyle: z = "solid",
     borderRadius: F = "regular",
-    btnType: a = "filled",
+    btnType: l = "filled",
     disabled: N = !1,
     tabIndex: E = 0,
     //----------------
@@ -353,45 +354,45 @@ const x = (e) => `
     },
     //----------------
     size: v = "small",
-    color: c = "primary",
+    color: a = "primary",
     className: m = "",
     style: w = {},
     ...h
   } = e, o = {
     theme: j(),
-    color: c,
+    color: a,
     size: v,
     style: w,
     className: "lnc-ui-icon-button",
     disabled: N,
     borderRadius: F,
-    btnType: a
+    btnType: l
   }, C = () => {
     var R = z === "solid" ? "fas" : "far";
     return `${R} fa-${B} fa-fw`;
   }, $ = () => S(B) ? B : /* @__PURE__ */ i(D, { className: C() });
-  return a === "filled" ? /* @__PURE__ */ i(
-    T,
+  return l === "filled" ? /* @__PURE__ */ i(
+    O,
     {
       ref: d,
       "data-type": "filled",
       ...o,
-      className: `${o == null ? void 0 : o.className} ${c}-${a}-lnc-btn ${m}`,
+      className: `${o == null ? void 0 : o.className} ${a}-${l}-lnc-btn ${m}`,
       onFocus: r,
       onBlur: u,
       onClick: b,
       onKeyDown: s,
-      type: a,
+      type: l,
       ...h,
       children: $()
     }
-  ) : a === "tinted" ? /* @__PURE__ */ i(
+  ) : l === "tinted" ? /* @__PURE__ */ i(
     K,
     {
       ref: d,
       "data-type": "tinted",
       ...o,
-      className: `${o == null ? void 0 : o.className} ${c}-${a}-lnc-btn ${m}`,
+      className: `${o == null ? void 0 : o.className} ${a}-${l}-lnc-btn ${m}`,
       onFocus: r,
       onBlur: u,
       onClick: b,
@@ -399,13 +400,13 @@ const x = (e) => `
       ...h,
       children: $()
     }
-  ) : a === "outline" ? /* @__PURE__ */ i(
+  ) : l === "outline" ? /* @__PURE__ */ i(
     U,
     {
       ref: d,
       "data-type": "outline",
       ...o,
-      className: `${o == null ? void 0 : o.className} ${c}-${a}-lnc-btn ${m}`,
+      className: `${o == null ? void 0 : o.className} ${a}-${l}-lnc-btn ${m}`,
       onFocus: r,
       onBlur: u,
       onClick: b,
@@ -413,13 +414,13 @@ const x = (e) => `
       ...h,
       children: $()
     }
-  ) : a === "basic" ? /* @__PURE__ */ i(
-    O,
+  ) : l === "basic" ? /* @__PURE__ */ i(
+    T,
     {
       ref: d,
       "data-type": "basic",
       ...o,
-      className: `${o == null ? void 0 : o.className} ${c}-${a}-lnc-btn ${m}`,
+      className: `${o == null ? void 0 : o.className} ${a}-${l}-lnc-btn ${m}`,
       onFocus: r,
       onBlur: u,
       onClick: b,
@@ -428,13 +429,13 @@ const x = (e) => `
       children: $()
     }
   ) : /* @__PURE__ */ i(
-    T,
+    O,
     {
       ref: d,
       "data-type": "filled",
       size: v,
       ...o,
-      className: `${o == null ? void 0 : o.className} ${c}-${a}-lnc-btn ${m}`,
+      className: `${o == null ? void 0 : o.className} ${a}-${l}-lnc-btn ${m}`,
       onFocus: r,
       onBlur: u,
       onClick: b,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.143",
+  "version": "4.0.145",
   "description": "React component library",
   "type": "module",
   "keywords": [