@aivenio/aquarium 0.0.1

package/dist/src/components/Modal/Modal.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Modal as BaseModal } from '../../../src/common/Modal/Modal';
+import { TabProps, TabsProps } from '../../../src/components/Tabs/Tabs';
+import type { AsyncActionType } from '../../../types/ActionType';
+export declare type ModalProps = {
+    /** Modal title */
+    title: string;
+    /** State of the modal */
+    open: React.ComponentProps<typeof BaseModal>['open'];
+    /**
+     * Callback function that triggers when presses.
+     * Not optional because the state change must be handled outside of modal.
+     */
+    onClose: () => void;
+    /** Modal body text or content. */
+    children?: React.ComponentProps<typeof BaseModal.Body>['children'];
+    /** Optional Modal subtitle */
+    subtitle?: string;
+    /** Optional size (width) of the modal: sm, md, full */
+    size?: React.ComponentProps<typeof BaseModal.Dialog>['size'];
+    /** Optional primary action. Maximum of one is allowed. */
+    primaryAction?: AsyncActionType;
+    /** Optional secondary actions. One or more can be provided. */
+    secondaryActions?: AsyncActionType | AsyncActionType[];
+};
+export declare const Modal: React.FC<ModalProps>;
+export declare const ModalTabs: React.FC<TabsProps & {
+    maxHeight: number;
+}> & {
+    Tab: React.FC<TabProps>;
+};

package/dist/src/components/Modal/Modal.js

@@ -0,0 +1,57 @@
+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 castArray from 'lodash/castArray';
+import omit from 'lodash/omit';
+import { Overlay, useModalOverlay, DismissButton } from '@react-aria/overlays';
+import { FocusScope } from '@react-aria/focus';
+import { useOverlayTriggerState } from '@react-stately/overlays';
+import { tw } from '../../../src/utils/tailwind';
+import { Modal as BaseModal } from '../../../src/common/Modal/Modal';
+import { IconButton, PrimaryButton, SecondaryButton } from '../../../src/components/Button/Button';
+import { createTabsComponent, ModalTab, ModalTabContainer, TabItem, } from '../../../src/components/Tabs/Tabs';
+import cross from '../../../src/icons/cross';
+import { isComponentType } from '../../../types/utils';
+export const Modal = ({ title, open, subtitle, onClose, children, primaryAction, secondaryActions, size, }) => {
+    const ref = React.useRef(null);
+    const state = useOverlayTriggerState({ isOpen: open });
+    const { modalProps, underlayProps } = useModalOverlay({ isDismissable: false }, state, ref);
+    if (!open) {
+        return null;
+    }
+    return (React.createElement(Overlay, null,
+        React.createElement(BaseModal, { open: state.isOpen },
+            React.createElement(BaseModal.BackDrop, Object.assign({}, underlayProps)),
+            React.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true },
+                React.createElement(BaseModal.Dialog, Object.assign({ ref: ref, size: size }, modalProps),
+                    React.createElement(DismissButton, { onDismiss: onClose }),
+                    React.createElement(BaseModal.Header, { className: tw({ 'pb-3': isComponentType(children, ModalTabs) }) },
+                        React.createElement(BaseModal.TitleContainer, null,
+                            React.createElement(BaseModal.Title, null, title),
+                            subtitle && React.createElement(BaseModal.Subtitle, null, subtitle)),
+                        React.createElement(IconButton, { "aria-label": "Close", icon: cross, onClick: onClose })),
+                    isComponentType(children, ModalTabs) ? (React.cloneElement(children, { className: tw('[&>div:first-child]:px-5 grow') })) : (React.createElement(BaseModal.Body, { tabIndex: 0, noFooter: !(secondaryActions || primaryAction) }, children)),
+                    (secondaryActions || primaryAction) && (React.createElement(BaseModal.Footer, null,
+                        React.createElement(BaseModal.Actions, null,
+                            secondaryActions &&
+                                castArray(secondaryActions)
+                                    .filter(Boolean)
+                                    .map((_a) => {
+                                    var { text } = _a, action = __rest(_a, ["text"]);
+                                    return (React.createElement(SecondaryButton, Object.assign({ key: text }, action), text));
+                                }),
+                            primaryAction && (React.createElement(PrimaryButton, Object.assign({ key: primaryAction.text }, omit(primaryAction, 'text')), primaryAction.text))))),
+                    React.createElement(DismissButton, { onDismiss: onClose }))))));
+};
+export const ModalTabs = createTabsComponent(ModalTab, TabItem, 'ModalTabs', (children, selected, props) => (React.createElement(BaseModal.Body, { maxHeight: props.maxHeight },
+    React.createElement(ModalTabContainer, null, children.find((node, index) => (node === null || node === void 0 ? void 0 : node.props.value) === selected || index === selected)))));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxTQUFTLE1BQU0sa0JBQWtCLENBQUM7QUFDekMsT0FBTyxJQUFJLE1BQU0sYUFBYSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxPQUFPLEVBQUUsZUFBZSxFQUFFLGFBQWEsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQy9FLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUNqRSxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDeEMsT0FBTyxFQUFFLEtBQUssSUFBSSxTQUFTLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM1RCxPQUFPLEVBQUUsVUFBVSxFQUFFLGFBQWEsRUFBRSxlQUFlLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMxRixPQUFPLEVBQ0wsbUJBQW1CLEVBQ25CLFFBQVEsRUFDUixpQkFBaUIsRUFDakIsT0FBTyxHQUlSLE1BQU0sMEJBQTBCLENBQUM7QUFFbEMsT0FBTyxLQUFLLE1BQU0saUJBQWlCLENBQUM7QUFDcEMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQStCOUMsTUFBTSxDQUFDLE1BQU0sS0FBSyxHQUF5QixDQUFDLEVBQzFDLEtBQUssRUFDTCxJQUFJLEVBQ0osUUFBUSxFQUNSLE9BQU8sRUFDUCxRQUFRLEVBQ1IsYUFBYSxFQUNiLGdCQUFnQixFQUNoQixJQUFJLEdBQ0wsRUFBRSxFQUFFO0lBQ0gsTUFBTSxHQUFHLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBaUIsSUFBSSxDQUFDLENBQUM7SUFDL0MsTUFBTSxL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

