@toptal/picasso-number-input 1.0.26 → 2.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAA6B,MAAM,OAAO,CAAA;AAGjD,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAO1E,OAAO,KAAK,EAAE,KAAK,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAKjF,MAAM,WAAW,KACf,SAAQ,IAAI,CACR,iBAAiB,CAAC,kBAAkB,CAAC,EACrC,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,CAC/C,EACD,SAAS;IACX,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,uCAAuC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC/D,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAMD,eAAO,MAAM,WAAW,gFAqFvB,CAAA;AAeD,eAAe,WAAW,CAAA"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAA6B,MAAM,OAAO,CAAA;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAO1E,OAAO,KAAK,EAAE,KAAK,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAKjF,MAAM,WAAW,KACf,SAAQ,IAAI,CACR,iBAAiB,CAAC,kBAAkB,CAAC,EACrC,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,CAC/C,EACD,SAAS;IACX,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,uCAAuC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC/D,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAED,eAAO,MAAM,WAAW,gFAyFvB,CAAA;AAeD,eAAe,WAAW,CAAA"}

package/dist-package/src/NumberInput/NumberInput.js

@@ -10,15 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef, useRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { OutlinedInput } from '@toptal/picasso-outlined-input';
 import { InputAdornment } from '@toptal/picasso-input-adornment';
 import { useCombinedRefs, usePropDeprecationWarning, } from '@toptal/picasso-utils';
-import styles from './styles';
+import { twJoin } from '@toptal/picasso-tailwind-merge';
 import { NumberInputEndAdornment } from '../NumberInputEndAdornment';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoNumberInput',
