@via-profit/ui-kit 0.3.0 → 0.5.0

package/PhoneField/UnknownFlag.js

@@ -1,34 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("@emotion/react");
-const UnknownFlag = (props, ref) => {
-    const { color } = (0, react_1.useTheme)();
-    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 512 512", ref: ref }, props),
-        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m-78.682-31.951h512v512h-512z", fill: color.surface.toString(), strokeLinejoin: "round", strokeWidth: "2.176" }),
-        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m177.32 288.09q-4.915 0-8.0953-3.1803-3.1803-3.4694-3.1803-8.3844 0-11.854 5.7824-25.153 5.7823-13.299 15.612-22.551l7.2279-6.6497q9.83-9.2518 15.323-15.323 5.4932-6.3606 8.9626-15.034 3.7585-8.9626 3.7585-20.527 0-11.276-5.4932-20.527-5.4932-9.5409-15.612-15.034-10.119-5.4932-23.129-5.4932-21.395 0-34.116 13.01-12.432 12.721-12.432 33.248 0 4.915-3.1803 8.0953-2.8912 2.8912-7.8062 2.8912t-8.0953-2.8912q-3.1803-3.1803-3.1803-8.0953 0-19.66 8.6735-34.983 8.6735-15.323 24.286-23.997 15.612-8.6735 35.851-8.6735 19.082 0 34.116 8.3844 15.323 8.0953 23.708 22.551 8.6735 14.456 8.6735 32.67 0 14.167-4.6259 24.864-4.6259 10.408-11.854 18.503-6.9388 8.0953-19.949 19.949l-5.2041 4.6259q-8.0953 7.2279-11.565 17.058-3.1803 9.5409-3.1803 19.082 0 4.915-3.1803 8.3844-3.1803 3.1803-8.0953 3.1803zm0 51.174q-7.2279 0-12.143-4.915-4.6259-4.915-4.6259-11.854 0-7.2279 4.915-12.143 4.915-4.915 11.854-4.915t11.854 4.915q5.2041 4.915 5.2041 12.143 0 6.9388-5.2041 11.854-4.915 4.915-11.854 4.915z", fill: color.textPrimary.toString(), strokeWidth: ".72279" })));
-};
-exports.default = React.forwardRef(UnknownFlag);
+const Unknown_1 = __importDefault(require("./flags/Unknown"));
+/**
+ * The placeholder that PhoneField shows instead of the flag when the country is not detected
+ */
+const UnknownFlag = Unknown_1.default;
+exports.default = UnknownFlag;

package/PhoneField/flags/BY.js

@@ -0,0 +1,39 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const BY = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em", "aria-hidden": (0, isLabelled_1.default)(props) ? undefined : true, role: (0, isLabelled_1.default)(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#007C30", d: "M0 0h513v342H0z" }),
+    React.createElement("path", { fill: "#CE1720", d: "M0 230h513V0H0" }),
+    React.createElement("path", { fill: "#FFF", d: "M100 230V0H0v342h513-413z" }),
+    React.createElement("g", { fill: "#CE1720" },
+        React.createElement("path", { d: "M28 159.6 8.6 128.2 28 97.4l19.3 30.8zM72.6 159.6l-19.3-31.4 19.3-30.8L92 128.2zM28 241.2 8.6 209.8 28 179l19.3 30.8zM72.6 241.2l-19.3-31.4L72.6 179 92 209.8z" })),
+    React.createElement("g", { fill: "none", stroke: "#CE1720", strokeWidth: "7" },
+        React.createElement("path", { d: "m28 73.8-16.1-26L28 22.2l16 25.6zM72.6 73.8l-16-26 16-25.6 16.1 25.6zM28 318l-16.1-26.1L28 266.3l16 25.6zM72.6 318l-16-26.1 16-25.6 16.1 25.6z" }))));
+exports.default = React.forwardRef(BY);

