@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/esm/baseui/input/base-input.js

@@ -0,0 +1,247 @@
+import { __assign, __extends, __read } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+/* global window */
+import * as React from 'react';
+import { getOverrides } from '../helpers/overrides';
+import { ADJOINED, SIZE, CUSTOM_INPUT_TYPE } from './constants';
+import { InputContainer as StyledInputContainer, Input as StyledInput, StyledClearIcon, StyledClearIconContainer, StyledMaskToggleButton, } from './styled-components';
+import { getSharedProps } from './utils';
+import OverviewIcon from '../../icon/components/overview';
+import NoPreviewIcon from '../../icon/components/noPreview';
+import createEvent from '../utils/create-event';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
+// @ts-ignore
+var NullComponent = function () { return null; };
+var BaseInput = /** @class */ (function (_super) {
+    __extends(BaseInput, _super);
+    function BaseInput() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.inputRef = _this.props.inputRef || React.createRef();
+        _this.state = {
+            isFocused: _this.props.autoFocus || false,
+            isMasked: _this.props.type === 'password',
+            initialType: _this.props.type,
+            isFocusVisibleForClear: false,
+            isFocusVisibleForMaskToggle: false,
+        };
+        _this.onInputKeyDown = function (e) {
+            if (_this.props.clearOnEscape && e.key === 'Escape' && _this.inputRef.current && !_this.props.readOnly) {
+                _this.clearValue();
+                // prevent event from closing modal or doing something unexpected
+                e.stopPropagation();
+            }
+        };
+        _this.onClearIconClick = function () {
+            if (_this.inputRef.current)
+                _this.clearValue();
+            // return focus to the input after click
+            if (_this.inputRef.current)
+                _this.inputRef.current.focus();
+        };
+        _this.onFocus = function (e) {
+            _this.setState({ isFocused: true });
+            // @ts-ignore
+            _this.props.onFocus(e);
+        };
+        _this.onBlur = function (e) {
+            _this.setState({ isFocused: false });
+            // @ts-ignore
+            _this.props.onBlur(e);
+        };
+        _this.handleFocusForMaskToggle = function (event) {
+            if (isFocusVisible(event)) {
+                _this.setState({ isFocusVisibleForMaskToggle: true });
+            }
+        };
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        _this.handleBlurForMaskToggle = function (event) {
+            if (_this.state.isFocusVisibleForMaskToggle !== false) {
+                _this.setState({ isFocusVisibleForMaskToggle: false });
+            }
+        };
+        _this.handleFocusForClear = function (event) {
+            if (isFocusVisible(event)) {
+                _this.setState({ isFocusVisibleForClear: true });
+            }
+        };
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        _this.handleBlurForClear = function (event) {
+            if (_this.state.isFocusVisibleForClear !== false) {
+                _this.setState({ isFocusVisibleForClear: false });
+            }
+        };
+        return _this;
+    }
+    BaseInput.prototype.componentDidMount = function () {
+        var _a = this.props, autoFocus = _a.autoFocus, clearable = _a.clearable;
+        if (this.inputRef.current) {
+            if (autoFocus) {
+                this.inputRef.current.focus();
+            }
+            if (clearable) {
+                // @ts-ignore
+                this.inputRef.current.addEventListener('keydown', this.onInputKeyDown);
+            }
+        }
+    };
+    BaseInput.prototype.componentWillUnmount = function () {
+        var clearable = this.props.clearable;
+        if (clearable && this.inputRef.current) {
+            // @ts-ignore
+            this.inputRef.current.removeEventListener('keydown', this.onInputKeyDown);
+        }
+    };
+    BaseInput.prototype.clearValue = function () {
+        // trigger a fake input change event (as if all text was deleted)
+        var input = this.inputRef.current;
+        if (input) {
+            var nativeInputValue = Object.getOwnPropertyDescriptor(this.props.type === CUSTOM_INPUT_TYPE.textarea
+                ? // todo(flow->ts): globals, not props of window object
+                    HTMLTextAreaElement.prototype
+                : HTMLInputElement.prototype, 'value');
+            if (nativeInputValue) {
+                var nativeInputValueSetter = nativeInputValue.set;
+                if (nativeInputValueSetter) {
+                    nativeInputValueSetter.call(input, '');
+                    var event_1 = createEvent('input');
+                    input.dispatchEvent(event_1);
+                }
+            }
+        }
+    };
+    BaseInput.prototype.getInputType = function () {
+        // If the type prop is equal to "password" we allow the user to toggle between
+        // masked and non masked text. Internally, we toggle between type "password"
+        // and "text".
+        if (this.props.type === 'password') {
+            return this.state.isMasked ? 'password' : 'text';
+        }
+        else {
+            return this.props.type;
+        }
+    };
+    BaseInput.prototype.renderMaskToggle = function () {
+        var _a;
+        var _this = this;
+        if (this.props.type !== 'password')
+            return null;
+        var _b = __read(getOverrides(
+        // @ts-ignore
+        this.props.overrides.MaskToggleButton, StyledMaskToggleButton), 2), MaskToggleButton = _b[0], maskToggleButtonProps = _b[1];
+        var _c = __read(getOverrides(
+        // @ts-ignore
+        this.props.overrides.MaskToggleShowIcon, OverviewIcon), 2), MaskToggleShowIcon = _c[0], maskToggleIconShowProps = _c[1];
+        var _d = __read(getOverrides(
+        // @ts-ignore
+        this.props.overrides.MaskToggleHideIcon, NoPreviewIcon), 2), MaskToggleHideIcon = _d[0], maskToggleIconHideProps = _d[1];
+        var label = this.state.isMasked ? 'Show password text' : 'Hide password text';
+        var iconSize = (_a = {},
+            _a[SIZE.mini] = '12px',
+            _a[SIZE.compact] = '16px',
+            _a[SIZE.default] = '20px',
+            _a[SIZE.large] = '24px',
+            _a)[this.props.size];
+        return (_jsx(MaskToggleButton, __assign({ "$size": this.props.size, "$isFocusVisible": this.state.isFocusVisibleForMaskToggle, "aria-label": label, onClick: function () { return _this.setState(function (state) { return ({ isMasked: !state.isMasked }); }); }, title: label, type: "button" }, maskToggleButtonProps, { onFocus: forkFocus(maskToggleButtonProps, this.handleFocusForMaskToggle), onBlur: forkBlur(maskToggleButtonProps, this.handleBlurForMaskToggle) }, { children: this.state.isMasked ? (_jsx(MaskToggleShowIcon, __assign({ size: iconSize, title: label }, maskToggleIconShowProps), void 0)) : (_jsx(MaskToggleHideIcon, __assign({ size: iconSize, title: label }, maskToggleIconHideProps), void 0)) }), void 0));
+    };
+    BaseInput.prototype.renderClear = function () {
+        var _a;
+        var _this = this;
+        var _b = this.props, clearable = _b.clearable, value = _b.value, disabled = _b.disabled, readOnly = _b.readOnly, _c = _b.overrides, overrides = _c === void 0 ? {} : _c;
+        if (disabled || readOnly || !clearable || value == null || (typeof value === 'string' && value.length === 0)) {
+            return null;
+        }
+        var _d = __read(getOverrides(overrides.ClearIconContainer, StyledClearIconContainer), 2), ClearIconContainer = _d[0], clearIconContainerProps = _d[1];
+        var _e = __read(getOverrides(overrides.ClearIcon, StyledClearIcon), 2), ClearIcon = _e[0], clearIconProps = _e[1];
+        var ariaLabel = 'Clear value';
+        var sharedProps = getSharedProps(this.props, this.state);
+        var iconSize = (_a = {},
+            _a[SIZE.mini] = '14px',
+            _a[SIZE.compact] = '14px',
+            _a[SIZE.default] = '16px',
+            _a[SIZE.large] = '22px',
+            _a)[this.props.size];
+        return (_jsx(ClearIconContainer, __assign({ "$alignTop": this.props.type === CUSTOM_INPUT_TYPE.textarea }, sharedProps, clearIconContainerProps, { children: _jsx(ClearIcon, __assign({ size: iconSize, tabIndex: 0, title: ariaLabel, "aria-label": ariaLabel, onClick: this.onClearIconClick, 
+                // @ts-ignore
+                onKeyDown: function (event) {
+                    if (event.key && (event.key === 'Enter' || event.key === ' ')) {
+                        event.preventDefault();
+                        _this.onClearIconClick();
+                    }
+                }, role: "button", "$isFocusVisible": this.state.isFocusVisibleForClear }, sharedProps, clearIconProps, { onFocus: forkFocus(clearIconProps, this.handleFocusForClear), onBlur: forkBlur(clearIconProps, this.handleBlurForClear) }), void 0) }), void 0));
+    };
+    BaseInput.prototype.render = function () {
+        var _a = this.props.overrides, 
+        // @ts-ignore
+        InputContainerOverride = _a.InputContainer, 
+        // @ts-ignore
+        InputOverride = _a.Input, 
+        // @ts-ignore
+        BeforeOverride = _a.Before, 
+        // @ts-ignore
+        AfterOverride = _a.After;
+        // more here https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Preventing_autofilling_with_autocompletenew-password
+        var autoComplete = this.state.initialType === 'password' && this.props.autoComplete === BaseInput.defaultProps.autoComplete
+            ? 'new-password'
+            : this.props.autoComplete;
+        var sharedProps = getSharedProps(this.props, this.state);
+        var _b = __read(getOverrides(InputContainerOverride, StyledInputContainer), 2), InputContainer = _b[0], inputContainerProps = _b[1];
+        var _c = __read(getOverrides(InputOverride, StyledInput), 2), Input = _c[0], inputProps = _c[1];
+        var _d = __read(getOverrides(BeforeOverride, NullComponent), 2), Before = _d[0], beforeProps = _d[1];
+        var _e = __read(getOverrides(AfterOverride, NullComponent), 2), After = _e[0], afterProps = _e[1];
+        return (_jsxs(InputContainer, __assign({ "data-baseweb": this.props['data-baseweb'] || 'base-input' }, sharedProps, inputContainerProps, { children: [_jsx(Before, __assign({}, sharedProps, beforeProps), void 0), _jsx(Input, __assign({ ref: this.inputRef, "aria-activedescendant": this.props['aria-activedescendant'], "aria-autocomplete": this.props['aria-autocomplete'], "aria-controls": this.props['aria-controls'], "aria-errormessage": this.props['aria-errormessage'], "aria-haspopup": this.props['aria-haspopup'], "aria-label": this.props['aria-label'], "aria-labelledby": this.props['aria-labelledby'], "aria-describedby": this.props['aria-describedby'], "aria-invalid": this.props.error, "aria-required": this.props.required, autoComplete: autoComplete, disabled: this.props.disabled, readOnly: this.props.readOnly, id: this.props.id, inputMode: this.props.inputMode, maxLength: this.props.maxLength, name: this.props.name, onBlur: this.onBlur, onChange: this.props.onChange, onFocus: this.onFocus, onKeyDown: this.props.onKeyDown, onKeyPress: this.props.onKeyPress, onKeyUp: this.props.onKeyUp, pattern: this.props.pattern, placeholder: this.props.placeholder, type: this.getInputType(), required: this.props.required, role: this.props.role, value: this.props.value, min: this.props.min, max: this.props.max, step: this.props.step, rows: this.props.type === CUSTOM_INPUT_TYPE.textarea ? this.props.rows : null }, sharedProps, inputProps), void 0), this.renderClear(), this.renderMaskToggle(), _jsx(After, __assign({}, sharedProps, afterProps), void 0)] }), void 0));
+    };
+    BaseInput.defaultProps = {
+        // @ts-ignore
+        'aria-activedescendant': null,
+        // @ts-ignore
+        'aria-autocomplete': null,
+        // @ts-ignore
+        'aria-controls': null,
+        // @ts-ignore
+        'aria-errormessage': null,
+        // @ts-ignore
+        'aria-haspopup': null,
+        // @ts-ignore
+        'aria-label': null,
+        // @ts-ignore
+        'aria-labelledby': null,
+        // @ts-ignore
+        'aria-describedby': null,
+        adjoined: ADJOINED.none,
+        autoComplete: 'on',
+        autoFocus: false,
+        disabled: false,
+        error: false,
+        positive: false,
+        name: '',
+        inputMode: 'text',
+        onBlur: function () { },
+        onChange: function () { },
+        onKeyDown: function () { },
+        onKeyPress: function () { },
+        onKeyUp: function () { },
+        onFocus: function () { },
+        onClear: function () { },
+        clearable: false,
+        clearOnEscape: true,
+        overrides: {},
+        // @ts-ignore
+        pattern: null,
+        placeholder: '',
+        required: false,
+        // @ts-ignore
+        role: null,
+        size: SIZE.default,
+        type: 'text',
+        readOnly: false,
+    };
+    return BaseInput;
+}(React.Component));
+export default BaseInput;

