@pingux/astro 2.208.3 → 2.209.0-alpha.0

package/lib/components/Modal/Modal.stories.js

@@ -1,12 +1,23 @@
+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 { useGetTheme, useModalState } from '../../hooks';
 import { Box, Button, ComboBoxField, Item, Menu, Modal, ModalBody, ModalFooter, ModalHeader, OverlayProvider, PopoverMenu, RadioField, RadioGroupField, SearchField, SelectField, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
-import { modalSizes } from '../../utils/devUtils/constants/modalSizes';
 import ModalReadme from './Modal.mdx';
+import { modalArgTypes } from './modalAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Modal',
@@ -18,61 +29,7 @@ export default {
       }
     }
   },
-  argTypes: {
-    title: {
-      control: {
-        type: 'text'
-      }
-    },
-    role: {},
-    id: {
-      control: {
-        type: 'text'
-      }
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: modalSizes
-      }
-    },
-    hasCloseButton: {},
-    isClosedOnBlur: {},
-    isDismissable: {},
-    isKeyboardDismissDisabled: {},
-    'aria-label': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-labelledby': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-describedby': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-details': {
-      control: {
-        type: 'text'
-      }
-    },
-    closeButton: {
-      control: false
-    },
-    isOpen: {
-      control: false
-    },
-    contentProps: {
-      control: false
-    },
-    containerProps: {
-      control: false
-    }
-  },
+  argTypes: _objectSpread({}, modalArgTypes),
   args: {
     hasCloseButton: true,
     hasAutoFocus: true

package/lib/components/Modal/modalAttributes.js

@@ -0,0 +1,56 @@
+import { modalSizes } from '../../utils/devUtils/constants/modalSizes';
+export var modalArgTypes = {
+  title: {
+    control: {
+      type: 'text'
+    }
+  },
+  role: {},
+  id: {
+    control: {
+      type: 'text'
+    }
+  },
+  size: {
+    control: {
+      type: 'select',
+      options: modalSizes
+    }
+  },
+  hasCloseButton: {},
+  isClosedOnBlur: {},
+  isDismissable: {},
+  isKeyboardDismissDisabled: {},
+  'aria-label': {
+    control: {
+      type: 'text'
+    }
+  },
+  'aria-labelledby': {
+    control: {
+      type: 'text'
+    }
+  },
+  'aria-describedby': {
+    control: {
+      type: 'text'
+    }
+  },
+  'aria-details': {
+    control: {
+      type: 'text'
+    }
+  },
+  closeButton: {
+    control: false
+  },
+  isOpen: {
+    control: false
+  },
+  contentProps: {
+    control: false
+  },
+  containerProps: {
+    control: false
+  }
+};

package/lib/components/NavBar/NavBar.stories.js

@@ -1,5 +1,16 @@
+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 AccountCheckIcon from '@pingux/mdi-react/AccountCheckOutlineIcon';
 import AccountMultiple from '@pingux/mdi-react/AccountMultipleIcon';
@@ -30,6 +41,7 @@ import { Box, Link, NavBar, NavBarItem, NavBarItemButton, NavBarItemLink, NavBar
 import { useGetTheme } from '../../hooks';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import NavBarReadme from './NavBar.mdx';
+import { navBarArgTypes } from './navBarAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   component: NavBar,
@@ -47,6 +59,7 @@ export default {
     NavBarItemButton: NavBarItemButton
   },
   title: 'Components/NavBar',
+  argTypes: _objectSpread({}, navBarArgTypes),
   parameters: {
     layout: 'fullscreen',
     docs: {

package/lib/components/NavBar/navBarAttributes.js

@@ -0,0 +1,48 @@
+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 _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 { booleanArg, funcArg } from '../../utils/docUtils/docArgTypes';
+export var navBarArgTypes = {
+  isAutoСollapsible: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Allows only one item to be expanded at a time (auto-collapse behavior).'
+  }),
+  hasRestoreFocus: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether or not the focus will return to the previously focused element upon unmount.'
+  }),
+  variant: {
+    control: {
+      type: 'select'
+    },
+    options: ['default', 'popupNav'],
+    description: 'Applies a style to the entire nav tree. Options are default and popupNav.'
+  },
+  defaultSelectedKey: {
+    control: {
+      type: 'text'
+    },
+    description: 'The initial selected key in the collection (uncontrolled).'
+  },
+  defaultExpandedKeys: {
+    control: false,
+    description: 'The initial expanded keys in the collection (uncontrolled).'
+  },
+  selectedKey: {
+    control: false,
+    description: 'The selected key in the collection (controlled).'
+  },
+  setSelectedKey: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Callback function that fires when the selected key changes.'
+  }),
+  children: {
+    control: false,
+    description: 'Content to render inside the NavBar.'
+  }
+};

