@tcn/ui 0.1.1 → 0.2.0

package/README.md

@@ -1,11 +1,46 @@
 # @tcn/ui
 
+A comprehensive React component library providing a complete set of UI components for building modern web applications.
 
+## Overview
+
+`@tcn/ui` is the main UI component package in the Blackcat design system. It provides a unified API with organized sub-exports for different component categories.
+
+## Usage
+
+Import components from the main package or use sub-exports for better tree-shaking:
+
+```tsx
+// Use sub-exports for better tree-shaking
+import { Button } from '@tcn/ui/actions';
+import { Input } from '@tcn/ui/inputs';
+import { VStack } from '@tcn/ui/stacks';
+```
+
+## Available Sub-exports
+
+- **`@tcn/ui/actions`** - Buttons, button groups, and action elements
+- **`@tcn/ui/inputs`** - Text inputs, selects, date pickers, checkboxes, switches, and more
+- **`@tcn/ui/form`** - Form fields, field sets, and form components
+- **`@tcn/ui/layouts`** - Grid, columns, lists, headers, footers, and page structure
+- **`@tcn/ui/stacks`** - Horizontal, vertical, and z-stack components
+- **`@tcn/ui/overlay`** - Modals, tooltips, popovers, menus, and portals
+- **`@tcn/ui/feedback`** - Loading indicators and progress bars
+- **`@tcn/ui/surfaces`** - Cards, panels, drawers, modals, and windows
+- **`@tcn/ui/typography`** - Text components, headings, and typography utilities
+- **`@tcn/ui/tokens`** - Badges, bubbles, and chips
+- **`@tcn/ui/themes`** - Theme system and preconfigured themes
+- **`@tcn/ui/utils`** - Utility functions, hooks, and helpers
+- **`@tcn/ui/dnd`** - Drag and drop utilities
 
 ## Scripts
 
-- build: `pnpm ws ui build`
-- storybook: `pnpm ws ui storybook`
-- test: `pnpm ws ui test`
+- **build**: `pnpm ws ui build` - Build the package
+- **storybook**: `pnpm ws ui start` - Start Storybook development server
+- **test**: `pnpm ws ui test` - Run tests
+- **check-all**: `pnpm ws ui check-all` - Run all checks (types, lint, format)
+
+## Development
 
+Each component category is organized in its own directory under `src/` with its own index file for clean sub-exports. The package uses Vite for building and Storybook for component documentation.
 

package/dist/draggable.css

@@ -0,0 +1 @@
+._draggable_db40376{position:relative}._draggable_db40376[data-is-draggable=true]{left:var(--position-x);top:var(--position-y)}

package/dist/feedback/progress/progress_bar.js

@@ -7,7 +7,7 @@ import "../../caption.module-DDq0H4xZ.js";
 import "../../footnote.module-DEyFuqOr.js";
 import "../../headline.module-BiwHBtGf.js";
 import "../../subheadline.module-C-v7zMkQ.js";
-import "../../title.module-B16de2jd.js";
+import "../../typography/title/title.js";
 import { HStack as l } from "../../stacks/h_stack.js";
 import { Spacer as a } from "../../stacks/spacer.js";
 import { VStack as d } from "../../stacks/v_stack.js";

package/dist/form/field/common/field_description.js

@@ -6,7 +6,7 @@ import "../../../caption.module-DDq0H4xZ.js";
 import "../../../footnote.module-DEyFuqOr.js";
 import "../../../headline.module-BiwHBtGf.js";
 import "../../../subheadline.module-C-v7zMkQ.js";
