asma-ui-core 3.109.0 → 3.111.0

package/dist/components/inputs/input-field/StyledInputField.js

@@ -1,231 +1,268 @@
-import { cn as r } from "../../../helpers/cn.js";
-import { resolveSx as P } from "../../../helpers/sx.js";
-import { CloseIcon as tt } from "../../icons/close-icon/CloseIcon.js";
-import { HelperRow as nt } from "../../../helpers/HelperRow.js";
-import { useHelperRowBudget as ot } from "../../../helpers/useHelperRowBudget.js";
-import { useHelperSlot as it } from "../../../helpers/useHelperSlot.js";
-import { floatingLabelClass as st, floatingLabelLayoutStyle as lt, notchedLegendClass as rt, notchedOutlineClass as ne, singleLineInputLayoutStyle as at, singleLineShellLayoutStyle as dt } from "../field-styles.js";
-import g from "./StyledInputField.module.js";
-import { Children as ct, useCallback as oe, useId as ut, useLayoutEffect as A, useRef as z, useState as $ } from "react";
-import { jsx as s, jsxs as S } from "react/jsx-runtime";
-import { useMergeRefs as ie } from "@floating-ui/react";
-var Tt = ({ dataTest: x, label: a, value: b, defaultValue: v, onChange: se, onBlur: le, onFocus: re, error: m, helperText: j, reserveHelperText: ae, expandHelperText: de = !0, disabled: c, readOnly: t, required: N, allowClear: ce, onClear: ue, type: pe = "text", placeholder: me, name: he, id: fe, autoComplete: ge, autoFocus: xe, multiline: o, rows: L, minRows: C, maxRows: w, size: be = "medium", fullWidth: W, className: ye, style: Se, sx: ve, inputRef: Le, slotProps: n, InputProps: K, onKeyDown: U, onClick: He, variant: pt }) => {
-  const Ie = ut(), F = fe ?? Ie, V = `${F}-helper-text`, _ = z(null), M = z(0), Y = z(null), [Re, Ae] = $(void 0), [H, G] = $(!1), [Ne, J] = $(v != null && v !== ""), B = b !== void 0, Q = B ? b !== "" && b != null : Ne, Ce = !!c || !!t, k = n?.input?.startAdornment ?? K?.startAdornment, y = ct.count(k) > 0, u = y && Array.isArray(k), h = n?.input?.endAdornment ?? K?.endAdornment, I = !!(ce && Q && !Ce), { ref: we, ...l } = n?.htmlInput ?? {}, Fe = Le ?? we, { className: _e, style: E, ref: Me } = n?.input ?? {}, Be = ie([Me]), ke = n?.input?.onMouseDown, X = n?.input?.onClick, Ee = X ? { onClick: X } : {}, Te = ge ?? l.autoComplete, De = he ?? l.name, R = H || Q || y, p = oe(() => {
-    const e = _.current;
-    if (!(!o || !e) && (M.current = e.offsetWidth, M.current !== 0)) {
-      if (e.removeAttribute("data-scrollable"), L != null && !t) e.style.height = "";
+import { cn as l } from "../../../helpers/cn.js";
+import { resolveSx as v } from "../../../helpers/sx.js";
+import { CloseIcon as pt } from "../../icons/close-icon/CloseIcon.js";
+import { CharacterCounter as gt } from "../../../helpers/CharacterCounter.js";
+import { HelperRow as re } from "../../../helpers/HelperRow.js";
+import { useHelperRowBudget as ft } from "../../../helpers/useHelperRowBudget.js";
+import { useHelperSlot as xt } from "../../../helpers/useHelperSlot.js";
+import { fieldLabelAboveClass as bt, fieldWidthStyle as yt, floatingLabelClass as Lt, floatingLabelLayoutStyle as St, notchedLegendClass as vt, notchedOutlineClass as de, singleLineInputLayoutStyle as Ht, singleLineShellLayoutStyle as It } from "../field-styles.js";
+import b from "./StyledInputField.module.js";
+import { Children as Nt, useCallback as ce, useId as At, useLayoutEffect as B, useRef as G, useState as M } from "react";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { useMergeRefs as he } from "@floating-ui/react";
+var Ot = ({ dataTest: y, label: r, labelPlacement: me = "above", value: g, defaultValue: L, onChange: ue, onBlur: pe, onFocus: ge, error: h, helperText: E, reserveHelperText: fe, expandHelperText: xe = !0, maxLength: be, counter: ye, locale: Le, disabled: d, readOnly: n, required: H, allowClear: Se, onClear: ve, type: He = "text", placeholder: Ie, name: Ne, id: Ae, autoComplete: Ce, autoFocus: Re, multiline: i, rows: I, minRows: k, maxRows: T, size: we = "medium", width: J = "full", fullWidth: Ct, className: Fe, style: _e, sx: Be, inputRef: Me, slotProps: t, InputProps: Q, onKeyDown: V, onClick: Ee, variant: Rt }) => {
+  const ke = At(), D = Ae ?? ke, W = `${D}-helper-text`, $ = G(null), j = G(0), X = G(null), [Te, De] = M(void 0), [N, Z] = M(!1), [We, q] = M(L != null && L !== ""), [$e, je] = M(String(L ?? "").length), A = g !== void 0, O = A ? g !== "" && g != null : We, ze = !!d || !!n, z = t?.input?.startAdornment ?? Q?.startAdornment, S = Nt.count(z) > 0, m = S && Array.isArray(z), f = t?.input?.endAdornment ?? Q?.endAdornment, C = !!(Se && O && !ze), { ref: Ue, ...a } = t?.htmlInput ?? {}, Ke = Me ?? Ue, { className: Pe, style: U, ref: Ye } = t?.input ?? {}, Ge = he([Ye]), Je = t?.input?.onMouseDown, ee = t?.input?.onClick, Qe = ee ? { onClick: ee } : {}, Ve = Ce ?? a.autoComplete, Xe = Ne ?? a.name, K = a.id ?? D, R = be ?? a.maxLength, te = `${D}-counter`, P = !!(ye && R && !n), Ze = A ? String(g ?? "").length : $e, w = me === "floating" && !!r, F = N || O || S, u = ce(() => {
+    const e = $.current;
+    if (!(!i || !e) && (j.current = e.offsetWidth, j.current !== 0)) {
+      if (e.removeAttribute("data-scrollable"), I != null && !n) e.style.height = "";
       else {
         if (e.style.height = "auto", e.scrollHeight === 0) {
           e.style.height = "";
           return;
         }
-        const i = getComputedStyle(e), d = Number.parseFloat(i.lineHeight) || 24, ee = Number.parseFloat(i.paddingTop) + Number.parseFloat(i.paddingBottom), te = L ?? C, Oe = te ? te * d + ee : 0, et = t || !w ? Number.POSITIVE_INFINITY : w * d + ee;
-        e.style.height = `${Math.min(et, Math.max(Oe, e.scrollHeight))}px`;
+        const s = getComputedStyle(e), c = Number.parseFloat(s.lineHeight) || 24, ae = Number.parseFloat(s.paddingTop) + Number.parseFloat(s.paddingBottom), se = I ?? k, mt = se ? se * c + ae : 0, ut = n || !T ? Number.POSITIVE_INFINITY : T * c + ae;
+        e.style.height = `${Math.min(ut, Math.max(mt, e.scrollHeight))}px`;
       }
       e.scrollHeight > e.clientHeight + 1 && e.setAttribute("data-scrollable", "true");
     }
   }, [
-    w,
-    C,
-    o,
-    t,
-    L
-  ]), Pe = (e) => {
-    t || (B || (J(e.target.value !== ""), p()), se?.(e));
-  }, ze = (e) => {
-    !c && !t && G(!0), re?.(e);
-  }, $e = (e) => {
-    !c && !t && G(!1), le?.(e);
+    T,
+    k,
+    i,
+    n,
+    I
+  ]), qe = (e) => {
+    n || (A || (q(e.target.value !== ""), je(e.target.value.length), u()), ue?.(e));
+  }, Oe = (e) => {
+    !d && !n && Z(!0), ge?.(e);
+  }, et = (e) => {
+    !d && !n && Z(!1), pe?.(e);
   };
-  A(() => {
-    p();
+  B(() => {
+    u();
   }, [
-    p,
-    v,
-    b
-  ]), A(() => {
-    if (!o || !document.fonts) return;
-    const e = () => p();
+    u,
+    L,
+    g
+  ]), B(() => {
+    if (!i || !document.fonts) return;
+    const e = () => u();
     return document.fonts.addEventListener("loadingdone", e), () => document.fonts.removeEventListener("loadingdone", e);
-  }, [o, p]), A(() => {
-    const e = _.current;
-    if (!o || !e || typeof ResizeObserver > "u") return;
-    let i = 0;
-    const d = new ResizeObserver(() => {
-      e.offsetWidth !== M.current && (cancelAnimationFrame(i), i = requestAnimationFrame(p));
+  }, [i, u]), B(() => {
+    const e = $.current;
+    if (!i || !e || typeof ResizeObserver > "u") return;
+    let s = 0;
+    const c = new ResizeObserver(() => {
+      e.offsetWidth !== j.current && (cancelAnimationFrame(s), s = requestAnimationFrame(u));
     });
-    return d.observe(e), () => {
-      cancelAnimationFrame(i), d.disconnect();
+    return c.observe(e), () => {
+      cancelAnimationFrame(s), c.disconnect();
     };
-  }, [o, p]);
-  const Z = ie([Fe, oe((e) => {
-    _.current = e instanceof HTMLTextAreaElement ? e : null;
-  }, [])]), { style: T, ...je } = l, f = !o && !u, { height: mt, minHeight: ht, maxHeight: ft, paddingTop: gt, paddingBottom: xt, ...We } = E ?? {}, Ke = f ? {
-    ...We,
-    ...dt()
-  } : u ? {
+  }, [i, u]);
+  const ne = he([Ke, ce((e) => {
+    $.current = e instanceof HTMLTextAreaElement ? e : null;
+  }, [])]), { style: Y, ...tt } = a, x = !i && !m, { height: wt, minHeight: Ft, maxHeight: _t, paddingTop: Bt, paddingBottom: Mt, ...nt } = U ?? {}, ot = x ? {
+    ...nt,
+    ...It()
+  } : m ? {
     boxSizing: "border-box",
     minHeight: 40,
-    ...E
-  } : E, { height: bt, minHeight: yt, maxHeight: St, paddingTop: vt, paddingBottom: Lt, paddingLeft: Ht, paddingRight: Ue, ...Ve } = T ?? {}, Ye = f ? {
-    ...Ve,
-    ...at({
-      paddingLeft: y ? 40 : 14,
-      paddingRight: Ue ?? Re ?? (I || h ? 40 : 14)
+    ...U
+  } : U, { height: Et, minHeight: kt, maxHeight: Tt, paddingTop: Dt, paddingBottom: Wt, paddingLeft: $t, paddingRight: it, ...lt } = Y ?? {}, at = x ? {
+    ...lt,
+    ...Ht({
+      paddingLeft: S ? 40 : 14,
+      paddingRight: it ?? Te ?? (C || f ? 40 : 14)
     })
-  } : T;
-  A(() => {
-    if (!f) return;
-    const e = Y.current, i = e ? Math.ceil(e.getBoundingClientRect().width) + 20 : void 0;
-    Ae((d) => d === i ? d : i);
+  } : Y;
+  B(() => {
+    if (!x) return;
+    const e = X.current, s = e ? Math.ceil(e.getBoundingClientRect().width) + 20 : void 0;
+    De((c) => c === s ? c : s);
   }, [
-    f,
-    I,
-    h
+    x,
+    C,
+    f
   ]);
-  const Ge = R || !a, { show: D, role: Je } = it("StyledInputField", m, j, ae, t), { fieldRef: Qe, rowRef: Xe, rowStyle: Ze } = ot(de && D), q = {
-    ...je,
-    style: f ? Ye : T,
-    id: l.id ?? F,
-    name: De,
-    placeholder: Ge ? me : void 0,
-    disabled: c,
-    readOnly: t,
-    required: N,
-    autoComplete: Te,
-    autoFocus: xe,
-    value: b,
-    defaultValue: v,
-    "aria-invalid": m ? !0 : void 0,
-    "aria-label": l["aria-label"] ?? (l["aria-labelledby"] ? void 0 : typeof a == "string" && a !== "" ? a : void 0),
-    "aria-describedby": D ? V : l["aria-describedby"],
-    onChange: Pe,
-    onFocus: ze,
-    onBlur: $e,
-    onKeyDown: l.onKeyDown || U ? (e) => {
-      U?.(e), e.defaultPrevented || l.onKeyDown?.(e);
+  const st = F || !w, { show: _, role: oe } = xt("StyledInputField", h, E, fe, n), { fieldRef: rt, rowRef: dt, rowStyle: ct } = ft(xe && _ && !P), ie = {
+    ...tt,
+    style: x ? at : Y,
+    id: K,
+    name: Xe,
+    maxLength: R,
+    placeholder: st ? Ie : void 0,
+    disabled: d,
+    readOnly: n,
+    required: H,
+    autoComplete: Ve,
+    autoFocus: Re,
+    value: g,
+    defaultValue: L,
+    "aria-invalid": h ? !0 : void 0,
+    "aria-label": a["aria-label"] ?? (a["aria-labelledby"] ? void 0 : typeof r == "string" && r !== "" ? r : void 0),
+    "aria-describedby": [_ ? W : a["aria-describedby"], P ? te : void 0].filter(Boolean).join(" ") || void 0,
+    onChange: qe,
+    onFocus: Oe,
+    onBlur: et,
+    onKeyDown: a.onKeyDown || V ? (e) => {
+      V?.(e), e.defaultPrevented || a.onKeyDown?.(e);
     } : void 0
-  }, O = r(g.Input, "peer border-0 bg-transparent text-base tracking-[0.00938em] text-delta-800 outline-none placeholder:text-delta-500", u ? "box-border h-8 min-w-[60px] flex-1 py-0 pl-0 pr-0 leading-[23px]" : o ? r("w-full resize-none p-0 pl-0 pr-0 leading-[23px]", g["Input--multiline"]) : r("w-full", g["Input--singleLine"]), "disabled:text-delta-300", t && "text-delta-800", _e), qe = !o && !u ? {
-    "data-start-adornment": y ? "true" : void 0,
-    "data-end-adornment": I || h ? "true" : void 0
+  }, le = l(b.Input, "peer border-0 bg-transparent text-base tracking-[0.00938em] text-delta-800 outline-none placeholder:text-delta-500", m ? "box-border h-8 min-w-[60px] flex-1 py-0 pl-0 pr-0 leading-[23px]" : i ? l("w-full resize-none p-0 pl-0 pr-0 leading-[23px]", b["Input--multiline"]) : l("w-full", b["Input--singleLine"]), "disabled:text-delta-300", n && "text-delta-800", Pe), ht = !i && !m ? {
+    "data-start-adornment": S ? "true" : void 0,
+    "data-end-adornment": C || f ? "true" : void 0
   } : {};
-  return /* @__PURE__ */ S("div", {
-    ref: Qe,
-    className: r("group relative min-w-0 flex-col", ye),
-    onClick: He,
+  return /* @__PURE__ */ p("div", {
+    ref: rt,
+    className: l("group relative min-w-0 flex-col", Fe),
+    onClick: Ee,
+    "data-field-width": J,
     style: {
-      display: W ? "flex" : "inline-flex",
-      width: W ? "100%" : 235,
+      display: "flex",
+      ...yt(J),
       fontFamily: "Roboto, Helvetica, Arial, sans-serif",
       letterSpacing: "0.00938em",
-      ...P(ve),
-      ...Se
+      ...v(Be),
+      ..._e
     },
-    children: [/* @__PURE__ */ S("div", {
-      className: "relative overflow-visible",
-      children: [/* @__PURE__ */ S("div", {
-        className: r("relative flex", f && g.InputShell, o && "box-border items-center px-[14px] py-[16.5px]", u && r(g.AdornmentList, h && g["AdornmentList--endAdornment"]), t && "rounded bg-delta-50"),
-        ref: Be,
-        onMouseDown: ke,
-        ...Ee,
-        style: Ke,
-        "data-testid": u ? `${x}-adornment-list` : `${x}-shell`,
-        children: [
-          y && /* @__PURE__ */ s("span", {
-            className: r("items-center text-delta-500", u ? "contents" : "absolute left-3 flex"),
-            children: k
-          }),
-          o ? /* @__PURE__ */ s("textarea", {
-            ...q,
-            ref: Z,
-            "data-testid": x,
-            rows: L ?? C ?? 2,
-            className: O
-          }) : /* @__PURE__ */ s("input", {
-            ...q,
-            ...qe,
-            ref: Z,
-            "data-testid": x,
-            type: pe,
-            className: O
-          }),
-          I ? /* @__PURE__ */ s("button", {
-            type: "button",
-            tabIndex: -1,
-            "aria-label": "Clear",
-            "data-testid": `${x}-clear`,
-            className: "asma-pressable absolute right-4 z-40 flex items-center justify-center rounded-full border-0 bg-transparent p-[2px] duration-300 hover:bg-gama-100",
-            onClick: (e) => {
-              e.stopPropagation(), e.preventDefault(), B || J(!1), ue?.();
-            },
-            children: /* @__PURE__ */ s(tt, {
-              width: 18,
-              height: 18
-            })
-          }) : h && /* @__PURE__ */ s("span", {
-            ref: Y,
-            className: "absolute inset-y-0 right-[14px] flex max-w-[calc(100%-28px)] items-center gap-1",
-            children: h
-          }),
-          a ? /* @__PURE__ */ s("fieldset", {
-            "aria-hidden": !0,
-            className: ne({
-              focused: H,
-              error: m,
-              disabled: c,
-              readOnly: t,
-              notched: !0
+    children: [
+      r && !w && /* @__PURE__ */ o("div", {
+        className: l(bt({ disabled: d }), t?.inputLabel?.className),
+        style: {
+          ...v(t?.inputLabel?.sx),
+          ...t?.inputLabel?.style
+        },
+        children: /* @__PURE__ */ p("label", {
+          htmlFor: K,
+          children: [r, H && /* @__PURE__ */ o("span", {
+            "aria-hidden": "true",
+            children: " *"
+          })]
+        })
+      }),
+      /* @__PURE__ */ p("div", {
+        className: "relative overflow-visible",
+        children: [/* @__PURE__ */ p("div", {
+          className: l("relative flex", x && b.InputShell, i && "box-border items-center px-[14px] py-[16.5px]", m && l(b.AdornmentList, f && b["AdornmentList--endAdornment"]), n && "rounded bg-delta-50"),
+          ref: Ge,
+          onMouseDown: Je,
+          ...Qe,
+          style: ot,
+          "data-testid": m ? `${y}-adornment-list` : `${y}-shell`,
+          children: [
+            S && /* @__PURE__ */ o("span", {
+              className: l("items-center text-delta-500", m ? "contents" : "absolute left-3 flex"),
+              children: z
+            }),
+            i ? /* @__PURE__ */ o("textarea", {
+              ...ie,
+              ref: ne,
+              "data-testid": y,
+              rows: I ?? k ?? 2,
+              className: le
+            }) : /* @__PURE__ */ o("input", {
+              ...ie,
+              ...ht,
+              ref: ne,
+              "data-testid": y,
+              type: He,
+              className: le
             }),
-            children: /* @__PURE__ */ s("legend", {
-              className: rt(R),
-              children: /* @__PURE__ */ S("span", {
-                className: "inline-block px-[5px]",
-                children: [a, N && " *"]
+            C ? /* @__PURE__ */ o("button", {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": "Clear",
+              "data-testid": `${y}-clear`,
+              className: "asma-pressable absolute right-4 z-40 flex items-center justify-center rounded-full border-0 bg-transparent p-[2px] duration-300 hover:bg-gama-100",
+              onClick: (e) => {
+                e.stopPropagation(), e.preventDefault(), A || q(!1), ve?.();
+              },
+              children: /* @__PURE__ */ o(pt, {
+                width: 18,
+                height: 18
+              })
+            }) : f && /* @__PURE__ */ o("span", {
+              ref: X,
+              className: "absolute inset-y-0 right-[14px] flex max-w-[calc(100%-28px)] items-center gap-1",
+              children: f
+            }),
+            w ? /* @__PURE__ */ o("fieldset", {
+              "aria-hidden": !0,
+              className: de({
+                focused: N,
+                error: h,
+                disabled: d,
+                readOnly: n,
+                notched: !0
+              }),
+              children: /* @__PURE__ */ o("legend", {
+                className: vt(F),
+                children: /* @__PURE__ */ p("span", {
+                  className: "inline-block px-[5px]",
+                  children: [r, H && " *"]
+                })
+              })
+            }) : /* @__PURE__ */ o("div", {
+              "aria-hidden": !0,
+              className: de({
+                focused: N,
+                error: h,
+                disabled: d,
+                readOnly: n,
+                notched: !1
               })
             })
-          }) : /* @__PURE__ */ s("div", {
-            "aria-hidden": !0,
-            className: ne({
-              focused: H,
-              error: m,
-              disabled: c,
-              readOnly: t,
-              notched: !1
-            })
-          })
-        ]
-      }), a && /* @__PURE__ */ S("label", {
-        htmlFor: F,
-        className: r(st({
-          shrink: R,
-          focused: H,
-          error: m,
-          disabled: c,
-          readOnly: t,
-          size: be
-        }), n?.inputLabel?.className),
+          ]
+        }), w && /* @__PURE__ */ p("label", {
+          htmlFor: K,
+          className: l(Lt({
+            shrink: F,
+            focused: N,
+            error: h,
+            disabled: d,
+            readOnly: n,
+            size: we
+          }), t?.inputLabel?.className),
+          style: {
+            ...v(t?.inputLabel?.sx),
+            ...t?.inputLabel?.style,
+            ...St(F)
+          },
+          children: [r, H && " *"]
+        })]
+      }),
+      P && R ? /* @__PURE__ */ p("div", {
+        className: "flex items-start justify-between gap-4",
+        children: [_ && /* @__PURE__ */ o(re, {
+          id: W,
+          role: oe,
+          error: h,
+          message: E,
+          hideErrorIcon: t?.formHelperText?.hideErrorIcon,
+          className: l("box-border min-w-0 flex-1 items-start", t?.formHelperText?.className),
+          style: v(t?.formHelperText?.sx)
+        }), /* @__PURE__ */ o(gt, {
+          id: te,
+          length: Ze,
+          limit: R,
+          locale: Le,
+          className: "ml-auto shrink-0 whitespace-nowrap pt-1"
+        })]
+      }) : _ && /* @__PURE__ */ o(re, {
+        ref: dt,
+        id: W,
+        role: oe,
+        error: h,
+        message: E,
+        hideErrorIcon: t?.formHelperText?.hideErrorIcon,
+        className: l("mr-[14px] box-border items-start", t?.formHelperText?.className),
         style: {
-          ...P(n?.inputLabel?.sx),
-          ...n?.inputLabel?.style,
-          ...lt(R)
-        },
-        children: [a, N && " *"]
-      })]
-    }), D && /* @__PURE__ */ s(nt, {
-      ref: Xe,
-      id: V,
-      role: Je,
-      error: m,
-      message: j,
-      hideErrorIcon: n?.formHelperText?.hideErrorIcon,
-      className: r("mr-[14px] box-border items-start", n?.formHelperText?.className),
-      style: {
-        ...Ze,
-        ...P(n?.formHelperText?.sx)
-      }
-    })]
+          ...ct,
+          ...v(t?.formHelperText?.sx)
+        }
+      })
+    ]
   });
 };
 export {
-  Tt as StyledInputField
+  Ot as StyledInputField
 };

package/dist/components/inputs/phone-field/StyledPhoneField.js

@@ -1,28 +1,31 @@
-import { cn as L } from "../../../helpers/cn.js";
-import { StyledInputField as M } from "../input-field/StyledInputField.js";
-import { StyledLink as V } from "../../navigation/link/StyledLink.js";
-import { CountryCodeSelect as W } from "./CountryCodeSelect.js";
-import { useId as z } from "react";
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
-var E = (e) => e.replace(/\D/g, ""), U = ({ dataTest: e, label: l, countries: h, country: n, onCountryChange: x, value: s, onChange: f, onBlur: v, error: y, helperText: N, reserveHelperText: b = !0, disabled: i, readOnly: g, readOnlyText: m, readOnlyHref: c, required: p, placeholder: $, formatNationalNumber: I, renderFlag: C, selectCountryLabel: S, searchPlaceholder: F, id: j, name: P, size: k = "medium", fieldClassName: u, helperTextClassName: w, className: A }) => {
-  const B = z(), a = j ?? `${B}-phone`, o = `${a}-label`, r = I?.(s, n) ?? s;
+import { cn as D } from "../../../helpers/cn.js";
+import { fieldLabelAboveClass as M } from "../field-styles.js";
+import { StyledInputField as V } from "../input-field/StyledInputField.js";
+import { StyledLink as z } from "../../navigation/link/StyledLink.js";
+import { CountryCodeSelect as E } from "./CountryCodeSelect.js";
+import { useId as G } from "react";
+import { jsx as l, jsxs as d } from "react/jsx-runtime";
+var H = (e) => e.replace(/\D/g, ""), Y = ({ dataTest: e, label: t, countries: h, country: i, onCountryChange: f, value: n, onChange: v, onBlur: x, error: y, helperText: N, reserveHelperText: g = !0, disabled: s, readOnly: $, readOnlyText: m, readOnlyHref: c, required: p, placeholder: b, formatNationalNumber: I, renderFlag: C, selectCountryLabel: S, searchPlaceholder: F, id: j, name: A, size: L = "medium", fieldClassName: u, helperTextClassName: P, className: k }) => {
+  const w = G(), o = j ?? `${w}-phone`, a = `${o}-label`, r = I?.(n, i) ?? n;
   return /* @__PURE__ */ d("div", {
-    className: L("flex flex-col", A),
+    className: D("flex flex-col", k),
     "data-testid": `${e}-root`,
-    children: [l != null && /* @__PURE__ */ d("label", {
-      id: o,
-      htmlFor: a,
-      className: "pb-1 text-base font-semibold text-delta-800",
-      children: [l, p === !0 && /* @__PURE__ */ t("span", {
-        "aria-hidden": "true",
-        children: " *"
-      })]
-    }), g === !0 ? /* @__PURE__ */ t("span", {
+    children: [t != null && /* @__PURE__ */ l("div", {
+      className: M(),
+      children: /* @__PURE__ */ d("label", {
+        id: a,
+        htmlFor: o,
+        children: [t, p === !0 && /* @__PURE__ */ l("span", {
+          "aria-hidden": "true",
+          children: " *"
+        })]
+      })
+    }), $ === !0 ? /* @__PURE__ */ l("span", {
       className: "py-2 text-base text-delta-800",
-      children: c === void 0 ? /* @__PURE__ */ t("span", {
+      children: c === void 0 ? /* @__PURE__ */ l("span", {
         "data-testid": `${e}-readonly`,
         children: m ?? r
-      }) : /* @__PURE__ */ t(V, {
+      }) : /* @__PURE__ */ l(z, {
         dataTest: `${e}-readonly`,
         href: c,
         className: "-ml-1",
@@ -30,46 +33,45 @@ var E = (e) => e.replace(/\D/g, ""), U = ({ dataTest: e, label: l, countries: h,
       })
     }) : /* @__PURE__ */ d("div", {
       className: "flex items-start gap-2.5",
-      children: [/* @__PURE__ */ t(W, {
+      children: [/* @__PURE__ */ l(E, {
         dataTest: `${e}-country`,
         countries: h,
-        value: n,
-        onChange: x,
-        disabled: i,
+        value: i,
+        onChange: f,
+        disabled: s,
         selectCountryLabel: S,
         searchPlaceholder: F,
         renderFlag: C,
-        labelledBy: l == null ? void 0 : o,
+        labelledBy: t == null ? void 0 : a,
         className: u
-      }), /* @__PURE__ */ t(M, {
+      }), /* @__PURE__ */ l(V, {
         dataTest: `${e}-number`,
-        className: "max-w-[200px]",
-        id: a,
-        name: P,
+        width: "s",
+        id: o,
+        name: A,
         value: r,
-        onChange: (D) => f(E(D.target.value)),
-        onBlur: v,
-        placeholder: $,
+        onChange: (B) => v(H(B.target.value)),
+        onBlur: x,
+        placeholder: b,
         error: y,
-        disabled: i,
+        disabled: s,
         required: p,
-        fullWidth: !0,
         helperText: N,
-        reserveHelperText: b,
-        size: k,
+        reserveHelperText: g,
+        size: L,
         slotProps: {
           htmlInput: {
             inputMode: "tel",
             autoComplete: "tel",
-            "aria-labelledby": l == null ? void 0 : o
+            "aria-labelledby": t == null ? void 0 : a
           },
           input: { className: u },
-          formHelperText: { className: w }
+          formHelperText: { className: P }
         }
       })]
     })]
   });
 };
 export {
-  U as StyledPhoneField
+  Y as StyledPhoneField
 };