@via-profit/ui-kit 0.4.0 → 0.6.0

package/Pagination/PaginationItem.js

@@ -0,0 +1,59 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Button_1 = __importDefault(require("../Button"));
+const tokens_1 = require("../ThemeProvider/tokens");
+/**
+ * `&&` raises the specificity above the own styles of the button.
+ * The button is a square of the height of the controls, the numbers of several digits make it wider
+ */
+const StyledButton = (0, styled_1.default)(Button_1.default) `
+  && {
+    box-sizing: border-box;
+    min-width: ${({ theme }) => (0, tokens_1.controlHeight)(theme)};
+    height: ${({ theme }) => (0, tokens_1.controlHeight)(theme)};
+    padding: 0 0.6em;
+    justify-content: center;
+    font-variant-numeric: tabular-nums;
+  }
+
+  ${({ $soft, disabled, theme }) => $soft &&
+    (0, react_2.css) `
+      && {
+        background-color: ${theme.color.textPrimary.alpha(0.06).toString()};
+        color: ${disabled
+        ? theme.color.textPrimary.alpha(0.3).toString()
+        : theme.color.textPrimary.toString()};
+      }
+
+      &&:hover {
+        background-color: ${disabled
+        ? theme.color.textPrimary.alpha(0.06).toString()
+        : theme.color.textPrimary.alpha(0.1).toString()};
+      }
+    `}
+`;
+/**
+ * The button of the page or of the navigation (first, previous, next, last)
+ */
+const PaginationItem = (props, ref) => {
+    const { selected, soft, kind, page } = props, buttonProps = __rest(props, ["selected", "soft", "kind", "page"]);
+    return (react_1.default.createElement(StyledButton, Object.assign({ type: "button", "aria-current": selected ? 'page' : undefined, "data-kind": kind, "$soft": Boolean(soft) }, buttonProps, { ref: ref })));
+};
+exports.default = react_1.default.forwardRef(PaginationItem);

package/Pagination/getPaginationItems.d.ts

@@ -0,0 +1,22 @@
+export type PaginationItemType = 'page' | 'gap-start' | 'gap-end';
+export type PaginationItemData = {
+    readonly type: 'page';
+    readonly page: number;
+} | {
+    readonly type: 'gap-start' | 'gap-end';
+};
+/**
+ * Returns the items of the pagination: the boundary pages, the current page with the siblings
+ * and the gaps instead of the skipped ranges. The pages start from 1.
+ * The count of the items does not depend on the current page, so the buttons do not jump
+ *
+ * @example getPaginationItems({ count: 10, page: 5, siblings: 1, boundaries: 1 })
+ * // 1 … 4 5 6 … 10
+ */
+declare const getPaginationItems: (params: {
+    readonly count: number;
+    readonly page: number;
+    readonly siblings: number;
+    readonly boundaries: number;
+}) => PaginationItemData[];
+export default getPaginationItems;

package/Pagination/getPaginationItems.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const range = (start, end) => Array.from({ length: Math.max(end - start + 1, 0) }, (_, index) => start + index);
+/**
+ * Returns the items of the pagination: the boundary pages, the current page with the siblings
+ * and the gaps instead of the skipped ranges. The pages start from 1.
+ * The count of the items does not depend on the current page, so the buttons do not jump
+ *
+ * @example getPaginationItems({ count: 10, page: 5, siblings: 1, boundaries: 1 })
+ * // 1 … 4 5 6 … 10
+ */
+const getPaginationItems = (params) => {
+    const { count, siblings, boundaries } = params;
+    const page = Math.min(Math.max(params.page, 1), Math.max(count, 1));
+    // boundaries on both sides + current + siblings + two gaps
+    if (count <= boundaries * 2 + siblings * 2 + 3) {
+        return range(1, count).map(item => ({ type: 'page', page: item }));
+    }
+    const startPages = range(1, boundaries);
+    const endPages = range(count - boundaries + 1, count);
+    // the window of the siblings keeps its size near the start and the end
+    const siblingsStart = Math.max(Math.min(page - siblings, count - boundaries - siblings * 2 - 1), boundaries + 2);
+    const siblingsEnd = Math.min(Math.max(page + siblings, boundaries + siblings * 2 + 2), count - boundaries - 1);
+    const items = startPages.map(item => ({ type: 'page', page: item }));
+    // a gap of one page is shown as the page itself
+    if (siblingsStart > boundaries + 2) {
+        items.push({ type: 'gap-start' });
+    }
+    else if (boundaries + 1 < count - boundaries) {
+        items.push({ type: 'page', page: boundaries + 1 });
+    }
+    range(siblingsStart, siblingsEnd).forEach(item => items.push({ type: 'page', page: item }));
+    if (siblingsEnd < count - boundaries - 1) {
+        items.push({ type: 'gap-end' });
+    }
+    else if (count - boundaries > boundaries) {
+        items.push({ type: 'page', page: count - boundaries });
+    }
+    endPages.forEach(item => items.push({ type: 'page', page: item }));
+    return items;
+};
+exports.default = getPaginationItems;

