@toptal/picasso-outlined-input 1.1.5 → 2.0.0

package/dist-package/src/OutlinedInput/OutlinedInput.d.ts

@@ -1,52 +1,5 @@
-import type { ChangeEventHandler, ReactType, ReactNode, InputHTMLAttributes, MouseEvent } from 'react';
 import React from 'react';
-import type { InputBaseComponentProps } from '@material-ui/core/InputBase';
-import type { StandardProps, SizeType } from '@toptal/picasso-shared';
-declare type ValueType = (string | number | boolean | object)[] | string | number | boolean | object;
-export declare type Status = 'error' | 'success' | 'default';
-export declare type BaseInputProps = InputBaseComponentProps & {
-    variant?: 'dark' | 'light';
-};
-export interface Props extends StandardProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'size' | 'color'> {
-    /** Width of the component */
-    width?: 'full' | 'shrink' | 'auto';
-    inputComponent?: ReactType<InputBaseComponentProps>;
-    inputProps?: BaseInputProps;
-    defaultValue?: ValueType;
-    value?: ValueType;
-    /** Whether `Input` should be rendered as `TextArea` or not */
-    multiline?: boolean;
-    /** If true, the input element will be focused during the first mount */
-    autoFocus?: boolean;
-    /** Specify rows amount for `TextArea` */
-    rows?: string | number;
-    rowsMax?: string | number;
-    /** Type attribute of the Input element. It should be a valid HTML5 input type */
-    type?: string;
-    /**
-     * @deprecated [FX-4715] Use the `status` prop instead to both support success and error states
-     * Indicate whether input is in error state
-     */
-    error?: boolean;
-    /** Indicate input status */
-    status?: Status;
-    startAdornment?: ReactNode;
-    endAdornment?: ReactNode;
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    /** Component size */
-    size?: SizeType<'small' | 'medium' | 'large'>;
-    /** Whether to render reset icon when there is a value in the input */
-    enableReset?: boolean;
-    /** Callback invoked when reset button was clicked */
-    onResetClick?: (event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => void;
-    /** Ref of the input element */
-    inputRef?: React.Ref<HTMLInputElement>;
-    testIds?: {
-        resetButton?: string;
-        validIcon?: string;
-    };
-    highlight?: 'autofill';
-}
+import type { Props } from './types';
 declare const OutlinedInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
 export default OutlinedInput;
 //# sourceMappingURL=OutlinedInput.d.ts.map

package/dist-package/src/OutlinedInput/OutlinedInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OutlinedInput.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/OutlinedInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,UAAU,EACX,MAAM,OAAO,CAAA;AACd,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AAE1E,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAW,MAAM,wBAAwB,CAAA;AAY9E,aAAK,SAAS,GACV,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,EAAE,GACtC,MAAM,GACN,MAAM,GACN,OAAO,GACP,MAAM,CAAA;AAEV,oBAAY,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAEpD,oBAAY,cAAc,GAAG,uBAAuB,GAAG;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC3B,CAAA;AAED,MAAM,WAAW,KACf,SAAQ,aAAa,EACnB,IAAI,CACF,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,OAAO,CAC5C;IACH,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClC,cAAc,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAA;IACnD,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEtB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;IAC/C,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IAC7C,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qDAAqD;IACrD,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KACrD,IAAI,CAAA;IACT,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;IACtC,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IACD,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAwCD,QAAA,MAAM,aAAa,2EAqHjB,CAAA;AAWF,eAAe,aAAa,CAAA"}
+{"version":3,"file":"OutlinedInput.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/OutlinedInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAmBtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAmDpC,QAAA,MAAM,aAAa,2EA0IjB,CAAA;AAWF,eAAe,aAAa,CAAA"}

package/dist-package/src/OutlinedInput/OutlinedInput.js

@@ -9,28 +9,30 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
-import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import { OutlinedInput as MUIOutlinedInput } from '@material-ui/core';
-import capitalize from '@material-ui/core/utils/capitalize';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { InputAdornment, InputValidIconAdornment, } from '@toptal/picasso-input-adornment';
 import { ButtonCircular } from '@toptal/picasso-button';
 import { CloseMinor16 } from '@toptal/picasso-icons';
 import { noop, usePropDeprecationWarning } from '@toptal/picasso-utils';
 import { useFieldsLayoutContext } from '@toptal/picasso-form';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoOutlinedInput',
-});
-const ResetButton = ({ classes, hasValue, onClick, testIds, }) => (React.createElement(InputAdornment, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.resetButton, position: 'end', className: cx(classes.resetButton, {
-        [classes.resetButtonDirty]: hasValue,
-    }) },
+import { Input } from '@mui/base/Input';
+import { TextareaAutosize, } from '@mui/base/TextareaAutosize';
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
+import { getRootClassName } from './stylesRoot';
+import { getInputClassName } from './stylesInput';
+import { getRows } from './utils';
+const ResetButton = ({ hasValue, onClick, testIds, }) => (React.createElement(InputAdornment, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.resetButton, position: 'end', className: twJoin('invisible', hasValue && 'peer-focus:visible peer-hover:visible') },
     React.createElement(ButtonCircular, { tabIndex: -1, icon: React.createElement(CloseMinor16, null), variant: 'flat', role: 'reset', onClick: onClick, onMouseDown: (event) => event.preventDefault(), onFocus: (event) => event.stopPropagation() })));
