@pingux/astro 2.208.4-alpha.0 → 2.209.0-alpha.0

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -163,6 +163,9 @@ export declare const FIGMA_LINKS: {
         withAvatar: string;
         withExtraLongText: string;
     };
+    phoneNumberField: {
+        default: string;
+    };
     popoverMenu: {
         default: string;
     };

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -170,6 +170,9 @@ var FIGMA_LINKS = exports.FIGMA_LINKS = {
     withAvatar: 'https://www.figma.com/design/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=4470-24174&m=dev',
     withExtraLongText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688%3A39713&mode=dev'
   },
+  phoneNumberField: {
+    "default": 'https://www.figma.com/design/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=8496-31873'
+  },
   popoverMenu: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A3073&t=We3h7LaaFJQnxdSy-1'
   },

package/lib/cjs/utils/testUtils/universalFormSubmitTest.js

@@ -139,6 +139,7 @@ var useDefaultProps = function useDefaultProps(componentType) {
           name: name
         };
       case 'PasswordField':
+      case 'PhoneNumberField':
         return {
           value: value,
           onChange: function onChange(e) {
@@ -215,6 +216,7 @@ var getDefaultProps = function getDefaultProps(componentType, testValue) {
         name: name
       };
     case 'PasswordField':
+    case 'PhoneNumberField':
     case 'ComboBoxField':
     case 'NumberField':
     case 'MultivaluesField':
@@ -409,7 +411,7 @@ var universalFieldComponentTests = exports.universalFieldComponentTests = functi
             _react2.fireEvent.click(_react2.screen.getAllByRole('option', {
               name: testValue
             })[0]);
-            _context2.next = 41;
+            _context2.next = 45;
             break;
           case 19:
             if (!(componentType === 'NumberField')) {
@@ -421,7 +423,7 @@ var universalFieldComponentTests = exports.universalFieldComponentTests = functi
                 value: testValue
               }
             });
-            _context2.next = 41;
+            _context2.next = 45;
             break;
           case 23:
             if (!(componentType === 'RadioGroupField')) {
@@ -429,7 +431,7 @@ var universalFieldComponentTests = exports.universalFieldComponentTests = functi
               break;
             }
             _react2.fireEvent.click(_react2.screen.getByLabelText(testValue));
-            _context2.next = 41;
+            _context2.next = 45;
             break;
           case 27:
             if (!(componentType === 'PasswordField')) {
@@ -441,25 +443,37 @@ var universalFieldComponentTests = exports.universalFieldComponentTests = functi
                 value: testValue
               }
             });
-            _context2.next = 41;
+            _context2.next = 45;
             break;
           case 31:
+            if (!(componentType === 'PhoneNumberField')) {
+              _context2.next = 35;
+              break;
+            }
+            _react2.fireEvent.change(_react2.screen.getByRole('textbox'), {
+              target: {
+                value: testValue
+              }
+            });
+            _context2.next = 45;
+            break;
+          case 35:
             if (!(componentType === 'DatePicker')) {
-              _context2.next = 40;
+              _context2.next = 44;
               break;
             }
             iconButton = _react2.screen.queryAllByRole('button');
-            _context2.next = 35;
+            _context2.next = 39;
             return _userEvent["default"].click(iconButton[0]);
-          case 35:
+          case 39:
             cells = _react2.screen.getAllByRole('gridcell');
             selected = (0, _find["default"])(cells).call(cells, function (cell) {
               return cell.getAttribute('aria-selected') === 'true';
             });
             expect(selected === null || selected === void 0 ? void 0 : selected.children[0]).toHaveAttribute('aria-label', 'Wednesday, August 10, 2022 selected');
-            _context2.next = 41;
+            _context2.next = 45;
             break;
-          case 40:
+          case 44:
             if (componentType === 'SliderField') {
               _react2.fireEvent.change(_react2.screen.getByRole('slider'), {
                 target: {
@@ -473,7 +487,7 @@ var universalFieldComponentTests = exports.universalFieldComponentTests = functi
                 }
               });
             }
