@lanaco/lnc-react-ui 4.0.103 → 4.0.105

package/dist/Button.cjs

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

package/dist/Button.js

@@ -1,12 +1,12 @@
-import { jsx as i, jsxs as W, Fragment as E } from "react/jsx-runtime";
-import { forwardRef as P } from "react";
+import { jsx as l, jsxs as W, Fragment as E } from "react/jsx-runtime";
+import { forwardRef as q } from "react";
 import { P as o } from "./index-S5Cd7WrG.js";
-import { i as y } from "./index-BlxaTV-D.js";
-import { s as d } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { c as x, b as t, d as r, h as T, e as z, a as q } from "./utils-BXCGNjIy.js";
+import { i as T } from "./index-BlxaTV-D.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-BXCGNjIy.js";
 import w from "./Icon.js";
-import { u as A } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-const k = {
+import { u as G } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+const x = {
   small: {
     regular: "1rem",
     icon: "0.75rem",
@@ -22,7 +22,7 @@ const k = {
     icon: "1rem",
     justIcon: "0.5rem"
   }
-}, I = (e) => `
+}, O = (e) => `
         outline: none;
         display: inline-flex;
         flex-direction: row;
@@ -33,21 +33,21 @@ const k = {
         cursor: pointer;
         color: ${!e.disabled && "white"};
 
-        border-radius: ${q(
+        border-radius: ${A(
   e.theme,
   e.borderRadius
 )};
         
-        padding-left: ${e.hasLeadingIcon ? k[e.size].icon : k[e.size].regular};
-        padding-right: ${e.hasTrailingIcon ? k[e.size].icon : k[e.size].regular};
-    `, G = d.span`
+        padding-left: ${e.hasLeadingIcon ? x[e.size].icon : x[e.size].regular};
+        padding-right: ${e.hasTrailingIcon ? x[e.size].icon : x[e.size].regular};
+    `, H = u.span`
   padding-right: ${(e) => e.size === "small" ? "0.25rem" : "0.5rem"};
-`, H = d.span`
+`, J = u.span`
   padding-left: ${(e) => e.size === "small" ? "0.25rem" : "0.5rem"};
-`, R = d.button`
-  ${(e) => I(e)}
+`, R = u.button`
+  ${(e) => O(e)}
 
-  ${(e) => x(
+  ${(e) => z(
   e.theme,
   "ButtonFilled",
   e.size,
@@ -73,7 +73,7 @@ const k = {
   max-height: ${(e) => r(e.theme, e.size)};
 
   &:disabled {
-    ${(e) => e.disabled === !0 && T(e.theme)};
+    ${(e) => e.disabled === !0 && I(e.theme)};
     cursor: default;
     background-color: ${(e) => t(
   e.theme,
@@ -123,7 +123,7 @@ const k = {
   "focus",
   "text"
 )};
-    ${(e) => !e.disabled && z(e.theme)};
+    ${(e) => !e.disabled && v(e.theme)};
   }
 
   &:active {
@@ -142,12 +142,12 @@ const k = {
   "text"
 )};
   }
-`, J = d.button`
-  ${(e) => I(e)}
+`, M = u.button`
+  ${(e) => O(e)}
 
   min-height: ${(e) => r(e.theme, e.size)};
   max-height: ${(e) => r(e.theme, e.size)};
-  ${(e) => x(
+  ${(e) => z(
   e.theme,
   "ButtonTinted",
   e.size,
@@ -208,7 +208,7 @@ const k = {
   "focus",
   "text"
 )};
-    ${(e) => e.disabled === !1 && z(e.theme)};
+    ${(e) => e.disabled === !1 && v(e.theme)};
   }
 
   &:active {
@@ -231,7 +231,7 @@ const k = {
   }
 
   &:disabled {
-    ${(e) => e.disabled === !0 && T(e.theme)};
+    ${(e) => e.disabled === !0 && I(e.theme)};
     cursor: default;
     background-color: ${(e) => t(
   e.theme,
@@ -241,10 +241,10 @@ const k = {
   "background"
 )};
   }
-`, N = d.button`
-  ${(e) => I(e)}
+`, L = u.button`
+  ${(e) => O(e)}
 
-  ${(e) => x(
+  ${(e) => z(
   e.theme,
   "ButtonTinted",
   e.size,
@@ -307,7 +307,7 @@ const k = {
   "text"
 )};
 
-    ${(e) => !e.disabled && z(e.theme)};
+    ${(e) => !e.disabled && v(e.theme)};
   }
 
   &:active {
@@ -329,7 +329,7 @@ const k = {
   }
 
   &:disabled {
-    ${(e) => e.disabled === !0 && T(e.theme)};
+    ${(e) => e.disabled === !0 && I(e.theme)};
     cursor: default;
     background-color: ${(e) => t(
   e.theme,
@@ -340,7 +340,7 @@ const k = {
   "backgroundOpacity"
 )};
   }
-`, M = d(N)`
+`, Q = u(L)`
   border: 1px solid
     ${(e) => t(
   e.theme,
@@ -350,150 +350,154 @@ const k = {
   "border",
   "borderOpacity"
 )};
-`, Q = P((e, u) => {
+`, X = q((e, s) => {
   const {
-    text: v = "",
-    iconStyle: O = "solid",
-    leadingIcon: F = null,
-    trailingIcon: C = null,
-    borderRadius: L = "regular",
-    btnType: n = "filled",
-    disabled: S = !1,
-    tabIndex: s = 0,
+    text: F = "",
+    iconStyle: C = "solid",
+    leadingIcon: N = null,
+    trailingIcon: j = null,
+    borderRadius: S = "regular",
+    btnType: a = "filled",
+    disabled: U = !1,
+    tabIndex: m = 0,
     //----------------
-    onFocus: m,
-    onBlur: b,
-    onClick: g,
-    onKeyDown: h,
-    onLeadingIconClick: X,
-    onTrailingIconClick: Y,
+    onFocus: b,
+    onBlur: g,
+    onClick: h,
+    onKeyDown: $,
+    onLeadingIconClick: Y,
+    onTrailingIconClick: Z,
     //----------------
-    size: B = "small",
-    color: j = "primary",
-    className: U = "",
+    size: y = "small",
+    color: c = "primary",
+    className: f = "",
     style: D = {},
     children: V,
-    ...$
-  } = e, a = {
-    theme: A(),
-    color: j,
-    size: B,
+    ...B
+  } = e, n = {
+    theme: G(),
+    color: c,
+    size: y,
     style: D,
-    disabled: S,
-    borderRadius: L,
-    btnType: n,
+    disabled: U,
+    borderRadius: S,
+    btnType: a,
     className: "lnc-ui-button "
-  }, l = !y(F), c = !y(C), K = !y(v), f = () => /* @__PURE__ */ W(E, { children: [
-    l && /* @__PURE__ */ i(G, { size: B, children: /* @__PURE__ */ i(
+  }, i = !T(N), d = !T(j), K = !T(F), k = () => /* @__PURE__ */ W(E, { children: [
+    i && /* @__PURE__ */ l(H, { size: y, children: /* @__PURE__ */ l(
       w,
       {
-        icon: F,
+        icon: N,
         sizeInUnits: "1.125rem",
-        iconStyle: O
+        iconStyle: C
       }
     ) }),
-    v,
+    F,
     V,
-    c && /* @__PURE__ */ i(H, { size: B, children: /* @__PURE__ */ i(
+    d && /* @__PURE__ */ l(J, { size: y, children: /* @__PURE__ */ l(
       w,
       {
-        icon: C,
+        icon: j,
         sizeInUnits: "1.125rem",
-        iconStyle: O
+        iconStyle: C
       }
     ) })
   ] });
-  return n === "filled" ? /* @__PURE__ */ i(
+  return a === "filled" ? /* @__PURE__ */ l(
     R,
     {
-      ref: u,
+      ref: s,
       "data-type": "filled",
-      ...a,
-      className: `${a == null ? void 0 : a.className} ${j}-${n}-lnc-btn ${U}`,
-      hasLeadingIcon: l,
-      hasTrailingIcon: c,
-      onFocus: m,
-      onBlur: b,
-      onClick: g,
-      onKeyDown: h,
-      tabIndex: s,
-      btnType: n,
-      ...$,
-      children: f()
+      ...n,
+      className: `${n == null ? void 0 : n.className} ${c}-${a}-lnc-btn ${f}`,
+      hasLeadingIcon: i,
+      hasTrailingIcon: d,
+      onFocus: b,
+      onBlur: g,
+      onClick: h,
+      onKeyDown: $,
+      tabIndex: m,
+      btnType: a,
+      ...B,
+      children: k()
     }
-  ) : n === "tinted" ? /* @__PURE__ */ i(
-    J,
+  ) : a === "tinted" ? /* @__PURE__ */ l(
+    M,
     {
-      ref: u,
+      ref: s,
       "data-type": "tinted",
-      ...a,
-      hasLeadingIcon: l,
-      hasTrailingIcon: c,
-      onFocus: m,
-      onBlur: b,
-      onClick: g,
-      onKeyDown: h,
-      tabIndex: s,
-      btnType: n,
-      ...$,
-      children: f()
+      ...n,
+      className: `${n == null ? void 0 : n.className} ${c}-${a}-lnc-btn ${f}`,
+      hasLeadingIcon: i,
+      hasTrailingIcon: d,
+      onFocus: b,
+      onBlur: g,
+      onClick: h,
+      onKeyDown: $,
+      tabIndex: m,
+      btnType: a,
+      ...B,
+      children: k()
     }
-  ) : n === "outline" ? /* @__PURE__ */ i(
-    M,
+  ) : a === "outline" ? /* @__PURE__ */ l(
+    Q,
     {
-      ref: u,
+      ref: s,
       "data-type": "outline",
-      ...a,
-      hasLeadingIcon: l,
-      hasTrailingIcon: c,
-      onFocus: m,
-      onBlur: b,
-      onClick: g,
-      onKeyDown: h,
-      tabIndex: s,
-      btnType: n,
-      ...$,
-      children: f()
+      ...n,
+      className: `${n == null ? void 0 : n.className} ${c}-${a}-lnc-btn ${f}`,
+      hasLeadingIcon: i,
+      hasTrailingIcon: d,
+      onFocus: b,
+      onBlur: g,
+      onClick: h,
+      onKeyDown: $,
+      tabIndex: m,
+      btnType: a,
+      ...B,
+      children: k()
     }
-  ) : n === "basic" ? /* @__PURE__ */ i(
-    N,
+  ) : a === "basic" ? /* @__PURE__ */ l(
+    L,
     {
-      ref: u,
+      ref: s,
       "data-type": "basic",
-      ...a,
-      hasLeadingIcon: l,
-      hasTrailingIcon: c,
-      onFocus: m,
-      onBlur: b,
-      onClick: g,
-      onKeyDown: h,
-      tabIndex: s,
-      btnType: n,
-      ...$,
-      children: f()
+      ...n,
+      className: `${n == null ? void 0 : n.className} ${c}-${a}-lnc-btn ${f}`,
+      hasLeadingIcon: i,
+      hasTrailingIcon: d,
+      onFocus: b,
+      onBlur: g,
+      onClick: h,
+      onKeyDown: $,
+      tabIndex: m,
+      btnType: a,
+      ...B,
+      children: k()
     }
-  ) : /* @__PURE__ */ i(
+  ) : /* @__PURE__ */ l(
     R,
     {
-      ref: u,
+      ref: s,
       "data-type": "filled",
-      size: B,
-      ...a,
-      hasLeadingIcon: l,
-      hasTrailingIcon: c,
-      onFocus: m,
-      onBlur: b,
-      onClick: g,
-      onKeyDown: h,
+      size: y,
+      ...n,
+      className: `${n == null ? void 0 : n.className} ${c}-${a}-lnc-btn ${f}`,
+      hasLeadingIcon: i,
+      hasTrailingIcon: d,
+      onFocus: b,
+      onBlur: g,
+      onClick: h,
+      onKeyDown: $,
       hasText: K,
-      tabIndex: s,
-      btnType: n,
-      ...$,
-      children: f()
+      tabIndex: m,
+      btnType: a,
+      ...B,
+      children: k()
     }
   );
 });
-Q.propTypes = {
+X.propTypes = {
   text: o.string,
   iconStyle: o.oneOf(["regular", "solid"]),
   /**
@@ -538,5 +542,5 @@ Q.propTypes = {
   size: o.oneOf(["small", "medium", "large"])
 };
 export {
-  Q as default
+  X as default
 };

package/dist/IconButton.cjs

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

package/dist/IconButton.js

@@ -1,10 +1,10 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as S, isValidElement as N } from "react";
-import { P as o } from "./index-S5Cd7WrG.js";
-import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { c as $, b as t, d as n, e as B, h as f, a as V } from "./utils-BXCGNjIy.js";
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as I, isValidElement as S } from "react";
+import { P as n } from "./index-S5Cd7WrG.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-BXCGNjIy.js";
 import { u as j } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-const k = (e) => `
+const x = (e) => `
         outline: none;
         display: inline-flex;
         flex-direction: row;
@@ -20,14 +20,14 @@ const k = (e) => `
   e.borderRadius
 )};
 
-        min-width: ${n(e.theme, e.size)};
-        max-width: ${n(e.theme, e.size)};
-    `, D = h.i`
+        min-width: ${l(e.theme, e.size)};
+        max-width: ${l(e.theme, e.size)};
+    `, D = g.i`
   font-size: 1.125rem;
-`, x = h.button`
-  ${(e) => k(e)}
+`, T = g.button`
+  ${(e) => x(e)}
 
-  ${(e) => $(
+  ${(e) => f(
   e.theme,
   "ButtonFilled",
   e.size,
@@ -49,8 +49,8 @@ const k = (e) => `
   "text"
 )};
 
-  min-height: ${(e) => n(e.theme, e.size)};
-  max-height: ${(e) => n(e.theme, e.size)};
+  min-height: ${(e) => l(e.theme, e.size)};
+  max-height: ${(e) => l(e.theme, e.size)};
 
   &:hover {
     background-color: ${(e) => t(
@@ -85,7 +85,7 @@ const k = (e) => `
   "text"
 )};
 
-    ${(e) => e.disabled === !1 && B(e.theme)};
+    ${(e) => e.disabled === !1 && k(e.theme)};
   }
 
   &:active {
@@ -106,7 +106,7 @@ const k = (e) => `
   }
 
   &:disabled {
-    ${(e) => e.disabled === !0 && f(e.theme)};
+    ${(e) => e.disabled === !0 && y(e.theme)};
     cursor: default;
     background-color: ${(e) => t(
   e.theme,
@@ -123,10 +123,10 @@ const k = (e) => `
   "text"
 )};
   }
-`, P = h.button`
-  ${(e) => k(e)}
+`, K = g.button`
+  ${(e) => x(e)}
 
-  ${(e) => $(
+  ${(e) => f(
   e.theme,
   "ButtonTinted",
   e.size,
@@ -151,8 +151,8 @@ const k = (e) => `
   "backgroundOpacity"
 )};
 
-  min-height: ${(e) => n(e.theme, e.size)};
-  max-height: ${(e) => n(e.theme, e.size)};
+  min-height: ${(e) => l(e.theme, e.size)};
+  max-height: ${(e) => l(e.theme, e.size)};
 
   &:hover {
     background-color: ${(e) => e.disabled !== !0 && t(
@@ -188,7 +188,7 @@ const k = (e) => `
   "focus",
   "text"
 )};
-    ${(e) => e.disabled === !1 && B(e.theme)};
+    ${(e) => e.disabled === !1 && k(e.theme)};
   }
 
   &:active {
@@ -209,7 +209,7 @@ const k = (e) => `
 )};
   }
   &:disabled {
-    ${(e) => e.disabled === !0 && f(e.theme)};
+    ${(e) => e.disabled === !0 && y(e.theme)};
     cursor: default;
     background-color: ${(e) => t(
   e.theme,
@@ -227,10 +227,10 @@ const k = (e) => `
   "text"
 )};
   }
-`, v = h.button`
-  ${(e) => k(e)}
+`, O = g.button`
+  ${(e) => x(e)}
 
-  ${(e) => $(
+  ${(e) => f(
   e.theme,
   "ButtonTinted",
   e.size,
@@ -254,8 +254,8 @@ const k = (e) => `
   "backgroundOpacity"
 )};
 
-  min-height: ${(e) => n(e.theme, e.size)};
-  max-height: ${(e) => n(e.theme, e.size)};
+  min-height: ${(e) => l(e.theme, e.size)};
+  max-height: ${(e) => l(e.theme, e.size)};
 
   &:hover {
     background-color: ${(e) => t(
@@ -291,7 +291,7 @@ const k = (e) => `
   "hover",
   "text"
 )};
-    ${(e) => e.disabled === !1 && B(e.theme)};
+    ${(e) => e.disabled === !1 && k(e.theme)};
   }
 
   &:active {
@@ -313,7 +313,7 @@ const k = (e) => `
   }
 
   &:disabled {
-    ${(e) => e.disabled === !0 && f(e.theme)};
+    ${(e) => e.disabled === !0 && y(e.theme)};
     cursor: default;
     background-color: ${(e) => t(
   e.theme,
@@ -324,7 +324,7 @@ const k = (e) => `
   "backgroundOpacity"
 )};
   }
-`, K = h(v)`
+`, U = g(O)`
   border: 1px solid
     ${(e) => t(
   e.theme,
@@ -334,115 +334,120 @@ const k = (e) => `
   "border",
   "borderOpacity"
 )};
-`, U = S((e, c) => {
+`, W = I((e, d) => {
   const {
-    icon: g = null,
-    iconStyle: T = "solid",
-    borderRadius: O = "regular",
-    btnType: l = "filled",
-    disabled: z = !1,
-    tabIndex: W = 0,
+    icon: B = null,
+    iconStyle: z = "solid",
+    borderRadius: F = "regular",
+    btnType: a = "filled",
+    disabled: N = !1,
+    tabIndex: E = 0,
     //----------------
-    onFocus: i = () => {
+    onFocus: r = () => {
     },
-    onBlur: d = () => {
+    onBlur: u = () => {
     },
-    onClick: r = () => {
+    onClick: b = () => {
     },
-    onKeyDown: u = () => {
+    onKeyDown: s = () => {
     },
     //----------------
-    size: y = "small",
-    color: F = "primary",
-    className: w = "",
-    style: C = {},
-    ...b
-  } = e, s = {
+    size: v = "small",
+    color: c = "primary",
+    className: m = "",
+    style: w = {},
+    ...h
+  } = e, o = {
     theme: j(),
-    color: F,
-    size: y,
-    style: C,
-    className: "lnc-ui-icon-button " + w,
-    disabled: z,
-    borderRadius: O,
-    btnType: l
-  }, R = () => {
-    var I = T === "solid" ? "fas" : "far";
-    return `${I} fa-${g} fa-fw`;
-  }, m = () => N(g) ? g : /* @__PURE__ */ a(D, { className: R() });
-  return l === "filled" ? /* @__PURE__ */ a(
-    x,
+    color: c,
+    size: v,
+    style: w,
+    className: "lnc-ui-icon-button",
+    disabled: N,
+    borderRadius: F,
+    btnType: a
+  }, 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,
     {
-      ref: c,
+      ref: d,
       "data-type": "filled",
-      ...s,
-      onFocus: i,
-      onBlur: d,
-      onClick: r,
-      onKeyDown: u,
-      type: l,
-      ...b,
-      children: m()
+      ...o,
+      className: `${o == null ? void 0 : o.className} ${c}-${a}-lnc-btn ${m}`,
+      onFocus: r,
+      onBlur: u,
+      onClick: b,
+      onKeyDown: s,
+      type: a,
+      ...h,
+      children: $()
     }
-  ) : l === "tinted" ? /* @__PURE__ */ a(
-    P,
+  ) : a === "tinted" ? /* @__PURE__ */ i(
+    K,
     {
-      ref: c,
+      ref: d,
       "data-type": "tinted",
-      ...s,
-      onFocus: i,
-      onBlur: d,
-      onClick: r,
-      onKeyDown: u,
-      ...b,
-      children: m()
+      ...o,
+      className: `${o == null ? void 0 : o.className} ${c}-${a}-lnc-btn ${m}`,
+      onFocus: r,
+      onBlur: u,
+      onClick: b,
+      onKeyDown: s,
+      ...h,
+      children: $()
     }
-  ) : l === "outline" ? /* @__PURE__ */ a(
-    K,
+  ) : a === "outline" ? /* @__PURE__ */ i(
+    U,
     {
-      ref: c,
+      ref: d,
       "data-type": "outline",
-      ...s,
-      onFocus: i,
-      onBlur: d,
-      onClick: r,
-      onKeyDown: u,
-      ...b,
-      children: m()
+      ...o,
+      className: `${o == null ? void 0 : o.className} ${c}-${a}-lnc-btn ${m}`,
+      onFocus: r,
+      onBlur: u,
+      onClick: b,
+      onKeyDown: s,
+      ...h,
+      children: $()
     }
-  ) : l === "basic" ? /* @__PURE__ */ a(
-    v,
+  ) : a === "basic" ? /* @__PURE__ */ i(
+    O,
     {
-      ref: c,
+      ref: d,
       "data-type": "basic",
-      ...s,
-      onFocus: i,
-      onBlur: d,
-      onClick: r,
-      onKeyDown: u,
-      ...b,
-      children: m()
+      ...o,
+      className: `${o == null ? void 0 : o.className} ${c}-${a}-lnc-btn ${m}`,
+      onFocus: r,
+      onBlur: u,
+      onClick: b,
+      onKeyDown: s,
+      ...h,
+      children: $()
     }
-  ) : /* @__PURE__ */ a(
-    x,
+  ) : /* @__PURE__ */ i(
+    T,
     {
-      ref: c,
+      ref: d,
       "data-type": "filled",
-      size: y,
-      ...s,
-      onFocus: i,
-      onBlur: d,
-      onClick: r,
-      onKeyDown: u,
-      ...b,
-      children: m()
+      size: v,
+      ...o,
+      className: `${o == null ? void 0 : o.className} ${c}-${a}-lnc-btn ${m}`,
+      onFocus: r,
+      onBlur: u,
+      onClick: b,
+      onKeyDown: s,
+      ...h,
+      children: $()
     }
   );
 });
-U.propTypes = {
-  icon: o.oneOfType([o.string, o.element]),
-  iconStyle: o.oneOf(["regular", "solid"]),
-  borderRadius: o.oneOf([
+W.propTypes = {
+  icon: n.oneOfType([n.string, n.element]),
+  iconStyle: n.oneOf(["regular", "solid"]),
+  borderRadius: n.oneOf([
     "slight",
     "regular",
     "edged",
@@ -452,18 +457,18 @@ U.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",
@@ -473,8 +478,8 @@ U.propTypes = {
     "neutral",
     "gray"
   ]),
-  size: o.oneOf(["small", "medium", "large"])
+  size: n.oneOf(["small", "medium", "large"])
 };
 export {
-  U as default
+  W as default
 };

package/package.json

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