package/lib/components/NavBar/stories/NavBar.Onyx.stories.js

@@ -1,10 +1,23 @@
+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 _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 from 'react';
 import { AstroProvider, OnyxSideNavOverride } from '../../..';
 import uiLibraryOverride from '../../../styles/themeOverrides/uiLibraryOverride';
 import { NavBarNextGenComponent } from './NavBarNextGenComponent';
+import { navBarOnyxArgTypes } from './navBarOnyxAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Onyx SideBar First Steps'
+  title: 'Onyx SideBar First Steps',
+  argTypes: _objectSpread({}, navBarOnyxArgTypes)
 };
 export var Default = function Default() {
   return ___EmotionJSX(AstroProvider, {

package/lib/components/NavBar/stories/navBarOnyxAttributes.js

@@ -0,0 +1,42 @@
+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 _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 { booleanArg, funcArg } from '../../../utils/docUtils/docArgTypes';
+export var navBarOnyxArgTypes = {
+  isAutoСollapsible: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Allows only one item to be expanded at a time (auto-collapse behavior).'
+  }),
+  hasRestoreFocus: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether or not the focus will return to the previously focused element upon unmount.'
+  }),
+  variant: {
+    control: {
+      type: 'select'
+    },
+    options: ['default', 'popupNav'],
+    description: 'Applies a style to the entire nav tree. Options are default and popupNav.'
+  },
+  defaultSelectedKey: {
+    control: {
+      type: 'text'
+    },
+    description: 'The initial selected key in the collection (uncontrolled).'
+  },
+  setSelectedKey: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Callback function that fires when the selected key changes.'
+  }),
+  children: {
+    control: {
+      type: null
+    },
+    description: 'Content to render inside the NavBar.'
+  }
+};

package/lib/components/Pagination/Pagination.stories.js

@@ -8,6 +8,7 @@ import usePaginationState from '../../hooks/usePaginationState';
 import { Box, Button, Item, ListView, ListViewItem, Pagination, PaginationProvider, ScrollBox } from '../../index';
 import animals from '../../utils/devUtils/constants/animals';
 import PaginationReadme from './Pagination.mdx';
+import { paginationArgTypes } from './paginationAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Pagination',
@@ -19,30 +20,7 @@ export default {
       }
     }
   },
-  argTypes: {
-    totalCount: {
-      control: {
-        type: 'number'
-      }
-    },
-    currentPageIndex: {
-      control: {
-        type: 'number'
-      }
-    },
-    offsetCount: {
-      control: {
-        type: 'number'
-      }
-    },
-    offsetOptions: {
-      control: {
-        type: 'array'
-      }
-    },
-    onPageIndexChange: {},
-    onOffsetCountChange: {}
-  }
+  argTypes: paginationArgTypes
 };
 var ExampleComponent = function ExampleComponent() {
   var _context;

package/lib/components/Pagination/paginationAttributes.js

@@ -0,0 +1,24 @@
+export var paginationArgTypes = {
+  totalCount: {
+    control: {
+      type: 'number'
+    }
+  },
+  currentPageIndex: {
+    control: {
+      type: 'number'
+    }
+  },
+  offsetCount: {
+    control: {
+      type: 'number'
+    }
+  },
+  offsetOptions: {
+    control: {
+      type: 'array'
+    }
+  },
+  onPageIndexChange: {},
+  onOffsetCountChange: {}
+};

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;