@pingux/astro 1.17.0-alpha.2 → 1.17.0-alpha.3

package/lib/cjs/recipes/ConditionalFilter.stories.js

@@ -1,469 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports["default"] = exports.Default = void 0;
-
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
-
-var _DragVerticalIcon = _interopRequireDefault(require("mdi-react/DragVerticalIcon"));
-
-var _TrashIcon = _interopRequireDefault(require("mdi-react/TrashIcon"));
-
-var _index = require("../index");
-
-var _OverlayPanel = _interopRequireDefault(require("../components/OverlayPanel"));
-
-var _react2 = require("@emotion/react");
-
-var _default = {
-  title: 'Recipes/ConditionalFilter'
-};
-exports["default"] = _default;
-
-var BracketSVG = function BracketSVG(props) {
-  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-    xmlns: "http://www.w3.org/2000/svg",
-    version: "1.1"
-  }, props), (0, _react2.jsx)("title", null, "bracket-fill"), (0, _react2.jsx)("g", null, (0, _react2.jsx)("title", null, "Layer 1"), (0, _react2.jsx)("path", {
-    fillRule: "nonzero",
-    fill: "#CACED3",
-    id: "Path",
-    d: "m6, ".concat(props.height - 18, ".89712l0,10c0,2.1422 1.68397,3.89108 3.80036,3.9951l0.19964,0.0049l5,0l0,1l-5,0c-2.76142,0 -5,-2.23858 -5,-5l0,-10l1,0z")
-  }), (0, _react2.jsx)("line", {
-    strokeLinecap: "undefined",
-    strokeLinejoin: "undefined",
-    id: "svg_1",
-    y2: "0",
-    x2: "5.50861",
-    y1: "".concat(props.height - 17),
-    x1: "5.50861",
-    stroke: "#caced3",
-    fill: "none"
-  })));
-};
-
-var Default = function Default() {
-  var customChipStyles = {
-    '& > span': {
-      textTransform: 'none',
-      fontWeight: '500'
-    },
-    minWidth: '65px',
-    'z-index': '1'
-  };
-  var borderedBoxStyles = {
-    '&::after': {
-      bg: 'decorative.7'
-    },
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: 'neutral.80',
-    borderRadius: '4px'
-  };
-  var allConditions = [{
-    field1: 'Family Name',
-    field3: 'John',
-    key: 'FamilyNameField'
-  }, {
-    field1: 'Full Name',
-    field3: 'Alex Smith',
-    key: 'FullNameField'
-  }];
-  var anyConditions = [{
-    field1: 'Group',
-    field3: 'Marketing',
-    key: 'Group1Field'
-  }, {
-    field1: 'Group',
-    field3: 'UX Team',
-    key: 'Group2Field'
-  }];
-  var trashButton = (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "deleteButton",
-    sx: {
-      alignSelf: 'center'
-    }
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _TrashIcon["default"],
-    sx: {
-      '& > path': {
-        fill: 'neutral.40'
-      }
-    }
-  }));
-
-  var _React$useState = _react["default"].useState(false),
-      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      staticOverviewVisible = _React$useState2[0],
-      setStaticOverviewVisible = _React$useState2[1];
-
-  var _React$useState3 = _react["default"].useState(false),
-      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-      editOverviewVisible = _React$useState4[0],
-      setEditOverviewVisible = _React$useState4[1];
-
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
-    onPress: function onPress() {
-      return setStaticOverviewVisible(true);
-    }
-  }, "Open Panel"), staticOverviewVisible && (0, _react2.jsx)(_OverlayPanel["default"], {
-    isOpen: staticOverviewVisible
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
-    bg: "accent.99",
-    p: "md"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    pb: "md"
-  }, "Branch Condition"), (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "edit",
-    variant: "inverted",
-    ml: "xs",
-    onPress: function onPress() {
-      return setEditOverviewVisible(true);
-    }
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CreateIcon["default"],
-    size: 14
-  }))), (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Chip, {
-    label: "All",
-    bg: "decorative.7",
-    mr: "sm",
-    sx: customChipStyles
-  }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
-    return (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      key: item.key
-    }, (0, _react2.jsx)(_index.Box, {
-      mt: "-10px",
-      mr: "-3px"
-    }, (0, _react2.jsx)(BracketSVG, {
-      width: "15",
-      height: "40"
-    })), (0, _react2.jsx)(_index.Box, {
-      ml: "3px",
-      width: "100%"
-    }, (0, _react2.jsx)(_index.Box, {
-      variant: "forms.input.container",
-      bg: "white",
-      isRow: true,
-      alignItems: "center",
-      borderRadius: "4px",
-      sx: {
-        '&::after': {
-          bg: 'decorative.7'
-        }
-      },
-      mt: "15px"
-    }, (0, _react2.jsx)(_index.Text, {
-      pl: "md",
-      pr: "sm"
-    }, item.field1), (0, _react2.jsx)(_index.Chip, {
-      label: "Equals",
-      bg: "accent.90",
-      textColor: "neutral.10",
-      sx: customChipStyles,
-      mr: "sm",
-      alignSelf: "center"
-    }), (0, _react2.jsx)(_index.Text, null, item.field3))));
-  }), (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Box, {
-    mt: "-10px",
-    mr: "-3px"
-  }, (0, _react2.jsx)(BracketSVG, {
-    width: "15",
-    height: "80"
-  })), (0, _react2.jsx)(_index.Box, {
-    variant: "forms.input.container",
-    borderRadius: "4px",
-    p: "sm",
-    mt: "md",
-    sx: borderedBoxStyles,
-    width: "100%"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Chip, {
-    label: "Any",
-    bg: "decorative.4",
-    mr: "sm",
-    sx: customChipStyles,
-    alignSelf: "center"
-  }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
-    ml: "sm"
-  }, (0, _map["default"])(anyConditions).call(anyConditions, function (item) {
-    return (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      mt: "md",
-      key: item.key
-    }, (0, _react2.jsx)(_index.Box, {
-      mt: "-25px",
-      mr: "-3px"
-    }, (0, _react2.jsx)(BracketSVG, {
-      width: "15",
-      height: "40"
-    })), (0, _react2.jsx)(_index.Box, {
-      variant: "forms.input.container",
-      bg: "white",
-      isRow: true,
-      alignItems: "center",
-      borderRadius: "4px",
-      width: "100%",
-      sx: {
-        '&::after': {
-          bg: 'decorative.4'
-        }
-      }
-    }, (0, _react2.jsx)(_index.Text, {
-      pl: "md",
-      pr: "sm"
-    }, item.field1), (0, _react2.jsx)(_index.Chip, {
-      label: "Equals",
-      bg: "accent.90",
-      textColor: "neutral.10",
-      sx: customChipStyles,
-      mr: "sm",
-      alignSelf: "center"
-    }), (0, _react2.jsx)(_index.Text, null, item.field3)));
-  })))))), (0, _react2.jsx)(_index.Button, {
-    onPress: function onPress() {
-      return setStaticOverviewVisible(false);
-    },
-    width: "fit-content",
-    mt: "lg"
-  }, "Close Panel")), editOverviewVisible && (0, _react2.jsx)(_OverlayPanel["default"], {
-    isOpen: editOverviewVisible
-  }, (0, _react2.jsx)(_index.Box, {
-    bg: "accent.99",
-    p: "md"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    pb: "md"
-  }, "Branch Condition"), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    alignItems: "center",
-    mb: "md"
-  }, (0, _react2.jsx)(_index.RockerButtonGroup, {
-    mr: "sm",
-    selectedKey: "all",
-    "aria-label": "temp-label"
-  }, (0, _react2.jsx)(_index.RockerButton, {
-    name: "any",
-    key: "any",
-    selectedStyles: {
-      bg: 'decorative.7'
-    },
-    "aria-label": "temp-label"
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
-  }, "Any")), (0, _react2.jsx)(_index.RockerButton, {
-    name: "all",
-    key: "all",
-    selectedStyles: {
-      bg: 'decorative.7'
-    },
-    "aria-label": "temp-label"
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
-  }, "All"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
-    variant: "inline",
-    width: "fit-content",
-    role: "button",
-    title: "Add Field Button",
-    ml: "auto",
-    mr: "xl",
-    "aria-label": "add"
-  }, "+ Add")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
-    return (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      alignItems: "center",
-      mb: "md",
-      key: item.key
-    }, (0, _react2.jsx)(_index.Icon, {
-      icon: _DragVerticalIcon["default"],
-      mr: "sm"
-    }), (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      width: "100%"
-    }, (0, _react2.jsx)(_index.TextField, {
-      width: "40%",
-      value: item.field1,
-      mr: "md",
-      containerProps: {
-        sx: {
-          '& > div::after': {
-            bg: 'decorative.7'
-          }
-        }
-      },
-      "aria-label": "temp-label"
-    }), (0, _react2.jsx)(_index.SelectField, {
-      hasNoStatusIndicator: true,
-      selectedKey: "Equals",
-      mr: "md",
-      "aria-label": "temp-label"
-    }, (0, _react2.jsx)(_index.Item, {
-      key: "Equals",
-      textValue: "Equals",
-      "aria-label": "equals"
-    }, "Equals"), (0, _react2.jsx)(_index.Item, {
-      key: "NotEquals",
-      textValue: "NotEquals",
-      "aria-label": "notequal"
-    }, "Not Equal")), (0, _react2.jsx)(_index.TextField, {
-      hasNoStatusIndicator: true,
-      width: "40%",
-      value: item.field3,
-      mr: "xs",
-      "aria-label": "temp-label"
-    })), trashButton);
-  }), (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _DragVerticalIcon["default"],
-    mr: "sm"
-  }), (0, _react2.jsx)(_index.Box, {
-    variant: "forms.input.container",
-    borderRadius: "4px",
-    p: "sm",
-    width: "100%",
-    sx: borderedBoxStyles,
-    mr: "xs"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    alignItems: "center",
-    mb: "md"
-  }, (0, _react2.jsx)(_index.RockerButtonGroup, {
-    mr: "sm",
-    "aria-label": "temp-label"
-  }, (0, _react2.jsx)(_index.RockerButton, {
-    name: "any",
-    key: "any",
-    selectedStyles: {
-      bg: 'decorative.4'
-    },
-    "aria-label": "any"
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
-  }, "Any")), (0, _react2.jsx)(_index.RockerButton, {
-    name: "all",
-    key: "all",
-    selectedStyles: {
-      bg: 'decorative.4'
-    },
-    "aria-label": "all"
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
-  }, "All"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
-    variant: "inline",
-    width: "fit-content",
-    role: "button",
-    title: "Add Field Button",
-    ml: "auto",
-    mr: "xl",
-    "aria-label": "add"
-  }, "+ Add")), (0, _react2.jsx)(_index.Box, {
-    ml: "lg"
-  }, (0, _map["default"])(anyConditions).call(anyConditions, function (item) {
-    return (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      alignItems: "center",
-      mb: "md",
-      key: item.key
-    }, (0, _react2.jsx)(_index.Icon, {
-      icon: _DragVerticalIcon["default"],
-      mr: "sm"
-    }), (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      width: "100%"
-    }, (0, _react2.jsx)(_index.TextField, {
-      "aria-label": "temp-label",
-      value: item.field1,
-      width: "40%",
-      mr: "md",
-      containerProps: {
-        sx: {
-          '& > div::after': {
-            bg: 'decorative.4'
-          }
-        }
-      }
-    }), (0, _react2.jsx)(_index.SelectField, {
-      "aria-label": "temp-label",
-      hasNoStatusIndicator: true,
-      selectedKey: "Equals",
-      mr: "md"
-    }, (0, _react2.jsx)(_index.Item, {
-      key: "Equals",
-      textValue: "Equals",
-      "aria-label": "Equals"
-    }, "Equals"), (0, _react2.jsx)(_index.Item, {
-      key: "NotEquals",
-      textValue: "NotEqual",
-      "aria-label": "NotEqual"
-    }, "Not Equal")), (0, _react2.jsx)(_index.TextField, {
-      "aria-label": "temp-label",
-      hasNoStatusIndicator: true,
-      value: item.field3,
-      width: "40%",
-      mr: "xs"
-    })), trashButton);
-  }))), (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "my-label"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _TrashIcon["default"],
-    sx: {
-      '& > path': {
-        fill: '#68747f !important'
-      }
-    }
-  }))), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    mt: "lg"
-  }, (0, _react2.jsx)(_index.Button, {
-    onPress: function onPress() {
-      return setEditOverviewVisible(false);
-    },
-    variant: "primary",
-    mr: "md",
-    "aria-label": "save"
-  }, "Save"), (0, _react2.jsx)(_index.Button, {
-    onPress: function onPress() {
-      return setEditOverviewVisible(false);
-    },
-    variant: "link",
-    "aria-label": "cancel"
-  }, "Cancel"))))));
-};
-
-exports.Default = Default;

