@toptal/picasso-input 2.0.8 → 3.0.1

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

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

package/dist-package/src/Input/Input.js

@@ -10,15 +10,11 @@ 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 { useHasMultilineCounter } from '@toptal/picasso-shared';
 import { OutlinedInput } from '@toptal/picasso-outlined-input';
 import { disableUnsupportedProps, usePropDeprecationWarning, } from '@toptal/picasso-utils';
 import { InputLimitAdornment, InputIconAdornment, InputValidIconAdornment, } from '@toptal/picasso-input-adornment';
 import { Container } from '@toptal/picasso-container';
-import styles from './styles';
-const useStyles = makeStyles(styles, { name: 'PicassoInput' });
 const hasRemainingCounter = ({ counter, limit, }) => Boolean(counter === 'remaining' && limit);
 const hasEnteredCounter = ({ counter }) => counter === 'entered';
 const hasCounter = ({ counter, limit }) => hasRemainingCounter({ counter, limit }) || hasEnteredCounter({ counter });
@@ -83,18 +79,10 @@ export const Input = forwardRef(function Input(props, ref) {
         description: 'Use the `status` prop instead. `error` is deprecated and will be removed in the next major release.',
     });
     const charsLength = value ? value.length : 0;
-    const classes = useStyles();
     const showCounter = !!charsLength && hasCounter({ counter, limit });
     useHasMultilineCounter(name, showCounter && multiline, setHasMultilineCounter);
     return (React.createElement(React.Fragment, null,
-        React.createElement(OutlinedInput, { ref: outlineRef, inputRef: ref, className: className, style: style, highlight: highlight, classes: {
-                root: cx(classes.root, {
-                    [classes.rootMultiline]: multiline,
-                }),
-                input: cx(classes.input, {
-                    [classes.inputMultilineResizable]: multiline && multilineResizable,
-                }),
-            }, id: id, name: name, defaultValue: defaultValue, value: value, placeholder: placeholder, status: error ? 'error' : status, disabled: disabled, multiline: multiline, autoFocus: autoFocus, rows: rows, rowsMax: rowsMax, type: type, width: width, size: size, onClick: onClick, 
+        React.createElement(OutlinedInput, { ref: outlineRef, inputRef: ref, className: className, style: style, highlight: highlight, multiline: multiline, multilineResizable: multilineResizable, id: id, name: name, defaultValue: defaultValue, value: value, placeholder: placeholder, status: error ? 'error' : status, disabled: disabled, autoFocus: autoFocus, rows: rows, rowsMax: rowsMax, type: type, width: width, size: size, onClick: onClick, 
             // html attributes
             inputProps: Object.assign(Object.assign({}, rest), inputProps), startAdornment: startAdornment || (React.createElement(StartAdornment, { icon: icon, iconPosition: iconPosition, disabled: disabled })), endAdornment: endAdornment || (React.createElement(EndAdornment, { icon: icon, iconPosition: iconPosition, disabled: disabled, limit: limit, charsLength: charsLength, multiline: multiline, counter: counter, status: status, testIds: testIds, showCounter: showCounter })), onChange: onChange, enableReset: enableReset, onResetClick: onResetClick, testIds: testIds }, children),
         hasMultilineAdornment({

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-input",
-  "version": "2.0.8",
+  "version": "3.0.1",
   "description": "Toptal UI components library - Input",
   "publishConfig": {
     "access": "public"
@@ -22,22 +22,20 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-container": "1.0.3",
-    "@toptal/picasso-form": "3.0.7",
-    "@toptal/picasso-icons": "1.5.0",
-    "@toptal/picasso-input-adornment": "1.0.8",
-    "@toptal/picasso-outlined-input": "1.1.5",
+    "@toptal/picasso-container": "2.0.0",
+    "@toptal/picasso-form": "4.0.1",
+    "@toptal/picasso-icons": "1.6.0",
+    "@toptal/picasso-input-adornment": "2.0.1",
+    "@toptal/picasso-outlined-input": "2.0.1",
     "@toptal/picasso-shared": "15.0.0",
-    "@toptal/picasso-utils": "1.0.3",
-    "classnames": "^2.5.1"
+    "@toptal/picasso-utils": "1.0.3"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
-    "@toptal/picasso-provider": "*",
+    "@toptal/picasso-tailwind": ">=2.7",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
@@ -45,7 +43,6 @@
     "./styles": "./dist-package/src/styles.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.1",
     "@toptal/picasso-test-utils": "1.1.1"
   },
   "files": [

package/src/Input/Input.tsx

@@ -6,9 +6,6 @@ import type {
   MouseEvent,
 } from 'react'
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
 import { useHasMultilineCounter } from '@toptal/picasso-shared'
 import { OutlinedInput } from '@toptal/picasso-outlined-input'
@@ -29,8 +26,6 @@ import type {
 } from '@toptal/picasso-input-adornment'
 import type { BaseInputProps, Status } from '@toptal/picasso-outlined-input'
 
-import styles from './styles'
-
 export interface Props
   extends BaseProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -119,8 +114,6 @@ type EndAdornmentProps = Pick<
   | 'testIds'
 > & { charsLength?: number; showCounter: boolean }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoInput' })
-
 const hasRemainingCounter = ({
   counter,
   limit,
@@ -293,8 +286,6 @@ export const Input = forwardRef<HTMLInputElement, Props>(function Input(
 
   const charsLength = value ? value.length : 0
 
-  const classes = useStyles()
-
   const showCounter = !!charsLength && hasCounter({ counter, limit })
 
   useHasMultilineCounter(name, showCounter && multiline, setHasMultilineCounter)
@@ -307,14 +298,8 @@ export const Input = forwardRef<HTMLInputElement, Props>(function Input(
         className={className}
         style={style}
         highlight={highlight}
-        classes={{
-          root: cx(classes.root, {
-            [classes.rootMultiline]: multiline,
-          }),
-          input: cx(classes.input, {
-            [classes.inputMultilineResizable]: multiline && multilineResizable,
-          }),
-        }}
+        multiline={multiline}
+        multilineResizable={multilineResizable}
         id={id}
         name={name}
         defaultValue={defaultValue}
@@ -322,7 +307,6 @@ export const Input = forwardRef<HTMLInputElement, Props>(function Input(
         placeholder={placeholder}
         status={error ? 'error' : status}
         disabled={disabled}
-        multiline={multiline}
         autoFocus={autoFocus}
         rows={rows}
         rowsMax={rowsMax}

package/src/Input/__snapshots__/test.tsx.snap

@@ -6,13 +6,13 @@ exports[`Input renders icon in the beginning 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
+      class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(input:focus)]:after:border-blue after:border [&:has(input:focus)]:after:shadow-[0_0_0_3px] [&:has(input:focus)]:after:shadow-blue hover:[&:not(:has(input:focus))]:after:border-gray text-black cursor-[inherit]"
     >
       <div
-        class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-disablePointerEvents"
+        class="text-graphite h-auto flex items-center whitespace-nowrap max-h pointer-events"
       >
         <svg
-          class="PicassoSvgSearch16-root PicassoInputIconAdornment-icon"
+          class="PicassoSvgSearch16-root grow shrink basis-0"
           style="min-width: 16px; min-height: 16px;"
           viewBox="0 0 16 16"
         >
@@ -24,24 +24,10 @@ exports[`Input renders icon in the beginning 1`] = `
       <input
         aria-invalid="false"
         autocomplete="none"
-        class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
+        class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
         type="text"
         value=""
       />
-      <fieldset
-        aria-hidden="true"
-        class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline"
-        style="padding-left: 8px;"
-      >
-        <legend
-          class="PrivateNotchedOutline-legend"
-          style="width: 0.01px;"
-        >
-          <span>
-            ​
-          </span>
-        </legend>
-      </fieldset>
     </div>
   </div>
 </div>
@@ -53,13 +39,13 @@ exports[`Input renders icon in the end 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
+      class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(input:focus)]:after:border-blue after:border [&:has(input:focus)]:after:shadow-[0_0_0_3px] [&:has(input:focus)]:after:shadow-blue hover:[&:not(:has(input:focus))]:after:border-gray text-black cursor-[inherit]"
     >
       <div
-        class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-disablePointerEvents"
+        class="text-graphite h-auto flex items-center whitespace-nowrap max-h pointer-events"
       >
         <svg
-          class="PicassoSvgSearch16-root PicassoInputIconAdornment-icon"
+          class="PicassoSvgSearch16-root grow shrink basis-0"
           style="min-width: 16px; min-height: 16px;"
           viewBox="0 0 16 16"
         >
@@ -71,24 +57,10 @@ exports[`Input renders icon in the end 1`] = `
       <input
         aria-invalid="false"
         autocomplete="none"
-        class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
+        class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
         type="text"
         value=""
       />
-      <fieldset
-        aria-hidden="true"
-        class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline"
-        style="padding-left: 8px;"
-      >
-        <legend
-          class="PrivateNotchedOutline-legend"
-          style="width: 0.01px;"
-        >
-          <span>
-            ​
-          </span>
-        </legend>
-      </fieldset>
     </div>
   </div>
 </div>
@@ -100,38 +72,24 @@ exports[`Input should show manual resize handler 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoInput-rootMultiline PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium MuiInputBase-multiline MuiOutlinedInput-multiline MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
+      class="base-Input base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible p-2 h-auto w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(input:focus)]:after:border-blue after:border [&:has(input:focus)]:after:shadow-[0_0_0_3px] [&:has(input:focus)]:after:shadow-blue hover:[&:not(:has(input:focus))]:after:border-gray text-black cursor-[inherit]"
     >
       <textarea
         aria-invalid="false"
         autocomplete="none"
-        class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoInput-inputMultilineResizable PicassoOutlinedInput-inputMedium MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline PicassoOutlinedInput-inputMultiline MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
-        rows="4"
+        class="base-Input base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 resize-y"
         style="height: 0px; overflow: hidden;"
+        type="text"
       >
         Some value
       </textarea>
       <textarea
         aria-hidden="true"
-        class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoInput-inputMultilineResizable PicassoOutlinedInput-inputMedium MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline PicassoOutlinedInput-inputMultiline MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
+        class="base-Input base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 resize-y"
         readonly=""
-        style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); width: 100%;"
+        style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); padding-top: 0px; padding-bottom: 0px;"
         tabindex="-1"
       />
-      <fieldset
-        aria-hidden="true"
-        class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline"
-        style="padding-left: 8px;"
-      >
-        <legend
-          class="PrivateNotchedOutline-legend"
-          style="width: 0.01px;"
-        >
-          <span>
-            ​
-          </span>
-        </legend>
-      </fieldset>
     </div>
   </div>
 </div>
@@ -143,17 +101,17 @@ exports[`Input should show reset button 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
+      class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(input:focus)]:after:border-blue after:border [&:has(input:focus)]:after:shadow-[0_0_0_3px] [&:has(input:focus)]:after:shadow-blue hover:[&:not(:has(input:focus))]:after:border-gray text-black cursor-[inherit]"
     >
       <input
         aria-invalid="false"
         autocomplete="none"
-        class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
+        class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
         type="text"
         value="Some value"
       />
       <div
-        class="MuiInputAdornment-root PicassoInputAdornment-root PicassoOutlinedInput-resetButton PicassoOutlinedInput-resetButtonDirty MuiInputAdornment-positionEnd"
+        class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto flex-grow flex-shrink basis-auto invisible peer-focus:visible peer-hover:visible"
         data-testid="reset-adornment"
       >
         <button
@@ -165,7 +123,7 @@ exports[`Input should show reset button 1`] = `
           type="button"
         >
           <span
-            class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+            class="items-center inline-flex font-semibold whitespace-nowrap text-button"
           >
             <svg
               class="PicassoSvgCloseMinor16-root text-[1.2em] flex-1"
@@ -179,20 +137,6 @@ exports[`Input should show reset button 1`] = `
           </span>
         </button>
       </div>
-      <fieldset
-        aria-hidden="true"
-        class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline"
-        style="padding-left: 8px;"
-      >
-        <legend
-          class="PrivateNotchedOutline-legend"
-          style="width: 0.01px;"
-        >
-          <span>
-            ​
-          </span>
-        </legend>
-      </fieldset>
     </div>
   </div>
 </div>
@@ -204,39 +148,25 @@ exports[`Input shows counter for multiline input 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoInput-rootMultiline PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium MuiInputBase-multiline MuiOutlinedInput-multiline MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
+      class="base-Input base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible p-2 h-auto w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(input:focus)]:after:border-blue after:border [&:has(input:focus)]:after:shadow-[0_0_0_3px] [&:has(input:focus)]:after:shadow-blue hover:[&:not(:has(input:focus))]:after:border-gray text-black cursor-[inherit]"
     >
       <textarea
         aria-invalid="false"
         autocomplete="none"
-        class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline PicassoOutlinedInput-inputMultiline MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
-        rows="4"
+        class="base-Input base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
         style="height: 0px; overflow: hidden;"
+        type="text"
       />
       <textarea
         aria-hidden="true"
-        class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline PicassoOutlinedInput-inputMultiline MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
+        class="base-Input base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
         readonly=""
-        style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); width: 100%;"
+        style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); padding-top: 0px; padding-bottom: 0px;"
         tabindex="-1"
       />
-      <fieldset
-        aria-hidden="true"
-        class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline"
-        style="padding-left: 8px;"
-      >
-        <legend
-          class="PrivateNotchedOutline-legend"
-          style="width: 0.01px;"
-        >
-          <span>
-            ​
-          </span>
-        </legend>
-      </fieldset>
     </div>
     <div
-      class="PicassoContainer-flex"
+      class="flex"
     />
   </div>
 </div>
@@ -248,29 +178,15 @@ exports[`Input shows counter for regular input 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
+      class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(input:focus)]:after:border-blue after:border [&:has(input:focus)]:after:shadow-[0_0_0_3px] [&:has(input:focus)]:after:shadow-blue hover:[&:not(:has(input:focus))]:after:border-gray text-black cursor-[inherit]"
     >
       <input
         aria-invalid="false"
         autocomplete="none"
-        class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
+        class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
         type="text"
         value=""
       />
-      <fieldset
-        aria-hidden="true"
-        class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline"
-        style="padding-left: 8px;"
-      >
-        <legend
-          class="PrivateNotchedOutline-legend"
-          style="width: 0.01px;"
-        >
-          <span>
-            ​
-          </span>
-        </legend>
-      </fieldset>
     </div>
   </div>
 </div>
@@ -278,7 +194,7 @@ exports[`Input shows counter for regular input 1`] = `
 
 exports[`Input shows excess chars for multiline input with exceeded limit 1`] = `
 <div
-  class="PicassoContainer-flex PicassoInputMultilineAdornment-root PicassoInputMultilineAdornment-error"
+  class="flex text-[0.625rem] leading-[1] mt-1 mr-[0.125rem] text-red"
   data-testid="limit-adornment-multiline-label"
 >
   <span>
@@ -297,7 +213,7 @@ exports[`Input shows excess chars for multiline input with exceeded limit 1`] =
 
 exports[`Input shows remaining chars for for multiline input with limit 1`] = `
 <div
-  class="PicassoContainer-flex PicassoInputMultilineAdornment-root PicassoInputMultilineAdornment-error"
+  class="flex text-[0.625rem] leading-[1] mt-1 mr-[0.125rem] text-red"
   data-testid="limit-adornment-multiline-label"
 >
   <span>

package/src/Input/story/MultilineExpand.example.tsx

@@ -20,7 +20,7 @@ const Example = () => {
       </Container>
       <Container padded={SPACING_4}>
         <Typography variant='heading' size='small'>
-          With auto-expand (up to 5 rows) and manual resize
+          With auto-expand (up to 5 rows) and manual resize (not limited)
         </Typography>
         <Container right={SPACING_4}>
           <Input

package/dist-package/src/Input/styles.d.ts

@@ -1,6 +0,0 @@
-import '@toptal/picasso-outlined-input/styles';
-import '@toptal/picasso-input-adornment/styles';
-import '../InputBase/styles';
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root" | "rootMultiline" | "inputMultilineResizable">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/Input/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Input/styles.ts"],"names":[],"mappings":"AACA,OAAO,uCAAuC,CAAA;AAC9C,OAAO,wCAAwC,CAAA;AAE/C,OAAO,qBAAqB,CAAA;;AAE5B,wBAWI"}

package/dist-package/src/Input/styles.js

@@ -1,16 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import '@toptal/picasso-outlined-input/styles';
-import '@toptal/picasso-input-adornment/styles';
-import '../InputBase/styles';
-export default () => createStyles({
-    root: {
-        cursor: 'text',
-    },
-    rootMultiline: {
-        height: 'auto',
-    },
-    inputMultilineResizable: {
-        resize: 'vertical',
-    },
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/Input/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,uCAAuC,CAAA;AAC9C,OAAO,wCAAwC,CAAA;AAE/C,OAAO,qBAAqB,CAAA;AAE5B,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;IACD,aAAa,EAAE;QACb,MAAM,EAAE,MAAM;KACf;IACD,uBAAuB,EAAE;QACvB,MAAM,EAAE,UAAU;KACnB;CACF,CAAC,CAAA"}

package/dist-package/src/InputBase/styles.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/InputBase/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/InputBase/styles.ts"],"names":[],"mappings":""}

package/dist-package/src/InputBase/styles.js

@@ -1,18 +0,0 @@
-import { PicassoProvider } from '@toptal/picasso-provider';
-PicassoProvider.override(({ typography, palette }) => ({
-    MuiInputBase: {
-        root: {
-            fontSize: 'unset',
-            backgroundColor: palette.common.white,
-        },
-        input: {
-            fontSize: typography.inputSize,
-            lineHeight: '1.2em',
-        },
-        error: {
-            color: palette.red.main,
-            backgroundColor: palette.red.lighter,
-        },
-    },
-}));
-//# sourceMappingURL=styles.js.map

package/dist-package/src/InputBase/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/InputBase/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CAAC;IAC5D,YAAY,EAAE;QACZ,IAAI,EAAE;YACJ,QAAQ,EAAE,OAAO;YACjB,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SACtC;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU,CAAC,SAAS;YAC9B,UAAU,EAAE,OAAO;SACpB;QACD,KAAK,EAAE;YACL,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;YACvB,eAAe,EAAE,OAAO,CAAC,GAAG,CAAC,OAAO;SACrC;KACF;CACF,CAAC,CAAC,CAAA"}

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

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=styles.d.ts.map

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

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

package/dist-package/src/styles.js

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

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

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

package/src/Input/styles.ts

@@ -1,18 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-import '@toptal/picasso-outlined-input/styles'
-import '@toptal/picasso-input-adornment/styles'
-
-import '../InputBase/styles'
-
-export default () =>
-  createStyles({
-    root: {
-      cursor: 'text',
-    },
-    rootMultiline: {
-      height: 'auto',
-    },
-    inputMultilineResizable: {
-      resize: 'vertical',
-    },
-  })

package/src/InputBase/styles.ts

@@ -1,19 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { PicassoProvider } from '@toptal/picasso-provider'
-
-PicassoProvider.override(({ typography, palette }: Theme) => ({
-  MuiInputBase: {
-    root: {
-      fontSize: 'unset',
-      backgroundColor: palette.common.white,
-    },
-    input: {
-      fontSize: typography.inputSize,
-      lineHeight: '1.2em',
-    },
-    error: {
-      color: palette.red.main,
-      backgroundColor: palette.red.lighter,
-    },
-  },
-}))

package/src/styles.ts

@@ -1,2 +0,0 @@
-import {} from './Input/styles'
-import {} from './InputBase/styles'