@cube-dev/ui-kit 0.8.8 → 0.9.2

package/dist/cjs/components/forms/Form/useForm.js

@@ -0,0 +1,280 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useForm = exports.CubeFormInstance = void 0;
+const react_1 = require("react");
+const dotize_1 = require("../../../utils/dotize");
+const validation_1 = require("./validation");
+function setValue(obj, path, value) {
+    let a = path.split('.');
+    let o = obj;
+    while (a.length - 1) {
+        let n = a.shift();
+        if (!(n in o))
+            o[n] = {};
+        o = o[n];
+    }
+    o[a[0]] = value;
+}
+function isEqual(v1, v2) {
+    return JSON.stringify(v1) === JSON.stringify(v2);
+}
+class CubeFormInstance {
+    constructor(forceReRender) {
+        this.forceReRender = () => { };
+        this.initialFields = {};
+        this.fields = {};
+        this.ref = {};
+        this.isSubmitting = false;
+        this.onValuesChange = () => { };
+        this.onSubmit = () => { };
+        this.forceReRender = forceReRender || (() => { });
+        this.initialFields = {};
+        this.fields = {};
+        this.getFieldValue = this.getFieldValue.bind(this);
+        this.getFieldsValue = this.getFieldsValue.bind(this);
+        this.setFieldsValue = this.setFieldsValue.bind(this);
+        this.setFieldValue = this.setFieldValue.bind(this);
+        this.getFieldError = this.getFieldError.bind(this);
+        this.getFieldInstance = this.getFieldInstance.bind(this);
+        this.setInitialFieldsValue = this.setInitialFieldsValue.bind(this);
+        this.resetFields = this.resetFields.bind(this);
+        this.validateField = this.validateField.bind(this);
+        this.validateFields = this.validateFields.bind(this);
+        this.isFieldValid = this.isFieldValid.bind(this);
+        this.createField = this.createField.bind(this);
+        this.isFieldInvalid = this.isFieldInvalid.bind(this);
+        this.isFieldTouched = this.isFieldTouched.bind(this);
+        this.setFields = this.setFields.bind(this);
+    }
+    async submit() {
+        if (this.onSubmit) {
+            return this.onSubmit(this.getFormData());
+        }
+    }
+    setFieldsValue(newData, touched, skipRender, createFields = false) {
+        let flag = false;
+        Object.keys(newData).forEach((name) => {
+            let field = this.fields[name];
+            if (!field && createFields) {
+                this.createField(name, skipRender);
+                field = this.fields[name];
+            }
+            if (!field || isEqual(field.value, newData[name])) {
+                if (field && touched === false) {
+                    field.errors = [];
+                }
+                return;
+            }
+            flag = true;
+            field.value = newData[name];
+            if (touched === true) {
+                field.touched = touched;
+            }
+            else if (touched === false) {
+                field.touched = false;
+                field.errors = [];
+            }
+        });
+        if (flag && !skipRender) {
+            this.forceReRender();
+            if (touched) {
+                this.onValuesChange && this.onValuesChange(this.getFormData());
+            }
+        }
+    }
+    getFieldValue(name) {
+        return this.fields[name] && this.fields[name].value;
+    }
+    getFieldsValue() {
+        const data = {};
+        return Object.values(this.fields).reduce((map, field) => {
+            map[field.name] = field.value;
+            return map;
+        }, data);
+    }
+    /**
+     * Similar to getFieldsValue() but respects '.' notation and creates nested objects.
+     */
+    getFormData() {
+        const fieldsValue = this.getFieldsValue();
+        return Object.keys(fieldsValue).reduce((map, field) => {
+            setValue(map, field, fieldsValue[field]);
+            if (field.includes('.')) {
+                delete map[field];
+            }
+            return map;
+        }, {});
+    }
+    setFieldValue(name, value, touched = false, skipRender) {
+        const field = this.fields[name];
+        if (!field || isEqual(value, field.value))
+            return;
+        field.value = value;
+        if (touched) {
+            field.touched = touched;
+        }
+        if (!skipRender) {
+            this.forceReRender();
+        }
+        if (touched) {
+            this.onValuesChange && this.onValuesChange(this.getFormData());
+        }
+    }
+    getFieldInstance(name) {
+        return this.fields[name];
+    }
+    setInitialFieldsValue(values) {
+        this.initialFields = dotize_1.dotize.convert(values) || {};
+    }
+    resetFields(names, skipRender) {
+        const fieldsValue = this.getFieldsValue();
+        const fieldNames = Object.keys({ ...fieldsValue, ...this.initialFields });
+        const filteredFieldNames = names
+            ? fieldNames.filter((name) => names.includes(name))
+            : fieldNames;
+        const values = filteredFieldNames.reduce((map, name) => {
+            if (name in this.initialFields) {
+                map[name] = this.initialFields[name];
+            }
+            else {
+                map[name] = undefined;
+            }
+            return map;
+        }, {});
+        this.setFieldsValue(values, false, skipRender, true);
+    }
+    async validateField(name) {
+        const field = this.getFieldInstance(name);
+        if (!field || !field.rules)
+            return Promise.resolve();
+        return (0, validation_1.applyRules)(field.value, field.rules, this)
+            .then(() => {
+            if (!field.errors || field.errors.length) {
+                field.errors = [];
+                this.forceReRender();
+            }
+        })
+            .catch((err) => {
+            if (!field.errors || !isEqual(field.errors, [err])) {
+                field.errors = [err];
+                this.forceReRender();
+            }
+            return Promise.reject([err]);
+        });
+    }
+    validateFields(list) {
+        const fieldsList = list || Object.keys(this.fields);
+        const errorList = [];
+        return Promise.allSettled(fieldsList.map((name) => {
+            return this.validateField(name).catch((errors) => {
+                errorList.push({ name, errors });
+                return Promise.reject();
+            });
+        })).then(() => {
+            if (errorList.length) {
+                return Promise.reject(errorList);
+            }
+            return this.getFormData();
+        });
+    }
+    isFieldValid(name) {
+        const field = this.getFieldInstance(name);
+        if (!field)
+            return true;
+        return !field.errors.length;
+    }
+    isFieldInvalid(name) {
+        const field = this.getFieldInstance(name);
+        if (!field)
+            return false;
+        return !!field.errors.length;
+    }
+    isFieldTouched(name) {
+        const field = this.getFieldInstance(name);
+        if (!field)
+            return false;
+        return !!field.touched;
+    }
+    getFieldError(name) {
+        const field = this.getFieldInstance(name);
+        if (!field)
+            return [];
+        return field.errors || [];
+    }
+    createField(name, skipRender) {
+        if (!this.fields[name]) {
+            this.fields[name] = this._createField(name);
+        }
+        if (!skipRender) {
+            this.forceReRender();
+        }
+    }
+    removeField(name, skipRender) {
+        if (this.fields[name]) {
+            delete this.fields[name];
+        }
+        if (!skipRender) {
+            this.forceReRender();
+        }
+        this.validateFields().catch(() => { });
+    }
+    setFields(newFields) {
+        newFields.forEach(({ name, value, errors }) => {
+            this.fields[name] = this._createField(name, {
+                value,
+                errors,
+            });
+        });
+        this.forceReRender();
+    }
+    setSubmitting(isSubmitting) {
+        this.isSubmitting = isSubmitting;
+        this.forceReRender();
+    }
+    _createField(name, data) {
+        return {
+            name,
+            value: undefined,
+            validating: false,
+            touched: false,
+            errors: [],
+            ...data,
+        };
+    }
+}
+exports.CubeFormInstance = CubeFormInstance;
+function useForm(form, ref, options = {}) {
+    const { onSubmit, onValuesChange } = options;
+    const formRef = (0, react_1.useRef)();
+    const [, forceUpdate] = (0, react_1.useState)({});
+    if (!formRef.current) {
+        if (form) {
+            formRef.current = form;
+        }
+        else {
+            // Create a new FormInstance if not provided
+            const forceReRender = () => {
+                forceUpdate({});
+            };
+            form = formRef.current = new CubeFormInstance(forceReRender);
+        }
+        form.ref = ref;
+        if (onSubmit) {
+            form.onSubmit = onSubmit;
+        }
+        if (onValuesChange) {
+            form.onValuesChange = onValuesChange;
+        }
+    }
+    return [formRef.current];
+}
+exports.useForm = useForm;
+
+        

