@via-profit/ui-kit 0.3.0 → 0.5.0

package/esm/Color/ColorParser.js

@@ -0,0 +1,320 @@
+export class ColorParser {
+    /**
+     * Парсит строковое представление цвета в объект ParsedColor
+     * @throws {Error} Если не удается распарсить цвет
+     */
+    static parse(value) {
+        if (!value) {
+            throw new Error(`Invalid color value: ${value}`);
+        }
+        const inputColor = value.trim().toLowerCase();
+        if (inputColor === 'transparent') {
+            return { r: 0, g: 0, b: 0, a: 0 };
+        }
+        // Проверка на именованный цвет
+        if (this.webColors[inputColor]) {
+            return this.parse(this.webColors[inputColor]);
+        }
+        // HEX форматы
+        if (inputColor.startsWith('#')) {
+            return this.parseHex(inputColor);
+        }
+        // RGB/RGBA форматы
+        if (inputColor.startsWith('rgb')) {
+            return this.parseRgb(inputColor);
+        }
+        // HSL/HSLA форматы
+        if (inputColor.startsWith('hsl')) {
+            return this.parseHsl(inputColor);
+        }
+        throw new Error(`Unsupported color format: ${value}`);
+    }
+    static parseHex(hex) {
+        const cleanHex = hex.replace(/[^0-9a-f]/g, '');
+        // Поддержка форматов с альфа-каналом
+        if (cleanHex.length === 8) {
+            // RRGGBBAA
+            return {
+                r: parseInt(cleanHex.substring(0, 2), 16),
+                g: parseInt(cleanHex.substring(2, 4), 16),
+                b: parseInt(cleanHex.substring(4, 6), 16),
+                a: Math.round((parseInt(cleanHex.substring(6, 8), 16) / 255) * 100) / 100,
+            };
+        }
+        if (cleanHex.length === 6) {
+            // RRGGBB
+            return {
+                r: parseInt(cleanHex.substring(0, 2), 16),
+                g: parseInt(cleanHex.substring(2, 4), 16),
+                b: parseInt(cleanHex.substring(4, 6), 16),
+                a: 1,
+            };
+        }
+        if (cleanHex.length === 4) {
+            // RGBA (4 символа)
+            return {
+                r: parseInt(cleanHex[0] + cleanHex[0], 16),
+                g: parseInt(cleanHex[1] + cleanHex[1], 16),
+                b: parseInt(cleanHex[2] + cleanHex[2], 16),
+                a: Math.round((parseInt(cleanHex[3] + cleanHex[3], 16) / 255) * 100) / 100,
+            };
+        }
+        if (cleanHex.length === 3) {
+            // RGB
+            return {
+                r: parseInt(cleanHex[0] + cleanHex[0], 16),
+                g: parseInt(cleanHex[1] + cleanHex[1], 16),
+                b: parseInt(cleanHex[2] + cleanHex[2], 16),
+                a: 1,
+            };
+        }
+        throw new Error(`Invalid HEX color: ${hex}`);
+    }
+    /**
+     * Returns function arguments: `rgb(10, 20 30 / 50%)` -> ['10', '20', '30', '50%']
+     */
+    static getArgs(value) {
+        const inner = value.substring(value.indexOf('(') + 1, value.lastIndexOf(')'));
+        return inner.split(/[\s,/]+/).filter(Boolean);
+    }
+    static parseNumber(value, color) {
+        const num = parseFloat(value);
+        if (isNaN(num)) {
+            throw new Error(`Invalid color value: ${color}`);
+        }
+        return num;
+    }
+    /**
+     * Alpha may be a number (0..1) or a percentage (0%..100%)
+     */
+    static parseAlpha(value, color) {
+        if (typeof value === 'undefined') {
+            return 1;
+        }
+        const num = this.parseNumber(value, color);
+        return this.clamp(value.endsWith('%') ? num / 100 : num, 0, 1);
+    }
+    static parseRgb(rgb) {
+        const args = this.getArgs(rgb);
+        if (args.length < 3) {
+            throw new Error(`Invalid RGB color: ${rgb}`);
+        }
+        // Channel may be a number (0..255) or a percentage (0%..100%)
+        const channel = (value) => {
+            const num = this.parseNumber(value, rgb);
+            return this.clamp(Math.round(value.endsWith('%') ? (num * 255) / 100 : num), 0, 255);
+        };
+        return {
+            r: channel(args[0]),
+            g: channel(args[1]),
+            b: channel(args[2]),
+            a: this.parseAlpha(args[3], rgb),
+        };
+    }
+    static parseHsl(hsl) {
+        const args = this.getArgs(hsl);
+        if (args.length < 3) {
+            throw new Error(`Invalid HSL color: ${hsl}`);
+        }
+        let hue = this.parseNumber(args[0], hsl);
+        if (args[0].endsWith('turn')) {
+            hue *= 360;
+        }
+        else if (args[0].endsWith('rad')) {
+            hue = (hue * 180) / Math.PI;
+        }
+        // Negative and >360 hues are wrapped around the color wheel
+        const h = (((hue % 360) + 360) % 360) / 360;
+        const s = this.clamp(this.parseNumber(args[1], hsl), 0, 100) / 100;
+        const l = this.clamp(this.parseNumber(args[2], hsl), 0, 100) / 100;
+        const a = this.parseAlpha(args[3], hsl);
+        const rgb = this.hslToRgb(h, s, l);
+        return {
+            r: rgb[0],
+            g: rgb[1],
+            b: rgb[2],
+            a,
+        };
+    }
+    static hslToRgb(h, s, l) {
+        let r, g, b;
+        if (s === 0) {
+            r = g = b = l;
+        }
+        else {
+            const hue2rgb = (p, q, t) => {
+                if (t < 0)
+                    t += 1;
+                if (t > 1)
+                    t -= 1;
+                if (t < 1 / 6)
+                    return p + (q - p) * 6 * t;
+                if (t < 1 / 2)
+                    return q;
+                if (t < 2 / 3)
+                    return p + (q - p) * (2 / 3 - t) * 6;
+                return p;
+            };
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = hue2rgb(p, q, h + 1 / 3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1 / 3);
+        }
+        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+    }
+    static clamp(value, min, max) {
+        return Math.max(min, Math.min(max, value));
+    }
+}
+ColorParser.webColors = {
+    aliceblue: '#F0F8FF',
+    antiquewhite: '#FAEBD7',
+    aqua: '#00FFFF',
+    aquamarine: '#7FFFD4',
+    azure: '#F0FFFF',
+    beige: '#F5F5DC',
+    bisque: '#FFE4C4',
+    black: '#000000',
+    blanchedalmond: '#FFEBCD',
+    blue: '#0000FF',
+    blueviolet: '#8A2BE2',
+    brown: '#A52A2A',
+    burlywood: '#DEB887',
+    cadetblue: '#5F9EA0',
+    chartreuse: '#7FFF00',
+    chocolate: '#D2691E',
+    coral: '#FF7F50',
+    cornflowerblue: '#6495ED',
+    cornsilk: '#FFF8DC',
+    crimson: '#DC143C',
+    cyan: '#00FFFF',
+    darkblue: '#00008B',
+    darkcyan: '#008B8B',
+    darkgoldenrod: '#B8860B',
+    darkgray: '#A9A9A9',
+    darkgrey: '#A9A9A9',
+    darkgreen: '#006400',
+    darkkhaki: '#BDB76B',
+    darkmagenta: '#8B008B',
+    darkolivegreen: '#556B2F',
+    darkorange: '#FF8C00',
+    darkorchid: '#9932CC',
+    darkred: '#8B0000',
+    darksalmon: '#E9967A',
+    darkseagreen: '#8FBC8F',
+    darkslateblue: '#483D8B',
+    darkslategray: '#2F4F4F',
+    darkslategrey: '#2F4F4F',
+    darkturquoise: '#00CED1',
+    darkviolet: '#9400D3',
+    deeppink: '#FF1493',
+    deepskyblue: '#00BFFF',
+    dimgray: '#696969',
+    dimgrey: '#696969',
+    dodgerblue: '#1E90FF',
+    firebrick: '#B22222',
+    floralwhite: '#FFFAF0',
+    forestgreen: '#228B22',
+    fuchsia: '#FF00FF',
+    gainsboro: '#DCDCDC',
+    ghostwhite: '#F8F8FF',
+    gold: '#FFD700',
+    goldenrod: '#DAA520',
+    gray: '#808080',
+    grey: '#808080',
+    green: '#008000',
+    greenyellow: '#ADFF2F',
+    honeydew: '#F0FFF0',
+    hotpink: '#FF69B4',
+    indianred: '#CD5C5C',
+    indigo: '#4B0082',
+    ivory: '#FFFFF0',
+    khaki: '#F0E68C',
+    lavender: '#E6E6FA',
+    lavenderblush: '#FFF0F5',
+    lawngreen: '#7CFC00',
+    lemonchiffon: '#FFFACD',
+    lightblue: '#ADD8E6',
+    lightcoral: '#F08080',
+    lightcyan: '#E0FFFF',
+    lightgoldenrodyellow: '#FAFAD2',
+    lightgray: '#D3D3D3',
+    lightgrey: '#D3D3D3',
+    lightgreen: '#90EE90',
+    lightpink: '#FFB6C1',
+    lightsalmon: '#FFA07A',
+    lightseagreen: '#20B2AA',
+    lightskyblue: '#87CEFA',
+    lightslategray: '#778899',
+    lightslategrey: '#778899',
+    lightsteelblue: '#B0C4DE',
+    lightyellow: '#FFFFE0',
+    lime: '#00FF00',
+    limegreen: '#32CD32',
+    linen: '#FAF0E6',
+    magenta: '#FF00FF',
+    maroon: '#800000',
+    mediumaquamarine: '#66CDAA',
+    mediumblue: '#0000CD',
+    mediumorchid: '#BA55D3',
+    mediumpurple: '#9370DB',
+    mediumseagreen: '#3CB371',
+    mediumslateblue: '#7B68EE',
+    mediumspringgreen: '#00FA9A',
+    mediumturquoise: '#48D1CC',
+    mediumvioletred: '#C71585',
+    midnightblue: '#191970',
+    mintcream: '#F5FFFA',
+    mistyrose: '#FFE4E1',
+    moccasin: '#FFE4B5',
+    navajowhite: '#FFDEAD',
+    navy: '#000080',
+    oldlace: '#FDF5E6',
+    olive: '#808000',
+    olivedrab: '#6B8E23',
+    orange: '#FFA500',
+    orangered: '#FF4500',
+    orchid: '#DA70D6',
+    palegoldenrod: '#EEE8AA',
+    palegreen: '#98FB98',
+    paleturquoise: '#AFEEEE',
+    palevioletred: '#DB7093',
+    papayawhip: '#FFEFD5',
+    peachpuff: '#FFDAB9',
+    peru: '#CD853F',
+    pink: '#FFC0CB',
+    plum: '#DDA0DD',
+    powderblue: '#B0E0E6',
+    purple: '#800080',
+    rebeccapurple: '#663399',
+    red: '#FF0000',
+    rosybrown: '#BC8F8F',
+    royalblue: '#4169E1',
+    saddlebrown: '#8B4513',
+    salmon: '#FA8072',
+    sandybrown: '#F4A460',
+    seagreen: '#2E8B57',
+    seashell: '#FFF5EE',
+    sienna: '#A0522D',
+    silver: '#C0C0C0',
+    skyblue: '#87CEEB',
+    slateblue: '#6A5ACD',
+    slategray: '#708090',
+    slategrey: '#708090',
+    snow: '#FFFAFA',
+    springgreen: '#00FF7F',
+    steelblue: '#4682B4',
+    tan: '#D2B48C',
+    teal: '#008080',
+    thistle: '#D8BFD8',
+    tomato: '#FF6347',
+    turquoise: '#40E0D0',
+    violet: '#EE82EE',
+    wheat: '#F5DEB3',
+    white: '#FFFFFF',
+    whitesmoke: '#F5F5F5',
+    yellow: '#FFFF00',
+    yellowgreen: '#9ACD32',
+};
+export default ColorParser;