package/PhoneField/flags/CN.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const CN = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em", "aria-hidden": (0, isLabelled_1.default)(props) ? undefined : true, role: (0, isLabelled_1.default)(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#D80027", d: "M0 0h513v342H0z" }),
+    React.createElement("g", { fill: "#FFDA44" },
+        React.createElement("path", { d: "m226.8 239.2-9.7-15.6-17.9 4.4 11.9-14.1-9.7-15.6 17.1 6.9 11.8-14.1-1.3 18.4 17.1 6.9-17.9 4.4zM290.6 82l-10.1 15.4 11.6 14.3-17.7-4.8-10.1 15.5-1-18.4-17.7-4.8 17.2-6.6-1-18.4 11.6 14.3zM236.2 25.4l-2 18.3 16.8 7.6-18 3.8-2 18.3-9.2-16-17.9 3.8 12.3-13.7-9.2-15.9 16.8 7.5zM292.8 161.8l-14.9 10.9 5.8 17.5-14.9-10.8-14.9 11 5.6-17.6-14.9-10.7 18.4-.1 5.6-17.6 5.8 17.5zM115 46.3l17.3 53.5h56.2l-45.4 32.9 17.3 53.5-45.4-33-45.5 33 17.4-53.5-45.5-32.9h56.3z" }))));
+exports.default = React.forwardRef(CN);

package/PhoneField/flags/IL.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const IL = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em", "aria-hidden": (0, isLabelled_1.default)(props) ? undefined : true, role: (0, isLabelled_1.default)(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#FFF", d: "M0 0h513v342H0z" }),
+    React.createElement("g", { fill: "#2E52B2" },
+        React.createElement("path", { d: "M340.6 122.4h-56.1l-28-48.6-28 48.6h-56.1l28 48.6-28 48.6h56.1l28 48.6 28-48.6h56.1l-28-48.6 28-48.6zM293.2 171 276 204.2h-38.9L219.8 171l17.2-33.2h38.9l17.3 33.2zm-36.7-71.8 11.9 23.3h-23.9l12-23.3zm-58.3 38.6h23.9l-10.8 21-13.1-21zm0 66.4 13-22.1 11.9 22.1h-24.9zm58.3 37.5-11.9-22.1h23.9l-12 22.1zm59.4-37.5h-25l11.9-22.1 13.1 22.1zm-26.1-66.4h26.1l-13 22.1-13.1-22.1zM0 21.3h512V64H0zM0 277.3h512V320H0z" }))));
+exports.default = React.forwardRef(IL);

package/PhoneField/flags/JP.js

@@ -0,0 +1,34 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const JP = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em", "aria-hidden": (0, isLabelled_1.default)(props) ? undefined : true, role: (0, isLabelled_1.default)(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#FFF", d: "M0 0h512v342H0z" }),
+    React.createElement("circle", { fill: "#D80027", cx: "256.5", cy: "171", r: "96" })));
+exports.default = React.forwardRef(JP);

package/PhoneField/flags/KZ.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const KZ = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em", "aria-hidden": (0, isLabelled_1.default)(props) ? undefined : true, role: (0, isLabelled_1.default)(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#36B6CC", d: "M0 0h513v342H0V0z" }),
+    React.createElement("circle", { fill: "#FFD400", cx: "256.5", cy: "170.9", r: "68.4" }),
+    React.createElement("path", { fill: "#FFD400", d: "m256.5 251.5-27.9 41.7-7.1-49.7-43.2 25.5 15.2-47.8-50 4.2 34.4-36.5-46.9-18 46.8-18-34.4-36.5 50 4.2-15.2-47.8 43.2 25.4 7.1-49.7 27.9 41.7 27.9-41.7 7.1 49.7 43.2-25.4-15.2 47.8 50-4.2-34.3 36.6 46.8 17.9-46.8 18 34.4 36.5-50-4.2 15.2 47.8-43.2-25.4-7.1 49.7c0-.1-27.9-41.8-27.9-41.8zm0-.8c44.1 0 79.9-35.8 79.9-79.9S300.6 91 256.5 91s-79.9 35.8-79.9 79.9 35.8 79.8 79.9 79.8zM22.8 28.3c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6V28.3zm0 45.7c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6V74zm0 45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0 45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0 45.7c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0 45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0 45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm22.8-22.8c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0-45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7V245c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0-45.7c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6V188zm0-45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0-45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6V96.8zm0-45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6V51.2z" })));
+exports.default = React.forwardRef(KZ);

