@purpurds/text-field 3.7.1 → 4.0.1

package/dist/text-field.d.ts

@@ -1,6 +1,6 @@
 import React, { ComponentPropsWithoutRef, HTMLInputTypeAttribute, ReactNode } from "react";
 export type TextFieldProps = ComponentPropsWithoutRef<"input"> & {
-    id: string;
+    id: string | undefined;
     ["data-testid"]?: string;
     className?: string;
     /**
@@ -48,7 +48,7 @@ export type TextFieldProps = ComponentPropsWithoutRef<"input"> & {
     valid?: boolean;
 };
 export declare const TextField: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    id: string;
+    id: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
     /**

package/dist/text-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../src/text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EAGxB,sBAAsB,EACtB,SAAS,EACV,MAAM,OAAO,CAAC;AAUf,MAAM,MAAM,cAAc,GAAG,wBAAwB,CAAC,OAAO,CAAC,GAAG;IAC/D,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;SAEK;IACL,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;SAEK;IACL,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;SAEK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CACZ,sBAAsB,EACtB,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAC5D,CAAC;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAoHF,eAAO,MAAM,SAAS;QArKhB,MAAM;;;IAGV;;;;OAIG;iBACU,SAAS;IACtB;;;;OAIG;mBACY,SAAS;IACxB;;SAEK;;IAEL;;SAEK;;IAEL;;SAEK;;IAEL;;OAEG;;IAEH;;;;OAIG;qBACc,SAAS;IAC1B;;OAEG;;IAKH;;;OAGG;;0CAsHkD,CAAC"}
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../src/text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EAGxB,sBAAsB,EACtB,SAAS,EACV,MAAM,OAAO,CAAC;AAkBf,MAAM,MAAM,cAAc,GAAG,wBAAwB,CAAC,OAAO,CAAC,GAAG;IAC/D,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;SAEK;IACL,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;SAEK;IACL,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;SAEK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CACZ,sBAAsB,EACtB,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAC5D,CAAC;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAqHF,eAAO,MAAM,SAAS;QAtKhB,MAAM,GAAG,SAAS;;;IAGtB;;;;OAIG;iBACU,SAAS;IACtB;;;;OAIG;mBACY,SAAS;IACxB;;SAEK;;IAEL;;SAEK;;IAEL;;SAEK;;IAEL;;OAEG;;IAEH;;;;OAIG;qBACc,SAAS;IAC1B;;OAEG;;IAKH;;;OAGG;;0CAuHkD,CAAC"}

package/dist/text-field.es.js

@@ -1,7 +1,7 @@
 import { jsxs as b, jsx as o } from "react/jsx-runtime";
-import { forwardRef as g, Children as f, isValidElement as $, createElement as m, cloneElement as Z, useEffect as Q, Fragment as U } from "react";
+import { forwardRef as g, Children as f, isValidElement as $, createElement as m, cloneElement as Z, useEffect as U, Fragment as W } from "react";
 import "react-dom";
-function W(e) {
+function rr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
 var z = { exports: {} };
@@ -40,8 +40,8 @@ var z = { exports: {} };
     e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
 })(z);
-var rr = z.exports;
-const er = /* @__PURE__ */ W(rr), tr = {
+var er = z.exports;
+const tr = /* @__PURE__ */ rr(er), nr = {
   "purpur-icon": "_purpur-icon_8u1lq_1",
   "purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
   "purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
@@ -49,31 +49,31 @@ const er = /* @__PURE__ */ W(rr), tr = {
   "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
   "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
   "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
-}, nr = {
+}, ir = {
   name: "error-filled",
   svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="currentColor"><path fill-rule="evenodd" d="M14.268 3.5c-.77-1.333-2.694-1.333-3.464 0l-8.66 15c-.77 1.333.192 3 1.732 3h17.32c1.54 0 2.502-1.667 1.733-3l-8.66-15Zm-.694 5.067-.247 6.876h-1.566l-.247-6.876a1.03 1.03 0 1 1 2.06 0Zm.212 8.917c0 .649-.585 1.234-1.25 1.234-.648 0-1.25-.585-1.25-1.234 0-.633.602-1.234 1.25-1.234.665 0 1.25.601 1.25 1.234Z" clip-rule="evenodd"/></svg>',
   keywords: ["error-filled"],
   category: "status"
-}, ir = er.bind(tr), q = "purpur-icon", ur = "md", ar = (e) => e.filter((i) => Object.keys(i).length >= 1).map((i) => `${i.name}="${i.value}"`).join(" "), lr = ({ content: e = "", title: i } = {}) => {
+}, ur = tr.bind(nr), E = "purpur-icon", ar = "md", lr = (e) => e.filter((i) => Object.keys(i).length >= 1).map((i) => `${i.name}="${i.value}"`).join(" "), or = ({ content: e = "", title: i } = {}) => {
   const n = [
     { name: "xmlns", value: "http://www.w3.org/2000/svg" },
     { name: "fill", value: "currentColor" },
     { name: "viewBox", value: "0 0 24 24" },
     i ? { name: "role", value: "img" } : { name: "aria-hidden", value: "true" }
   ], u = i ? `<title>${i}</title>` : "";
-  return `<svg ${ar(n)}>${u}${e}</svg>`;
-}, or = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), pr = ({
+  return `<svg ${lr(n)}>${u}${e}</svg>`;
+}, sr = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), pr = ({
   ["data-testid"]: e,
   svg: i,
   allyTitle: n,
   className: u = "",
-  size: l = ur,
+  size: l = ar,
   ...r
 }) => {
-  const t = lr({
-    content: or(i.svg),
+  const t = or({
+    content: sr(i.svg),
     title: n
-  }), a = ir(u, q, `${q}--${l}`);
+  }), a = ur(u, E, `${E}--${l}`);
   return /* @__PURE__ */ o(
     "span",
     {
@@ -85,10 +85,10 @@ const er = /* @__PURE__ */ W(rr), tr = {
     }
   );
 };
-function sr(e) {
+function dr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var R = { exports: {} };
+var L = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -123,12 +123,12 @@ var R = { exports: {} };
     }
     e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
-})(R);
-var cr = R.exports;
-const dr = /* @__PURE__ */ sr(cr), E = {
+})(L);
+var cr = L.exports;
+const _r = /* @__PURE__ */ dr(cr), P = {
   "purpur-field-error-text": "_purpur-field-error-text_1h4gy_1",
   "purpur-field-error-text__icon": "_purpur-field-error-text__icon_1h4gy_12"
-}, P = "purpur-field-error-text", _r = ({
+}, I = "purpur-field-error-text", fr = ({
   ["data-testid"]: e,
   children: i,
   className: n,
@@ -137,21 +137,21 @@ const dr = /* @__PURE__ */ sr(cr), E = {
 }) => /* @__PURE__ */ b(
   "div",
   {
-    className: dr([n, E[P]]),
+    className: _r([n, P[I]]),
     "data-testid": e,
     "aria-live": "assertive",
     "aria-relevant": u,
     ...l,
     children: [
-      /* @__PURE__ */ o(pr, { svg: nr, size: "xs", className: E[`${P}__icon`] }),
+      /* @__PURE__ */ o(pr, { svg: ir, size: "xs", className: P[`${I}__icon`] }),
       i
     ]
   }
 );
-function fr(e) {
+function mr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var L = { exports: {} };
+var T = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -186,12 +186,12 @@ var L = { exports: {} };
     }
     e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
-})(L);
-var mr = L.exports;
-const vr = /* @__PURE__ */ fr(mr), C = {
+})(T);
+var vr = T.exports;
+const gr = /* @__PURE__ */ mr(vr), C = {
   "purpur-field-helper-text": "_purpur-field-helper-text_139ly_1",
   "purpur-field-helper-text--disabled": "_purpur-field-helper-text--disabled_139ly_9"
-}, D = "purpur-field-helper-text", gr = ({
+}, D = "purpur-field-helper-text", xr = ({
   ["data-testid"]: e,
   children: i,
   className: n,
@@ -199,7 +199,7 @@ const vr = /* @__PURE__ */ fr(mr), C = {
   id: l,
   ...r
 }) => {
-  const t = vr([
+  const t = gr([
     n,
     C[D],
     {
@@ -208,10 +208,10 @@ const vr = /* @__PURE__ */ fr(mr), C = {
   ]);
   return /* @__PURE__ */ o("span", { id: l, className: t, "data-testid": e, ...r, children: i });
 };
-function xr(e) {
+function yr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var T = { exports: {} };
+var k = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -246,9 +246,9 @@ var T = { exports: {} };
     }
     e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
-})(T);
-var yr = T.exports;
-const hr = /* @__PURE__ */ xr(yr), br = {
+})(k);
+var hr = k.exports;
+const br = /* @__PURE__ */ yr(hr), $r = {
   "purpur-icon": "_purpur-icon_8u1lq_1",
   "purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
   "purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
@@ -256,31 +256,31 @@ const hr = /* @__PURE__ */ xr(yr), br = {
   "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
   "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
   "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
-}, $r = {
+}, wr = {
   name: "check-circle-filled",
   svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm4.712-12.491a.875.875 0 1 0-1.424-1.018l-4.4 6.16-2.27-2.27a.875.875 0 0 0-1.237 1.238l3 3a.875.875 0 0 0 1.331-.11l5-7Z" clip-rule="evenodd"/></svg>',
   keywords: ["check-circle-filled"],
   category: "status"
-}, wr = hr.bind(br), F = "purpur-icon", Sr = "md", Or = (e) => e.filter((i) => Object.keys(i).length >= 1).map((i) => `${i.name}="${i.value}"`).join(" "), Nr = ({ content: e = "", title: i } = {}) => {
+}, Sr = br.bind($r), F = "purpur-icon", Or = "md", Nr = (e) => e.filter((i) => Object.keys(i).length >= 1).map((i) => `${i.name}="${i.value}"`).join(" "), jr = ({ content: e = "", title: i } = {}) => {
   const n = [
     { name: "xmlns", value: "http://www.w3.org/2000/svg" },
     { name: "fill", value: "currentColor" },
     { name: "viewBox", value: "0 0 24 24" },
     i ? { name: "role", value: "img" } : { name: "aria-hidden", value: "true" }
   ], u = i ? `<title>${i}</title>` : "";
-  return `<svg ${Or(n)}>${u}${e}</svg>`;
-}, jr = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), Ar = ({
+  return `<svg ${Nr(n)}>${u}${e}</svg>`;
+}, Ar = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), Mr = ({
   ["data-testid"]: e,
   svg: i,
   allyTitle: n,
   className: u = "",
-  size: l = Sr,
+  size: l = Or,
   ...r
 }) => {
-  const t = Nr({
-    content: jr(i.svg),
+  const t = jr({
+    content: Ar(i.svg),
     title: n
-  }), a = wr(u, F, `${F}--${l}`);
+  }), a = Sr(u, F, `${F}--${l}`);
   return /* @__PURE__ */ o(
     "span",
     {
@@ -312,16 +312,16 @@ function v() {
     return e;
   }, v.apply(this, arguments);
 }
-function Mr(e, i) {
+function qr(e, i) {
   typeof e == "function" ? e(i) : e != null && (e.current = i);
 }
-function qr(...e) {
+function Er(...e) {
   return (i) => e.forEach(
-    (n) => Mr(n, i)
+    (n) => qr(n, i)
   );
 }
-const k = /* @__PURE__ */ g((e, i) => {
-  const { children: n, ...u } = e, l = f.toArray(n), r = l.find(Pr);
+const G = /* @__PURE__ */ g((e, i) => {
+  const { children: n, ...u } = e, l = f.toArray(n), r = l.find(Ir);
   if (r) {
     const t = r.props.children, a = l.map((x) => x === r ? f.count(t) > 1 ? f.only(null) : /* @__PURE__ */ $(t) ? t.props.children : null : x);
     return /* @__PURE__ */ m(A, v({}, u, {
@@ -332,18 +332,18 @@ const k = /* @__PURE__ */ g((e, i) => {
     ref: i
   }), n);
 });
-k.displayName = "Slot";
+G.displayName = "Slot";
 const A = /* @__PURE__ */ g((e, i) => {
   const { children: n, ...u } = e;
   return /* @__PURE__ */ $(n) ? /* @__PURE__ */ Z(n, {
     ...Cr(u, n.props),
-    ref: i ? qr(i, n.ref) : n.ref
+    ref: i ? Er(i, n.ref) : n.ref
   }) : f.count(n) > 1 ? f.only(null) : null;
 });
 A.displayName = "SlotClone";
-const Er = ({ children: e }) => /* @__PURE__ */ m(U, null, e);
-function Pr(e) {
-  return /* @__PURE__ */ $(e) && e.type === Er;
+const Pr = ({ children: e }) => /* @__PURE__ */ m(W, null, e);
+function Ir(e) {
+  return /* @__PURE__ */ $(e) && e.type === Pr;
 }
 function Cr(e, i) {
   const n = {
@@ -385,8 +385,8 @@ const Dr = [
   "ul"
 ], Fr = Dr.reduce((e, i) => {
   const n = /* @__PURE__ */ g((u, l) => {
-    const { asChild: r, ...t } = u, a = r ? k : i;
-    return Q(() => {
+    const { asChild: r, ...t } = u, a = r ? G : i;
+    return U(() => {
       window[Symbol.for("radix-ui")] = !0;
     }, []), /* @__PURE__ */ m(a, v({}, t, {
       ref: l
@@ -396,17 +396,17 @@ const Dr = [
     ...e,
     [i]: n
   };
-}, {}), Ir = /* @__PURE__ */ g((e, i) => /* @__PURE__ */ m(Fr.label, j({}, e, {
+}, {}), Br = /* @__PURE__ */ g((e, i) => /* @__PURE__ */ m(Fr.label, j({}, e, {
   ref: i,
   onMouseDown: (n) => {
     var u;
     (u = e.onMouseDown) === null || u === void 0 || u.call(e, n), !n.defaultPrevented && n.detail > 1 && n.preventDefault();
   }
-}))), Br = Ir;
+}))), Rr = Br;
 function Vr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var G = { exports: {} };
+var H = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -441,12 +441,12 @@ var G = { exports: {} };
     }
     e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
-})(G);
-var Zr = G.exports;
-const zr = /* @__PURE__ */ Vr(Zr), I = {
+})(H);
+var Zr = H.exports;
+const zr = /* @__PURE__ */ Vr(Zr), B = {
   "purpur-label": "_purpur-label_1jub8_1",
   "purpur-label--disabled": "_purpur-label--disabled_1jub8_9"
-}, B = "purpur-label", Rr = ({
+}, R = "purpur-label", Lr = ({
   children: e,
   className: i,
   htmlFor: n,
@@ -456,15 +456,15 @@ const zr = /* @__PURE__ */ Vr(Zr), I = {
 }) => {
   const t = zr([
     i,
-    I[B],
-    { [I[`${B}--disabled`]]: l }
+    B[R],
+    { [B[`${R}--disabled`]]: l }
   ]);
-  return /* @__PURE__ */ o(Br, { className: t, "data-testid": u, htmlFor: n, ...r, children: e });
+  return /* @__PURE__ */ o(Rr, { className: t, "data-testid": u, htmlFor: n, ...r, children: e });
 };
-function Lr(e) {
+function Tr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var H = { exports: {} };
+var X = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -499,36 +499,36 @@ var H = { exports: {} };
     }
     e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
-})(H);
-var Tr = H.exports;
-const V = /* @__PURE__ */ Lr(Tr), kr = "_rotate_7s2g1_1", Gr = "_dash_7s2g1_1", y = {
+})(X);
+var kr = X.exports;
+const V = /* @__PURE__ */ Tr(kr), Gr = "_rotate_7s2g1_1", Hr = "_dash_7s2g1_1", y = {
   "purpur-spinner": "_purpur-spinner_7s2g1_1",
-  rotate: kr,
+  rotate: Gr,
   "purpur-spinner--xxs": "_purpur-spinner--xxs_7s2g1_4",
   "purpur-spinner--xs": "_purpur-spinner--xs_7s2g1_8",
   "purpur-spinner--sm": "_purpur-spinner--sm_7s2g1_12",
   "purpur-spinner--md": "_purpur-spinner--md_7s2g1_16",
   "purpur-spinner--lg": "_purpur-spinner--lg_7s2g1_20",
   "purpur-spinner__circle": "_purpur-spinner__circle_7s2g1_24",
-  dash: Gr,
+  dash: Hr,
   "purpur-spinner__circle--disabled": "_purpur-spinner__circle--disabled_7s2g1_33",
   "purpur-spinner__circle--negative": "_purpur-spinner__circle--negative_7s2g1_36",
   "purpur-spinner__circle--negative-disabled": "_purpur-spinner__circle--negative-disabled_7s2g1_39"
-}, h = "purpur-spinner", Hr = {
+}, h = "purpur-spinner", Xr = {
   PRIMARY: "primary",
   DISABLED: "disabled",
   NEGATIVE: "negative",
   NEGATIVE_DISABLED: "negative-disabled"
-}, Xr = {
+}, Yr = {
   XXS: "xxs",
   XS: "xs",
   SM: "sm",
   MD: "md",
   LG: "lg"
-}, Yr = ({
+}, Jr = ({
   ["data-testid"]: e,
-  size: i = Xr.SM,
-  variant: n = Hr.PRIMARY,
+  size: i = Yr.SM,
+  variant: n = Xr.PRIMARY,
   ...u
 }) => /* @__PURE__ */ o(
   "div",
@@ -550,10 +550,10 @@ const V = /* @__PURE__ */ Lr(Tr), kr = "_rotate_7s2g1_1", Gr = "_dash_7s2g1_1",
     ) })
   }
 );
-function Jr(e) {
+function Kr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var X = { exports: {} };
+var Y = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -588,9 +588,9 @@ var X = { exports: {} };
     }
     e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
-})(X);
-var Kr = X.exports;
-const N = /* @__PURE__ */ Jr(Kr), p = {
+})(Y);
+var Qr = Y.exports;
+const N = /* @__PURE__ */ Kr(Qr), s = {
   "purpur-text-field": "_purpur-text-field_182p7_1",
   "purpur-text-field__label": "_purpur-text-field__label_182p7_7",
   "purpur-text-field__label-text": "_purpur-text-field__label-text_182p7_13",
@@ -606,7 +606,11 @@ const N = /* @__PURE__ */ Jr(Kr), p = {
   "purpur-text-field__input--error": "_purpur-text-field__input--error_182p7_88",
   "purpur-text-field__adornment-container": "_purpur-text-field__adornment-container_182p7_97",
   "purpur-text-field__valid-icon": "_purpur-text-field__valid-icon_182p7_102"
-}, s = "purpur-text-field", Qr = ({
+};
+function Ur(e) {
+  return typeof e > "u" ? Math.random().toString(36).substring(2, 10) : e;
+}
+const p = "purpur-text-field", Wr = ({
   ["data-testid"]: e,
   className: i,
   afterField: n,
@@ -616,93 +620,93 @@ const N = /* @__PURE__ */ Jr(Kr), p = {
   label: t,
   loading: a = !1,
   startAdornment: x,
-  valid: Y = !1,
-  ...c
-}, J) => {
-  const d = (_) => e ? `${e}-${_}` : void 0, M = Y && !l, w = r ? `${c.id}-helper-text` : void 0, S = [x].filter((_) => !!_), O = [
+  valid: J = !1,
+  ...d
+}, K) => {
+  const M = Ur(d.id), c = (_) => e ? `${e}-${_}` : void 0, q = J && !l, w = r ? `${M}-helper-text` : void 0, S = [x].filter((_) => !!_), O = [
     a && /* @__PURE__ */ o(
-      Yr,
+      Jr,
       {
-        variant: c.disabled ? "disabled" : "primary",
+        variant: d.disabled ? "disabled" : "primary",
         size: "xs",
-        "data-testid": d("spinner")
+        "data-testid": c("spinner")
       }
     ),
-    M && /* @__PURE__ */ o(
-      Ar,
+    q && /* @__PURE__ */ o(
+      Mr,
       {
-        "data-testid": d("valid-icon"),
-        className: p[`${s}__valid-icon`],
-        svg: $r,
+        "data-testid": c("valid-icon"),
+        className: s[`${p}__valid-icon`],
+        svg: wr,
         size: "md"
       }
     ),
     u
-  ].filter((_) => !!_), K = N([
-    p[`${s}__input-container`],
+  ].filter((_) => !!_), Q = N([
+    s[`${p}__input-container`],
     {
-      [p[`${s}__input-container--start-adornment`]]: S.length,
-      [p[`${s}__input-container--end-adornment`]]: O.length,
-      [p[`${s}__input-container--disabled`]]: c.disabled,
-      [p[`${s}__input-container--readonly`]]: c.readOnly && !c.disabled
+      [s[`${p}__input-container--start-adornment`]]: S.length,
+      [s[`${p}__input-container--end-adornment`]]: O.length,
+      [s[`${p}__input-container--disabled`]]: d.disabled,
+      [s[`${p}__input-container--readonly`]]: d.readOnly && !d.disabled
     }
   ]);
-  return /* @__PURE__ */ b("div", { className: N(i, p[s]), children: [
+  return /* @__PURE__ */ b("div", { className: N(i, s[p]), children: [
     t && /* @__PURE__ */ o(
-      Rr,
+      Lr,
       {
-        htmlFor: c.id,
-        className: p[`${s}__label`],
-        "data-testid": d("label"),
-        disabled: c.disabled,
-        children: `${c.required ? "* " : ""}${t}`
+        htmlFor: M,
+        className: s[`${p}__label`],
+        "data-testid": c("label"),
+        disabled: d.disabled,
+        children: `${d.required ? "* " : ""}${t}`
       }
     ),
-    /* @__PURE__ */ b("div", { className: p[`${s}__field-row`], children: [
-      /* @__PURE__ */ b("div", { className: K, children: [
+    /* @__PURE__ */ b("div", { className: s[`${p}__field-row`], children: [
+      /* @__PURE__ */ b("div", { className: Q, children: [
         !!S.length && /* @__PURE__ */ o(
           "div",
           {
-            "data-testid": d("start-adornments"),
-            className: p[`${s}__adornment-container`],
+            "data-testid": c("start-adornments"),
+            className: s[`${p}__adornment-container`],
             children: S
           }
         ),
         /* @__PURE__ */ o(
           "input",
           {
-            ...c,
-            ref: J,
-            "data-testid": d("input"),
-            "aria-describedby": c["aria-describedby"] || w,
-            "aria-invalid": c["aria-invalid"] || !!l,
+            ...d,
+            ref: K,
+            "data-testid": c("input"),
+            "aria-describedby": d["aria-describedby"] || w,
+            "aria-invalid": d["aria-invalid"] || !!l,
             className: N([
-              p[`${s}__input`],
+              s[`${p}__input`],
               {
-                [p[`${s}__input--valid`]]: M,
-                [p[`${s}__input--error`]]: !!l
+                [s[`${p}__input--valid`]]: q,
+                [s[`${p}__input--error`]]: !!l
               }
             ])
           }
         ),
-        /* @__PURE__ */ o("div", { className: p[`${s}__frame`] }),
+        /* @__PURE__ */ o("div", { className: s[`${p}__frame`] }),
         !!O.length && /* @__PURE__ */ o(
           "div",
           {
-            "data-testid": d("end-adornments"),
-            className: p[`${s}__adornment-container`],
+            "data-testid": c("end-adornments"),
+            className: s[`${p}__adornment-container`],
             children: O
           }
         )
       ] }),
       !!n && n
     ] }),
-    w && /* @__PURE__ */ o(gr, { "data-testid": d("helper-text"), id: w, children: r }),
-    l && /* @__PURE__ */ o(_r, { "data-testid": d("error-text"), children: l })
+    w && /* @__PURE__ */ o(xr, { "data-testid": c("helper-text"), id: w, children: r }),
+    l && /* @__PURE__ */ o(fr, { "data-testid": c("error-text"), children: l })
   ] });
-}, Ur = g(Qr);
-Ur.displayName = "TextField";
+}, re = g(Wr);
+re.displayName = "TextField";
 export {
-  Ur as TextField
+  re as TextField
 };
 //# sourceMappingURL=text-field.es.js.map