@via-profit/ui-kit 0.2.6 → 0.4.0

package/CountryFlags/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/CountryFlags/VA.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 VA = (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" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const VA = (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.331h512v341.326H0z" }),
     React.createElement("path", { fill: "#FFF", d: "M256 85.331h256v341.337H256z" }),
     React.createElement("path", { fill: "#ACABB1", d: "m321.353 233.837 32.073 42.43c-5.053 7.651-5.026 17.961.817 25.692 7.414 9.807 21.374 11.748 31.182 4.335 9.807-7.414 11.748-21.374 4.334-31.182-5.843-7.731-15.756-10.568-24.495-7.795l-49.988-66.129-11.838 8.949-17.759 13.424 17.899 23.677 17.775-13.401zm46.175 48.78a7.421 7.421 0 1 1 8.95 11.84 7.421 7.421 0 0 1-8.95-11.84z" }),

package/CountryFlags/VC.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 VC = (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" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const VC = (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.331h512v341.337H0z" }),
     React.createElement("path", { fill: "#338AF3", d: "M0 85.331h170.663v341.337H0z" }),
     React.createElement("g", { fill: "#6DA544" },

package/CountryFlags/VE.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 VE = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 22.5 15", width: "1.5em", height: "1em" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const VE = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 22.5 15", 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: "#FFCE00", d: "M0 0h22.5v5H0z" }),
     React.createElement("path", { fill: "#203899", d: "M0 5h22.5v5H0z" }),
     React.createElement("path", { fill: "#D82B2B", d: "M0 10h22.5v5H0z" }),

package/CountryFlags/VG.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 VG = (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" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const VG = (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: "#0052B4", d: "M0 85.334h512v341.337H0z" }),
     React.createElement("path", { fill: "#FFF", d: "M256 85.334V202.66h-46.069L256 233.38v22.617h-22.628L160 207.078v48.919H96v-48.919l-73.372 48.919H0V233.38l46.069-30.72H0v-64h46.069L0 107.951V85.334h22.628L96 134.241V85.334h64v48.907l73.372-48.907z" }),
     React.createElement("g", { fill: "#D80027" },

package/CountryFlags/VI.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 VI = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 341.3", width: "1.5em", height: "1em" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const VI = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 341.3", 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 0h512v341.3H0z" }),
     React.createElement("path", { fill: "#1583C4", d: "m397.7 166.3-51 97.7c-1.1 2-.3 4.5 1.8 5.6 2 1.1 4.5.3 5.6-1.8l51-97.7c1-2.1.1-4.6-2-5.5-2-.9-4.3-.2-5.4 1.7z" }),
     React.createElement("path", { fill: "#1583C4", d: "m404.9 188-57.8 75.4c-1.3 1.9-.8 4.5 1.1 5.8 1.7 1.2 4.1.9 5.5-.7l57.8-75.4c1.4-1.8 1.1-4.4-.8-5.8-1.8-1.5-4.4-1.1-5.8.7z" }),

package/CountryFlags/VN.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 VN = (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" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const VN = (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: "#D80027", d: "M196.641 85.337H0v341.326h512V85.337z" }),
     React.createElement("path", { fill: "#FFDA44", d: "m256 157.279 22.663 69.747H352l-59.332 43.106 22.664 69.749L256 296.774l-59.332 43.107 22.664-69.749L160 227.026h73.337z" })));
 exports.default = React.forwardRef(VN);

package/CountryFlags/VU.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 VU = (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" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const VU = (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", { d: "M0 85.337h512v341.326H0z" }),
     React.createElement("path", { fill: "#6DA544", d: "M512 256v170.663H0L215.185 256z" }),
     React.createElement("path", { fill: "#D80027", d: "M512 85.337V256H215.185L0 85.337z" }),

package/CountryFlags/WF.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 WF = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 150 100", width: "1.5em", height: "1em" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const WF = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 150 100", 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: "#ED2939", d: "M0 0h150v100H0z" }),
     React.createElement("path", { fill: "#002395", d: "M0 0h20v44.33H0z" }),
     React.createElement("path", { fill: "#FFF", d: "M20 0h20v44.33H20z" }),

