@toptal/picasso-tagselector 1.0.33 → 2.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"TagSelectorInput.d.ts","sourceRoot":"","sources":["../../../src/TagSelectorInput/TagSelectorInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAczC,eAAO,MAAM,gBAAgB,qHAwF5B,CAAA;AAUD,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"TagSelectorInput.d.ts","sourceRoot":"","sources":["../../../src/TagSelectorInput/TagSelectorInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAMzC,eAAO,MAAM,gBAAgB,qHA0F5B,CAAA;AAUD,eAAe,gBAAgB,CAAA"}

package/dist-package/src/TagSelectorInput/TagSelectorInput.js

@@ -11,13 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
 import { OutlinedInput } from '@toptal/picasso-outlined-input';
 import { usePropDeprecationWarning } from '@toptal/picasso-utils';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoTagSelectorInput',
-});
 export const TagSelectorInput = forwardRef(function TagSelectorInput(props, ref) {
     const { id, name, defaultValue, value, placeholder, status, error, disabled, autoFocus, autoComplete, children, multiline, width, style, rows, rowsMax, type, onChange, startAdornment, endAdornment, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -33,15 +28,15 @@ export const TagSelectorInput = forwardRef(function TagSelectorInput(props, ref)
         componentName: 'TagSelectorInput',
         description: 'Use the `status` prop instead. `error` is deprecated and will be removed in the next major release.',
     });
-    const classes = useStyles();
-    let usedEndAdornment = null;
-    if (endAdornment) {
+    let usedEndAdornment;
+    if (endAdornment && React.isValidElement(endAdornment)) {
         usedEndAdornment = React.cloneElement(endAdornment, {
-            className: classes.endAdornment,
+            className: 'absolute top-[calc(50%-0.5em)] right-[0.625em] h-[1em]',
         });
     }
-    return (React.createElement(OutlinedInput, { inputRef: ref, style: style, className: cx(classes.inputBase, {
-            [classes.withEndAdornment]: Boolean(endAdornment),
+    return (React.createElement(OutlinedInput, { inputRef: ref, style: style, className: cx(`flex flex-wrap h-auto py-1 pl-1 cursor-pointer
+          [&>input]:min-w-[3em] [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0`, {
+            'pr-[2.25em]': Boolean(endAdornment),
         }), highlight: highlight, id: id, name: name, defaultValue: defaultValue, value: value, placeholder: placeholder, status: error ? 'error' : status, disabled: disabled, autoFocus: autoFocus, autoComplete: autoComplete, multiline: multiline, rows: rows, rowsMax: rowsMax, type: type, width: width, 
         // html attributes
         inputProps: Object.assign(Object.assign({}, rest), inputProps), testIds: testIds, endAdornment: usedEndAdornment, startAdornment: startAdornment, onChange: onChange }, children));

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

@@ -1 +1 @@
-{"version":3,"file":"TagSelectorInput.js","sourceRoot":"","sources":["../../../src/TagSelectorInput/TagSelectorInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AAGjE,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,yBAAyB;CAChC,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CACxC,SAAS,gBAAgB,CAAC,KAAK,EAAE,GAAG;IAClC,MAAM,EACJ,EAAE,EACF,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,YAAY;IACZ,6DAA6D;IAC7D,YAAY;IACZ,6DAA6D;IAC7D,WAAW,EACX,UAAU,EACV,OAAO,EACP,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK;IAET,kBAAkB;MA/BZ,2SA6BL,CAAQ,CAAA;IAET,kBAAkB;IAClB,yBAAyB,CAAC;QACxB,KAAK;QACL,IAAI,EAAE,OAAO;QACb,aAAa,EAAE,kBAAkB;QACjC,WAAW,EACT,qGAAqG;KACxG,CAAC,CAAA;IAEF,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,IAAI,gBAAgB,GAAG,IAAI,CAAA;IAE3B,IAAI,YAAY,EAAE;QAChB,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAAC,YAA4B,EAAE;YAClE,SAAS,EAAE,OAAO,CAAC,YAAY;SAChC,CAAC,CAAA;KACH;IAED,OAAO,CACL,oBAAC,aAAa,IACZ,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE;YAC/B,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC;SAClD,CAAC,EACF,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAChC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK;QACZ,kBAAkB;QAClB,UAAU,kCACL,IAAI,GACJ,UAAU,GAEf,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,gBAAgB,EAC9B,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,IAEjB,QAAQ,CACK,CACjB,CAAA;AACH,CAAC,CACF,CAAA;AAED,gBAAgB,CAAC,YAAY,GAAG;IAC9B,SAAS,EAAE,KAAK;IAChB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEjD,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"TagSelectorInput.js","sourceRoot":"","sources":["../../../src/TagSelectorInput/TagSelectorInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AAGjE,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CACxC,SAAS,gBAAgB,CAAC,KAAK,EAAE,GAAG;IAClC,MAAM,EACJ,EAAE,EACF,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,YAAY;IACZ,6DAA6D;IAC7D,YAAY;IACZ,6DAA6D;IAC7D,WAAW,EACX,UAAU,EACV,OAAO,EACP,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK;IAET,kBAAkB;MA/BZ,2SA6BL,CAAQ,CAAA;IAET,kBAAkB;IAClB,yBAAyB,CAAC;QACxB,KAAK;QACL,IAAI,EAAE,OAAO;QACb,aAAa,EAAE,kBAAkB;QACjC,WAAW,EACT,qGAAqG;KACxG,CAAC,CAAA;IAEF,IAAI,gBAAiC,CAAA;IAErC,IAAI,YAAY,IAAI,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE;QACtD,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE;YAClD,SAAS,EAAE,wDAAwD;SACpE,CAAC,CAAA;KACH;IAED,OAAO,CACL,oBAAC,aAAa,IACZ,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CACX;6HACmH,EACnH;YACE,aAAa,EAAE,OAAO,CAAC,YAAY,CAAC;SACrC,CACF,EACD,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAChC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK;QACZ,kBAAkB;QAClB,UAAU,kCACL,IAAI,GACJ,UAAU,GAEf,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,gBAAgB,EAC9B,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,IAEjB,QAAQ,CACK,CACjB,CAAA;AACH,CAAC,CACF,CAAA;AAED,gBAAgB,CAAC,YAAY,GAAG;IAC9B,SAAS,EAAE,KAAK;IAChB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEjD,eAAe,gBAAgB,CAAA"}

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

@@ -1,3 +1,2 @@
 export { default as TagSelectorInput } from './TagSelectorInput';
-export { TAG_SELECTOR_INPUT_GUTTER_SIZE } from './styles';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TagSelectorInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAChE,OAAO,EAAE,8BAA8B,EAAE,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TagSelectorInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist-package/src/TagSelectorInput/index.js

@@ -1,3 +1,2 @@
 export { default as TagSelectorInput } from './TagSelectorInput';
-export { TAG_SELECTOR_INPUT_GUTTER_SIZE } from './styles';
 //# sourceMappingURL=index.js.map

package/dist-package/src/TagSelectorInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TagSelectorInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAChE,OAAO,EAAE,8BAA8B,EAAE,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TagSelectorInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-tagselector",
-  "version": "1.0.33",
+  "version": "2.0.1",
   "description": "Toptal UI components library - Tagselector",
   "publishConfig": {
     "access": "public"
@@ -22,11 +22,11 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-autocomplete": "1.0.30",
-    "@toptal/picasso-form": "3.0.7",
-    "@toptal/picasso-outlined-input": "1.1.5",
+    "@toptal/picasso-autocomplete": "2.0.1",
+    "@toptal/picasso-form": "4.0.1",
+    "@toptal/picasso-outlined-input": "2.0.1",
     "@toptal/picasso-shared": "15.0.0",
-    "@toptal/picasso-tag": "2.0.6",
+    "@toptal/picasso-tag": "3.0.1",
     "@toptal/picasso-utils": "1.0.3",
     "classnames": "^2.5.1"
   },
@@ -35,10 +35,11 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-tailwind": ">=2.6.0",
     "react": ">=16.12.0 < 19.0.0"
   },
   "devDependencies": {
+    "@toptal/picasso-tailwind": "2.7.0",
     "@toptal/picasso-test-utils": "1.1.1",
     "popper.js": "^1.16.1"
   },

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

@@ -12,10 +12,10 @@ exports[`TagSelector disabled render 1`] = `
       role="combobox"
     >
       <div
-        class="PicassoContainer-flex"
+        class="flex"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium PicassoTagSelectorInput-inputBase Mui-disabled Mui-disabled MuiInputBase-adornedStart MuiOutlinedInput-adornedStart"
+          class="base-Input base- base-Input relative gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible p-2 w-[18.75rem] bg-gray 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 after:border [&:has(input:focus)]:after:shadow-[0_0_0_3px] [&:has(input:focus)]:after:shadow-blue text-gray flex flex-wrap h-auto py-1 pl-1 cursor-pointer [&>input]:min-w [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0"
         >
           <div
             aria-disabled="true"
@@ -52,25 +52,11 @@ exports[`TagSelector disabled render 1`] = `
             aria-autocomplete="list"
             aria-invalid="false"
             autocomplete="off"
-            class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium Mui-disabled Mui-disabled MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart"
+            class="base-Input base- [&::-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-gray [&::-webkit-text-fill-color]:text-gray [&::placeholder]:text-gray [&::placeholder]:opacity-100"
             disabled=""
             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
@@ -94,10 +80,10 @@ exports[`TagSelector preselected value 1`] = `
         role="combobox"
       >
         <div
-          class="PicassoContainer-flex"
+          class="flex"
         >
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium PicassoTagSelectorInput-inputBase MuiInputBase-adornedStart MuiOutlinedInput-adornedStart"
+            class="base-Input base-Input relative gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible p-2 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 flex flex-wrap h-auto py-1 pl-1 cursor-pointer [&>input]:min-w [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0"
           >
             <div
               class="text-lg transition-none border border-solid rounded-[6.25rem] h-6 max-w inline-flex justify-center items-center cursor-default bg-white group align-middle leading-[inherit] text-graphite border-gray"
@@ -133,24 +119,10 @@ exports[`TagSelector preselected value 1`] = `
               aria-autocomplete="list"
               aria-invalid="false"
               autocomplete="off"
-              class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart"
+              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
@@ -174,34 +146,20 @@ exports[`TagSelector renders 1`] = `
       role="combobox"
     >
       <div
-        class="PicassoContainer-flex"
+        class="flex"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium PicassoTagSelectorInput-inputBase MuiInputBase-adornedStart MuiOutlinedInput-adornedStart"
+          class="base-Input base-Input relative gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible p-2 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 flex flex-wrap h-auto py-1 pl-1 cursor-pointer [&>input]:min-w [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0"
         >
           <input
             aria-autocomplete="list"
             aria-invalid="false"
             autocomplete="off"
-            class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart"
+            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"
             placeholder="Please select..."
             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

package/src/TagSelectorInput/TagSelectorInput.tsx

@@ -1,18 +1,9 @@
-import type { ReactElement } 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 { OutlinedInput } from '@toptal/picasso-outlined-input'
 import { usePropDeprecationWarning } from '@toptal/picasso-utils'
 import type { Props as InputProps } from '@toptal/picasso-input'
 
-import styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoTagSelectorInput',
-})
-
 export const TagSelectorInput = forwardRef<HTMLInputElement, InputProps>(
   function TagSelectorInput(props, ref) {
     const {
@@ -55,13 +46,11 @@ export const TagSelectorInput = forwardRef<HTMLInputElement, InputProps>(
         'Use the `status` prop instead. `error` is deprecated and will be removed in the next major release.',
     })
 
-    const classes = useStyles()
-
-    let usedEndAdornment = null
+    let usedEndAdornment: React.ReactNode
 
-    if (endAdornment) {
-      usedEndAdornment = React.cloneElement(endAdornment as ReactElement, {
-        className: classes.endAdornment,
+    if (endAdornment && React.isValidElement(endAdornment)) {
+      usedEndAdornment = React.cloneElement(endAdornment, {
+        className: 'absolute top-[calc(50%-0.5em)] right-[0.625em] h-[1em]',
       })
     }
 
@@ -69,9 +58,13 @@ export const TagSelectorInput = forwardRef<HTMLInputElement, InputProps>(
       <OutlinedInput
         inputRef={ref}
         style={style}
-        className={cx(classes.inputBase, {
-          [classes.withEndAdornment]: Boolean(endAdornment),
-        })}
+        className={cx(
+          `flex flex-wrap h-auto py-1 pl-1 cursor-pointer
+          [&>input]:min-w-[3em] [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0`,
+          {
+            'pr-[2.25em]': Boolean(endAdornment),
+          }
+        )}
         highlight={highlight}
         id={id}
         name={name}

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

@@ -6,30 +6,16 @@ exports[`TagSelectorInput renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium PicassoTagSelectorInput-inputBase"
+      class="base-Input relative gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible p-2 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 flex flex-wrap h-auto py-1 pl-1 cursor-pointer [&>input]:min-w [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium"
+        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"
         data-testid="data-testid"
         placeholder="placeholder"
         type="text"
         value="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>

package/src/TagSelectorInput/index.ts

@@ -1,2 +1 @@
 export { default as TagSelectorInput } from './TagSelectorInput'
-export { TAG_SELECTOR_INPUT_GUTTER_SIZE } from './styles'

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

@@ -1,4 +0,0 @@
-export declare const TAG_SELECTOR_INPUT_GUTTER_SIZE: string;
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "inputBase" | "withEndAdornment" | "endAdornment" | "horizontalLayout">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/TagSelectorInput/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,8BAA8B,QAAa,CAAA;;AAIxD,wBAiCI"}

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

@@ -1,38 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { rem } from '@toptal/picasso-shared';
-export const TAG_SELECTOR_INPUT_GUTTER_SIZE = rem('4px');
-const END_ADORNMENT_PADDING = '0.625em';
-const END_ADORNMENT_HEIGHT = '1em';
-export default () => createStyles({
-    inputBase: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        height: 'auto',
-        paddingBottom: TAG_SELECTOR_INPUT_GUTTER_SIZE,
-        paddingLeft: TAG_SELECTOR_INPUT_GUTTER_SIZE,
-        paddingTop: TAG_SELECTOR_INPUT_GUTTER_SIZE,
-        cursor: 'pointer',
-        '& > input': {
-            minWidth: '3em',
-            flexGrow: 1,
-            width: 0,
-            height: rem('24px'),
-            paddingLeft: rem('4px'),
-            paddingRight: 0,
-            marginBottom: 0,
-        },
-    },
-    withEndAdornment: {
-        paddingRight: `calc(2*${END_ADORNMENT_PADDING} + ${END_ADORNMENT_HEIGHT})`,
-    },
-    endAdornment: {
-        position: 'absolute',
-        top: `calc(50% - 0.5 * ${END_ADORNMENT_HEIGHT})`,
-        right: '0.625em',
-        height: END_ADORNMENT_HEIGHT,
-    },
-    horizontalLayout: {
-        width: '100%',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/TagSelectorInput/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,MAAM,CAAC,MAAM,8BAA8B,GAAG,GAAG,CAAC,KAAK,CAAC,CAAA;AACxD,MAAM,qBAAqB,GAAG,SAAS,CAAA;AACvC,MAAM,oBAAoB,GAAG,KAAK,CAAA;AAElC,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,SAAS,EAAE;QACT,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,MAAM;QACd,aAAa,EAAE,8BAA8B;QAC7C,WAAW,EAAE,8BAA8B;QAC3C,UAAU,EAAE,8BAA8B;QAC1C,MAAM,EAAE,SAAS;QAEjB,WAAW,EAAE;YACX,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,CAAC;YACX,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC;YACnB,WAAW,EAAE,GAAG,CAAC,KAAK,CAAC;YACvB,YAAY,EAAE,CAAC;YACf,YAAY,EAAE,CAAC;SAChB;KACF;IACD,gBAAgB,EAAE;QAChB,YAAY,EAAE,UAAU,qBAAqB,MAAM,oBAAoB,GAAG;KAC3E;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,oBAAoB,oBAAoB,GAAG;QAChD,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,oBAAoB;KAC7B;IACD,gBAAgB,EAAE;QAChB,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAA"}

package/src/TagSelectorInput/styles.ts

@@ -1,41 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-import { rem } from '@toptal/picasso-shared'
-
-export const TAG_SELECTOR_INPUT_GUTTER_SIZE = rem('4px')
-const END_ADORNMENT_PADDING = '0.625em'
-const END_ADORNMENT_HEIGHT = '1em'
-
-export default () =>
-  createStyles({
-    inputBase: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      height: 'auto',
-      paddingBottom: TAG_SELECTOR_INPUT_GUTTER_SIZE,
-      paddingLeft: TAG_SELECTOR_INPUT_GUTTER_SIZE,
-      paddingTop: TAG_SELECTOR_INPUT_GUTTER_SIZE,
-      cursor: 'pointer',
-
-      '& > input': {
-        minWidth: '3em',
-        flexGrow: 1,
-        width: 0,
-        height: rem('24px'),
-        paddingLeft: rem('4px'),
-        paddingRight: 0,
-        marginBottom: 0,
-      },
-    },
-    withEndAdornment: {
-      paddingRight: `calc(2*${END_ADORNMENT_PADDING} + ${END_ADORNMENT_HEIGHT})`,
-    },
-    endAdornment: {
-      position: 'absolute',
-      top: `calc(50% - 0.5 * ${END_ADORNMENT_HEIGHT})`,
-      right: '0.625em',
-      height: END_ADORNMENT_HEIGHT,
-    },
-    horizontalLayout: {
-      width: '100%',
-    },
-  })