@lanaco/lnc-react-ui 3.11.35 → 4.0.2

package/dist/NumberInput.cjs

@@ -0,0 +1,45 @@
+"use strict";const i=require("react/jsx-runtime"),t=require("./index-DXnSjbfJ.cjs"),l=require("react"),U=require("./index-BjdOz5Ok.cjs"),d=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),n=require("./utils-hdRGTsQ7.cjs"),A=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),B=d.newStyled.div`
+  display: flex;
+  align-items: center;
+
+  min-height: ${e=>n.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>n.getSizeValueWithUnits(e.theme,e.size)};
+  background-color: ${e=>n.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
+  border: 1px solid
+    ${e=>n.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,e.disabled===!0?"disabled":"enabled","border")};
+  border-radius: ${e=>n.getBorderRadiusValueWithUnits(e.theme,"regular")};
+
+  ${e=>e.focused&&e.readOnly!==!0?n.getOutlineCss(e.theme):""}
+  ${e=>e.disabled===!0?n.getDisabledStateCss(e.theme):""}
+`,S=d.newStyled.span`
+  padding: 0 12px;
+  color: ${e=>n.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
+`,D=d.newStyled(S)``,G=d.newStyled.input`
+  background: none;
+  border: none;
+  outline: none;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  width: 100%;
+
+  ${e=>n.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
+  min-height: ${e=>n.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>n.getSizeValueWithUnits(e.theme,e.size)};
+  color: ${e=>n.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","text")};
+  caret-color: ${e=>n.getColorRgbaValue(e.theme,"Input",e.color,"enabled","caret")};
+  padding-right: ${e=>e.suffix?"0":"0.75rem"};
+  padding-left: ${e=>e.prefix?"0":"0.75rem"};
+
+  &::placeholder {
+    color: ${e=>n.getColorRgbaValue(e.theme,"Input",e.color,"enabled","placeholder")};
+  }
+
+  &:read-only {
+    cursor: default;
+  }
+
+  &:disabled {
+    ${e=>n.getDisabledStateCss(e.theme)}
+    background: none;
+  }
+`,$=l.forwardRef((e,C)=>{const{disabled:h,readOnly:f,debounceTime:V=180,step:I=1,min:R=Number.MIN_SAFE_INTEGER,max:z=Number.MAX_SAFE_INTEGER,prefix:c,suffix:m,placeholder:N,value:o,defaultValue:w,onChange:s,onBlur:p,onFocus:y,className:O="",style:E={},size:T="small",color:a="primary",..._}=e,u=A.useTheme(),[q,x]=l.useState(o||w||""),[g,P]=l.useState(!1);l.useEffect(()=>{o!=null&&x(o)},[o]);const v=l.useCallback(U.debounce((r,b)=>j(r,b),V),[s]),j=(r,b)=>{s&&(s==null||s(r,b))},W=r=>{x(r.target.value),v(r,r.target.value)},k=r=>{P(!0),y==null||y(r)},F=r=>{P(!1),p==null||p(r)};return i.jsxs(B,{style:E,className:O,theme:u,color:a,size:T,focused:g,disabled:h,readOnly:f,children:[c&&i.jsx(S,{theme:u,color:a,focused:g,className:"lnc-input-prefix",children:c}),i.jsx(G,{ref:C,type:"number",theme:u,color:a,size:T,placeholder:N,prefix:c,suffix:m,disabled:h,readOnly:f,step:I,min:R,max:z,value:q,onFocus:k,onBlur:F,onChange:W,..._}),m&&i.jsx(D,{theme:u,color:a,focused:g,className:"lnc-input-suffix",children:m})]})});$.propTypes={id:t.PropTypes.string,value:t.PropTypes.any,defaultValue:t.PropTypes.any,disabled:t.PropTypes.bool,readOnly:t.PropTypes.bool,debounceTime:t.PropTypes.number,step:t.PropTypes.number,min:t.PropTypes.number,max:t.PropTypes.number,prefix:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),suffix:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),placeholder:t.PropTypes.string,tabIndex:t.PropTypes.number,onChange:t.PropTypes.func,onBlur:t.PropTypes.func,onFocus:t.PropTypes.func,className:t.PropTypes.string,style:t.PropTypes.object,size:t.PropTypes.oneOf(["small","medium","large"]),color:t.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=$;

package/dist/NumberInput.js