-          case 41:
+          case 45:
             _react2.fireEvent.submit(_react2.screen.getByRole('form', {
               hidden: true,
               name: /test form 2/i
@@ -481,7 +495,7 @@ var universalFieldComponentTests = exports.universalFieldComponentTests = functi
             expect(handleFormSubmit).toHaveBeenCalledWith({
               testName: String(testValue)
             });
-          case 43:
+          case 47:
           case "end":
             return _context2.stop();
         }

package/lib/components/PhoneNumberField/PhoneNumberField.js

@@ -0,0 +1,288 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+var _excluded = ["countryValue", "defaultCountryValue", "helperText", "isReadOnly", "labelMode", "onCountryChange", "status"];
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context7 = ownKeys(Object(t))).call(_context7, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
+import _trimStartInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim-start";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import React, { forwardRef, useCallback, useState } from 'react';
+import { useFilter } from '@react-aria/i18n';
+import { countries as countriesObj } from 'countries-list';
+import { v4 as uuid } from 'uuid';
+import { Box, ComboBoxField, FieldHelperText, Input, Item, Label } from '../..';
+import { useField, useLocalOrForwardRef, usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'PhoneNumberField';
+var validatePhoneNumber = function validatePhoneNumber(str) {
+  return /^$|^\+\d*$|^\d+$/.test(str);
+};
+var allCountries = _Object$entries(countriesObj);
+var getCountry = function getCountry(key) {
+  return countriesObj[key];
+};
+var primaryDial = function primaryDial(key) {
+  var _getCountry$phone$spl, _getCountry;
+  return (_getCountry$phone$spl = (_getCountry = getCountry(key)) === null || _getCountry === void 0 ? void 0 : _getCountry.phone.split(',')[0]) !== null && _getCountry$phone$spl !== void 0 ? _getCountry$phone$spl : '';
+};
+var toDialCode = function toDialCode(key) {
+  var dial = primaryDial(key);
+  return dial ? "+".concat(dial) : '';
+};
+var parsePaste = function parsePaste(raw) {
+  var _context;
+  var digitsOnly = raw.replace(/\D/g, '');
+  if (_startsWithInstanceProperty(_context = _trimStartInstanceProperty(raw).call(raw)).call(_context, '+')) {
+    var match = _findInstanceProperty(allCountries).call(allCountries, function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        c = _ref2[1];
+      return _startsWithInstanceProperty(digitsOnly).call(digitsOnly, c.phone.split(',')[0]);
+    });
+    if (match) {
+      var dialLen = match[1].phone.split(',')[0].length;
+      return {
+        countryKey: match[0],
+        localNumber: _sliceInstanceProperty(digitsOnly).call(digitsOnly, dialLen)
+      };
+    }
+  }
+  return {
+    countryKey: null,
+    localNumber: digitsOnly
+  };
+};
+var closedState = function closedState(selectedKey) {
+  var dialCode = selectedKey ? toDialCode(selectedKey) : '';
+  return {
+    isOpen: false,
+    inputValue: dialCode,
+    searchValue: dialCode,
+    items: allCountries
+  };
+};
+var PhoneNumberField = /*#__PURE__*/forwardRef(function (props, ref) {
+  var countryValue = props.countryValue,
+    defaultCountryValue = props.defaultCountryValue,
+    helperText = props.helperText,
+    isReadOnly = props.isReadOnly,
+    labelMode = props.labelMode,
+    onCountryChange = props.onCountryChange,
+    status = props.status,
+    others = _objectWithoutProperties(props, _excluded);
+  var _useField = useField(_objectSpread({
+      status: status,
+      isReadOnly: isReadOnly,
+      labelMode: labelMode
+    }, others)),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
+  var onChange = fieldControlInputProps.onChange;
+  var inputRef = useLocalOrForwardRef(ref);
+  var helperTextId = uuid();
+  usePropWarning(props, 'disabled', 'isDisabled');
+  var _useFilter = useFilter({
+      sensitivity: 'base'
+    }),
+    contains = _useFilter.contains;
+  var _useState = useState(function () {
+      var key = countryValue !== null && countryValue !== void 0 ? countryValue : defaultCountryValue;
+      if (key && getCountry(key)) {
+        var dialCode = toDialCode(key);
+        return {
+          inputValue: dialCode,
+          selectedKey: key,
+          searchValue: dialCode,
+          items: allCountries,
+          isOpen: false
+        };
+      }
+      return {
+        inputValue: '',
+        selectedKey: null,
+        searchValue: '',
+        items: allCountries,
+        isOpen: false
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    fieldState = _useState2[0],
+    setFieldState = _useState2[1];
+  var isControlledCountry = countryValue !== undefined;
+  var currentSelectedKey = isControlledCountry ? countryValue !== null && countryValue !== void 0 ? countryValue : null : fieldState.selectedKey;
+  var closedDisplayValue = isControlledCountry ? toDialCode(countryValue !== null && countryValue !== void 0 ? countryValue : '') : fieldState.inputValue;
+  var currentCountryInputValue = fieldState.isOpen ? fieldState.searchValue : closedDisplayValue;
+  var inputHandler = useCallback(function (value) {
+    var search = value.toLowerCase();
+    var newItems = value ? _filterInstanceProperty(allCountries).call(allCountries, function (_ref3) {
+      var _context2;
+      var _ref4 = _slicedToArray(_ref3, 2),
+        c = _ref4[1];
+      var nameStr = _concatInstanceProperty(_context2 = "".concat(c.name)).call(_context2, c.name !== c["native"] ? " (".concat(c["native"], ")") : '');
+      var dialStr = "+".concat(c.phone.split(',')[0]).toLowerCase();
+      return contains(nameStr, value) || _includesInstanceProperty(dialStr).call(dialStr, search);
+    }) : allCountries;
+    setFieldState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        inputValue: value,
+        selectedKey: null,
+        searchValue: value,
+        items: newItems
+      });
+    });
+  }, [contains]);
+  var selectionHandler = useCallback(function (key) {
+    if (!key) return;
+    var dialCode = toDialCode(key);
+    setFieldState({
+      inputValue: dialCode,
+      selectedKey: key,
+      searchValue: dialCode,
+      items: allCountries,
+      isOpen: false
+    });
+    if (onCountryChange) onCountryChange(key);
+  }, [onCountryChange]);
+  var onOpenChangeHandler = useCallback(function (open) {
+    if (!open || isReadOnly) {
+      setFieldState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), closedState(prev.selectedKey));
+      });
+    } else {
+      setFieldState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          isOpen: true,
+          items: allCountries
+        });
+      });
+    }
+  }, [isReadOnly]);
+  var handlePhoneChange = useCallback(function (e) {
+    if (!onChange) return;
+    if (validatePhoneNumber(e.target.value)) {
+      onChange(e);
+    } else if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+  }, [inputRef, onChange]);
+  var commitPaste = useCallback(function (raw) {
+    if (!inputRef.current || !onChange) return;
+    var _parsePaste = parsePaste(raw),
+      countryKey = _parsePaste.countryKey,
+      localNumber = _parsePaste.localNumber;
+    if (countryKey) selectionHandler(countryKey);
+    inputRef.current.value = localNumber;
+    var event = {
+      target: inputRef.current,
+      currentTarget: inputRef.current
+    };
+    onChange(event);
+  }, [inputRef, onChange, selectionHandler]);
+  var handlePhonePaste = useCallback(function (e) {
+    if (isReadOnly) return;
+    e.preventDefault();
+    commitPaste(e.clipboardData.getData('text'));
+  }, [isReadOnly, commitPaste]);
+  var handleComboBoxPaste = useCallback(function (e) {
+    var _context3;
+    if (isReadOnly) return;
+    var raw = e.clipboardData.getData('text');
+    if (!_startsWithInstanceProperty(_context3 = _trimStartInstanceProperty(raw).call(raw)).call(_context3, '+')) return;
+    e.preventDefault();
+    commitPaste(raw);
+  }, [isReadOnly, commitPaste]);
+  var comboBoxWrapperSx = _objectSpread({
+    position: 'absolute',
+    zIndex: 1
+  }, fieldState.isOpen ? {
+    width: '100%'
+  } : {
+    transition: '0.2s width ease',
+    width: '110px'
+  });
+  var countryLabel = function countryLabel(c) {
+    var _context4, _context5;
+    return _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = "".concat(c.name)).call(_context5, c.name !== c["native"] ? " (".concat(c["native"], ")") : '', " +")).call(_context4, c.phone.split(',')[0]);
+  };
+  return ___EmotionJSX(Box, _extends({
+    variant: "forms.input.fieldContainer"
+  }, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+    variant: "forms.input.fieldControlWrapper",
+    isRow: true
+  }, fieldControlWrapperProps, {
+    sx: {
+      position: 'relative'
+    }
+  }), ___EmotionJSX(ComboBoxField, {
+    width: "100%",
+    status: status,
+    isReadOnly: isReadOnly,
+    isOpen: fieldState.isOpen,
+    onOpenChange: onOpenChangeHandler,
+    wrapperProps: {
+      sx: comboBoxWrapperSx
+    },
+    controlProps: {
+      'aria-label': 'Country Picker',
+      onPaste: handleComboBoxPaste
+    },
+    containerProps: {
+      sx: {
+        '> label': {
+          mb: 0
+        }
+      }
+    },
+    scrollBoxProps: {
+      maxHeight: '215px',
+      sx: {
+        minWidth: '280px'
+      }
+    },
+    items: fieldState.items,
+    inputValue: currentCountryInputValue,
+    selectedKey: currentSelectedKey,
+    onInputChange: inputHandler,
+    onSelectionChange: selectionHandler,
+    menuTrigger: "focus",
+    isDisabled: fieldControlInputProps.disabled
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item[0],
+      textValue: "+".concat(item[1].phone.split(',')[0])
+    }, countryLabel(item[1]));
+  }), ___EmotionJSX(Box, {
+    sx: {
+      ml: '110px',
+      width: '100%',
+      visibility: fieldState.isOpen ? 'hidden' : undefined
+    }
+  }, ___EmotionJSX(Input, _extends({
+    ref: inputRef
+  }, fieldControlInputProps, {
+    "aria-describedby": [helperText && helperTextId, fieldControlInputProps['aria-describedby']].join(fieldControlInputProps['aria-describedby'] ? ' ' : '') || undefined,
+    onChange: handlePhoneChange,
+    onPaste: handlePhonePaste
+  })))), helperText && ___EmotionJSX(FieldHelperText, {
+    status: status,
+    id: helperTextId
+  }, helperText));
+});
+PhoneNumberField.displayName = displayName;
+export default PhoneNumberField;