package/dist/cjs/components/forms/Form/validation.js

@@ -0,0 +1,149 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyRules = exports.applyRule = void 0;
+const valid_url_1 = __importDefault(require("valid-url"));
+const email_validator_1 = require("email-validator");
+const TYPE_CHECKERS = {
+    string(v) {
+        return typeof v === 'string';
+    },
+    number(v) {
+        return typeof v === 'number';
+    },
+    boolean(v) {
+        return typeof v === 'boolean';
+    },
+    method(v) {
+        return typeof v === 'function';
+    },
+    regexp(v) {
+        return v instanceof RegExp;
+    },
+    integer(v) {
+        return typeof v === 'number' && v === parseInt(String(v), 10);
+    },
+    array(v) {
+        return Array.isArray(v);
+    },
+    object(v) {
+        return typeof v === 'object' && !Array.isArray(v);
+    },
+    date(v) {
+        return v instanceof Date;
+    },
+    url(v) {
+        return typeof v === 'string' && valid_url_1.default.isUri(v);
+    },
+    hex(v) {
+        return typeof v === 'string' && v.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/);
+    },
+    email(v) {
+        return (0, email_validator_1.validate)(v);
+    },
+    any(v) {
+        return true;
+    },
+};
+const TYPE_LIST = Object.keys(TYPE_CHECKERS);
+const VALIDATORS = {
+    async required(value) {
+        if (Array.isArray(value)) {
+            return !!value.length ? Promise.resolve() : Promise.reject();
+        }
+        return !!value || value === 0 ? Promise.resolve() : Promise.reject();
+    },
+    async whitespace(value) {
+        if (typeof value !== 'string' || value.trim())
+            return Promise.resolve();
+        return Promise.reject();
+    },
+    async pattern(value, rule) {
+        const pattern = rule.pattern;
+        if (typeof value !== 'string')
+            return Promise.resolve();
+        return value.match(pattern) ? Promise.resolve() : Promise.reject();
+    },
+    async enum(value, rule) {
+        const options = rule.enum || [];
+        if (!value && value !== 0)
+            return Promise.resolve();
+        return options.includes(value) ? Promise.resolve() : Promise.reject();
+    },
+    async len(value, rule) {
+        const len = rule.len;
+        if (typeof value === 'number') {
+            return value === len ? Promise.resolve() : Promise.reject();
+        }
+        if (!value || !('length' in value))
+            return Promise.resolve();
+        return value.length === len ? Promise.resolve() : Promise.reject();
+    },
+    async max(value, rule) {
+        const max = rule.max;
+        if (typeof value === 'number') {
+            return value <= max ? Promise.resolve() : Promise.reject();
+        }
+        if (!value || (typeof value !== 'string' && !Array.isArray(value)))
+            return Promise.resolve();
+        return value.length <= max ? Promise.resolve() : Promise.reject();
+    },
+    async min(value, rule) {
+        const min = rule.min;
+        if (typeof value === 'number') {
+            return value >= min ? Promise.resolve() : Promise.reject();
+        }
+        if (!value || (typeof value !== 'string' && !Array.isArray(value)))
+            return Promise.resolve();
+        return value.length >= min ? Promise.resolve() : Promise.reject();
+    },
+    async validator(value, rule) {
+        return rule.validator(rule, value);
+    },
+    async type(value, rule) {
+        const type = rule.type;
+        if (!TYPE_LIST.includes(type))
+            return Promise.resolve();
+        return TYPE_CHECKERS[type](value) ? Promise.resolve() : Promise.reject();
+    },
+};
+const VALIDATOR_NAMES = Object.keys(VALIDATORS);
+async function applyRule(value, rule, form) {
+    if (typeof rule === 'function') {
+        rule = rule(form);
+    }
+    if (typeof rule.transform === 'function') {
+        value = rule.transform(value);
+    }
+    for (let validatorName of VALIDATOR_NAMES) {
+        if (!(validatorName in rule))
+            continue;
+        const checker = VALIDATORS[validatorName];
+        await checker(value, rule);
+    }
+}
+exports.applyRule = applyRule;
+async function applyRules(value, rules, form) {
+    if (!rules || !rules.length)
+        return;
+    for (let rule of rules) {
+        await applyRule(value, rule, form).catch((err) => {
+            if (typeof err !== 'string') {
+                err = (err === null || err === void 0 ? void 0 : err.message) || rule.message;
+            }
+            throw err;
+        });
+    }
+}
+exports.applyRules = applyRules;
+
+        