package/Pagination/index.d.ts

@@ -0,0 +1,104 @@
+import React from 'react';
+import type { ButtonProps } from '../Button';
+import { PaginationContainerProps, PaginationSize } from './PaginationContainer';
+import { PaginationItemProps } from './PaginationItem';
+import { PaginationGapProps } from './PaginationGap';
+import usePagination, { UsePaginationParams, PaginationItemKind } from './usePagination';
+import getPaginationItems from './getPaginationItems';
+export * from './usePagination';
+export * from './PaginationContainer';
+export * from './PaginationItem';
+export * from './PaginationGap';
+export * from './PaginationIcons';
+export * from './getPaginationItems';
+export { usePagination, getPaginationItems };
+type ButtonVariant = NonNullable<ButtonProps['variant']>;
+export type PaginationColor = 'default' | 'primary' | 'secondary' | string;
+export type PaginationProps = Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'color'> & UsePaginationParams & {
+    /**
+     * The variant of the not selected page buttons\
+     * **Default:** `standard`
+     */
+    readonly variant?: ButtonVariant;
+    /**
+     * The color of the selected page button\
+     * **Default:** `primary`
+     */
+    readonly color?: PaginationColor;
+    /**
+     * The variant of the navigation buttons (first, previous, next, last)\
+     * **Default:** `outlined`
+     */
+    readonly navigationVariant?: ButtonVariant;
+    /**
+     * The color of the navigation buttons\
+     * **Default:** the `color` for the `standard` navigation variant, otherwise `default`
+     */
+    readonly navigationColor?: PaginationColor;
+    /**
+     * `small` — the compact variant\
+     * **Default:** `medium`
+     */
+    readonly size?: PaginationSize;
+    /**
+     * Returns the label of the button for the screen readers\
+     * **Default:** the english labels, e.g. «Go to page 3»
+     */
+    readonly getItemLabel?: (kind: PaginationItemKind, page: number, selected: boolean) => string;
+    /**
+     * Overridable components map
+     */
+    readonly overrides?: PaginationOverrides;
+};
+export interface PaginationOverrides {
+    /**
+     * The `<nav>` around the buttons
+     */
+    readonly Container?: React.ComponentType<PaginationContainerProps & React.RefAttributes<HTMLElement>>;
+    /**
+     * The button of the page and the navigation buttons. Gets the `kind` and the `page` it opens:
+     * e.g. render a link of your router instead of the button
+     */
+    readonly Item?: React.ComponentType<PaginationItemProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * The skipped range of the pages, `…`
+     */
+    readonly Gap?: React.ComponentType<PaginationGapProps & React.RefAttributes<HTMLSpanElement>>;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "color" | "onChange"> & UsePaginationParams & {
+    /**
+     * The variant of the not selected page buttons\
+     * **Default:** `standard`
+     */
+    readonly variant?: ButtonVariant;
+    /**
+     * The color of the selected page button\
+     * **Default:** `primary`
+     */
+    readonly color?: PaginationColor;
+    /**
+     * The variant of the navigation buttons (first, previous, next, last)\
+     * **Default:** `outlined`
+     */
+    readonly navigationVariant?: ButtonVariant;
+    /**
+     * The color of the navigation buttons\
+     * **Default:** the `color` for the `standard` navigation variant, otherwise `default`
+     */
+    readonly navigationColor?: PaginationColor;
+    /**
+     * `small` — the compact variant\
+     * **Default:** `medium`
+     */
+    readonly size?: PaginationSize;
+    /**
+     * Returns the label of the button for the screen readers\
+     * **Default:** the english labels, e.g. «Go to page 3»
+     */
+    readonly getItemLabel?: (kind: PaginationItemKind, page: number, selected: boolean) => string;
+    /**
+     * Overridable components map
+     */
+    readonly overrides?: PaginationOverrides;
+} & React.RefAttributes<HTMLElement>>;
+export default _default;

package/Pagination/index.js

@@ -0,0 +1,98 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPaginationItems = exports.usePagination = void 0;
+const react_1 = __importDefault(require("react"));
+const PaginationContainer_1 = __importDefault(require("./PaginationContainer"));
+const PaginationItem_1 = __importDefault(require("./PaginationItem"));
+const PaginationGap_1 = __importDefault(require("./PaginationGap"));
+const PaginationIcons_1 = require("./PaginationIcons");
+const usePagination_1 = __importDefault(require("./usePagination"));
+exports.usePagination = usePagination_1.default;
+const getPaginationItems_1 = __importDefault(require("./getPaginationItems"));
+exports.getPaginationItems = getPaginationItems_1.default;
+__exportStar(require("./usePagination"), exports);
+__exportStar(require("./PaginationContainer"), exports);
+__exportStar(require("./PaginationItem"), exports);
+__exportStar(require("./PaginationGap"), exports);
+__exportStar(require("./PaginationIcons"), exports);
+__exportStar(require("./getPaginationItems"), exports);
+const defaultGetItemLabel = (kind, page, selected) => {
+    switch (kind) {
+        case 'first':
+            return 'Go to first page';
+        case 'previous':
+            return 'Go to previous page';
+        case 'next':
+            return 'Go to next page';
+        case 'last':
+            return 'Go to last page';
+        default:
+            return selected ? `Page ${page}` : `Go to page ${page}`;
+    }
+};
+const navigationIcons = {
+    first: react_1.default.createElement(PaginationIcons_1.IconFirst, null),
+    previous: react_1.default.createElement(PaginationIcons_1.IconPrevious, null),
+    next: react_1.default.createElement(PaginationIcons_1.IconNext, null),
+    last: react_1.default.createElement(PaginationIcons_1.IconLast, null),
+};
+const Pagination = (props, ref) => {
+    const { count, page, defaultPage, onChange, siblings, boundaries, showPrevNext, showFirstLast, disabled, variant = 'standard', color = 'primary', navigationVariant = 'outlined', navigationColor, size = 'medium', getItemLabel = defaultGetItemLabel, overrides, 'aria-label': ariaLabel = 'Pagination' } = props, nativeProps = __rest(props, ["count", "page", "defaultPage", "onChange", "siblings", "boundaries", "showPrevNext", "showFirstLast", "disabled", "variant", "color", "navigationVariant", "navigationColor", "size", "getItemLabel", "overrides", 'aria-label']);
+    const { items } = (0, usePagination_1.default)({
+        count,
+        page,
+        defaultPage,
+        onChange,
+        siblings,
+        boundaries,
+        showPrevNext,
+        showFirstLast,
+        disabled,
+    });
+    const overridesMap = react_1.default.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || PaginationContainer_1.default,
+        Item: (overrides === null || overrides === void 0 ? void 0 : overrides.Item) || PaginationItem_1.default,
+        Gap: (overrides === null || overrides === void 0 ? void 0 : overrides.Gap) || PaginationGap_1.default,
+    }), [overrides]);
+    const navColor = navigationColor !== null && navigationColor !== void 0 ? navigationColor : (navigationVariant === 'standard' ? color : 'default');
+    return (react_1.default.createElement(overridesMap.Container, Object.assign({ size: size, "aria-label": ariaLabel }, nativeProps, { ref: ref }), items.map(item => {
+        if (item.type === 'gap') {
+            return react_1.default.createElement(overridesMap.Gap, { key: `gap-${item.position}` });
+        }
+        const label = getItemLabel(item.type, item.page, item.selected);
+        if (item.type !== 'page') {
+            // The disabled navigation button gets the soft fill, as the not selected page
+            return (react_1.default.createElement(overridesMap.Item, { key: item.type, kind: item.type, page: item.page, variant: item.disabled ? 'standard' : navigationVariant, color: item.disabled ? 'default' : navColor, soft: item.disabled, disabled: item.disabled, "aria-label": label, onClick: item.onClick }, navigationIcons[item.type]));
+        }
+        return (react_1.default.createElement(overridesMap.Item, { key: item.page, kind: "page", page: item.page, selected: item.selected, variant: item.selected ? 'standard' : variant, color: item.selected ? color : 'default', soft: !item.selected && variant === 'standard', disabled: item.disabled, "aria-label": label, onClick: item.onClick }, item.page));
+    })));
+};
+exports.default = react_1.default.forwardRef(Pagination);