package/esm/Color/index.js

@@ -0,0 +1,5 @@
+import { Color } from './Color';
+export * from './Color';
+export * from './ColorParser';
+export * from './ColorGenerator';
+export default Color;

package/esm/DatePicker/DatePickerIcon.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const DatePickerIcon = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "1em", height: "1em", viewBox: "0 0 512 512" }, props, { ref: ref }),
+    React.createElement("path", { d: "m128 32a16 16 0 0 0-16 16v16h-16c-35.179 0-64 28.821-64 64v288c0 35.179 28.821 64 64 64h320c35.179 0 64-28.821 64-64v-288c0-35.179-28.821-64-64-64h-16v-16a16 16 0 0 0-16-16 16 16 0 0 0-16 16v16h-224v-16a16 16 0 0 0-16-16zm-32 64h320c18.005 0 32 13.995 32 32v16h-384v-16c0-18.005 13.995-32 32-32zm-32 80h384v240c0 18.005-13.995 32-32 32h-320c-18.005 0-32-13.995-32-32v-240zm232 32a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm80 0a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm-240 80a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm80 0a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm80 0a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm80 0a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm-240 80a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm80 0a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm80 0a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24z", fill: "currentColor" })));
+export default React.forwardRef(DatePickerIcon);

package/esm/DatePicker/index.js