package/esm/baseui/input/constants.d.ts

@@ -0,0 +1,22 @@
+export declare const STATE_CHANGE_TYPE: {
+    readonly change: "change";
+};
+export declare const CUSTOM_INPUT_TYPE: {
+    readonly textarea: "textarea";
+};
+export declare const ADJOINED: {
+    readonly none: "none";
+    readonly left: "left";
+    readonly right: "right";
+    readonly both: "both";
+};
+export declare const SIZE: {
+    readonly mini: "mini";
+    readonly default: "default";
+    readonly compact: "compact";
+    readonly large: "large";
+};
+export declare const ENHANCER_POSITION: {
+    readonly start: "start";
+    readonly end: "end";
+};

package/esm/baseui/input/constants.js

@@ -0,0 +1,28 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export var STATE_CHANGE_TYPE = {
+    change: 'change',
+};
+export var CUSTOM_INPUT_TYPE = {
+    textarea: 'textarea',
+};
+export var ADJOINED = {
+    none: 'none',
+    left: 'left',
+    right: 'right',
+    both: 'both',
+};
+export var SIZE = {
+    mini: 'mini',
+    default: 'default',
+    compact: 'compact',
+    large: 'large',
+};
+export var ENHANCER_POSITION = {
+    start: 'start',
+    end: 'end',
+};

