@aivenio/aquarium 0.0.1

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

@@ -0,0 +1,45 @@
+import React from 'react';
+declare type DenseProgressBar = {
+    dense: true;
+};
+declare type LabeledProgressBar = {
+    dense?: false;
+    startLabel: string;
+    endLabel: string;
+};
+export declare type ProgressBarProps = {
+    /**
+     * Current progress.
+     */
+    'value': number;
+    /**
+     * Optional min value for progress bar. Defaults to 0, if not given.
+     */
+    'min'?: number;
+    /**
+     * Optional max value for progress bar. Defaults to 100, if not given.
+     */
+    'max'?: number;
+    /**
+     * Optional dense property. If true, progress bar labels won't be rendered.
+     */
+    'dense'?: boolean;
+    /**
+     * Progress status. This value will be used to determine progress bar color
+     * while operation has not been completed.
+     */
+    'progresStatus'?: 'info' | 'warning';
+    /**
+     * Completed status. This value will be used to determine progress bar color
+     * when operation has been completed.
+     */
+    'completedStatus'?: 'success' | 'error';
+    /**
+     * Optional a11y label for progress bar.
+     */
+    'aria-label'?: string;
+} & (DenseProgressBar | LabeledProgressBar);
+export declare const ProgressBar: React.FC<ProgressBarProps> & {
+    Skeleton: React.FC;
+};
+export {};

package/dist/src/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,21 @@
+// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role
+import React from 'react';
+import { Skeleton } from '../../../src/components/Skeleton/Skeleton';
+import { ProgressBar as BaseProgressBar } from '../../../src/common/ProgressBar/ProgressBar';
+import { tw } from '../../../src/utils/tailwind';
+export const ProgressBar = (props) => {
+    const { value, 'aria-label': ariaLabel, min = 0, max = 100, progresStatus = 'info', completedStatus = 'success', } = props;
+    if (min > max) {
+        throw new Error('`min` value provided to `ProgressBar` is greater than `max` value.');
+    }
+    const progress = (React.createElement(BaseProgressBar, null,
+        React.createElement(BaseProgressBar.Indicator, { status: value === max ? completedStatus : progresStatus, min: min, max: max, value: value, "aria-label": ariaLabel })));
+    if (props.dense) {
+        return progress;
+    }
+    return (React.createElement("div", null,
+        progress,
+        React.createElement(BaseProgressBar.Labels, { className: tw('py-2'), startLabel: props.startLabel, endLabel: props.endLabel })));
+};
+ProgressBar.Skeleton = () => React.createElement(Skeleton, { height: 4, display: "block" });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJvZ3Jlc3NCYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Qcm9ncmVzc0Jhci9Qcm9ncmVzc0Jhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsNkdBQTZHO0FBRTdHLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDNUQsT0FBTyxFQUFFLFdBQVcsSUFBSSxlQUFlLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUNwRixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUE0Q3hDLE1BQU0sQ0FBQyxNQUFNLFdBQVcsR0FBd0QsQ0FBQyxLQUFLLEVBQUUsRUFBRTtJQUN4RixNQUFNLEVBQ0osS0FBSyxFQUNMLFlBQVksRUFBRSxTQUFTLEVBQ3ZCLEdBQUcsR0FBRyxDQUFDLEVBQ1AsR0FBRyxHQUFHLEdBQUcsRUFDVCxhQUFhLEdBQUcsTUFBTSxFQUN0QixlQUFlLEdBQUcsU0FBUyxHQUM1QixHQUFHLEtBQUssQ0FBQztJQUVWLElBQUksR0FBRyxHQUFHLEdBQUcsRUFBRTtRQUNiLE1BQU0sSUFBSSxLQUFLLENBQUMsb0VBQW9FLENBQUMsQ0FBQztLQUN2RjtJQUVELE1BQU0sUUFBUSxHQUFHLENBQ2Ysb0JBQUMsZUFBZTtRQUNkLG9CQUFDLGVBQWUsQ0FBQyxTQUFTLElBQ3hCLE1BQU0sRUFBRSxLQUFLLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLGFBQWEsRUFDdkQsR0FBRyxFQUFFLEdBQUcsRUFDUixHQUFHLEVBQUUsR0FBRyxFQUNSLEtBQUssRUFBRSxLQUFLLGdCQUNBLFNBQVMsR0FDckIsQ0FDYyxDQUNuQixDQUFDO0lBRUYsSUFBSSxLQUFLLENBQUMsS0FBSyxFQUFFO1FBQ2YsT0FBTyxRQUFRLENBQUM7S0FDakI7SUFFRCxPQUFPLENBQ0w7UUFDRyxRQUFRO1FBQ1Qsb0JBQUMsZUFBZSxDQUFDLE1BQU0sSUFBQyxTQUFTLEVBQUUsRUFBRSxDQUFDLE1BQU0sQ0FBQyxFQUFFLFVBQVUsRUFBRSxLQUFLLENBQUMsVUFBVSxFQUFFLFFBQVEsRUFBRSxLQUFLLENBQUMsUUFBUSxHQUFJLENBQ3JHLENBQ1AsQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLFdBQVcsQ0FBQyxRQUFRLEdBQUcsR0FBRyxFQUFFLENBQUMsb0JBQUMsUUFBUSxJQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsT0FBTyxFQUFDLE9BQU8sR0FBRyxDQUFDIn0=

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { RadioButtonProps as BaseRadioButtonProps } from '../../../src/common/RadioButton/RadioButton';
+export declare type RadioButtonProps = BaseRadioButtonProps & {
+    caption?: React.ReactNode;
+};
+declare type RadioButtonComponent = React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>> & {
+    Skeleton: React.FC;
+};
+export declare const RadioButton: RadioButtonComponent;
+export {};

package/dist/src/components/RadioButton/RadioButton.js