package/CountryFlags/WS.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 WS = (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" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const WS = (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: "#D80027", d: "M0 85.331h512v341.337H0z" }),
     React.createElement("path", { fill: "#0052B4", d: "M0 85.331h256v170.663H0z" }),
     React.createElement("g", { fill: "#FFF" },

package/CountryFlags/XK.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 XK = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 341.33", width: "1.5em", height: "1em" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const XK = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 341.33", 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: "#0052B4", d: "M0 0h512v341.34H0z" }),
     React.createElement("g", { fill: "#FFF" },
         React.createElement("path", { d: "m220.72 42.63 7.95 16.11 17.77 2.58-12.86 12.54 3.04 17.7-15.9-8.36-15.9 8.36 3.03-17.7-12.86-12.54 17.78-2.58zM291.28 42.57l7.95 16.1 17.78 2.59-12.86 12.53 3.03 17.71-15.9-8.36-15.9 8.36 3.04-17.71-12.86-12.53 17.77-2.59zM353.36 53.93l7.95 16.11 17.77 2.58-12.86 12.54 3.04 17.7-15.9-8.35-15.9 8.35 3.04-17.7-12.87-12.54 17.78-2.58zM416.37 72.23l7.95 16.11 17.77 2.59-12.86 12.53 3.04 17.71-15.9-8.36-15.9 8.36 3.03-17.71-12.86-12.53 17.78-2.59zM158.64 53.93l7.95 16.11 17.78 2.58-12.87 12.54 3.04 17.7-15.9-8.35-15.9 8.35 3.04-17.7-12.86-12.54 17.77-2.58zM95.63 72.23l7.95 16.11 17.78 2.59-12.86 12.53 3.03 17.71-15.9-8.36-15.9 8.36 3.04-17.71-12.86-12.53 17.77-2.59z" })),

package/CountryFlags/YE.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 YE = (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" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const YE = (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.337h512v341.326H0z" }),
     React.createElement("path", { fill: "#D80027", d: "M0 85.337h512v113.775H0z" }),
     React.createElement("path", { d: "M0 312.888h512v113.775H0z" })));

package/CountryFlags/YT.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 YT = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 90 60", width: "1.5em", height: "1em" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const YT = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 90 60", 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 0h90v60H0z" }),
     React.createElement("path", { stroke: "#7f7f7f", strokeWidth: ".25", fill: "#ABABAB", d: "M75.6 39.6c-1.1.7 0 1.8-.6 1.9-.6.1-1.5-1.4-.2-2.5 1.6-1.5 5.8 0 5.9 4.3 0 2.2-.9 6.8-7.2 6.8-7.6 0-11.4-5.7-11.4-11.4 0-4.8 3.7-13.5 6.5-14.6 3.1-1.2 6.7-3.5 6.8-5 0-.5-1.4-.1-3.3.9-3.1 1.7-6.6 2.5-6.6 1.4s2.9-3.1 4-4.6c1.2-1.6.9-5.5 3-5.5 7.6 0 9.9 7.7 7 11.7-1.9 2.6 4.3 1 4.3 1s0 5.3-3.2 7.3c-3 1.8-4.8 3.9-4.8 3.9s.2-4.6-.5-3.9c-.6.7-11.1 4.5-10.3 12 .3 3 4.5 5.4 8.5 5.2s5.7-2.4 5.8-4.9c.1-3.9-3-4.4-3.7-4zM10.7 43.6c.1 2.5 1.8 4.7 5.8 4.9s8.2-2.2 8.5-5.2c.8-7.5-9.7-11.3-10.3-12-.7-.7-.5 3.9-.5 3.9s-1.8-2.1-4.8-3.9c-3.2-2-3.2-7.3-3.2-7.3s6.2 1.6 4.3-1c-2.9-4-.6-11.7 7-11.7 2.1 0 1.8 3.9 3 5.5 1.1 1.5 4 3.5 4 4.6s-3.5.3-6.6-1.4c-1.9-1-3.3-1.4-3.3-.9.1 1.5 3.7 3.8 6.8 5 2.8 1.1 6.5 9.8 6.5 14.6 0 5.7-3.8 11.4-11.4 11.4-6.3 0-7.2-4.6-7.2-6.8.1-4.3 4.3-5.8 5.9-4.3 1.2 1.1.4 2.7-.2 2.5-.6-.1.6-1.2-.6-1.9-.6-.4-3.7.1-3.7 4z" }),
     React.createElement("path", { fill: "#DE393A", d: "M31 28.8v14c0 1.9 2.1 1.6 2.1 1.6h9.3c1.2 0 2.6 2.3 2.6 2.3s1.4-2.3 2.5-2.3h9.6s2 .2 2-1.8V28.7H31z" }),

