@via-profit/ui-kit 0.2.6 → 0.4.0

package/Checkbox/CheckboxWrapper.js

@@ -0,0 +1,29 @@
+"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 StyledWrapper = styled_1.default.span `
+  font-size: 1em;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+const CheckboxWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(CheckboxWrapper);

package/Checkbox/index.d.ts

@@ -0,0 +1,144 @@
+import React from 'react';
+import { CheckboxWrapperProps } from './CheckboxWrapper';
+import { CheckboxContainerProps, CheckboxLabelPosition } from './CheckboxContainer';
+import { CheckboxBoxProps } from './CheckboxBox';
+import { CheckboxIconProps } from './CheckboxIcon';
+import { CheckboxTextWrapperProps } from './CheckboxTextWrapper';
+import { CheckboxAsteriskProps } from './CheckboxAsterisk';
+import { CheckboxErrorTextProps } from './CheckboxErrorText';
+export type { CheckboxLabelPosition };
+export type CheckboxProps = Omit<CheckboxBoxProps, 'checked' | 'defaultChecked' | 'onChange' | 'disabled' | 'color' | 'error' | 'indeterminate'> & {
+    /**
+     * The state of the controlled checkbox. Pass it together with `onChange`
+     * Default: undefined
+     */
+    readonly checked?: boolean;
+    /**
+     * The initial state of the uncontrolled checkbox
+     * Default: false
+     */
+    readonly defaultChecked?: boolean;
+    /**
+     * Called when the user toggles the checkbox. The new value is `event.currentTarget.checked`
+     */
+    readonly onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Shows the dash instead of the check mark, e.g. «select all» when only some items are selected.\
+     * Only the look changes: `checked` keeps its value
+     * Default: false
+     */
+    readonly indeterminate?: boolean;
+    /**
+     * If `true` the checkbox state can not be changed
+     * Default: false
+     */
+    readonly disabled?: boolean;
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     * Default: `default`
+     */
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+    /**
+     * Position of the label relative to the checkbox
+     * Default: `end`
+     */
+    readonly labelPosition?: CheckboxLabelPosition;
+    /**
+     * If true then `errorText` value will be displayed under the checkbox
+     */
+    readonly error?: boolean;
+    /**
+     * Text or ReactNode to show in the error element.\
+     * Will be displayed only if `error` property is true
+     */
+    readonly errorText?: React.ReactNode;
+    /**
+     * If is true then the asterisk will be displayed in label\
+     * If is ReactNode then ReactNode will be displayed in label
+     */
+    readonly requiredAsterisk?: boolean | React.ReactNode;
+    readonly overrides?: CheckboxOverrides;
+};
+export interface CheckboxOverrides {
+    /**
+     * The root element: the checkbox with the label and the error text
+     */
+    readonly Wrapper?: React.ComponentType<CheckboxWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The label element with the checkbox and the text
+     */
+    readonly Container?: React.ComponentType<CheckboxContainerProps & React.RefAttributes<HTMLLabelElement>>;
+    /**
+     * The square with the native input
+     */
+    readonly Box?: React.ComponentType<CheckboxBoxProps & React.RefAttributes<HTMLInputElement>>;
+    /**
+     * The check mark and the dash of the indeterminate state
+     */
+    readonly Icon?: React.ComponentType<CheckboxIconProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The text wrapper
+     */
+    readonly TextWrapper?: React.ComponentType<CheckboxTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The asterisk of the required field
+     */
+    readonly Asterisk?: React.ComponentType<CheckboxAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The error text wrapper
+     */
+    readonly ErrorText?: React.ComponentType<CheckboxErrorTextProps & React.RefAttributes<HTMLDivElement>>;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<CheckboxBoxProps, "color" | "error" | "defaultChecked" | "onChange" | "checked" | "disabled" | "indeterminate"> & {
+    /**
+     * The state of the controlled checkbox. Pass it together with `onChange`
+     * Default: undefined
+     */
+    readonly checked?: boolean | undefined;
+    /**
+     * The initial state of the uncontrolled checkbox
+     * Default: false
+     */
+    readonly defaultChecked?: boolean | undefined;
+    /**
+     * Called when the user toggles the checkbox. The new value is `event.currentTarget.checked`
+     */
+    readonly onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    /**
+     * Shows the dash instead of the check mark, e.g. «select all» when only some items are selected.\
+     * Only the look changes: `checked` keeps its value
+     * Default: false
+     */
+    readonly indeterminate?: boolean | undefined;
+    /**
+     * If `true` the checkbox state can not be changed
+     * Default: false
+     */
+    readonly disabled?: boolean | undefined;
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     * Default: `default`
+     */
+    readonly color?: string | undefined;
+    /**
+     * Position of the label relative to the checkbox
+     * Default: `end`
+     */
+    readonly labelPosition?: CheckboxLabelPosition | undefined;
+    /**
+     * If true then `errorText` value will be displayed under the checkbox
+     */
+    readonly error?: boolean | undefined;
+    /**
+     * Text or ReactNode to show in the error element.\
+     * Will be displayed only if `error` property is true
+     */
+    readonly errorText?: React.ReactNode;
+    /**
+     * If is true then the asterisk will be displayed in label\
+     * If is ReactNode then ReactNode will be displayed in label
+     */
+    readonly requiredAsterisk?: React.ReactNode;
+    readonly overrides?: CheckboxOverrides | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/Checkbox/index.js

@@ -0,0 +1,71 @@
+"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 CheckboxWrapper_1 = __importDefault(require("./CheckboxWrapper"));
+const CheckboxContainer_1 = __importDefault(require("./CheckboxContainer"));
+const CheckboxBox_1 = __importDefault(require("./CheckboxBox"));
+const CheckboxIcon_1 = __importDefault(require("./CheckboxIcon"));
+const CheckboxTextWrapper_1 = __importDefault(require("./CheckboxTextWrapper"));
+const CheckboxAsterisk_1 = __importDefault(require("./CheckboxAsterisk"));
+const CheckboxErrorText_1 = __importDefault(require("./CheckboxErrorText"));
+const Checkbox = (props, ref) => {
+    const { checked, defaultChecked, onChange, indeterminate = false, disabled, color, labelPosition, error, errorText, requiredAsterisk, overrides, children, className, style } = props, nativeProps = __rest(props, ["checked", "defaultChecked", "onChange", "indeterminate", "disabled", "color", "labelPosition", "error", "errorText", "requiredAsterisk", "overrides", "children", "className", "style"]);
+    const inputRef = react_1.default.useRef(null);
+    const [internalChecked, setInternalChecked] = react_1.default.useState(Boolean(defaultChecked));
+    const isControlled = typeof checked !== 'undefined';
+    const isChecked = isControlled ? Boolean(checked) : internalChecked;
+    const overridesMap = react_1.default.useMemo(() => ({
+        Wrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.Wrapper) || CheckboxWrapper_1.default,
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || CheckboxContainer_1.default,
+        Box: (overrides === null || overrides === void 0 ? void 0 : overrides.Box) || CheckboxBox_1.default,
+        Icon: (overrides === null || overrides === void 0 ? void 0 : overrides.Icon) || CheckboxIcon_1.default,
+        TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || CheckboxTextWrapper_1.default,
+        Asterisk: (overrides === null || overrides === void 0 ? void 0 : overrides.Asterisk) || CheckboxAsterisk_1.default,
+        ErrorText: (overrides === null || overrides === void 0 ? void 0 : overrides.ErrorText) || CheckboxErrorText_1.default,
+    }), [overrides]);
+    react_1.default.useImperativeHandle(ref, () => inputRef.current);
+    // `indeterminate` exists only as the DOM property, not as the attribute.
+    // The browser resets it on click, so it is restored after every change
+    react_1.default.useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate, isChecked]);
+    // Warn once, not on every render
+    const isControlledWithoutOnChange = isControlled && typeof onChange === 'undefined';
+    react_1.default.useEffect(() => {
+        if (isControlledWithoutOnChange) {
+            console.error('The property «onChange» should be passed with prop «checked» to make component controlled');
+        }
+    }, [isControlledWithoutOnChange]);
+    const handleChange = event => {
+        if (!isControlled) {
+            setInternalChecked(event.currentTarget.checked);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    };
+    return (react_1.default.createElement(overridesMap.Wrapper, { className: className, style: style },
+        react_1.default.createElement(overridesMap.Container, { labelPosition: labelPosition, disabled: disabled },
+            react_1.default.createElement(overridesMap.Box, Object.assign({}, nativeProps, { checked: isChecked, onChange: handleChange, disabled: disabled, indeterminate: indeterminate, color: color, error: error, "aria-invalid": error || undefined, ref: inputRef }),
+                react_1.default.createElement(overridesMap.Icon, { checked: isChecked, indeterminate: indeterminate })),
+            (typeof children !== 'undefined' ||
+                (requiredAsterisk != null && requiredAsterisk !== false)) && (react_1.default.createElement(overridesMap.TextWrapper, null,
+                children,
+                requiredAsterisk != null && requiredAsterisk !== false && (react_1.default.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk))))),
+        typeof errorText !== 'undefined' && (react_1.default.createElement(overridesMap.ErrorText, { error: error }, errorText))));
+};
+exports.default = react_1.default.forwardRef(Checkbox);

