@toptal/picasso-timepicker 1.0.26 → 2.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/TimePicker/TimePicker.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AASvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAQ5D,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,IAAI,CACF,UAAU,EACR,IAAI,GACJ,OAAO,GACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,WAAW,GACX,MAAM,GACN,cAAc,GACd,MAAM,GACN,MAAM,GACN,cAAc,GACd,SAAS,GACT,cAAc,GACd,gBAAgB,GAChB,oBAAoB,GACpB,SAAS,GACT,OAAO,GACP,aAAa,GACb,QAAQ,CACX;IACH,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC,CAAA;IAC7C,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAID,eAAO,MAAM,UAAU;YAAW,KAAK;;;;;CA4GtC,CAAA;AAQD,eAAe,UAAU,CAAA"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/TimePicker/TimePicker.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAMvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAG5D,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,IAAI,CACF,UAAU,EACR,IAAI,GACJ,OAAO,GACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,WAAW,GACX,MAAM,GACN,cAAc,GACd,MAAM,GACN,MAAM,GACN,cAAc,GACd,SAAS,GACT,cAAc,GACd,gBAAgB,GAChB,oBAAoB,GACpB,SAAS,GACT,OAAO,GACP,aAAa,GACb,QAAQ,CACX;IACH,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC,CAAA;IAC7C,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAID,eAAO,MAAM,UAAU;YAAW,KAAK;;;;;CAsHtC,CAAA;AAQD,eAAe,UAAU,CAAA"}

package/dist-package/src/TimePicker/TimePicker.js

@@ -10,17 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useEffect, useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import InputMask from 'react-input-mask';
 import { detect } from 'detect-browser';
-import cx from 'classnames';
 import { Input } from '@toptal/picasso-input';
 import { Time16 } from '@toptal/picasso-icons';
 import { usePropDeprecationWarning } from '@toptal/picasso-utils';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoTimePicker',
-});
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 const VALID_TIME_REGEX = new RegExp(/^([0-1][0-9]|2[0-3]):[0-5][0-9]$/);
 export const TimePicker = (props) => {
     const { onChange: externalOnChange, value: externalValue, width, className, error, status, highlight } = props, rest = __rest(props, ["onChange", "value", "width", "className", "error", "status", "highlight"]);
@@ -48,7 +43,6 @@ export const TimePicker = (props) => {
         componentName: 'TimePicker',
         description: 'Use the `status` prop instead. `error` is deprecated and will be removed in the next major release.',
     });
-    const classes = useStyles();
     const browser = detect();
     const isSafari = (browser === null || browser === void 0 ? void 0 : browser.name) === 'safari';
     const startsWithTwo = value && value[0] === '2';
@@ -59,11 +53,16 @@ export const TimePicker = (props) => {
         /[0-5]/,
         /[0-9]/,
     ];
-    const icon = React.createElement(Time16, { classes: { root: classes.icon } });
+    const icon = (React.createElement(Time16, { classes: {
+            root: 'bg-white absolute right-[0.625rem] pointer-events-none m-0 select-none',
+        } }));
+    const inputClassName = twMerge('cursor-default', className);
+    const inputPropClassName = `-mr-[8px] [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-2
+    [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:bg-none`;
     if (isSafari) {
-        return (React.createElement(Input, { type: 'text', readOnly: true, iconPosition: 'end', icon: icon, width: width, status: error ? 'error' : status, className: cx(classes.root, className), highlight: highlight, inputProps: Object.assign({ className: classes.inputBase }, rest), startAdornment: React.createElement(InputMask, { mask: inputMask, alwaysShowMask: true, maskPlaceholder: '-', value: value, onChange: onChange, className: classes.inputMask }) }));
+        return (React.createElement(Input, { type: 'text', readOnly: true, iconPosition: 'end', icon: icon, width: width, status: error ? 'error' : status, className: inputClassName, highlight: highlight, inputProps: Object.assign({ className: inputPropClassName }, rest), startAdornment: React.createElement(InputMask, { mask: inputMask, alwaysShowMask: true, maskPlaceholder: '-', value: value, onChange: onChange, className: 'text-sm border-none p-0 m-0 outline-none' }) }));
     }