package/lib/components/PhoneNumberField/PhoneNumberField.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as PhoneNumberFieldStories from './PhoneNumberField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
+
+<Meta of={PhoneNumberFieldStories} isTemplate />
+
+# PhoneNumberField
+
+The PhoneNumberField component combines a country selector with a phone number input, providing a complete, form-ready solution for collecting international phone numbers. The country selector is an accessible combo box that filters all countries from the `countries-list` package, and the phone input validates that only numeric characters (with an optional leading `+`) are entered.
+
+### Required components
+
+This component requires the following dependency to be present in the project:
+
+- **`countries-list ^2.6.1`** — provides the full list of countries and their dial codes used to populate the country selector dropdown.
+
+The `ComboBoxField` component (from the Astro design system) is used internally for the country selector. No additional external setup is needed beyond having `countries-list` installed.
+
+### Accessibility
+
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'Moves focus between the country selector trigger and the phone number input, following the page tab sequence.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Arrow Down / Arrow Up', description: 'When the country selector dropdown is open, moves focus through the list of countries.' },
+  { key: 'Enter', description: 'Selects the currently focused country in the dropdown and closes the selector.' },
+  { key: 'Escape', description: 'Closes the country selector dropdown without changing the selection.' },
+]} screenReaderRows={[
+  'The phone number input uses the **`aria-labelledby`** attribute to reference the field label ID, associating the visible label with the input.',
+  'The country selector combo box uses the **`aria-label`** attribute (value: `"Country Picker"`) to provide an accessible name for the combo box trigger, since its visible content is the dial code rather than a descriptive label.',
+  'The **`aria-invalid`** attribute is set on the phone input when the field has an error status.',
+]} />