package/PhoneField/flags/RU.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const RU = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 85.333 512 341.333", width: "1.5em", height: "1em", "aria-hidden": (0, isLabelled_1.default)(props) ? undefined : true, role: (0, isLabelled_1.default)(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#FFF", d: "M0 85.33v341.332h512V85.33z" }),
+    React.createElement("path", { fill: "#0052B4", d: "M0 85.333h512V426.67H0z" }),
+    React.createElement("path", { fill: "#FFF", d: "M0 85.333h512v113.775H0z" }),
+    React.createElement("path", { strokeWidth: "32", fill: "#D80027", d: "M0 312.884h512v113.775H0z" })));
+exports.default = React.forwardRef(RU);

package/PhoneField/flags/UA.js

@@ -0,0 +1,34 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const UA = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 85.333 512 341.333", width: "1.5em", height: "1em", "aria-hidden": (0, isLabelled_1.default)(props) ? undefined : true, role: (0, isLabelled_1.default)(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#FFDA44", d: "M0 85.337h512v341.326H0z" }),
+    React.createElement("path", { fill: "#338AF3", d: "M0 85.337h512V256H0z" })));
+exports.default = React.forwardRef(UA);

package/PhoneField/flags/US.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const US = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em", "aria-hidden": (0, isLabelled_1.default)(props) ? undefined : true, role: (0, isLabelled_1.default)(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#FFF", d: "M0 0h513v342H0z" }),
+    React.createElement("g", { fill: "#D80027" },
+        React.createElement("path", { d: "M0 0h513v26.3H0zM0 52.6h513v26.3H0zM0 105.2h513v26.3H0zM0 157.8h513v26.3H0zM0 210.5h513v26.3H0zM0 263.1h513v26.3H0zM0 315.7h513V342H0z" })),
+    React.createElement("path", { fill: "#2E52B2", d: "M0 0h256.5v184.1H0z" }),
+    React.createElement("g", { fill: "#FFF" },
+        React.createElement("path", { d: "m47.8 138.9-4-12.8-4.4 12.8H26.2l10.7 7.7-4 12.8 10.9-7.9 10.6 7.9-4.1-12.8 10.9-7.7zM104.1 138.9l-4.1-12.8-4.2 12.8H82.6l10.7 7.7-4 12.8 10.7-7.9 10.8 7.9-4-12.8 10.7-7.7zM160.6 138.9l-4.3-12.8-4 12.8h-13.5l11 7.7-4.2 12.8 10.7-7.9 11 7.9-4.2-12.8 10.7-7.7zM216.8 138.9l-4-12.8-4.2 12.8h-13.3l10.8 7.7-4 12.8 10.7-7.9 10.8 7.9-4.3-12.8 11-7.7zM100 75.3l-4.2 12.8H82.6L93.3 96l-4 12.6 10.7-7.8 10.8 7.8-4-12.6 10.7-7.9h-13.4zM43.8 75.3l-4.4 12.8H26.2L36.9 96l-4 12.6 10.9-7.8 10.6 7.8L50.3 96l10.9-7.9H47.8zM156.3 75.3l-4 12.8h-13.5l11 7.9-4.2 12.6 10.7-7.8 11 7.8-4.2-12.6 10.7-7.9h-13.2zM212.8 75.3l-4.2 12.8h-13.3l10.8 7.9-4 12.6 10.7-7.8 10.8 7.8-4.3-12.6 11-7.9h-13.5zM43.8 24.7l-4.4 12.6H26.2l10.7 7.9-4 12.7L43.8 50l10.6 7.9-4.1-12.7 10.9-7.9H47.8zM100 24.7l-4.2 12.6H82.6l10.7 7.9-4 12.7L100 50l10.8 7.9-4-12.7 10.7-7.9h-13.4zM156.3 24.7l-4 12.6h-13.5l11 7.9-4.2 12.7 10.7-7.9 11 7.9-4.2-12.7 10.7-7.9h-13.2zM212.8 24.7l-4.2 12.6h-13.3l10.8 7.9-4 12.7 10.7-7.9 10.8 7.9-4.3-12.7 11-7.9h-13.5z" }))));
+exports.default = React.forwardRef(US);