-    return (React.createElement(Input, { type: 'time', value: value, className: cx(classes.root, className), onChange: onChange, iconPosition: 'end', highlight: highlight, icon: icon, width: width, status: error ? 'error' : status, inputProps: Object.assign({ className: classes.inputBase, step: 60 }, rest) }));
+    return (React.createElement(Input, { type: 'time', value: value, className: inputClassName, onChange: onChange, iconPosition: 'end', highlight: highlight, icon: icon, width: width, status: error ? 'error' : status, inputProps: Object.assign({ className: inputPropClassName, step: 60 }, rest) }));
 };
 TimePicker.defaultProps = {
     status: 'default',

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../src/TimePicker/TimePicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../src/TimePicker/TimePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC9C,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AAGjE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAkCxD,MAAM,gBAAgB,GAAG,IAAI,MAAM,CAAC,kCAAkC,CAAC,CAAA;AAEvE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAY,EAAE,EAAE;IACzC,MAAM,EACJ,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,aAAa,EACpB,KAAK,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK,EATH,2EASL,CAAQ,CAAA;IAET,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,uEAAuE;QACvE,IAAI,aAAa,IAAI,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE;YACzD,QAAQ,CAAC,aAAa,CAAC,CAAA;SACxB;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,MAAM,QAAQ,GAAG,CACf,KAEC,EACD,EAAE;QACF,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA;QAEnC,QAAQ,CAAC,QAAQ,CAAC,CAAA;QAElB,IAAI,QAAQ,IAAI,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAC/C,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,QAAQ,CAAC,CAAA;SAC7B;aAAM;YACL,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,EAAE,CAAC,CAAA;SACvB;IACH,CAAC,CAAA;IAED,kBAAkB;IAClB,yBAAyB,CAAC;QACxB,KAAK;QACL,IAAI,EAAE,OAAO;QACb,aAAa,EAAE,YAAY;QAC3B,WAAW,EACT,qGAAqG;KACxG,CAAC,CAAA;IAEF,MAAM,OAAO,GAAG,MAAM,EAAE,CAAA;IACxB,MAAM,QAAQ,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,MAAK,QAAQ,CAAA;IAC3C,MAAM,aAAa,GAAG,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,CAAA;IAE/C,MAAM,SAAS,GAAG;QAChB,OAAO;QACP,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;QACjC,GAAG;QACH,OAAO;QACP,OAAO;KACR,CAAA;IAED,MAAM,IAAI,GAAG,CACX,oBAAC,MAAM,IACL,OAAO,EAAE;YACP,IAAI,EAAE,wEAAwE;SAC/E,GACD,CACH,CAAA;IAED,MAAM,cAAc,GAAG,OAAO,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAA;IAE3D,MAAM,kBAAkB,GAAG;yGAC4E,CAAA;IAEvG,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,oBAAC,KAAK,IACJ,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,YAAY,EAAC,KAAK,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAChC,SAAS,EAAE,cAAc,EACzB,SAAS,EAAE,SAAS,EACpB,UAAU,kBACR,SAAS,EAAE,kBAAkB,IAC1B,IAAI,GAET,cAAc,EACZ,oBAAC,SAAS,IACR,IAAI,EAAE,SAAS,EACf,cAAc,QACd,eAAe,EAAC,GAAG,EACnB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,0CAA0C,GACrD,GAEJ,CACH,CAAA;KACF;IAED,OAAO,CACL,oBAAC,KAAK,IACJ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAC,KAAK,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAChC,UAAU,kBACR,SAAS,EAAE,kBAAkB,EAC7B,IAAI,EAAE,EAAE,IACL,IAAI,IAET,CACH,CAAA;AACH,CAAC,CAAA;AAED,UAAU,CAAC,YAAY,GAAG;IACxB,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-timepicker",
-  "version": "1.0.26",
+  "version": "2.0.1",
   "description": "Toptal UI components library - Timepicker",
   "publishConfig": {
     "access": "public"
@@ -22,11 +22,10 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-icons": "1.5.0",
-    "@toptal/picasso-input": "2.0.8",
-    "@toptal/picasso-outlined-input": "1.1.5",
+    "@toptal/picasso-icons": "1.6.0",
+    "@toptal/picasso-input": "3.0.1",
+    "@toptal/picasso-outlined-input": "2.0.1",
     "@toptal/picasso-utils": "1.0.3",
-    "classnames": "^2.5.1",
     "detect-browser": "^5.3.0",
     "react-input-mask": "^3.0.0-alpha.2"
   },
@@ -35,7 +34,8 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-tailwind-merge": "1.2.0",
+    "@toptal/picasso-tailwind": ">=2.5.0",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {

package/src/TimePicker/TimePicker.tsx

@@ -1,21 +1,13 @@
 import React, { useEffect, useState } from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import InputMask from 'react-input-mask'
 import { detect } from 'detect-browser'
-import cx from 'classnames'
 import { Input } from '@toptal/picasso-input'
 import { Time16 } from '@toptal/picasso-icons'
 import { usePropDeprecationWarning } from '@toptal/picasso-utils'
 import type { InputProps } from '@toptal/picasso-input'
 import type { Status } from '@toptal/picasso-outlined-input'
-
-import styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoTimePicker',
-})
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 export interface Props
   extends BaseProps,