package/lib/components/PhoneNumberField/PhoneNumberField.stories.js

@@ -0,0 +1,126 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { useState } from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { PhoneNumberField } from '../../index';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
+import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
+import { statusArgTypes } from '../../utils/docUtils/statusProp';
+import PhoneNumberFieldReadme from './PhoneNumberField.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Form/PhoneNumberField',
+  component: PhoneNumberField,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PhoneNumberFieldReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
+  argTypes: _objectSpread(_objectSpread(_objectSpread({}, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number"
+  }, args));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.phoneNumberField["default"]
+  }
+};
+export var Controlled = function Controlled() {
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    countryValue = _useState4[0],
+    setCountryValue = _useState4[1];
+  return ___EmotionJSX(PhoneNumberField, {
+    label: "Phone Number",
+    value: value,
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    },
+    countryValue: countryValue,
+    onCountryChange: function onCountryChange(key) {
+      return setCountryValue(key);
+    }
+  });
+};
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number",
+    isDisabled: true
+  }, args));
+};
+export var ReadOnly = function ReadOnly(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number",
+    isReadOnly: true,
+    defaultCountryValue: "US",
+    value: "2025550177"
+  }, args));
+};
+export var Required = function Required(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number",
+    isRequired: true
+  }, args));
+};
+export var Error = function Error(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number",
+    status: "error",
+    helperText: "Please enter a valid phone number."
+  }, args));
+};
+export var Warning = function Warning(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number",
+    status: "warning",
+    helperText: "Double-check the country code."
+  }, args));
+};
+Warning.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+export var Success = function Success(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number",
+    status: "success",
+    helperText: "Phone number verified."
+  }, args));
+};
+export var WithHelpHint = function WithHelpHint(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number",
+    hintText: "Include country code for international numbers.",
+    helpHintProps: {
+      direction: 'right'
+    }
+  }, args));
+};