@versini/ui-textinput 1.6.1 → 2.0.1

package/dist/chunks/TextInput.nuA_J14_.js

@@ -0,0 +1,423 @@
+import { jsx as y, jsxs as H } from "react/jsx-runtime";
+import z, { useRef as f, useEffect as _, useCallback as W, useState as $, useMemo as J, useId as K, useReducer as Q, useLayoutEffect as L } from "react";
+import c from "clsx";
+const P = "av-text-input", me = "av-text-input-simple", Y = "av-text-input-wrapper", I = "av-text-input-helper-text";
+function Z() {
+  const e = f(!1);
+  return _(() => (e.current = !0, () => {
+    e.current = !1;
+  }), []), W(() => e.current, []);
+}
+const B = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+};
+function ee(e) {
+  const n = Z(), t = f(0), r = f(null), [a, o] = $(B), l = J(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((p) => {
+    const i = p[0];
+    i && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
+      r.current && n() && o(i.contentRect);
+    }));
+  }), [n]);
+  return _(() => (r.current && (l == null || l.observe(r.current, e)), () => {
+    l == null || l.disconnect(), t.current && cancelAnimationFrame(t.current);
+  }), [l, e]), [r, a];
+}
+function te(e) {
+  const n = K();
+  if (!e)
+    return n;
+  if (typeof e == "number" || typeof e == "string")
+    return `${e}${n}`;
+  if (typeof e == "object") {
+    const { id: t, prefix: r = "" } = e;
+    return typeof t == "number" || typeof t == "string" ? `${r}${t}` : `${r}${n}`;
+  }
+}
+const w = "SET_ANNOUNCEMENT", D = "CLEAR_ANNOUNCEMENT", re = {
+  alert: null,
+  alertdialog: null,
+  log: "polite",
+  marquee: null,
+  progressbar: null,
+  status: "polite",
+  timer: "assertive"
+}, ne = (e, n) => {
+  switch (n == null ? void 0 : n.type) {
+    case w:
+      return {
+        ...e,
+        announcement: n.payload
+      };
+    case D:
+      return {
+        ...e,
+        announcement: null
+      };
+    default:
+      return e;
+  }
+}, ae = ({
+  onAnnouncementClear: e,
+  dispatch: n
+}) => {
+  n({
+    type: D
+  }), typeof e == "function" && e();
+}, S = ({
+  children: e,
+  clearAnnouncementDelay: n,
+  clearAnnouncementTimeoutRef: t,
+  onAnnouncementClear: r,
+  dispatch: a
+}) => {
+  clearTimeout(t.current), e !== null && a({
+    type: w,
+    payload: e
+  }), n && (t.current = setTimeout(
+    () => ae({
+      onAnnouncementClear: r,
+      dispatch: a
+    }),
+    n
+  ));
+}, le = ({
+  children: e,
+  announcementTimeoutRef: n,
+  announcementDelay: t,
+  clearAnnouncementDelay: r,
+  clearAnnouncementTimeoutRef: a,
+  onAnnouncementClear: o,
+  dispatch: l
+}) => {
+  clearTimeout(n.current), t ? n.current = setTimeout(S, t, {
+    children: e,
+    clearAnnouncementDelay: r,
+    clearAnnouncementTimeoutRef: a,
+    onAnnouncementClear: o,
+    dispatch: l
+  }) : S({
+    children: e,
+    clearAnnouncementDelay: r,
+    clearAnnouncementTimeoutRef: a,
+    onAnnouncementClear: o,
+    dispatch: l
+  });
+};
+function ce({
+  children: e,
+  className: n,
+  politeness: t,
+  role: r = null,
+  announcementDelay: a,
+  clearAnnouncementDelay: o,
+  onAnnouncementClear: l,
+  visible: p,
+  ...i
+}) {
+  const x = f(null), m = f(null), [s, g] = Q(ne, {
+    announcement: null
+  });
+  let d = t;
+  typeof d > "u" && (d = r ? re[r] : "assertive"), _(() => {
+    le({
+      announcementTimeoutRef: x,
+      announcementDelay: a,
+      children: e,
+      clearAnnouncementDelay: o,
+      clearAnnouncementTimeoutRef: m,
+      onAnnouncementClear: l,
+      dispatch: g
+    });
+  }, [
+    e,
+    a,
+    o,
+    l
+  ]);
+  const u = c(n, {
+    "sr-only": !p
+  });
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      "aria-live": d,
+      ...r && { role: r },
+      className: u,
+      ...i,
+      children: s.announcement
+    }
+  );
+}
+/*!
+  @versini/ui-liveregion v1.2.3
+  © 2024 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_LIVEREGION__ || (window.__VERSINI_UI_LIVEREGION__ = {
+    version: "1.2.3",
+    buildTime: "12/30/2024 11:40 AM EST",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+const oe = ({
+  mode: e
+}) => c({
+  "bg-surface-darker text-copy-lighter caret-copy-light": e === "dark",
+  "bg-surface-lighter text-copy-dark caret-copy-dark": e === "light",
+  "bg-surface-lighter text-copy-dark caret-copy-dark dark:bg-surface-darker dark:text-copy-lighter dark:caret-copy-light": e === "system",
+  "bg-surface-darker text-copy-lighter caret-copy-light dark:bg-surface-lighter dark:text-copy-dark dark:caret-copy-dark": e === "alt-system"
+}), se = ({
+  focusMode: e
+}) => c("focus:outline focus:outline-2 focus:outline-offset-2", {
+  "focus:outline-focus-dark": e === "dark",
+  "focus:outline-focus-light": e === "light",
+  "focus:outline-focus-light dark:focus:outline-focus-dark": e === "alt-system",
+  "focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
+}), ue = ({
+  noBorder: e,
+  error: n
+}) => c("border-2", {
+  "border-border-dark": !e && !n,
+  "focus:border-border-dark": !e && n,
+  "border-border-error-dark": !e && n,
+  "border-transparent": e
+}), ie = ({
+  disabled: e,
+  raw: n,
+  error: t,
+  mode: r
+}) => {
+  if (n)
+    return "";
+  if (e)
+    return c("absolute px-2 cursor-not-allowed opacity-50 font-medium");
+  if (!t)
+    return c("absolute px-2 cursor-text font-medium", {
+      "text-copy-lighter": r === "dark",
+      "text-copy-dark": r === "light",
+      "text-copy-dark dark:text-copy-lighter": r === "system",
+      "text-copy-lighter dark:text-copy-dark": r === "alt-system"
+    });
+  if (t)
+    return c("absolute px-2 cursor-text font-medium", {
+      "text-copy-lighter": r === "dark",
+      "text-copy-error-dark": r === "light",
+      "text-copy-error-dark dark:text-copy-error-light dark:bg-surface-darker": r === "system",
+      "text-copy-lighter dark:text-copy-error-dark": r === "alt-system"
+    });
+}, pe = ({
+  error: e,
+  raw: n,
+  mode: t,
+  disabled: r
+}) => {
+  if (n)
+    return "";
+  if (r)
+    return c(
+      I,
+      "absolute px-2 cursor-not-allowed opacity-50 font-medium"
+    );
+  if (!e)
+    return c(I, "absolute px-2 font-medium", {
+      "text-copy-lighter": t === "dark",
+      "text-copy-dark": t === "light",
+      "text-copy-dark dark:text-copy-lighter": t === "system",
+      "text-copy-lighter dark:text-copy-dark": t === "alt-system"
+    });
+  if (e)
+    return c(I, "absolute px-2 font-medium", {
+      "text-copy-error-light bg-surface-darker": t === "dark",
+      "text-copy-error-dark": t === "light",
+      "text-copy-error-dark dark:text-copy-error-light dark:bg-surface-darker": t === "system",
+      "dark:text-copy-error-dark text-copy-error-light bg-surface-darker": t === "alt-system"
+    });
+}, de = ({
+  className: e,
+  inputClassName: n,
+  raw: t,
+  disabled: r,
+  noBorder: a,
+  error: o,
+  mode: l,
+  focusMode: p,
+  size: i,
+  rightElementClassName: x
+}) => {
+  const m = t ? e : c(
+    "relative flex w-full flex-col justify-center",
+    Y,
+    e
+  );
+  let s = "";
+  switch (i) {
+    case "xs":
+      s = "h-8";
+      break;
+    case "sm":
+      s = "h-10";
+      break;
+    case "lg":
+      s = "h-14";
+      break;
+    case "xl":
+      s = "h-16";
+      break;
+    default:
+      s = "h-12";
+      break;
+  }
+  const g = t ? c(n) : c(
+    P,
+    s,
+    "rounded-md text-base px-4",
+    oe({ mode: l }),
+    se({ focusMode: p }),
+    ue({ noBorder: a, error: o }),
+    {
+      "disabled:cursor-not-allowed disabled:opacity-50": r
+    },
+    n
+  ), d = t ? void 0 : "sr-only", u = ie({
+    disabled: r,
+    raw: t,
+    error: o,
+    mode: l
+  }), b = pe({
+    error: o,
+    raw: t,
+    mode: l,
+    disabled: r
+  }), v = t ? void 0 : c("absolute right-3", x);
+  return {
+    wrapper: m,
+    input: g,
+    accessibleLabel: d,
+    visibleLabel: u,
+    helperText: b,
+    rightElement: v
+  };
+}, ye = z.forwardRef(
+  ({
+    id: e,
+    name: n,
+    label: t,
+    error: r = !1,
+    raw: a = !1,
+    className: o,
+    inputClassName: l,
+    mode: p = "system",
+    focusMode: i = "system",
+    disabled: x = !1,
+    noBorder: m = !1,
+    labelId: s,
+    labelHidden: g = !1,
+    type: d = "text",
+    helperText: u = "",
+    rightElement: b,
+    rightElementClassName: v,
+    size: N = "md",
+    ...U
+  }, M) => {
+    const [F, T] = ee(), [O, X] = $(0), k = te({ id: e, prefix: `${P}-` }), j = `${n} error, ${u}`, A = f(null), E = f(null), V = {
+      xs: { label: "-25px", helperText: "30px" },
+      sm: { label: "-29px", helperText: "34px" },
+      md: { label: "-33px", helperText: "38px" },
+      lg: { label: "-15px", helperText: "22px" },
+      xl: { label: "-19px", helperText: "25px" }
+    }, h = de({
+      className: o,
+      inputClassName: l,
+      error: r,
+      raw: a,
+      focusMode: i,
+      disabled: x,
+      noBorder: m,
+      mode: p,
+      size: N,
+      rightElementClassName: v
+    });
+    return L(() => {
+      T && T.width && X(T.width + 18 + 10);
+    }, [T]), L(() => {
+      var R, C;
+      const { label: q, helperText: G } = V[N];
+      (R = A == null ? void 0 : A.current) == null || R.style.setProperty("--av-text-input-label", q), (C = E == null ? void 0 : E.current) == null || C.style.setProperty(
+        "--av-text-input-helper-text",
+        G
+      );
+    }, [N]), /* @__PURE__ */ H("div", { className: h.wrapper, children: [
+      /* @__PURE__ */ y(
+        "label",
+        {
+          htmlFor: k,
+          id: s,
+          className: h.accessibleLabel,
+          children: t
+        }
+      ),
+      /* @__PURE__ */ y(
+        "input",
+        {
+          ref: M,
+          id: k,
+          name: n,
+          type: d,
+          disabled: x,
+          placeholder: a ? void 0 : " ",
+          className: h.input,
+          ...u && { "aria-describedby": `${k}-helper` },
+          ...r && { "aria-invalid": "true" },
+          ...b && !a && { style: { paddingRight: O } },
+          ...U
+        }
+      ),
+      !a && !g && /* @__PURE__ */ y(
+        "label",
+        {
+          ref: A,
+          "aria-hidden": !0,
+          htmlFor: k,
+          className: h.visibleLabel,
+          children: t
+        }
+      ),
+      u && /* @__PURE__ */ y(
+        "div",
+        {
+          ref: E,
+          id: `${k}-helper`,
+          className: h.helperText,
+          children: u
+        }
+      ),
+      b && /* @__PURE__ */ y(
+        "div",
+        {
+          ref: F,
+          className: h.rightElement,
+          children: b
+        }
+      ),
+      r && u && /* @__PURE__ */ y(ce, { politeness: "polite", clearAnnouncementDelay: 500, children: j })
+    ] });
+  }
+);
+ye.displayName = "TextInput";
+export {
+  P as TEXT_INPUT_CLASSNAME,
+  I as TEXT_INPUT_HELPER_TEXT_CLASSNAME,
+  me as TEXT_INPUT_SIMPLE_CLASSNAME,
+  Y as TEXT_INPUT_WRAPPER_CLASSNAME,
+  ye as TextInput,
+  ce as x
+};