package/dist/cjs/components/forms/Label.js

@@ -0,0 +1,90 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = exports.LABEL_STYLES = exports.INLINE_LABEL_STYLES = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@react-spectrum/utils");
+const react_1 = require("react");
+const provider_1 = require("../../provider");
+const styles_1 = require("../../utils/styles");
+const list_1 = require("../../styles/list");
+const Base_1 = require("../Base");
+const StylesProvider_1 = require("../../providers/StylesProvider");
+const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const REQUIRED_ICON = ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0px", y: "0px", viewBox: "0 0 100 125", style: {
+        // @ts-ignore
+        enableBackground: 'new 0 0 100 100',
+        width: '.8em',
+        height: '.8em',
+        transform: 'rotate(-5deg)',
+    }, children: (0, jsx_runtime_1.jsx)("switch", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("polygon", { fill: "currentColor", points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57" }, void 0) }, void 0) }, void 0) }, void 0));
+const INTL_MESSAGES = {
+    '(required)': '(required)',
+    '(optional)': '(optional)',
+};
+exports.INLINE_LABEL_STYLES = {
+    fontWeight: 400,
+    preset: 'default',
+    color: {
+        '': '#dark.85',
+        invalid: '#danger-text',
+        disabled: '#dark.30',
+    },
+    whiteSpace: 'nowrap',
+};
+exports.LABEL_STYLES = {
+    display: 'block',
+    fontWeight: 600,
+    preset: 'default',
+    padding: {
+        '': '0',
+        side: '(1x - 1bw) top',
+    },
+    color: {
+        '': '#dark',
+        invalid: '#danger-text',
+        disabled: '#dark.30',
+    },
+    whiteSpace: 'nowrap',
+    width: {
+        '': 'initial',
+        side: '@(label-width, initial)',
+    },
+};
+function Label(props, ref) {
+    props = (0, provider_1.useProviderProps)(props);
+    let { as, qa, children, labelPosition = 'top', isRequired, necessityIndicator = isRequired != null ? 'icon' : null, includeNecessityIndicatorInAccessibilityName = false, htmlFor, isDisabled, validationState, for: labelFor, onClick, ...otherProps } = props;
+    let domRef = (0, utils_1.useDOMRef)(ref);
+    const contextStyles = (0, StylesProvider_1.useContextStyles)('Label', otherProps);
+    const styles = (0, styles_1.extractStyles)(otherProps, list_1.CONTAINER_STYLES, {
+        ...exports.LABEL_STYLES,
+        ...contextStyles,
+    });
+    let formatMessage = (message) => INTL_MESSAGES[message];
+    let necessityLabel = isRequired
+        ? formatMessage('(required)')
+        : formatMessage('(optional)');
+    let icon = ((0, jsx_runtime_1.jsx)("span", { "aria-label": includeNecessityIndicatorInAccessibilityName
+            ? formatMessage('(required)')
+            : undefined, children: REQUIRED_ICON }, void 0));
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { as: as || 'label', qa: qa || 'Label', ...(0, filterBaseProps_1.filterBaseProps)(otherProps), onClick: onClick, ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
+            side: labelPosition === 'side',
+            disabled: isDisabled,
+            invalid: validationState === 'invalid',
+            valid: validationState === 'valid',
+        }, children: typeof children !== 'string' ? (children) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, (necessityIndicator === 'label'
+                    || (necessityIndicator === 'icon' && isRequired))
+                    && ' \u200b', necessityIndicator === 'label' && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": !includeNecessityIndicatorInAccessibilityName
+                        ? isRequired
+                        : undefined, children: necessityLabel }, void 0)), necessityIndicator === 'icon' && isRequired && icon] }, void 0)) }, void 0));
+}
+let _Label = (0, react_1.forwardRef)(Label);
+exports.Label = _Label;
+
+        