@@ -0,0 +1,176 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import Calendar from '../Calendar';
+import Button from '../Button';
+import Popper from '../Popper';
+import ClickOutside from '../ClickOutside';
+import MaskedField from '../MaskedField';
+import DatePickerIcon from './DatePickerIcon';
+import useDatePickerFormat from './useDatePickerFormat';
+export * from './useDatePickerFormat';
+const StyledMaskedField = styled(MaskedField) `
+  ${({ readOnly, disabled }) => readOnly &&
+    !disabled &&
+    css `
+      & input {
+        cursor: pointer;
+      }
+    `}
+`;
+const DatePicker = props => {
+    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.useMemo(() => inputMinDate !== null && inputMinDate !== void 0 ? inputMinDate : new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), [inputMinDate]);
+    const maxDate = React.useMemo(() => inputMaxDate !== null && inputMaxDate !== void 0 ? inputMaxDate : new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), [inputMaxDate]);
+    const inputRef = React.useRef(null);
+    const buttonRef = React.useRef(null);
+    const popperRef = React.useRef(null);
+    const setInputRef = React.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.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.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.useState(value);
+    const valueRef = React.useRef(value);
+    const [textFieldRef, setTextFieldRef] = React.useState(null);
+    const [isOpen, setOpenSate] = React.useState(false);
+    const { getMaskByTemplate, formatInputByTemplate, parseInputByTemplate } = useDatePickerFormat();
+    React.useEffect(() => {
+        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);
+        }
+    }, [value]);
+    const isGreatherThenMinDate = React.useCallback((date) => {
+        const a = new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate(), 0, 0, 0, 0);
+        const b = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+        return b.getTime() >= a.getTime();
+    }, [minDate]);
+    const isLessThenMaxDate = React.useCallback((date) => {
+        const a = new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate(), 0, 0, 0, 0);
+        const b = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+        return b.getTime() <= a.getTime();
+    }, [maxDate]);
+    const handleClick = React.useCallback(() => {
+        if (readOnly) {
+            setOpenSate(open => !open);
+        }
+    }, [readOnly]);
+    // The keyboard focus goes to the calendar when it is opened: the selected day, today or the first one
+    React.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.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.useCallback((event) => {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            close();
+        }
+    }, [close]);
+    const endIcon = React.useMemo(() => (React.createElement(Button, { 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.createElement(DatePickerIcon, null))), [calendarLabel, disabled, isOpen]);
+    const handleChange = React.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
+            if (parsedDate instanceof Date && !isNaN(parsedDate.getTime())) {
+                // if the date satisfies the restrictions
+                if (isGreatherThenMinDate(parsedDate) && isLessThenMaxDate(parsedDate)) {
+                    onChange(parsedDate);
+                    // if the date violates the restrictions
+                }
+                else {
+                    // set as minDate if parsed date less then minDate value constraint
+                    if (!isGreatherThenMinDate(parsedDate)) {
+                        onChange(minDate);
+                    }
+                    // set as maxDate if parsed date greather then maxDate value constraint
+                    if (!isLessThenMaxDate(parsedDate)) {
+                        onChange(maxDate);
+                    }
+                }
+            }
+        }
+    }, [
+        currentValue,
+        isGreatherThenMinDate,
+        isLessThenMaxDate,
+        maxDate,
+        minDate,
+        onChange,
+        parseInputByTemplate,
+        template,
+    ]);
+    const calendarChange = React.useCallback(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.createElement(React.Fragment, null,
+        React.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.createElement(ClickOutside, { onOutsideClick: () => setOpenSate(false), mouseEvent: "onMouseDown", ignoreElements: [textFieldRef] },
+            React.createElement(Popper, { ref: popperRef, isOpen: isOpen, anchorElement: textFieldRef, role: "dialog", "aria-label": calendarLabel, onKeyDown: handlePopperKeyDown },
+                React.createElement(Calendar, { 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 })))));
+};
+export default DatePicker;