package/PhoneField/flags/Unknown.js

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_1 = require("@emotion/react");
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+/**
+ * The placeholder for an unknown country. The same 3:2 size as the flags,
+ * so replacing it with a flag does not shift the layout
+ */
+const Unknown = (props, ref) => {
+    const { color } = (0, react_1.useTheme)();
+    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1.5em", height: "1em", viewBox: "0 0 768 512", "aria-hidden": (0, isLabelled_1.default)(props) ? undefined : true, role: (0, isLabelled_1.default)(props) ? 'img' : undefined }, props, { ref: ref }),
+        React.createElement("rect", { width: "768", height: "512", fill: color.surface.darken(10).toString() }),
+        React.createElement("path", { transform: "translate(206.682 31.951)", d: "m177.32 288.09q-4.915 0-8.0953-3.1803-3.1803-3.4694-3.1803-8.3844 0-11.854 5.7824-25.153 5.7823-13.299 15.612-22.551l7.2279-6.6497q9.83-9.2518 15.323-15.323 5.4932-6.3606 8.9626-15.034 3.7585-8.9626 3.7585-20.527 0-11.276-5.4932-20.527-5.4932-9.5409-15.612-15.034-10.119-5.4932-23.129-5.4932-21.395 0-34.116 13.01-12.432 12.721-12.432 33.248 0 4.915-3.1803 8.0953-2.8912 2.8912-7.8062 2.8912t-8.0953-2.8912q-3.1803-3.1803-3.1803-8.0953 0-19.66 8.6735-34.983 8.6735-15.323 24.286-23.997 15.612-8.6735 35.851-8.6735 19.082 0 34.116 8.3844 15.323 8.0953 23.708 22.551 8.6735 14.456 8.6735 32.67 0 14.167-4.6259 24.864-4.6259 10.408-11.854 18.503-6.9388 8.0953-19.949 19.949l-5.2041 4.6259q-8.0953 7.2279-11.565 17.058-3.1803 9.5409-3.1803 19.082 0 4.915-3.1803 8.3844-3.1803 3.1803-8.0953 3.1803zm0 51.174q-7.2279 0-12.143-4.915-4.6259-4.915-4.6259-11.854 0-7.2279 4.915-12.143 4.915-4.915 11.854-4.915t11.854 4.915q5.2041 4.915 5.2041 12.143 0 6.9388-5.2041 11.854-4.915 4.915-11.854 4.915z", fill: color.textPrimary.alpha(0.6).toString() })));
+};
+exports.default = React.forwardRef(Unknown);

package/PhoneField/flags/isLabelled.d.ts

@@ -0,0 +1,6 @@
+import type * as React from 'react';
+/**
+ * A flag is decorative (hidden from screen readers) until it gets a label
+ */
+declare const isLabelled: (props: React.SVGProps<SVGSVGElement>) => boolean;
+export default isLabelled;

package/PhoneField/flags/isLabelled.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * A flag is decorative (hidden from screen readers) until it gets a label
+ */
+const isLabelled = (props) => Boolean(props['aria-label'] || props['aria-labelledby']);
+exports.default = isLabelled;

package/PhoneField/index.js