package/dist/cjs/components/forms/NumberInput/NumberInput.js

@@ -0,0 +1,50 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Form_1 = require("../Form/Form");
+const provider_1 = require("../../../provider");
+const i18n_1 = require("@react-aria/i18n");
+const TextInputBase_1 = require("../TextInput/TextInputBase");
+const numberfield_1 = require("@react-stately/numberfield");
+const numberfield_2 = require("@react-aria/numberfield");
+const StepButton_1 = require("./StepButton");
+const styled_1 = require("../../../styled");
+const nullableValue_1 = require("../../../utils/react/nullableValue");
+const StepperContainer = (0, styled_1.styled)({
+    styles: {
+        display: 'grid',
+        gridColumns: '1fr',
+        gridRows: 'minmax(1px, 1fr) minmax(1px, 1fr)',
+        flow: 'column',
+        placeSelf: 'stretch',
+    },
+});
+function NumberInput(props, ref) {
+    props = (0, nullableValue_1.castNullableNumberValue)(props);
+    props = (0, provider_1.useProviderProps)(props);
+    props = (0, Form_1.useFormProps)(props);
+    let { hideStepper, value, defaultValue, onChange, ...otherProps } = props;
+    let showStepper = !hideStepper;
+    let { locale } = (0, i18n_1.useLocale)();
+    let state = (0, numberfield_1.useNumberFieldState)({ ...props, locale });
+    let inputRef = (0, react_1.useRef)(null);
+    let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, } = (0, numberfield_2.useNumberField)(props, state, inputRef);
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ...otherProps, labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? ((0, jsx_runtime_1.jsxs)(StepperContainer, { children: [(0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { direction: "up", ...incrementButtonProps }, void 0), (0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { direction: "down", ...decrementButtonProps }, void 0)] }, void 0)) : null }, void 0));
+}
+/**
+ * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
+ */
+const _NumberInput = (0, react_1.forwardRef)(NumberInput);
+exports.NumberInput = _NumberInput;
+_NumberInput.cubeInputType = 'Number';
+
+        

