@sito/dashboard 0.0.74 → 0.0.76

package/dist/SelectInput-BKFTGaAm.js

@@ -0,0 +1,569 @@
+import "./SelectInput.css";
+import { jsxs as S, jsx as a, Fragment as Z } from "react/jsx-runtime";
+import { c as i } from "./classNames-DDRjbGA1.js";
+import { forwardRef as V, useState as R, useEffect as K, useMemo as $, useRef as B, useCallback as A, useLayoutEffect as ee } from "react";
+import { C as q } from "./Chip-6bEZ7uwv.js";
+import { I as te } from "./IconButton-CqPk_OXG.js";
+import { C as ne } from "./Close-rKC9AcNX.js";
+const ue = V(function(l, m) {
+  const {
+    state: f,
+    value: t,
+    onChange: r,
+    options: w = [],
+    name: D = "",
+    id: b = "",
+    label: N = "",
+    containerClassName: I = "",
+    inputContainerClassName: v = "",
+    helperText: E = "",
+    placeholder: F = "",
+    multiple: h = !1,
+    ...T
+  } = l, [o, g] = R("");
+  K(() => {
+    if (!h && t && !Array.isArray(t)) {
+      g(String(t.value ?? t.name ?? ""));
+      return;
+    }
+    g("");
+  }, [h, t]);
+  const [C, y] = R(!1), [k, x] = R(-1), s = $(
+    () => w.filter((e) => {
+      const n = String(e.value ?? e.name).toLowerCase().includes(o?.toLowerCase());
+      return Array.isArray(t) && t.length ? n && !t.some((u) => u.id === e.id) : t && !Array.isArray(t) ? n && t.id !== e.id : n;
+    }),
+    [w, t, o]
+  );
+  K(() => {
+    if (!C || !s.length) {
+      x(-1);
+      return;
+    }
+    x(0);
+  }, [C, s]);
+  const c = B(null), p = B(null), [H, L] = R(!1), d = B(null);
+  K(() => {
+    const e = (u) => {
+      c.current && !c.current.contains(u.target) && y(!1);
+    }, n = (u) => {
+      u.key === "Escape" && y(!1);
+    };
+    return document.addEventListener("mousedown", e), document.addEventListener("keydown", n), () => {
+      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", n);
+    };
+  }, []);
+  const U = A((e) => {
+    g(e.target.value);
+  }, []), O = A(
+    (e) => {
+      e ? h ? (g(""), Array.isArray(t) && t.length ? r([...t, e]) : r([e])) : (g(String(e.name ?? e.value ?? "")), r(e)) : r(null), y(!1);
+    },
+    [h, r, t]
+  ), W = A(
+    (e) => {
+      if (!s.length) {
+        e.key === "Escape" && y(!1);
+        return;
+      }
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        if (e.preventDefault(), !C) {
+          y(!0), x(0);
+          return;
+        }
+        x((n) => {
+          const u = n >= 0 ? n : 0;
+          return e.key === "ArrowDown" ? (u + 1 + s.length) % s.length : (u - 1 + s.length) % s.length;
+        });
+        return;
+      }
+      if (e.key === "Enter" && C) {
+        e.preventDefault();
+        const n = k >= 0 ? k : 0;
+        O(s[n]);
+        return;
+      }
+      e.key === "Escape" && C && (e.preventDefault(), y(!1));
+    },
+    [
+      O,
+      k,
+      C,
+      s
+    ]
+  ), P = A(
+    (e) => {
+      if (!Array.isArray(t)) {
+        r(null);
+        return;
+      }
+      const n = t.filter((u, G) => G !== e);
+      n.length ? r(n) : r(null);
+    },
+    [r, t]
+  ), j = A(() => {
+    Array.isArray(t) && r([t[0]]);
+  }, [r, t]);
+  return ee(() => {
+    const e = d.current?.offsetWidth ?? 0, n = c.current?.offsetWidth ?? 0;
+    L(e > n * 0.4);
+  }, [t]), /* @__PURE__ */ S(
+    "div",
+    {
+      className: i("autocomplete-input-container", I),
+      ref: c,
+      children: [
+        /* @__PURE__ */ S("div", { className: "autocomplete-value-input-container", children: [
+          /* @__PURE__ */ a(
+            X,
+            {
+              state: f,
+              name: D,
+              id: b,
+              value: o,
+              onChange: U,
+              placeholder: F,
+              helperText: E,
+              onFocus: () => y(!0),
+              onKeyDown: W,
+              label: N,
+              containerClassName: i(
+                "autocomplete-text-input",
+                v
+              ),
+              ref: m ?? p,
+              ...T,
+              children: !h && t && !Array.isArray(t) && (t.value || t.name) && /* @__PURE__ */ a(
+                te,
+                {
+                  icon: /* @__PURE__ */ a(ne, {}),
+                  className: "autocomplete-delete-button",
+                  onClick: (e) => {
+                    O(), e.stopPropagation();
+                  }
+                }
+              )
+            }
+          ),
+          h && Array.isArray(t) && t.length ? /* @__PURE__ */ a("ul", { ref: d, className: "autocomplete-value-container", children: H ? /* @__PURE__ */ S(Z, { children: [
+            /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
+              q,
+              {
+                text: t[0]?.value ?? t[0]?.name,
+                onDelete: (e) => {
+                  P(0), e.stopPropagation();
+                }
+              }
+            ) }),
+            t.length > 1 && /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
+              q,
+              {
+                text: `+${t.length - 1}`,
+                onDelete: (e) => {
+                  j(), e.stopPropagation();
+                }
+              }
+            ) })
+          ] }) : t.map((e, n) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
+            q,
+            {
+              text: String(e.value ?? e.name),
+              onDelete: (u) => {
+                P(n), u.stopPropagation();
+              }
+            }
+          ) }, e.id ?? e.value ?? e.name)) }) : null
+        ] }),
+        C && /* @__PURE__ */ a(
+          "ul",
+          {
+            className: "autocomplete-suggestions-container",
+            style: { width: c.current?.offsetWidth },
+            children: s.map((e) => /* @__PURE__ */ a(
+              "li",
+              {
+                className: i(
+                  "autocomplete-suggestion-item",
+                  e.id === s[k]?.id ? "highlighted" : ""
+                ),
+                onMouseEnter: () => x(
+                  s.findIndex((n) => n.id === e.id)
+                ),
+                onClick: (n) => {
+                  O(e), n.stopPropagation();
+                },
+                children: e.value ?? e.name
+              },
+              e.id ?? e.value ?? e.name
+            ))
+          }
+        )
+      ]
+    }
+  );
+});
+var M = /* @__PURE__ */ ((l) => (l.error = "error", l.good = "good", l.default = "default", l))(M || {});
+const _ = (l) => {
+  switch (l) {
+    case "error":
+      return "input-error";
+    case "good":
+      return "input-good";
+    default:
+      return "input-normal";
+  }
+}, z = (l) => {
+  switch (l) {
+    case "error":
+      return "input-label-error";
+    case "good":
+      return "input-label-good";
+    default:
+      return "input-label-normal";
+  }
+}, Q = (l) => {
+  switch (l) {
+    case "error":
+      return "input-helper-text-error";
+    case "good":
+      return "input-helper-text-good";
+    default:
+      return "input-helper-text-normal";
+  }
+}, de = V(function(l, m) {
+  const {
+    checked: f,
+    onChange: t,
+    name: r = "",
+    id: w = "",
+    label: D = "",
+    state: b = M.default,
+    containerClassName: N = "",
+    inputClassName: I = "",
+    labelClassName: v = "",
+    ...E
+  } = l;
+  return /* @__PURE__ */ S("label", { className: i("input-check-container", N), children: [
+    /* @__PURE__ */ a(
+      "input",
+      {
+        id: w,
+        ref: m,
+        name: r,
+        type: "checkbox",
+        checked: f,
+        onChange: t,
+        className: i(
+          "input-check",
+          _(b),
+          I
+        ),
+        ...E
+      }
+    ),
+    /* @__PURE__ */ a(
+      "span",
+      {
+        className: i(
+          "input-check-label",
+          z(b),
+          v
+        ),
+        children: D
+      }
+    )
+  ] });
+}), J = (l) => l == null ? !1 : Array.isArray(l) ? l.length > 0 : `${l}`.length > 0, X = V(function(l, m) {
+  const {
+    children: f,
+    state: t = M.default,
+    label: r = "",
+    containerClassName: w = "",
+    inputClassName: D = "",
+    labelClassName: b = "",
+    helperText: N = "",
+    helperTextClassName: I = "",
+    value: v,
+    defaultValue: E,
+    onChange: F,
+    onFocus: h,
+    onBlur: T,
+    ...o
+  } = l, g = v !== void 0, [C, y] = R(
+    () => J(E)
+  ), k = g ? J(v) : C, x = o.type === "date", s = !!o.placeholder || x, c = (p) => {
+    g || y(p.currentTarget.value.length > 0), F?.(p);
+  };
+  return /* @__PURE__ */ S("div", { className: i("text-input-container", w), children: [
+    /* @__PURE__ */ S("div", { className: "text-input-field", children: [
+      /* @__PURE__ */ a(
+        "input",
+        {
+          ref: m,
+          defaultValue: E,
+          onChange: c,
+          onFocus: h,
+          onBlur: T,
+          ...g ? { value: v } : {},
+          className: i(
+            "text-input",
+            _(t),
+            D,
+            k ? "has-value" : "",
+            o.placeholder ? "has-placeholder" : "",
+            s ? "keep-label-up" : ""
+          ),
+          ...o
+        }
+      ),
+      !!r && /* @__PURE__ */ S(
+        "label",
+        {
+          htmlFor: o.id,
+          className: i(
+            "text-input-label",
+            z(t),
+            b
+          ),
+          children: [
+            r,
+            o.required ? " *" : ""
+          ]
+        }
+      ),
+      f
+    ] }),
+    !!N && /* @__PURE__ */ a(
+      "p",
+      {
+        className: i(
+          "text-input-helper-text",
+          Q(t),
+          I
+        ),
+        children: N
+      }
+    )
+  ] });
+}), he = V(function(l, m) {
+  const {
+    value: f,
+    onChange: t,
+    options: r,
+    containerClassName: w = "",
+    inputClassName: D = "",
+    labelClassName: b = "",
+    helperText: N = "",
+    helperTextClassName: I = "",
+    label: v = "",
+    placeholder: E = "",
+    name: F = "",
+    id: h = "",
+    state: T = M.default,
+    native: o = !0,
+    disabled: g,
+    required: C,
+    autoFocus: y,
+    children: k,
+    ...x
+  } = l, s = B(null), [c, p] = R(!1), [H, L] = R(-1), d = $(
+    () => r.findIndex(
+      (e) => String(e.id) === String(f ?? r[0]?.id ?? "")
+    ),
+    [r, f]
+  ), U = $(
+    () => d >= 0 ? r[d] : void 0,
+    [r, d]
+  );
+  K(() => {
+    if (!(o || !c)) {
+      if (!r.length) {
+        L(-1);
+        return;
+      }
+      L(d >= 0 ? d : 0);
+    }
+  }, [o, r.length, d, c]), K(() => {
+    if (o) return;
+    const e = (n) => {
+      s.current && !s.current.contains(n.target) && p(!1);
+    };
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, [o]);
+  const O = A(
+    (e) => {
+      m && (typeof m == "function" ? m(e) : m.current = e);
+    },
+    [m]
+  ), W = A(
+    (e) => {
+      if (!t) return;
+      const n = {
+        target: { value: String(e) },
+        currentTarget: { value: String(e) }
+      };
+      t(n);
+    },
+    [t]
+  ), P = A(
+    (e) => {
+      const n = r[e];
+      n && (W(n.id), p(!1));
+    },
+    [W, r]
+  ), j = A(
+    (e) => {
+      if (r.length) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          if (e.preventDefault(), !c) {
+            p(!0);
+            const n = d >= 0 ? d : 0;
+            L(n);
+            return;
+          }
+          L((n) => {
+            const u = n >= 0 ? n : d;
+            return e.key === "ArrowDown" ? (u + 1 + r.length) % r.length : (u - 1 + r.length) % r.length;
+          });
+          return;
+        }
+        if (e.key === "Enter") {
+          if (!c) {
+            e.preventDefault(), p(!0), L(d >= 0 ? d : 0);
+            return;
+          }
+          e.preventDefault(), P(H >= 0 ? H : 0);
+          return;
+        }
+        e.key === "Escape" && c && (e.preventDefault(), p(!1));
+      }
+    },
+    [H, r, P, d, c]
+  );
+  return o ? /* @__PURE__ */ S("div", { className: i("select-input-container", w), children: [
+    /* @__PURE__ */ a(
+      "select",
+      {
+        ...x,
+        id: h,
+        ref: O,
+        name: F,
+        value: f,
+        onChange: t,
+        className: i(
+          "select-input",
+          _(T),
+          "peer",
+          D
+        ),
+        children: r?.map((e) => /* @__PURE__ */ a("option", { value: e.id, children: e.value ?? e.name ?? e.id }, e.id))
+      }
+    ),
+    /* @__PURE__ */ a(
+      "label",
+      {
+        htmlFor: h,
+        className: i(
+          "select-input-label",
+          z(T),
+          b
+        ),
+        children: v
+      }
+    ),
+    k,
+    N && /* @__PURE__ */ a(
+      "p",
+      {
+        className: i(
+          "select-input-helper-text",
+          Q(T),
+          I
+        ),
+        children: N
+      }
+    )
+  ] }) : /* @__PURE__ */ S(
+    "div",
+    {
+      ref: s,
+      className: i("select-input-container", w),
+      children: [
+        /* @__PURE__ */ a(
+          "select",
+          {
+            ...x,
+            ref: O,
+            name: F,
+            id: h,
+            value: f,
+            onChange: t,
+            className: "select-input-native-hidden",
+            tabIndex: -1,
+            "aria-hidden": !0,
+            children: r?.map((e) => /* @__PURE__ */ a("option", { value: e.id, children: e.value ?? e.name ?? e.id }, e.id))
+          }
+        ),
+        /* @__PURE__ */ a(
+          X,
+          {
+            id: h,
+            name: F,
+            state: T,
+            value: String(U?.value ?? U?.name ?? ""),
+            readOnly: !0,
+            label: v,
+            helperText: N,
+            containerClassName: "select-input-text-container",
+            inputClassName: i("select-input-text", D),
+            labelClassName: b,
+            helperTextClassName: I,
+            placeholder: E,
+            disabled: g,
+            required: C,
+            autoFocus: y,
+            onClick: () => p((e) => !e),
+            onKeyDown: j,
+            onFocus: () => p(!0),
+            role: "combobox",
+            "aria-expanded": c,
+            "aria-haspopup": "listbox",
+            children: k
+          }
+        ),
+        c && /* @__PURE__ */ a("ul", { className: "select-input-options-container", role: "listbox", children: r.map((e, n) => {
+          const u = String(e.id) === String(f);
+          return /* @__PURE__ */ a(
+            "li",
+            {
+              role: "option",
+              "aria-selected": u,
+              className: i(
+                "select-input-option-item",
+                n === H ? "highlighted" : ""
+              ),
+              onMouseEnter: () => L(n),
+              onClick: (Y) => {
+                P(n), Y.stopPropagation();
+              },
+              children: e.value ?? e.name ?? e.id
+            },
+            e.id
+          );
+        }) })
+      ]
+    }
+  );
+});
+export {
+  ue as A,
+  de as C,
+  he as S,
+  X as T,
+  M as a,
+  Q as h,
+  _ as i,
+  z as l
+};

