@lanaco/lnc-react-ui 4.0.144 → 4.0.145

package/dist/Button.cjs

@@ -1,4 +1,4 @@
-"use strict";const a=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",e.color,"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`
@@ -126,4 +126,4 @@
 `,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:n="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:n,className:"lnc-ui-button "},c=!k.isEmpty(V),r=!k.isEmpty(z),q=!k.isEmpty(x),B=()=>a.jsxs(a.Fragment,{children:[c&&a.jsx(W,{size:C,children:a.jsx(I,{icon:V,sizeInUnits:"1.125rem",iconStyle:R})}),x,U,r&&a.jsx(D,{size:C,children:a.jsx(I,{icon:z,sizeInUnits:"1.125rem",iconStyle:R})})]});return n==="filled"?a.jsx(O,{ref:u,"data-type":"filled",...o,className:`${o==null?void 0:o.className} ${i}-${n}-lnc-btn ${$}`,hasLeadingIcon:c,hasTrailingIcon:r,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,tabIndex:s,btnType:n,...y,children:B()}):n==="tinted"?a.jsx(E,{ref:u,"data-type":"tinted",...o,className:`${o==null?void 0:o.className} ${i}-${n}-lnc-btn ${$}`,hasLeadingIcon:c,hasTrailingIcon:r,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,tabIndex:s,btnType:n,...y,children:B()}):n==="outline"?a.jsx(L,{ref:u,"data-type":"outline",...o,className:`${o==null?void 0:o.className} ${i}-${n}-lnc-btn ${$}`,hasLeadingIcon:c,hasTrailingIcon:r,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,tabIndex:s,btnType:n,...y,children:B()}):n==="basic"?a.jsx(v,{ref:u,"data-type":"basic",...o,className:`${o==null?void 0:o.className} ${i}-${n}-lnc-btn ${$}`,hasLeadingIcon:c,hasTrailingIcon:r,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,tabIndex:s,btnType:n,...y,children:B()}):a.jsx(O,{ref:u,"data-type":"filled",size:C,...o,className:`${o==null?void 0:o.className} ${i}-${n}-lnc-btn ${$}`,hasLeadingIcon:c,hasTrailingIcon:r,onFocus:g,onBlur:b,onClick:m,onKeyDown:h,hasText:q,tabIndex:s,btnType:n,...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 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",
   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,
@@ -251,9 +255,9 @@ const x = {
 )};
   }
 `, 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,7 +342,7 @@ 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,
@@ -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, 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",
       ...o,
-      className: `${o == null ? void 0 : o.className} ${c}-${a}-lnc-btn ${f}`,
+      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",
       ...o,
-      className: `${o == null ? void 0 : o.className} ${c}-${a}-lnc-btn ${f}`,
+      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",
       ...o,
-      className: `${o == null ? void 0 : o.className} ${c}-${a}-lnc-btn ${f}`,
+      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",
       ...o,
-      className: `${o == null ? void 0 : o.className} ${c}-${a}-lnc-btn ${f}`,
+      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,
       ...o,
-      className: `${o == null ? void 0 : o.className} ${c}-${a}-lnc-btn ${f}`,
+      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()

package/dist/IconButton.cjs

@@ -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",e.color,"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`
@@ -83,7 +83,7 @@
     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")};
@@ -116,7 +116,7 @@
     cursor: default;
     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,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},v=()=>{var O=R==="solid"?"fas":"far";return`${O} fa-${$} fa-fw`},m=()=>C.isValidElement($)?$:c.jsx(S,{className:v()});return a==="filled"?c.jsx(f,{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(k,{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(f,{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;
+`,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

@@ -24,7 +24,7 @@ const x = (e) => `
         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(
@@ -113,7 +113,8 @@ const x = (e) => `
   "ButtonFilled",
   e.color,
   "disabled",
-  "background"
+  "background",
+  "backgroundOpacity"
 )};
     color: ${(e) => t(
   e.theme,
@@ -227,7 +228,7 @@ const x = (e) => `
   "text"
 )};
   }
-`, O = g.button`
+`, T = g.button`
   ${(e) => x(e)}
 
   ${(e) => f(
@@ -324,7 +325,7 @@ const x = (e) => `
   "backgroundOpacity"
 )};
   }
-`, U = g(O)`
+`, U = g(T)`
   border: 1px solid
     ${(e) => t(
   e.theme,
@@ -371,7 +372,7 @@ const x = (e) => `
     return `${R} fa-${B} fa-fw`;
   }, $ = () => S(B) ? B : /* @__PURE__ */ i(D, { className: C() });
   return l === "filled" ? /* @__PURE__ */ i(
-    T,
+    O,
     {
       ref: d,
       "data-type": "filled",
@@ -414,7 +415,7 @@ const x = (e) => `
       children: $()
     }
   ) : l === "basic" ? /* @__PURE__ */ i(
-    O,
+    T,
     {
       ref: d,
       "data-type": "basic",
@@ -428,7 +429,7 @@ const x = (e) => `
       children: $()
     }
   ) : /* @__PURE__ */ i(
-    T,
+    O,
     {
       ref: d,
       "data-type": "filled",

package/package.json

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