package/esm/DatePicker/useDatePickerFormat.js

@@ -0,0 +1,121 @@
+import React from 'react';
+export const useDatePickerFormat = () => {
+    const templateValidChars = React.useMemo(() => ['y', 'Y', 'yy', 'yyyy', 'YYYY', 'd', 'dd', 'D', 'DD', 'm', 'mm'], []);
+    const isValidTemplate = React.useCallback((template) => {
+        const matches = template.match(/[yYmMdD]+/g);
+        if (!matches) {
+            return false;
+        }
+        return matches.every(char => templateValidChars.includes(char));
+    }, [templateValidChars]);
+    const validateTemplate = React.useCallback((template) => {
+        if (!isValidTemplate(template)) {
+            throw new Error(`The template «${template}» is not valid. Check the posibility chars: [${templateValidChars.join(', ')}]`);
+        }
+    }, [isValidTemplate, templateValidChars]);
+    /**
+     * Generate the array of RegExp by template string
+     */
+    const getMaskByTemplate = React.useCallback((template) => {
+        validateTemplate(template);
+        return template.split('').map(char => {
+            if (['m', 'd', 'D', 'y', 'Y'].includes(char)) {
+                return /\d/;
+            }
+            return char;
+        });
+    }, [validateTemplate]);
+    /**
+     * Parse input string ny template
+     * @returns Date
+     */
+    const parseInputByTemplate = React.useCallback((input, template) => {
+        validateTemplate(template);
+        if (input.length !== template.length) {
+            return null;
+        }
+        const data = {
+            days: [],
+            months: [],
+            years: [],
+        };
+        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:
+                    // do nothing
+                    break;
+            }
+        });
+        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
+     */
+    const formatInputByTemplate = React.useCallback((date, template) => {
+        validateTemplate(template);
+        return (template
+            .replace(/(d{1,2}|D{1,2})/, entries => {
+            const day = `${date.getDate()}`;
+            if (['DD', 'D', 'dd'].includes(entries)) {
+                const str = `0${day}`;
+                return str.substring(str.length - entries.length);
+            }
+            return day;
+        })
+            // mm - month with leading zero
+            // m - month without leading zero
+            .replace(/(m{1,2})/, entries => {
+            const month = `${date.getMonth() + 1}`;
+            if (['mm'].includes(entries)) {
+                const str = `0${month}`;
+                return str.substring(str.length - entries.length);
+            }
+            return month;
+        })
+            // yyyy or Y - full year
+            // yy or y - last two digits
+            .replace(/(y{4}|y{1,2}|Y{1,2})/, entries => {
+            const str = `${date.getFullYear()}`;
+            if (['YY', 'Y'].includes(entries)) {
+                return str;
+            }
+            return str.substring(str.length - entries.length);
+        }));
+    }, [validateTemplate]);
+    return {
+        templateValidChars,
+        isValidTemplate,
+        validateTemplate,
+        getMaskByTemplate,
+        parseInputByTemplate,
+        formatInputByTemplate,
+    };
+};
+export default useDatePickerFormat;