@@ -0,0 +1,241 @@
+import { jsxs as A, jsx as g } from "react/jsx-runtime";
+import { P as n } from "./index-Ds9PUTwb.js";
+import P, { useState as C, useEffect as W, useCallback as G } from "react";
+import { d as M } from "./index-D5vEbKUT.js";
+import { n as i } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { f as d, b as a, c as U, h as D, g as S, a as X } from "./utils-DEke8iwo.js";
+import { u as q } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const H = i.div`
+  display: flex;
+  align-items: center;
+
+  min-height: ${(e) => d(e.theme, e.size)};
+  max-height: ${(e) => d(e.theme, e.size)};
+  background-color: ${(e) => a(
+  e.theme,
+  "Input",
+  e.color,
+  "enabled",
+  "background"
+)};
+  border: 1px solid
+    ${(e) => a(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "border"
+)};
+  border-radius: ${(e) => U(e.theme, "regular")};
+
+  ${(e) => e.focused && e.readOnly !== !0 ? D(e.theme) : ""}
+  ${(e) => e.disabled === !0 ? S(e.theme) : ""}
+`, N = i.span`
+  padding: 0 12px;
+  color: ${(e) => a(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  "enabled",
+  "prefix"
+)};
+`, J = i(N)``, K = i.input`
+  background: none;
+  border: none;
+  outline: none;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  width: 100%;
+
+  ${(e) => X(e.theme, "Input", e.size, "enabled")}
+  min-height: ${(e) => d(e.theme, e.size)};
+  max-height: ${(e) => d(e.theme, e.size)};
+  color: ${(e) => a(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  "enabled",
+  "text"
+)};
+  caret-color: ${(e) => a(e.theme, "Input", e.color, "enabled", "caret")};
+  padding-right: ${(e) => e.suffix ? "0" : "0.75rem"};
+  padding-left: ${(e) => e.prefix ? "0" : "0.75rem"};
+
+  &::placeholder {
+    color: ${(e) => a(
+  e.theme,
+  "Input",
+  e.color,
+  "enabled",
+  "placeholder"
+)};
+  }
+
+  &:read-only {
+    cursor: default;
+  }
+
+  &:disabled {
+    ${(e) => S(e.theme)}
+    background: none;
+  }
+`, L = P.forwardRef((e, T) => {
+  const {
+    disabled: y,
+    readOnly: p,
+    debounceTime: O = 180,
+    step: V = 1,
+    min: z = Number.MIN_SAFE_INTEGER,
+    max: v = Number.MAX_SAFE_INTEGER,
+    prefix: s,
+    suffix: m,
+    placeholder: E,
+    value: r,
+    defaultValue: F,
+    //----------------
+    onChange: l,
+    onBlur: c,
+    onFocus: f,
+    //----------------
+    className: R = "",
+    style: _ = {},
+    size: x = "small",
+    color: o = "primary",
+    ...k
+  } = e, u = q(), [w, $] = C(r || F || ""), [h, I] = C(!1);
+  W(() => {
+    r != null && $(r);
+  }, [r]);
+  const B = G(
+    M((t, b) => j(t, b), O),
+    [l]
+  ), j = (t, b) => {
+    l && (l == null || l(t, b));
+  };
+  return /* @__PURE__ */ A(
+    H,
+    {
+      style: _,
+      className: R,
+      theme: u,
+      color: o,
+      size: x,
+      focused: h,
+      disabled: y,
+      readOnly: p,
+      children: [
+        s && /* @__PURE__ */ g(
+          N,
+          {
+            theme: u,
+            color: o,
+            focused: h,
+            className: "lnc-input-prefix",
+            children: s
+          }
+        ),
+        /* @__PURE__ */ g(
+          K,
+          {
+            ref: T,
+            type: "number",
+            theme: u,
+            color: o,
+            size: x,
+            placeholder: E,
+            prefix: s,
+            suffix: m,
+            disabled: y,
+            readOnly: p,
+            step: V,
+            min: z,
+            max: v,
+            value: w,
+            onFocus: (t) => {
+              I(!0), f == null || f(t);
+            },
+            onBlur: (t) => {
+              I(!1), c == null || c(t);
+            },
+            onChange: (t) => {
+              $(t.target.value), B(t, t.target.value);
+            },
+            ...k
+          }
+        ),
+        m && /* @__PURE__ */ g(
+          J,
+          {
+            theme: u,
+            color: o,
+            focused: h,
+            className: "lnc-input-suffix",
+            children: m
+          }
+        )
+      ]
+    }
+  );
+});
+L.propTypes = {
+  id: n.string,
+  value: n.any,
+  defaultValue: n.any,
+  disabled: n.bool,
+  readOnly: n.bool,
+  /**
+   * Time in miliseconds before onChange event fires after it has been triggered.
+   */
+  debounceTime: n.number,
+  /**
+   * The amount that is added to the current value in the input if its incremented using the arrows/spinners.
+   */
+  step: n.number,
+  /**
+   * Minimum number value user can input.
+   */
+  min: n.number,
+  /**
+   * Maximum number value user can input.
+   */
+  max: n.number,
+  /**
+   * Reserved space before input. Intented to be used with plain text or `Icon` component.
+   */
+  prefix: n.oneOfType([n.string, n.element]),
+  /**
+   * Reserved space after input. Intented to be used with plain text or `Icon` component.
+   */
+  suffix: n.oneOfType([n.string, n.element]),
+  placeholder: n.string,
+  tabIndex: n.number,
+  /**
+   * `(event, value) => void`
+   */
+  onChange: n.func,
+  /**
+   * `(event) => void`
+   */
+  onBlur: n.func,
+  /**
+   * `(event) => void`
+   */
+  onFocus: n.func,
+  //----------------
+  className: n.string,
+  style: n.object,
+  size: n.oneOf(["small", "medium", "large"]),
+  color: n.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+export {
+  L as default
+};

package/dist/PageLayout.cjs

@@ -0,0 +1,26 @@
+"use strict";const x=require("react/jsx-runtime"),a=require("react"),E=require("./index-DXnSjbfJ.cjs"),S=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),c=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),T=S.newStyled.section`
+  display: flex;
+  flex: auto;
+  flex-direction: ${s=>s.hasSidebar?"row":"column"};
+  height: ${s=>s.isChild?"100%":"100dvh"};
+
+  * {
+    box-sizing: border-box;
+  }
+
+  & header,
+  footer {
+    flex: 0 0 auto;
+    min-height: 4rem;
+  }
+
+  & main {
+    flex: auto;
+    overflow: hidden;
+  }
+
+  & aside {
+    flex: 0 0 15rem;
+    height: 100%;
+  }
+`,u=a.forwardRef((s,f)=>{const{children:o,isChild:h,__TYPE__:C="PageLayout",...p}=s,P=c.useTheme(),g=a.Children.toArray(o).some(e=>{var t;return e.props.__TYPE__||((t=e==null?void 0:e.type)==null?void 0:t.displayName)=="Sidebar"}),m=e=>{let t,i,l;if(a.Children.forEach(e,(r,d)=>{var _,n,y;if(r.props.__TYPE__=="Sidebar"||((_=r==null?void 0:r.type)==null?void 0:_.displayName)==="Sidebar"){if(i)throw"Found multiple ocurrences of Sidebar component on the same level in the component tree.";i=d+1}else if(r.props.__TYPE__=="PageLayout"||((n=r==null?void 0:r.type)==null?void 0:n.displayName)==="PageLayout"){if(t)throw"Found multiple ocurrences of PageLayout component on the same level in the component tree.";t=d+1}else if(r.props.__TYPE__=="Content"||((y=r==null?void 0:r.type)==null?void 0:y.displayName)==="Content"){if(l)throw"Found multiple ocurrences of Content component on the same level in the component tree.";l=d+1}}),t&&i)return i<t?"left":"right";if(l&&i)return i<l?"left":"right"},b=a.Children.map(o,e=>{var t,i;if(a.isValidElement(e)){if(e.props.__TYPE__=="Sidebar"||((t=e.type)==null?void 0:t.displayName)==="Sidebar")return a.cloneElement(e,{placement:m(o)});if(e.props.__TYPE__=="PageLayout"||((i=e.type)==null?void 0:i.displayName)==="PageLayout")return a.cloneElement(e,{isChild:!0})}return e});return x.jsx(T,{isChild:h,hasSidebar:g,theme:P,ref:f,...p,children:b})});u.propTypes={__TYPE__:E.PropTypes.string};u.displayName="PageLayout";module.exports=u;