package/lib/cjs/recipes/CopyToClipboard.stories.js

@@ -1,45 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports["default"] = exports.Default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _index = require("../index");
-
-var _useCopyToClipboard = _interopRequireDefault(require("../hooks/useCopyToClipboard"));
-
-var _react2 = require("@emotion/react");
-
-var _default = {
-  title: 'Recipes/CopyToClipboard'
-};
-exports["default"] = _default;
-
-var Default = function Default() {
-  var textToCopy = 'eyJraWQiOiI4YTg5MmY3ZS1iNTk1LTRkYWQtODBlNC0yMzA4ODkyZTczZDQiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2FwaS5waW5nb25lLmNvbSIsImF1dGhVcmwiOiJodHRwczovL2F1dGgucGluZ29uZS5jb20iLCJjb25zb2xlVXJsIjoiaHR0cHM6Ly9jb25zb2xlLnBpbmdvbmUuY29tIiwiZW52aXJvbm1lbnROYW1lIjoiTW9udGFuYSIsImVudmlyb25tZW50SWQiOiJhYzc2NWQ0Ny1kMDM2LTQ1MGUtODFjMS1mYjQ1NDMxMjM1NjYiLCJvcmdhbml6YXRpb25OYW1lIjoiaW50ZXJuYWxfZXJpa2FhbGRlYm9yZ2hfMjUyMDc1MDMxIiwib3JnYW5pemF0aW9uSWQiOiJkMDYzMmYwZi03YjQ2LTQ5ZjUtYjgyYS1kZWU5MWQ3MDY3ODYiLCJnYXRld2F5TmFtZSI6ImRzZHMiLCJnYXRld2F5SWQiOiJiMDVmNGU5Yy1jMzRiLTRlZTMtYTYyNS01ZGFiNjlkYTE1YTEiLCJnYXRld2F5VHlwZSI6IlBJTkdfRkVERVJBVEUiLCJ0YXJnZXRDbHVzdGVyRW52aXJvbm1lbnQiOiJQUk9EIiwidGFyZ2V0R2VvZ3JhcGh5IjoiTkEiLCJyZWdpb24iOiJOb3J0aCBBbWVyaWNhIiwianRpIjoiMTUwYTQ0OTktZjIyYi00YWVhLWIzY2UtYWM2YWY1NjVjNjk5IiwiaXNzIjoid3NzOi8vZ2F0ZXdheXMucGluZ29uZS5jb20iLCJpYXQiOjE2MjYyODEyMTZ9.JJ9wwqTxQWUwz2vmU0yE54xuYff51xbirzZuEUxd8GDzV45bnpbmx460CY8g9ccdmOjvfVF4RPPsawpKuMZH271tDlLZl67iknxDVWBZSih9K6v0RAmsmNriR4OyOFOkGrULCIz3ISyPWeItp1AVuue_8guWR63KzYg32aPC4SgmOrc2myq9N6XNU2H1KybETbG_s5-VU_cUqaXn7GUzhL2_W6CSVrrlE1cYfjC7pxMKFm4vvIw_KcNYVGO1K6oYgzRZ4A8toQHIdlGB8L-wkCt442LdC93OjoQdkLuGzmXnO8BUohWea-Dn35gGHoH-H1BRQTya_H9AKyWMxCw-vg';
-  var copyToClipboard = (0, _useCopyToClipboard["default"])(textToCopy);
-  return (0, _react2.jsx)(_index.Box, {
-    bg: "accent.99",
-    py: "md",
-    px: "xl"
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      wordBreak: 'break-all'
-    }
-  }, textToCopy), (0, _react2.jsx)(_index.Button, {
-    variant: "inline",
-    my: "lg",
-    onPress: copyToClipboard,
-    "aria-label": "Copy Text To Clipboard"
-  }, "Copy To Clipboard"));
-};
-
-exports.Default = Default;