package/dist/components/TextInput/TextInput.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { TextInput as m } from "../../chunks/TextInput.BAOtC6RE.js";
+import { TextInput as m } from "../../chunks/TextInput.nuA_J14_.js";
 import "react";
 export {
   m as TextInput

package/dist/components/TextInput/TextInputMask.js

@@ -1,15 +1,15 @@
-import { TextInput as H, x as L } from "../../chunks/TextInput.BAOtC6RE.js";
-import { jsxs as B, Fragment as j, jsx as x } from "react/jsx-runtime";
-import A, { useMemo as b, useState as _, useRef as m, useEffect as $ } from "react";
-function q(r) {
-  return b(() => r.every((t) => t == null) ? () => {
+import { TextInput as F, x as H } from "../../chunks/TextInput.nuA_J14_.js";
+import { jsxs as L, Fragment as B, jsx as x } from "react/jsx-runtime";
+import A, { useMemo as j, useState as _, useRef as m, useEffect as b } from "react";
+function $(r) {
+  return j(() => r.every((t) => t == null) ? () => {
   } : (t) => {
     r.forEach((n) => {
       typeof n == "function" ? n(t) : n != null && (n.current = t);
     });
   }, r);
 }
-const z = 500, G = 5e3, J = 2e4, K = A.forwardRef(
+const q = 500, z = 5e3, G = 2e4, J = A.forwardRef(
   ({
     name: r,
     disabled: t,
@@ -21,25 +21,24 @@ const z = 500, G = 5e3, J = 2e4, K = A.forwardRef(
     onFocus: p,
     onTextInputMaskBlur: f,
     rightElement: O,
-    spacing: U,
-    ...w
+    ...U
   }, E) => {
     const [h, R] = _(!0), [l, g] = _({
       message: null,
       politeness: null
-    }), c = m(!0), o = m(null), I = m(null), C = q([E, I]), S = h ? "Show" : "Hide", a = () => {
+    }), c = m(!0), o = m(null), I = m(null), w = $([E, I]), C = h ? "Show" : "Hide", a = () => {
       o.current && clearTimeout(o.current), c.current || (o.current = setTimeout(() => {
         c.current = !0, R(!0), g({
-          announcementTimeout: G,
+          announcementTimeout: z,
           politeness: "polite",
           message: `${n} hiding characters`
         }), u && u(!0);
-      }, J));
-    }, v = (e) => {
+      }, G));
+    }, S = (e) => {
       e.preventDefault();
       const s = !c.current;
       c.current = s, a(), R(s), g({
-        announcementTimeout: z,
+        announcementTimeout: q,
         politeness: "assertive",
         message: s ? "Characters hidden" : "Characters showing"
       }), u && u(s);
@@ -47,41 +46,40 @@ const z = 500, G = 5e3, J = 2e4, K = A.forwardRef(
       var N;
       const { relatedTarget: s } = e, i = (N = I.current) == null ? void 0 : N.parentElement;
       i != null && i.contains(s) || f && f();
-    }, y = (e) => {
+    }, v = (e) => {
       a(), d && d(e), M(e);
-    }, D = (e) => {
+    }, y = (e) => {
       a(), p && p(e);
-    }, F = (e) => {
+    }, D = (e) => {
       a(), T && T(e);
     };
-    return $(() => () => {
+    return b(() => () => {
       o.current && clearTimeout(o.current);
-    }, []), /* @__PURE__ */ B(j, { children: [
+    }, []), /* @__PURE__ */ L(B, { children: [
       /* @__PURE__ */ x(
-        H,
+        F,
         {
-          ref: C,
+          ref: w,
           name: r,
           label: n,
           labelHidden: k,
           type: h ? "password" : "text",
           disabled: t,
-          spacing: U,
-          onBlur: y,
-          onFocus: D,
-          onChange: F,
+          onBlur: v,
+          onFocus: y,
+          onChange: D,
           rightElement: A.cloneElement(O, {
             ref: E,
-            label: S,
-            onClick: v,
+            label: C,
+            onClick: S,
             onBlur: M,
             disabled: t
           }),
-          ...w
+          ...U
         }
       ),
       /* @__PURE__ */ x(
-        L,
+        H,
         {
           role: "status",
           politeness: l.politeness,
@@ -92,7 +90,7 @@ const z = 500, G = 5e3, J = 2e4, K = A.forwardRef(
     ] });
   }
 );
-K.displayName = "TextInputMask";
+J.displayName = "TextInputMask";
 export {
-  K as TextInputMask
+  J as TextInputMask
 };

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import * as _versini_ui_types from '@versini/ui-types';
 import React from 'react';
 
 declare const TEXT_INPUT_CLASSNAME = "av-text-input";
@@ -24,7 +23,7 @@ declare const TextInput: React.ForwardRefExoticComponent<{
     noBorder?: boolean;
     raw?: boolean;
     size?: Size;
-} & _versini_ui_types.SpacingTypes.Props & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
 
 declare const TextInputMask: React.ForwardRefExoticComponent<{
     rightElement: React.ReactElement;
@@ -43,6 +42,6 @@ declare const TextInputMask: React.ForwardRefExoticComponent<{
     noBorder?: boolean;
     raw?: boolean;
     size?: Size;
-} & _versini_ui_types.SpacingTypes.Props & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
 
 export { TEXT_INPUT_CLASSNAME, TEXT_INPUT_HELPER_TEXT_CLASSNAME, TEXT_INPUT_SIMPLE_CLASSNAME, TEXT_INPUT_WRAPPER_CLASSNAME, TextInput, TextInputMask };

package/dist/index.js

@@ -1,13 +1,13 @@
-import { TEXT_INPUT_CLASSNAME as I, TEXT_INPUT_HELPER_TEXT_CLASSNAME as e, TEXT_INPUT_SIMPLE_CLASSNAME as o, TEXT_INPUT_WRAPPER_CLASSNAME as t, TextInput as N } from "./chunks/TextInput.BAOtC6RE.js";
+import { TEXT_INPUT_CLASSNAME as I, TEXT_INPUT_HELPER_TEXT_CLASSNAME as e, TEXT_INPUT_SIMPLE_CLASSNAME as o, TEXT_INPUT_WRAPPER_CLASSNAME as t, TextInput as N } from "./chunks/TextInput.nuA_J14_.js";
 import { TextInputMask as i } from "./components/TextInput/TextInputMask.js";
 /*!
-  @versini/ui-textinput v1.6.1
+  @versini/ui-textinput v2.0.1
   © 2024 gizmette.com
 */
 try {
   window.__VERSINI_UI_TEXTINPUT__ || (window.__VERSINI_UI_TEXTINPUT__ = {
-    version: "1.6.1",
-    buildTime: "12/28/2024 05:53 PM EST",
+    version: "2.0.1",
+    buildTime: "12/30/2024 11:40 AM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/dist/style.css

@@ -1 +1 @@
-*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-ms-backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.av-text-input-wrapper label[aria-hidden=true]{transform:translate(12px) scale(1);transform-origin:top left;transition:var(--av-text-input-wrapper-transition, all .2s ease-out)}.av-text-input:focus+label[aria-hidden=true],.av-text-input:not(:placeholder-shown)+label[aria-hidden=true]{transform:translate(12px,var(--av-text-input-label, -33px)) scale(.75)}.av-text-input-helper-text{transform:translate(12px,var(--av-text-input-helper-text, 38px)) scale(.75);transform-origin:top left}@keyframes blink{50%{fill:transparent}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.right-3{right:.75rem}.m-0{margin:0}.m-1{margin:.25rem}.m-10{margin:2.5rem}.m-11{margin:2.75rem}.m-12{margin:3rem}.m-14{margin:3.5rem}.m-16{margin:4rem}.m-2{margin:.5rem}.m-20{margin:5rem}.m-24{margin:6rem}.m-28{margin:7rem}.m-3{margin:.75rem}.m-32{margin:8rem}.m-36{margin:9rem}.m-4{margin:1rem}.m-44{margin:11rem}.m-48{margin:12rem}.m-5{margin:1.25rem}.m-52{margin:13rem}.m-56{margin:14rem}.m-6{margin:1.5rem}.m-60{margin:15rem}.m-64{margin:16rem}.m-7{margin:1.75rem}.m-72{margin:18rem}.m-8{margin:2rem}.m-80{margin:20rem}.m-9{margin:2.25rem}.m-96{margin:24rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-11{margin-bottom:2.75rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-24{margin-bottom:6rem}.mb-28{margin-bottom:7rem}.mb-3{margin-bottom:.75rem}.mb-32{margin-bottom:8rem}.mb-36{margin-bottom:9rem}.mb-4{margin-bottom:1rem}.mb-44{margin-bottom:11rem}.mb-48{margin-bottom:12rem}.mb-5{margin-bottom:1.25rem}.mb-52{margin-bottom:13rem}.mb-56{margin-bottom:14rem}.mb-6{margin-bottom:1.5rem}.mb-60{margin-bottom:15rem}.mb-64{margin-bottom:16rem}.mb-7{margin-bottom:1.75rem}.mb-72{margin-bottom:18rem}.mb-8{margin-bottom:2rem}.mb-80{margin-bottom:20rem}.mb-9{margin-bottom:2.25rem}.mb-96{margin-bottom:24rem}.ml-0{margin-left:0}.ml-1{margin-left:.25rem}.ml-10{margin-left:2.5rem}.ml-11{margin-left:2.75rem}.ml-12{margin-left:3rem}.ml-14{margin-left:3.5rem}.ml-16{margin-left:4rem}.ml-2{margin-left:.5rem}.ml-20{margin-left:5rem}.ml-24{margin-left:6rem}.ml-28{margin-left:7rem}.ml-3{margin-left:.75rem}.ml-32{margin-left:8rem}.ml-36{margin-left:9rem}.ml-4{margin-left:1rem}.ml-44{margin-left:11rem}.ml-48{margin-left:12rem}.ml-5{margin-left:1.25rem}.ml-52{margin-left:13rem}.ml-56{margin-left:14rem}.ml-6{margin-left:1.5rem}.ml-60{margin-left:15rem}.ml-64{margin-left:16rem}.ml-7{margin-left:1.75rem}.ml-72{margin-left:18rem}.ml-8{margin-left:2rem}.ml-80{margin-left:20rem}.ml-9{margin-left:2.25rem}.ml-96{margin-left:24rem}.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-10{margin-right:2.5rem}.mr-11{margin-right:2.75rem}.mr-12{margin-right:3rem}.mr-14{margin-right:3.5rem}.mr-16{margin-right:4rem}.mr-2{margin-right:.5rem}.mr-20{margin-right:5rem}.mr-24{margin-right:6rem}.mr-28{margin-right:7rem}.mr-3{margin-right:.75rem}.mr-32{margin-right:8rem}.mr-36{margin-right:9rem}.mr-4{margin-right:1rem}.mr-44{margin-right:11rem}.mr-48{margin-right:12rem}.mr-5{margin-right:1.25rem}.mr-52{margin-right:13rem}.mr-56{margin-right:14rem}.mr-6{margin-right:1.5rem}.mr-60{margin-right:15rem}.mr-64{margin-right:16rem}.mr-7{margin-right:1.75rem}.mr-72{margin-right:18rem}.mr-8{margin-right:2rem}.mr-80{margin-right:20rem}.mr-9{margin-right:2.25rem}.mr-96{margin-right:24rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-11{margin-top:2.75rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-24{margin-top:6rem}.mt-28{margin-top:7rem}.mt-3{margin-top:.75rem}.mt-32{margin-top:8rem}.mt-36{margin-top:9rem}.mt-4{margin-top:1rem}.mt-44{margin-top:11rem}.mt-48{margin-top:12rem}.mt-5{margin-top:1.25rem}.mt-52{margin-top:13rem}.mt-56{margin-top:14rem}.mt-6{margin-top:1.5rem}.mt-60{margin-top:15rem}.mt-64{margin-top:16rem}.mt-7{margin-top:1.75rem}.mt-72{margin-top:18rem}.mt-8{margin-top:2rem}.mt-80{margin-top:20rem}.mt-9{margin-top:2.25rem}.mt-96{margin-top:24rem}.flex{display:flex}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-8{height:2rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-text{cursor:text}.flex-col{flex-direction:column}.justify-center{justify-content:center}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-2{border-width:2px}.border-border-dark{--tw-border-opacity: 1;border-color:var(--av-border-dark, rgb(15 23 42 / var(--tw-border-opacity, 1)))}.border-border-error-dark{--tw-border-opacity: 1;border-color:var(--av-border-error-dark, rgb(185 28 28 / var(--tw-border-opacity, 1)))}.border-transparent{border-color:transparent}.bg-surface-darker{--tw-bg-opacity: 1;background-color:var(--av-surface-darker, rgb(15 23 42 / var(--tw-bg-opacity, 1)))}.bg-surface-lighter{--tw-bg-opacity: 1;background-color:var(--av-surface-lighter, rgb(226 232 240 / var(--tw-bg-opacity, 1)))}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.text-base{font-size:1rem;line-height:1.5rem}.font-medium{font-weight:500}.text-copy-dark{--tw-text-opacity: 1;color:var(--av-copy-dark, rgb(15 23 42 / var(--tw-text-opacity, 1)))}.text-copy-error-dark{--tw-text-opacity: 1;color:var(--av-copy-error-dark, rgb(185 28 28 / var(--tw-text-opacity, 1)))}.text-copy-error-light{--tw-text-opacity: 1;color:var(--av-copy-error-light, rgb(239 68 68 / var(--tw-text-opacity, 1)))}.text-copy-lighter{--tw-text-opacity: 1;color:var(--av-copy-lighter, rgb(255 255 255 / var(--tw-text-opacity, 1)))}.caret-copy-dark{caret-color:var(--av-copy-dark, rgb(15 23 42 / 1))}.caret-copy-light{caret-color:var(--av-copy-light, rgb(226 232 240 / 1))}.opacity-50{opacity:.5}.outline-focus-dark{outline-color:var(--av-focus-dark, rgb(21 128 61 / 1))}.outline-focus-light{outline-color:var(--av-focus-light, rgb(134 239 172 / 1))}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\:border-border-dark:focus{--tw-border-opacity: 1;border-color:var(--av-border-dark, rgb(15 23 42 / var(--tw-border-opacity, 1)))}.focus\:outline:focus{outline-style:solid}.focus\:outline-2:focus{outline-width:2px}.focus\:outline-offset-2:focus{outline-offset:2px}.focus\:outline-focus-dark:focus{outline-color:var(--av-focus-dark, rgb(21 128 61 / 1))}.focus\:outline-focus-light:focus{outline-color:var(--av-focus-light, rgb(134 239 172 / 1))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (prefers-color-scheme: dark){.dark\:bg-surface-darker{--tw-bg-opacity: 1;background-color:var(--av-surface-darker, rgb(15 23 42 / var(--tw-bg-opacity, 1)))}.dark\:bg-surface-lighter{--tw-bg-opacity: 1;background-color:var(--av-surface-lighter, rgb(226 232 240 / var(--tw-bg-opacity, 1)))}.dark\:text-copy-dark{--tw-text-opacity: 1;color:var(--av-copy-dark, rgb(15 23 42 / var(--tw-text-opacity, 1)))}.dark\:text-copy-error-dark{--tw-text-opacity: 1;color:var(--av-copy-error-dark, rgb(185 28 28 / var(--tw-text-opacity, 1)))}.dark\:text-copy-error-light{--tw-text-opacity: 1;color:var(--av-copy-error-light, rgb(239 68 68 / var(--tw-text-opacity, 1)))}.dark\:text-copy-lighter{--tw-text-opacity: 1;color:var(--av-copy-lighter, rgb(255 255 255 / var(--tw-text-opacity, 1)))}.dark\:caret-copy-dark{caret-color:var(--av-copy-dark, rgb(15 23 42 / 1))}.dark\:caret-copy-light{caret-color:var(--av-copy-light, rgb(226 232 240 / 1))}.dark\:focus\:outline-focus-dark:focus{outline-color:var(--av-focus-dark, rgb(21 128 61 / 1))}.dark\:focus\:outline-focus-light:focus{outline-color:var(--av-focus-light, rgb(134 239 172 / 1))}}
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-ms-backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.av-text-input-wrapper label[aria-hidden=true]{transform:translate(12px) scale(1);transform-origin:top left;transition:var(--av-text-input-wrapper-transition, all .2s ease-out)}.av-text-input:focus+label[aria-hidden=true],.av-text-input:not(:placeholder-shown)+label[aria-hidden=true]{transform:translate(12px,var(--av-text-input-label, -33px)) scale(.75)}.av-text-input-helper-text{transform:translate(12px,var(--av-text-input-helper-text, 38px)) scale(.75);transform-origin:top left}@keyframes blink{50%{fill:transparent}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.right-3{right:.75rem}.mr-2{margin-right:.5rem}.flex{display:flex}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-8{height:2rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-text{cursor:text}.flex-col{flex-direction:column}.justify-center{justify-content:center}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-2{border-width:2px}.border-border-dark{--tw-border-opacity: 1;border-color:var(--av-border-dark, rgb(15 23 42 / var(--tw-border-opacity, 1)))}.border-border-error-dark{--tw-border-opacity: 1;border-color:var(--av-border-error-dark, rgb(185 28 28 / var(--tw-border-opacity, 1)))}.border-transparent{border-color:transparent}.bg-surface-darker{--tw-bg-opacity: 1;background-color:var(--av-surface-darker, rgb(15 23 42 / var(--tw-bg-opacity, 1)))}.bg-surface-lighter{--tw-bg-opacity: 1;background-color:var(--av-surface-lighter, rgb(226 232 240 / var(--tw-bg-opacity, 1)))}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.text-base{font-size:1rem;line-height:1.5rem}.font-medium{font-weight:500}.text-copy-dark{--tw-text-opacity: 1;color:var(--av-copy-dark, rgb(15 23 42 / var(--tw-text-opacity, 1)))}.text-copy-error-dark{--tw-text-opacity: 1;color:var(--av-copy-error-dark, rgb(185 28 28 / var(--tw-text-opacity, 1)))}.text-copy-error-light{--tw-text-opacity: 1;color:var(--av-copy-error-light, rgb(239 68 68 / var(--tw-text-opacity, 1)))}.text-copy-lighter{--tw-text-opacity: 1;color:var(--av-copy-lighter, rgb(255 255 255 / var(--tw-text-opacity, 1)))}.caret-copy-dark{caret-color:var(--av-copy-dark, rgb(15 23 42 / 1))}.caret-copy-light{caret-color:var(--av-copy-light, rgb(226 232 240 / 1))}.opacity-50{opacity:.5}.outline-focus-dark{outline-color:var(--av-focus-dark, rgb(21 128 61 / 1))}.outline-focus-light{outline-color:var(--av-focus-light, rgb(134 239 172 / 1))}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\:border-border-dark:focus{--tw-border-opacity: 1;border-color:var(--av-border-dark, rgb(15 23 42 / var(--tw-border-opacity, 1)))}.focus\:outline:focus{outline-style:solid}.focus\:outline-2:focus{outline-width:2px}.focus\:outline-offset-2:focus{outline-offset:2px}.focus\:outline-focus-dark:focus{outline-color:var(--av-focus-dark, rgb(21 128 61 / 1))}.focus\:outline-focus-light:focus{outline-color:var(--av-focus-light, rgb(134 239 172 / 1))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (prefers-color-scheme: dark){.dark\:bg-surface-darker{--tw-bg-opacity: 1;background-color:var(--av-surface-darker, rgb(15 23 42 / var(--tw-bg-opacity, 1)))}.dark\:bg-surface-lighter{--tw-bg-opacity: 1;background-color:var(--av-surface-lighter, rgb(226 232 240 / var(--tw-bg-opacity, 1)))}.dark\:text-copy-dark{--tw-text-opacity: 1;color:var(--av-copy-dark, rgb(15 23 42 / var(--tw-text-opacity, 1)))}.dark\:text-copy-error-dark{--tw-text-opacity: 1;color:var(--av-copy-error-dark, rgb(185 28 28 / var(--tw-text-opacity, 1)))}.dark\:text-copy-error-light{--tw-text-opacity: 1;color:var(--av-copy-error-light, rgb(239 68 68 / var(--tw-text-opacity, 1)))}.dark\:text-copy-lighter{--tw-text-opacity: 1;color:var(--av-copy-lighter, rgb(255 255 255 / var(--tw-text-opacity, 1)))}.dark\:caret-copy-dark{caret-color:var(--av-copy-dark, rgb(15 23 42 / 1))}.dark\:caret-copy-light{caret-color:var(--av-copy-light, rgb(226 232 240 / 1))}.dark\:focus\:outline-focus-dark:focus{outline-color:var(--av-focus-dark, rgb(21 128 61 / 1))}.dark\:focus\:outline-focus-light:focus{outline-color:var(--av-focus-light, rgb(134 239 172 / 1))}}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-textinput",
-	"version": "1.6.1",
+	"version": "2.0.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -40,14 +40,13 @@
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.15",
 		"@versini/ui-hooks": "4.3.0",
-		"@versini/ui-liveregion": "1.2.1",
-		"@versini/ui-spacing": "1.1.1",
-		"@versini/ui-types": "1.1.0",
+		"@versini/ui-liveregion": "1.2.3",
+		"@versini/ui-types": "2.1.0",
 		"clsx": "2.1.1",
 		"tailwindcss": "3.4.17"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "900bc75dfbd7b5635476cfd59ba97711ce7be2fc"
+	"gitHead": "1221c66705bd1e8a31981a21a9566c8db647ab5c"
 }

package/dist/chunks/TextInput.BAOtC6RE.js

@@ -1,449 +0,0 @@
-import { jsx as m, jsxs as z } from "react/jsx-runtime";
-import W, { useRef as y, useEffect as R, useCallback as J, useState as L, useMemo as K, useId as Q, useReducer as Y, useLayoutEffect as $ } from "react";
-import a from "clsx";
-const w = "av-text-input", be = "av-text-input-simple", Z = "av-text-input-wrapper", N = "av-text-input-helper-text";
-function B() {
-  const e = y(!1);
-  return R(() => (e.current = !0, () => {
-    e.current = !1;
-  }), []), J(() => e.current, []);
-}
-const ee = {
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0,
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0
-};
-function te(e) {
-  const r = B(), t = y(0), n = y(null), [l, o] = L(ee), c = K(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((i) => {
-    const p = i[0];
-    p && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
-      n.current && r() && o(p.contentRect);
-    }));
-  }), [r]);
-  return R(() => (n.current && (c == null || c.observe(n.current, e)), () => {
-    c == null || c.disconnect(), t.current && cancelAnimationFrame(t.current);
-  }), [c, e]), [n, l];
-}
-function re(e) {
-  const r = Q();
-  if (!e)
-    return r;
-  if (typeof e == "number" || typeof e == "string")
-    return `${e}${r}`;
-  if (typeof e == "object") {
-    const { id: t, prefix: n = "" } = e;
-    return typeof t == "number" || typeof t == "string" ? `${n}${t}` : `${n}${r}`;
-  }
-}
-const U = "SET_ANNOUNCEMENT", D = "CLEAR_ANNOUNCEMENT", ne = {
-  alert: null,
-  alertdialog: null,
-  log: "polite",
-  marquee: null,
-  progressbar: null,
-  status: "polite",
-  timer: "assertive"
-}, le = (e, r) => {
-  switch (r == null ? void 0 : r.type) {
-    case U:
-      return {
-        ...e,
-        announcement: r.payload
-      };
-    case D:
-      return {
-        ...e,
-        announcement: null
-      };
-    default:
-      return e;
-  }
-}, ce = ({
-  onAnnouncementClear: e,
-  dispatch: r
-}) => {
-  r({
-    type: D
-  }), typeof e == "function" && e();
-}, P = ({
-  children: e,
-  clearAnnouncementDelay: r,
-  clearAnnouncementTimeoutRef: t,
-  onAnnouncementClear: n,
-  dispatch: l
-}) => {
-  clearTimeout(t.current), e !== null && l({
-    type: U,
-    payload: e
-  }), r && (t.current = setTimeout(
-    () => ce({
-      onAnnouncementClear: n,
-      dispatch: l
-    }),
-    r
-  ));
-}, ae = ({
-  children: e,
-  announcementTimeoutRef: r,
-  announcementDelay: t,
-  clearAnnouncementDelay: n,
-  clearAnnouncementTimeoutRef: l,
-  onAnnouncementClear: o,
-  dispatch: c
-}) => {
-  clearTimeout(r.current), t ? r.current = setTimeout(P, t, {
-    children: e,
-    clearAnnouncementDelay: n,
-    clearAnnouncementTimeoutRef: l,
-    onAnnouncementClear: o,
-    dispatch: c
-  }) : P({
-    children: e,
-    clearAnnouncementDelay: n,
-    clearAnnouncementTimeoutRef: l,
-    onAnnouncementClear: o,
-    dispatch: c
-  });
-};
-function oe({
-  children: e,
-  className: r,
-  politeness: t,
-  role: n = null,
-  announcementDelay: l,
-  clearAnnouncementDelay: o,
-  onAnnouncementClear: c,
-  visible: i,
-  ...p
-}) {
-  const f = y(null), x = y(null), [g, s] = Y(le, {
-    announcement: null
-  });
-  let d = t;
-  typeof d > "u" && (d = n ? ne[n] : "assertive"), R(() => {
-    ae({
-      announcementTimeoutRef: f,
-      announcementDelay: l,
-      children: e,
-      clearAnnouncementDelay: o,
-      clearAnnouncementTimeoutRef: x,
-      onAnnouncementClear: c,
-      dispatch: s
-    });
-  }, [
-    e,
-    l,
-    o,
-    c
-  ]);
-  const u = a(r, {
-    "sr-only": !i
-  });
-  return /* @__PURE__ */ m(
-    "div",
-    {
-      "aria-live": d,
-      ...n && { role: n },
-      className: u,
-      ...p,
-      children: g.announcement
-    }
-  );
-}
-/*!
-  @versini/ui-liveregion v1.2.1
-  © 2024 gizmette.com
-*/
-try {
-  window.__VERSINI_UI_LIVEREGION__ || (window.__VERSINI_UI_LIVEREGION__ = {
-    version: "1.2.1",
-    buildTime: "12/28/2024 05:53 PM EST",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
-}
-/*!
-  @versini/ui-spacing v1.1.1
-  © 2024 gizmette.com
-*/
-try {
-  window.__VERSINI_UI_SPACING__ || (window.__VERSINI_UI_SPACING__ = {
-    version: "1.1.1",
-    buildTime: "12/28/2024 05:53 PM EST",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
-}
-const se = (e) => {
-  let r = "";
-  if (typeof e == "number" || typeof e == "string")
-    r = "m-" + e;
-  else {
-    const t = [];
-    (e == null ? void 0 : e.t) !== void 0 && t.push(`mt-${e.t}`), (e == null ? void 0 : e.r) !== void 0 && t.push(`mr-${e.r}`), (e == null ? void 0 : e.b) !== void 0 && t.push(`mb-${e.b}`), (e == null ? void 0 : e.l) !== void 0 && t.push(`ml-${e.l}`), r = t.join(" ");
-  }
-  return r;
-}, ie = ({
-  mode: e
-}) => a({
-  "bg-surface-darker text-copy-lighter caret-copy-light": e === "dark",
-  "bg-surface-lighter text-copy-dark caret-copy-dark": e === "light",
-  "bg-surface-lighter text-copy-dark caret-copy-dark dark:bg-surface-darker dark:text-copy-lighter dark:caret-copy-light": e === "system",
-  "bg-surface-darker text-copy-lighter caret-copy-light dark:bg-surface-lighter dark:text-copy-dark dark:caret-copy-dark": e === "alt-system"
-}), ue = ({
-  focusMode: e
-}) => a("focus:outline focus:outline-2 focus:outline-offset-2", {
-  "focus:outline-focus-dark": e === "dark",
-  "focus:outline-focus-light": e === "light",
-  "focus:outline-focus-light dark:focus:outline-focus-dark": e === "alt-system",
-  "focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
-}), pe = ({
-  noBorder: e,
-  error: r
-}) => a("border-2", {
-  "border-border-dark": !e && !r,
-  "focus:border-border-dark": !e && r,
-  "border-border-error-dark": !e && r,
-  "border-transparent": e
-}), de = ({
-  disabled: e,
-  raw: r,
-  error: t,
-  mode: n
-}) => {
-  if (r)
-    return "";
-  if (e)
-    return a("absolute px-2 cursor-not-allowed opacity-50 font-medium");
-  if (!t)
-    return a("absolute px-2 cursor-text font-medium", {
-      "text-copy-lighter": n === "dark",
-      "text-copy-dark": n === "light",
-      "text-copy-dark dark:text-copy-lighter": n === "system",
-      "text-copy-lighter dark:text-copy-dark": n === "alt-system"
-    });
-  if (t)
-    return a("absolute px-2 cursor-text font-medium", {
-      "text-copy-lighter": n === "dark",
-      "text-copy-error-dark": n === "light",
-      "text-copy-error-dark dark:text-copy-error-light dark:bg-surface-darker": n === "system",
-      "text-copy-lighter dark:text-copy-error-dark": n === "alt-system"
-    });
-}, me = ({
-  error: e,
-  raw: r,
-  mode: t,
-  disabled: n
-}) => {
-  if (r)
-    return "";
-  if (n)
-    return a(
-      N,
-      "absolute px-2 cursor-not-allowed opacity-50 font-medium"
-    );
-  if (!e)
-    return a(N, "absolute px-2 font-medium", {
-      "text-copy-lighter": t === "dark",
-      "text-copy-dark": t === "light",
-      "text-copy-dark dark:text-copy-lighter": t === "system",
-      "text-copy-lighter dark:text-copy-dark": t === "alt-system"
-    });
-  if (e)
-    return a(N, "absolute px-2 font-medium", {
-      "text-copy-error-light bg-surface-darker": t === "dark",
-      "text-copy-error-dark": t === "light",
-      "text-copy-error-dark dark:text-copy-error-light dark:bg-surface-darker": t === "system",
-      "dark:text-copy-error-dark text-copy-error-light bg-surface-darker": t === "alt-system"
-    });
-}, ye = ({
-  className: e,
-  inputClassName: r,
-  raw: t,
-  disabled: n,
-  noBorder: l,
-  error: o,
-  spacing: c,
-  mode: i,
-  focusMode: p,
-  size: f,
-  rightElementClassName: x
-}) => {
-  const g = t ? e : a(
-    "relative flex w-full flex-col justify-center",
-    Z,
-    e,
-    se(c)
-  );
-  let s = "";
-  switch (f) {
-    case "xs":
-      s = "h-8";
-      break;
-    case "sm":
-      s = "h-10";
-      break;
-    case "lg":
-      s = "h-14";
-      break;
-    case "xl":
-      s = "h-16";
-      break;
-    default:
-      s = "h-12";
-      break;
-  }
-  const d = t ? a(r) : a(
-    w,
-    r,
-    s,
-    "rounded-md text-base px-4",
-    ie({ mode: i }),
-    ue({ focusMode: p }),
-    pe({ noBorder: l, error: o }),
-    {
-      "disabled:cursor-not-allowed disabled:opacity-50": n
-    }
-  ), u = t ? void 0 : "sr-only", b = de({
-    disabled: n,
-    raw: t,
-    error: o,
-    mode: i
-  }), A = me({
-    error: o,
-    raw: t,
-    mode: i,
-    disabled: n
-  }), I = t ? void 0 : a("absolute right-3", x);
-  return {
-    wrapper: g,
-    input: d,
-    accessibleLabel: u,
-    visibleLabel: b,
-    helperText: A,
-    rightElement: I
-  };
-}, fe = W.forwardRef(
-  ({
-    id: e,
-    name: r,
-    label: t,
-    error: n = !1,
-    raw: l = !1,
-    className: o,
-    inputClassName: c,
-    mode: i = "system",
-    focusMode: p = "system",
-    disabled: f = !1,
-    noBorder: x = !1,
-    labelId: g,
-    labelHidden: s = !1,
-    type: d = "text",
-    helperText: u = "",
-    rightElement: b,
-    rightElementClassName: A,
-    spacing: I,
-    size: E = "md",
-    ...M
-  }, F) => {
-    const [O, T] = te(), [V, j] = L(0), k = re({ id: e, prefix: `${w}-` }), X = `${r} error, ${u}`, v = y(null), _ = y(null), G = {
-      xs: { label: "-25px", helperText: "30px" },
-      sm: { label: "-29px", helperText: "34px" },
-      md: { label: "-33px", helperText: "38px" },
-      lg: { label: "-15px", helperText: "22px" },
-      xl: { label: "-19px", helperText: "25px" }
-    }, h = ye({
-      className: o,
-      inputClassName: c,
-      error: n,
-      raw: l,
-      focusMode: p,
-      disabled: f,
-      noBorder: x,
-      spacing: I,
-      mode: i,
-      size: E,
-      rightElementClassName: A
-    });
-    return $(() => {
-      T && T.width && j(T.width + 18 + 10);
-    }, [T]), $(() => {
-      var C, S;
-      const { label: q, helperText: H } = G[E];
-      (C = v == null ? void 0 : v.current) == null || C.style.setProperty("--av-text-input-label", q), (S = _ == null ? void 0 : _.current) == null || S.style.setProperty(
-        "--av-text-input-helper-text",
-        H
-      );
-    }, [E]), /* @__PURE__ */ z("div", { className: h.wrapper, children: [
-      /* @__PURE__ */ m(
-        "label",
-        {
-          htmlFor: k,
-          id: g,
-          className: h.accessibleLabel,
-          children: t
-        }
-      ),
-      /* @__PURE__ */ m(
-        "input",
-        {
-          ref: F,
-          id: k,
-          name: r,
-          type: d,
-          disabled: f,
-          placeholder: l ? void 0 : " ",
-          className: h.input,
-          ...u && { "aria-describedby": `${k}-helper` },
-          ...n && { "aria-invalid": "true" },
-          ...b && !l && { style: { paddingRight: V } },
-          ...M
-        }
-      ),
-      !l && !s && /* @__PURE__ */ m(
-        "label",
-        {
-          ref: v,
-          "aria-hidden": !0,
-          htmlFor: k,
-          className: h.visibleLabel,
-          children: t
-        }
-      ),
-      u && /* @__PURE__ */ m(
-        "div",
-        {
-          ref: _,
-          id: `${k}-helper`,
-          className: h.helperText,
-          children: u
-        }
-      ),
-      b && /* @__PURE__ */ m(
-        "div",
-        {
-          ref: O,
-          className: h.rightElement,
-          children: b
-        }
-      ),
-      n && u && /* @__PURE__ */ m(oe, { politeness: "polite", clearAnnouncementDelay: 500, children: X })
-    ] });
-  }
-);
-fe.displayName = "TextInput";
-export {
-  w as TEXT_INPUT_CLASSNAME,
-  N as TEXT_INPUT_HELPER_TEXT_CLASSNAME,
-  be as TEXT_INPUT_SIMPLE_CLASSNAME,
-  Z as TEXT_INPUT_WRAPPER_CLASSNAME,
-  fe as TextInput,
-  oe as x
-};