@opengovsg/oui 0.0.45 → 0.0.46

package/dist/esm/phone-number-field/index.js

@@ -0,0 +1,3 @@
+"use strict";
+export { CountrySelect, FlagComponent, PhoneInput, PhoneNumberField } from './phone-number-field.js';
+export { formatPhoneNumber, formatPhoneNumberIntl, isPossiblePhoneNumber, isValidPhoneNumber, parsePhoneNumber } from 'react-phone-number-input';

package/dist/esm/phone-number-field/phone-number-field.js

@@ -0,0 +1,294 @@
+"use strict";
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useState, useRef, useCallback } from 'react';
+import { TextField, Provider } from 'react-aria-components';
+import BasePhoneInput, { getCountryCallingCode } from 'react-phone-number-input';
+import flags from 'react-phone-number-input/flags';
+import NonInternationalBasePhoneInput from 'react-phone-number-input/input';
+import { phoneNumberFieldStyles, cn } from '@opengovsg/oui-theme';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
+import { useControllableState } from '../hooks/use-controllable-state.js';
+import { Input } from '../input/input.js';
+import { Select } from '../select/select.js';
+import { SelectItem } from '../select/select-item.js';
+import { useLocalizedStringFormatter } from '../system/l10n.js';
+import { mapPropsVariants } from '../system/utils.js';
+import { MOBILE_EXAMPLES } from './constants.js';
+import { PhoneInputContext, usePhoneInputContext } from './context.js';
+import { i18nStrings } from './i18n.js';
+
+const PhoneInput = ({
+  onClear,
+  onKeyDown,
+  ...props
+}) => {
+  const {
+    placeholderMode,
+    examples,
+    selectedCountry,
+    styles,
+    size,
+    classNames,
+    stringFormatter
+  } = usePhoneInputContext();
+  const inputPlaceholder = useMemo(() => {
+    const defaultPlaceholder = stringFormatter.format("Enter a phone number");
+    if (placeholderMode === "off") {
+      return props.placeholder ?? defaultPlaceholder;
+    }
+    const exampleNumber = selectedCountry && examples[selectedCountry];
+    if (placeholderMode === "aggressive") {
+      return exampleNumber ?? props.placeholder ?? defaultPlaceholder;
+    }
+    return props.placeholder ?? exampleNumber ?? defaultPlaceholder;
+  }, [
+    props.placeholder,
+    stringFormatter,
+    placeholderMode,
+    examples,
+    selectedCountry
+  ]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.metaKey && event.key === "Backspace") {
+        event.preventDefault();
+        onClear?.();
+      } else {
+        onKeyDown?.(event);
+      }
+    },
+    [onClear, onKeyDown]
+  );
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      variant: "unstyled",
+      placeholder: inputPlaceholder,
+      type: "tel",
+      autoComplete: "tel",
+      size,
+      ...props,
+      onKeyDown: handleKeyDown,
+      className: styles.input({
+        className: cn(classNames?.input, props.className)
+      })
+    }
+  );
+};
+const PhoneNumberField = (originalProps) => {
+  const [
+    {
+      placeholderMode = "polite",
+      examples = MOBILE_EXAMPLES,
+      label,
+      description,
+      errorMessage,
+      classNames,
+      isInvalid,
+      ...props
+    },
+    { variant = "international", ...variantProps }
+  ] = mapPropsVariants(originalProps, phoneNumberFieldStyles.variantKeys);
+  const stringFormatter = useLocalizedStringFormatter(i18nStrings);
+  const defaultCountry = useMemo(
+    () => props.defaultCountry ?? "SG",
+    [props.defaultCountry]
+  );
+  const [selectedCountry, setSelectedCountry] = useState(
+    defaultCountry
+  );
+  const [value, setValue] = useControllableState({
+    defaultValue: props.defaultValue,
+    value: props.value,
+    onChange: props.onChange
+  });
+  const triggerRef = useRef(null);
+  const { size = "md", isDisabled } = variantProps;
+  const styles = phoneNumberFieldStyles({
+    ...variantProps,
+    variant,
+    isDisabled,
+    size
+  });
+  return /* @__PURE__ */ jsxs(
+    TextField,
+    {
+      isDisabled,
+      className: styles.base({
+        className: classNames?.base
+      }),
+      isInvalid,
+      children: [
+        label && /* @__PURE__ */ jsx(Label, { size, className: classNames?.label, children: label }),
+        /* @__PURE__ */ jsx(
+          Provider,
+          {
+            values: [
+              [
+                PhoneInputContext,
+                {
+                  triggerRef,
+                  placeholderMode,
+                  examples,
+                  selectedCountry,
+                  classNames,
+                  styles,
+                  variant,
+                  ...variantProps,
+                  size,
+                  stringFormatter
+                }
+              ]
+            ],
+            children: /* @__PURE__ */ jsx(
+              FieldGroup,
+              {
+                isInvalid,
+                isDisabled,
+                "data-variant": variant,
+                ref: triggerRef,
+                className: styles.group({
+                  className: classNames?.group
+                }),
+                children: variant === "international" ? /* @__PURE__ */ jsx(
+                  BasePhoneInput,
+                  {
+                    disabled: isDisabled,
+                    className: styles.wrapper({
+                      className: classNames?.wrapper
+                    }),
+                    international: false,
+                    addInternationalOption: false,
+                    defaultCountry: selectedCountry,
+                    countryOptionsOrder: [defaultCountry],
+                    onCountryChange: setSelectedCountry,
+                    countrySelectComponent: CountrySelect,
+                    inputComponent: PhoneInput,
+                    onClear: () => setValue(void 0),
+                    ...props,
+                    value,
+                    onChange: (v) => setValue(v)
+                  }
+                ) : /* @__PURE__ */ jsxs("div", { className: styles.wrapper({ className: classNames?.wrapper }), children: [
+                  /* @__PURE__ */ jsx(
+                    NonInternationalBasePhoneInput,
+                    {
+                      country: defaultCountry,
+                      onClear: () => setValue(void 0),
+                      ...props,
+                      inputComponent: PhoneInput,
+                      value,
+                      onChange: setValue
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    FlagComponent,
+                    {
+                      className: styles.flag({ className: classNames?.flag }),
+                      country: defaultCountry,
+                      countryName: stringFormatter.format(defaultCountry)
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        ),
+        description && /* @__PURE__ */ jsx(Description, { size, className: classNames?.description, children: description }),
+        /* @__PURE__ */ jsx(FieldError, { size, className: classNames?.error, children: errorMessage })
+      ]
+    }
+  );
+};
+function CountrySelect(props) {
+  const { options, value, onChange, onBlur, onFocus } = props;
+  const { triggerRef, classNames, styles, size, isDisabled, stringFormatter } = usePhoneInputContext();
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      size,
+      popoverProps: {
+        // Position popover relative to the wrapping div instead of the Button
+        triggerRef
+      },
+      classNames: {
+        base: styles.select({ className: classNames?.select }),
+        trigger: styles.selectTrigger({
+          className: classNames?.selectTrigger
+        }),
+        icon: styles.selectIcon({ className: classNames?.selectIcon }),
+        // Apply same styles as trigger for consistent sizing
+        list: styles.selectList({ className: classNames?.selectList }),
+        popover: styles.selectPopover({ className: classNames?.selectPopover })
+      },
+      enableSearch: true,
+      variant: "unstyled",
+      isDisabled,
+      value,
+      onChange: (v) => onChange(v),
+      items: options,
+      renderSelectValue: () => /* @__PURE__ */ jsx(
+        FlagComponent,
+        {
+          className: styles.flag({ className: classNames?.flag }),
+          country: value,
+          countryName: value && stringFormatter.format(value)
+        }
+      ),
+      onBlur,
+      onFocus,
+      children: (country) => {
+        const l10nLabel = country.value ? stringFormatter.format(country.value) : "";
+        return /* @__PURE__ */ jsxs(
+          SelectItem,
+          {
+            classNames: {
+              text: styles.selectItem({ className: classNames?.selectItem })
+            },
+            textValue: `${l10nLabel} ${country.label}`,
+            id: country.value,
+            children: [
+              /* @__PURE__ */ jsx(
+                FlagComponent,
+                {
+                  className: styles.flag({ className: classNames?.flag }),
+                  country: country.value,
+                  countryName: l10nLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: styles.selectItemLabel({
+                    className: classNames?.selectItemLabel
+                  }),
+                  children: l10nLabel
+                }
+              ),
+              country.value && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: styles.selectItemCountryCode({
+                    className: classNames?.selectItemCountryCode
+                  }),
+                  children: `+${getCountryCallingCode(country.value)}`
+                }
+              )
+            ]
+          }
+        );
+      }
+    }
+  );
+}
+const FlagComponent = ({
+  country,
+  countryName,
+  className
+}) => {
+  const Flag = country && flags[country];
+  return /* @__PURE__ */ jsx("span", { className, children: Flag && /* @__PURE__ */ jsx(Flag, { title: countryName }) });
+};
+
+export { CountrySelect, FlagComponent, PhoneInput, PhoneNumberField };

package/dist/esm/phone-number-field/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/esm/range-calendar/range-calendar.js

@@ -6,12 +6,12 @@ import { CalendarDate, today, getLocalTimeZone, getDayOfWeek } from '@internatio
 import { RangeCalendar as RangeCalendar$1, Provider, CalendarGrid, CalendarGridBody, Text, RangeCalendarStateContext, useLocale, CalendarCell } from 'react-aria-components';
 import { useDeepCompareMemo } from 'use-deep-compare';
 import { calendarStyles, composeRenderProps, cn, dataAttr } from '@opengovsg/oui-theme';
+import { CalendarStyleContext, useCalendarStyleContext } from '../calendar/calendar-style-context.js';
 import { AgnosticCalendarStateContext } from '../calendar/agnostic-calendar-state-context.js';
 import { CalendarBottomContent } from '../calendar/calendar-bottom-content.js';
 import { CalendarGridHeader } from '../calendar/calendar-grid-header.js';
 import { CalendarHeader } from '../calendar/calendar-header.js';
 import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
-import { CalendarStyleContext, useCalendarStyleContext } from '../calendar/calendar-style-context.js';
 
 const RangeCalendar = forwardRefGeneric(function RangeCalendar2(originalProps, ref) {
   const [props, variantProps] = mapPropsVariants(

package/dist/esm/search-field/search-field.js

@@ -3,13 +3,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useLocalizedStringFormatter } from 'react-aria';
 import { SearchField as SearchField$1 } from 'react-aria-components';
 import { searchFieldStyles, composeRenderProps } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Input } from '../input/input.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { i18nStrings } from './i18n.js';
 import Search from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/search.js';
 import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
-import { Button } from '../button/button.js';
 
 function SearchField(originalProps) {
   const [

package/dist/esm/select/i18n.js

@@ -0,0 +1,21 @@
+"use strict";
+const i18nStrings = {
+  "en-SG": {
+    "Search...": "Search...",
+    "Search options": "Search options"
+  },
+  "zh-SG": {
+    "Search...": "\u641C\u7D22...",
+    "Search options": "\u641C\u7D22\u9009\u9879"
+  },
+  "ms-SG": {
+    "Search...": "Cari...",
+    "Search options": "Cari pilihan"
+  },
+  "ta-SG": {
+    "Search...": "\u0BA4\u0BC7\u0B9F\u0BC1...",
+    "Search options": "\u0BA4\u0BC7\u0B9F\u0BB2\u0BCD \u0BB5\u0BBF\u0BB0\u0BC1\u0BAA\u0BCD\u0BAA\u0B99\u0BCD\u0B95\u0BB3\u0BCD"
+  }
+};
+
+export { i18nStrings };

package/dist/esm/select/select.js

@@ -5,31 +5,15 @@ import { useMemo, isValidElement, cloneElement } from 'react';
 import { useLocalizedStringFormatter } from 'react-aria';
 import { useFilter, Virtualizer, ListLayout, ListBox, Provider, Select as Select$1, SelectValue, Autocomplete, SearchField, Input } from 'react-aria-components';
 import { selectStyles, cn, composeRenderProps } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
+import { Label, Description, FieldError } from '../field/field.js';
 import { Popover } from '../popover/popover.js';
+import { useElementWidth } from '../system/react-utils/sizing.js';
 import { mapPropsVariants } from '../system/utils.js';
+import { i18nStrings } from './i18n.js';
 import { SelectVariantContext } from './select-variant-context.js';
-import { Label, Description, FieldError } from '../field/field.js';
 import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
-import { Button } from '../button/button.js';
 
-const i18nStrings = {
-  "en-SG": {
-    searchPlaceholder: "Search...",
-    searchAriaLabel: "Search options"
-  },
-  "zh-SG": {
-    searchPlaceholder: "\u641C\u7D22...",
-    searchAriaLabel: "\u641C\u7D22\u9009\u9879"
-  },
-  "ms-SG": {
-    searchPlaceholder: "Cari...",
-    searchAriaLabel: "Cari pilihan"
-  },
-  "ta-SG": {
-    searchPlaceholder: "\u0BA4\u0BC7\u0B9F\u0BC1...",
-    searchAriaLabel: "\u0BA4\u0BC7\u0B9F\u0BB2\u0BCD \u0BB5\u0BBF\u0BB0\u0BC1\u0BAA\u0BCD\u0BAA\u0B99\u0BCD\u0B95\u0BB3\u0BCD"
-  }
-};
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {
     case "xs":
@@ -47,7 +31,7 @@ function Select({
   errorMessage,
   ...originalProps
 }) {
-  const formatter = useLocalizedStringFormatter(i18nStrings);
+  const stringFormatter = useLocalizedStringFormatter(i18nStrings);
   const [_props, variantProps] = mapPropsVariants(
     originalProps,
     selectStyles.variantKeys
@@ -59,9 +43,12 @@ function Select({
     enableSearch = false,
     searchPlaceholder,
     searchIcon,
+    renderSelectValue,
+    popoverProps,
     ...props
   } = _props;
   const styles = selectStyles(variantProps);
+  const triggerWidth = useElementWidth(popoverProps?.triggerRef);
   const { contains } = useFilter({ sensitivity: "base" });
   const layoutOptions = useMemo(() => {
     return {
@@ -128,7 +115,8 @@ function Select({
                 {
                   className: styles.selectedText({
                     className: classNames?.selectedText
-                  })
+                  }),
+                  children: renderSelectValue
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -151,31 +139,43 @@ function Select({
           }
         ),
         /* @__PURE__ */ jsx(FieldError, { size: variantProps.size, className: classNames?.error, children: errorMessage }),
-        /* @__PURE__ */ jsx(Popover, { className: styles.popover({ className: classNames?.popover }), children: enableSearch ? /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
-          /* @__PURE__ */ jsxs(
-            SearchField,
-            {
-              autoFocus: true,
-              "aria-label": formatter.format("searchAriaLabel"),
-              className: styles.searchField({
-                className: classNames?.searchField
-              }),
-              children: [
-                renderedSearchIcon,
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    placeholder: searchPlaceholder ?? formatter.format("searchPlaceholder"),
-                    className: styles.searchInput({
-                      className: classNames?.searchInput
-                    })
-                  }
-                )
-              ]
-            }
-          ),
-          listContent
-        ] }) : listContent })
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            className: styles.popover({ className: classNames?.popover }),
+            ...triggerWidth !== null ? {
+              style: {
+                "--trigger-width": triggerWidth
+              }
+            } : {},
+            ...popoverProps,
+            children: enableSearch ? /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
+              /* @__PURE__ */ jsxs(
+                SearchField,
+                {
+                  autoFocus: true,
+                  "aria-label": stringFormatter.format("Search options"),
+                  className: styles.searchField({
+                    className: classNames?.searchField
+                  }),
+                  children: [
+                    renderedSearchIcon,
+                    /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        placeholder: searchPlaceholder ?? stringFormatter.format("Search..."),
+                        className: styles.searchInput({
+                          className: classNames?.searchInput
+                        })
+                      }
+                    )
+                  ]
+                }
+              ),
+              listContent
+            ] }) : listContent
+          }
+        )
       ]
     }
   ) });

