@toptal/picasso-form 4.0.2 → 4.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"FormError.d.ts","sourceRoot":"","sources":["../../../src/FormError/FormError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,4BAA4B;IAC5B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAID,eAAO,MAAM,SAAS,8EAoBpB,CAAA;AAIF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"FormError.d.ts","sourceRoot":"","sources":["../../../src/FormError/FormError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAIvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,4BAA4B;IAC5B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,SAAS,8EAkBpB,CAAA;AAIF,eAAe,SAAS,CAAA"}

package/dist-package/src/FormError/FormError.js

@@ -10,15 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
 import { Typography } from '@toptal/picasso-typography';
-import styles from './styles';
-const useStyles = makeStyles(styles, { name: 'PicassoFormError' });
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 export const FormError = forwardRef(function FormError(props, ref) {
     const { children, className, style } = props, rest = __rest(props, ["children", "className", "style"]);
-    const classes = useStyles();
-    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cx(classes.root, className), style: style }),
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: twMerge('mt-1', className), style: style }),
         React.createElement(Typography, { color: 'red', size: 'xxsmall', className: 'cursor-default' }, children)));
 });
 FormError.displayName = 'FormError';

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

@@ -1 +1 @@
-{"version":3,"file":"FormError.js","sourceRoot":"","sources":["../../../src/FormError/FormError.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAEvD,OAAO,MAAM,MAAM,UAAU,CAAA;AAO7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAA;AAEzE,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAwB,SAAS,SAAS,CAC3E,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAA;IAErD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK;QAEZ,oBAAC,UAAU,IAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,SAAS,EAAC,SAAS,EAAC,gBAAgB,IAC9D,QAAQ,CACE,CACT,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}
+{"version":3,"file":"FormError.js","sourceRoot":"","sources":["../../../src/FormError/FormError.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAOxD,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAwB,SAAS,SAAS,CAC3E,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAA;IAErD,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,CAAC,EACrC,KAAK,EAAE,KAAK;QAEZ,oBAAC,UAAU,IAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,SAAS,EAAC,SAAS,EAAC,gBAAgB,IAC9D,QAAQ,CACE,CACT,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"FormHint.d.ts","sourceRoot":"","sources":["../../../src/FormHint/FormHint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAID,eAAO,MAAM,QAAQ,8EAkBnB,CAAA;AAMF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"FormHint.d.ts","sourceRoot":"","sources":["../../../src/FormHint/FormHint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAIvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,QAAQ,8EAgBnB,CAAA;AAMF,eAAe,QAAQ,CAAA"}

package/dist-package/src/FormHint/FormHint.js

@@ -10,15 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
 import { Typography } from '@toptal/picasso-typography';
-import styles from './styles';
-const useStyles = makeStyles(styles, { name: 'FormHint' });
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 export const FormHint = forwardRef(function FormHint(props, ref) {
     const { children, className, style } = props, rest = __rest(props, ["children", "className", "style"]);
-    const classes = useStyles();
-    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cx(classes.root, className), style: style }),
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: twMerge('mt-1', className), style: style }),
         React.createElement(Typography, { size: 'xxsmall' }, children)));
 });
 FormHint.defaultProps = {};

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

@@ -1 +1 @@
-{"version":3,"file":"FormHint.js","sourceRoot":"","sources":["../../../src/FormHint/FormHint.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAEvD,OAAO,MAAM,MAAM,UAAU,CAAA;AAO7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAA;AAEjE,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAwB,SAAS,QAAQ,CACzE,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAA;IAErD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK;QAEZ,oBAAC,UAAU,IAAC,IAAI,EAAC,SAAS,IAAE,QAAQ,CAAc,CAC9C,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,YAAY,GAAG,EAAE,CAAA;AAE1B,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"FormHint.js","sourceRoot":"","sources":["../../../src/FormHint/FormHint.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAOxD,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAwB,SAAS,QAAQ,CACzE,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAA;IAErD,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,CAAC,EACrC,KAAK,EAAE,KAAK;QAEZ,oBAAC,UAAU,IAAC,IAAI,EAAC,SAAS,IAAE,QAAQ,CAAc,CAC9C,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,YAAY,GAAG,EAAE,CAAA;AAE1B,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-form",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "description": "Toptal UI components library - Form",
   "publishConfig": {
     "access": "public"
@@ -41,12 +41,14 @@
     "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
     "@toptal/picasso-tailwind": ">=2.7",
+    "@toptal/picasso-tailwind-merge": "^1.2.0",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
+    "@toptal/picasso-tailwind-merge": "1.2.0",
     "@toptal/picasso-provider": "5.0.0",
     "@toptal/picasso-test-utils": "1.1.1"
   },

package/src/FormError/FormError.tsx

@@ -1,33 +1,25 @@
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { Typography } from '@toptal/picasso-typography'
-
-import styles from './styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** The text of the error */
   children: ReactNode
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoFormError' })
-
 export const FormError = forwardRef<HTMLDivElement, Props>(function FormError(
   props,
   ref
 ) {
   const { children, className, style, ...rest } = props
 
-  const classes = useStyles()
-
   return (
     <div
       {...rest}
       ref={ref}
-      className={cx(classes.root, className)}
+      className={twMerge('mt-1', className)}
       style={style}
     >
       <Typography color='red' size='xxsmall' className='cursor-default'>

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

@@ -33,7 +33,7 @@ exports[`FormError renders 1`] = `
           />
         </div>
         <div
-          class="PicassoFormError-root"
+          class="mt-1"
         >
           <p
             class="m-0 text-2xs text-red font-regular cursor-default"
@@ -42,7 +42,7 @@ exports[`FormError renders 1`] = `
           </p>
         </div>
         <div
-          class="FormHint-root"
+          class="mt-1"
         >
           <p
             class="m-0 text-2xs text-graphite font-regular"

package/src/FormHint/FormHint.tsx

@@ -1,33 +1,25 @@
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { Typography } from '@toptal/picasso-typography'
-
-import styles from './styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** The text of the hint */
   children: ReactNode
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'FormHint' })
-
 export const FormHint = forwardRef<HTMLDivElement, Props>(function FormHint(
   props,
   ref
 ) {
   const { children, className, style, ...rest } = props
 
-  const classes = useStyles()
-
   return (
     <div
       {...rest}
       ref={ref}
-      className={cx(classes.root, className)}
+      className={twMerge('mt-1', className)}
       style={style}
     >
       <Typography size='xxsmall'>{children}</Typography>

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

@@ -6,7 +6,7 @@ exports[`FormHint renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="FormHint-root"
+      class="mt-1"
     >
       <p
         class="m-0 text-2xs text-graphite font-regular"

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

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

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

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

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

@@ -1,7 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    root: {
-        marginTop: '0.25em',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/FormError/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,CAAA"}

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

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

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

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

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

@@ -1,7 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    root: {
-        marginTop: '0.25em',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/FormHint/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,CAAA"}

package/src/FormError/styles.ts

@@ -1,8 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    root: {
-      marginTop: '0.25em',
-    },
-  })

package/src/FormHint/styles.ts

@@ -1,8 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    root: {
-      marginTop: '0.25em',
-    },
-  })