package/esm/baseui/input/index.d.ts

@@ -0,0 +1,8 @@
+export { default as StatefulInput } from './stateful-input';
+export { default as StatefulContainer } from './stateful-container';
+export { default as Input } from './input';
+export { default as BaseInput } from './base-input';
+export { default as MaskedInput } from './masked-input';
+export { Root as StyledRoot, InputEnhancer as StyledInputEnhancer, InputEnhancer as StyledStartEnhancer, InputEnhancer as StyledEndEnhancer, InputContainer as StyledInputContainer, Input as StyledInput, } from './styled-components';
+export { STATE_CHANGE_TYPE, ADJOINED, SIZE, CUSTOM_INPUT_TYPE } from './constants';
+export * from './types';

package/esm/baseui/input/index.js

@@ -0,0 +1,9 @@
+export { default as StatefulInput } from './stateful-input';
+export { default as StatefulContainer } from './stateful-container';
+export { default as Input } from './input';
+export { default as BaseInput } from './base-input';
+export { default as MaskedInput } from './masked-input';
+// Styled elements
+export { Root as StyledRoot, InputEnhancer as StyledInputEnhancer, InputEnhancer as StyledStartEnhancer, InputEnhancer as StyledEndEnhancer, InputContainer as StyledInputContainer, Input as StyledInput, } from './styled-components';
+export { STATE_CHANGE_TYPE, ADJOINED, SIZE, CUSTOM_INPUT_TYPE } from './constants';
+export * from './types';