package/dist/PageLayout.js

@@ -0,0 +1,92 @@
+import { jsx as E } from "react/jsx-runtime";
+import i from "react";
+import { P as x } from "./index-Ds9PUTwb.js";
+import { n as S } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { u as T } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const C = S.section`
+  display: flex;
+  flex: auto;
+  flex-direction: ${(s) => s.hasSidebar ? "row" : "column"};
+  height: ${(s) => s.isChild ? "100%" : "100dvh"};
+
+  * {
+    box-sizing: border-box;
+  }
+
+  & header,
+  footer {
+    flex: 0 0 auto;
+    min-height: 4rem;
+  }
+
+  & main {
+    flex: auto;
+    overflow: hidden;
+  }
+
+  & aside {
+    flex: 0 0 15rem;
+    height: 100%;
+  }
+`, y = i.forwardRef((s, h) => {
+  const { children: o, isChild: n, __TYPE__: L = "PageLayout", ...p } = s, m = T(), P = i.Children.toArray(o).some(
+    (e) => {
+      var t;
+      return e.props.__TYPE__ || ((t = e == null ? void 0 : e.type) == null ? void 0 : t.displayName) == "Sidebar";
+    }
+  ), g = (e) => {
+    let t, a, l;
+    if (i.Children.forEach(e, (r, d) => {
+      var f, u, _;
+      if (r.props.__TYPE__ == "Sidebar" || ((f = r == null ? void 0 : r.type) == null ? void 0 : f.displayName) === "Sidebar") {
+        if (a)
+          throw "Found multiple ocurrences of Sidebar component on the same level in the component tree.";
+        a = d + 1;
+      } else if (r.props.__TYPE__ == "PageLayout" || ((u = r == null ? void 0 : r.type) == null ? void 0 : u.displayName) === "PageLayout") {
+        if (t)
+          throw "Found multiple ocurrences of PageLayout component on the same level in the component tree.";
+        t = d + 1;
+      } else if (r.props.__TYPE__ == "Content" || ((_ = r == null ? void 0 : r.type) == null ? void 0 : _.displayName) === "Content") {
+        if (l)
+          throw "Found multiple ocurrences of Content component on the same level in the component tree.";
+        l = d + 1;
+      }
+    }), t && a)
+      return a < t ? "left" : "right";
+    if (l && a)
+      return a < l ? "left" : "right";
+  }, b = i.Children.map(o, (e) => {
+    var t, a;
+    if (i.isValidElement(e)) {
+      if (e.props.__TYPE__ == "Sidebar" || ((t = e.type) == null ? void 0 : t.displayName) === "Sidebar")
+        return i.cloneElement(e, {
+          placement: g(o)
+        });
+      if (e.props.__TYPE__ == "PageLayout" || ((a = e.type) == null ? void 0 : a.displayName) === "PageLayout")
+        return i.cloneElement(e, { isChild: !0 });
+    }
+    return e;
+  });
+  return /* @__PURE__ */ E(
+    C,
+    {
+      isChild: n,
+      hasSidebar: P,
+      theme: m,
+      ref: h,
+      ...p,
+      children: b
+    }
+  );
+});
+y.propTypes = {
+  /**
+   * Do not override this property.
+   * Should only be used as indicator for type if you are passing custom component.
+   */
+  __TYPE__: x.string
+};
+y.displayName = "PageLayout";
+export {
+  y as default
+};