-import "../../../title.module-B16de2jd.js";
+import "../../../typography/title/title.js";
 const y = ({ children: r, id: t }) => r ? typeof r == "string" ? /* @__PURE__ */ o(
   i,
   {

package/dist/form/field/common/field_error.js

@@ -6,7 +6,7 @@ import "../../../caption.module-DDq0H4xZ.js";
 import "../../../footnote.module-DEyFuqOr.js";
 import "../../../headline.module-BiwHBtGf.js";
 import "../../../subheadline.module-C-v7zMkQ.js";
-import "../../../title.module-B16de2jd.js";
+import "../../../typography/title/title.js";
 import { theme as i } from "../../../themes/theme_variables.js";
 import "react";
 import "../../../themes/stylesheets/reset.js";

package/dist/form/field/common/field_label.js

@@ -6,7 +6,7 @@ import "../../../caption.module-DDq0H4xZ.js";
 import "../../../footnote.module-DEyFuqOr.js";
 import "../../../headline.module-BiwHBtGf.js";
 import "../../../subheadline.module-C-v7zMkQ.js";
-import "../../../title.module-B16de2jd.js";
+import "../../../typography/title/title.js";
 const x = ({ children: r, id: e, required: i }) => r ? typeof r == "string" ? /* @__PURE__ */ o(
   t,
   {

package/dist/inputs/date_picker/date_picker_date.js

@@ -7,7 +7,7 @@ import "../../caption.module-DDq0H4xZ.js";
 import "../../footnote.module-DEyFuqOr.js";
 import "../../headline.module-BiwHBtGf.js";
 import "../../subheadline.module-C-v7zMkQ.js";
-import "../../title.module-B16de2jd.js";
+import "../../typography/title/title.js";
 import { ZStack as M } from "../../stacks/z_stack.js";
 import '../../date_picker_date.css';const B = "_date-picker-date_38d540e", _ = "_date-picker-today_af9d1ab", k = { "date-picker-date": B, "date-picker-today": _ };
 function C({ presenter: i, date: t }) {

package/dist/inputs/date_picker/date_picker_day.js

@@ -6,7 +6,7 @@ import "../../caption.module-DDq0H4xZ.js";
 import "../../footnote.module-DEyFuqOr.js";
 import { Headline as m } from "../../typography/headline/headline.js";
 import "../../subheadline.module-C-v7zMkQ.js";
-import "../../title.module-B16de2jd.js";
+import "../../typography/title/title.js";
 import { ZStack as p } from "../../stacks/z_stack.js";
 import { useMemo as s } from "react";
 import '../../date_picker_day.css';const c = "_date-picker-day_2945845", r = { "date-picker-day": c };

package/dist/inputs/date_picker/date_picker_time_selector.js

@@ -14,7 +14,7 @@ import "../../caption.module-DDq0H4xZ.js";
 import "../../footnote.module-DEyFuqOr.js";
 import "../../headline.module-BiwHBtGf.js";
 import "../../subheadline.module-C-v7zMkQ.js";
-import "../../title.module-B16de2jd.js";
+import "../../typography/title/title.js";
 import { ClockIcon as j } from "@tcn/icons/clock_icon.js";
 import '../../date_picker_time_selector.css';const z = "_time-box_f3145be", P = "_time-box-title_6cc801b", Z = "_time-box-title-container_22add52", v = "_selected-time_33e3aa3", s = { "time-box": z, "time-box-title": P, "time-box-title-container": Z, "selected-time": v };
 function it({

package/dist/inputs/date_picker/date_picker_year_selector.js

@@ -19,7 +19,7 @@ import "../../caption.module-DDq0H4xZ.js";
 import "../../footnote.module-DEyFuqOr.js";
 import { Headline as M } from "../../typography/headline/headline.js";
 import "../../subheadline.module-C-v7zMkQ.js";
-import "../../title.module-B16de2jd.js";
+import "../../typography/title/title.js";
 import { FocusRedirect as T } from "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
 import "../../utils/scroll_away_listener.js";

package/dist/inputs/phone_number_input/phone_number_input.d.ts

@@ -3,6 +3,8 @@ import { default as React } from 'react';
 import { OptionProps } from '../options/option.js';
 export interface PhoneNumberInputProps extends Omit<HStackProps, 'onChange' | 'children'> {
     value?: string;
+    name?: string;
+    autoComplete?: string;
     defaultCountry?: string;
     /**
      * Callback fired when the phone number value changes.

package/dist/inputs/phone_number_input/phone_number_input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"phone_number_input.d.ts","sourceRoot":"","sources":["../../../src/inputs/phone_number_input/phone_number_input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,KAQN,MAAM,OAAO,CAAC;AAUf,OAAO,EAAU,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAiG3D,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChD,mBAAmB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;CAChF;AAED,eAAO,MAAM,gBAAgB,2FAkR3B,CAAC"}
+{"version":3,"file":"phone_number_input.d.ts","sourceRoot":"","sources":["../../../src/inputs/phone_number_input/phone_number_input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,KAQN,MAAM,OAAO,CAAC;AAUf,OAAO,EAAU,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAiG3D,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChD,mBAAmB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;CAChF;AAED,eAAO,MAAM,gBAAgB,2FAwR3B,CAAC"}

package/dist/inputs/phone_number_input/phone_number_input.js

@@ -1,62 +1,62 @@
-import { jsxs as J, jsx as i, Fragment as ae } from "react/jsx-runtime";
-import { HStack as K } from "../../stacks/h_stack.js";
-import { clsx as h } from "clsx";
-import ie, { useRef as Q, useState as l, useMemo as X, Children as le, isValidElement as me, useLayoutEffect as w, useCallback as fe } from "react";
+import { jsxs as Q, jsx as i, Fragment as le } from "react/jsx-runtime";
+import { HStack as X } from "../../stacks/h_stack.js";
+import { clsx as d } from "clsx";
+import me, { useRef as Y, useState as m, useMemo as Z, Children as fe, isValidElement as he, useLayoutEffect as A, useCallback as be } from "react";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
-import { SlimButton as he } from "../../actions/button/slim_button/slim_button.js";
+import { SlimButton as de } from "../../actions/button/slim_button/slim_button.js";
 import "../../actions/button/button/button.js";
 import "../../actions/button/select_group/select_group.js";
 import "../../actions/button/select_group/single_select_group.js";
-import { Select as be } from "../select/select.js";
-import { MaskInput as Y } from "../mask_input/mask_input.js";
-import { countriesPhoneInformation as v } from "./countries_phone_information.js";
-import { NotebookIcon as de } from "@tcn/icons/notebook_icon.js";
-import { Option as A } from "../options/option.js";
-import { SuggestionList as ke } from "../suggestions/suggestion_list.js";
-import { stripNonNumericAfterCountryCode as P } from "./utils.js";
+import { Select as ke } from "../select/select.js";
+import { MaskInput as ee } from "../mask_input/mask_input.js";
+import { countriesPhoneInformation as $ } from "./countries_phone_information.js";
+import { NotebookIcon as Ie } from "@tcn/icons/notebook_icon.js";
+import { Option as F } from "../options/option.js";
+import { SuggestionList as Ne } from "../suggestions/suggestion_list.js";
+import { stripNonNumericAfterCountryCode as S } from "./utils.js";
 import "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
 import "../../utils/scroll_away_listener.js";
-import { useForkRef as Ie } from "../../utils/hooks/use_fork_ref.js";
+import { useForkRef as ye } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import '../../phone_number_input.css';const Ne = "_phone-number-input_5c4483d", ye = "_phone-number-input-select_a7b33ac", xe = "_phone-number-input-input_5b14556", ge = "_phone-number-input-phone-book-popover_1511f35", Pe = "_phone-number-input-phone-book_7999ca1", Se = "_phone-number-input-obfuscated_5a0ed8c", m = { "phone-number-input": Ne, "phone-number-input-select": ye, "phone-number-input-input": xe, "phone-number-input-phone-book-popover": ge, "phone-number-input-phone-book": Pe, "phone-number-input-obfuscated": Se }, _e = "•";
-function Be(o) {
+import '../../phone_number_input.css';const xe = "_phone-number-input_5c4483d", ge = "_phone-number-input-select_a7b33ac", Pe = "_phone-number-input-input_5b14556", Se = "_phone-number-input-phone-book-popover_1511f35", _e = "_phone-number-input-phone-book_7999ca1", Be = "_phone-number-input-obfuscated_5a0ed8c", f = { "phone-number-input": xe, "phone-number-input-select": ge, "phone-number-input-input": Pe, "phone-number-input-phone-book-popover": Se, "phone-number-input-phone-book": _e, "phone-number-input-obfuscated": Be }, Oe = "•";
+function Ve(o) {
   return o.map((n) => ({
     ...n,
-    placeholder: n.mask.replace(/[9a*]/g, _e)
+    placeholder: n.mask.replace(/[9a*]/g, Oe)
   }));
 }
-const F = v.map((o) => ({
+const v = $.map((o) => ({
   name: o.name,
   selectedLabel: o.prefix,
   optionLabel: `${o.prefix} (${o.code}) ${o.unicodeFlag}`,
   value: o.code,
   keywords: o.keywords
 }));
-F.sort((o, n) => parseInt(o.value) - parseInt(n.value));
-const _ = /* @__PURE__ */ new Map(), b = /* @__PURE__ */ new Map();
-v.forEach((o) => {
-  b.set(o.code, o), _.has(o.prefix) ? _.get(o.prefix)?.push(o) : _.set(o.prefix, [o]);
+v.sort((o, n) => parseInt(o.value) - parseInt(n.value));
+const B = /* @__PURE__ */ new Map(), k = /* @__PURE__ */ new Map();
+$.forEach((o) => {
+  k.set(o.code, o), B.has(o.prefix) ? B.get(o.prefix)?.push(o) : B.set(o.prefix, [o]);
 });
-function Oe(o) {
+function Me(o) {
   if (o != null) {
     const n = {};
-    return o.forEach((t) => {
-      n[t] = !0;
-    }), F.filter((t) => !!n[t.value]).map((t) => /* @__PURE__ */ i(
-      A,
+    return o.forEach((r) => {
+      n[r] = !0;
+    }), v.filter((r) => !!n[r.value]).map((r) => /* @__PURE__ */ i(
+      F,
       {
-        value: t.value,
-        label: t.selectedLabel,
-        keywords: t.keywords,
-        children: t.optionLabel
+        value: r.value,
+        label: r.selectedLabel,
+        keywords: r.keywords,
+        children: r.optionLabel
       },
-      t.value
+      r.value
     ));
   } else
-    return F.map((n) => /* @__PURE__ */ i(
-      A,
+    return v.map((n) => /* @__PURE__ */ i(
+      F,
       {
         value: n.value,
         label: n.selectedLabel,
@@ -66,141 +66,145 @@ function Oe(o) {
       n.value
     ));
 }
-function S(o, n, t) {
-  for (let u = 5; u > 1; u--) {
-    const B = o.slice(0, u), d = _.get(B);
-    if (d != null) {
-      const c = d.find(
-        (k) => k.code === n
+function _(o, n, r) {
+  for (let h = 5; h > 1; h--) {
+    const c = o.slice(0, h), u = B.get(c);
+    if (u != null) {
+      const I = u.find(
+        (O) => O.code === n
       );
-      return c ?? d[0];
+      return I ?? u[0];
     }
   }
-  return b.get(t.toUpperCase()) || b.get("US");
+  return k.get(r.toUpperCase()) || k.get("US");
 }
-const Qe = ie.forwardRef(function({
+const Ye = me.forwardRef(function({
   value: n = "",
-  defaultCountry: t = "US",
+  name: r,
+  autoComplete: h,
+  defaultCountry: c = "US",
   onChange: u,
-  countrySelectRef: B,
-  phoneNumberInputRef: d,
-  disabled: c = !1,
-  allowedCountryCodes: k,
-  children: $,
-  ...Z
-}, ee) {
-  const I = Q(n), [U, O] = l(
+  countrySelectRef: I,
+  phoneNumberInputRef: O,
+  disabled: l = !1,
+  allowedCountryCodes: U,
+  children: T,
+  ...oe
+}, ne) {
+  const N = Y(n), [j, V] = m(
     null
-  ), T = U != null, [f, V] = l(t), j = S(
+  ), z = j != null, [b, M] = m(c), H = _(
     n,
-    f,
-    t
-  ), [N, y] = l(() => {
-    const e = n.split(j.prefix)[1];
-    return e == null ? "" : P(e);
-  }), z = X(() => le.toArray($).filter(
-    (e) => me(e) && e.type === A
-  ), [$]), C = z.length > 0, [M, x] = l(j.code), [H, g] = l([
-    ...v[0].masks
-  ]), [a, R] = l(!1), [D, W] = l(!1), E = Q(null), q = Ie(d, E), oe = X(() => Oe(k), [k]);
-  function ne(e) {
-    const r = b.get(e);
-    if (r == null || (x(r.code), g([...r.masks]), V(r.code), N == null))
+    b,
+    c
+  ), [y, x] = m(() => {
+    const e = n.split(H.prefix)[1];
+    return e == null ? "" : S(e);
+  }), D = Z(() => fe.toArray(T).filter(
+    (e) => he(e) && e.type === F
+  ), [T]), R = D.length > 0, [C, g] = m(H.code), [W, P] = m([
+    ...$[0].masks
+  ]), [a, E] = m(!1), [q, G] = m(!1), L = Y(null), J = ye(O, L), te = Z(() => Me(U), [U]);
+  function re(e) {
+    const t = k.get(e);
+    if (t == null || (g(t.code), P([...t.masks]), M(t.code), y == null))
       return;
-    const p = `${r.prefix}${P(N)}`;
-    I.current = p, u && u(p, !1);
+    const p = `${t.prefix}${S(y)}`;
+    N.current = p, u && u(p, !1);
   }
-  w(() => {
-    const e = S(
+  A(() => {
+    const e = _(
       n,
-      f,
-      t
+      b,
+      c
     );
-    x(e.code), g([...e.masks]), V(e.code);
-  }, [n, f, t]);
-  function te(e) {
-    const r = b.get(M)?.prefix, p = P(e), s = r + p;
-    a && R(!1), I.current = s, N !== e && y(e), u && u(s, !1);
+    g(e.code), P([...e.masks]), M(e.code);
+  }, [n, b, c]);
+  function ue(e) {
+    const t = k.get(C)?.prefix, p = S(e), s = t + p;
+    a && E(!1), N.current = s, y !== e && x(e), u && u(s, !1);
   }
-  function re(e) {
-    O(T ? null : e.currentTarget);
+  function se(e) {
+    V(z ? null : e.currentTarget);
   }
-  function G() {
-    O(null);
+  function K() {
+    V(null);
   }
-  function ue(e, r, p, s) {
-    R(s), L(e, s), G();
+  function pe(e, t, p, s) {
+    E(s), w(e, s), K();
   }
-  function se(e) {
+  function ce(e) {
     if (e.startsWith("+")) {
-      const r = S(
+      const t = _(
         e,
-        f,
-        t
+        b,
+        c
       );
-      x(r.code), g([...r.masks]);
-      const p = e.split(r.prefix)[1];
-      return y(p), p;
+      g(t.code), P([...t.masks]);
+      const p = e.split(t.prefix)[1];
+      return x(p), p;
     }
     return e;
   }
-  function pe(e) {
-    W(!0), R(!1), y(e);
-    const r = b.get(M)?.prefix, p = P(e), s = r + p;
-    I.current = s, u && u(s, !1);
+  function ae(e) {
+    G(!0), E(!1), x(e);
+    const t = k.get(C)?.prefix, p = S(e), s = t + p;
+    N.current = s, u && u(s, !1);
   }
-  const L = fe(
-    (e, r = !1) => {
-      const p = I.current, s = S(
+  const w = be(
+    (e, t = !1) => {
+      const p = N.current, s = _(
         e,
-        f,
-        t
-      ), ce = e.split(s.prefix)[1];
-      x(s.code), g([...s.masks]), V(s.code), p !== e && (y(ce), u && u(e, r));
+        b,
+        c
+      ), ie = e.split(s.prefix)[1];
+      g(s.code), P([...s.masks]), M(s.code), p !== e && (x(ie), u && u(e, t));
     },
-    [t, f, u]
+    [c, b, u]
   );
-  return w(() => {
-    L(n);
-  }, [n, L]), w(() => {
-    D && !a && E.current && (E.current.focus(), W(!1));
-  }, [D, a]), /* @__PURE__ */ J(
-    K,
+  return A(() => {
+    w(n);
+  }, [n, w]), A(() => {
+    q && !a && L.current && (L.current.focus(), G(!1));
+  }, [q, a]), /* @__PURE__ */ Q(
+    X,
     {
-      ref: ee,
-      className: h(m["phone-number-input"], "phone-number-input"),
+      ref: ne,
+      className: d(f["phone-number-input"], "phone-number-input"),
       height: "auto",
-      ...Z,
+      ...oe,
       children: [
         /* @__PURE__ */ i(
-          be,
+          ke,
           {
-            className: h(m["phone-number-input-select"], "phone-number-input-select"),
-            ref: B,
+            className: d(f["phone-number-input-select"], "phone-number-input-select"),
+            ref: I,
             width: "auto",
-            value: a ? "" : M,
-            onChange: ne,
-            disabled: c || a,
-            "data-is-disabled": c || a,
+            value: a ? "" : C,
+            onChange: re,
+            disabled: l || a,
+            "data-is-disabled": l || a,
             "data-is-obfuscated": a,
             placeholder: a ? "––" : void 0,
-            children: oe
+            children: te
           }
         ),
-        /* @__PURE__ */ i(K, { width: "flex", className: h(m["phone-number-input-container"]), children: a ? /* @__PURE__ */ i(
-          Y,
+        /* @__PURE__ */ i(X, { width: "flex", className: d(f["phone-number-input-container"]), children: a ? /* @__PURE__ */ i(
+          ee,
           {
-            ref: q,
+            name: r,
+            autoComplete: h,
+            ref: J,
             value: "",
-            mask: Be(H),
-            onChange: pe,
-            disabled: c,
-            "data-is-disabled": c,
-            "data-has-phone-book": C,
+            mask: Ve(W),
+            onChange: ae,
+            disabled: l,
+            "data-is-disabled": l,
+            "data-has-phone-book": R,
             "data-is-obfuscated": !0,
-            className: h(
-              m["phone-number-input"],
-              m["phone-number-input-obfuscated"],
+            className: d(
+              f["phone-number-input"],
+              f["phone-number-input-obfuscated"],
               "phone-number-input"
             ),
             preparePasteValue: () => "",
@@ -209,43 +213,45 @@ const Qe = ie.forwardRef(function({
           },
           "obfuscated"
         ) : /* @__PURE__ */ i(
-          Y,
+          ee,
           {
-            ref: q,
-            value: N,
-            mask: H,
-            onChange: te,
-            disabled: c,
-            "data-is-disabled": c,
-            "data-has-phone-book": C,
+            name: r,
+            autoComplete: h,
+            ref: J,
+            value: y,
+            mask: W,
+            onChange: ue,
+            disabled: l,
+            "data-is-disabled": l,
+            "data-has-phone-book": R,
             "data-is-obfuscated": !1,
-            className: h(m["phone-number-input"], "phone-number-input"),
-            preparePasteValue: se
+            className: d(f["phone-number-input"], "phone-number-input"),
+            preparePasteValue: ce
           },
           "normal"
         ) }),
-        C && /* @__PURE__ */ J(ae, { children: [
+        R && /* @__PURE__ */ Q(le, { children: [
           /* @__PURE__ */ i(
-            he,
+            de,
             {
-              disabled: c,
-              className: h(
-                m["phone-number-input-phone-book"],
+              disabled: l,
+              className: d(
+                f["phone-number-input-phone-book"],
                 "phone-number-input-phone-book"
               ),
-              onClick: re,
+              onClick: se,
               size: "md",
-              children: /* @__PURE__ */ i(de, { size: "md" })
+              children: /* @__PURE__ */ i(Ie, { size: "md" })
             }
           ),
-          T && /* @__PURE__ */ i(
-            ke,
+          z && /* @__PURE__ */ i(
+            Ne,
             {
-              anchorElement: U,
-              onOptionSelect: ue,
-              onClose: G,
+              anchorElement: j,
+              onOptionSelect: pe,
+              onClose: K,
               noSuggestionMessage: "No phone numbers found",
-              children: z
+              children: D
             }
           )
         ] })
@@ -254,6 +260,6 @@ const Qe = ie.forwardRef(function({
   );
 });
 export {
-  Qe as PhoneNumberInput
+  Ye as PhoneNumberInput
 };
 //# sourceMappingURL=phone_number_input.js.map