package/dist/esm/sidebar/sidebar-list.js

@@ -6,11 +6,11 @@ import { useLocalizedStringFormatter } from 'react-aria';
 import { Disclosure, DisclosurePanel, Provider, Link, Button as Button$1 } from 'react-aria-components';
 import { useDisclosureState } from 'react-stately';
 import { dataAttr } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
 import { forwardRef } from '../system/utils.js';
 import { useSidebarStyleContext, useSidebarCollapseContext, SidebarNestContext, useSidebarNestContext } from './context.js';
 import { i18nStrings } from './i18n.js';
 import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
-import { Button } from '../button/button.js';
 
 const SidebarListSection = ({
   onlyCaretToggle,

package/dist/esm/system/l10n.js

@@ -0,0 +1,16 @@
+"use strict";
+import { useMemo } from 'react';
+import { LocalizedStringFormatter } from '@internationalized/string';
+import { useLocalizedStringDictionary } from '@react-aria/i18n';
+import { useLocale } from 'react-aria-components';
+
+function useLocalizedStringFormatter(strings, packageName) {
+  const { locale } = useLocale();
+  const dictionary = useLocalizedStringDictionary(strings, packageName);
+  return useMemo(
+    () => new LocalizedStringFormatter(locale, dictionary),
+    [locale, dictionary]
+  );
+}
+
+export { useLocalizedStringFormatter };

package/dist/esm/system/react-utils/sizing.js

@@ -0,0 +1,19 @@
+"use strict";
+import { useState, useCallback } from 'react';
+import { useResizeObserver } from '@react-aria/utils';
+
+function useElementWidth(ref) {
+  const [elementWidth, setElementWidth] = useState(null);
+  const onResize = useCallback(() => {
+    if (ref && ref.current && ref.current instanceof HTMLElement) {
+      setElementWidth(`${ref.current.offsetWidth}px`);
+    }
+  }, [ref]);
+  useResizeObserver({
+    ref,
+    onResize
+  });
+  return elementWidth;
+}
+
+export { useElementWidth };

package/dist/esm/tag-field/tag-field.js

@@ -4,6 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { createElement } from 'react';
 import { composeRenderProps } from 'react-aria-components';
 import { tagFieldStyles } from '@opengovsg/oui-theme';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Input } from '../input/input.js';
 import { Popover } from '../popover/popover.js';
 import { TagFieldItem } from './tag-field-item.js';
@@ -12,7 +13,6 @@ import { TagFieldRoot } from './tag-field-root.js';
 import { TagFieldTagList } from './tag-field-tag-list.js';
 import { TagFieldTrigger } from './tag-field-trigger.js';
 import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 
 function TagField({
   classNames,

package/dist/esm/text-area-field/text-area-field.js

@@ -3,8 +3,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { TextField } from 'react-aria-components';
 import { composeTailwindRenderProps } from '@opengovsg/oui-theme';
-import { TextArea } from '../text-area/text-area.js';
 import { Label, Description, FieldError } from '../field/field.js';
+import { TextArea } from '../text-area/text-area.js';
 
 function TextAreaField({
   label,

package/dist/esm/text-field/text-field.js

@@ -3,8 +3,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { TextField as TextField$1 } from 'react-aria-components';
 import { composeTailwindRenderProps } from '@opengovsg/oui-theme';
-import { Input } from '../input/input.js';
 import { Label, Description, FieldError } from '../field/field.js';
+import { Input } from '../input/input.js';
 
 function TextField({
   label,

package/dist/esm/time-field/time-field.js

@@ -3,9 +3,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { TimeField as TimeField$1 } from 'react-aria-components';
 import { dateInputStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
-import { mapPropsVariants } from '../system/utils.js';
-import { Label, Description, FieldError } from '../field/field.js';
 import { DateInput } from '../date-field/date-field.js';
+import { Label, Description, FieldError } from '../field/field.js';
+import { mapPropsVariants } from '../system/utils.js';
 
 function TimeField(originalProps) {
   const [

package/dist/types/field/field.d.ts

@@ -13,5 +13,5 @@ export declare function FieldErrorIcon({ size, className, }: Pick<FieldErrorProp
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function FieldError({ children, className, size, classNames, ...props }: FieldErrorProps): import("react/jsx-runtime").JSX.Element;
-export declare function FieldGroup(props: GroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const FieldGroup: import("react").ForwardRefExoticComponent<GroupProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=field.d.ts.map

package/dist/types/field/field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/field/field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,eAAe,IAAI,mBAAmB,EACtC,UAAU,IAAI,cAAc,EAC5B,UAAU,EACV,SAAS,EACV,MAAM,uBAAuB,CAAA;AAU9B,OAAO,KAAK,EACV,uBAAuB,EACvB,eAAe,EACf,sBAAsB,EACtB,iBAAiB,EACjB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAS7B,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,iBAAiB;CAAG;AAExE,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAE9D;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,uBAAuB;CAAG;AAE/E,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ1E;AAED,MAAM,WAAW,eACf,SAAQ,mBAAmB,EACzB,sBAAsB;IACxB,UAAU,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;CAC7C;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,SAAS,GACV,EAAE,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAIxD;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,UAAU,EACV,GAAG,KAAK,EACT,EAAE,eAAe,2CA0BjB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,2CAS3C"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/field/field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,eAAe,IAAI,mBAAmB,EACtC,UAAU,IAAI,cAAc,EAC5B,UAAU,EACV,SAAS,EACV,MAAM,uBAAuB,CAAA;AAU9B,OAAO,KAAK,EACV,uBAAuB,EACvB,eAAe,EACf,sBAAsB,EACtB,iBAAiB,EACjB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAS7B,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,iBAAiB;CAAG;AAExE,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAE9D;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,uBAAuB;CAAG;AAE/E,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ1E;AAED,MAAM,WAAW,eACf,SAAQ,mBAAmB,EACzB,sBAAsB;IACxB,UAAU,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;CAC7C;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,SAAS,GACV,EAAE,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAIxD;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,UAAU,EACV,GAAG,KAAK,EACT,EAAE,eAAe,2CA0BjB;AAED,eAAO,MAAM,UAAU,uGActB,CAAA"}

package/dist/types/index.d.mts

@@ -38,4 +38,5 @@ export * from "./link";
 export * from "./breadcrumbs";
 export * from "./sidebar";
 export * from "./tooltip";
+export * from "./phone-number-field";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts

@@ -38,4 +38,5 @@ export * from "./link";
 export * from "./breadcrumbs";
 export * from "./sidebar";
 export * from "./tooltip";
+export * from "./phone-number-field";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,sBAAsB,CAAA"}