package/dist/SelectInput-C4wtTiHe.cjs

@@ -0,0 +1 @@
+var Y=require("./SelectInput.css");const n=require("react/jsx-runtime"),c=require("./classNames-DHAzUjfZ.cjs"),l=require("react"),U=require("./Chip-N4r2Xf9l.cjs"),z=require("./IconButton-DVZCHIHB.cjs"),G=require("./Close-O9P7wJGf.cjs"),J=l.forwardRef(function(r,f){const{state:x,value:t,onChange:s,options:v=[],name:S="",id:w="",label:y="",containerClassName:A="",inputContainerClassName:b="",helperText:I="",placeholder:T="",multiple:p=!1,...D}=r,[o,g]=l.useState("");l.useEffect(()=>{if(!p&&t&&!Array.isArray(t)){g(String(t.value??t.name??""));return}g("")},[p,t]);const[N,C]=l.useState(!1),[j,k]=l.useState(-1),i=l.useMemo(()=>v.filter(e=>{const a=String(e.value??e.name).toLowerCase().includes(o?.toLowerCase());return Array.isArray(t)&&t.length?a&&!t.some(d=>d.id===e.id):t&&!Array.isArray(t)?a&&t.id!==e.id:a}),[v,t,o]);l.useEffect(()=>{if(!N||!i.length){k(-1);return}k(0)},[N,i]);const u=l.useRef(null),m=l.useRef(null),[L,E]=l.useState(!1),h=l.useRef(null);l.useEffect(()=>{const e=d=>{u.current&&!u.current.contains(d.target)&&C(!1)},a=d=>{d.key==="Escape"&&C(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",a),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",a)}},[]);const O=l.useCallback(e=>{g(e.target.value)},[]),R=l.useCallback(e=>{e?p?(g(""),Array.isArray(t)&&t.length?s([...t,e]):s([e])):(g(String(e.name??e.value??"")),s(e)):s(null),C(!1)},[p,s,t]),P=l.useCallback(e=>{if(!i.length){e.key==="Escape"&&C(!1);return}if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(e.preventDefault(),!N){C(!0),k(0);return}k(a=>{const d=a>=0?a:0;return e.key==="ArrowDown"?(d+1+i.length)%i.length:(d-1+i.length)%i.length});return}if(e.key==="Enter"&&N){e.preventDefault();const a=j>=0?j:0;R(i[a]);return}e.key==="Escape"&&N&&(e.preventDefault(),C(!1))},[R,j,N,i]),F=l.useCallback(e=>{if(!Array.isArray(t)){s(null);return}const a=t.filter((d,M)=>M!==e);a.length?s(a):s(null)},[s,t]),K=l.useCallback(()=>{Array.isArray(t)&&s([t[0]])},[s,t]);return l.useLayoutEffect(()=>{const e=h.current?.offsetWidth??0,a=u.current?.offsetWidth??0;E(e>a*.4)},[t]),n.jsxs("div",{className:c.classNames("autocomplete-input-container",A),ref:u,children:[n.jsxs("div",{className:"autocomplete-value-input-container",children:[n.jsx(V,{state:x,name:S,id:w,value:o,onChange:O,placeholder:T,helperText:I,onFocus:()=>C(!0),onKeyDown:P,label:y,containerClassName:c.classNames("autocomplete-text-input",b),ref:f??m,...D,children:!p&&t&&!Array.isArray(t)&&(t.value||t.name)&&n.jsx(z.IconButton,{icon:n.jsx(G.Close,{}),className:"autocomplete-delete-button",onClick:e=>{R(),e.stopPropagation()}})}),p&&Array.isArray(t)&&t.length?n.jsx("ul",{ref:h,className:"autocomplete-value-container",children:L?n.jsxs(n.Fragment,{children:[n.jsx("li",{children:n.jsx(U.Chip,{text:t[0]?.value??t[0]?.name,onDelete:e=>{F(0),e.stopPropagation()}})}),t.length>1&&n.jsx("li",{children:n.jsx(U.Chip,{text:`+${t.length-1}`,onDelete:e=>{K(),e.stopPropagation()}})})]}):t.map((e,a)=>n.jsx("li",{children:n.jsx(U.Chip,{text:String(e.value??e.name),onDelete:d=>{F(a),d.stopPropagation()}})},e.id??e.value??e.name))}):null]}),N&&n.jsx("ul",{className:"autocomplete-suggestions-container",style:{width:u.current?.offsetWidth},children:i.map(e=>n.jsx("li",{className:c.classNames("autocomplete-suggestion-item",e.id===i[j]?.id?"highlighted":""),onMouseEnter:()=>k(i.findIndex(a=>a.id===e.id)),onClick:a=>{R(e),a.stopPropagation()},children:e.value??e.name},e.id??e.value??e.name))})]})});var q=(r=>(r.error="error",r.good="good",r.default="default",r))(q||{});const B=r=>{switch(r){case"error":return"input-error";case"good":return"input-good";default:return"input-normal"}},H=r=>{switch(r){case"error":return"input-label-error";case"good":return"input-label-good";default:return"input-label-normal"}},W=r=>{switch(r){case"error":return"input-helper-text-error";case"good":return"input-helper-text-good";default:return"input-helper-text-normal"}},Q=l.forwardRef(function(r,f){const{checked:x,onChange:t,name:s="",id:v="",label:S="",state:w=q.default,containerClassName:y="",inputClassName:A="",labelClassName:b="",...I}=r;return n.jsxs("label",{className:c.classNames("input-check-container",y),children:[n.jsx("input",{id:v,ref:f,name:s,type:"checkbox",checked:x,onChange:t,className:c.classNames("input-check",B(w),A),...I}),n.jsx("span",{className:c.classNames("input-check-label",H(w),b),children:S})]})}),$=r=>r==null?!1:Array.isArray(r)?r.length>0:`${r}`.length>0,V=l.forwardRef(function(r,f){const{children:x,state:t=q.default,label:s="",containerClassName:v="",inputClassName:S="",labelClassName:w="",helperText:y="",helperTextClassName:A="",value:b,defaultValue:I,onChange:T,onFocus:p,onBlur:D,...o}=r,g=b!==void 0,[N,C]=l.useState(()=>$(I)),j=g?$(b):N,k=o.type==="date",i=!!o.placeholder||k,u=m=>{g||C(m.currentTarget.value.length>0),T?.(m)};return n.jsxs("div",{className:c.classNames("text-input-container",v),children:[n.jsxs("div",{className:"text-input-field",children:[n.jsx("input",{ref:f,defaultValue:I,onChange:u,onFocus:p,onBlur:D,...g?{value:b}:{},className:c.classNames("text-input",B(t),S,j?"has-value":"",o.placeholder?"has-placeholder":"",i?"keep-label-up":""),...o}),!!s&&n.jsxs("label",{htmlFor:o.id,className:c.classNames("text-input-label",H(t),w),children:[s,o.required?" *":""]}),x]}),!!y&&n.jsx("p",{className:c.classNames("text-input-helper-text",W(t),A),children:y})]})}),X=l.forwardRef(function(r,f){const{value:x,onChange:t,options:s,containerClassName:v="",inputClassName:S="",labelClassName:w="",helperText:y="",helperTextClassName:A="",label:b="",placeholder:I="",name:T="",id:p="",state:D=q.default,native:o=!0,disabled:g,required:N,autoFocus:C,children:j,...k}=r,i=l.useRef(null),[u,m]=l.useState(!1),[L,E]=l.useState(-1),h=l.useMemo(()=>s.findIndex(e=>String(e.id)===String(x??s[0]?.id??"")),[s,x]),O=l.useMemo(()=>h>=0?s[h]:void 0,[s,h]);l.useEffect(()=>{if(!(o||!u)){if(!s.length){E(-1);return}E(h>=0?h:0)}},[o,s.length,h,u]),l.useEffect(()=>{if(o)return;const e=a=>{i.current&&!i.current.contains(a.target)&&m(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[o]);const R=l.useCallback(e=>{f&&(typeof f=="function"?f(e):f.current=e)},[f]),P=l.useCallback(e=>{if(!t)return;const a={target:{value:String(e)},currentTarget:{value:String(e)}};t(a)},[t]),F=l.useCallback(e=>{const a=s[e];a&&(P(a.id),m(!1))},[P,s]),K=l.useCallback(e=>{if(s.length){if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(e.preventDefault(),!u){m(!0);const a=h>=0?h:0;E(a);return}E(a=>{const d=a>=0?a:h;return e.key==="ArrowDown"?(d+1+s.length)%s.length:(d-1+s.length)%s.length});return}if(e.key==="Enter"){if(!u){e.preventDefault(),m(!0),E(h>=0?h:0);return}e.preventDefault(),F(L>=0?L:0);return}e.key==="Escape"&&u&&(e.preventDefault(),m(!1))}},[L,s,F,h,u]);return o?n.jsxs("div",{className:c.classNames("select-input-container",v),children:[n.jsx("select",{...k,id:p,ref:R,name:T,value:x,onChange:t,className:c.classNames("select-input",B(D),"peer",S),children:s?.map(e=>n.jsx("option",{value:e.id,children:e.value??e.name??e.id},e.id))}),n.jsx("label",{htmlFor:p,className:c.classNames("select-input-label",H(D),w),children:b}),j,y&&n.jsx("p",{className:c.classNames("select-input-helper-text",W(D),A),children:y})]}):n.jsxs("div",{ref:i,className:c.classNames("select-input-container",v),children:[n.jsx("select",{...k,ref:R,name:T,id:p,value:x,onChange:t,className:"select-input-native-hidden",tabIndex:-1,"aria-hidden":!0,children:s?.map(e=>n.jsx("option",{value:e.id,children:e.value??e.name??e.id},e.id))}),n.jsx(V,{id:p,name:T,state:D,value:String(O?.value??O?.name??""),readOnly:!0,label:b,helperText:y,containerClassName:"select-input-text-container",inputClassName:c.classNames("select-input-text",S),labelClassName:w,helperTextClassName:A,placeholder:I,disabled:g,required:N,autoFocus:C,onClick:()=>m(e=>!e),onKeyDown:K,onFocus:()=>m(!0),role:"combobox","aria-expanded":u,"aria-haspopup":"listbox",children:j}),u&&n.jsx("ul",{className:"select-input-options-container",role:"listbox",children:s.map((e,a)=>{const d=String(e.id)===String(x),M=a===L;return n.jsx("li",{role:"option","aria-selected":d,className:c.classNames("select-input-option-item",M?"highlighted":""),onMouseEnter:()=>E(a),onClick:_=>{F(a),_.stopPropagation()},children:e.value??e.name??e.id},e.id)})})]})});exports.AutocompleteInput=J;exports.CheckInput=Q;exports.SelectInput=X;exports.State=q;exports.TextInput=V;exports.helperTextStateClassName=W;exports.inputStateClassName=B;exports.labelStateClassName=H;

package/dist/SelectInput.css

@@ -1 +1 @@
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.autocomplete-input-container{margin-bottom:calc(var(--spacing,.25rem) * 5);width:100%}.autocomplete-value-input-container{width:100%;position:relative}.autocomplete-text-input{margin-bottom:calc(var(--spacing,.25rem) * 0)!important}.autocomplete-delete-button{top:50%;right:calc(var(--spacing,.25rem) * 2);--tw-translate-y:-50%;translate:var(--tw-translate-x) var(--tw-translate-y);justify-content:center;align-items:center;display:flex;position:absolute}.autocomplete-delete-button svg{height:calc(var(--spacing,.25rem) * 3);width:calc(var(--spacing,.25rem) * 3)}.autocomplete-suggestions-container{z-index:30;margin:calc(var(--spacing,.25rem) * 0);max-height:calc(var(--spacing,.25rem) * 44);width:100%;padding:calc(var(--spacing,.25rem) * 0);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:absolute;overflow:auto}.autocomplete-suggestion-item{cursor:pointer;padding:calc(var(--spacing,.25rem) * 2)}.autocomplete-value-container{top:50%;right:calc(var(--spacing,.25rem) * 2);justify-content:flex-start;align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex-wrap:wrap;display:flex;position:absolute;transform:translateY(-50%)}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial}}}.input-check-container{align-items:center;display:flex}.input-check{border-style:var(--tw-border-style);border-width:1px;border-radius:.25rem}.input-check:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.input-check-label{margin-left:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-duration:initial;--tw-font-weight:initial}}}.select-input-container{z-index:0;margin-bottom:calc(var(--spacing,.25rem) * 5);width:100%;position:relative}.select-input{appearance:none;border-style:var(--tw-border-style);border-width:0;border-bottom-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * 2.5);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));background-color:#0000;border-bottom-width:2px;display:block}.select-input:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style:none;outline-style:none}.select-input-label{top:calc(var(--spacing,.25rem) * 3);z-index:-10;transform-origin:0;--tw-translate-y:calc(var(--spacing,.25rem) * -6);translate:var(--tw-translate-x) var(--tw-translate-y);--tw-scale-x:75%;--tw-scale-y:75%;--tw-scale-z:75%;scale:var(--tw-scale-x) var(--tw-scale-y);transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-duration:.3s;transition-duration:.3s;position:absolute}.select-input-label:is(:where(.peer):placeholder-shown~*){--tw-translate-y:calc(var(--spacing,.25rem) * 0);translate:var(--tw-translate-x) var(--tw-translate-y);--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.select-input-label:is(:where(.peer):focus~*){--tw-translate-y:calc(var(--spacing,.25rem) * -6);translate:var(--tw-translate-x) var(--tw-translate-y);--tw-scale-x:75%;--tw-scale-y:75%;--tw-scale-z:75%;scale:var(--tw-scale-x) var(--tw-scale-y);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);inset-inline-start:calc(var(--spacing,.25rem) * 0)}.select-input-label:where(:dir(rtl),[dir=rtl],[dir=rtl] *):is(:where(.peer):focus~*){--tw-translate-x: 25% ;translate:var(--tw-translate-x) var(--tw-translate-y);left:auto}.select-input-helper-text{margin-top:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.select-input-native-hidden{pointer-events:none;height:calc(var(--spacing,.25rem) * 0);width:calc(var(--spacing,.25rem) * 0);opacity:0;position:absolute}.select-input-text-container{margin-bottom:calc(var(--spacing,.25rem) * 0)}.select-input-text{cursor:pointer}.select-input-options-container{z-index:30;margin:calc(var(--spacing,.25rem) * 0);max-height:calc(var(--spacing,.25rem) * 44);width:100%;padding:calc(var(--spacing,.25rem) * 0);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:absolute;overflow:auto}.select-input-option-item{cursor:pointer;padding:calc(var(--spacing,.25rem) * 2)}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-duration:initial;--tw-font-weight:initial}}}.text-input-container{z-index:0;margin-bottom:calc(var(--spacing,.25rem) * 5);width:100%;position:relative}.text-input{appearance:none;border-style:var(--tw-border-style);border-width:0;border-bottom-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * 2.5);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));background-color:#0000;border-bottom-width:2px;display:block}.text-input:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style:none;outline-style:none}.text-input-label{top:calc(var(--spacing,.25rem) * 3);transform-origin:0;--tw-translate-y:calc(var(--spacing,.25rem) * 0);translate:var(--tw-translate-x) var(--tw-translate-y);--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y);transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-duration:.3s;transition-duration:.3s;position:absolute}.text-input:focus~.text-input-label{--tw-translate-y:calc(var(--spacing,.25rem) * -7);translate:var(--tw-translate-x) var(--tw-translate-y);--tw-scale-x:75%;--tw-scale-y:75%;--tw-scale-z:75%;scale:var(--tw-scale-x) var(--tw-scale-y);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);inset-inline-start:calc(var(--spacing,.25rem) * 0)}[dir=rtl] .text-input.keep-label-up~.text-input-label,[dir=rtl] .text-input:focus~.text-input-label{--tw-translate-x: 25% ;translate:var(--tw-translate-x) var(--tw-translate-y);left:auto}.text-input.keep-label-up~.text-input-label,.text-input.has-placeholder~.text-input-label,.text-input.has-value~.text-input-label{--tw-translate-y:calc(var(--spacing,.25rem) * -7);translate:var(--tw-translate-x) var(--tw-translate-y);--tw-scale-x:75%;--tw-scale-y:75%;--tw-scale-z:75%;scale:var(--tw-scale-x) var(--tw-scale-y);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);inset-inline-start:calc(var(--spacing,.25rem) * 0)}.text-input-helper-text{margin-top:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.autocomplete-input-container{margin-bottom:calc(var(--spacing,.25rem) * 5);width:100%}.autocomplete-value-input-container{width:100%;position:relative}.autocomplete-text-input{margin-bottom:calc(var(--spacing,.25rem) * 0)!important}.autocomplete-delete-button{top:50%;right:calc(var(--spacing,.25rem) * 2);--tw-translate-y:-50%;translate:var(--tw-translate-x) var(--tw-translate-y);justify-content:center;align-items:center;display:flex;position:absolute}.autocomplete-delete-button svg{height:calc(var(--spacing,.25rem) * 3);width:calc(var(--spacing,.25rem) * 3)}.autocomplete-suggestions-container{z-index:30;margin:calc(var(--spacing,.25rem) * 0);max-height:calc(var(--spacing,.25rem) * 44);width:100%;padding:calc(var(--spacing,.25rem) * 0);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:absolute;overflow:auto}.autocomplete-suggestion-item{cursor:pointer;padding:calc(var(--spacing,.25rem) * 2)}.autocomplete-value-container{top:50%;right:calc(var(--spacing,.25rem) * 2);justify-content:flex-start;align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex-wrap:wrap;display:flex;position:absolute;transform:translateY(-50%)}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial}}}.input-check-container{align-items:center;display:flex}.input-check{border-style:var(--tw-border-style);border-width:1px;border-radius:.25rem}.input-check:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.input-check-label{margin-left:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-duration:initial;--tw-font-weight:initial}}}.select-input-container{z-index:0;margin-bottom:calc(var(--spacing,.25rem) * 5);width:100%;position:relative}.select-input{appearance:none;border-style:var(--tw-border-style);border-width:0;border-bottom-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * 2.5);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));background-color:#0000;border-bottom-width:2px;display:block}.select-input:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style:none;outline-style:none}.select-input-label{top:calc(var(--spacing,.25rem) * 3);z-index:-10;transform-origin:0;--tw-translate-y:calc(var(--spacing,.25rem) * -6);translate:var(--tw-translate-x) var(--tw-translate-y);--tw-scale-x:75%;--tw-scale-y:75%;--tw-scale-z:75%;scale:var(--tw-scale-x) var(--tw-scale-y);transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-duration:.3s;transition-duration:.3s;position:absolute}.select-input-label:is(:where(.peer):placeholder-shown~*){--tw-translate-y:calc(var(--spacing,.25rem) * 0);translate:var(--tw-translate-x) var(--tw-translate-y);--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.select-input-label:is(:where(.peer):focus~*){--tw-translate-y:calc(var(--spacing,.25rem) * -6);translate:var(--tw-translate-x) var(--tw-translate-y);--tw-scale-x:75%;--tw-scale-y:75%;--tw-scale-z:75%;scale:var(--tw-scale-x) var(--tw-scale-y);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);inset-inline-start:calc(var(--spacing,.25rem) * 0)}.select-input-label:where(:dir(rtl),[dir=rtl],[dir=rtl] *):is(:where(.peer):focus~*){--tw-translate-x: 25% ;translate:var(--tw-translate-x) var(--tw-translate-y);left:auto}.select-input-helper-text{margin-top:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.select-input-native-hidden{pointer-events:none;height:calc(var(--spacing,.25rem) * 0);width:calc(var(--spacing,.25rem) * 0);opacity:0;position:absolute}.select-input-text-container{margin-bottom:calc(var(--spacing,.25rem) * 0)}.select-input-text{cursor:pointer}.select-input-options-container{z-index:30;margin:calc(var(--spacing,.25rem) * 0);max-height:calc(var(--spacing,.25rem) * 44);width:100%;padding:calc(var(--spacing,.25rem) * 0);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:absolute;overflow:auto}.select-input-option-item{cursor:pointer;padding:calc(var(--spacing,.25rem) * 2)}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-duration:initial;--tw-font-weight:initial}}}.text-input-container{margin-bottom:calc(var(--spacing,.25rem) * 5);width:100%}.text-input-field{z-index:0;width:100%;position:relative}.text-input{appearance:none;border-style:var(--tw-border-style);border-width:0;border-bottom-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * 2.5);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));background-color:#0000;border-bottom-width:2px;display:block}.text-input:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style:none;outline-style:none}.text-input-label{top:calc(var(--spacing,.25rem) * 3);transform-origin:0;--tw-translate-y:calc(var(--spacing,.25rem) * 0);translate:var(--tw-translate-x) var(--tw-translate-y);--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y);transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-duration:.3s;transition-duration:.3s;position:absolute}.text-input:focus~.text-input-label{--tw-translate-y:calc(var(--spacing,.25rem) * -7);translate:var(--tw-translate-x) var(--tw-translate-y);--tw-scale-x:75%;--tw-scale-y:75%;--tw-scale-z:75%;scale:var(--tw-scale-x) var(--tw-scale-y);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);inset-inline-start:calc(var(--spacing,.25rem) * 0)}[dir=rtl] .text-input.keep-label-up~.text-input-label,[dir=rtl] .text-input:focus~.text-input-label{--tw-translate-x: 25% ;translate:var(--tw-translate-x) var(--tw-translate-y);left:auto}.text-input.keep-label-up~.text-input-label,.text-input.has-placeholder~.text-input-label,.text-input.has-value~.text-input-label{--tw-translate-y:calc(var(--spacing,.25rem) * -7);translate:var(--tw-translate-x) var(--tw-translate-y);--tw-scale-x:75%;--tw-scale-y:75%;--tw-scale-z:75%;scale:var(--tw-scale-x) var(--tw-scale-y);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);inset-inline-start:calc(var(--spacing,.25rem) * 0)}.text-input-helper-text{margin-top:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}