+const Textarea = forwardRef((_a, ref) => {
+    var { 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ownerState } = _a, rest = __rest(_a, ["ownerState"]);
+    return React.createElement(TextareaAutosize, Object.assign({ ref: ref }, rest));
+});
 const OutlinedInput = forwardRef(function OutlinedInput(props, ref) {
-    const { className, style, multiline, autoFocus, rows, rowsMax, width = 'auto', inputComponent, inputProps, defaultValue, value, type, error, status, startAdornment, endAdornment: userDefinedEndAdornment, onChange, size = 'medium', enableReset, disabled, onResetClick = noop, inputRef, testIds, highlight } = props, rest = __rest(props
+    const { className, style, multiline, multilineResizable, autoFocus, rows, rowsMax, width = 'auto', inputComponent, inputProps, defaultValue, value, type = 'text', error, status, startAdornment, endAdornment: userDefinedEndAdornment, onChange, size = 'medium', enableReset, disabled, onResetClick = noop, inputRef, testIds, highlight, classes } = props, rest = __rest(props
     // TODO: [FX-4715]
-    , ["className", "style", "multiline", "autoFocus", "rows", "rowsMax", "width", "inputComponent", "inputProps", "defaultValue", "value", "type", "error", "status", "startAdornment", "endAdornment", "onChange", "size", "enableReset", "disabled", "onResetClick", "inputRef", "testIds", "highlight"]);
+    , ["className", "style", "multiline", "multilineResizable", "autoFocus", "rows", "rowsMax", "width", "inputComponent", "inputProps", "defaultValue", "value", "type", "error", "status", "startAdornment", "endAdornment", "onChange", "size", "enableReset", "disabled", "onResetClick", "inputRef", "testIds", "highlight", "classes"]);
     // TODO: [FX-4715]
     usePropDeprecationWarning({
         props,
@@ -39,33 +41,54 @@ const OutlinedInput = forwardRef(function OutlinedInput(props, ref) {
         description: 'Use the `status` prop instead. `error` is deprecated and will be removed in the next major release.',
     });
     const { layout } = useFieldsLayoutContext();
-    const classes = useStyles(props);
     const isDark = (inputProps === null || inputProps === void 0 ? void 0 : inputProps.variant) === 'dark';
     const shouldShowReset = enableReset && !disabled;
     const hasEndAdornment = status === 'success' || shouldShowReset;
     const endAdornment = hasEndAdornment ? (React.createElement(React.Fragment, null,
-        shouldShowReset && (React.createElement(ResetButton, { classes: classes, hasValue: Boolean(value), onClick: onResetClick, testIds: testIds })),
+        shouldShowReset && (React.createElement(ResetButton, { hasValue: Boolean(value), onClick: onResetClick, testIds: testIds })),
         !multiline && status === 'success' && (React.createElement(InputValidIconAdornment, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.validIcon })),
         userDefinedEndAdornment)) : (userDefinedEndAdornment);
-    return (React.createElement(MUIOutlinedInput, Object.assign({}, rest, { classes: {
-            root: cx(classes.root, classes[`root${capitalize(width)}`], classes[`root${capitalize(size)}`], {
-                [`${classes.hidden}`]: type === 'hidden',
-                [classes.rootDark]: isDark,
-                [classes.highlightAutofill]: highlight === 'autofill',
-                [classes.horizontalLayout]: layout === 'horizontal',
-                [classes.error]: Boolean(status === 'error' || error),
-            }),
-            input: cx(classes.input, classes[`input${capitalize(size)}`], {
-                [classes.inputDark]: isDark,
-            }),
-            inputMultiline: classes.inputMultiline,
-            notchedOutline: cx(classes.notchedOutline, {
-                [classes.notchedOutlineDark]: isDark,
-            }),
-            focused: classes.focused,
-        }, className: cx({
-            [classes.error]: Boolean(status === 'error' || error),
-        }, className), style: style, labelWidth: 0, fullWidth: width === 'full', error: Boolean(status === 'error' || error), inputComponent: inputComponent, inputProps: inputProps, ref: ref, inputRef: inputRef, defaultValue: defaultValue, value: value, type: type, startAdornment: startAdornment, endAdornment: endAdornment, multiline: multiline, autoFocus: autoFocus, minRows: rows, maxRows: rowsMax, onChange: onChange, disabled: disabled })));
+    const divRef = useRef(null);
+    useImperativeHandle(ref, () => divRef.current, []);
+    const isError = Boolean(status === 'error' || error);
+    const inputClassName = getInputClassName({
+        size,
+        disabled,
+        isDark,
+        multiline,
+        multilineResizable,
+        type,
+        inputProps,
+    });
+    const rootClassName = getRootClassName({
+        size,
+        width,
+        type,
+        layout,
+        isDark,
+        multiline,
+        highlight,
+        disabled,
+        className,
+        classes,
+        isError,
+    });
+    const multilineProps = multiline
+        ? {
+            multiline: true,
+            // to keep the same behavior as in MUI@4
+            // rows: getRows(rows),
+            minRows: getRows(rows),
+            maxRows: getRows(rowsMax),
+        }
+        : {};
+    return (React.createElement(Input, Object.assign({}, rest, { slots: { input: inputComponent, textarea: Textarea }, slotProps: {
+            root: {
+                ref: divRef,
+                className: twMerge(rootClassName, classes === null || classes === void 0 ? void 0 : classes.root, className),
+            },
+            input: Object.assign(Object.assign({}, inputProps), { ref: inputRef, className: twMerge(inputClassName, classes === null || classes === void 0 ? void 0 : classes.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), type, 'aria-invalid': isError }),
+        }, style: style, error: isError, defaultValue: defaultValue, value: value, startAdornment: startAdornment, endAdornment: endAdornment, autoFocus: autoFocus, onChange: onChange, disabled: disabled }, multilineProps)));
 });
 OutlinedInput.defaultProps = {
     width: 'auto',

package/dist-package/src/OutlinedInput/OutlinedInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"OutlinedInput.js","sourceRoot":"","sources":["../../../src/OutlinedInput/OutlinedInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"OutlinedInput.js","sourceRoot":"","sources":["../../../src/OutlinedInput/OutlinedInput.tsx"],"names":[],"mappings":"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"}

package/dist-package/src/OutlinedInput/index.d.ts

@@ -1,6 +1,7 @@
 import type { OmitInternalProps } from '@toptal/picasso-shared';
-import type { Props } from './OutlinedInput';
+import type { Props } from './types';
 export { default as OutlinedInput } from './OutlinedInput';
 export declare type OutlinedInputProps = OmitInternalProps<Props>;
 export * from './OutlinedInput';
+export type { Status, BaseInputProps, InputProps, Size, Props } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist-package/src/OutlinedInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAE5C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC1D,oBAAY,kBAAkB,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AACzD,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC1D,oBAAY,kBAAkB,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AACzD,cAAc,iBAAiB,CAAA;AAC/B,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}

package/dist-package/src/OutlinedInput/stylesInput.d.ts

@@ -0,0 +1,24 @@
+import type { Size, Props } from './types';
+export declare const classesBySize: Record<Size, string>;
+export declare const fontColorClasses: {
+    dark: string;
+    disabled: string[];
+    default: string;
+    timepicker: string;
+};
+export declare const getFontColorClass: ({ isDark, disabled, type, inputPropsDisabled, }: {
+    isDark: boolean;
+    disabled?: boolean | undefined;
+    type?: string | undefined;
+    inputPropsDisabled?: boolean | undefined;
+}) => string | string[];
+export declare const placeholderClasses: {
+    default: string[];
+    dark: string[];
+};
+export declare const inputClasses: string[];
+export declare const getInputClassName: ({ size, disabled, isDark, multiline, multilineResizable, type, inputProps, }: Partial<Props> & {
+    isDark: boolean;
+    size: Size;
+}) => (string | false | string[] | undefined)[];
+//# sourceMappingURL=stylesInput.d.ts.map

package/dist-package/src/OutlinedInput/stylesInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylesInput.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/stylesInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE1C,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAI9C,CAAA;AAED,eAAO,MAAM,gBAAgB;;;;;CAU5B,CAAA;AAED,eAAO,MAAM,iBAAiB;YAMpB,OAAO;;;;uBAmBhB,CAAA;AAED,eAAO,MAAM,kBAAkB;;;CAG9B,CAAA;AAED,eAAO,MAAM,YAAY,UAaxB,CAAA;AAED,eAAO,MAAM,iBAAiB;YAQA,OAAO;UAAQ,IAAI;+CAWhD,CAAA"}

package/dist-package/src/OutlinedInput/stylesInput.js

@@ -0,0 +1,60 @@
+export const classesBySize = {
+    small: 'text-xxs leading-4',
+    medium: 'text-md leading-4',
+    large: 'text-lg leading-4',
+};
+export const fontColorClasses = {
+    dark: 'text-white',
+    disabled: [
+        'text-gray-600',
+        // On Safari the text gets a bit lighter as if it had some transparency applied to it
+        // We need this webkit-specific property to achieve the exact font color
+        '[&::-webkit-text-fill-color]:text-gray-600',
+    ],
+    default: 'text-black',
+    timepicker: 'text-black',
+};
+export const getFontColorClass = ({ isDark, disabled, type, inputPropsDisabled, }) => {
+    if (isDark) {
+        return fontColorClasses.dark;
+    }
+    if (type === 'time' && inputPropsDisabled) {
+        // It's a special case for TimePicker
+        return fontColorClasses.timepicker;
+    }
+    if (disabled) {
+        return fontColorClasses.disabled;
+    }
+    return fontColorClasses.default;
+};
+export const placeholderClasses = {
+    default: ['[&::placeholder]:text-gray-600', '[&::placeholder]:opacity-100'],
+    dark: ['[&::placeholder]:text-white', '[&::placeholder]:opacity-[0.64]'],
+};
+export const inputClasses = [
+    '[&::-webkit-calendar-picker-indicator]:bg-none',
+    'bg-transparent',
+    'border-none',
+    'box-border',
+    'cursor-[inherit]',
+    'h-full',
+    'outline-none',
+    'p-0',
+    'peer',
+    'resize-none',
+    'resize-none',
+    'w-full',
+];
+export const getInputClassName = ({ size, disabled, isDark, multiline, multilineResizable, type, inputProps, }) => [
+    inputClasses,
+    classesBySize[size],
+    getFontColorClass({
+        isDark,
+        disabled,
+        type,
+        inputPropsDisabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled,
+    }),
+    isDark ? placeholderClasses.dark : placeholderClasses.default,
+    multiline && multilineResizable && 'resize-y',
+];
+//# sourceMappingURL=stylesInput.js.map

package/dist-package/src/OutlinedInput/stylesInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylesInput.js","sourceRoot":"","sources":["../../../src/OutlinedInput/stylesInput.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAyB;IACjD,KAAK,EAAE,oBAAoB;IAC3B,MAAM,EAAE,mBAAmB;IAC3B,KAAK,EAAE,mBAAmB;CAC3B,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE;QACR,eAAe;QACf,qFAAqF;QACrF,wEAAwE;QACxE,4CAA4C;KACjC;IACb,OAAO,EAAE,YAAY;IACrB,UAAU,EAAE,YAAY;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,kBAAkB,GAMnB,EAAE,EAAE;IACH,IAAI,MAAM,EAAE;QACV,OAAO,gBAAgB,CAAC,IAAI,CAAA;KAC7B;IAED,IAAI,IAAI,KAAK,MAAM,IAAI,kBAAkB,EAAE;QACzC,qCAAqC;QACrC,OAAO,gBAAgB,CAAC,UAAU,CAAA;KACnC;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,gBAAgB,CAAC,QAAQ,CAAA;KACjC;IAED,OAAO,gBAAgB,CAAC,OAAO,CAAA;AACjC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,OAAO,EAAE,CAAC,gCAAgC,EAAE,8BAA8B,CAAC;IAC3E,IAAI,EAAE,CAAC,6BAA6B,EAAE,iCAAiC,CAAC;CACzE,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,gDAAgD;IAChD,gBAAgB;IAChB,aAAa;IACb,YAAY;IACZ,kBAAkB;IAClB,QAAQ;IACR,cAAc;IACd,KAAK;IACL,MAAM;IACN,aAAa;IACb,aAAa;IACb,QAAQ;CACT,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,UAAU,GACuC,EAAE,EAAE,CAAC;IACtD,YAAY;IACZ,aAAa,CAAC,IAAI,CAAC;IACnB,iBAAiB,CAAC;QAChB,MAAM;QACN,QAAQ;QACR,IAAI;QACJ,kBAAkB,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ;KACzC,CAAC;IACF,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,OAAO;IAC7D,SAAS,IAAI,kBAAkB,IAAI,UAAU;CAC9C,CAAA"}

package/dist-package/src/OutlinedInput/stylesRoot.d.ts

@@ -0,0 +1,66 @@
+import type { FieldLayout } from '@toptal/picasso-form';
+import type { WidthType, Size, Props } from './types';
+export declare const spacingBySize: Record<Size, string>;
+export declare const heightClasses: {
+    readonly singleline: Record<"small" | "medium" | "large", string>;
+    readonly multiline: "h-auto";
+};
+export declare const fontColorClass: {
+    default: string;
+    disabled: string;
+};
+export declare const cursorClass: {
+    default: string;
+    disabled: string;
+};
+export declare const bgClasses: {
+    disabled: string;
+    dark: string;
+    highlight: string;
+    default: string;
+};
+export declare const widthClasses: Record<WidthType | FieldLayout, string>;
+export declare const borderPseudoCoreClasses: string[];
+export declare const borderPseudoClassesByState: {
+    borderColor: {
+        dark: string;
+        default: string[];
+        disabled: string;
+        error: string[];
+        hoverWithoutFocus: string;
+    };
+    border: {
+        dark: string;
+        default: string;
+        disabled: string;
+        error: string;
+    };
+    shadow: {
+        dark: string;
+        default: string[];
+        disabled: string;
+        error: string[];
+    };
+};
+export declare const rootBasicClasses: string[];
+export declare const getHeightClasses: ({ size, multiline, }: {
+    size: Size;
+    multiline: boolean | undefined;
+}) => string;
+export declare const getWidthClasses: ({ width, layout, }: {
+    width: WidthType;
+    layout: FieldLayout;
+}) => string;
+export declare const getBackgroundColorClasses: ({ isDark, disabled, highlight, }: {
+    isDark: boolean;
+    disabled: boolean | undefined;
+    highlight: string | undefined;
+}) => string;
+export declare const getRootClassName: ({ size, width, type, layout, isDark, multiline, highlight, disabled, isError, }: Partial<Props> & {
+    isDark: boolean;
+    layout: FieldLayout;
+    isError: boolean;
+    size: Size;
+    width: WidthType;
+}) => (string | false | (string | (string | string[])[])[])[];
+//# sourceMappingURL=stylesRoot.d.ts.map

package/dist-package/src/OutlinedInput/stylesRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylesRoot.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/stylesRoot.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAEvD,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAErD,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAI9C,CAAA;AAED,eAAO,MAAM,aAAa;;;CAOhB,CAAA;AAEV,eAAO,MAAM,cAAc;;;CAG1B,CAAA;AAED,eAAO,MAAM,WAAW;;;CAGvB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;CAKrB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,GAAG,WAAW,EAAE,MAAM,CAMhE,CAAA;AAED,eAAO,MAAM,uBAAuB,UAcnC,CAAA;AAED,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;CAgCtC,CAAA;AAED,eAAO,MAAM,gBAAgB,UAU5B,CAAA;AAED,eAAO,MAAM,gBAAgB;UAIrB,IAAI;eACC,OAAO,GAAG,SAAS;YAC4C,CAAA;AAE5E,eAAO,MAAM,eAAe;WAInB,SAAS;YACR,WAAW;YAC0D,CAAA;AAE/E,eAAO,MAAM,yBAAyB;YAK5B,OAAO;cACL,OAAO,GAAG,SAAS;eAClB,MAAM,GAAG,SAAS;YAe9B,CAAA;AA6CD,eAAO,MAAM,gBAAgB;YAWnB,OAAO;YACP,WAAW;aACV,OAAO;UACV,IAAI;WACH,SAAS;6DAWjB,CAAA"}

package/dist-package/src/OutlinedInput/stylesRoot.js

@@ -0,0 +1,142 @@
+export const spacingBySize = {
+    small: 'py-1 px-[0.625rem]',
+    medium: 'p-2',
+    large: 'p-3',
+};
+export const heightClasses = {
+    singleline: {
+        small: 'h-6',
+        medium: 'h-8',
+        large: 'h-12',
+    },
+    multiline: 'h-auto',
+};
+export const fontColorClass = {
+    default: 'text-black',
+    disabled: 'text-gray-500',
+};
+export const cursorClass = {
+    default: 'cursor-[inherit]',
+    disabled: 'cursor-default',
+};
+export const bgClasses = {
+    disabled: 'bg-gray-100',
+    dark: 'bg-[#081237]',
+    highlight: 'bg-yellow-100/60',
+    default: 'bg-white',
+};
+export const widthClasses = {
+    full: 'w-full',
+    shrink: 'w-auto',
+    auto: 'w-[18.75rem]',
+    horizontal: 'w-full',
+    vertical: '',
+};
+export const borderPseudoCoreClasses = [
+    'after:content-[""]',
+    'after:inline-block',
+    'after:absolute',
+    'after:top-0',
+    'after:bottom-0',
+    'after:right-0',
+    'after:left-0',
+    'after:pointer-events-none',
+    'after:border-solid',
+    'after:rounded-sm',
+];
+export const borderPseudoClassesByState = {
+    borderColor: {
+        dark: '',
+        default: [
+            'after:border-gray-400',
+            '[&:has(input:focus)]:after:border-blue-500',
+        ],
+        disabled: 'after:border-gray-200',
+        error: [
+            'after:border-red-500',
+            '[&:has(input:focus)]:after:border-red-500',
+        ],
+        hoverWithoutFocus: 'hover:[&:not(:has(input:focus))]:after:border-gray-600',
+    },
+    border: {
+        dark: 'after:border-none',
+        default: 'after:border',
+        disabled: '',
+        error: '',
+    },
+    shadow: {
+        dark: '[&:has(input:focus)]:after:shadow-0',
+        default: [
+            '[&:has(input:focus)]:after:shadow-[0_0_0_3px]',
+            '[&:has(input:focus)]:after:shadow-blue-500/[.48]',
+        ],
+        disabled: '',
+        error: [
+            '[&:has(input:focus)]:after:shadow-[0_0_0_3px]',
+            '[&:has(input:focus)]:after:shadow-red-500/[.48]',
+        ],
+    },
+};
+export const rootBasicClasses = [
+    'relative',
+    'text-black',
+    'inline-flex',
+    'gap-y-1',
+    'gap-x-2',
+    'items-center',
+    'rounded-sm',
+    '[font-size:_unset]',
+    'hover:[&_.resetButtonDirty]:visible',
+];
+export const getHeightClasses = ({ size, multiline, }) => (multiline ? heightClasses.multiline : heightClasses.singleline[size]);
+export const getWidthClasses = ({ width, layout, }) => (layout === 'horizontal' ? widthClasses.horizontal : widthClasses[width]);
+export const getBackgroundColorClasses = ({ isDark, disabled, highlight, }) => {
+    if (disabled) {
+        return bgClasses.disabled;
+    }
+    if (isDark) {
+        return bgClasses.dark;
+    }
+    if (highlight === 'autofill') {
+        return bgClasses.highlight;
+    }
+    return bgClasses.default;
+};
+const getTextColorClass = (disabled) => disabled ? fontColorClass.disabled : fontColorClass.default;
+const getCursorClass = (disabled) => disabled ? cursorClass.disabled : cursorClass.default;
+const getClassForState = (state, { borderColor, border, shadow }) => {
+    return [
+        borderColor[state] || borderColor.default,
+        border[state] || border.default,
+        shadow[state] || shadow.default,
+    ];
+};
+const borderPseudoElement = (conditions) => {
+    const { disabled, isDark, isError } = conditions;
+    const { borderColor } = borderPseudoClassesByState;
+    const primaryState = isError
+        ? 'error'
+        : disabled
+            ? 'disabled'
+            : isDark
+                ? 'dark'
+                : 'default';
+    const hoverClass = !disabled && !isError ? borderColor.hoverWithoutFocus : '';
+    return [
+        borderPseudoCoreClasses,
+        getClassForState(primaryState, borderPseudoClassesByState),
+        hoverClass,
+    ];
+};
+export const getRootClassName = ({ size, width, type, layout, isDark, multiline, highlight, disabled, isError, }) => [
+    rootBasicClasses,
+    spacingBySize[size],
+    getHeightClasses({ size, multiline }),
+    getWidthClasses({ width, layout }),
+    getBackgroundColorClasses({ isDark, disabled, highlight }),
+    borderPseudoElement({ isDark, disabled, isError }),
+    getTextColorClass(disabled),
+    getCursorClass(disabled),
+    type === 'hidden' && 'hidden',
+];
+//# sourceMappingURL=stylesRoot.js.map

package/dist-package/src/OutlinedInput/stylesRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylesRoot.js","sourceRoot":"","sources":["../../../src/OutlinedInput/stylesRoot.ts"],"names":[],"mappings":"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"}

package/dist-package/src/OutlinedInput/types.d.ts

@@ -0,0 +1,62 @@
+import type { ChangeEventHandler, ReactType, ReactNode, InputHTMLAttributes, MouseEvent } from 'react';
+import type { SizeType, BaseProps } from '@toptal/picasso-shared';
+import type { InputBaseComponentProps } from '@material-ui/core/InputBase';
+export declare type WidthType = 'full' | 'shrink' | 'auto';
+export declare type Size = SizeType<'small' | 'medium' | 'large'>;
+export declare type ValueType = (string | number | boolean | object)[] | string | number | boolean | object;
+export declare type Status = 'error' | 'success' | 'default';
+export declare type BaseInputProps = InputBaseComponentProps & {
+    variant?: 'dark' | 'light';
+};
+export interface InputProps extends React.HTMLAttributes<HTMLInputElement>, BaseProps {
+    size?: number | 'small' | 'medium' | 'large';
+    multiple?: boolean | undefined;
+}
+export interface Props extends BaseProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'size' | 'color'> {
+    /** Classes for input and root */
+    classes?: {
+        input?: string;
+        root?: string;
+    };
+    /** Width of the component */
+    width?: WidthType;
+    inputComponent?: ReactType<InputBaseComponentProps>;
+    inputProps?: BaseInputProps;
+    defaultValue?: ValueType;
+    value?: ValueType;
+    /** Whether `Input` should be rendered as `TextArea` or not */
+    multiline?: boolean;
+    /** If true, `TextArea` would be resizable vertical */
+    multilineResizable?: boolean;
+    /** If true, the input element will be focused during the first mount */
+    autoFocus?: boolean;
+    /** Specify rows amount for `TextArea` */
+    rows?: string | number;
+    rowsMax?: string | number;
+    /** Type attribute of the Input element. It should be a valid HTML5 input type */
+    type?: string;
+    /**
+     * @deprecated [FX-4715] Use the `status` prop instead to both support success and error states
+     * Indicate whether input is in error state
+     */
+    error?: boolean;
+    /** Indicate input status */
+    status?: Status;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** Component size */
+    size?: Size;
+    /** Whether to render reset icon when there is a value in the input */
+    enableReset?: boolean;
+    /** Callback invoked when reset button was clicked */
+    onResetClick?: (event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => void;
+    /** Ref of the input element */
+    inputRef?: React.Ref<HTMLInputElement>;
+    testIds?: {
+        resetButton?: string;
+        validIcon?: string;
+    };
+    highlight?: 'autofill';
+}
+//# sourceMappingURL=types.d.ts.map

package/dist-package/src/OutlinedInput/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,UAAU,EACX,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAEjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AAE1E,oBAAY,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;AAElD,oBAAY,IAAI,GAAG,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;AAEzD,oBAAY,SAAS,GACjB,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,EAAE,GACtC,MAAM,GACN,MAAM,GACN,OAAO,GACP,MAAM,CAAA;AAEV,oBAAY,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAEpD,oBAAY,cAAc,GAAG,uBAAuB,GAAG;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC3B,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,SAAS;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC5C,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC/B;AAED,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,IAAI,CACF,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,OAAO,CAC5C;IACH,iCAAiC;IACjC,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3C,6BAA6B;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,cAAc,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAA;IACnD,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sDAAsD;IACtD,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEtB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;IAC/C,qBAAqB;IACrB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qDAAqD;IACrD,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KACrD,IAAI,CAAA;IACT,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;IACtC,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IACD,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB"}

package/dist-package/src/OutlinedInput/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist-package/src/OutlinedInput/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/OutlinedInput/types.ts"],"names":[],"mappings":""}

package/dist-package/src/OutlinedInput/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getRows: (rows: number | string | undefined) => number | undefined;
+//# sourceMappingURL=utils.d.ts.map

package/dist-package/src/OutlinedInput/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,SAAU,MAAM,GAAG,MAAM,GAAG,SAAS,uBACI,CAAA"}

package/dist-package/src/OutlinedInput/utils.js

@@ -0,0 +1,2 @@
+export const getRows = (rows) => typeof Number(rows) === 'number' ? Number(rows) : undefined;
+//# sourceMappingURL=utils.js.map