@@ -29,71 +29,61 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const TextField_1 = __importDefault(require("../TextField"));
+const MaskedField_1 = __importDefault(require("../MaskedField"));
 const usePhoneUtils_1 = require("./usePhoneUtils");
 const CountryFlagComponent_1 = __importDefault(require("./CountryFlagComponent"));
 const PhoneField = (props, ref) => {
+    var _a, _b;
     const { value, templates, inputRef, withoutCountryFlag, onChange } = props, textFieldProps = __rest(props, ["value", "templates", "inputRef", "withoutCountryFlag", "onChange"]);
-    const { formatParsedInput, parseInput, parseAndFormat } = (0, usePhoneUtils_1.usePhoneUtils)({ templates });
+    const { parseInput, parseAndFormat, getTemplateInfo } = (0, usePhoneUtils_1.usePhoneUtils)({ templates });
     const textInputRef = react_1.default.useRef(null);
-    const initialValue = react_1.default.useRef(value);
-    const [state, setState] = react_1.default.useState(() => {
-        const { text, countryCode, placeholder, number, CountryFlag } = parseAndFormat(String(initialValue.current));
-        return {
-            currentValue: text,
-            number,
-            countryCode,
-            placeholder,
-            CountryFlag,
-        };
-    });
-    const { countryCode, currentValue, placeholder, CountryFlag } = state;
+    // The current text of the field: the flag and the placeholder follow it
+    const [currentValue, setCurrentValue] = react_1.default.useState(() => parseAndFormat(String(value)).text);
+    const lastValue = react_1.default.useRef(value);
     react_1.default.useEffect(() => {
-        if (initialValue.current !== value) {
-            initialValue.current = value;
-            const formatted = parseAndFormat(String(value));
-            if (formatted.text !== currentValue) {
-                setState(prev => (Object.assign(Object.assign({}, prev), { currentValue: formatted.text, countryCode: formatted.countryCode, placeholder: formatted.placeholder, CountryFlag: formatted.CountryFlag })));
-            }
+        if (lastValue.current !== value) {
+            lastValue.current = value;
+            setCurrentValue(parseAndFormat(String(value)).text);
         }
-    }, [countryCode, currentValue, parseAndFormat, placeholder, value]);
-    const handleChange = event => {
+    }, [parseAndFormat, value]);
+    const { CountryFlag, placeholder } = react_1.default.useMemo(() => parseAndFormat(currentValue), [parseAndFormat, currentValue]);
+    // <MaskedField> gets the phone-specific parsing and the mask of the detected template
+    const parsePhone = react_1.default.useCallback((input, _mask, caret) => (0, usePhoneUtils_1.dropExtraPluses)(parseInput(input, caret)), [parseInput]);
+    const getMask = react_1.default.useCallback((input) => (0, usePhoneUtils_1.templateToMask)(getTemplateInfo(parsePhone(input, []).text).template), [getTemplateInfo, parsePhone]);
+    const handleChange = react_1.default.useCallback((payload, event) => {
         var _a;
-        const parsed = parseInput(String(event.currentTarget.value), ((_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0);
-        const { caret, text, template, placeholder, countryCode, callingCode, CountryFlag, number, isValid, } = formatParsedInput(parsed.text, parsed.caret);
-        onChange(Object.assign(Object.assign({}, event), { currentTarget: Object.assign(Object.assign({}, event.currentTarget), { value: text }) }), {
-            value: text,
-            placeholder,
-            CountryFlag,
-            template,
-            countryCode,
-            callingCode,
-            number,
-            isValid,
-            combined: `${callingCode !== null && callingCode !== void 0 ? callingCode : ''}${number}`,
+        const formatted = parseAndFormat(payload.text);
+        setCurrentValue(payload.text);
+        onChange(event, {
+            value: payload.text,
+            placeholder: formatted.placeholder,
+            CountryFlag: formatted.CountryFlag,
+            template: formatted.template,
+            countryCode: formatted.countryCode,
+            callingCode: formatted.callingCode,
+            number: formatted.number,
+            isValid: formatted.isValid,
+            combined: `${(_a = formatted.callingCode) !== null && _a !== void 0 ? _a : ''}${formatted.number}`,
         });
-        setState(prev => (Object.assign(Object.assign({}, prev), { currentValue: text, countryCode,
-            placeholder,
-            CountryFlag })));
-        setTimeout(() => {
-            var _a;
-            (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(caret, caret);
-        }, 15);
-    };
-    return (react_1.default.createElement(TextField_1.default, Object.assign({ ref: ref, startIcon: react_1.default.useMemo(() => withoutCountryFlag ? undefined : (react_1.default.createElement(CountryFlagComponent_1.default, { flag: CountryFlag, onClick: () => {
-                if (textInputRef.current) {
-                    textInputRef.current.select();
-                    textInputRef.current.focus();
-                }
-            } })), [CountryFlag, withoutCountryFlag]) }, textFieldProps, { value: currentValue, placeholder: placeholder, onChange: handleChange, inputRef: input => {
-            textInputRef.current = input;
-            if (typeof inputRef === 'function') {
-                inputRef(input);
-            }
-            if (inputRef && typeof inputRef === 'object') {
-                inputRef.current = input;
+    }, [onChange, parseAndFormat]);
+    const setInputRef = react_1.default.useCallback((input) => {
+        textInputRef.current = input;
+        if (typeof inputRef === 'function') {
+            inputRef(input);
+        }
+        if (inputRef && typeof inputRef === 'object') {
+            inputRef.current = input;
+        }
+    }, [inputRef]);
+    const startIcon = react_1.default.useMemo(() => withoutCountryFlag ? undefined : (react_1.default.createElement(CountryFlagComponent_1.default, { flag: CountryFlag, onClick: () => {
+            if (textInputRef.current) {
+                textInputRef.current.select();
+                textInputRef.current.focus();
             }
-        } })));
+        } })), [CountryFlag, withoutCountryFlag]);
+    return (react_1.default.createElement(MaskedField_1.default, Object.assign({ ref: ref }, textFieldProps, { 
+        // An explicit `startIcon={undefined}` (e.g. from <Autocomplete>) must not hide the flag
+        startIcon: (_a = textFieldProps.startIcon) !== null && _a !== void 0 ? _a : startIcon, value: value, mask: getMask, parseInput: parsePhone, placeholder: (_b = textFieldProps.placeholder) !== null && _b !== void 0 ? _b : placeholder, onChange: handleChange, inputRef: setInputRef })));
 };
 exports.default = react_1.default.forwardRef(PhoneField);
 __exportStar(require("./usePhoneUtils"), exports);

package/PhoneField/templates.js

@@ -6,41 +6,40 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.templates = void 0;
 const react_1 = __importDefault(require("react"));
 // import UnknownFlag from './UnknownFlag';
-const RU_1 = __importDefault(require("../CountryFlags/RU"));
-const BY_1 = __importDefault(require("../CountryFlags/BY"));
-const KZ_1 = __importDefault(require("../CountryFlags/KZ"));
-const UA_1 = __importDefault(require("../CountryFlags/UA"));
-const JP_1 = __importDefault(require("../CountryFlags/JP"));
-const US_1 = __importDefault(require("../CountryFlags/US"));
-const IL_1 = __importDefault(require("../CountryFlags/IL"));
-const CN_1 = __importDefault(require("../CountryFlags/CN"));
+const RU_1 = __importDefault(require("./flags/RU"));
+const BY_1 = __importDefault(require("./flags/BY"));
+const KZ_1 = __importDefault(require("./flags/KZ"));
+const UA_1 = __importDefault(require("./flags/UA"));
+const JP_1 = __importDefault(require("./flags/JP"));
+const US_1 = __importDefault(require("./flags/US"));
+const IL_1 = __importDefault(require("./flags/IL"));
+const CN_1 = __importDefault(require("./flags/CN"));
 exports.templates = [
     // Russian template
     ['RU', react_1.default.createElement(RU_1.default, { key: "ru-1" }), '7', '+x (xxx) xxx-xx-xx', '+7 (987) 654-32-10', /^\+$/], // must be at first (Default RU)
-    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-2" }), '7', '8 (xxx) xxx-xx-xx', '8 (987) 654-32-10', /^8[^1]{0,}/], // 8912...
+    // 81... is Japan without «+»: Russian area codes never start with 1
+    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-2" }), '7', '8 (xxx) xxx-xx-xx', '8 (987) 654-32-10', /^8(?!1)/], // 8912...
     [
         'RU',
         react_1.default.createElement(RU_1.default, { key: "ru-3" }),
         '7',
         '+7 (xxx) xxx-xx-xx',
         '+7 (987) 654-32-10',
-        /^\+{0,1}7([0-5]|[8-9])[0-9][0-9]/,
+        // Also matches a bare «+7» while typing, so the flag does not blink; 76 and 77 are Kazakhstan
+        /^\+{0,1}7(?![67])/,
     ], // +79...
     // Other fucking countries
     ['BY', react_1.default.createElement(BY_1.default, { key: "by" }), '375', '+375 (xx) xxx-xx-xx', '+375 (98) 765-43-21', /^\+{0,1}375/],
     ['CN', react_1.default.createElement(CN_1.default, { key: "cn" }), '86', '+86 (xxx) xxxx-xxxx', '+86 (138) 0013-8000', /^\+{0,1}86/],
-    ['KZ', react_1.default.createElement(KZ_1.default, { key: "kz-1" }), '7', '+997 (xx) xxx-xx-xx', '+997 (98) 765-43-21', /^\+{0,1}997/],
-    [
-        'KZ',
-        react_1.default.createElement(KZ_1.default, { key: "kz-2" }),
-        '7',
-        '+7 (xxx) xxx-xx-xx',
-        '+7 (600) 765-43-21',
-        /^\+{0,1}7[6-7][0-9][0-9]/,
-    ], // +7600 - +7700
+    ['KZ', react_1.default.createElement(KZ_1.default, { key: "kz-1" }), '997', '+997 (xx) xxx-xx-xx', '+997 (98) 765-43-21', /^\+{0,1}997/],
+    ['KZ', react_1.default.createElement(KZ_1.default, { key: "kz-2" }), '7', '+7 (xxx) xxx-xx-xx', '+7 (600) 765-43-21', /^\+{0,1}7[67]/], // +76, +77
     ['UA', react_1.default.createElement(UA_1.default, { key: "ua" }), '380', '+380 (xx) xxx-xxxx', '+380 (98) 765-4321', /^\+{0,1}380/],
-    ['JP', react_1.default.createElement(JP_1.default, { key: "jp" }), '81', '+81 (xx) xxx-xxxx', '+81 (98) 765-4321', /^\+{0,1}81/],
-    ['US', react_1.default.createElement(US_1.default, { key: "us" }), '1', '+1 xxx xxx-xx-xx', '+1 987 654-32-10', /^\+{0,1}1/],
-    ['IL', react_1.default.createElement(IL_1.default, { key: "il" }), '972', '+972 xx xxx-xx-xx', '+972 65 432-10-01', /^\+972/],
+    // Mobile numbers (070, 080, 090) have 10 digits, landlines have 9
+    ['JP', react_1.default.createElement(JP_1.default, { key: "jp-1" }), '81', '+81 (xx) xxxx-xxxx', '+81 (90) 1234-5678', /^\+{0,1}81[789]0/],
+    ['JP', react_1.default.createElement(JP_1.default, { key: "jp-2" }), '81', '+81 (xx) xxx-xxxx', '+81 (98) 765-4321', /^\+{0,1}81/],
+    ['US', react_1.default.createElement(US_1.default, { key: "us" }), '1', '+1 (xxx) xxx-xxxx', '+1 (987) 654-3210', /^\+{0,1}1/],
+    // Mobile (5x) and VoIP (7x) numbers have 9 digits, landlines have 8
+    ['IL', react_1.default.createElement(IL_1.default, { key: "il-1" }), '972', '+972 xx xxx-xx-xx', '+972 50 432-10-01', /^\+{0,1}972[57]/],
+    ['IL', react_1.default.createElement(IL_1.default, { key: "il-2" }), '972', '+972 x xxx-xxxx', '+972 3 432-1001', /^\+{0,1}972/],
 ];
 exports.default = exports.templates;

package/PhoneField/usePhoneUtils.d.ts

@@ -1,4 +1,5 @@
 import type { CountryCode, PhoneTemplate, CountryFlag } from './templates';
+import { Mask } from '../MaskedField/useMasked';
 export interface Formatted {
     readonly text: string;
     readonly caret: number;
@@ -26,6 +27,20 @@ type Validate = (inputValue: string, template: string) => boolean;
 type Format = (text: string, caret: number, defaultCountry?: string | null) => Formatted;
 type ParseAndValidate = (inputValue: string) => boolean;
 type ParseAndFormat = (inputValue: string, caret?: number) => Formatted;
+/**
+ * Converts a phone template to a mask: «x» is a digit, other chars are literals
+ */
+export declare const templateToMask: (template: string) => Mask;
+/**
+ * «+» is allowed only as the first char of a parsed phone, the other ones are dropped
+ */
+export declare const dropExtraPluses: (parsed: {
+    readonly text: string;
+    readonly caret: number;
+}) => {
+    text: string;
+    caret: number;
+};
 export declare const usePhoneUtils: (params: {
     templates: readonly PhoneTemplate[];
 }) => {