@toptal/picasso-form 3.0.7 → 4.0.0

package/dist-package/src/FieldRequirements/FieldRequirementItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldRequirementItem.d.ts","sourceRoot":"","sources":["../../../src/FieldRequirements/FieldRequirementItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAc9C,oBAAY,0BAA0B,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAexE,UAAU,KAAM,SAAQ,iBAAiB,CAAC,EAAE,CAAC;IAC3C,MAAM,EAAE,0BAA0B,CAAA;IAClC,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AACD,QAAA,MAAM,oBAAoB,kCAAmC,KAAK,gBAkBjE,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"FieldRequirementItem.d.ts","sourceRoot":"","sources":["../../../src/FieldRequirements/FieldRequirementItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAM9C,oBAAY,0BAA0B,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAexE,UAAU,KAAM,SAAQ,iBAAiB,CAAC,EAAE,CAAC;IAC3C,MAAM,EAAE,0BAA0B,CAAA;IAClC,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AACD,QAAA,MAAM,oBAAoB,kCAAmC,KAAK,gBAgBjE,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/dist-package/src/FieldRequirements/FieldRequirementItem.js

@@ -1,12 +1,7 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { Typography } from '@toptal/picasso-typography';
 import { Bullet16, CheckMinor16, CloseMinor16 } from '@toptal/picasso-icons';
 import { GridCompound as Grid } from '@toptal/picasso-grid';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'FieldRequirementItem',
-});
 const colorMap = {
     default: 'dark-grey',
     success: 'inherit',
@@ -18,10 +13,9 @@ const IconsMap = {
     error: CloseMinor16,
 };
 const FieldRequirementItem = ({ children, status, testIds }) => {
-    const classes = useStyles();
     const IconComponent = IconsMap[status];
     const iconTestId = getIconTestId(status, testIds);
-    return (React.createElement(Grid.Item, { xs: 6, className: classes.fieldRequirementItem, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.root },
+    return (React.createElement(Grid.Item, { xs: 6, className: 'flex items-center text-gray-600', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.root },
         React.createElement(IconComponent, { color: colorMap[status], "data-testid": iconTestId }),
         React.createElement(Typography, { color: colorMap[status], className: 'ml-[8px]', size: 'xxsmall' }, children)));
 };

package/dist-package/src/FieldRequirements/FieldRequirementItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldRequirementItem.js","sourceRoot":"","sources":["../../../src/FieldRequirements/FieldRequirementItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAC5E,OAAO,EAAE,YAAY,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3D,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAA;AAKF,MAAM,QAAQ,GAAkD;IAC9D,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,KAAK;CACb,CAAA;AAED,MAAM,QAAQ,GAAG;IACf,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,YAAY;IACrB,KAAK,EAAE,YAAY;CACpB,CAAA;AAWD,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAS,EAAE,EAAE;IACpE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;IACtC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAEjD,OAAO,CACL,oBAAC,IAAI,CAAC,IAAI,IACR,EAAE,EAAE,CAAC,EACL,SAAS,EAAE,OAAO,CAAC,oBAAoB,iBAC1B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI;QAE1B,oBAAC,aAAa,IAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,iBAAe,UAAU,GAAI;QACnE,oBAAC,UAAU,IAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,EAAC,UAAU,EAAC,IAAI,EAAC,SAAS,IACrE,QAAQ,CACE,CACH,CACb,CAAA;AACH,CAAC,CAAA;AAED,eAAe,oBAAoB,CAAA;AAEnC,MAAM,aAAa,GAAG,CACpB,MAAkC,EAClC,OAKC,EACD,EAAE;IACF,IAAI,MAAM,KAAK,OAAO,EAAE;QACtB,OAAO,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAA;KAC1B;IACD,IAAI,MAAM,KAAK,SAAS,EAAE;QACxB,OAAO,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAA;KAC5B;IAED,OAAO,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAA;AAC7B,CAAC,CAAA"}
+{"version":3,"file":"FieldRequirementItem.js","sourceRoot":"","sources":["../../../src/FieldRequirements/FieldRequirementItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAC5E,OAAO,EAAE,YAAY,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAK3D,MAAM,QAAQ,GAAkD;IAC9D,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,KAAK;CACb,CAAA;AAED,MAAM,QAAQ,GAAG;IACf,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,YAAY;IACrB,KAAK,EAAE,YAAY;CACpB,CAAA;AAWD,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAS,EAAE,EAAE;IACpE,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;IACtC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAEjD,OAAO,CACL,oBAAC,IAAI,CAAC,IAAI,IACR,EAAE,EAAE,CAAC,EACL,SAAS,EAAC,iCAAiC,iBAC9B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI;QAE1B,oBAAC,aAAa,IAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,iBAAe,UAAU,GAAI;QACnE,oBAAC,UAAU,IAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,EAAC,UAAU,EAAC,IAAI,EAAC,SAAS,IACrE,QAAQ,CACE,CACH,CACb,CAAA;AACH,CAAC,CAAA;AAED,eAAe,oBAAoB,CAAA;AAEnC,MAAM,aAAa,GAAG,CACpB,MAAkC,EAClC,OAKC,EACD,EAAE;IACF,IAAI,MAAM,KAAK,OAAO,EAAE;QACtB,OAAO,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAA;KAC1B;IACD,IAAI,MAAM,KAAK,SAAS,EAAE;QACxB,OAAO,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAA;KAC5B;IAED,OAAO,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAA;AAC7B,CAAC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"FieldRequirements.d.ts","sourceRoot":"","sources":["../../../src/FieldRequirements/FieldRequirements.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAMvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C,MAAM,WAAW,KAAK,CAAC,UAAU,CAAE,SAAQ,SAAS;IAClD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,yFAAyF;IACzF,IAAI,EAAE,OAAO,CAAA;IACb,yDAAyD;IACzD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,qEAAqE;IACrE,YAAY,EAAE,gBAAgB,CAAC,UAAU,CAAC,EAAE,CAAA;IAC5C,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,aAAa,CAAC,EAAE,MAAM,CAAA;KACvB,CAAA;CACF;AAID,eAAO,MAAM,iBAAiB;;;;;;;;CAyD7B,CAAA;AAUD,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"FieldRequirements.d.ts","sourceRoot":"","sources":["../../../src/FieldRequirements/FieldRequirements.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAOvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C,MAAM,WAAW,KAAK,CAAC,UAAU,CAAE,SAAQ,SAAS;IAClD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,yFAAyF;IACzF,IAAI,EAAE,OAAO,CAAA;IACb,yDAAyD;IACzD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,qEAAqE;IACrE,YAAY,EAAE,gBAAgB,CAAC,UAAU,CAAC,EAAE,CAAA;IAC5C,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,aAAa,CAAC,EAAE,MAAM,CAAA;KACvB,CAAA;CACF;AAID,eAAO,MAAM,iBAAiB;;;;;;;;CA2D7B,CAAA;AAUD,eAAe,iBAAiB,CAAA"}

package/dist-package/src/FieldRequirements/FieldRequirements.js

@@ -1,23 +1,24 @@
 import React from 'react';
-import { Collapse } from '@material-ui/core';
 import { Typography } from '@toptal/picasso-typography';
 import { Grid } from '@toptal/picasso-grid';
+import { Collapse } from '@toptal/picasso-collapse';
 import FieldRequirementItem from './FieldRequirementItem';
 const ANIMATION_TIMEOUT = 500;
 export const FieldRequirements = ({ value, description, open, error, timeout, requirements, className, style, testIds, }) => {
     return (React.createElement(Collapse, { style: style, className: className, in: open, timeout: timeout, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.root },
-        description && (React.createElement(Typography, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.description, variant: 'body', size: 'xxsmall', className: 'mt-[0.4rem]' }, description)),
-        React.createElement(Grid, { className: 'w-input', spacing: 0, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.gridContainer }, requirements.map(requirement => {
-            let status = 'default';
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            if (requirement.validator(value)) {
-                status = 'success';
-            }
-            else if (error) {
-                status = 'error';
-            }
-            return (React.createElement(FieldRequirementItem, { key: requirement.message, status: status, testIds: requirement.testIds }, requirement.message));
-        }))));
+        React.createElement(React.Fragment, null,
+            description && (React.createElement(Typography, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.description, variant: 'body', size: 'xxsmall', className: 'mt-[0.4rem]' }, description)),
+            React.createElement(Grid, { className: 'w-input', spacing: 0, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.gridContainer }, requirements.map(requirement => {
+                let status = 'default';
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                if (requirement.validator(value)) {
+                    status = 'success';
+                }
+                else if (error) {
+                    status = 'error';
+                }
+                return (React.createElement(FieldRequirementItem, { key: requirement.message, status: status, testIds: requirement.testIds }, requirement.message));
+            })))));
 };
 FieldRequirements.defaultProps = {
     open: false,

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

@@ -1 +1 @@
-{"version":3,"file":"FieldRequirements.js","sourceRoot":"","sources":["../../../src/FieldRequirements/FieldRequirements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAG3C,OAAO,oBAAoB,MAAM,wBAAwB,CAAA;AAuBzD,MAAM,iBAAiB,GAAG,GAAG,CAAA;AAE7B,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAc,EAC7C,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,SAAS,EACT,KAAK,EACL,OAAO,GACW,EAAE,EAAE;IACtB,OAAO,CACL,oBAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,IAAI,EACR,OAAO,EAAE,OAAO,iBACH,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI;QAEzB,WAAW,IAAI,CACd,oBAAC,UAAU,mBACI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EACjC,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,aAAa,IAEtB,WAAW,CACD,CACd;QACD,oBAAC,IAAI,IACH,SAAS,EAAC,SAAS,EACnB,OAAO,EAAE,CAAC,iBACG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,IAElC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YAC9B,IAAI,MAAM,GAA+B,SAAS,CAAA;YAElD,oEAAoE;YACpE,IAAI,WAAW,CAAC,SAAS,CAAC,KAAM,CAAC,EAAE;gBACjC,MAAM,GAAG,SAAS,CAAA;aACnB;iBAAM,IAAI,KAAK,EAAE;gBAChB,MAAM,GAAG,OAAO,CAAA;aACjB;YAED,OAAO,CACL,oBAAC,oBAAoB,IACnB,GAAG,EAAE,WAAW,CAAC,OAAO,EACxB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,WAAW,CAAC,OAAO,IAE3B,WAAW,CAAC,OAAO,CACC,CACxB,CAAA;QACH,CAAC,CAAC,CACG,CACE,CACZ,CAAA;AACH,CAAC,CAAA;AAED,iBAAiB,CAAC,YAAY,GAAG;IAC/B,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,iBAAiB;IAC1B,KAAK,EAAE,EAAE;CACV,CAAA;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAA;AAEnD,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"FieldRequirements.js","sourceRoot":"","sources":["../../../src/FieldRequirements/FieldRequirements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAGnD,OAAO,oBAAoB,MAAM,wBAAwB,CAAA;AAuBzD,MAAM,iBAAiB,GAAG,GAAG,CAAA;AAE7B,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAc,EAC7C,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,SAAS,EACT,KAAK,EACL,OAAO,GACW,EAAE,EAAE;IACtB,OAAO,CACL,oBAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,IAAI,EACR,OAAO,EAAE,OAAO,iBACH,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI;QAE1B;YACG,WAAW,IAAI,CACd,oBAAC,UAAU,mBACI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EACjC,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,aAAa,IAEtB,WAAW,CACD,CACd;YACD,oBAAC,IAAI,IACH,SAAS,EAAC,SAAS,EACnB,OAAO,EAAE,CAAC,iBACG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,IAElC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;gBAC9B,IAAI,MAAM,GAA+B,SAAS,CAAA;gBAElD,oEAAoE;gBACpE,IAAI,WAAW,CAAC,SAAS,CAAC,KAAM,CAAC,EAAE;oBACjC,MAAM,GAAG,SAAS,CAAA;iBACnB;qBAAM,IAAI,KAAK,EAAE;oBAChB,MAAM,GAAG,OAAO,CAAA;iBACjB;gBAED,OAAO,CACL,oBAAC,oBAAoB,IACnB,GAAG,EAAE,WAAW,CAAC,OAAO,EACxB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,WAAW,CAAC,OAAO,IAE3B,WAAW,CAAC,OAAO,CACC,CACxB,CAAA;YACH,CAAC,CAAC,CACG,CACN,CACM,CACZ,CAAA;AACH,CAAC,CAAA;AAED,iBAAiB,CAAC,YAAY,GAAG;IAC/B,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,iBAAiB;IAC1B,KAAK,EAAE,EAAE;CACV,CAAA;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAA;AAEnD,eAAe,iBAAiB,CAAA"}

package/dist-package/src/FieldsLayout/FieldsLayoutContext.d.ts

@@ -4,8 +4,9 @@ export declare type LabelColumnSize = 2 | 3 | 4;
 export declare type ResponsiveLabelColumnSize = {
     [k in BreakpointKeys]?: LabelColumnSize;
 };
+export declare type FieldLayout = 'horizontal' | 'vertical';
 export declare type FieldsLayoutContextValue = {
-    layout: 'horizontal' | 'vertical';
+    layout: FieldLayout;
     labelWidth: LabelColumnSize | ResponsiveLabelColumnSize;
 };
 export declare const DEFAULT_LABEL_WIDTH_SIZE: LabelColumnSize;

package/dist-package/src/FieldsLayout/FieldsLayoutContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldsLayoutContext.d.ts","sourceRoot":"","sources":["../../../src/FieldsLayout/FieldsLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAE3D,oBAAY,eAAe,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAEvC,oBAAY,yBAAyB,GAAG;KACrC,CAAC,IAAI,cAAc,CAAC,CAAC,EAAE,eAAe;CACxC,CAAA;AAED,oBAAY,wBAAwB,GAAG;IACrC,MAAM,EAAE,YAAY,GAAG,UAAU,CAAA;IACjC,UAAU,EAAE,eAAe,GAAG,yBAAyB,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,eAAmB,CAAA;AAO1D,oBAAY,gCAAgC,GAAG;IAC7C,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAClC,UAAU,CAAC,EAAE,eAAe,GAAG,yBAAyB,CAAA;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,2BAA2B,sCAIrC,gCAAgC,gBAgBlC,CAAA;AAED,eAAO,MAAM,sBAAsB,gCAAwC,CAAA"}
+{"version":3,"file":"FieldsLayoutContext.d.ts","sourceRoot":"","sources":["../../../src/FieldsLayout/FieldsLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAE3D,oBAAY,eAAe,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAEvC,oBAAY,yBAAyB,GAAG;KACrC,CAAC,IAAI,cAAc,CAAC,CAAC,EAAE,eAAe;CACxC,CAAA;AAED,oBAAY,WAAW,GAAG,YAAY,GAAG,UAAU,CAAA;AAEnD,oBAAY,wBAAwB,GAAG;IACrC,MAAM,EAAE,WAAW,CAAA;IACnB,UAAU,EAAE,eAAe,GAAG,yBAAyB,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,eAAmB,CAAA;AAO1D,oBAAY,gCAAgC,GAAG;IAC7C,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAClC,UAAU,CAAC,EAAE,eAAe,GAAG,yBAAyB,CAAA;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,2BAA2B,sCAIrC,gCAAgC,gBAgBlC,CAAA;AAED,eAAO,MAAM,sBAAsB,gCAAwC,CAAA"}

package/dist-package/src/FieldsLayout/FieldsLayoutContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldsLayoutContext.js","sourceRoot":"","sources":["../../../src/FieldsLayout/FieldsLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAcrD,MAAM,CAAC,MAAM,wBAAwB,GAAoB,CAAC,CAAA;AAE1D,MAAM,mBAAmB,GAAG,aAAa,CAA2B;IAClE,MAAM,EAAE,UAAU;IAClB,UAAU,EAAE,wBAAwB;CACrC,CAAC,CAAA;AAQF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAC1C,MAAM,GAAG,UAAU,EACnB,UAAU,GAAG,wBAAwB,EACrC,QAAQ,GACyB,EAAE,EAAE;IACrC,MAAM,aAAa,GAAG,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;IAEjD,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;QAC3C,UAAU;KACX,CAAC,EACF,CAAC,MAAM,EAAE,aAAa,EAAE,UAAU,CAAC,CACpC,CAAA;IAED,OAAO,CACL,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACvC,QAAQ,CACoB,CAChC,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAA"}
+{"version":3,"file":"FieldsLayoutContext.js","sourceRoot":"","sources":["../../../src/FieldsLayout/FieldsLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAgBrD,MAAM,CAAC,MAAM,wBAAwB,GAAoB,CAAC,CAAA;AAE1D,MAAM,mBAAmB,GAAG,aAAa,CAA2B;IAClE,MAAM,EAAE,UAAU;IAClB,UAAU,EAAE,wBAAwB;CACrC,CAAC,CAAA;AAQF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAC1C,MAAM,GAAG,UAAU,EACnB,UAAU,GAAG,wBAAwB,EACrC,QAAQ,GACyB,EAAE,EAAE;IACrC,MAAM,aAAa,GAAG,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;IAEjD,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;QAC3C,UAAU;KACX,CAAC,EACF,CAAC,MAAM,EAAE,aAAa,EAAE,UAAU,CAAC,CACpC,CAAA;IAED,OAAO,CACL,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACvC,QAAQ,CACoB,CAChC,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-form",
-  "version": "3.0.7",
+  "version": "4.0.0",
   "description": "Toptal UI components library - Form",
   "publishConfig": {
     "access": "public"
@@ -22,11 +22,12 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-container": "1.0.3",
-    "@toptal/picasso-grid": "3.0.6",
+    "@toptal/picasso-collapse": "2.0.0",
+    "@toptal/picasso-container": "2.0.0",
+    "@toptal/picasso-grid": "4.0.0",
     "@toptal/picasso-icons": "1.5.0",
     "@toptal/picasso-shared": "15.0.0",
-    "@toptal/picasso-typography": "2.0.2",
+    "@toptal/picasso-typography": "3.0.0",
     "@toptal/picasso-utils": "1.0.3",
     "ap-style-title-case": "^1.1.2",
     "classnames": "^2.5.1",
@@ -39,14 +40,14 @@
   "peerDependencies": {
     "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
-    "@toptal/picasso-tailwind": ">=2.4.0",
+    "@toptal/picasso-tailwind": ">=2.7",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.1",
+    "@toptal/picasso-provider": "5.0.0",
     "@toptal/picasso-test-utils": "1.1.1"
   },
   "files": [

package/src/FieldRequirements/FieldRequirementItem.tsx

@@ -1,17 +1,9 @@
 import type { PropsWithChildren } from 'react'
 import React from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import { Typography } from '@toptal/picasso-typography'
 import { Bullet16, CheckMinor16, CloseMinor16 } from '@toptal/picasso-icons'
 import { GridCompound as Grid } from '@toptal/picasso-grid'
 
-import styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'FieldRequirementItem',
-})
-
 export type FieldRequirementItemStatus = 'default' | 'success' | 'error'
 type ColorType = 'dark-grey' | 'inherit' | 'red'
 
@@ -37,15 +29,13 @@ interface Props extends PropsWithChildren<{}> {
   }
 }
 const FieldRequirementItem = ({ children, status, testIds }: Props) => {
-  const classes = useStyles()
-
   const IconComponent = IconsMap[status]
   const iconTestId = getIconTestId(status, testIds)
 
   return (
     <Grid.Item
       xs={6}
-      className={classes.fieldRequirementItem}
+      className='flex items-center text-gray-600'
       data-testid={testIds?.root}
     >
       <IconComponent color={colorMap[status]} data-testid={iconTestId} />

package/src/FieldRequirements/FieldRequirements.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Collapse } from '@material-ui/core'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { Typography } from '@toptal/picasso-typography'
 import { Grid } from '@toptal/picasso-grid'
+import { Collapse } from '@toptal/picasso-collapse'
 
 import type { FieldRequirementItemStatus } from './FieldRequirementItem'
 import FieldRequirementItem from './FieldRequirementItem'
@@ -49,42 +49,44 @@ export const FieldRequirements = <TValueType,>({
       timeout={timeout}
       data-testid={testIds?.root}
     >
-      {description && (
-        <Typography
-          data-testid={testIds?.description}
-          variant='body'
-          size='xxsmall'
-          className='mt-[0.4rem]'
+      <>
+        {description && (
+          <Typography
+            data-testid={testIds?.description}
+            variant='body'
+            size='xxsmall'
+            className='mt-[0.4rem]'
+          >
+            {description}
+          </Typography>
+        )}
+        <Grid
+          className='w-input'
+          spacing={0}
+          data-testid={testIds?.gridContainer}
         >
-          {description}
-        </Typography>
-      )}
-      <Grid
-        className='w-input'
-        spacing={0}
-        data-testid={testIds?.gridContainer}
-      >
-        {requirements.map(requirement => {
-          let status: FieldRequirementItemStatus = 'default'
+          {requirements.map(requirement => {
+            let status: FieldRequirementItemStatus = 'default'
 
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          if (requirement.validator(value!)) {
-            status = 'success'
-          } else if (error) {
-            status = 'error'
-          }
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            if (requirement.validator(value!)) {
+              status = 'success'
+            } else if (error) {
+              status = 'error'
+            }
 
-          return (
-            <FieldRequirementItem
-              key={requirement.message}
-              status={status}
-              testIds={requirement.testIds}
-            >
-              {requirement.message}
-            </FieldRequirementItem>
-          )
-        })}
-      </Grid>
+            return (
+              <FieldRequirementItem
+                key={requirement.message}
+                status={status}
+                testIds={requirement.testIds}
+              >
+                {requirement.message}
+              </FieldRequirementItem>
+            )
+          })}
+        </Grid>
+      </>
     </Collapse>
   )
 }

package/src/FieldsLayout/FieldsLayoutContext.tsx

@@ -8,8 +8,10 @@ export type ResponsiveLabelColumnSize = {
   [k in BreakpointKeys]?: LabelColumnSize
 }
 
+export type FieldLayout = 'horizontal' | 'vertical'
+
 export type FieldsLayoutContextValue = {
-  layout: 'horizontal' | 'vertical'
+  layout: FieldLayout
   labelWidth: LabelColumnSize | ResponsiveLabelColumnSize
 }
 

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

@@ -22,29 +22,15 @@ exports[`FormError renders 1`] = `
           </span>
         </label>
         <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
           class="PicassoFormError-root"

package/dist-package/src/FieldRequirements/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<{}, "fieldRequirementItem">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

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

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

@@ -1,9 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default ({ palette }) => createStyles({
-    fieldRequirementItem: {
-        display: 'flex',
-        alignItems: 'center',
-        color: palette.grey.main2,
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/FieldRequirements/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,oBAAoB,EAAE;QACpB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;KAC1B;CACF,CAAC,CAAA"}

package/src/FieldRequirements/styles.ts

@@ -1,11 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-
-export default ({ palette }: Theme) =>
-  createStyles({
-    fieldRequirementItem: {
-      display: 'flex',
-      alignItems: 'center',
-      color: palette.grey.main2,
-    },
-  })