package/Pagination/usePagination.d.ts

@@ -0,0 +1,105 @@
+import React from 'react';
+export type PaginationItemKind = 'page' | 'first' | 'previous' | 'next' | 'last';
+export type PaginationNavigationKind = Exclude<PaginationItemKind, 'page'>;
+/**
+ * The button of the pagination: a page or a navigation button
+ */
+export type PaginationButtonEntry = {
+    readonly type: PaginationItemKind;
+    /**
+     * The page the button opens, starts from 1
+     */
+    readonly page: number;
+    /**
+     * The button of the current page. The navigation buttons are never selected
+     */
+    readonly selected: boolean;
+    /**
+     * The button does nothing: the whole pagination is disabled
+     * or the navigation button leads out of the pages or to the current page
+     */
+    readonly disabled: boolean;
+    /**
+     * Opens the `page`
+     */
+    readonly onClick: (event: React.SyntheticEvent) => void;
+};
+/**
+ * The skipped range of the pages
+ */
+export type PaginationGapEntry = {
+    readonly type: 'gap';
+    /**
+     * The gap before the current page or after it
+     */
+    readonly position: 'start' | 'end';
+};
+export type PaginationEntry = PaginationButtonEntry | PaginationGapEntry;
+export type UsePaginationParams = {
+    /**
+     * Total count of the pages
+     */
+    readonly count: number;
+    /**
+     * The current page of the controlled pagination, starts from 1
+     */
+    readonly page?: number;
+    /**
+     * The initial page of the uncontrolled pagination\
+     * **Default:** `1`
+     */
+    readonly defaultPage?: number;
+    /**
+     * Called with the selected page
+     */
+    readonly onChange?: (page: number, event: React.SyntheticEvent) => void;
+    /**
+     * Count of the pages shown on each side of the current one\
+     * **Default:** `1`
+     */
+    readonly siblings?: number;
+    /**
+     * Count of the pages always shown at the start and at the end\
+     * **Default:** `1`
+     */
+    readonly boundaries?: number;
+    /**
+     * Show the previous and the next buttons\
+     * **Default:** `true`
+     */
+    readonly showPrevNext?: boolean;
+    /**
+     * Show the first and the last buttons\
+     * **Default:** `false`
+     */
+    readonly showFirstLast?: boolean;
+    /**
+     * Disables all the buttons
+     */
+    readonly disabled?: boolean;
+};
+export type UsePaginationResult = {
+    /**
+     * The current page, starts from 1. Always in the range of the pages
+     */
+    readonly page: number;
+    /**
+     * The count of the pages, at least 1
+     */
+    readonly count: number;
+    /**
+     * The buttons and the gaps in the order of the display
+     */
+    readonly items: readonly PaginationEntry[];
+    /**
+     * Opens the page: calls `onChange`, and changes the page of the uncontrolled pagination.
+     * The pages out of the range, the current page and any page of the disabled pagination are ignored
+     */
+    readonly setPage: (page: number, event: React.SyntheticEvent) => void;
+};
+/**
+ * The logic of the pagination without the markup: the current page, the buttons and the gaps.
+ * `<Pagination>` is built on it, use it for the pagination of your own design
+ */
+declare const usePagination: (params: UsePaginationParams) => UsePaginationResult;
+export default usePagination;