package/esm/ErrorBoundary/RenderError.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import createTheme from '../ThemeProvider/createTheme';
+import Heading1 from '../Typography/H1';
+import ThemeProvider from '../ThemeProvider';
+import Paragraph from '../Typography/Paragraph';
+import Surface from '../Surface';
+import Strong from '../Typography/Strong';
+const Container = styled.div `
+  width: 100%;
+  height: 100%;
+`;
+const StyledSurface = styled(Surface) `
+  border-left: 2em solid ${({ theme }) => theme.color.error.toString()};
+`;
+const StyledHeading = styled(Heading1) `
+  margin-top: 0;
+`;
+const RenderError = props => {
+    const { error, title = 'Something went wrong', description = 'Please let the developers know', } = props;
+    const isDev = process.env.NODE_ENV === 'development';
+    const { name, message, stack } = React.useMemo(() => {
+        let name = '';
+        let message = '';
+        let stack = '';
+        if (error && typeof error === 'object') {
+            if ('name' in error) {
+                name = `${error.name}`;
+            }
+            if ('message' in error) {
+                message = `${error.message}`;
+            }
+            if ('stack' in error) {
+                stack = `${error.stack}`;
+            }
+        }
+        return { name, message, stack };
+    }, [error]);
+    const theme = createTheme();
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(Container, null,
+            React.createElement(StyledSurface, null, isDev ? (React.createElement(React.Fragment, null,
+                React.createElement(StyledHeading, null, name),
+                React.createElement(Strong, null, message),
+                stack !== '' && React.createElement(Paragraph, null, stack))) : (React.createElement(React.Fragment, null,
+                React.createElement(StyledHeading, null, title),
+                React.createElement(Paragraph, null, description)))))));
+};
+export default RenderError;