@toptal/picasso-form 6.2.2-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7 → 6.2.2-alpha-MP-1619-form-warning-state-and-error-as-react-node-ea5bb78b6.7

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

@@ -4,5 +4,6 @@ export declare const FormCompound: import("react").ForwardRefExoticComponent<imp
     Hint: import("react").ForwardRefExoticComponent<import("../FormHint/FormHint").Props & import("react").RefAttributes<HTMLDivElement>>;
     Error: import("react").ForwardRefExoticComponent<import("../FormError/FormError").Props & import("react").RefAttributes<HTMLDivElement>>;
     Label: import("react").ForwardRefExoticComponent<import("@toptal/picasso-form-label/dist-package/src/FormLabel/FormLabel").Props & import("react").RefAttributes<HTMLLabelElement>>;
+    Warning: import("react").ForwardRefExoticComponent<import("../FormWarning/FormWarning").Props & import("react").RefAttributes<HTMLDivElement>>;
 };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormCompound/index.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,YAAY;;;;;CAKvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormCompound/index.ts"],"names":[],"mappings":";AAQA,eAAO,MAAM,YAAY;;;;;;CAMvB,CAAA"}

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

@@ -3,10 +3,12 @@ import { Form } from '../Form';
 import { FormError } from '../FormError';
 import { FormField } from '../FormField';
 import { FormHint } from '../FormHint';
+import { FormWarning } from '../FormWarning';
 export const FormCompound = Object.assign(Form, {
     Field: FormField,
     Hint: FormHint,
     Error: FormError,
     Label: FormLabel,
+    Warning: FormWarning,
 });
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/FormCompound/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAEtD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;IAC9C,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/FormCompound/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAEtD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;IAC9C,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,WAAW;CACrB,CAAC,CAAA"}

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

@@ -3,9 +3,11 @@ import React from 'react';
 import type { BaseProps } from '@toptal/picasso-shared';
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
     /** The text of the hint */
-    hint?: string;
+    hint?: string | ReactNode;
     /** The text of the error */
-    error?: string;
+    error?: string | ReactNode;
+    /** The text of the warning */
+    warning?: string | ReactNode;
     /** The content of the Form.Field */
     children: ReactNode;
     /** Field requirements for this specific field */

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAA+B,MAAM,OAAO,CAAA;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AASvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAA;IACnB,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B,kDAAkD;IAClD,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B,2CAA2C;IAC3C,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AA8CD,eAAO,MAAM,SAAS,8EAiDpB,CAAA;AAMF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAA+B,MAAM,OAAO,CAAA;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAUvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAA;IACnB,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B,kDAAkD;IAClD,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B,2CAA2C;IAC3C,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AA8CD,eAAO,MAAM,SAAS,8EAuDpB,CAAA;AAMF,eAAe,SAAS,CAAA"}

package/dist-package/src/FormField/FormField.js

@@ -16,6 +16,7 @@ import { useFieldsLayoutContext } from '@toptal/picasso-form-layout';
 import { FormHint } from '../FormHint';
 import { FormError } from '../FormError';
 import { createLabelWidthStyles, horizontalLayoutClasses } from './styles';