package/Checkbox/useCheckboxColor.d.ts

@@ -0,0 +1,6 @@
+import Color from '../Color';
+/**
+ * Resolves the `color` property of the Checkbox to the Color instance
+ */
+declare const useCheckboxColor: (color: 'default' | 'primary' | 'secondary' | string | undefined) => Color;
+export default useCheckboxColor;

package/Checkbox/useCheckboxColor.js

@@ -0,0 +1,33 @@
+"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 react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+/**
+ * Resolves the `color` property of the Checkbox to the Color instance
+ */
+const useCheckboxColor = (color) => {
+    const theme = (0, react_2.useTheme)();
+    return react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'secondary':
+                return theme.color.accentSecondary;
+            case typeof color === 'undefined':
+            case color === 'default':
+            case color === 'primary':
+                return theme.color.accentPrimary;
+            default:
+                try {
+                    return Color_1.default.fromString(String(color));
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                    return theme.color.accentPrimary;
+                }
+        }
+    }, [color, theme.color]);
+};
+exports.default = useCheckboxColor;

package/ClickOutside/index.d.ts

@@ -15,6 +15,12 @@ export interface ClickOutsideProps {
      * **Default**: `onMouseDown`
      */
     readonly mouseEvent?: OutsideMouseEventName | false;
+    /**
+     * Elements whose clicks are not treated as outside clicks,
+     * e.g. the button that toggles a popper.\
+     * `null` and `undefined` entries are skipped
+     */
+    readonly ignoreElements?: readonly (Element | null | undefined)[];
 }
 type OutsideMouseEventName = 'onClick' | 'onMouseDown' | 'onMouseUp';
 export declare const mouseEventMap: Record<OutsideMouseEventName, 'click' | 'mousedown' | 'mouseup'>;