@@ -0,0 +1,33 @@
+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 { tw } from '../../../src/utils/tailwind';
+import { ControlLabel } from '../../../src/components/ControlLabel/ControlLabel';
+import { RadioButton as BaseRadioButton, } from '../../../src/common/RadioButton/RadioButton';
+import { Skeleton } from '../../../src/components/Skeleton/Skeleton';
+export const RadioButton = React.forwardRef((_a, ref) => {
+    var _b;
+    var { name, id, 'checked': _checked, defaultChecked, onChange, readOnly = false, disabled = false, caption, children, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["name", "id", 'checked', "defaultChecked", "onChange", "readOnly", "disabled", "caption", "children", 'aria-label']);
+    const [checked, setChecked] = React.useState((_b = _checked !== null && _checked !== void 0 ? _checked : defaultChecked) !== null && _b !== void 0 ? _b : false);
+    if (_checked !== undefined && checked !== _checked) {
+        setChecked(_checked);
+    }
+    return !readOnly || checked ? (React.createElement(ControlLabel, { htmlFor: id, label: children, "aria-label": ariaLabel, caption: caption, readOnly: readOnly, disabled: disabled, style: { gap: '0 8px' } }, !readOnly && (React.createElement(BaseRadioButton, Object.assign({ id: id, ref: ref, name: name }, props, { checked: checked, readOnly: readOnly, disabled: disabled, onChange: (e) => {
+            setChecked(e.target.checked);
+            onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        } }))))) : null;
+});
+const RadioButtonSkeleton = () => (React.createElement("div", { className: tw('flex gap-3') },
+    React.createElement(Skeleton, { height: 20, width: 20 }),
+    React.createElement(Skeleton, { height: 20, width: 150 })));
+RadioButton.Skeleton = RadioButtonSkeleton;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9CdXR0b24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9SYWRpb0J1dHRvbi9SYWRpb0J1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwwQ0FBMEMsQ0FBQztBQUN4RSxPQUFPLEVBQ0wsV0FBVyxJQUFJLGVBQWUsR0FFL0IsTUFBTSxvQ0FBb0MsQ0FBQztBQUM1QyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFZNUQsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ3pDLENBQ0UsRUFZQyxFQUNELEdBQUcsRUFDSCxFQUFFOztRQWRGLEVBQ0UsSUFBSSxFQUNKLEVBQUUsRUFDRixTQUFTLEVBQUUsUUFBUSxFQUNuQixjQUFjLEVBQ2QsUUFBUSxFQUNSLFFBQVEsR0FBRyxLQUFLLEVBQ2hCLFFBQVEsR0FBRyxLQUFLLEVBQ2hCLE9BQU8sRUFDUCxRQUFRLEVBQ1IsWUFBWSxFQUFFLFNBQVMsT0FFeEIsRUFESSxLQUFLLGNBWFYsb0hBWUMsQ0FEUztJQUlWLE1BQU0sQ0FBQyxPQUFPLEVBQUUsVUFBVSxDQUFDLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBVSxNQUFBLFFBQVEsYUFBUixRQUFRLGNBQVIsUUFBUSxHQUFJLGNBQWMsbUNBQUksS0FBSyxDQUFDLENBQUM7SUFFM0YsSUFBSSxRQUFRLEtBQUssU0FBUyxJQUFJLE9BQU8sS0FBSyxRQUFRLEVBQUU7UUFDbEQsVUFBVSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0tBQ3RCO0lBRUQsT0FBTyxDQUFDLFFBQVEsSUFBSSxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQzVCLG9CQUFDLFlBQVksSUFDWCxPQUFPLEVBQUUsRUFBRSxFQUNYLEtBQUssRUFBRSxRQUFRLGdCQUNILFNBQVMsRUFDckIsT0FBTyxFQUFFLE9BQU8sRUFDaEIsUUFBUSxFQUFFLFFBQVEsRUFDbEIsUUFBUSxFQUFFLFFBQVEsRUFDbEIsS0FBSyxFQUFFLEVBQUUsR0FBRyxFQUFFLE9BQU8sRUFBRSxJQUV0QixDQUFDLFFBQVEsSUFBSSxDQUNaLG9CQUFDLGVBQWUsa0JBQ2QsRUFBRSxFQUFFLEVBQUUsRUFDTixHQUFHLEVBQUUsR0FBRyxFQUNSLElBQUksRUFBRSxJQUFJLElBQ04sS0FBSyxJQUNULE9BQU8sRUFBRSxPQUFPLEVBQ2hCLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLFFBQVEsRUFBRSxDQUFDLENBQUMsRUFBRSxFQUFFO1lBQ2QsVUFBVSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUM7WUFDN0IsUUFBUSxhQUFSLFFBQVEsdUJBQVIsUUFBUSxDQUFHLENBQUMsQ0FBQyxDQUFDO1FBQ2hCLENBQUMsSUFDRCxDQUNILENBQ1ksQ0FDaEIsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO0FBQ1gsQ0FBQyxDQUNzQixDQUFDO0FBRTFCLE1BQU0sbUJBQW1CLEdBQWEsR0FBRyxFQUFFLENBQUMsQ0FDMUMsNkJBQUssU0FBUyxFQUFFLEVBQUUsQ0FBQyxZQUFZLENBQUM7SUFDOUIsb0JBQUMsUUFBUSxJQUFDLE1BQU0sRUFBRSxFQUFFLEVBQUUsS0FBSyxFQUFFLEVBQUUsR0FBSTtJQUNuQyxvQkFBQyxRQUFRLElBQUMsTUFBTSxFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUUsR0FBRyxHQUFJLENBQ2hDLENBQ1AsQ0FBQztBQUVGLFdBQVcsQ0FBQyxRQUFRLEdBQUcsbUJBQW1CLENBQUMifQ==

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { LabelControlProps } from '../../../src/utils/form/Label/Label';
+import { ColumnCount } from '../../../src/common/InputGroup/InputGroup';
+import { RadioButtonProps } from '../../../src/components/RadioButton/RadioButton';
+import type { EmptyOrOneOrMore, Either } from '../../../types/utils';
+declare type LegacyLayout = {
+    /**
+     * Flexbox direction attribute for children.
+     * @deprecated Please use `cols` property instead.
+     */
+    direction?: 'row' | 'column';
+};
+declare type ColumnLayout = {
+    /**
+     * Number of columns for children.
+     * @default '1'
+     */
+    cols?: ColumnCount;
+};
+export declare type RadioButtonGroupProps = Omit<LabelControlProps, 'length' | 'maxLength'> & Either<LegacyLayout, ColumnLayout> & {
+    /** Group name that will be propagated to all children. */
+    name: string;
+    /** Value for the radio button group. If not provided, value will
+     * be stored in group's own state.
+     */
+    value?: string;
+    /**
+     * Default value for radio button group.
+     */
+    defaultValue?: string;
+    /**
+     * `onChange()` callback is called whenever radio button group value is updated.
+     */
+    onChange?: (val: string) => void;
+    /**
+     * If false, radio button group will be rendered as non-valid.
+     */
+    valid?: boolean;
+    /**
+     * If true, radio button group will be rendered in read-only mode.
+     */
+    readOnly?: boolean;
+    /**
+     * Only <RadioButton> components are allowed as children.
+     */
+    children: EmptyOrOneOrMore<RadioButtonProps>;
+};
+export declare const RadioButtonGroup: React.FC<RadioButtonGroupProps> & {
+    Skeleton: typeof RadioButtonGroupSkeleton;
+};
+declare type SkeletonProps = Pick<RadioButtonGroupProps, 'direction'> & {
+    options?: number;
+};
+declare const RadioButtonGroupSkeleton: React.FC<SkeletonProps>;
+export {};

package/dist/src/components/RadioButtonGroup/RadioButtonGroup.js