package/dist/src/components/MultiInput/InputChip.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare type InputChipProps = {
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export declare const InputChip: React.ForwardRefExoticComponent<Pick<InputChipProps, "disabled" | "key" | "readOnly" | keyof React.HTMLAttributes<HTMLDivElement> | "invalid"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/src/components/MultiInput/InputChip.js

@@ -0,0 +1,37 @@
+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 smallCross from '../../../src/icons/smallCross';
+import React from 'react';
+import { Icon } from '../../../src/components/Icon/Icon';
+import { Typography } from '../../../src/components/Typography/Typography';
+import { tw, classNames } from '../../../src/utils/tailwind';
+export const InputChip = React.forwardRef((_a, ref) => {
+    var { invalid = false, disabled, readOnly, className, onClick: _onClick, children } = _a, props = __rest(_a, ["invalid", "disabled", "readOnly", "className", "onClick", "children"]);
+    const onClick = (e) => {
+        if (!disabled && !readOnly) {
+            _onClick === null || _onClick === void 0 ? void 0 : _onClick(e);
+        }
+    };
+    return (React.createElement("div", Object.assign({ ref: ref, role: 'button', className: classNames(className, 'inline-flex align-middle mx-1 px-2 py-1 items-center rounded-sm break-all', {
+            'bg-error-0 ': invalid,
+            'bg-grey-0': !invalid && !disabled,
+            'cursor-default': readOnly,
+            'bg-grey-5 pointer-events-none': disabled,
+        }), onClick: onClick }, props),
+        React.createElement(Typography, { variant: 'body-small', color: invalid ? 'error-80' : disabled ? 'grey-40' : 'grey-70' }, children),
+        !readOnly && (React.createElement("div", null,
+            React.createElement(Icon, { icon: smallCross, className: tw('ml-2', {
+                    'text-error-70': invalid,
+                    'text-grey-70': !invalid,
+                }) })))));
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXRDaGlwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvTXVsdGlJbnB1dC9JbnB1dENoaXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxVQUFVLE1BQU0sc0JBQXNCLENBQUM7QUFDOUMsT0FBTyxLQUFxQixNQUFNLE9BQU8sQ0FBQztBQUMxQyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDaEQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQ2xFLE9BQU8sRUFBRSxFQUFFLEVBQUUsVUFBVSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFPcEQsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ3ZDLENBQUMsRUFBeUYsRUFBRSxHQUFHLEVBQUUsRUFBRTtRQUFsRyxFQUFFLE9BQU8sR0FBRyxLQUFLLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxRQUFRLE9BQVksRUFBUCxLQUFLLGNBQXZGLHVFQUF5RixDQUFGO0lBQ3RGLE1BQU0sT0FBTyxHQUFHLENBQUMsQ0FBNkIsRUFBRSxFQUFFO1FBQ2hELElBQUksQ0FBQyxRQUFRLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDMUIsUUFBUSxhQUFSLFFBQVEsdUJBQVIsUUFBUSxDQUFHLENBQUMsQ0FBQyxDQUFDO1NBQ2Y7SUFDSCxDQUFDLENBQUM7SUFFRixPQUFPLENBQ0wsMkNBQ0UsR0FBRyxFQUFFLEdBQUcsRUFDUixJQUFJLEVBQUUsUUFBUSxFQUNkLFNBQVMsRUFBRSxVQUFVLENBQUMsU0FBUyxFQUFFLDJFQUEyRSxFQUFFO1lBQzVHLGFBQWEsRUFBRSxPQUFPO1lBQ3RCLFdBQVcsRUFBRSxDQUFDLE9BQU8sSUFBSSxDQUFDLFFBQVE7WUFDbEMsZ0JBQWdCLEVBQUUsUUFBUTtZQUMxQiwrQkFBK0IsRUFBRSxRQUFRO1NBQzFDLENBQUMsRUFDRixPQUFPLEVBQUUsT0FBTyxJQUNaLEtBQUs7UUFFVCxvQkFBQyxVQUFVLElBQUMsT0FBTyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsT0FBTyxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxTQUFTLElBQzlGLFFBQVEsQ0FDRTtRQUNaLENBQUMsUUFBUSxJQUFJLENBQ1o7WUFDRSxvQkFBQyxJQUFJLElBQ0gsSUFBSSxFQUFFLFVBQVUsRUFDaEIsU0FBUyxFQUFFLEVBQUUsQ0FBQyxNQUFNLEVBQUU7b0JBQ3BCLGVBQWUsRUFBRSxPQUFPO29CQUN4QixjQUFjLEVBQUUsQ0FBQyxPQUFPO2lCQUN6QixDQUFDLEdBQ0YsQ0FDRSxDQUNQLENBQ0csQ0FDUCxDQUFDO0FBQ0osQ0FBQyxDQUNGLENBQUMifQ==

package/dist/src/components/MultiInput/MultiInput.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { LabelControlProps } from '../../../src/utils/form/Label/Label';
+export declare type MultiInputBaseProps<Item extends unknown> = {
+    id?: string;
+    name?: string;
+    type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+    placeholder?: string;
+    autoFocus?: boolean;
+    delimiter?: 'space' | 'enter' | 'both';
+    defaultValue?: Item[];
+    value?: Item[];
+    valid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    endAdornment?: React.ReactElement;
+    /**
+     * @deprecated Use `maxLength` instead
+     */
+    max?: number;
+    maxLength?: number;
+    inline?: boolean;
+    itemToString?: (opt: Item | null) => string | null;
+    createItem?: (value: string) => Item;
+    onChange?: (values: Item[] | undefined) => void;
+    isItemValid?: (item: Item, index: number) => boolean;
+};
+export declare const MultiInputBase: {
+    <Item extends unknown>({ id, name, type, placeholder, autoFocus, delimiter, defaultValue, value, endAdornment, max, maxLength, inline, itemToString, createItem, onChange, isItemValid, disabled, readOnly, valid, ...props }: MultiInputBaseProps<Item>): React.ReactElement<MultiInputBaseProps<Item>, string | React.JSXElementConstructor<any>>;
+    Skeleton: React.FC<{}>;
+};
+export declare type MultiInputProps<Item extends unknown> = MultiInputBaseProps<Item> & Omit<LabelControlProps, 'length'>;
+export declare const MultiInput: {
+    <Item extends unknown>(props: MultiInputProps<Item>): React.ReactElement<MultiInputProps<Item>, string | React.JSXElementConstructor<any>>;
+    Skeleton: React.FC<{}>;
+};

package/dist/src/components/MultiInput/MultiInput.js

@@ -0,0 +1,150 @@
+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 castArray from 'lodash/castArray';
+import identity from 'lodash/identity';
+import uniqueId from 'lodash/uniqueId';
+import omit from 'lodash/omit';
+import React, { useEffect, useRef, useState } from 'react';
+import { Select } from '../../../src/common/Select/Select';
+import { InputChip } from '../../../src/components/MultiInput/InputChip';
+import { Skeleton } from '../../../src/components/Skeleton/Skeleton';
+import { InputAdornment } from '../../../src/utils/form/InputAdornment/InputAdornment';
+import { getLabelControlProps, LabelControl } from '../../../src/utils/form/Label/Label';
+import { tw } from '../../../src/utils/tailwind';
+export const MultiInputBase = (_a) => {
+    var _b;
+    var { id, name, type, placeholder, autoFocus, delimiter = 'enter', defaultValue, value, endAdornment, max, maxLength = max, inline = true, itemToString = (val) => String(val), createItem = (val) => val, onChange, isItemValid, disabled = false, readOnly = false, valid = true } = _a, props = __rest(_a, ["id", "name", "type", "placeholder", "autoFocus", "delimiter", "defaultValue", "value", "endAdornment", "max", "maxLength", "inline", "itemToString", "createItem", "onChange", "isItemValid", "disabled", "readOnly", "valid"]);
+    const inputRef = useRef(null);
+    const [items, setItems] = useState((_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : []);
+    const [hasFocus, setFocus] = useState(false);
+    const keyCodes = [delimiter !== 'enter' ? ' ' : null, delimiter !== 'space' ? 'Enter' : null].filter(identity);
+    useEffect(() => {
+        const requiresUpdate = value !== undefined || defaultValue === undefined;
+        if (requiresUpdate && JSON.stringify(value) !== JSON.stringify(items)) {
+            setItems(value !== null && value !== void 0 ? value : []);
+        }
+    }, [JSON.stringify(value)]);
+    const handleKeyDown = (e) => {
+        var _a, _b, _c;
+        switch (e.key) {
+            case 'Enter':
+            case ' ': {
+                if (keyCodes.includes(e.key) && inputRef.current) {
+                    e.stopPropagation();
+                    const value = inputRef.current.value.trim();
+                    handleAddItem(value);
+                }
+                break;
+            }
+            case 'Backspace': {
+                const length = (_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0;
+                if (inline && !((_c = (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.length) && length > 0) {
+                    handleRemoveItem(length - 1);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    const handleKeyUp = (e) => {
+        if (keyCodes.includes(e.key)) {
+            e.stopPropagation();
+        }
+    };
+    const handleAddItem = (value) => {
+        if (inputRef.current) {
+            inputRef.current.value = '';
+        }
+        if (value) {
+            const newItems = castArray(value)
+                .map(createItem)
+                .filter((item) => !items.includes(item));
+            if (newItems.length > 0 && items.length + newItems.length <= (maxLength !== null && maxLength !== void 0 ? maxLength : Number.MAX_SAFE_INTEGER)) {
+                const updated = (items !== null && items !== void 0 ? items : []).concat(newItems);
+                setItems(updated);
+                onChange === null || onChange === void 0 ? void 0 : onChange(updated);
+            }
+        }
+    };
+    const handleRemoveItem = (idx) => {
+        const updated = [...(items !== null && items !== void 0 ? items : [])];
+        updated.splice(idx, 1);
+        setItems(updated);
+        onChange === null || onChange === void 0 ? void 0 : onChange(updated);
+    };
+    const handlePaste = (e) => {
+        e.preventDefault();
+        const copiedText = e.clipboardData.getData('text/plain');
+        const spaceSeparated = copiedText.split(' ');
+        const newLineSeparated = copiedText.split('\n');
+        const commaSeparated = copiedText.split(',');
+        const separatedText = [spaceSeparated, newLineSeparated, commaSeparated]
+            .filter((items) => items.length > 1)
+            .shift() || [copiedText];
+        const itemsToAdd = separatedText.map((value) => value.trim()).filter(identity);
+        handleAddItem(itemsToAdd);
+    };
+    const handleFocus = () => {
+        setFocus(true);
+    };
+    const handleBlur = () => {
+        var _a;
+        setFocus(false);
+        const value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+        if (value) {
+            handleAddItem(value);
+        }
+    };
+    const renderChips = () => items === null || items === void 0 ? void 0 : items.map((item, index) => {
+        var _a;
+        return (React.createElement(InputChip, { key: `${itemToString(item)}.${index}`, invalid: !((_a = isItemValid === null || isItemValid === void 0 ? void 0 : isItemValid(item, index)) !== null && _a !== void 0 ? _a : true), readOnly: readOnly, disabled: disabled, onClick: (e) => {
+                e.stopPropagation();
+                handleRemoveItem(index);
+            } }, itemToString(item)));
+    });
+    return (React.createElement("div", null,
+        React.createElement(Select.InputContainer, { variant: disabled ? 'disabled' : valid === false ? 'error' : readOnly ? 'readOnly' : hasFocus ? 'focused' : 'default' },
+            React.createElement("div", { className: 'grow inline-flex flex-row flex-wrap gap-y-2' },
+                inline && renderChips(),
+                React.createElement(Select.Input, Object.assign({ ref: inputRef, id: id !== null && id !== void 0 ? id : name, name: name, type: type }, props, { autoFocus: autoFocus, disabled: disabled, readOnly: readOnly, placeholder: !inline || (items === null || items === void 0 ? void 0 : items.length) === 0 ? placeholder : '', onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onPaste: handlePaste, onFocus: handleFocus, onBlur: handleBlur, autoComplete: 'off' }))),
+            endAdornment && React.createElement(InputAdornment, null, endAdornment)),
+        !inline && React.createElement("div", { className: tw('flex flex-row flex-wrap gap-y-2 mt-2') }, renderChips())));
+};
+const BaseMultiInputSkeleton = () => React.createElement(Skeleton, { height: 38 });
+MultiInputBase.Skeleton = BaseMultiInputSkeleton;
+export const MultiInput = (props) => {
+    var _a, _b, _c, _d, _e;
+    const maxLength = (_a = props.maxLength) !== null && _a !== void 0 ? _a : props.max;
+    const [value, setValue] = useState((_c = (_b = props.value) !== null && _b !== void 0 ? _b : props.defaultValue) !== null && _c !== void 0 ? _c : []);
+    useEffect(() => {
+        var _a;
+        setValue((_a = props.value) !== null && _a !== void 0 ? _a : []);
+    }, [JSON.stringify(props.value)]);
+    // we need a unique ID to be used for an accessible connection between the input and its error message
+    const id = useRef((_e = (_d = props.id) !== null && _d !== void 0 ? _d : props.name) !== null && _e !== void 0 ? _e : `multiinput-${uniqueId()}`);
+    const errorMessageId = uniqueId();
+    const errorProps = props.valid === false ? { 'aria-invalid': true, 'aria-describedby': errorMessageId } : {};
+    const labelControlProps = getLabelControlProps(props);
+    const baseProps = omit(props, Object.keys(labelControlProps));
+    return (React.createElement(LabelControl, Object.assign({ id: `${id.current}-label`, htmlFor: `${id.current}-input`, messageId: errorMessageId }, labelControlProps, { length: value.length, maxLength: maxLength }),
+        React.createElement(MultiInputBase, Object.assign({}, baseProps, errorProps, { id: `${id.current}-input`, onChange: (value) => {
+                var _a;
+                setValue(value !== null && value !== void 0 ? value : []);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value);
+            }, disabled: props.disabled, maxLength: props.maxLength, valid: props.valid }))));
+};
+const MultiInputSkeleton = () => (React.createElement(LabelControl.Skeleton, null,
+    React.createElement(MultiInputBase.Skeleton, null)));
+MultiInput.Skeleton = MultiInputSkeleton;
+MultiInput.Skeleton.displayName = 'MultiInput.Skeleton'; // this will affect the Doc code preview in storybook to not show it as <No Display Name/> or <[object Object]/>.
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTXVsdGlJbnB1dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL011bHRpSW5wdXQvTXVsdGlJbnB1dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLFNBQVMsTUFBTSxrQkFBa0IsQ0FBQztBQUN6QyxPQUFPLFFBQVEsTUFBTSxpQkFBaUIsQ0FBQztBQUN2QyxPQUFPLFFBQVEsTUFBTSxpQkFBaUIsQ0FBQztBQUN2QyxPQUFPLElBQUksTUFBTSxhQUFhLENBQUM7QUFDL0IsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUMzRCxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDbEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUM1RCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sOENBQThDLENBQUM7QUFDOUUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFlBQVksRUFBcUIsTUFBTSw0QkFBNEIsQ0FBQztBQUNuRyxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUEyQnhDLE1BQU0sQ0FBQyxNQUFNLGNBQWMsR0FBRyxDQUF1QixFQXFCekIsRUFBaUQsRUFBRTs7UUFyQjFCLEVBQ25ELEVBQUUsRUFDRixJQUFJLEVBQ0osSUFBSSxFQUNKLFdBQVcsRUFDWCxTQUFTLEVBQ1QsU0FBUyxHQUFHLE9BQU8sRUFDbkIsWUFBWSxFQUNaLEtBQUssRUFDTCxZQUFZLEVBQ1osR0FBRyxFQUNILFNBQVMsR0FBRyxHQUFHLEVBQ2YsTUFBTSxHQUFHLElBQUksRUFDYixZQUFZLEdBQUcsQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMs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

package/dist/src/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComboboxBaseProps } from '../../../src/components/Combobox/Combobox';
+import { LabelControlProps } from '../../../src/utils/form/Label/Label';
+export declare type MultiSelectBaseProps<Option extends unknown> = Omit<ComboboxBaseProps<Option>, 'value' | 'onChange'> & {
+    readOnly?: boolean;
+    closeOnSelect?: boolean;
+    hideChips?: boolean;
+    inline?: boolean;
+    value?: Option[] | null;
+    defaultValue?: Option[] | null;
+    onChange?: (items: Option[] | undefined) => void;
+};
+export declare const MultiSelectBase: {
+    <Option extends unknown>({ id, name, placeholder, maxHeight, closeOnSelect, hideChips, inline, options, optionKeys, noResults, optionToString: itemToString, renderOption, isOptionDisabled, createOption, defaultValue, value, onChange, valid, disabled, readOnly, children, ...props }: React.PropsWithChildren<MultiSelectBaseProps<Option>>): React.ReactElement<MultiSelectBaseProps<Option>, string | React.JSXElementConstructor<any>>;
+    Skeleton: React.FC<{}>;
+};
+export declare type MultiSelectProps<Option extends unknown> = MultiSelectBaseProps<Option> & Omit<LabelControlProps, 'length'>;
+export declare const MultiSelect: {
+    <Option extends unknown>({ options, noResults, ...props }: MultiSelectProps<Option>): React.ReactElement<MultiSelectProps<Option>, string | React.JSXElementConstructor<any>>;
+    Skeleton: React.FC<{}>;
+};

package/dist/src/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,134 @@
+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 { useCombobox, useMultipleSelection } from 'downshift';
+import isNil from 'lodash/isNil';
+import omit from 'lodash/omit';
+import omitBy from 'lodash/omitBy';
+import uniqueId from 'lodash/uniqueId';
+import { matchSorter } from 'match-sorter';
+import React, { useRef, useState } from 'react';
+import { useOverlayPosition } from '@react-aria/overlays';
+import { PopoverWrapper } from '../../../src/components/Popover/PopoverWrapper';
+import { InputChip } from '../../../src/components/MultiInput/InputChip';
+import { Skeleton } from '../../../src/components/Skeleton/Skeleton';
+import { Select, getOptionLabelBuiltin, isOptionDisabledBuiltin } from '../../../src/common/Select/Select';
+import { getLabelControlProps, LabelControl } from '../../../src/utils/form/Label/Label';
+import { tw } from '../../../src/utils/tailwind';
+export const MultiSelectBase = (_a) => {
+    var _b;
+    var { id, name, placeholder, maxHeight, closeOnSelect = true, hideChips = false, inline = true, options, optionKeys = ['label', 'value'], noResults, optionToString: itemToString = getOptionLabelBuiltin, renderOption = (opt) => itemToString(opt), isOptionDisabled = isOptionDisabledBuiltin, createOption, defaultValue, value, onChange, valid = true, disabled = false, readOnly = false, children } = _a, props = __rest(_a, ["id", "name", "placeholder", "maxHeight", "closeOnSelect", "hideChips", "inline", "options", "optionKeys", "noResults", "optionToString", "renderOption", "isOptionDisabled", "createOption", "defaultValue", "value", "onChange", "valid", "disabled", "readOnly", "children"]);
+    const targetRef = useRef(null);
+    const overlayRef = useRef(null);
+    const [inputValue, setInputValue] = useState('');
+    const [hasFocus, setFocus] = useState(false);
+    const { selectedItems, addSelectedItem, removeSelectedItem, getDropdownProps, getSelectedItemProps } = useMultipleSelection(
+    // For some reason useMultipleSelection does not accept
+    // undefined value for selectedItems or defaultSelectedItems
+    omitBy({
+        selectedItems: value,
+        defaultSelectedItems: defaultValue,
+        onSelectedItemsChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.selectedItems),
+    }, isNil));
+    const keys = typeof options[0] === 'string' ? undefined : optionKeys;
+    const selectedItemsAsStrings = selectedItems.map(itemToString);
+    const filteredOptions = (inputValue ? matchSorter(options, inputValue, { keys }) : options).filter((opt) => !selectedItemsAsStrings.includes(itemToString(opt)));
+    const { isOpen, closeMenu, highlightedIndex, getInputProps, getMenuProps, getToggleButtonProps, getItemProps } = useCombobox({
+        id,
+        inputValue,
+        defaultHighlightedIndex: 0,
+        selectedItem: null,
+        items: filteredOptions,
+        stateReducer: (_, actionChanges) => {
+            const { changes, type } = actionChanges;
+            switch (type) {
+                case useCombobox.stateChangeTypes.InputKeyDownEnter:
+                case useCombobox.stateChangeTypes.ItemClick: {
+                    return Object.assign(Object.assign({}, changes), { isOpen: !closeOnSelect });
+                }
+            }
+            return changes;
+        },
+        onStateChange: ({ inputValue, selectedItem, type }) => {
+            switch (type) {
+                case useCombobox.stateChangeTypes.InputChange: {
+                    setInputValue(inputValue !== null && inputValue !== void 0 ? inputValue : '');
+                    break;
+                }
+                case useCombobox.stateChangeTypes.InputKeyDownEnter:
+                case useCombobox.stateChangeTypes.ItemClick:
+                case useCombobox.stateChangeTypes.InputBlur: {
+                    if (selectedItem && !isOptionDisabled(selectedItem, options.indexOf(selectedItem))) {
+                        setInputValue('');
+                        addSelectedItem(selectedItem);
+                    }
+                    break;
+                }
+            }
+        },
+    });
+    const { overlayProps } = useOverlayPosition({
+        targetRef,
+        overlayRef,
+        placement: 'bottom start',
+        shouldFlip: true,
+        isOpen,
+    });
+    const inputProps = getInputProps(getDropdownProps({ preventKeyAction: isOpen, disabled: disabled || readOnly }));
+    const renderChips = () => {
+        return selectedItems.map((selectedItem, index) => (React.createElement(InputChip, Object.assign({ key: `${itemToString(selectedItem)}.chip`, className: tw('mx-0'), disabled: disabled, readOnly: readOnly }, getSelectedItemProps({ selectedItem, index }), { onClick: (e) => {
+                e.stopPropagation();
+                removeSelectedItem(selectedItem);
+            } }), itemToString(selectedItem))));
+    };
+    const hasNoResults = options.length === 0 || filteredOptions.length === 0;
+    const width = (_b = targetRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth;
+    const style = isOpen ? Object.assign(Object.assign({}, overlayProps.style), { width }) : { display: 'none' };
+    return (React.createElement("div", { className: tw('relative') },
+        React.createElement(Select.InputContainer, { ref: targetRef, variant: disabled ? 'disabled' : !valid ? 'error' : readOnly ? 'readOnly' : hasFocus ? 'focused' : 'default' },
+            React.createElement("div", { className: 'grow inline-flex flex-row flex-wrap gap-2' },
+                !hideChips && inline && renderChips(),
+                React.createElement(Select.Input, Object.assign({ id: id, name: name, placeholder: selectedItems.length === 0 && !readOnly ? placeholder : '', value: inputValue !== null && inputValue !== void 0 ? inputValue : '' }, inputProps, props, { disabled: disabled, readOnly: readOnly, onKeyDown: (e) => {
+                        var _a;
+                        e.stopPropagation();
+                        (_a = inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+                    }, onKeyUp: (e) => e.stopPropagation(), onFocus: () => setFocus(true), onBlur: () => setFocus(false) }))),
+            !readOnly && React.createElement(Select.Toggle, Object.assign({ hasFocus: hasFocus, isOpen: isOpen }, getToggleButtonProps({ disabled })))),
+        !hideChips && !inline && React.createElement("div", { className: tw('flex flex-row flex-wrap gap-2 mt-2') }, renderChips()),
+        React.createElement(PopoverWrapper
+        // Downshift expects the menu to be in the DOM all the time.
+        , Object.assign({ 
+            // Downshift expects the menu to be in the DOM all the time.
+            isOpen: true, isDismissable: true, autoFocus: true }, getMenuProps({ ref: overlayRef }), { style: style, onClose: closeMenu }),
+            React.createElement(Select.Menu, { maxHeight: maxHeight },
+                isOpen && hasNoResults && React.createElement(Select.NoResults, null, noResults),
+                isOpen &&
+                    filteredOptions.map((item, index) => (React.createElement(Select.Item, Object.assign({ key: itemToString(item), highlighted: index === highlightedIndex, selected: selectedItems.includes(item) }, getItemProps({ item, index, disabled: isOptionDisabled(item, index) })), renderOption(item))))))));
+};
+const MultiSelectBaseSkeleton = () => React.createElement(Skeleton, { height: 38 });
+MultiSelectBase.Skeleton = MultiSelectBaseSkeleton;
+export const MultiSelect = (_a) => {
+    var _b;
+    var { options, noResults } = _a, props = __rest(_a, ["options", "noResults"]);
+    // we need a unique ID and stable to be used for an accessible connection between the input and its error message
+    const id = useRef((_b = props.id) !== null && _b !== void 0 ? _b : `multiselect-${uniqueId()}`);
+    const errorMessageId = uniqueId();
+    const errorProps = props.valid === false ? { 'aria-invalid': true, 'aria-describedby': errorMessageId } : {};
+    const labelControlProps = getLabelControlProps(props);
+    const baseProps = omit(props, Object.keys(labelControlProps));
+    return (React.createElement(LabelControl, Object.assign({ id: `${id.current}-label`, htmlFor: `${id.current}-input`, messageId: errorMessageId }, labelControlProps),
+        React.createElement(MultiSelectBase, Object.assign({}, baseProps, errorProps, { id: id.current, options: options, noResults: noResults, disabled: props.disabled, valid: props.valid }))));
+};
+const MultiSelectSkeleton = () => (React.createElement(LabelControl.Skeleton, null,
+    React.createElement(MultiSelectBase.Skeleton, null)));
+MultiSelect.Skeleton = MultiSelectSkeleton;
+MultiSelect.Skeleton.displayName = 'MultiSelect.Skeleton'; // this will affect the Doc code preview in storybook to not show it as <No Display Name/> or <[object Object]/>.
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTXVsdGlTZWxlY3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9NdWx0aVNlbGVjdC9NdWx0aVNlbGVjdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLG9CQUFvQixFQUE2QixNQUFNLFdBQVcsQ0FBQztBQUN6RixPQUFPLEtBQUssTUFBTSxjQUFjLENBQUM7QUFDakMsT0FBTyxJQUFJLE1BQU0sYUFBYSxDQUFDO0FBQy9CLE9BQU8sTUFBTSxNQUFNLGVBQWUsQ0FBQztBQUNuQyxPQUFPLFFBQVEsTUFBTSxpQkFBaUIsQ0FBQztBQUN2QyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQzNDLE9BQU8sS0FBSyxFQUFFLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUNoRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUUxRCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDdkUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUM1RCxPQUFPLEVBQUUsTUFBTSxFQUFFLHFCQUFxQixFQUFFLHVCQUF1QixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDbEcsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFlBQVksRUFBcUIsTUFBTSw0QkFBNEIsQ0FBQztBQUNuRyxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFZeEMsTUFBTSxDQUFDLE1BQU0sZUFBZSxHQUFHLENBQXlCLEVBdUJBLEVBQW9ELEVBQUU7O1FBdkJ0RCxFQUN0RCxFQUFFLEVBQ0YsSUFBSSxFQUNKLFdBQVcsRUFDWCxTQUFTLEVBQ1QsYUFBYSxHQUFHLElBQUks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

package/dist/src/components/NativeSelect/NativeSelect.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { LabelControlProps } from '../../../src/utils/form/Label/Label';
+export declare type NativeSelectBaseProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
+    valid?: boolean;
+    readOnly?: boolean;
+    emptyDefault?: boolean;
+};
+declare type NativeSelectBaseComponent = React.ForwardRefExoticComponent<NativeSelectBaseProps & React.RefAttributes<HTMLSelectElement>> & {
+    Skeleton: React.FC;
+};
+export declare const NativeSelectBase: NativeSelectBaseComponent;
+export declare type NativeSelectProps = NativeSelectBaseProps & Omit<LabelControlProps, 'length' | 'maxLength'>;
+declare type NativeSelectComponent = React.ForwardRefExoticComponent<NativeSelectProps & React.RefAttributes<HTMLSelectElement>> & {
+    Skeleton: React.FC;
+};
+export declare const NativeSelect: NativeSelectComponent;
+declare type OptionProps = React.DetailedHTMLProps<React.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>;
+export declare const Option: React.ForwardRefExoticComponent<Pick<OptionProps, "key" | keyof React.OptionHTMLAttributes<HTMLOptionElement>> & React.RefAttributes<HTMLOptionElement>>;
+export {};

package/dist/src/components/NativeSelect/NativeSelect.js

@@ -0,0 +1,56 @@
+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, { useRef } from 'react';
+import { tw, classNames } from '../../../src/utils/tailwind';
+import uniqueId from 'lodash/uniqueId';
+import omit from 'lodash/omit';
+import { Icon } from '../../../src/components';
+import { getLabelControlProps, LabelControl } from '../../../src/utils/form/Label/Label';
+import { Skeleton } from '../../../src/components/Skeleton/Skeleton';
+import caretDown from '../../../src/icons/caretDown';
+export const NativeSelectBase = React.forwardRef((_a, ref) => {
+    var { children, disabled = false, required = false, valid = true, readOnly = false, emptyDefault } = _a, props = __rest(_a, ["children", "disabled", "required", "valid", "readOnly", "emptyDefault"]);
+    return (React.createElement("span", { className: tw('relative block') },
+        !readOnly && (React.createElement("span", { className: tw('absolute right-0 inset-y-0 mr-4 text-grey-40 flex ml-3 pointer-events-none typography-body-default-medium mt-4') },
+            React.createElement(Icon, { icon: caretDown, "data-testid": 'icon-dropdown' }))),
+        React.createElement("select", Object.assign({ ref: ref, disabled: disabled || readOnly, required: required }, props, { className: classNames(tw('block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-body-small text-grey-70  placeholder:text-grey-40 focus:outline-none', {
+                'px-3 py-3 disabled:border-grey-20 disabled:bg-grey-5 disabled:text-grey-40': !readOnly,
+                'px-0 py-3 border-none': readOnly,
+                'border border-error-50': !valid && !readOnly,
+                'border border-grey-20 hover:border-grey-50 focus:border-info-70': valid && !readOnly,
+            }), props.className) }),
+            emptyDefault && React.createElement("option", { value: "", className: tw('hidden') }),
+            children)));
+});
+NativeSelectBase.Skeleton = () => React.createElement(Skeleton, { height: 38 });
+export const NativeSelect = React.forwardRef((_a, ref) => {
+    var _b;
+    var { readOnly } = _a, props = __rest(_a, ["readOnly"]);
+    // we need a unique ID to be used for an accessible connection between the input and its error message
+    const id = useRef((_b = props.id) !== null && _b !== void 0 ? _b : `nativeselect-${uniqueId()}`);
+    const errorMessageId = uniqueId();
+    const errorProps = props.valid === false ? { 'aria-invalid': true, 'aria-describedby': errorMessageId } : {};
+    const _c = getLabelControlProps(props), { 'data-testid': dataTestId } = _c, labelControlProps = __rest(_c, ['data-testid']);
+    const baseProps = omit(props, Object.keys(labelControlProps));
+    return (React.createElement(LabelControl, Object.assign({ id: `${id.current}-label`, htmlFor: id.current, messageId: errorMessageId }, labelControlProps),
+        React.createElement(NativeSelectBase, Object.assign({ ref: ref }, baseProps, errorProps, { id: id.current, "data-testid": dataTestId, disabled: props.disabled, required: props.required, valid: props.valid, readOnly: readOnly }))));
+});
+export const Option = React.forwardRef((_a, ref) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (React.createElement("option", Object.assign({ ref: ref }, props), children));
+});
+const NativeSelectSkeleton = () => (React.createElement(LabelControl.Skeleton, null,
+    React.createElement(NativeSelectBase.Skeleton, null),
+    React.createElement("div", { style: { height: '1px' } })));
+NativeSelect.Skeleton = NativeSelectSkeleton;
+NativeSelect.Skeleton.displayName = 'NativeSelect.Skeleton'; // this will affect the Doc code preview in storybook to not show it as <No Display Name/> or <[object Object]/>.
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmF0aXZlU2VsZWN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvTmF0aXZlU2VsZWN0L05hdGl2ZVNlbGVjdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLE1BQU0sRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUN0QyxPQUFPLEVBQUUsRUFBRSxFQUFFLFVBQVUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3BELE9BQU8sUUFBUSxNQUFNLGlCQUFpQixDQUFDO0FBQ3ZDLE9BQU8sSUFBSSxNQUFNLGFBQWEsQ0FBQztBQUMvQixPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEMsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFlBQVksRUFBcUIsTUFBTSw0QkFBNEIsQ0FBQztBQUNuRyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDNUQsT0FBTyxTQUFTLE1BQU0scUJBQXFCLENBQUM7QUFjNUMsTUFBTSxDQUFDLE1BQU0sZ0JBQWdCLEdBQThCLEtBQUssQ0FBQyxVQUFVLENBQ3pFLENBQUMsRUFBd0csRUFBRSxHQUFHLEVBQUUsRUFBRTtRQUFqSCxFQUFFLFFBQVEsRUFBRSxRQUFRLEdBQUcsS0FBSyxFQUFFLFFBQVEsR0FBRyxLQUFLLEVBQUUsS0FBSyxHQUFHLElBQUksRUFBRSxRQUFRLEdBQUcsS0FBSyxFQUFFLFlBQVksT0FBWSxFQUFQLEtBQUssY0FBdEcseUVBQXdHLENBQUY7SUFDckcsT0FBTyxDQUNMLDhCQUFNLFNBQVMsRUFBRSxFQUFFLENBQUMsZ0JBQWdCLENBQUM7UUFDbEMsQ0FBQyxRQUFRLElBQUksQ0FDWiw4QkFDRSxTQUFTLEVBQUUsRUFBRSxDQUNYLGdIQUFnSCxDQUNqSDtZQUVELG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsU0FBUyxpQkFBZSxlQUFlLEdBQUksQ0FD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