package/dist/cjs/components/forms/NumberInput/StepButton.js

@@ -0,0 +1,35 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const actions_1 = require("../../actions");
+const icons_1 = require("@ant-design/icons");
+const STEP_BUTTON_STYLES = {
+    padding: '0 .5x',
+    radius: {
+        '': '0 (1r - 1bw) 0 0',
+        down: '0 0 (1r - 1bw) 0',
+    },
+    preset: 't4',
+    lineHeight: '1em',
+    height: 'auto',
+};
+/**
+ * Buttons for NumberField.
+ */
+function StepButton(props) {
+    return ((0, jsx_runtime_1.jsx)(actions_1.Button, { type: "neutral", styles: STEP_BUTTON_STYLES, preventDefault: true, icon: props.direction === 'up' ? (0, jsx_runtime_1.jsx)(icons_1.CaretUpOutlined, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, {}, void 0), mods: {
+            up: props.direction === 'up',
+            down: props.direction === 'down',
+        }, label: `Step ${props.direction}`, ...props }, void 0));
+}
+exports.StepButton = StepButton;
+
+        

package/dist/cjs/components/forms/PasswordInput/PasswordInput.js

@@ -0,0 +1,43 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PasswordInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TextInputBase_1 = require("../TextInput/TextInputBase");
+const provider_1 = require("../../../provider");
+const textfield_1 = require("@react-aria/textfield");
+const actions_1 = require("../../actions");
+const icons_1 = require("@ant-design/icons");
+const nullableValue_1 = require("../../../utils/react/nullableValue");
+function PasswordInput(props, ref) {
+    props = (0, nullableValue_1.castNullableStringValue)(props);
+    let { suffix, multiLine, ...otherProps } = (0, provider_1.useProviderProps)({ ...props });
+    let [type, setType] = (0, react_1.useState)('password');
+    let inputRef = (0, react_1.useRef)(null);
+    let { labelProps, inputProps } = (0, textfield_1.useTextField)({
+        ...otherProps,
+        type,
+    }, inputRef);
+    const toggleType = (0, react_1.useCallback)((e) => {
+        setType((type) => (type === 'password' ? 'text' : 'password'));
+    }, []);
+    const wrappedSuffix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, (0, jsx_runtime_1.jsx)(actions_1.Button, { type: "neutral", htmlType: "button", onPress: toggleType, placeSelf: "stretch", height: "auto", radius: "right (1r - 1bw)", padding: ".5x 1x", width: "auto", label: "Toggle masking", excludeFromTabOrder: true, icon: type === 'password' ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleOutlined, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}, void 0) }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }, void 0));
+}
+/**
+ * PasswordInputs are password inputs that allow users to input passwords or code entries
+ * with a keyboard. Various decorations can be displayed around the field to
+ * communicate the entry requirements.
+ */
+const _PasswordInput = (0, react_1.forwardRef)(PasswordInput);
+exports.PasswordInput = _PasswordInput;
+_PasswordInput.cubeInputType = 'Text';
+
+