package/esm/baseui/input/input.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { InputProps, InternalState } from './types';
+import type { FocusEvent } from 'react';
+declare class Input extends React.Component<InputProps, InternalState> {
+    static defaultProps: {
+        autoComplete: string;
+        autoFocus: boolean;
+        disabled: boolean;
+        name: string;
+        onBlur: () => void;
+        onFocus: () => void;
+        overrides: {};
+        required: boolean;
+        size: "default";
+        startEnhancer: null;
+        endEnhancer: null;
+        clearable: boolean;
+        type: string;
+        readOnly: boolean;
+    };
+    /**
+     * This "Stateless" input still has state. This is private state that
+     * customers shouldn't have to manage themselves, such as input's focus state.
+     */
+    state: {
+        isFocused: boolean;
+    };
+    onFocus: (e: FocusEvent<HTMLInputElement>) => void;
+    onBlur: (e: FocusEvent<HTMLInputElement>) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default Input;
+export { default as StatefulContainer } from './stateful-container';

package/esm/baseui/input/input.js

@@ -0,0 +1,96 @@
+import { __assign, __extends, __read, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { getOverrides } from '../helpers/overrides';
+import { getSharedProps } from './utils';
+import BaseInput from './base-input';
+import { Root as StyledRoot, InputEnhancer as StyledInputEnhancer } from './styled-components';
+import { SIZE, ADJOINED, ENHANCER_POSITION } from './constants';
+var Input = /** @class */ (function (_super) {
+    __extends(Input, _super);
+    function Input() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        /**
+         * This "Stateless" input still has state. This is private state that
+         * customers shouldn't have to manage themselves, such as input's focus state.
+         */
+        _this.state = {
+            isFocused: _this.props.autoFocus || false,
+        };
+        _this.onFocus = function (e) {
+            _this.setState({ isFocused: true });
+            // @ts-ignore
+            _this.props.onFocus(e);
+        };
+        _this.onBlur = function (e) {
+            _this.setState({ isFocused: false });
+            // @ts-ignore
+            _this.props.onBlur(e);
+        };
+        return _this;
+    }
+    Input.prototype.render = function () {
+        var _a = this.props, startEnhancer = _a.startEnhancer, endEnhancer = _a.endEnhancer, _b = _a.overrides, 
+        // @ts-ignore
+        RootOverride = _b.Root, 
+        // @ts-ignore
+        StartEnhancerOverride = _b.StartEnhancer, 
+        // @ts-ignore
+        EndEnhancerOverride = _b.EndEnhancer, restOverrides = __rest(_b, ["Root", "StartEnhancer", "EndEnhancer"]), restProps = __rest(_a, ["startEnhancer", "endEnhancer", "overrides"]);
+        var _c = __read(getOverrides(RootOverride, StyledRoot), 2), Root = _c[0], rootProps = _c[1];
+        var _d = __read(getOverrides(StartEnhancerOverride, StyledInputEnhancer), 2), StartEnhancer = _d[0], startEnhancerProps = _d[1];
+        var _e = __read(getOverrides(EndEnhancerOverride, StyledInputEnhancer), 2), EndEnhancer = _e[0], endEnhancerProps = _e[1];
+        var sharedProps = getSharedProps(this.props, this.state);
+        if (process.env.NODE_ENV !== 'production') {
+            if (this.props.error && this.props.positive) {
+                // eslint-disable-next-line no-console
+                console.warn("[Input] `error` and `positive` are both set to `true`. `error` will take precedence but this may not be what you want.");
+            }
+        }
+        return (_jsxs(Root, __assign({ "data-baseweb": "input" }, sharedProps, rootProps, { "$adjoined": getAdjoinedProp(startEnhancer, endEnhancer), "$hasIconTrailing": this.props.clearable || this.props.type == 'password' }, { children: [isEnhancer(startEnhancer) && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { "$position": ENHANCER_POSITION.start }, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }), void 0)), _jsx(BaseInput, __assign({}, restProps, { overrides: restOverrides, adjoined: getAdjoinedProp(startEnhancer, endEnhancer), onFocus: this.onFocus, onBlur: this.onBlur }), void 0), isEnhancer(endEnhancer) && (_jsx(EndEnhancer, __assign({}, sharedProps, endEnhancerProps, { "$position": ENHANCER_POSITION.end }, { children: typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer }), void 0))] }), void 0));
+    };
+    Input.defaultProps = {
+        autoComplete: 'on',
+        autoFocus: false,
+        disabled: false,
+        name: '',
+        onBlur: function () { },
+        onFocus: function () { },
+        overrides: {},
+        required: false,
+        size: SIZE.default,
+        // @ts-ignore
+        startEnhancer: null,
+        // @ts-ignore
+        endEnhancer: null,
+        clearable: false,
+        type: 'text',
+        readOnly: false,
+    };
+    return Input;
+}(React.Component));
+// @ts-ignore
+function getAdjoinedProp(startEnhancer, endEnhancer) {
+    if (isEnhancer(startEnhancer) && isEnhancer(endEnhancer)) {
+        return ADJOINED.both;
+    }
+    else if (isEnhancer(startEnhancer)) {
+        return ADJOINED.left;
+    }
+    else if (isEnhancer(endEnhancer)) {
+        return ADJOINED.right;
+    }
+    return ADJOINED.none;
+}
+// @ts-ignore
+function isEnhancer(enhancer) {
+    return Boolean(enhancer || enhancer === 0);
+}
+export default Input;
+export { default as StatefulContainer } from './stateful-container';