+import { FormWarning } from '../FormWarning';
 const FormFieldAdornments = ({ autoSaveIndicator, children, hasMultilineCounter, }) => {
     const { layout } = useFieldsLayoutContext();
     const isHorizontal = layout === 'horizontal';
@@ -30,7 +31,7 @@ const FormFieldAdornments = ({ autoSaveIndicator, children, hasMultilineCounter,
         React.createElement(Container, { className: twJoin('absolute right-0', hasMultilineCounter ? '-top-[0.875rem]' : 'top-0') }, autoSaveIndicator)));
 };
 export const FormField = forwardRef(function FormField(props, ref) {
-    const { autoSaveIndicator, className, style, hint, children, error, fieldRequirements, hasMultilineCounter } = props, rest = __rest(props, ["autoSaveIndicator", "className", "style", "hint", "children", "error", "fieldRequirements", "hasMultilineCounter"]);
+    const { autoSaveIndicator, className, style, hint, children, error, warning, fieldRequirements, hasMultilineCounter } = props, rest = __rest(props, ["autoSaveIndicator", "className", "style", "hint", "children", "error", "warning", "fieldRequirements", "hasMultilineCounter"]);
     const { layout, labelWidth } = useFieldsLayoutContext();
     const isHorizontal = layout === 'horizontal';
     const labelWidthStyles = isHorizontal
@@ -40,7 +41,8 @@ export const FormField = forwardRef(function FormField(props, ref) {
         children,
         React.createElement(FormFieldAdornments, { autoSaveIndicator: autoSaveIndicator, hasMultilineCounter: hasMultilineCounter },
             error && React.createElement(FormError, null, error),
-            hint && (React.createElement(FormHint, { className: twJoin(error && hint && 'mt-0') }, hint)),
+            warning && (React.createElement(FormWarning, { className: twJoin(error && hint && 'mt-0') }, warning)),
+            hint && (React.createElement(FormHint, { className: twJoin((error || warning) && hint && 'mt-0') }, hint)),
             fieldRequirements)));
 });
 FormField.defaultProps = {};

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/FormField/FormField.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAEpE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAsB1E,MAAM,mBAAmB,GAAG,CAAC,EAC3B,iBAAiB,EACjB,QAAQ,EACR,mBAAmB,GACM,EAAE,EAAE;IAC7B,MAAM,EAAE,MAAM,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAC3C,MAAM,YAAY,GAAG,MAAM,KAAK,YAAY,CAAA;IAE5C,IAAI,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;QAC3C,OAAO,IAAI,CAAA;KACZ;IAED,IAAI,CAAC,iBAAiB,EAAE;QACtB,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,YAAY,IAAI,mBAAmB,CAAC,IACxD,QAAQ,CACL,CACP,CAAA;KACF;IAED,OAAO,CACL,oBAAC,SAAS,IACR,IAAI,QACJ,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,MAAM,CAAC,eAAe,EAAE,YAAY,IAAI,mBAAmB,CAAC;QAEtE,QAAQ;QACT,oBAAC,SAAS,IACR,SAAS,EAAE,MAAM,CACf,kBAAkB,EAClB,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAClD,IAEA,iBAAiB,CACR,CACF,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAwB,SAAS,SAAS,CAC3E,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,iBAAiB,EACjB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,mBAAmB,KAEjB,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,oHAUL,CAAQ,CAAA;IAET,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,sBAAsB,EAAE,CAAA;IACvD,MAAM,YAAY,GAAG,MAAM,KAAK,YAAY,CAAA;IAC5C,MAAM,gBAAgB,GAAG,YAAY;QACnC,CAAC,CAAC,sBAAsB,CAAC,UAAU,CAAC;QACpC,CAAC,CAAC,EAAE,CAAA;IAEN,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,wBAAwB,EACxB,YAAY,IAAI,uBAAuB,EACvC,SAAS,CACV,EACD,KAAK,kCAAO,KAAK,GAAK,gBAAgB,2BAChB,OAAO,CAAC,KAAK,CAAC;QAEnC,QAAQ;QACT,oBAAC,mBAAmB,IAClB,iBAAiB,EAAE,iBAAiB,EACpC,mBAAmB,EAAE,mBAAmB;YAEvC,KAAK,IAAI,oBAAC,SAAS,QAAE,KAAK,CAAa;YACvC,IAAI,IAAI,CACP,oBAAC,QAAQ,IAAC,SAAS,EAAE,MAAM,CAAC,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,IACjD,IAAI,CACI,CACZ;YACA,iBAAiB,CACE,CAClB,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,SAAS,CAAC,YAAY,GAAG,EAAE,CAAA;AAE3B,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/FormField/FormField.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+import React from 'react';
+import type { BaseProps } from '@toptal/picasso-shared';
+export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
+    /** The text of the error */
+    children: ReactNode;
+}
+export declare const FormWarning: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default FormWarning;
+//# sourceMappingURL=FormWarning.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormWarning.d.ts","sourceRoot":"","sources":["../../../src/FormWarning/FormWarning.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,WAAW,8EAiBvB,CAAA;AAID,eAAe,WAAW,CAAA"}