package/dist/PasswordInput.cjs

@@ -0,0 +1,47 @@
+"use strict";const a=require("react/jsx-runtime"),s=require("react"),n=require("./index-DXnSjbfJ.cjs"),L=require("./index-BjdOz5Ok.cjs"),D=require("./Icon.cjs"),h=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),r=require("./utils-hdRGTsQ7.cjs"),A=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),G=h.newStyled.div`
+  display: flex;
+  align-items: center;
+
+  min-height: ${e=>r.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>r.getSizeValueWithUnits(e.theme,e.size)};
+  background-color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
+  border: 1px solid
+    ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,e.disabled===!0?"disabled":"enabled","border")};
+  border-radius: ${e=>r.getBorderRadiusValueWithUnits(e.theme,"regular")};
+
+  ${e=>e.focused&&e.readOnly!==!0?r.getOutlineCss(e.theme):""}
+  ${e=>e.disabled===!0?r.getDisabledStateCss(e.theme):""}
+`,S=h.newStyled.span`
+  padding: 0 12px;
+  color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
+`,H=h.newStyled(S)``,J=h.newStyled(S)`
+  cursor: pointer;
+`,K=h.newStyled.input`
+  background: none;
+  border: none;
+  outline: none;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  width: 100%;
+
+  ${e=>r.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
+  min-height: ${e=>r.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>r.getSizeValueWithUnits(e.theme,e.size)};
+  color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","text")};
+  caret-color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.color,"enabled","caret")};
+  padding-right: ${e=>e.suffix?"0":"0.75rem"};
+  padding-left: ${e=>e.prefix?"0":"0.75rem"};
+
+  &::placeholder {
+    color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.color,"enabled","placeholder")};
+  }
+
+  &:read-only {
+    cursor: default;
+  }
+
+  &:disabled {
+    ${e=>r.getDisabledStateCss(e.theme)}
+    background: none;
+  }
+`,I=s.forwardRef((e,m)=>{const{wrapperRef:V,disabled:T,readOnly:$,debounceTime:z=180,placeholder:R,prefix:b,suffix:f,value:c,defaultValue:k,onChange:u,onBlur:p,onFocus:x,className:v="",style:j={},size:C="small",color:i="primary",...q}=e,o=s.useRef(),d=A.useTheme(),[O,P]=s.useState(c||k||"");s.useEffect(()=>{c!=null&&P(c)},[c]);const[y,W]=s.useState(!0),[g,w]=s.useState(!1);s.useEffect(()=>{var l;const t=((l=o==null?void 0:o.current)==null?void 0:l.value)||"";o.current.selectionStart=t!=null&&t.length?t.length:0,o.current.selectionEnd=t!=null&&t.length?t.length:0},[y]),s.useEffect(()=>{m!=null&&(m.current=o.current)},[m,o]);const E=s.useCallback(L.debounce((t,l)=>U(t,l),z),[u]),U=(t,l)=>{u&&(u==null||u(t,l))},N=t=>{P(t.target.value),E(t,t.target.value)},_=()=>{W(!y),o.current.focus()},B=t=>{w(!0),x==null||x(t)},F=t=>{w(!1),p==null||p(t)};return a.jsxs(G,{ref:V,style:j,className:v,theme:d,color:i,size:C,focused:g,disabled:T,readOnly:$,children:[b&&a.jsx(S,{theme:d,color:i,focused:g,className:"lnc-input-prefix",children:b}),a.jsx(K,{ref:o,type:y?"password":"text",theme:d,color:i,size:C,placeholder:R,prefix:b,suffix:f,disabled:T,readOnly:$,focused:g,onFocus:B,onBlur:F,onChange:N,value:O,...q}),a.jsx(J,{theme:d,color:i,focused:g,onClick:_,children:a.jsx(D,{icon:y?"eye-slash":"eye"})}),f&&a.jsx(H,{theme:d,color:i,focused:g,className:"lnc-input-suffix",children:f})]})});I.propTypes={id:n.PropTypes.string,value:n.PropTypes.string,defaultValue:n.PropTypes.string,disabled:n.PropTypes.bool,readOnly:n.PropTypes.bool,debounceTime:n.PropTypes.number,placeholder:n.PropTypes.string,tabIndex:n.PropTypes.number,onChange:n.PropTypes.func,onBlur:n.PropTypes.func,onFocus:n.PropTypes.func,className:n.PropTypes.string,style:n.PropTypes.object,size:n.PropTypes.oneOf(["small","medium","large"]),color:n.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=I;

package/dist/PasswordInput.js

@@ -0,0 +1,230 @@
+import { jsxs as D, jsx as u } from "react/jsx-runtime";
+import q, { useRef as A, useState as $, useEffect as I, useCallback as G } from "react";
+import { P as n } from "./index-Ds9PUTwb.js";
+import { d as H } from "./index-D5vEbKUT.js";
+import J from "./Icon.js";
+import { n as m } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { f as g, b as a, c as K, h as M, g as O, a as Q } from "./utils-DEke8iwo.js";
+import { u as X } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const Y = m.div`
+  display: flex;
+  align-items: center;
+
+  min-height: ${(e) => g(e.theme, e.size)};
+  max-height: ${(e) => g(e.theme, e.size)};
+  background-color: ${(e) => a(
+  e.theme,
+  "Input",
+  e.color,
+  "enabled",
+  "background"
+)};
+  border: 1px solid
+    ${(e) => a(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "border"
+)};
+  border-radius: ${(e) => K(e.theme, "regular")};
+
+  ${(e) => e.focused && e.readOnly !== !0 ? M(e.theme) : ""}
+  ${(e) => e.disabled === !0 ? O(e.theme) : ""}
+`, C = m.span`
+  padding: 0 12px;
+  color: ${(e) => a(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  "enabled",
+  "prefix"
+)};
+`, Z = m(C)``, ee = m(C)`
+  cursor: pointer;
+`, te = m.input`
+  background: none;
+  border: none;
+  outline: none;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  width: 100%;
+
+  ${(e) => Q(e.theme, "Input", e.size, "enabled")}
+  min-height: ${(e) => g(e.theme, e.size)};
+  max-height: ${(e) => g(e.theme, e.size)};
+  color: ${(e) => a(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  "enabled",
+  "text"
+)};
+  caret-color: ${(e) => a(e.theme, "Input", e.color, "enabled", "caret")};
+  padding-right: ${(e) => e.suffix ? "0" : "0.75rem"};
+  padding-left: ${(e) => e.prefix ? "0" : "0.75rem"};
+
+  &::placeholder {
+    color: ${(e) => a(
+  e.theme,
+  "Input",
+  e.color,
+  "enabled",
+  "placeholder"
+)};
+  }
+
+  &:read-only {
+    cursor: default;
+  }
+
+  &:disabled {
+    ${(e) => O(e.theme)}
+    background: none;
+  }
+`, ne = q.forwardRef((e, h) => {
+  const {
+    wrapperRef: T,
+    disabled: S,
+    readOnly: k,
+    debounceTime: R = 180,
+    placeholder: V,
+    prefix: b,
+    suffix: y,
+    value: l,
+    defaultValue: B,
+    //----------------
+    onChange: s,
+    onBlur: p,
+    onFocus: x,
+    //----------------
+    className: F = "",
+    style: N = {},
+    size: v = "small",
+    color: d = "primary",
+    ...P
+  } = e, r = A(), c = X(), [j, z] = $(l || B || "");
+  I(() => {
+    l != null && z(l);
+  }, [l]);
+  const [f, L] = $(!0), [i, w] = $(!1);
+  I(() => {
+    var o;
+    const t = ((o = r == null ? void 0 : r.current) == null ? void 0 : o.value) || "";
+    r.current.selectionStart = t != null && t.length ? t.length : 0, r.current.selectionEnd = t != null && t.length ? t.length : 0;
+  }, [f]), I(() => {
+    h != null && (h.current = r.current);
+  }, [h, r]);
+  const W = G(
+    H((t, o) => E(t, o), R),
+    [s]
+  ), E = (t, o) => {
+    s && (s == null || s(t, o));
+  }, U = (t) => {
+    z(t.target.value), W(t, t.target.value);
+  }, _ = () => {
+    L(!f), r.current.focus();
+  };
+  return /* @__PURE__ */ D(
+    Y,
+    {
+      ref: T,
+      style: N,
+      className: F,
+      theme: c,
+      color: d,
+      size: v,
+      focused: i,
+      disabled: S,
+      readOnly: k,
+      children: [
+        b && /* @__PURE__ */ u(
+          C,
+          {
+            theme: c,
+            color: d,
+            focused: i,
+            className: "lnc-input-prefix",
+            children: b
+          }
+        ),
+        /* @__PURE__ */ u(
+          te,
+          {
+            ref: r,
+            type: f ? "password" : "text",
+            theme: c,
+            color: d,
+            size: v,
+            placeholder: V,
+            prefix: b,
+            suffix: y,
+            disabled: S,
+            readOnly: k,
+            focused: i,
+            onFocus: (t) => {
+              w(!0), x == null || x(t);
+            },
+            onBlur: (t) => {
+              w(!1), p == null || p(t);
+            },
+            onChange: U,
+            value: j,
+            ...P
+          }
+        ),
+        /* @__PURE__ */ u(
+          ee,
+          {
+            theme: c,
+            color: d,
+            focused: i,
+            onClick: _,
+            children: /* @__PURE__ */ u(J, { icon: f ? "eye-slash" : "eye" })
+          }
+        ),
+        y && /* @__PURE__ */ u(
+          Z,
+          {
+            theme: c,
+            color: d,
+            focused: i,
+            className: "lnc-input-suffix",
+            children: y
+          }
+        )
+      ]
+    }
+  );
+});
+ne.propTypes = {
+  id: n.string,
+  value: n.string,
+  defaultValue: n.string,
+  disabled: n.bool,
+  readOnly: n.bool,
+  debounceTime: n.number,
+  placeholder: n.string,
+  tabIndex: n.number,
+  //----------------
+  onChange: n.func,
+  onBlur: n.func,
+  onFocus: n.func,
+  //----------------
+  className: n.string,
+  style: n.object,
+  size: n.oneOf(["small", "medium", "large"]),
+  color: n.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+export {
+  ne as default
+};