package/CountryFlags/ZA.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 ZA = (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" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const ZA = (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.337h512v341.326H0z" }),
     React.createElement("path", { d: "M114.024 256.001 0 141.926v228.17z" }),
     React.createElement("path", { fill: "#ffb915", d: "M161.192 256 0 94.7v47.226l114.024 114.075L0 370.096v47.138z" }),

package/CountryFlags/ZM.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 ZM = (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" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const ZM = (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: "#496E2D", d: "M0 85.331h512v341.337H0z" }),
     React.createElement("path", { fill: "#FF9811", d: "M490.668 195.476h-48c0-8.836-7.164-16-16-16s-16 7.164-16 16h-48c0 8.836 7.697 16 16.533 16h-.533c0 8.836 7.162 16 16 16 0 8.836 7.162 16 16 16h32c8.836 0 16-7.164 16-16 8.836 0 16-7.164 16-16h-.533c8.837 0 16.533-7.164 16.533-16z" }),
     React.createElement("path", { fill: "#D80027", d: "M341.337 255.994h56.888v170.663h-56.888z" }),

package/CountryFlags/ZW.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 ZW = (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" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const ZW = (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", { d: "M0 85.333h512V426.67H0z" }),
     React.createElement("g", { fill: "#FFDA44" },
         React.createElement("path", { d: "M0 134.196h512v48.868H0zM0 329.668h512v48.868H0z" })),

package/CountryFlags/index.d.ts

@@ -254,4 +254,5 @@ import YT from './YT';
 import ZA from './ZA';
 import ZM from './ZM';
 import ZW from './ZW';
-export { AC, AD, AE, AF, AG, AI, AL, AM, AO, AQ, AR, AS, AT, AU, AW, AX, AZ, BA, BB, BD, BE, BF, BG, BH, BI, BJ, BL, BM, BN, BO, BQ, BR, BS, BT, BV, BW, BY, BZ, CA, CC, CD, CF, CG, CH, CI, CK, CL, CM, CN, CO, CR, CU, CV, CW, CX, CY, CZ, DE, DJ, DK, DM, DO, DZ, EC, EE, EG, EH, ER, ES, ET, EU, FI, FJ, FK, FM, FO, FR, GA, GB, GD, GEAB, GEOS, GE, GF, GG, GH, GI, GL, GM, GN, GP, GQ, GR, GS, GT, GU, GW, GY, HK, HM, HN, HR, HT, HU, IC, ID, IE, IL, IM, IN, IO, IQ, IR, IS, IT, JE, JM, JO, JP, KE, KG, KH, KI, KM, KN, KP, KR, KW, KY, KZ, LA, LB, LC, LI, LK, LR, LS, LT, LU, LV, LY, MA, MC, MD, ME, MF, MG, MH, MK, ML, MM, MN, MO, MP, MQ, MR, MS, MT, MU, MV, MW, MX, MY, MZ, NA, NC, NE, NF, NG, NI, NL, NO, NP, NR, NU, NZ, OM, PA, PE, PF, PG, PH, PK, PL, PM, PN, PR, PS, PT, PW, PY, QA, RE, RO, RS, RU, RW, SA, SB, SC, SD, SE, SG, SH, SI, SJ, SK, SL, SM, SN, SO, SR, SS, ST, SV, SX, SY, SZ, TA, TC, TD, TF, TG, TH, TJ, TK, TL, TM, TN, TO, TR, TT, TV, TW, TZ, UA, UG, UM, US, UY, UZ, VA, VC, VE, VG, VI, VN, VU, WF, WS, XK, YE, YT, ZA, ZM, ZW, };
+import Unknown from './Unknown';
+export { AC, AD, AE, AF, AG, AI, AL, AM, AO, AQ, AR, AS, AT, AU, AW, AX, AZ, BA, BB, BD, BE, BF, BG, BH, BI, BJ, BL, BM, BN, BO, BQ, BR, BS, BT, BV, BW, BY, BZ, CA, CC, CD, CF, CG, CH, CI, CK, CL, CM, CN, CO, CR, CU, CV, CW, CX, CY, CZ, DE, DJ, DK, DM, DO, DZ, EC, EE, EG, EH, ER, ES, ET, EU, FI, FJ, FK, FM, FO, FR, GA, GB, GD, GEAB, GEOS, GE, GF, GG, GH, GI, GL, GM, GN, GP, GQ, GR, GS, GT, GU, GW, GY, HK, HM, HN, HR, HT, HU, IC, ID, IE, IL, IM, IN, IO, IQ, IR, IS, IT, JE, JM, JO, JP, KE, KG, KH, KI, KM, KN, KP, KR, KW, KY, KZ, LA, LB, LC, LI, LK, LR, LS, LT, LU, LV, LY, MA, MC, MD, ME, MF, MG, MH, MK, ML, MM, MN, MO, MP, MQ, MR, MS, MT, MU, MV, MW, MX, MY, MZ, NA, NC, NE, NF, NG, NI, NL, NO, NP, NR, NU, NZ, OM, PA, PE, PF, PG, PH, PK, PL, PM, PN, PR, PS, PT, PW, PY, QA, RE, RO, RS, RU, RW, SA, SB, SC, SD, SE, SG, SH, SI, SJ, SK, SL, SM, SN, SO, SR, SS, ST, SV, SX, SY, SZ, TA, TC, TD, TF, TG, TH, TJ, TK, TL, TM, TN, TO, TR, TT, TV, TW, TZ, UA, UG, UM, US, UY, UZ, VA, VC, VE, VG, VI, VN, VU, WF, WS, XK, YE, YT, ZA, ZM, ZW, Unknown, };

package/CountryFlags/index.js

@@ -8,7 +8,7 @@ exports.HM = exports.HK = exports.GY = exports.GW = exports.GU = exports.GT = ex
 exports.ML = exports.MK = exports.MH = exports.MG = exports.MF = exports.ME = exports.MD = exports.MC = exports.MA = exports.LY = exports.LV = exports.LU = exports.LT = exports.LS = exports.LR = exports.LK = exports.LI = exports.LC = exports.LB = exports.LA = exports.KZ = exports.KY = exports.KW = exports.KR = exports.KP = exports.KN = exports.KM = exports.KI = exports.KH = exports.KG = exports.KE = exports.JP = exports.JO = exports.JM = exports.JE = exports.IT = exports.IS = exports.IR = exports.IQ = exports.IO = exports.IN = exports.IM = exports.IL = exports.IE = exports.ID = exports.IC = exports.HU = exports.HT = exports.HR = exports.HN = void 0;
 exports.SC = exports.SB = exports.SA = exports.RW = exports.RU = exports.RS = exports.RO = exports.RE = exports.QA = exports.PY = exports.PW = exports.PT = exports.PS = exports.PR = exports.PN = exports.PM = exports.PL = exports.PK = exports.PH = exports.PG = exports.PF = exports.PE = exports.PA = exports.OM = exports.NZ = exports.NU = exports.NR = exports.NP = exports.NO = exports.NL = exports.NI = exports.NG = exports.NF = exports.NE = exports.NC = exports.NA = exports.MZ = exports.MY = exports.MX = exports.MW = exports.MV = exports.MU = exports.MT = exports.MS = exports.MR = exports.MQ = exports.MP = exports.MO = exports.MN = exports.MM = void 0;
 exports.WS = exports.WF = exports.VU = exports.VN = exports.VI = exports.VG = exports.VE = exports.VC = exports.VA = exports.UZ = exports.UY = exports.US = exports.UM = exports.UG = exports.UA = exports.TZ = exports.TW = exports.TV = exports.TT = exports.TR = exports.TO = exports.TN = exports.TM = exports.TL = exports.TK = exports.TJ = exports.TH = exports.TG = exports.TF = exports.TD = exports.TC = exports.TA = exports.SZ = exports.SY = exports.SX = exports.SV = exports.ST = exports.SS = exports.SR = exports.SO = exports.SN = exports.SM = exports.SL = exports.SK = exports.SJ = exports.SI = exports.SH = exports.SG = exports.SE = exports.SD = void 0;
-exports.ZW = exports.ZM = exports.ZA = exports.YT = exports.YE = exports.XK = void 0;
+exports.Unknown = exports.ZW = exports.ZM = exports.ZA = exports.YT = exports.YE = exports.XK = void 0;
 /* eslint-disable import/max-dependencies */
 const AC_1 = __importDefault(require("./AC"));
 exports.AC = AC_1.default;
@@ -522,3 +522,5 @@ const ZM_1 = __importDefault(require("./ZM"));
 exports.ZM = ZM_1.default;
 const ZW_1 = __importDefault(require("./ZW"));
 exports.ZW = ZW_1.default;
+const Unknown_1 = __importDefault(require("./Unknown"));
+exports.Unknown = Unknown_1.default;

package/CountryFlags/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/CountryFlags/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/DatePicker/index.d.ts

@@ -8,19 +8,32 @@ export type DatePickerProps = Omit<TextFieldProps, 'value' | 'onChange' | 'overr
      */
     readonly value: Date | null;
     /**
-     * Will be invoked when date would be changed
+     * Will be invoked when date would be changed.\
+     * Receives `null` when the field was cleared
      */
-    readonly onChange: (date: Date) => void;
+    readonly onChange: (date: Date | null) => void;
     /**
-     * Date template like one of format: \
-     * `dd.mm.yyyy` or `yyyy/mm/dd`, etc.\
-     * Posibility chars: `y`, `Y`, `yy`, `yyyy`, `d`, `dd`, `D`, `m`, `mm`, `M`
+     * Date template, e.g. `dd.mm.yyyy` or `yyyy-mm-dd`.\
+     * Every char of the template is one char of the field, so use the fixed width parts:
+     * `dd` — day, `mm` — month, `yyyy` — year (`yy` — two digits of the year)
      */
     readonly template: string;
     /**
-     * Tooltip text for a calendar button
+     * The label of the calendar button for screen readers and the tooltip.
+     * Also the label of the calendar popup\
+     * **Default:** `Choose date`
      */
     readonly calendarButtonTooltip?: string;
+    /**
+     * The label of the «previous» button of the calendar\
+     * **Default:** `Previous`
+     */
+    readonly prevButtonLabel?: string;
+    /**
+     * The label of the «next» button of the calendar\
+     * **Default:** `Next`
+     */
+    readonly nextButtonLabel?: string;
     /**
      * Minimum date limit
      */
@@ -63,6 +76,10 @@ export type DatePickerProps = Omit<TextFieldProps, 'value' | 'onChange' | 'overr
     /**
      * Label for the Today button. If label passed, then button will be rendered
      */
+    readonly todayButtonLabel?: string;
+    /**
+     * @deprecated Use `todayButtonLabel` instead
+     */
     readonly toodayButtonLabel?: string;
     /**
      * Heading

package/DatePicker/index.js

@@ -49,23 +49,54 @@ const StyledMaskedField = (0, styled_1.default)(MaskedField_1.default) `
     `}
 `;
 const DatePicker = props => {
-    const { value, template, onChange, calendarButtonTooltip, readOnly, disabled, minDate = new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), maxDate = new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), weekStartDay = 'monday', locale = 'ru-RU', badges = [], displayLeadingZero = false, resetButtonLabel, toodayButtonLabel, heading, subheading, view, views, footer, overrides } = props, restInputProps = __rest(props, ["value", "template", "onChange", "calendarButtonTooltip", "readOnly", "disabled", "minDate", "maxDate", "weekStartDay", "locale", "badges", "displayLeadingZero", "resetButtonLabel", "toodayButtonLabel", "heading", "subheading", "view", "views", "footer", "overrides"]);
-    const { 
-    // Calendar overrides
-    Body, Cell, EmptyCell, Paper, Header, WeekRow, DateContainer, Toolbar, YearsSelector, MonthsSelector, MonthCell, DayBadge, Footer, ControlButton, Heading, Subheading, IconPrev, IconNext, WeekDaysBar, 
-    // Textfield overrides
-    Input, ErrorText, IconWrapper, InputWrapper, Label, Asterisk, Container, } = overrides || {};
+    const { value, template, onChange, calendarButtonTooltip, readOnly, disabled, minDate: inputMinDate, maxDate: inputMaxDate, weekStartDay = 'monday', locale = 'ru-RU', badges = [], displayLeadingZero = false, resetButtonLabel, todayButtonLabel: todayButtonLabelProp, toodayButtonLabel, markToday, weekDayLabelFormat, heading, subheading, view, views, footer, overrides, prevButtonLabel, nextButtonLabel, inputRef: userInputRef } = props, restInputProps = __rest(props, ["value", "template", "onChange", "calendarButtonTooltip", "readOnly", "disabled", "minDate", "maxDate", "weekStartDay", "locale", "badges", "displayLeadingZero", "resetButtonLabel", "todayButtonLabel", "toodayButtonLabel", "markToday", "weekDayLabelFormat", "heading", "subheading", "view", "views", "footer", "overrides", "prevButtonLabel", "nextButtonLabel", "inputRef"]);
+    const calendarLabel = calendarButtonTooltip !== null && calendarButtonTooltip !== void 0 ? calendarButtonTooltip : 'Choose date';
+    // The default limits are created once, otherwise every render invalidates the memoized values
+    const minDate = react_1.default.useMemo(() => inputMinDate !== null && inputMinDate !== void 0 ? inputMinDate : new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), [inputMinDate]);
+    const maxDate = react_1.default.useMemo(() => inputMaxDate !== null && inputMaxDate !== void 0 ? inputMaxDate : new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), [inputMaxDate]);
+    const inputRef = react_1.default.useRef(null);
+    const buttonRef = react_1.default.useRef(null);
+    const popperRef = react_1.default.useRef(null);
+    const setInputRef = react_1.default.useCallback((el) => {
+        inputRef.current = el;
+        if (typeof userInputRef === 'function') {
+            userInputRef(el);
+        }
+        else if (userInputRef) {
+            userInputRef.current = el;
+        }
+    }, [userInputRef]);
+    const todayButtonLabel = todayButtonLabelProp !== null && todayButtonLabelProp !== void 0 ? todayButtonLabelProp : toodayButtonLabel;
+    const calendarOverrides = react_1.default.useMemo(() => {
+        if (!overrides) {
+            return undefined;
+        }
+        const { Input: _Input, ErrorText: _ErrorText, IconWrapper: _IconWrapper, InputWrapper: _InputWrapper, Label: _Label, Asterisk: _Asterisk, Container: _Container } = overrides, rest = __rest(overrides, ["Input", "ErrorText", "IconWrapper", "InputWrapper", "Label", "Asterisk", "Container"]);
+        return rest;
+    }, [overrides]);
+    const textFieldOverrides = react_1.default.useMemo(() => {
+        if (!overrides) {
+            return undefined;
+        }
+        const { Input, ErrorText, IconWrapper, InputWrapper, Label, Asterisk, Container } = overrides;
+        return { Input, ErrorText, IconWrapper, InputWrapper, Label, Asterisk, Container };
+    }, [overrides]);
     const [currentValue, setCurrentValue] = react_1.default.useState(value);
     const valueRef = react_1.default.useRef(value);
     const [textFieldRef, setTextFieldRef] = react_1.default.useState(null);
     const [isOpen, setOpenSate] = react_1.default.useState(false);
     const { getMaskByTemplate, formatInputByTemplate, parseInputByTemplate } = (0, useDatePickerFormat_1.default)();
     react_1.default.useEffect(() => {
-        const a = value || new Date();
-        const b = valueRef.current || new Date();
-        if (a.getFullYear() !== b.getFullYear() ||
-            a.getMonth() !== b.getMonth() ||
-            a.getDate() !== b.getDate()) {
+        const a = value;
+        const b = valueRef.current;
+        // null <-> date transitions must be detected too
+        const isSameDay = a === b ||
+            (a !== null &&
+                b !== null &&
+                a.getFullYear() === b.getFullYear() &&
+                a.getMonth() === b.getMonth() &&
+                a.getDate() === b.getDate());
+        if (!isSameDay) {
             valueRef.current = value;
             setCurrentValue(value);
         }
@@ -82,12 +113,41 @@ const DatePicker = props => {
     }, [maxDate]);
     const handleClick = react_1.default.useCallback(() => {
         if (readOnly) {
-            setOpenSate(!isOpen);
+            setOpenSate(open => !open);
+        }
+    }, [readOnly]);
+    // The keyboard focus goes to the calendar when it is opened: the selected day, today or the first one
+    react_1.default.useEffect(() => {
+        if (!isOpen)
+            return undefined;
+        const frame = requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-date][tabindex="0"]')) === null || _b === void 0 ? void 0 : _b.focus();
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [isOpen]);
+    const close = react_1.default.useCallback(() => {
+        var _a, _b;
+        setOpenSate(false);
+        // Back to the field, so the keyboard user continues from the same place
+        (_b = (readOnly ? inputRef.current : ((_a = buttonRef.current) !== null && _a !== void 0 ? _a : inputRef.current))) === null || _b === void 0 ? void 0 : _b.focus();
+    }, [readOnly]);
+    const handlePopperKeyDown = react_1.default.useCallback((event) => {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            close();
         }
-    }, [isOpen, readOnly]);
-    const endIcon = react_1.default.useMemo(() => (react_1.default.createElement(Button_1.default, { disabled: disabled, iconOnly: true, variant: "plain", type: "button", onClick: () => setOpenSate(true), title: calendarButtonTooltip },
-        react_1.default.createElement(DatePickerIcon_1.default, null))), [calendarButtonTooltip, disabled]);
+    }, [close]);
+    const endIcon = react_1.default.useMemo(() => (react_1.default.createElement(Button_1.default, { ref: buttonRef, disabled: disabled, iconOnly: true, variant: "plain", type: "button", onClick: () => setOpenSate(open => !open), title: calendarLabel, "aria-label": calendarLabel, "aria-haspopup": "dialog", "aria-expanded": isOpen },
+        react_1.default.createElement(DatePickerIcon_1.default, null))), [calendarLabel, disabled, isOpen]);
     const handleChange = react_1.default.useCallback(({ isValid, text }) => {
+        // The field was cleared: the date is reset
+        if (text.trim() === '') {
+            if (currentValue !== null) {
+                onChange(null);
+            }
+            return;
+        }
         if (isValid) {
             const parsedDate = parseInputByTemplate(text, template);
             // Trying to parse the input date value
@@ -110,6 +170,7 @@ const DatePicker = props => {
             }
         }
     }, [
+        currentValue,
         isGreatherThenMinDate,
         isLessThenMaxDate,
         maxDate,
@@ -118,17 +179,17 @@ const DatePicker = props => {
         parseInputByTemplate,
         template,
     ]);
-    const calendarValue = react_1.default.useMemo(() => currentValue || new Date(), [currentValue]);
     const calendarChange = react_1.default.useCallback(date => {
-        if (date) {
-            onChange(date);
-        }
+        var _a;
+        // null comes from the «Reset» button of the calendar
+        onChange(date !== null && date !== void 0 ? date : null);
         setOpenSate(false);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [onChange]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(StyledMaskedField, Object.assign({ onClick: handleClick, disabled: disabled, mask: getMaskByTemplate(template), ref: setTextFieldRef, readOnly: readOnly, endIcon: endIcon }, restInputProps, { value: currentValue ? formatInputByTemplate(currentValue, template) : '', onChange: handleChange })),
-        react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: () => setOpenSate(false), mouseEvent: "onMouseDown" },
-            react_1.default.createElement(Popper_1.default, { isOpen: isOpen, anchorElement: textFieldRef },
-                react_1.default.createElement(Calendar_1.default, { minDate: minDate, maxDate: maxDate, weekStartDay: weekStartDay, locale: locale, badges: badges, displayLeadingZero: displayLeadingZero, resetButtonLabel: resetButtonLabel, todayButtonLabel: toodayButtonLabel, heading: heading, subheading: subheading, view: view, views: views, footer: footer, value: calendarValue, onChange: calendarChange })))));
+        react_1.default.createElement(StyledMaskedField, Object.assign({ onClick: handleClick, disabled: disabled, mask: getMaskByTemplate(template), ref: setTextFieldRef, readOnly: readOnly, endIcon: endIcon }, restInputProps, { inputRef: setInputRef, value: currentValue ? formatInputByTemplate(currentValue, template) : '', onChange: handleChange, overrides: textFieldOverrides })),
+        react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: () => setOpenSate(false), mouseEvent: "onMouseDown", ignoreElements: [textFieldRef] },
+            react_1.default.createElement(Popper_1.default, { ref: popperRef, isOpen: isOpen, anchorElement: textFieldRef, role: "dialog", "aria-label": calendarLabel, onKeyDown: handlePopperKeyDown },
+                react_1.default.createElement(Calendar_1.default, { minDate: minDate, maxDate: maxDate, weekStartDay: weekStartDay, locale: locale, badges: badges, displayLeadingZero: displayLeadingZero, resetButtonLabel: resetButtonLabel, todayButtonLabel: todayButtonLabel, markToday: markToday, weekDayLabelFormat: weekDayLabelFormat, heading: heading, subheading: subheading, view: view, views: views, footer: footer, prevButtonLabel: prevButtonLabel, nextButtonLabel: nextButtonLabel, value: currentValue, onChange: calendarChange, overrides: calendarOverrides })))));
 };
 exports.default = DatePicker;

package/DatePicker/useDatePickerFormat.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDatePickerFormat = void 0;
 const react_1 = __importDefault(require("react"));
 const useDatePickerFormat = () => {
-    const templateValidChars = react_1.default.useMemo(() => ['y', 'Y', 'yy', 'yyyy', 'd', 'dd', 'D', 'm', 'mm'], []);
+    const templateValidChars = react_1.default.useMemo(() => ['y', 'Y', 'yy', 'yyyy', 'YYYY', 'd', 'dd', 'D', 'DD', 'm', 'mm'], []);
     const isValidTemplate = react_1.default.useCallback((template) => {
         const matches = template.match(/[yYmMdD]+/g);
         if (!matches) {
@@ -48,12 +48,14 @@ const useDatePickerFormat = () => {
         template.split('').forEach((char, charIndex) => {
             switch (char) {
                 case 'y':
+                case 'Y':
                     data.years.push(input[charIndex]);
                     break;
                 case 'm':
                     data.months.push(input[charIndex]);
                     break;
                 case 'd':
+                case 'D':
                     data.days.push(input[charIndex]);
                     break;
                 default:
@@ -61,8 +63,23 @@ const useDatePickerFormat = () => {
                     break;
             }
         });
-        return new Date(parseInt(data.years.join(''), 10), parseInt(data.months.join(''), 10) - 1, // Fucking month indexes
-        parseInt(data.days.join(''), 10));
+        let year = parseInt(data.years.join(''), 10);
+        const month = parseInt(data.months.join(''), 10) - 1; // Fucking month indexes
+        const day = parseInt(data.days.join(''), 10);
+        if (isNaN(year) || isNaN(month) || isNaN(day)) {
+            return null;
+        }
+        // Two-digit year means the current century (new Date() maps 0-99 to 1900-1999)
+        if (data.years.length <= 2) {
+            year += 2000;
+        }
+        const date = new Date(year, month, day);
+        date.setFullYear(year);
+        // Reject overflowed dates like 31.02 instead of silently moving them to March
+        if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
+            return null;
+        }
+        return date;
     }, [validateTemplate]);
     /**
      * Format date to string by template