package/dist-package/src/FormWarning/FormWarning.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from 'react';
+import { Typography } from '@toptal/picasso-typography';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+export const FormWarning = forwardRef(function FormWarning(props, ref) {
+    const { children, className, style } = props, rest = __rest(props, ["children", "className", "style"]);
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: twMerge('mt-1', className), style: style }),
+        React.createElement(Typography, { color: 'yellow', size: 'xxsmall', className: 'cursor-default' }, children)));
+});
+FormWarning.displayName = 'FormWarning';
+export default FormWarning;
+//# sourceMappingURL=FormWarning.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormWarning.js","sourceRoot":"","sources":["../../../src/FormWarning/FormWarning.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,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IAC7B,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,QAAQ,EAAC,IAAI,EAAC,SAAS,EAAC,SAAS,EAAC,gBAAgB,IACjE,QAAQ,CACE,CACT,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,WAAW,CAAA"}

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

@@ -0,0 +1,5 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared';
+import type { Props } from './FormWarning';
+export { default as FormWarning } from './FormWarning';
+export declare type FormWarningProps = OmitInternalProps<Props>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormWarning/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAE1C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,oBAAY,gBAAgB,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}

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

@@ -0,0 +1,2 @@
+export { default as FormWarning } from './FormWarning';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/FormWarning/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-form",
-  "version": "6.2.2-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
+  "version": "6.2.2-alpha-MP-1619-form-warning-state-and-error-as-react-node-ea5bb78b6.7+ea5bb78b6",
   "description": "Toptal UI components library - Form",
   "publishConfig": {
     "access": "public"
@@ -22,16 +22,16 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-alert": "3.0.33-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
-    "@toptal/picasso-collapse": "3.0.4-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
-    "@toptal/picasso-container": "3.1.3-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
-    "@toptal/picasso-form-label": "1.0.3-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
-    "@toptal/picasso-form-layout": "1.0.3-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
-    "@toptal/picasso-grid": "5.0.10-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
-    "@toptal/picasso-icons": "1.12.2-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
-    "@toptal/picasso-shared": "15.0.1-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.353+04c9c3a7c",
-    "@toptal/picasso-typography": "4.0.4-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
-    "@toptal/picasso-utils": "3.1.1-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
+    "@toptal/picasso-alert": "3.0.33-alpha-MP-1619-form-warning-state-and-error-as-react-node-ea5bb78b6.7+ea5bb78b6",
+    "@toptal/picasso-collapse": "3.0.4-alpha-MP-1619-form-warning-state-and-error-as-react-node-ea5bb78b6.7+ea5bb78b6",
+    "@toptal/picasso-container": "3.1.3-alpha-MP-1619-form-warning-state-and-error-as-react-node-ea5bb78b6.7+ea5bb78b6",
+    "@toptal/picasso-form-label": "1.0.3-alpha-MP-1619-form-warning-state-and-error-as-react-node-ea5bb78b6.7+ea5bb78b6",
+    "@toptal/picasso-form-layout": "1.0.3-alpha-MP-1619-form-warning-state-and-error-as-react-node-ea5bb78b6.7+ea5bb78b6",
+    "@toptal/picasso-grid": "5.0.10-alpha-MP-1619-form-warning-state-and-error-as-react-node-ea5bb78b6.7+ea5bb78b6",
+    "@toptal/picasso-icons": "1.12.2-alpha-MP-1619-form-warning-state-and-error-as-react-node-ea5bb78b6.7+ea5bb78b6",
+    "@toptal/picasso-shared": "15.0.1-alpha-MP-1619-form-warning-state-and-error-as-react-node-ea5bb78b6.353+ea5bb78b6",
+    "@toptal/picasso-typography": "4.0.4-alpha-MP-1619-form-warning-state-and-error-as-react-node-ea5bb78b6.7+ea5bb78b6",
+    "@toptal/picasso-utils": "3.1.1-alpha-MP-1619-form-warning-state-and-error-as-react-node-ea5bb78b6.7+ea5bb78b6",
     "ap-style-title-case": "^1.1.2",
     "classnames": "^2.5.1",
     "debounce": "^1.2.1"
@@ -51,14 +51,14 @@
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "5.0.1-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.274+04c9c3a7c",
-    "@toptal/picasso-tailwind-merge": "2.0.4-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.353+04c9c3a7c"
+    "@toptal/picasso-provider": "5.0.1-alpha-MP-1619-form-warning-state-and-error-as-react-node-ea5bb78b6.274+ea5bb78b6",
+    "@toptal/picasso-tailwind-merge": "2.0.4-alpha-MP-1619-form-warning-state-and-error-as-react-node-ea5bb78b6.7+ea5bb78b6",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-MP-1619-form-warning-state-and-error-as-react-node-ea5bb78b6.353+ea5bb78b6"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "04c9c3a7c386e0e32b8e5b426bf4d49cb2ba369a"
+  "gitHead": "ea5bb78b60ca6fa7493f53bb596f8f200559db94"
 }