@@ -0,0 +1,64 @@
+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 uniqueId from 'lodash/uniqueId';
+import { tw } from '../../../src/utils/tailwind';
+import { getLabelControlProps, LabelControl } from '../../../src/utils/form/Label/Label';
+import { Flexbox } from '../../../src/components/Flexbox/Flexbox';
+import { InputGroup } from '../../../src/common/InputGroup/InputGroup';
+import { RadioButton } from '../../../src/components/RadioButton/RadioButton';
+const isRadioButton = (c) => {
+    return React.isValidElement(c) && c.type === RadioButton;
+};
+export const RadioButtonGroup = (_a) => {
+    var _b;
+    var { name, value: _value, defaultValue, onChange, direction = 'row', cols, readOnly, children } = _a, props = __rest(_a, ["name", "value", "defaultValue", "onChange", "direction", "cols", "readOnly", "children"]);
+    const [value, setValue] = React.useState((_b = _value !== null && _value !== void 0 ? _value : defaultValue) !== null && _b !== void 0 ? _b : '');
+    const errorMessageId = uniqueId();
+    const errorProps = props.valid === false ? { 'aria-invalid': true, 'aria-describedby': errorMessageId } : {};
+    const labelControlProps = getLabelControlProps(props);
+    if (_value !== undefined && _value !== value) {
+        setValue(_value);
+    }
+    const handleChange = (e) => {
+        setValue(e.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
+    };
+    const content = React.Children.map(children, (c) => {
+        var _a, _b, _c;
+        if (!isRadioButton(c)) {
+            return null;
+        }
+        const defaultChecked = defaultValue === undefined ? undefined : c.props.value === defaultValue;
+        const checked = value === undefined ? undefined : c.props.value === value;
+        return React.cloneElement(c, {
+            name,
+            defaultChecked: (_a = c.props.defaultChecked) !== null && _a !== void 0 ? _a : defaultChecked,
+            checked: (_b = c.props.checked) !== null && _b !== void 0 ? _b : checked,
+            onChange: (_c = c.props.onChange) !== null && _c !== void 0 ? _c : handleChange,
+            disabled: props.disabled || c.props.disabled,
+            readOnly,
+        });
+    });
+    return (React.createElement(LabelControl, Object.assign({ fieldset: true }, labelControlProps, errorProps),
+        cols && React.createElement(InputGroup, { cols: cols }, content),
+        !cols && (React.createElement(Flexbox, { direction: direction, alignItems: "flex-start", colGap: "8", rowGap: "3", wrap: "wrap" }, content))));
+};
+const RadioButtonGroupSkeleton = ({ direction = 'row', options = 2 }) => {
+    return (React.createElement(LabelControl.Skeleton, null,
+        React.createElement("div", { className: tw('flex flex-wrap', {
+                'flex-row gap-8': direction === 'row',
+                'flex-col gap-2': direction === 'column',
+            }) }, Array.from({ length: options }).map((_, key) => (React.createElement(RadioButton.Skeleton, { key: key }))))));
+};
+RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9CdXR0b25Hcm91cC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1JhZGlvQnV0dG9uR3JvdXAvUmFkaW9CdXR0b25Hcm91cC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxRQUFRLE1BQU0saUJBQWlCLENBQUM7QUFDdkMsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxZQUFZLEVBQXFCLE1BQU0sNEJBQTRCLENBQUM7QUFDbkcsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ3pELE9BQU8sRUFBRSxVQUFVLEVBQWUsTUFBTSxrQ0FBa0MsQ0FBQztBQUMzRSxPQUFPLEVBQUUsV0FBVyxFQUFvQixNQUFNLHdDQUF3QyxDQUFDO0FBR3ZGLE1BQU0sYUFBYSxHQUFHLENBQUMsQ0FBa0IsRUFBNkMsRUFBRTtJQUN0RixPQUFPLEtBQUssQ0FBQyxjQUFjLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksS0FBSyxXQUFXLENBQUM7QUFDM0QsQ0FBQyxDQUFDO0FBc0RGLE1BQU0sQ0FBQyxNQUFNLGdCQUFnQixHQUFvRixDQUFDLEVBVWpILEVBQUUsRUFBRTs7UUFWNkcsRUFDaEgsSUFBSSxFQUNKLEtBQUssRUFBRSxNQUFNLEVBQ2IsWUFBWSxFQUNaLFFBQVEsRUFDUixTQUFTLEdBQUcsS0FBSyxFQUNqQixJQUFJLEVBQ0osUUFBUSxFQUNSLFFBQVEsT0FFVCxFQURJLEtBQUssY0FUd0csMEZBVWpILENBRFM7SUFFUixNQUFNLENBQUMsS0FBSyxFQUFFLFFBQVEsQ0FBQyxHQUFHLEtBQUssQ0FBQyxRQUFRLENBQVMsTUFBQSxNQUFNLGFBQU4sTUFBTSxjQUFOLE1BQU0sR0FBSSxZQUFZLG1DQUFJ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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+declare type Variant = 'filled' | 'outlined' | 'raised';
+declare type Value = string | number;
+declare type SegmentedControlProvidedProps<V> = {
+    value: V;
+};
+declare type SegmentedControlInheritedProps = {
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    selected?: boolean;
+    dense?: boolean;
+    variant?: Variant;
+};
+export declare type SegmentedControlProps<V = unknown> = React.ButtonHTMLAttributes<HTMLButtonElement> & SegmentedControlProvidedProps<V> & SegmentedControlInheritedProps;
+export declare const SegmentedControl: <V extends Value>({ children, value, dense, variant, selected, className, ...rest }: SegmentedControlProps<V>) => JSX.Element;
+export declare type SegmentedControlGroupProps<V = unknown> = Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> & {
+    value: V;
+    onChange: (value: V) => void;
+    children: Array<React.ReactElement<SegmentedControlProps<V>>>;
+    variant?: Variant;
+    dense?: boolean;
+};
+export declare const SegmentedControlGroup: <V extends Value>({ value, onChange, variant, dense, children, className, ...rest }: SegmentedControlGroupProps<V>) => JSX.Element;
+export {};

package/dist/src/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,51 @@
+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 { tw, classNames } from '../../../src/utils/tailwind';
+export const SegmentedControl = (_a) => {
+    var { children, value, dense = false, variant = 'filled', selected = false, className } = _a, rest = __rest(_a, ["children", "value", "dense", "variant", "selected", "className"]);
+    return (React.createElement("button", Object.assign({ type: 'button' }, rest, { className: classNames(getCommonClassNames(dense, selected), !rest.disabled && getHoverClassNames(variant), selected && getSelectedClassNames(variant), className) }), children));
+};
+export const SegmentedControlGroup = (_a) => {
+    var { value, onChange, variant = 'filled', dense = false, children, className } = _a, rest = __rest(_a, ["value", "onChange", "variant", "dense", "children", "className"]);
+    const classes = tw('rounded flex', {
+        'border border-grey-20 text-grey-50': variant === 'outlined',
+        'bg-grey-0': variant === 'raised',
+    });
+    return (React.createElement("div", Object.assign({}, rest, { className: classNames(classes, className) }), React.Children.map(children, (child) => React.cloneElement(child, {
+        dense,
+        variant,
+        onClick: () => onChange(child.props.value),
+        selected: child.props.value === value,
+    }))));
+};
+/* </SegmentedControlGroup> */
+const getHoverClassNames = (variant) => tw('hover:text-grey-90', {
+    'hover:bg-grey-0': variant !== 'raised',
+    'hover:bg-grey-5': variant === 'raised',
+}, {
+    'active:bg-grey-5': variant !== 'raised',
+    'active:bg-grey-10': variant === 'raised',
+});
+const getSelectedClassNames = (variant) => tw('relative z-40 text-grey-90', {
+    'bg-white ring-2 ring-offset-0 ring-grey-30 focus:ring-2': variant === 'outlined',
+    'bg-white shadow-2dp': variant === 'raised',
+    'bg-grey-5': variant === 'filled',
+});
+const getCommonClassNames = (dense, selected) => tw('transition whitespace-nowrap rounded mr-1', 'focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-grey-60', 'disabled:cursor-not-allowed disabled:text-grey-30', {
+    'py-4 px-5': !dense,
+    'py-2 px-4': dense,
+    'typography-button-large': !dense,
+    'typography-button-small': dense,
+    'text-grey-50': !selected,
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudGVkQ29udHJvbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1NlZ21lbnRlZENvbnRyb2wvU2VnbWVudGVkQ29udHJvbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLEVBQUUsRUFBRSxVQUFVLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQXNCcEQsTUFBTSxDQUFDLE1BQU0sZ0JBQWdCLEdBQUcsQ0FBa0IsRUFRdkIsRUFBZSxFQUFFO1FBUk0sRUFDaEQsUUFBUSxFQUNSLEtBQUssRUFDTCxLQUFLLEdBQUcsS0FBSyxFQUNiLE9BQU8sR0FBRyxRQUFRLEVBQ2xCLFFBQVEsR0FBRyxLQUFLLEVBQ2hCLFNBQVMsT0FFZ0IsRUFEdEIsSUFBSSxjQVB5QyxrRUFRakQsQ0FEUTtJQUNvQyxPQUFBLENBQzNDLDhDQUNFLElBQUksRUFBRSxRQUFRLElBQ1YsSUFBSSxJQUNSLFNBQVMsRUFBRSxVQUFVLENBQ25CLG1CQUFtQixDQUFDLEtBQUssRUFBRSxRQUFRLENBQUMsRUFDcEMsQ0FBQyxJQUFJLENBQUMsUUFBUSxJQUFJLGtCQUFrQixDQUFDLE9BQU8sQ0FBQyxFQUM3QyxRQUFRLElBQUkscUJBQXFCLENBQUMsT0FBTyxDQUFDLEVBQzFDLFNBQVMsQ0FDVixLQUVBLFFBQVEsQ0FDRixDQUNWLENBQUE7Q0FBQSxDQUFDO0FBY0YsTUFBTSxDQUFDLE1BQU0scUJBQXFCLEdBQUcsQ0FBa0IsRUFRdkIsRUFBZSxFQUFFO1FBUk0sRUFDckQsS0FBSyxFQUNMLFFBQVEsRUFDUixPQUFPLEdBQUcsUUFBUSxFQUNsQixLQUFLLEdBQUcsS0FBSyxFQUNiLFFBQVEsRUFDUixTQUFTLE9BRXFCLEVBRDNCLElBQUksY0FQOEMsa0VBUXRELENBRFE7SUFFUCxNQUFNLE9BQU8sR0FBRyxFQUFFLENBQUMsY0FBYyxFQUFFO1FBQ2pDLG9DQUFvQyxFQUFFLE9BQU8sS0FBSyxVQUFVO1FBQzVELFdBQVcsRUFBRSxPQUFPLEtBQUssUUFBUTtLQUNsQyxDQUFDLENBQUM7SUFDSCxPQUFPLENBQ0wsNkNBQVMsSUFBSSxJQUFFLFNBQVMsRUFBRSxVQUFVLENBQUMsT0FBTyxFQUFFLFNBQVMsQ0FBQyxLQUNyRCxLQUFLLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUN0QyxLQUFLLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRTtRQUN4QixLQUFLO1FBQ0wsT0FBTztRQUNQLE9BQU8sRUFBRSxHQUFHLEVBQUUsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUM7UUFDMUMsUUFBUSxFQUFFLEtBQUssQ0FBQyxLQUFLLENBQUMsS0FBSyxLQUFLLEtBQUs7S0FDdEMsQ0FBQyxDQUNILENBQ0csQ0FDUCxDQUFDO0FBQ0osQ0FBQyxDQUFDO0FBRUYsOEJBQThCO0FBRTlCLE1BQU0sa0JBQWtCLEdBQUcsQ0FBQyxPQUFnQixFQUFFLEVBQUUsQ0FDOUMsRUFBRSxDQUNBLG9CQUFvQixFQUNwQjtJQUNFLGlCQUFpQixFQUFFLE9BQU8sS0FBSyxRQUFRO0lBQ3ZDLGlCQUFpQixFQUFFLE9BQU8sS0FBSyxRQUFRO0NBQ3hDLEVBQ0Q7SUFDRSxrQkFBa0IsRUFBRSxPQUFPLEtBQUssUUFBUTtJQUN4QyxtQkFBbUIsRUFBRSxPQUFPLEtBQUssUUFBUTtDQUMxQyxDQUNGLENBQUM7QUFFSixNQUFNLHFCQUFxQixHQUFHLENBQUMsT0FBZ0IsRUFBRSxFQUFFLENBQ2pELEVBQUUsQ0FBQyw0QkFBNEIsRUFBRTtJQUMvQix5REFBeUQsRUFBRSxPQUFPLEtBQUssVUFBVTtJQUNqRixxQkFBcUIsRUFBRSxPQUFPLEtBQUssUUFBUTtJQUMzQyxXQUFXLEVBQUUsT0FBTyxLQUFLLFFBQVE7Q0FDbEMsQ0FBQyxDQUFDO0FBRUwsTUFBTSxtQkFBbUIsR0FBRyxDQUFDLEtBQWMsRUFBRSxRQUFpQixFQUFFLEVBQUUsQ0FDaEUsRUFBRSxDQUNBLDJDQUEyQyxFQUMzQyx3RUFBd0UsRUFDeEUsbURBQW1ELEVBQ25EO0lBQ0UsV0FBVyxFQUFFLENBQUMsS0FBSztJQUNuQixXQUFXLEVBQUUsS0FBSztJQUNsQix5QkFBeUIsRUFBRSxDQUFDLEtBQUs7SUFDakMseUJBQXlCLEVBQUUsS0FBSztJQUNoQyxjQUFjLEVBQUUsQ0FBQyxRQUFRO0NBQzFCLENBQ0YsQ0FBQyJ9

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { IconifyIcon } from '@iconify/react';
+import { LabelControlProps } from '../../../src/utils/form/Label/Label';
+export declare type OptionType = Record<string, any>;
+export declare type OptionGroup<T extends OptionType | string> = {
+    label: string;
+    options: T[];
+};
+declare type OptionRendererItemProps = Record<string, unknown> & {
+    disabled: boolean;
+    highlighted: boolean;
+    value: string;
+};
+declare type OptionRendererStateProps<T extends OptionType | string> = {
+    selectedItem: T | null;
+    closeMenu: () => void;
+    selectOption: (opt: T) => void;
+};
+export declare type OptionRenderer<T extends OptionType | string> = (opt: T, props: OptionRendererItemProps, stateProps: OptionRendererStateProps<T>, componentProps: SelectBaseProps<T>) => React.ReactNode;
+declare type Action = {
+    label: React.ReactNode;
+    icon?: IconifyIcon;
+    disabled?: boolean;
+    onClick: () => void;
+};
+export declare type SelectBaseProps<T extends OptionType | string> = {
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    valid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    maxHeight?: string;
+    options: T[] | Array<OptionGroup<T>>;
+    optionToString?: (opt: T) => string;
+    isOptionDisabled?: (opt: T, index: number) => boolean;
+    getValue?: (opt: T) => string;
+    getOptionKey?: (opt: T) => string;
+    defaultValue?: T | string | null;
+    value?: T | string | null;
+    onChange?: (value?: T | null) => void;
+    emptyState?: React.ReactNode;
+    actions?: Action[];
+    UNSAFE_renderOption?: OptionRenderer<T>;
+};
+export declare const SelectBase: {
+    <T extends string | OptionType>(props: React.PropsWithChildren<SelectBaseProps<T>>): React.ReactElement<SelectBaseProps<T>, string | React.JSXElementConstructor<any>>;
+    Skeleton: React.FC<{}>;
+};
+export declare type SelectProps<T extends OptionType | string> = SelectBaseProps<T> & Omit<LabelControlProps, 'length' | 'maxLength'>;
+export declare const Select: {
+    <T extends string | OptionType>({ options, ...props }: SelectProps<T>): React.ReactElement<SelectProps<T>, string | React.JSXElementConstructor<any>>;
+    Skeleton: React.FC<{}>;
+};
+export {};

package/dist/src/components/Select/Select.js

@@ -0,0 +1,143 @@
+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, useState } from 'react';
+import isNil from 'lodash/isNil';
+import isArray from 'lodash/isArray';
+import defaults from 'lodash/defaults';
+import uniqueId from 'lodash/uniqueId';
+import omit from 'lodash/omit';
+import { useSelect } from 'downshift';
+import { useOverlayPosition } from '@react-aria/overlays';
+import { tw } from '../../../src/utils/tailwind';
+import { getLabelControlProps, Label, LabelControl } from '../../../src/utils/form/Label/Label';
+import { FormControl } from '../../../src/utils/form/FormControl/FormControl';
+import { HelperText } from '../../../src/utils/form/HelperText/HelperText';
+import { InlineIcon } from '../../../src/components/Icon/Icon';
+import { Skeleton } from '../../../src/components/Skeleton/Skeleton';
+import { Select as Base, getOptionLabelBuiltin, isOptionDisabledBuiltin } from '../../../src/common/Select/Select';
+import { PopoverWrapper } from '../../../src/components/Popover/PopoverWrapper';
+const hasIconProperty = (val) => {
+    var _a;
+    return typeof val === 'string' || ((_a = val === null || val === void 0 ? void 0 : val.icon) === null || _a === void 0 ? void 0 : _a.body) !== undefined;
+};
+const hasOptionGroups = (val) => {
+    return !val.some((opt) => (opt === null || opt === void 0 ? void 0 : opt.label) === undefined || !isArray(opt === null || opt === void 0 ? void 0 : opt.options));
+};
+const defaultRenderOption = (item, props, { selectedItem }, { getOptionKey, getValue, optionToString = getOptionLabelBuiltin }) => {
+    var _a, _b;
+    return (React.createElement(Base.Item, Object.assign({ key: (_b = (_a = getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(item)) !== null && _a !== void 0 ? _a : getValue === null || getValue === void 0 ? void 0 : getValue(item)) !== null && _b !== void 0 ? _b : optionToString(item), selected: item === selectedItem }, props),
+        hasIconProperty(item) && React.createElement(InlineIcon, { icon: item.icon }),
+        optionToString(item)));
+};
+const defaultGetValue = (opt) => {
+    if (typeof opt === 'string') {
+        return opt;
+    }
+    if (typeof opt.value === 'string') {
+        return opt.value;
+    }
+    return '';
+};
+const _SelectBase = (props) => {
+    var _a;
+    const withDefaults = defaults({}, props, {
+        disabled: false,
+        valid: true,
+        readOnly: false,
+        required: false,
+        optionToString: getOptionLabelBuiltin,
+        getValue: defaultGetValue,
+        UNSAFE_renderOption: defaultRenderOption,
+        isOptionDisabled: isOptionDisabledBuiltin,
+        actions: [],
+    });
+    const { id, name, placeholder, disabled, readOnly, maxHeight, options, optionToString: itemToString, getValue, getOptionKey, UNSAFE_renderOption, isOptionDisabled, defaultValue, value, onChange, valid, emptyState, actions, required, children, labelWrapper } = withDefaults, rest = __rest(withDefaults, ["id", "name", "placeholder", "disabled", "readOnly", "maxHeight", "options", "optionToString", "getValue", "getOptionKey", "UNSAFE_renderOption", "isOptionDisabled", "defaultValue", "value", "onChange", "valid", "emptyState", "actions", "required", "children", "labelWrapper"]);
+    const [hasFocus, setFocus] = useState(false);
+    const targetRef = useRef(null);
+    const overlayRef = useRef(null);
+    const items = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
+    const findItemByValue = (val) => {
+        if (val === null) {
+            return null;
+        }
+        return val === undefined ? undefined : items.find((opt) => getValue(opt) === getValue(val));
+    };
+    const { isOpen, closeMenu, selectItem, selectedItem, highlightedIndex, getToggleButtonProps, getMenuProps, getItemProps, setHighlightedIndex, } = useSelect({
+        selectedItem: findItemByValue(value),
+        defaultSelectedItem: findItemByValue(defaultValue),
+        items,
+        itemToString,
+        onSelectedItemChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.selectedItem),
+    });
+    const { overlayProps } = useOverlayPosition({
+        targetRef,
+        overlayRef,
+        placement: 'bottom start',
+        shouldFlip: true,
+        isOpen,
+    });
+    const renderItem = (item, index) => UNSAFE_renderOption(item, Object.assign({ highlighted: index === highlightedIndex }, getItemProps({ item, index, disabled: isOptionDisabled(item, index) })), {
+        selectedItem,
+        closeMenu,
+        selectOption: selectItem,
+    }, withDefaults);
+    const renderGroup = (group) => (React.createElement(React.Fragment, { key: group.label },
+        React.createElement(Base.Group, null, group.label),
+        group.options.map((opt) => renderItem(opt, items.indexOf(opt)))));
+    const input = (React.createElement(Base.InputContainer, Object.assign({}, getToggleButtonProps({ disabled: disabled || readOnly, ref: targetRef }), { variant: disabled ? 'disabled' : !valid ? 'error' : readOnly ? 'readOnly' : hasFocus ? 'focused' : 'default', tabIndex: 0 }),
+        React.createElement(Base.Input, Object.assign({ id: id, name: name }, rest, { className: !disabled && !readOnly ? 'cursor-pointer' : undefined, disabled: disabled, readOnly: true, placeholder: readOnly ? undefined : placeholder, value: !isNil(selectedItem) ? itemToString(selectedItem) : '', tabIndex: -1, onFocus: () => setFocus(true), onBlur: () => setFocus(false) })),
+        !readOnly && React.createElement(Base.Toggle, { disabled: disabled, isOpen: isOpen, tabIndex: -1 })));
+    const width = (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    const style = isOpen ? Object.assign(Object.assign({}, overlayProps.style), { width }) : { display: 'none' };
+    return (React.createElement("div", { className: tw('relative') },
+        labelWrapper ? React.cloneElement(labelWrapper, { children: input }) : input,
+        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(Base.Menu, { maxHeight: maxHeight },
+                isOpen && options.length === 0 && React.createElement(Base.EmptyStateContainer, null, emptyState),
+                isOpen && options.length > 0 && !hasOptionGroups(options) && options.map(renderItem),
+                isOpen && options.length > 0 && hasOptionGroups(options) && options.map(renderGroup),
+                isOpen && actions.length > 0 && (React.createElement(React.Fragment, null,
+                    React.createElement(Base.Divider, { onMouseOver: () => setHighlightedIndex(-1) }),
+                    actions.map((act, index) => (React.createElement(Base.ActionItem, Object.assign({ key: `${index}` }, act, { onMouseOver: () => setHighlightedIndex(-1), onClick: () => {
+                            act.onClick();
+                            closeMenu();
+                        } }), act.label)))))))));
+};
+export const SelectBase = (props) => React.createElement(_SelectBase, Object.assign({}, props, { labelWrapper: undefined }));
+const SelectBaseSkeleton = () => React.createElement(Skeleton, { height: 38 });
+SelectBase.Skeleton = SelectBaseSkeleton;
+export const Select = (_a) => {
+    var _b;
+    var { options } = _a, props = __rest(_a, ["options"]);
+    // 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 : `select-${uniqueId()}`);
+    const errorMessageId = uniqueId();
+    const errorProps = props.valid === false ? { 'aria-invalid': true, 'aria-describedby': errorMessageId } : {};
+    const labelProps = getLabelControlProps(props);
+    const baseProps = omit(props, Object.keys(labelProps));
+    const legacyError = labelProps.error !== undefined && labelProps.valid === false;
+    const variant = !labelProps.valid || legacyError ? 'error' : labelProps.disabled ? 'disabled' : 'default';
+    const label = (React.createElement(Label, Object.assign({ id: `${id.current}-label`, htmlFor: `${id.current}-input`, variant: variant, messageId: errorMessageId }, labelProps)));
+    // We have to do things here a bit differently, since semantically
+    // we can't wrap the whole <Select> component inside a HTML <label>.
+    return (React.createElement(FormControl, null,
+        React.createElement(_SelectBase, Object.assign({}, baseProps, errorProps, { id: `${id.current}-input`, options: options, disabled: props.disabled, valid: props.valid, labelWrapper: label })),
+        React.createElement(HelperText, { messageId: errorMessageId, error: !labelProps.valid, helperText: labelProps.helperText, length: labelProps.length, maxLength: labelProps.maxLength, reserveSpaceForError: labelProps.reserveSpaceForError })));
+};
+const SelectSkeleton = () => (React.createElement(LabelControl.Skeleton, null,
+    React.createElement(SelectBase.Skeleton, null)));
+Select.Skeleton = SelectSkeleton;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUM7QUFDaEQsT0FBTyxLQUFLLE1BQU0sY0FBYyxDQUFDO0FBQ2pDLE9BQU8sT0FBTyxNQUFNLGdCQUFnQixDQUFDO0FBQ3JDLE9BQU8sUUFBUSxNQUFNLGlCQUFpQixDQUFDO0FBQ3ZDLE9BQU8sUUFBUSxNQUFNLGlCQUFpQixDQUFDO0FBQ3ZDLE9BQU8sSUFBSSxNQUFNLGFBQWEsQ0FBQztBQUMvQixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBRXRDLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQzFELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUN4QyxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBcUIsTUFBTSw0QkFBNEIsQ0FBQztBQUMxRyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDckUsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQ2xFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN0RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDNUQsT0FBTyxFQUFFLE1BQU0sSUFBSSxJQUFJLEVBQUUscUJBQXFCLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMxRyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFtQ3ZFLE1BQU0sZUFBZSxHQUFHLENBQUMsR0FBWSxFQUF5QyxFQUFFOztJQUM5RSxPQUFPLE9BQU8sR0FBRyxLQUFLLFFBQVEsSUFBSSxDQUFBLE1BQUMsR0FBVyxhQUFYLEdBQUcsdUJBQUgsR0FBRyxDQUFVLElBQUksMENBQUUsSUFBSSxNQUFLLFNBQVMsQ0FBQztBQUMzRSxDQUFDLENBQUM7QUFFRixNQUFNLGVBQWUsR0FBRyxDQUN0QixHQUFnQyxFQUNGLEVBQUU7SUFDaEMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQyxHQUF1QixFQUFFLEVBQUUsQ0FBQyxDQUFDLEdBQVcsYUFBWCxHQUFHLHVCQUFILEdBQUcsQ0FBVSxLQUFLLE1BQUssU0FBUyxJQUFJLENBQUMsT0FBTyxDQUFFLEdBQVcsYUFBWCxHQUFHLHVCQUFILEdBQUcsQ0FBVSxPQUFPLENBQUMsQ0FBQyxDQUFDO0FBQ3RILENBQUMsQ0FBQztBQXVCRixNQUFNLG1CQUFtQixHQUFHLENBQzFCLElBQU8sRUFDUCxLQUE4QixFQUM5QixFQUFFLFlBQVksRUFBK0IsRUFDN0MsRUFBRSxZQUFZLEVBQUUsUUFBUSxFQUFFLGNBQWMsR0FBRyxxQkFBcUIsRUFBc0IsRUFDdEYsRUFBRTs7SUFBQyxPQUFBLENBQ0gsb0JBQUMsSUFBSSxDQUFDLElBQUksa0JBQ1IsR0FBRyxFQUFFLE1BQUEsTUFBQSxZQUFZLGFBQVosWUFBWSx1QkFBWixZQUFZLENBQUcsSUFBSSxDQUFDLG1DQUFJLFFBQVEsYUFBUixRQUFRLHVCQUFSLFFBQVEsQ0FBRyxJQUFJLENBQUMsbUNBQUksY0FBYyxDQUFDLElBQUksQ0FBQyxFQUNyRSxRQUFRLEVBQUUsSUFBSSxLQUFLLFlBQVksSUFDM0IsS0FBSztRQUVSLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxvQkFBQyxVQUFVLElBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxJQUFJLEdBQUk7UUFDeEQsY0FBYyxDQUFDLElBQUksQ0FBQyxDQUNYLENBQ2IsQ0FBQTtDQUFBLENBQUM7QUFFRixNQUFNLGVBQWUsR0FBRyxDQUFnQyxHQUFNLEVBQVUsRUFBRTtJQUN4RSxJQUFJLE9BQU8sR0FBRyxLQUFLLFFBQVEsRUFBRTtRQUMzQixPQUFPLEdBQUcsQ0FBQztLQUNaO0lBRUQsSUFBSSxPQUFRLEdBQVcsQ0FBQyxLQUFLLEtBQUssUUFBUSxFQUFFO1FBQzFDLE9BQU8sR0FBRyxDQUFDLEtBQWUsQ0FBQztLQUM1QjtJQUVELE9BQU8sRUFBRSxDQUFDO0FBQ1osQ0FBQyxDQUFDO0FBRUYsTUFBTSxXQUFXLEdBQUcsQ0FDbEIsS0FBcUcsRUFDN0QsRUFBRTs7SUFDMUMsTUFBTSxZQUFZLEdBQUcsUUFBUSxDQUFDLEVBQUUsRUFBRSxLQUFLLEVBQUU7UUFDdkMsUUFBUSxFQUFFLEtBQUs7UUFDZixLQUFLLEVBQUUsSUFBSTtRQUNYLFFBQVEsRUFBRSxLQUFLO1FBQ2YsUUFBUSxFQUFFLEtBQUs7UUFDZixjQUFjLEVBQUUscUJBQXFCO1FBQ3JDLFFBQVEsRUFBRSxlQUFlO1FBQ3pCLG1CQUFtQixFQUFFLG1CQUFtQjtRQUN4QyxnQkFBZ0IsRUFBRSx1QkFBdUI7UUFDekMsT0FBTyxFQUFFLEVBQWM7S0FDeEIsQ0FBQyxDQUFDO0lBRUgsTUFBTSxFQUNKLEVBQUUsRUFDRixJQUFJLEVBQ0osV0FBVyxFQUNYLFFBQVEsRUFDUixRQUFRLEVBQ1IsU0FBUyxFQUNULE9BQU8sRUFDUCxjQUFjLEVBQUUsWUFBWSxFQUM1QixRQUFRLEVBQ1IsWUFBWSxFQUNaLG1CQUFtQixFQUNuQixnQkFBZ0IsRUFDaEIsWUFBWSxFQUNaLEtBQUssRUFDTCxRQUFRLEVBQ1IsS0FBSyxFQUNMLFVBQVUsRUFDVixPQUFPLEVBQ1AsUUFBUSxFQUNSLFFBQVEsRUFDUixZQUFZLEtBRVYsWUFBWSxFQURYLElBQUksVUFDTCxZQUFZLEVBdkJWLHFSQXVCTCxDQUFlLENBQUM7SUFFakIsTUFBTSxDQUFDLFFBQVEsRUFBRSxRQUFRLENBQUMsR0FBRyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDN0MsTUFBTSxTQUFTLEdBQUcsTUFBTSxDQUFvQixJQUFJLENBQUMsQ0FBQztJQUNsRCxNQUFNLFVBQVUsR0FBRyxNQUFNLENBQWlCLElBQUksQ0FBQyxDQUFDO0lBQ2hELE1BQU0sS0FBSyxHQUFHLGVBQWUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUM7SUFFckYsTUFBTSxlQUFlLEdBQUcsQ0FBQyxHQUF1QixFQUFFLEVBQUU7UUFDbEQsSUFBSSxHQUFHLEtBQUssSUFBSSxFQUFFO1lBQ2hCLE9BQU8sSUFBSSxDQUFDO1NBQ2I7UUFFRCxPQUFPLEdBQUcsS0FBSyxTQUFTLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxLQUFLLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO0lBQzlGLENBQUMsQ0FBQztJQUVGLE1BQU0sRUFDSixNQUFNLEVBQ04sU0FBUyxFQUNULFVBQVUsRUFDVixZQUFZLEVBQ1osZ0JBQWdCLEVBQ2hCLG9CQUFvQixFQUNwQixZQUFZLEVBQ1osWUFBWSxFQUNaLG1CQUFtQixHQUNwQixHQUFHLFNBQVMsQ0FBQztRQUNaLFlBQVksRUFBRSxlQUFlLENBQUMsS0FBSyxDQUFDO1FBQ3BDLG1CQUFtQixFQUFFLGVBQWUsQ0FBQyxZQUFZLENBQUM7UUFDbEQsS0FBSztRQUNMLFlBQVk7UUFDWixvQkFBb0IsRUFBRSxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsUUFBUSxhQUFSLFFBQVEsdUJBQVIsUUFBUSxDQUFHLENBQUMsQ0FBQyxZQUFZLENBQUM7S0FDeEQsQ0FBQyxDQUFDO0lBRUgsTUFBTSxFQUFFLFlBQVksRUFBRSxHQUFHLGtCQUFrQixDQUFDO1FBQzFDLFNBQVM7UUFDVCxVQUFVO1FBQ1YsU0FBUyxFQUFFLGNBQWM7UUFDekIsVUFBVSxFQUFFLElBQUk7UUFDaEIsTUFBTTtLQUNQLENBQUMsQ0FBQztJQUVILE1BQU0sVUFBVSxHQUFHLENBQUMsSUFBTyxFQUFFLEtBQWEsRUFBRSxFQUFFLENBQzVDLG1CQUFtQixDQUNqQixJQUFJLGtCQUVGLFdBQVcsRUFBRSxLQUFLLEtBQUssZ0JBQWdCLElBQ3BDLFlBQVksQ0FBQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLGdCQUFnQixDQUFDLElBQUksRUFBRSxLQUFLLENBQUMsRUFBRSxDQUFDLEdBRTNFO1FBQ0UsWUFBWTtRQUNaLFNBQVM7UUFDVCxZQUFZLEVBQUUsVUFBVTtLQUN6QixFQUNELFlBQVksQ0FDYixDQUFDO0lBRUosTUFBTSxXQUFXLEdBQUcsQ0FBQyxLQUFxQixFQUFFLEVBQUUsQ0FBQyxDQUM3QyxvQkFBQyxLQUFLLENBQUMsUUFBUSxJQUFDLEdBQUcsRUFBRSxLQUFLLENBQUMsS0FBSztRQUM5QixvQkFBQyxJQUFJLENBQUMsS0FBSyxRQUFFLEtBQUssQ0FBQyxLQUFLLENBQWM7UUFDckMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLFVBQVUsQ0FBQyxHQUFHLEVBQUUsS0FBSyxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQ2pELENBQ2xCLENBQUM7SUFFRixNQUFNLEtBQUssR0FBRyxDQUNaLG9CQUFDLElBQUksQ0FBQyxjQUFjLG9CQUNkLG9CQUFvQixDQUFDLEVBQUUsUUFBUSxFQUFFLFFBQVEsSUFBSSxRQUFRLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxDQUFDLElBQzVFLE9BQU8sRUFBRSxRQUFRLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxTQUFTLEVBQzVHLFFBQVEsRUFBRSxDQUFDO1FBRVgsb0JBQUMsSUFBSSxDQUFDLEtBQUssa0JBQ1QsRUFBRSxFQUFFLEVBQUUsRUFDTixJQUFJLEVBQUUsSUFBSSxJQUNOLElBQUksSUFDUixTQUFTLEVBQUUsQ0FBQyxRQUFRLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLENBQUMsQ0FBQyxTQUFTLEVBQ2hFLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLFFBQVEsRUFBRSxJQUFJLEVBQ2QsV0FBVyxFQUFFLFFBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxXQUFXLEVBQy9DLEtBQUssRUFBRSxDQUFDLEtBQUssQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLENBQUMsWUFBWSxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQzdELFFBQVEsRUFBRSxDQUFDLENBQUMsRUFDWixPQUFPLEVBQUUsR0FBRyxFQUFFLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUM3QixNQUFNLEVBQUUsR0FBRyxFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxJQUM3QjtRQUNELENBQUMsUUFBUSxJQUFJLG9CQUFDLElBQUksQ0FBQyxNQUFNLElBQUMsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUMsR0FBSSxDQUMzRCxDQUN2QixDQUFDO0lBRUYsTUFBTSxLQUFLLEdBQUcsTUFBQSxTQUFTLENBQUMsT0FBTywwQ0FBRSxXQUFXLENBQUM7SUFDN0MsTUFBTSxLQUFLLEdBQUcsTUFBTSxDQUFDLENBQUMsaUNBQU0sWUFBWSxDQUFDLEtBQUssS0FBRSxLQUFLLElBQUcsQ0FBQyxDQUFDLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBRSxDQUFDO0lBRTlFLE9BQU8sQ0FDTCw2QkFBSyxTQUFTLEVBQUUsRUFBRSxDQUFDLFVBQVUsQ0FBQztRQUMzQixZQUFZLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxZQUFZLENBQUMsWUFBWSxFQUFFLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUs7UUFDN0Usb0JBQUMsY0FBYztRQUNiLDREQUE0RDs7WUFBNUQsNERBQTREO1lBQzVELE1BQU0sRUFBRSxJQUFJLEVBQ1osYUFBYSxFQUFFLElBQUksRUFDbkIsU0FBUyxFQUFFLElBQUksSUFDWCxZQUFZLENBQUMsRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLENBQUMsSUFDckMsS0FBSyxFQUFFLEtBQUssRUFDWixPQUFPLEVBQUUsU0FBUztZQUVsQixvQkFBQyxJQUFJLENBQUMsSUFBSSxJQUFDLFNBQVMsRUFBRSxTQUFTO2dCQUM1QixNQUFNLElBQUksT0FBTyxDQUFDLE1BQU0sS0FBSyxDQUFDLElBQUksb0JBQUMsSUFBSSxDQUFDLG1CQUFtQixRQUFFLFVBQVUsQ0FBNEI7Z0JBQ25HLE1BQU0sSUFBSSxPQUFPLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxPQUFPLENBQUMsSUFBSSxPQUFPLENBQUMsR0FBRyxDQUFDLFVBQVUsQ0FBQztnQkFDcEYsTUFBTSxJQUFJLE9BQU8sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLGVBQWUsQ0FBQyxPQUFPLENBQUMsSUFBSSxPQUFPLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQztnQkFDcEYsTUFBTSxJQUFJLE9BQU8sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQy9CO29CQUNFLG9CQUFDLElBQUksQ0FBQyxPQUFPLElBQUMsV0FBVyxFQUFFLEdBQUcsRUFBRSxDQUFDLG1CQUFtQixDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUk7b0JBQzNELE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUMzQixvQkFBQyxJQUFJLENBQUMsVUFBVSxrQkFDZCxHQUFHLEVBQUUsR0FBRyxLQUFLLEVBQUUsSUFDWCxHQUFHLElBQ1AsV0FBVyxFQUFFLEdBQUcsRUFBRSxDQUFDLG1CQUFtQixDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQzFDLE9BQU8sRUFBRSxHQUFHLEVBQUU7NEJBQ1osR0FBRyxDQUFDLE9BQU8sRUFBRSxDQUFDOzRCQUNkLFNBQVMsRUFBRSxDQUFDO3dCQUNkLENBQUMsS0FFQSxHQUFHLENBQUMsS0FBSyxDQUNNLENBQ25CLENBQUMsQ0FDRCxDQUNKLENBQ1MsQ0FDRyxDQUNiLENBQ1AsQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRyxDQUN4QixLQUFrRCxFQUNWLEVBQUUsQ0FBQyxvQkFBQyxXQUFXLG9CQUFLLEtBQUssSUFBRSxZQUFZLEVBQUUsU0FBUyxJQUFJLENBQUM7QUFFakcsTUFBTSxrQkFBa0IsR0FBYSxHQUFHLEVBQUUsQ0FBQyxvQkFBQyxRQUFRLElBQUMsTUFBTSxFQUFFLEVBQUUsR0FBSSxDQUFDO0FBRXBFLFVBQVUsQ0FBQyxRQUFRLEdBQUcsa0JBQWtCLENBQUM7QUFLekMsTUFBTSxDQUFDLE1BQU0sTUFBTSxHQUFHLENBQWdDLEVBR3JDLEVBQXNDLEVBQUU7O1FBSEgsRUFDcEQsT0FBTyxPQUVRLEVBRFosS0FBSyxjQUY0QyxXQUdyRCxDQURTO0lBRVIsc0dBQXNHO0lBQ3RHLE1BQU0sRUFBRSxHQUFHLE1BQU0sQ0FBUyxNQUFBLEtBQUssQ0FBQyxFQUFFLG1DQUFJLFVBQVUsUUFBUSxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQzlELE1BQU0sY0FBYyxHQUFHLFFBQVEsRUFBRSxDQUFDO0lBQ2xDLE1BQU0sVUFBVSxHQUFHLEtBQUssQ0FBQyxLQUFLLEtBQUssS0FBSyxDQUFDLENBQUMsQ0FBQyxFQUFFLGNBQWMsRUFBRSxJQUFJLEVBQUUsa0JBQWtCLEVBQUUsY0FBYyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUM3RyxNQUFNLFVBQVUsR0FBRyxvQkFBb0IsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMvQyxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQztJQUN2RCxNQUFNLFdBQVcsR0FBRyxVQUFVLENBQUMsS0FBSyxLQUFLLFNBQVMsSUFBSSxVQUFVLENBQUMsS0FBSyxLQUFLLEtBQUssQ0FBQztJQUNqRixNQUFNLE9BQU8sR0FBRyxDQUFDLFVBQVUsQ0FBQyxLQUFLLElBQUksV0FBVyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDO0lBRTFHLE1BQU0sS0FBSyxHQUFHLENBQ1osb0JBQUMsS0FBSyxrQkFDSixFQUFFLEVBQUUsR0FBRyxFQUFFLENBQUMsT0FBTyxRQUFRLEVBQ3pCLE9BQU8sRUFBRSxHQUFHLEVBQUUsQ0FBQyxPQUFPLFFBQVEsRUFDOUIsT0FBTyxFQUFFLE9BQU8sRUFDaEIsU0FBUyxFQUFFLGNBQWMsSUFDckIsVUFBVSxFQUNkLENBQ0gsQ0FBQztJQUVGLGtFQUFrRTtJQUNsRSxvRUFBb0U7SUFDcEUsT0FBTyxDQUNMLG9CQUFDLFdBQVc7UUFDVixvQkFBQyxXQUFXLG9CQUNOLFNBQVMsRUFDVCxVQUFVLElBQ2QsRUFBRSxFQUFFLEdBQUcsRUFBRSxDQUFDLE9BQU8sUUFBUSxFQUN6QixPQUFPLEVBQUUsT0FBTyxFQUNoQixRQUFRLEVBQUUsS0FBSyxDQUFDLFFBQVEsRUFDeEIsS0FBSyxFQUFFLEtBQUssQ0FBQyxLQUFLLEVBQ2xCLFlBQVksRUFBRSxLQUFLLElBQ25CO1FBQ0Ysb0JBQUMsVUFBVSxJQUNULFNBQVMsRUFBRSxjQUFjLEVBQ3pCLEtBQUssRUFBRSxDQUFDLFVBQVUsQ0FBQyxLQUFLLEVBQ3hCLFVBQVUsRUFBRSxVQUFVLENBQUMsVUFBVSxFQUNqQyxNQUFNLEVBQUUsVUFBVSxDQUFDLE1BQU0sRUFDekIsU0FBUyxFQUFFLFVBQVUsQ0FBQyxTQUFTLEVBQy9CLG9CQUFvQixFQUFFLFVBQVUsQ0FBQyxvQkFBb0IsR0FDckQsQ0FDVSxDQUNmLENBQUM7QUFDSixDQUFDLENBQUM7QUFFRixNQUFNLGNBQWMsR0FBYSxHQUFHLEVBQUUsQ0FBQyxDQUNyQyxvQkFBQyxZQUFZLENBQUMsUUFBUTtJQUNwQixvQkFBQyxVQUFVLENBQUMsUUFBUSxPQUFHLENBQ0QsQ0FDekIsQ0FBQztBQUVGLE1BQU0sQ0FBQyxRQUFRLEdBQUcsY0FBYyxDQUFDIn0=

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

@@ -0,0 +1,25 @@
+import React from 'react';
+declare type SkeletonProps = {
+    /**
+     * Width of the skeleton in pixels.
+     */
+    width?: number;
+    /**
+     * Height of the skeleton in pixels.
+     */
+    height?: number;
+    /**
+     * Display style for skeleton.
+     */
+    display?: 'block' | 'inline-block';
+    /**
+     * Additional class name for skeleton.
+     */
+    className?: string;
+    /**
+     * If false, there won't be any animation for the skeleton component.
+     */
+    animate?: boolean;
+};
+export declare const Skeleton: React.FC<SkeletonProps>;
+export {};

package/dist/src/components/Skeleton/Skeleton.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import isNumber from 'lodash/isNumber';
+import { tw, classNames } from '../../utils/tailwind';
+export const Skeleton = ({ width, height, display = 'block', className, animate = true }) => {
+    const styles = {
+        width: isNumber(width) ? `${width}px` : undefined,
+        height: isNumber(height) ? `${height}px` : undefined,
+    };
+    return (React.createElement("div", { style: styles, className: classNames(tw('bg-grey-5', {
+            'block': display === 'block',
+            'inline-block': display === 'inline-block',
+            'animate-pulse': animate,
+        }), className) }));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2tlbGV0b24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Ta2VsZXRvbi9Ta2VsZXRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sUUFBUSxNQUFNLGlCQUFpQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxFQUFFLEVBQUUsVUFBVSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUE2QnRELE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBNEIsQ0FBQyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsT0FBTyxHQUFHLE9BQU8sRUFBRSxTQUFTLEVBQUUsT0FBTyxHQUFHLElBQUksRUFBRSxFQUFFLEVBQUU7SUFDbkgsTUFBTSxNQUFNLEdBQUc7UUFDYixLQUFLLEVBQUUsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxTQUFTO1FBQ2pELE1BQU0sRUFBRSxRQUFRLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsTUFBTSxJQUFJLENBQUMsQ0FBQyxDQUFDLFNBQVM7S0FDckQsQ0FBQztJQUVGLE9BQU8sQ0FDTCw2QkFDRSxLQUFLLEVBQUUsTUFBTSxFQUNiLFNBQVMsRUFBRSxVQUFVLENBQ25CLEVBQUUsQ0FBQyxXQUFXLEVBQUU7WUFDZCxPQUFPLEVBQUUsT0FBTyxLQUFLLE9BQU87WUFDNUIsY0FBYyxFQUFFLE9BQU8sS0FBSyxjQUFjO1lBQzFDLGVBQWUsRUFBRSxPQUFPO1NBQ3pCLENBQUMsRUFDRixTQUFTLENBQ1YsR0FDRCxDQUNILENBQUM7QUFDSixDQUFDLENBQUMifQ==

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare type SwitchProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'id' | 'name' | 'value' | 'type' | 'ref'> & {
+    id?: string;
+    name?: string;
+    value?: string;
+    caption?: React.ReactNode;
+};
+declare type SwitchComponent = React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>> & {
+    Skeleton: React.FC;
+};
+export declare const Switch: SwitchComponent;
+export {};