package/esm/baseui/input/masked-input.d.ts

@@ -0,0 +1,8 @@
+import type { MaskedInputProps } from './types';
+declare function MaskedInput({ mask, maskChar, overrides: { Input: inputOverride, ...restOverrides }, ...restProps }: MaskedInputProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MaskedInput {
+    var defaultProps: {
+        maskChar: string;
+    };
+}
+export default MaskedInput;

package/esm/baseui/input/masked-input.js

@@ -0,0 +1,53 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+// @ts-ignore
+import InputMask from 'react-input-mask';
+import Input from './input';
+import { Input as StyledInput } from './styled-components';
+var MaskOverride = React.forwardRef(function (_a, ref) {
+    var 
+    // do nothing with these - we just don't want to pass it to the InputMask, as
+    // it does not have these properties
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    startEnhancer = _a.startEnhancer, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    endEnhancer = _a.endEnhancer, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    error = _a.error, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    positive = _a.positive, 
+    // below are props that are used by the masked-input
+    onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, value = _a.value, disabled = _a.disabled, readOnly = _a.readOnly, restProps = __rest(_a, ["startEnhancer", "endEnhancer", "error", "positive", "onChange", "onFocus", "onBlur", "value", "disabled", "readOnly"]);
+    return (_jsx(InputMask, __assign({ onChange: onChange, onFocus: onFocus, onBlur: onBlur, value: value, disabled: disabled, readOnly: readOnly }, restProps, { children: function (props) { return (_jsx(StyledInput, __assign({ ref: ref, onChange: onChange, onFocus: onFocus, onBlur: onBlur, value: value, disabled: disabled, readOnly: readOnly }, props), void 0)); } }), void 0));
+});
+MaskOverride.displayName = 'MaskOverride';
+export default function MaskedInput(_a) {
+    var mask = _a.mask, maskChar = _a.maskChar, _b = _a.overrides, _c = _b === void 0 ? {} : _b, _d = _c.Input, inputOverride = _d === void 0 ? {} : _d, restOverrides = __rest(_c, ["Input"]), restProps = __rest(_a, ["mask", "maskChar", "overrides"]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var componentOverride = MaskOverride;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var propsOverride = {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var styleOverride = {};
+    if (typeof inputOverride === 'function') {
+        componentOverride = inputOverride;
+    }
+    else if (typeof inputOverride === 'object') {
+        componentOverride = inputOverride.component || componentOverride;
+        propsOverride = inputOverride.props || {};
+        styleOverride = inputOverride.style || {};
+    }
+    if (typeof propsOverride === 'object') {
+        propsOverride = __assign(__assign({}, propsOverride), { mask: propsOverride.mask || mask, maskChar: propsOverride.maskChar || maskChar });
+    }
+    var nextOverrides = __assign({ Input: {
+            component: componentOverride,
+            props: propsOverride,
+            style: styleOverride,
+        } }, restOverrides);
+    return _jsx(Input, __assign({}, restProps, { overrides: nextOverrides }), void 0);
+}
+MaskedInput.defaultProps = {
+    maskChar: ' ',
+};

package/esm/baseui/input/stateful-container.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { StatefulContainerProps, State, StateReducer, StateType } from './types';
+import type { ChangeEvent } from 'react';
+declare class StatefulContainer<T extends HTMLInputElement | HTMLTextAreaElement> extends React.Component<StatefulContainerProps<T>, State> {
+    static defaultProps: {
+        initialState: {};
+        stateReducer: StateReducer;
+        onChange: (...args: any[]) => void;
+        onClear: (...args: any[]) => void;
+    };
+    state: State;
+    onChange: (e: ChangeEvent<T>) => void;
+    internalSetState: (type: StateType, nextState: State) => void;
+    render(): React.ReactNode;
+}
+export default StatefulContainer;

package/esm/baseui/input/stateful-container.js

@@ -0,0 +1,40 @@
+import { __assign, __extends, __rest } from "tslib";
+import * as React from 'react';
+import { STATE_CHANGE_TYPE } from './constants';
+import _noop from 'lodash/noop';
+var defaultStateReducer = function (type, nextState) { return nextState; };
+var StatefulContainer = /** @class */ (function (_super) {
+    __extends(StatefulContainer, _super);
+    function StatefulContainer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = __assign({ value: '' }, _this.props.initialState);
+        _this.onChange = function (e) {
+            var nextState = { value: e.target.value };
+            _this.internalSetState(STATE_CHANGE_TYPE.change, nextState);
+            // @ts-ignore
+            _this.props.onChange(e);
+        };
+        _this.internalSetState = function (type, nextState) {
+            // @ts-ignore
+            var newState = _this.props.stateReducer(type, nextState, _this.state);
+            _this.setState(newState);
+        };
+        return _this;
+    }
+    StatefulContainer.prototype.render = function () {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        var _a = this.props, children = _a.children, initialState = _a.initialState, stateReducer = _a.stateReducer, restProps = __rest(_a, ["children", "initialState", "stateReducer"]);
+        var onChange = this.onChange;
+        return children(__assign(__assign(__assign({}, restProps), this.state), { 
+            // @ts-ignore
+            onChange: onChange }));
+    };
+    StatefulContainer.defaultProps = {
+        initialState: {},
+        stateReducer: defaultStateReducer,
+        onChange: _noop,
+        onClear: _noop,
+    };
+    return StatefulContainer;
+}(React.Component));
+export default StatefulContainer;

package/esm/baseui/input/stateful-input.d.ts

@@ -0,0 +1,2 @@
+import type { StatefulInputProps } from './types';
+export default function StatefulInput(props: StatefulInputProps): import("react/jsx-runtime").JSX.Element;

package/esm/baseui/input/stateful-input.js

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import StatefulContainer from './stateful-container';
+import Input from './input';
+export default function StatefulInput(props) {
+    return (_jsx(StatefulContainer, __assign({}, props, { children: function (childrenProps) { return _jsx(Input, __assign({}, childrenProps), void 0); } }), void 0));
+}

package/esm/baseui/input/styled-components.d.ts

@@ -0,0 +1,15 @@
+import type { StyleObject } from 'styletron-standard';
+import type { SharedProps } from './types';
+import type { SharedStyleProps } from '../textarea';
+export declare const StyledMaskToggleButton: import("../../style/styled").StyledComponent;
+export declare const StyledClearIconContainer: import("../../style/styled").StyledComponent;
+export declare const StyledClearIcon: import("../../style/styled").StyledComponent;
+export declare const getRootStyles: () => StyleObject;
+export declare const Root: import("../../style/styled").StyledComponent;
+export declare const InputEnhancer: import("../../style/styled").StyledComponent;
+export declare const getInputContainerStyles: () => string;
+export declare const InputContainer: import("../../style/styled").StyledComponent;
+export declare const getInputStyles: (_: any, props: SharedProps | SharedStyleProps) => {
+    cursor: string;
+};
+export declare const Input: import("../../style/styled").StyledComponent;

package/esm/baseui/input/styled-components.js

@@ -0,0 +1,41 @@
+import { styled } from '../../style';
+export var StyledMaskToggleButton = styled('button', 'px-2 flex items-center border-none', function (_a, _b) {
+    var theme = _a.theme;
+    var $isFocusVisible = _b.$isFocusVisible;
+    return ({
+        background: 'none',
+        outline: $isFocusVisible ? "solid 3px ".concat(theme.spr.focus01) : 'none',
+    });
+});
+StyledMaskToggleButton.displayName = 'StyledMaskToggleButton';
+export var StyledClearIconContainer = styled('div', 'px-1 flex items-center spr-text-01', function (_, _a) {
+    var $alignTop = _a.$alignTop;
+    return ({
+        alignItems: $alignTop ? 'flex-start' : 'center',
+        paddingTop: $alignTop ? '12px' : '0px',
+    });
+});
+StyledClearIconContainer.displayName = 'StyledClearIconContainer';
+export var StyledClearIcon = styled('svg');
+StyledClearIcon.displayName = 'StyledClearIcon';
+export var getRootStyles = function () { return ({
+    transitionProperty: 'border',
+}); };
+export var Root = styled('div', 'ease-out box-border flex w-full overflow-hidden duration-200');
+Root.displayName = 'Root';
+// InputEnhancer
+export var InputEnhancer = styled('div', 'flex items-center justify-center transition-colors duration-200 ease-out text-16');
+InputEnhancer.displayName = 'InputEnhancer';
+// InputContainer
+export var getInputContainerStyles = function () { return 'flex w-full'; };
+export var InputContainer = styled('div', getInputContainerStyles);
+InputContainer.displayName = 'InputContainer';
+export var getInputStyles = function (_, props) {
+    var $disabled = props.$disabled, $isFocused = props.$isFocused, $error = props.$error, $size = props.$size;
+    return {
+        // See https://stackoverflow.com/a/33811151
+        cursor: $disabled ? 'not-allowed' : 'text',
+    };
+};
+export var Input = styled('input', 'box-border border-0 bg-transparent w-full p-0 m-0 min-w-full min-w-0 outline-none', getInputStyles);
+Input.displayName = 'Input';