-});
 export const NumberInput = forwardRef(function NumberInput(props, ref) {
     const { step = 1, min = -Infinity, max = Infinity, hideControls, value, onChange, disabled, error, status, onResetClick, enableReset, width, icon, size, testIds, highlight } = props, rest = __rest(props
     // TODO: [FX-4715]
@@ -30,13 +26,16 @@ export const NumberInput = forwardRef(function NumberInput(props, ref) {
         componentName: 'NumberInput',
         description: 'Use the `status` prop instead. `error` is deprecated and will be removed in the next major release.',
     });
-    const classes = useStyles(props);
     const inputRef = useCombinedRefs(ref, useRef(null));
     const endAdornment = hideControls ? null : (React.createElement(NumberInputEndAdornment, { step: step, min: min, max: max, value: value, disabled: disabled, size: size, inputRef: inputRef }));
     const startAdornment = icon ? (React.createElement(InputAdornment, { position: 'start', disablePointerEvents: true }, icon)) : null;
     return (React.createElement(OutlinedInput, { classes: {
-            root: classes.root,
-            input: classes.input,
+            root: 'pr-0 cursor-text',
+            input: twJoin(
+            // required to remove arrows in WebKit based browsers
+            '[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 ', '[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 ', 
+            // required to remove arrows in Firefox
+            '[-moz-appearance:textfield]'),
         }, highlight: highlight, inputProps: Object.assign(Object.assign({}, rest), { step,
             min,
             max }), width: width, onResetClick: onResetClick, enableReset: enableReset, status: error ? 'error' : status, inputRef: inputRef, type: 'number', value: value, disabled: disabled, onChange: onChange, endAdornment: endAdornment, startAdornment: startAdornment, size: size, testIds: testIds }));

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

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

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

@@ -1,5 +1,6 @@
 import type { RefObject } from 'react';
 import type { BaseProps, SizeType } from '@toptal/picasso-shared';
+export declare type Size = SizeType<'small' | 'medium' | 'large'>;
 export interface Props extends BaseProps {
     /** Value of the `input` element. */
     value?: string | number;
@@ -12,7 +13,7 @@ export interface Props extends BaseProps {
     /** Indicates whether component is in disabled state */
     disabled?: boolean;
     /** Component size */
-    size?: SizeType<'small' | 'medium' | 'large'>;
+    size?: Size;
     /** Ref of the input element */
     inputRef: RefObject<HTMLInputElement>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInputEndAdornment.d.ts","sourceRoot":"","sources":["../../../src/NumberInputEndAdornment/NumberInputEndAdornment.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAejE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IAC7C,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;CACtC;AAiBD,eAAO,MAAM,uBAAuB;YAAW,KAAK;;;;;;;;;;CA2GnD,CAAA;AAaD,eAAe,uBAAuB,CAAA"}
+{"version":3,"file":"NumberInputEndAdornment.d.ts","sourceRoot":"","sources":["../../../src/NumberInputEndAdornment/NumberInputEndAdornment.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAYjE,oBAAY,IAAI,GAAG,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;AAEzD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB;IACrB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;CACtC;AAmBD,eAAO,MAAM,uBAAuB;YAAW,KAAK;;;;;;;;;;CAyHnD,CAAA;AAaD,eAAe,uBAAuB,CAAA"}

package/dist-package/src/NumberInputEndAdornment/NumberInputEndAdornment.js

@@ -1,24 +1,22 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { isBrowser } from '@toptal/picasso-shared';
-import { ButtonBase } from '@material-ui/core';
-import cx from 'classnames';
 import { InputAdornment } from '@toptal/picasso-input-adornment';
 import { Container } from '@toptal/picasso-container';
 import { ArrowDownMinor16, ArrowUpMinor16, ArrowDownMinor24, ArrowUpMinor24, } from '@toptal/picasso-icons';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'NumberInputEndAdornment',
-});
+import { twJoin } from '@toptal/picasso-tailwind-merge';
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const nativeInputValueSetter = isBrowser()
     ? Object.getOwnPropertyDescriptor(
     // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
     window.HTMLInputElement.prototype, 'value').set
     : undefined;
+const classBySize = {
+    small: 'h-3 w-[1.375rem]',
+    medium: 'h-4 w-[1.625rem]',
+    large: 'h-6 w-[2.125rem]',
+};
 export const NumberInputEndAdornment = (props) => {
     const { step = 1, min = -Infinity, max = Infinity, value, disabled, size = 'medium', inputRef, } = props;
-    const classes = useStyles(props);
     const normalizedStep = Number(step);
     const normalizedValue = Number(value);
     const normalizedMin = Number(min);
@@ -42,7 +40,7 @@ export const NumberInputEndAdornment = (props) => {
             return;
         }
         let nextValue = normalizedValue + normalizedStep;
-        if (nextValue <= max) {
+        if (nextValue <= Number(max)) {
             if (normalizedValue < normalizedMin + normalizedStep) {
                 nextValue = normalizedMin + normalizedStep;
             }
@@ -58,7 +56,7 @@ export const NumberInputEndAdornment = (props) => {
             return;
         }
         let nextValue = normalizedValue - normalizedStep;
-        if (nextValue >= min) {
+        if (nextValue >= Number(min)) {
             if (normalizedValue > normalizedMax - normalizedStep) {
                 nextValue = normalizedMax - normalizedStep;
             }
@@ -69,17 +67,32 @@ export const NumberInputEndAdornment = (props) => {
             fireEvent(nextValue);
         }
     };
-    const rootClassName = cx({
-        [classes.disabled]: disabled,
-    }, classes[size], classes.root);
+    const rootClassName = twJoin(`flex relative items-center justify-center align-middle 
+
+    p-0 bottom-0 cursor-pointer
+
+    text-graphite-700 decoration-graphite-700 bg-inherit bg-transparent
+    
+    border-t-0 border-b-0 border-l border-r border-l-solid border-r-solid 
+    border-l-gray-400 border-r-transparent
+    
+    hover:bg-gray-400 hover:border-gray-400
+
+    [&+&]:border-t [&+&]:border-solid 
+    [&+&]:border-t-gray-400 
+
+    active:[&+&]:border-t active:[&+&]:border-t-solid 
+    active:[&+&]:border-gray-500
+
+    active:bg-gray-500 active:border-t-gray-500 
+
+    [&:first-child]:rounded-tr-sm [&:last-child]:rounded-br-sm 
+
+    transition-[color,_border,_background] ease-out duration-350`, classBySize[size], disabled && 'opacity-[0.48]');
     return (React.createElement(InputAdornment, { position: 'end' },
         React.createElement(Container, { flex: true, direction: 'column', inline: true },
-            React.createElement(ButtonBase, { disabled: disabled, classes: {
-                    root: rootClassName,
-                }, onClick: handleUpClick }, size === 'large' ? React.createElement(ArrowUpMinor24, null) : React.createElement(ArrowUpMinor16, null)),
-            React.createElement(ButtonBase, { disabled: disabled, classes: {
-                    root: rootClassName,
-                }, onClick: handleDownClick }, size === 'large' ? React.createElement(ArrowDownMinor24, null) : React.createElement(ArrowDownMinor16, null)))));
+            React.createElement("button", { disabled: disabled, className: rootClassName, onClick: handleUpClick }, size === 'large' ? React.createElement(ArrowUpMinor24, null) : React.createElement(ArrowUpMinor16, null)),
+            React.createElement("button", { disabled: disabled, className: rootClassName, onClick: handleDownClick }, size === 'large' ? React.createElement(ArrowDownMinor24, null) : React.createElement(ArrowDownMinor16, null)))));
 };
 NumberInputEndAdornment.defaultProps = {
     min: -Infinity,

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-number-input",
-  "version": "1.0.26",
+  "version": "2.0.0",
   "description": "Toptal UI components library - NumberInput",
   "publishConfig": {
     "access": "public"
@@ -22,27 +22,28 @@
   },
   "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-container": "2.0.0",
+    "@toptal/picasso-form": "4.0.0",
     "@toptal/picasso-icons": "1.5.0",
-    "@toptal/picasso-input-adornment": "1.0.8",
-    "@toptal/picasso-outlined-input": "1.1.5",
+    "@toptal/picasso-input-adornment": "2.0.0",
+    "@toptal/picasso-outlined-input": "2.0.0",
     "@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-tailwind-merge": "^1.0.1",
+    "@toptal/picasso-tailwind": ">=2.7",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
+    "@toptal/picasso-tailwind-merge": "1.2.0",
     "@toptal/picasso-test-utils": "1.1.1"
   },
   "files": [

package/src/NumberInput/NumberInput.tsx

@@ -1,7 +1,5 @@
 import type { ReactNode } from 'react'
 import React, { forwardRef, useRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps, OmitInternalProps } from '@toptal/picasso-shared'
 import { OutlinedInput } from '@toptal/picasso-outlined-input'
 import { InputAdornment } from '@toptal/picasso-input-adornment'
@@ -10,8 +8,8 @@ import {
   usePropDeprecationWarning,
 } from '@toptal/picasso-utils'
 import type { Props as OutlinedInputProps } from '@toptal/picasso-outlined-input'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
 import { NumberInputEndAdornment } from '../NumberInputEndAdornment'
 
 export interface Props
@@ -39,10 +37,6 @@ export interface Props
   highlight?: 'autofill'
 }
 
-const useStyles = makeStyles<Theme, Props>(styles, {
-  name: 'PicassoNumberInput',
-})
-
 export const NumberInput = forwardRef<HTMLInputElement, Props>(
   function NumberInput(props, ref) {
     const {
@@ -74,8 +68,6 @@ export const NumberInput = forwardRef<HTMLInputElement, Props>(
         'Use the `status` prop instead. `error` is deprecated and will be removed in the next major release.',
     })
 
-    const classes = useStyles(props)
-
     const inputRef = useCombinedRefs<HTMLInputElement>(
       ref,
       useRef<HTMLInputElement>(null)
@@ -102,8 +94,14 @@ export const NumberInput = forwardRef<HTMLInputElement, Props>(
     return (
       <OutlinedInput
         classes={{
-          root: classes.root,
-          input: classes.input,
+          root: 'pr-0 cursor-text',
+          input: twJoin(
+            // required to remove arrows in WebKit based browsers
+            '[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 ',
+            '[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 ',
+            // required to remove arrows in Firefox
+            '[-moz-appearance:textfield]'
+          ),
         }}
         highlight={highlight}
         inputProps={{

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

@@ -5,11 +5,11 @@ exports[`NumberInput renders 1`] = `
   class="Picasso-root"
 >
   <div
-    class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoNumberInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
+    class="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 pr-0 cursor-text"
   >
     <input
       aria-invalid="false"
-      class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoNumberInput-input PicassoOutlinedInput-inputMedium 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 [&::-webkit-outer-spin-button]:appearance [&::-webkit-outer-spin-button]:m [&::-webkit-inner-spin-button]:appearance [&::-webkit-inner-spin-button]:m [-moz"
       max="100"
       min="-100"
       step="5"
@@ -17,15 +17,13 @@ exports[`NumberInput renders 1`] = `
       value="10"
     />
     <div
-      class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-positionEnd"
+      class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto flex-grow flex-shrink basis-auto"
     >
       <div
-        class="PicassoContainer-flex PicassoContainer-inline PicassoContainer-column"
+        class="inline-flex flex-col"
       >
         <button
-          class="MuiButtonBase-root NumberInputEndAdornment-medium NumberInputEndAdornment-root"
-          tabindex="0"
-          type="button"
+          class="flex relative items-center justify-center align-middle p-0 bottom-0 cursor-pointer text-graphite decoration-graphite bg-inherit bg-transparent border-t border-b border-l border-r border-l border-r border-l-gray border-r hover:bg-gray hover:border-gray [&+&]:border-t [&+&]:border-solid [&+&]:border-t-gray active:[&+&]:border-t active:[&+&]:border-t active:[&+&]:border-gray active:bg-gray active:border-t-gray [&:first-child]:rounded-tr [&:last-child]:rounded-br transition-[color,_border,_background] ease-out duration-350 h-4 w-[1.625rem]"
         >
           <svg
             class="PicassoSvgArrowUpMinor16-root"
@@ -38,9 +36,7 @@ exports[`NumberInput renders 1`] = `
           </svg>
         </button>
         <button
-          class="MuiButtonBase-root NumberInputEndAdornment-medium NumberInputEndAdornment-root"
-          tabindex="0"
-          type="button"
+          class="flex relative items-center justify-center align-middle p-0 bottom-0 cursor-pointer text-graphite decoration-graphite bg-inherit bg-transparent border-t border-b border-l border-r border-l border-r border-l-gray border-r hover:bg-gray hover:border-gray [&+&]:border-t [&+&]:border-solid [&+&]:border-t-gray active:[&+&]:border-t active:[&+&]:border-t active:[&+&]:border-gray active:bg-gray active:border-t-gray [&:first-child]:rounded-tr [&:last-child]:rounded-br transition-[color,_border,_background] ease-out duration-350 h-4 w-[1.625rem]"
         >
           <svg
             class="PicassoSvgArrowDownMinor16-root"
@@ -54,20 +50,6 @@ exports[`NumberInput renders 1`] = `
         </button>
       </div>
     </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>
 `;

package/src/NumberInputEndAdornment/NumberInputEndAdornment.tsx

@@ -1,12 +1,8 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import type { RefObject } from 'react'
 import React from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
 import { isBrowser } from '@toptal/picasso-shared'
-import { ButtonBase } from '@material-ui/core'
-import cx from 'classnames'
 import { InputAdornment } from '@toptal/picasso-input-adornment'
 import { Container } from '@toptal/picasso-container'
 import {
@@ -15,8 +11,9 @@ import {
   ArrowDownMinor24,
   ArrowUpMinor24,
 } from '@toptal/picasso-icons'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
+export type Size = SizeType<'small' | 'medium' | 'large'>
 
 export interface Props extends BaseProps {
   /** Value of the `input` element. */
@@ -30,15 +27,11 @@ export interface Props extends BaseProps {
   /** Indicates whether component is in disabled state */
   disabled?: boolean
   /** Component size */
-  size?: SizeType<'small' | 'medium' | 'large'>
+  size?: Size
   /** Ref of the input element */
   inputRef: RefObject<HTMLInputElement>
 }
 
-const useStyles = makeStyles<Theme, Props>(styles, {
-  name: 'NumberInputEndAdornment',
-})
-
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const nativeInputValueSetter = isBrowser()
   ? (
@@ -50,6 +43,12 @@ const nativeInputValueSetter = isBrowser()
     ).set!
   : undefined
 
+const classBySize: Record<Size, string> = {
+  small: 'h-3 w-[1.375rem]',
+  medium: 'h-4 w-[1.625rem]',
+  large: 'h-6 w-[2.125rem]',
+}
+
 export const NumberInputEndAdornment = (props: Props) => {
   const {
     step = 1,
@@ -61,8 +60,6 @@ export const NumberInputEndAdornment = (props: Props) => {
     inputRef,
   } = props
 
-  const classes = useStyles(props)
-
   const normalizedStep = Number(step)
   const normalizedValue = Number(value)
   const normalizedMin = Number(min)
@@ -94,7 +91,7 @@ export const NumberInputEndAdornment = (props: Props) => {
 
     let nextValue = normalizedValue + normalizedStep
 
-    if (nextValue <= max) {
+    if (nextValue <= Number(max)) {
       if (normalizedValue < normalizedMin + normalizedStep) {
         nextValue = normalizedMin + normalizedStep
       }
@@ -113,7 +110,7 @@ export const NumberInputEndAdornment = (props: Props) => {
 
     let nextValue = normalizedValue - normalizedStep
 
-    if (nextValue >= min) {
+    if (nextValue >= Number(min)) {
       if (normalizedValue > normalizedMax - normalizedStep) {
         nextValue = normalizedMax - normalizedStep
       }
@@ -125,35 +122,51 @@ export const NumberInputEndAdornment = (props: Props) => {
     }
   }
 
-  const rootClassName = cx(
-    {
-      [classes.disabled]: disabled,
-    },
-    classes[size],
-    classes.root
+  const rootClassName = twJoin(
+    `flex relative items-center justify-center align-middle 
+
+    p-0 bottom-0 cursor-pointer
+
+    text-graphite-700 decoration-graphite-700 bg-inherit bg-transparent
+    
+    border-t-0 border-b-0 border-l border-r border-l-solid border-r-solid 
+    border-l-gray-400 border-r-transparent
+    
+    hover:bg-gray-400 hover:border-gray-400
+
+    [&+&]:border-t [&+&]:border-solid 
+    [&+&]:border-t-gray-400 
+
+    active:[&+&]:border-t active:[&+&]:border-t-solid 
+    active:[&+&]:border-gray-500
+
+    active:bg-gray-500 active:border-t-gray-500 
+
+    [&:first-child]:rounded-tr-sm [&:last-child]:rounded-br-sm 
+
+    transition-[color,_border,_background] ease-out duration-350`,
+    classBySize[size],
+    disabled && 'opacity-[0.48]'
   )
 
   return (
     <InputAdornment position='end'>
       <Container flex direction='column' inline>
-        <ButtonBase
+        <button
           disabled={disabled}
-          classes={{
-            root: rootClassName,
-          }}
+          className={rootClassName}
           onClick={handleUpClick}
         >
           {size === 'large' ? <ArrowUpMinor24 /> : <ArrowUpMinor16 />}
-        </ButtonBase>
-        <ButtonBase
+        </button>
+
+        <button
           disabled={disabled}
-          classes={{
-            root: rootClassName,
-          }}
+          className={rootClassName}
           onClick={handleDownClick}
         >
           {size === 'large' ? <ArrowDownMinor24 /> : <ArrowDownMinor16 />}
-        </ButtonBase>
+        </button>
       </Container>
     </InputAdornment>
   )

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

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root" | "input">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

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

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

@@ -1,16 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    root: {
-        paddingRight: 0,
-        cursor: 'text',
-    },
-    input: {
-        '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-            '-webkit-appearance': 'none',
-            appearance: 'none',
-            margin: 0,
-        },
-        '-moz-appearance': 'textfield',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/NumberInput/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,YAAY,EAAE,CAAC;QACf,MAAM,EAAE,MAAM;KACf;IACD,KAAK,EAAE;QACL,4DAA4D,EAAE;YAC5D,oBAAoB,EAAE,MAAM;YAC5B,UAAU,EAAE,MAAM;YAClB,MAAM,EAAE,CAAC;SACV;QACD,iBAAiB,EAAE,WAAW;KAC/B;CACF,CAAC,CAAA"}

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

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, transitions, sizes: { borderRadius } }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "medium" | "large" | "small" | "disabled">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/NumberInputEndAdornment/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;4EAGc,KAAK;AAAxE,wBAsDI"}

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

@@ -1,45 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default ({ palette, transitions, sizes: { borderRadius } }) => createStyles({
-    root: {
-        borderLeft: `1px solid ${palette.grey.light2}`,
-        borderRight: '1px solid transparent',
-        '&:hover': {
-            background: palette.grey.light2,
-            borderColor: palette.grey.light2,
-        },
-        '& + &': {
-            borderTop: `1px solid ${palette.grey.light2}`,
-        },
-        '&:active + &': {
-            borderTop: `1px solid ${palette.grey.main}`,
-        },
-        '&:active': {
-            background: palette.grey.main,
-            borderColor: palette.grey.main,
-        },
-        '&:first-child': {
-            borderTopRightRadius: borderRadius.small,
-        },
-        '&:last-child': {
-            borderBottomRightRadius: borderRadius.small,
-        },
-        transition: `all ${transitions.duration.short}ms ${transitions.easing.easeOut}`,
-        transitionProperty: 'border, color, background',
-    },
-    disabled: {
-        opacity: 0.48,
-    },
-    small: {
-        height: '0.75rem',
-        width: '1.375rem',
-    },
-    medium: {
-        height: '1rem',
-        width: '1.625rem',
-    },
-    large: {
-        height: '1.5rem',
-        width: '2.125rem',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/NumberInputEndAdornment/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,EAAS,EAAE,EAAE,CAC1E,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,UAAU,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QAC9C,WAAW,EAAE,uBAAuB;QAEpC,SAAS,EAAE;YACT,UAAU,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;YAC/B,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;SACjC;QAED,OAAO,EAAE;YACP,SAAS,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;SAC9C;QAED,cAAc,EAAE;YACd,SAAS,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;SAC5C;QAED,UAAU,EAAE;YACV,UAAU,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAC7B,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;SAC/B;QAED,eAAe,EAAE;YACf,oBAAoB,EAAE,YAAY,CAAC,KAAK;SACzC;QAED,cAAc,EAAE;YACd,uBAAuB,EAAE,YAAY,CAAC,KAAK;SAC5C;QAED,UAAU,EAAE,OAAO,WAAW,CAAC,QAAQ,CAAC,KAAK,MAAM,WAAW,CAAC,MAAM,CAAC,OAAO,EAAE;QAC/E,kBAAkB,EAAE,2BAA2B;KAChD;IAED,QAAQ,EAAE;QACR,OAAO,EAAE,IAAI;KACd;IAED,KAAK,EAAE;QACL,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,UAAU;KAClB;IAED,MAAM,EAAE;QACN,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,UAAU;KAClB;IAED,KAAK,EAAE;QACL,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,UAAU;KAClB;CACF,CAAC,CAAA"}

package/src/NumberInput/styles.ts

@@ -1,17 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    root: {
-      paddingRight: 0,
-      cursor: 'text',
-    },
-    input: {
-      '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-        '-webkit-appearance': 'none',
-        appearance: 'none',
-        margin: 0,
-      },
-      '-moz-appearance': 'textfield',
-    },
-  })

package/src/NumberInputEndAdornment/styles.ts

@@ -1,58 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-
-export default ({ palette, transitions, sizes: { borderRadius } }: Theme) =>
-  createStyles({
-    root: {
-      borderLeft: `1px solid ${palette.grey.light2}`,
-      borderRight: '1px solid transparent',
-
-      '&:hover': {
-        background: palette.grey.light2,
-        borderColor: palette.grey.light2,
-      },
-
-      '& + &': {
-        borderTop: `1px solid ${palette.grey.light2}`,
-      },
-
-      '&:active + &': {
-        borderTop: `1px solid ${palette.grey.main}`,
-      },
-
-      '&:active': {
-        background: palette.grey.main,
-        borderColor: palette.grey.main,
-      },
-
-      '&:first-child': {
-        borderTopRightRadius: borderRadius.small,
-      },
-
-      '&:last-child': {
-        borderBottomRightRadius: borderRadius.small,
-      },
-
-      transition: `all ${transitions.duration.short}ms ${transitions.easing.easeOut}`,
-      transitionProperty: 'border, color, background',
-    },
-
-    disabled: {
-      opacity: 0.48,
-    },
-
-    small: {
-      height: '0.75rem',
-      width: '1.375rem',
-    },
-
-    medium: {
-      height: '1rem',
-      width: '1.625rem',
-    },
-
-    large: {
-      height: '1.5rem',
-      width: '2.125rem',
-    },
-  })