package/src/FormCompound/index.ts

@@ -4,10 +4,12 @@ import { Form } from '../Form'
 import { FormError } from '../FormError'
 import { FormField } from '../FormField'
 import { FormHint } from '../FormHint'
+import { FormWarning } from '../FormWarning'
 
 export const FormCompound = Object.assign(Form, {
   Field: FormField,
   Hint: FormHint,
   Error: FormError,
   Label: FormLabel,
+  Warning: FormWarning,
 })

package/src/FormField/FormField.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { forwardRef, Children } from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
@@ -8,12 +9,15 @@ import { useFieldsLayoutContext } from '@toptal/picasso-form-layout'
 import { FormHint } from '../FormHint'
 import { FormError } from '../FormError'
 import { createLabelWidthStyles, horizontalLayoutClasses } from './styles'
+import { FormWarning } from '../FormWarning'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** The text of the hint */
-  hint?: string
+  hint?: string | ReactNode
   /** The text of the error */
-  error?: string
+  error?: string | ReactNode
+  /** The text of the warning */
+  warning?: string | ReactNode
   /** The content of the Form.Field */
   children: ReactNode
   /** Field requirements for this specific field */
@@ -79,6 +83,7 @@ export const FormField = forwardRef<HTMLDivElement, Props>(function FormField(
     hint,
     children,
     error,
+    warning,
     fieldRequirements,
     hasMultilineCounter,
     ...rest
@@ -108,8 +113,13 @@ export const FormField = forwardRef<HTMLDivElement, Props>(function FormField(
         hasMultilineCounter={hasMultilineCounter}
       >
         {error && <FormError>{error}</FormError>}
+        {warning && (
+          <FormWarning className={twJoin(error && hint && 'mt-0')}>
+            {warning}
+          </FormWarning>
+        )}
         {hint && (
-          <FormHint className={twJoin(error && hint && 'mt-0')}>
+          <FormHint className={twJoin((error || warning) && hint && 'mt-0')}>
             {hint}
           </FormHint>
         )}

package/src/FormField/story/Error.example.tsx

@@ -14,6 +14,16 @@ const Example = () => (
             placeholder='e.g., Sant Marti'
           />
         </Form.Field>
+
+        <Form.Field error={<span>This field is required</span>}>
+          <Form.Label htmlFor='region'>Region</Form.Label>
+          <Input
+            status='error'
+            id='region'
+            width='full'
+            placeholder='e.g., Catalonia'
+          />
+        </Form.Field>
       </Form>
     </Grid.Item>
   </Grid>

package/src/FormField/story/ErrorAndWarning.example.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Form, Input, Grid } from '@toptal/picasso'
+
+const Example = () => (
+  <Grid>
+    <Grid.Item sm={5}>
+      <Form>
+        <Form.Field
+          error='This should not contain any special characters'
+          warning='This might be too long'
+        >
+          <Form.Label htmlFor='district'>District</Form.Label>
+          <Input
+            status='error'
+            id='district'
+            width='full'
+            placeholder='e.g., Sant Marti'
+          />
+        </Form.Field>
+      </Form>
+    </Grid.Item>
+  </Grid>
+)
+
+export default Example

package/src/FormField/story/Warning.example.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Form, Input, Grid } from '@toptal/picasso'
+
+const Example = () => (
+  <Grid>
+    <Grid.Item sm={5}>
+      <Form>
+        <Form.Field warning='This field is required'>
+          <Form.Label htmlFor='district'>District</Form.Label>
+          <Input
+            status='warning'
+            id='district'
+            width='full'
+            placeholder='e.g., Sant Marti'
+          />
+        </Form.Field>
+      </Form>
+    </Grid.Item>
+  </Grid>
+)
+
+export default Example

package/src/FormField/story/index.jsx

@@ -12,6 +12,12 @@ const chapter = PicassoBook.connectToPage(page =>
     .addExample('FormField/story/Default.example.tsx', 'Default', 'base/Form')
     .addExample('FormField/story/Required.example.tsx', 'Required', 'base/Form')
     .addExample('FormField/story/Error.example.tsx', 'Error', 'base/Form')
+    .addExample('FormField/story/Warning.example.tsx', 'Warning', 'base/Form')
+    .addExample(
+      'FormField/story/ErrorAndWarning.example.tsx',
+      'Error and Warning',
+      'base/Form'
+    )
     .addExample('FormField/story/Hint.example.tsx', 'Hint', 'base/Form')
     .addExample(
       'FormField/story/HintAndError.example.tsx',

package/src/FormWarning/FormWarning.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode, HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+import type { BaseProps } from '@toptal/picasso-shared'
+import { Typography } from '@toptal/picasso-typography'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
+  /** The text of the error */
+  children: ReactNode
+}
+
+export const FormWarning = forwardRef<HTMLDivElement, Props>(
+  function FormWarning(props, ref) {
+    const { children, className, style, ...rest } = props
+
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={twMerge('mt-1', className)}
+        style={style}
+      >
+        <Typography color='yellow' size='xxsmall' className='cursor-default'>
+          {children}
+        </Typography>
+      </div>
+    )
+  }
+)
+
+FormWarning.displayName = 'FormWarning'
+
+export default FormWarning

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

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormWarning renders 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <form
+      class=""
+    >
+      <div
+        class="text-[1rem] [&+&]:mt-4"
+        data-field-has-error="false"
+      >
+        <label
+          class="block leading-[1em] mb-[0.5em] text-graphite"
+        >
+          <span
+            class="text-[0.875rem]"
+          >
+            Label:
+          </span>
+        </label>
+        <div
+          class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap 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(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
+        >
+          <input
+            aria-invalid="false"
+            autocomplete="none"
+            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=""
+          />
+        </div>
+        <div
+          class="mt-1"
+        >
+          <p
+            class="m-0 text-2xs text-yellow font-regular cursor-default"
+          >
+            My Warning
+          </p>
+        </div>
+        <div
+          class="mt-1"
+        >
+          <p
+            class="m-0 text-2xs text-graphite font-regular"
+          >
+            This is a hint
+          </p>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+`;

package/src/FormWarning/index.ts

@@ -0,0 +1,6 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+
+import type { Props } from './FormWarning'
+
+export { default as FormWarning } from './FormWarning'
+export type FormWarningProps = OmitInternalProps<Props>

package/src/FormWarning/story/index.jsx

@@ -0,0 +1,9 @@
+import { FormWarning } from '../FormWarning'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const componentDocs = PicassoBook.createComponentDocs(
+  FormWarning,
+  'Form.Warning'
+)
+
+export default { componentDocs }

package/src/FormWarning/test.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import type { RenderResult } from '@toptal/picasso-test-utils'
+import { render } from '@toptal/picasso-test-utils'
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+import { Input } from '@toptal/picasso-input'
+
+import type { Props } from './FormWarning'
+import { FormCompound as Form } from '../FormCompound'
+
+const TestFormError = ({ children }: OmitInternalProps<Props>) => {
+  return (
+    <Form>
+      <Form.Field>
+        <Form.Label>Label:</Form.Label>
+        <Input />
+        <Form.Warning>{children}</Form.Warning>
+        <Form.Hint>This is a hint</Form.Hint>
+      </Form.Field>
+    </Form>
+  )
+}
+
+describe('FormWarning', () => {
+  let api: RenderResult
+
+  beforeEach(() => {
+    api = render(<TestFormError>My Warning</TestFormError>)
+  })
+  it('renders', () => {
+    const { container } = api
+
+    expect(container).toMatchSnapshot()
+  })
+})