@@ -97,7 +89,6 @@ export const TimePicker = (props: Props) => {
       'Use the `status` prop instead. `error` is deprecated and will be removed in the next major release.',
   })
 
-  const classes = useStyles()
   const browser = detect()
   const isSafari = browser?.name === 'safari'
   const startsWithTwo = value && value[0] === '2'
@@ -110,7 +101,18 @@ export const TimePicker = (props: Props) => {
     /[0-9]/,
   ]
 
-  const icon = <Time16 classes={{ root: classes.icon }} />
+  const icon = (
+    <Time16
+      classes={{
+        root: 'bg-white absolute right-[0.625rem] pointer-events-none m-0 select-none',
+      }}
+    />
+  )
+
+  const inputClassName = twMerge('cursor-default', className)
+
+  const inputPropClassName = `-mr-[8px] [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-2
+    [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:bg-none`
 
   if (isSafari) {
     return (
@@ -121,10 +123,10 @@ export const TimePicker = (props: Props) => {
         icon={icon}
         width={width}
         status={error ? 'error' : status}
-        className={cx(classes.root, className)}
+        className={inputClassName}
         highlight={highlight}
         inputProps={{
-          className: classes.inputBase,
+          className: inputPropClassName,
           ...rest,
         }}
         startAdornment={
@@ -134,7 +136,7 @@ export const TimePicker = (props: Props) => {
             maskPlaceholder='-'
             value={value}
             onChange={onChange}
-            className={classes.inputMask}
+            className={'text-sm border-none p-0 m-0 outline-none'}
           />
         }
       />
@@ -145,7 +147,7 @@ export const TimePicker = (props: Props) => {
     <Input
       type='time'
       value={value}
-      className={cx(classes.root, className)}
+      className={inputClassName}
       onChange={onChange}
       iconPosition='end'
       highlight={highlight}
@@ -153,7 +155,7 @@ export const TimePicker = (props: Props) => {
       width={width}
       status={error ? 'error' : status}
       inputProps={{
-        className: classes.inputBase,
+        className: inputPropClassName,
         step: 60, // 1 min
         ...rest,
       }}

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

@@ -6,21 +6,21 @@ exports[`TimePicker renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium PicassoTimePicker-root 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-default"
     >
       <input
         aria-invalid="false"
         autocomplete="none"
-        class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium PicassoTimePicker-inputBase MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
+        class="base-Input 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 -mr [&::-webkit-calendar-picker [&::-webkit-calendar-picker-indicator]:right [&::-webkit-calendar-picker-indicator]:cursor [&::-webkit-calendar-picker-indicator]:bg"
         step="60"
         type="time"
         value="21:00"
       />
       <div
-        class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-disablePointerEvents"
+        class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto flex-grow flex-shrink basis-auto pointer-events"
       >
         <svg
-          class="PicassoSvgTime16-root PicassoTimePicker-icon PicassoInputIconAdornment-icon"
+          class="PicassoSvgTime16-root bg-white absolute right-[0.625rem] pointer-events m-0 select-none grow shrink basis-0"
           style="min-width: 16px; min-height: 16px;"
           viewBox="0 0 16 16"
         >
@@ -29,20 +29,6 @@ exports[`TimePicker renders 1`] = `
           />
         </svg>
       </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>

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/TimePicker/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBAkCI"}

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

@@ -1,35 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default ({ palette }) => createStyles({
-    root: {
-        cursor: 'default',
-    },
-    icon: {
-        background: palette.common.white,
-        position: 'absolute',
-        right: '0.625rem',
-        pointerEvents: 'none',
-        margin: 0,
-        userSelect: 'none',
-    },
-    inputBase: {
-        marginRight: '-8px',
-        // this workaround is needed to show the picker when we click our own clock icon
-        // eventually, we could "display: none" this native icon and use native showPicker()
-        // but currently not all browsers support the picker (e.g. Safari and Firefox), so for now we
-        // hide the native icon (with its functionality available) behind our icon
-        '&::-webkit-calendar-picker-indicator': {
-            position: 'absolute',
-            right: '0.5rem',
-            cursor: 'pointer',
-            background: 'none',
-        },
-    },
-    inputMask: {
-        fontSize: '0.8125rem',
-        border: 'none',
-        padding: '0',
-        margin: '0',
-        outline: 'none',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/TimePicker/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;KAClB;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QAChC,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,UAAU;QACjB,aAAa,EAAE,MAAM;QACrB,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,MAAM;KACnB;IACD,SAAS,EAAE;QACT,WAAW,EAAE,MAAM;QAEnB,gFAAgF;QAChF,oFAAoF;QACpF,6FAA6F;QAC7F,0EAA0E;QAC1E,sCAAsC,EAAE;YACtC,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,SAAS;YACjB,UAAU,EAAE,MAAM;SACnB;KACF;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,GAAG;QACZ,MAAM,EAAE,GAAG;QACX,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAA"}

package/src/TimePicker/styles.ts

@@ -1,38 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-
-export default ({ palette }: Theme) =>
-  createStyles({
-    root: {
-      cursor: 'default',
-    },
-    icon: {
-      background: palette.common.white,
-      position: 'absolute',
-      right: '0.625rem',
-      pointerEvents: 'none',
-      margin: 0,
-      userSelect: 'none',
-    },
-    inputBase: {
-      marginRight: '-8px', // override default margin for icon position
-
-      // this workaround is needed to show the picker when we click our own clock icon
-      // eventually, we could "display: none" this native icon and use native showPicker()
-      // but currently not all browsers support the picker (e.g. Safari and Firefox), so for now we
-      // hide the native icon (with its functionality available) behind our icon
-      '&::-webkit-calendar-picker-indicator': {
-        position: 'absolute',
-        right: '0.5rem',
-        cursor: 'pointer',
-        background: 'none',
-      },
-    },
-    inputMask: {
-      fontSize: '0.8125rem',
-      border: 'none',
-      padding: '0',
-      margin: '0',
-      outline: 'none',
-    },
-  })