package/lib/cjs/recipes/CountryPicker.stories.js

@@ -1,163 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports["default"] = exports.Default = void 0;
-
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
-var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _countriesList = require("countries-list");
-
-var _Box = _interopRequireDefault(require("../components/Box"));
-
-var _ComboBoxField = _interopRequireDefault(require("../components/ComboBoxField"));
-
-var _Input = _interopRequireDefault(require("../components/Input"));
-
-var _index = require("../index");
-
-var _react2 = require("@emotion/react");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var _default = {
-  title: 'Recipes/CountryPicker'
-};
-exports["default"] = _default;
-
-var validatePhoneNumber = function validatePhoneNumber(str) {
-  var reg = /^$|^[\d\-(\d)\s.]+$|^\+/g;
-  return reg.test(str);
-};
-
-var Default = function Default() {
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      searchValue = _useState4[0],
-      setSearchValue = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(''),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      phoneCodeValue = _useState6[0],
-      setPhoneCodeValue = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(null),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      selectedKey = _useState8[0],
-      setSelectedKey = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(''),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      phoneNumber = _useState10[0],
-      setPhoneNumber = _useState10[1];
-
-  var getInputValue = function getInputValue() {
-    if (isOpen) return searchValue;
-    return phoneCodeValue || searchValue;
-  };
-
-  var inputHandler = function inputHandler(value) {
-    setSearchValue(value);
-
-    if (!value) {
-      setSelectedKey(null);
-      setPhoneCodeValue('');
-    }
-  };
-
-  var selectionHandler = function selectionHandler(key) {
-    setSelectedKey(key);
-
-    if (key) {
-      setPhoneCodeValue("+".concat(_countriesList.countries[key].phone.split(',')[0]));
-    } else {
-      setSearchValue('');
-      setPhoneCodeValue('');
-    }
-
-    setIsOpen(false);
-  };
-
-  var keyHandler = function keyHandler(e) {
-    if (e.keyCode !== 13) setIsOpen(true);
-  };
-
-  var onPhoneNumberValueChange = function onPhoneNumberValueChange(e) {
-    var value = e.target.value;
-
-    if (value === '' || validatePhoneNumber(value)) {
-      setPhoneNumber(value);
-    }
-  };
-
-  return (0, _react2.jsx)(_Box["default"], {
-    isRow: true,
-    sx: {
-      width: '100%',
-      maxWidth: 500,
-      position: 'relative'
-    }
-  }, (0, _react2.jsx)(_ComboBoxField["default"], {
-    mt: -5,
-    width: "100%",
-    isOpen: isOpen,
-    onOpenChange: setIsOpen,
-    wrapperProps: {
-      sx: {
-        position: 'absolute',
-        transition: '0.2s width ease',
-        width: isOpen ? '100%' : 110
-      }
-    },
-    controlProps: {
-      'aria-label': 'Country Picker'
-    },
-    defaultItems: (0, _entries["default"])(_countriesList.countries),
-    inputValue: getInputValue(),
-    onInputChange: inputHandler,
-    selectedKey: selectedKey,
-    onSelectionChange: selectionHandler,
-    onKeyUp: keyHandler,
-    menuTrigger: "focus"
-  }, function (item) {
-    var _context, _context2;
-
-    return (0, _react2.jsx)(_index.Item, {
-      key: item[0]
-    }, (0, _concat["default"])(_context = (0, _concat["default"])(_context2 = "".concat(item[1].name)).call(_context2, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context, item[1].phone.split(',')[0]));
-  }), (0, _react2.jsx)(_Box["default"], {
-    width: "100%",
-    ml: 110
-  }, (0, _react2.jsx)(_Input["default"], {
-    placeholder: "Phone number...",
-    onChange: onPhoneNumberValueChange,
-    value: phoneNumber
-  })));
-};
-
-exports.Default = Default;