package/ClickOutside/index.js

@@ -11,14 +11,19 @@ exports.mouseEventMap = {
     onMouseUp: 'mouseup',
 };
 const ClickOutside = props => {
-    const { children, mouseEvent = 'onMouseDown', onOutsideClick } = props;
+    const { children, mouseEvent = 'onMouseDown', onOutsideClick, ignoreElements } = props;
     const ref = react_1.default.useRef(null);
+    // A ref keeps an inline array from resubscribing the listener on every render
+    const ignoreElementsRef = react_1.default.useRef(ignoreElements);
+    ignoreElementsRef.current = ignoreElements;
     react_1.default.useEffect(() => {
         const mouseDownEvent = (event) => {
+            var _a;
             let parentElem = event.target;
             let needToClose = true;
             while (parentElem && 'parentNode' in parentElem) {
-                if (parentElem === ref.current) {
+                if (parentElem === ref.current ||
+                    ((_a = ignoreElementsRef.current) === null || _a === void 0 ? void 0 : _a.some(element => element === parentElem))) {
                     needToClose = false;
                     break;
                 }
@@ -37,6 +42,17 @@ const ClickOutside = props => {
             }
         };
     }, [onOutsideClick, mouseEvent]);
-    return react_1.default.createElement(react_1.default.Fragment, null, react_1.default.cloneElement(children, { ref }));
+    // Keep the child's own ref working alongside ours
+    const childRef = children.ref;
+    const setRef = react_1.default.useCallback((el) => {
+        ref.current = el;
+        if (typeof childRef === 'function') {
+            childRef(el);
+        }
+        else if (childRef && typeof childRef === 'object') {
+            childRef.current = el;
+        }
+    }, [childRef]);
+    return react_1.default.createElement(react_1.default.Fragment, null, react_1.default.cloneElement(children, { ref: setRef }));
 };
 exports.default = ClickOutside;

package/Color/Color.d.ts

@@ -1,5 +1,5 @@
 import { ParsedColor } from './ColorParser';
-import { ColorGenerator } from './ColorGenerator';
+import { PaletteName } from './ColorGenerator';
 export type ColorFormat = 'rgb' | 'rgba' | 'hex' | 'hsl' | 'hsla';
 export declare class Color {
     private readonly _r;
@@ -30,7 +30,7 @@ export declare class Color {
     /**
      * Создает цвет из UUID (использует генератор)
      */
-    static fromUuid(uuid: string, palette?: keyof typeof ColorGenerator.getPalettes): Color;
+    static fromUuid(uuid: string, palette?: PaletteName): Color;
     /**
      * Создает цвет из строки с хешированием
      */
@@ -73,11 +73,11 @@ export declare class Color {
      */
     getContrast(other: Color | string): number;
     /**
-     * Проверяет, достаточно ли контрастен цвет для белого текста
+     * Проверяет, светлый ли цвет: относительная яркость больше 0.5
      */
     isLight(): boolean;
     /**
-     * Возвращает наиболее контрастный цвет (черный или белый)
+     * Возвращает цвет текста (черный или белый), наиболее контрастный с текущим цветом
      */
     getContrastColor(): Color;
     /**

package/Color/Color.js

@@ -126,16 +126,20 @@ class Color {
         return (brightest + 0.05) / (darkest + 0.05);
     }
     /**
-     * Проверяет, достаточно ли контрастен цвет для белого текста
+     * Проверяет, светлый ли цвет: относительная яркость больше 0.5
      */
     isLight() {
         return this.getLuminance() > 0.5;
     }
     /**
-     * Возвращает наиболее контрастный цвет (черный или белый)
+     * Возвращает цвет текста (черный или белый), наиболее контрастный с текущим цветом
      */
     getContrastColor() {
-        return this.isLight() ? Color.fromString('#000000') : Color.fromString('#FFFFFF');
+        const black = Color.fromString('#000000');
+        const white = Color.fromString('#FFFFFF');
+        // Compared by the contrast ratio: a luminance threshold picks white text
+        // for mid colors like orange, where black text is several times more readable
+        return this.getContrast(black) >= this.getContrast(white) ? black : white;
     }
     /**
      * Возвращает новый цвет, смешанный с другим цветом
@@ -297,9 +301,9 @@ class Color {
     static getHextByWebColor(value) {
         if (process.env.NODE_ENV !== 'production') {
             console.warn('[Color] getHextByWebColor() is deprecated. ' +
-                'Use Color.fromString(value).toHslString() instead');
+                'Use Color.fromString(value).toHexString() instead');
         }
-        return Color.fromString(value).toHslString();
+        return Color.fromString(value).toHexString();
     }
     /**
      * @deprecated Do not use.

package/Color/ColorGenerator.d.ts

@@ -4,7 +4,7 @@ export declare class ColorGenerator {
     /**
      * Генерирует цвет на основе UUID
      */
-    static fromUuid(uuid: string, palette?: keyof typeof ColorGenerator.palettes): Color;
+    static fromUuid(uuid: string, palette?: PaletteName): Color;
     /**
      * Генерирует цвет на основе строки с использованием хеш-функции
      */
@@ -26,4 +26,8 @@ export declare class ColorGenerator {
     };
     private static stringToHashCode;
 }
+/**
+ * Name of a palette of ColorGenerator: `pastel`, `vibrant`, `muted`, `autumn`, `ocean` or `forest`
+ */
+export type PaletteName = keyof ReturnType<typeof ColorGenerator.getPalettes>;
 export default ColorGenerator;

package/Color/ColorParser.d.ts

@@ -12,6 +12,15 @@ export declare class ColorParser {
      */
     static parse(value: string): ParsedColor;
     private static parseHex;
+    /**
+     * Returns function arguments: `rgb(10, 20 30 / 50%)` -> ['10', '20', '30', '50%']
+     */
+    private static getArgs;
+    private static parseNumber;
+    /**
+     * Alpha may be a number (0..1) or a percentage (0%..100%)
+     */
+    private static parseAlpha;
     private static parseRgb;
     private static parseHsl;
     private static hslToRgb;

package/Color/ColorParser.js

@@ -11,6 +11,9 @@ class ColorParser {
             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]);
@@ -70,27 +73,64 @@ class ColorParser {
         }
         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 matches = rgb.match(/[\d.]+/g);
-        if (!matches || matches.length < 3) {
+        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: this.clamp(parseInt(matches[0], 10), 0, 255),
-            g: this.clamp(parseInt(matches[1], 10), 0, 255),
-            b: this.clamp(parseInt(matches[2], 10), 0, 255),
-            a: matches[3] ? this.clamp(parseFloat(matches[3]), 0, 1) : 1,
+            r: channel(args[0]),
+            g: channel(args[1]),
+            b: channel(args[2]),
+            a: this.parseAlpha(args[3], rgb),
         };
     }
     static parseHsl(hsl) {
-        const matches = hsl.match(/[\d.]+/g);
-        if (!matches || matches.length < 3) {
+        const args = this.getArgs(hsl);
+        if (args.length < 3) {
             throw new Error(`Invalid HSL color: ${hsl}`);
         }
-        const h = parseFloat(matches[0]) / 360;
-        const s = parseFloat(matches[1]) / 100;
-        const l = parseFloat(matches[2]) / 100;
-        const a = matches[3] ? this.clamp(parseFloat(matches[3]), 0, 1) : 1;
+        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],

package/CountryFlags/AC.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 AC = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const AC = (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: "#0052B4", d: "M0 0h513v342H0z" }),
     React.createElement("path", { fill: "#FFF", d: "M440.1 181.1c-.1 39.2-6.4 81.4-57.4 101.5-51.1-20.1-57.3-62.3-57.4-101.5h114.8z" }),
     React.createElement("path", { fill: "#29DBFF", d: "M439.6 197.7c-2.8 34.9-12.4 67.4-57 85-44.4-17.6-54.5-51.2-56.9-84.9" }),

package/CountryFlags/AD.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 AD = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const AD = (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("style", null, '.st0{fill:#ffda44}.st1{fill:#0052b4}.st2{fill:#d80027}.st3,.st4{fill:none;stroke:#d80027;stroke-width:7;stroke-miterlimit:10}.st4{stroke-width:4}.st5{fill:#bc8b00}'),
     React.createElement("path", { fill: "#FFDA44", d: "M0 0h513v342H0z" }),
     React.createElement("path", { fill: "#0052B4", d: "M0 0h171v342H0z" }),

package/CountryFlags/AE.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 AE = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const AE = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em", "aria-hidden": (0, isLabelled_1.default)(props) ? undefined : true, role: (0, isLabelled_1.default)(props) ? 'img' : undefined }, props, { ref: ref }),
     React.createElement("path", { fill: "#FFF", d: "M0 0h513v342H0z" }),
     React.createElement("path", { fill: "#009e49", d: "M0 0h513v114H0z" }),
     React.createElement("path", { d: "M0 228h513v114H0z" }),

package/CountryFlags/AF.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 AF = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const AF = (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: "#DB3E00", d: "M0 0h513v342H0z" }),
     React.createElement("path", { fill: "#479900", d: "M331 0h182v342H331z" }),
     React.createElement("path", { d: "M0 0h181.8v342H0z" }),

package/CountryFlags/AG.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 AG = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const AG = (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", { d: "M0 0h513v342H0z" }),
     React.createElement("path", { fill: "#0072c6", d: "M88.8 136.5c-2.2 12.9-3.4 26.2-3.4 39.8 0 13.6 1.2 27 3.4 39.8L256 228.3l167.2-12.1c2.2-12.9 3.4-26.2 3.4-39.8s-1.2-27-3.4-39.8" }),
     React.createElement("path", { fill: "#FFF", d: "M423.2 219H88.8c15.8 69.8 84.7 122.3 167.2 122.3S407.4 288.8 423.2 219z" }),

package/CountryFlags/AI.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 AI = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em" }, props, { ref: ref }),
+const isLabelled_1 = __importDefault(require("./isLabelled"));
+const AI = (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: "#00318b", d: "M0 0h513v342H0z" }),
     React.createElement("path", { fill: "#FFF", d: "M454.8 265.38c7.94-10.93 13.24-24.27 13.24-40.42V104.89a59.754 59.754 0 0 1-36.02 12.01c-19.64 0-37.07-9.43-48.03-24.01-10.95 14.58-28.39 24.01-48.03 24.01-13.52 0-25.99-4.47-36.02-12v120.06c0 16.16 5.3 29.5 13.24 40.42H454.8z" }),
     React.createElement("path", { fill: "#8DCCFF", d: "M310.23 260.98C332.65 296.96 384 309 384 309s51.35-12.04 73.77-48.02H310.23z" }),