package/Pagination/usePagination.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getPaginationItems_1 = __importDefault(require("./getPaginationItems"));
+/**
+ * The logic of the pagination without the markup: the current page, the buttons and the gaps.
+ * `<Pagination>` is built on it, use it for the pagination of your own design
+ */
+const usePagination = (params) => {
+    const { count, page: controlledPage, defaultPage = 1, onChange, siblings = 1, boundaries = 1, showPrevNext = true, showFirstLast = false, disabled = false, } = params;
+    const [uncontrolledPage, setUncontrolledPage] = react_1.default.useState(defaultPage);
+    const isControlled = typeof controlledPage !== 'undefined';
+    const pagesCount = Math.max(Math.floor(count) || 0, 1);
+    const currentPage = Math.min(Math.max(isControlled ? controlledPage : uncontrolledPage, 1), pagesCount);
+    const setPage = react_1.default.useCallback((target, event) => {
+        if (disabled || target === currentPage || target < 1 || target > pagesCount) {
+            return;
+        }
+        if (!isControlled) {
+            setUncontrolledPage(target);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(target, event);
+    }, [disabled, currentPage, pagesCount, isControlled, onChange]);
+    const items = react_1.default.useMemo(() => {
+        const button = (type, target) => {
+            const selected = type === 'page' && target === currentPage;
+            return {
+                type,
+                page: target,
+                selected,
+                disabled: disabled ||
+                    (type !== 'page' && (target < 1 || target > pagesCount || target === currentPage)),
+                onClick: event => setPage(target, event),
+            };
+        };
+        const pages = (0, getPaginationItems_1.default)({
+            count: pagesCount,
+            page: currentPage,
+            siblings,
+            boundaries,
+        }).map(item => item.type === 'page'
+            ? button('page', item.page)
+            : { type: 'gap', position: item.type === 'gap-start' ? 'start' : 'end' });
+        return [
+            ...(showFirstLast ? [button('first', 1)] : []),
+            ...(showPrevNext ? [button('previous', currentPage - 1)] : []),
+            ...pages,
+            ...(showPrevNext ? [button('next', currentPage + 1)] : []),
+            ...(showFirstLast ? [button('last', pagesCount)] : []),
+        ];
+    }, [
+        pagesCount,
+        currentPage,
+        siblings,
+        boundaries,
+        showPrevNext,
+        showFirstLast,
+        disabled,
+        setPage,
+    ]);
+    return { page: currentPage, count: pagesCount, items, setPage };
+};
+exports.default = usePagination;

package/PhoneField/CountryFlagComponent.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export interface CountryFlagComponentProps extends React.HTMLAttributes<HTMLSpanElement> {
-    readonly flag: JSX.Element | null;
+    readonly flag: React.JSX.Element | null;
 }
 declare const CountryFlagComponent: React.FC<CountryFlagComponentProps>;
 export default CountryFlagComponent;

package/PhoneField/CountryFlagComponent.js

@@ -16,7 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const Unknown_1 = __importDefault(require("../CountryFlags/Unknown"));
+const Unknown_1 = __importDefault(require("./flags/Unknown"));
 const CountryFlagContainer = styled_1.default.span `
   display: flex;
   align-items: center;

package/PhoneField/UnknownFlag.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 /**
- * @deprecated Use `Unknown` from `@via-profit/ui-kit/CountryFlags/Unknown`
+ * The placeholder that PhoneField shows instead of the flag when the country is not detected
  */
 declare const UnknownFlag: import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export default UnknownFlag;

package/PhoneField/UnknownFlag.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const Unknown_1 = __importDefault(require("../CountryFlags/Unknown"));
+const Unknown_1 = __importDefault(require("./flags/Unknown"));
 /**
- * @deprecated Use `Unknown` from `@via-profit/ui-kit/CountryFlags/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,49 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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,45 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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);