@toptal/picasso-form 6.1.9-alpha-ff-x-replace-overflow-hidden-by-clip-popper-4c9b94a3e.1 → 6.2.1-alpha-ff-x-replace-overflow-hidden-by-clip-popper-9796ca8c3.5

package/src/FormLevelWarning/FormLevelWarning.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react'
+import type { ReactNode, HTMLAttributes } from 'react'
+import type { BaseProps } from '@toptal/picasso-shared'
+import { Alert } from '@toptal/picasso-alert'
+import { Container } from '@toptal/picasso-container'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+}
+
+export const FormLevelWarning = forwardRef<HTMLDivElement, Props>(
+  function FormLevelWarning(props, ref) {
+    const { children, className, style, ...rest } = props
+
+    return (
+      <Container
+        {...rest}
+        ref={ref}
+        className={twMerge('mt-4', className)}
+        style={style}
+      >
+        <Alert variant='yellow'>{children}</Alert>
+      </Container>
+    )
+  }
+)
+
+FormLevelWarning.displayName = 'FormLevelWarning'
+
+export default FormLevelWarning

package/src/FormLevelWarning/index.ts

@@ -0,0 +1 @@
+export { default } from './FormLevelWarning'

package/src/index.ts

@@ -3,9 +3,20 @@ export * from './Form'
 export * from './FormError'
 export * from './FormHint'
 export * from './FormField'
-export * from './FormControlLabel'
-export * from './FormLabel'
-export * from './FieldsLayout'
+export type {
+  FieldsLayoutContextProviderProps,
+  FieldsLayoutContextValue,
+  FieldLayout,
+  LabelColumnSize,
+  ResponsiveLabelColumnSize,
+} from '@toptal/picasso-form-layout'
+export {
+  useFieldsLayoutContext,
+  FieldsLayoutContextProvider,
+} from '@toptal/picasso-form-layout'
+
 export * from './FormAutoSaveIndicator'
 export * from './FieldRequirements'
 export * from './FormActionsContainer'
+export { default as FormLevelError } from './FormLevelError'
+export { default as FormLevelWarning } from './FormLevelWarning'

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import type { BreakpointKeys } from '@toptal/picasso-utils';
-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: FieldLayout;
-    labelWidth: LabelColumnSize | ResponsiveLabelColumnSize;
-};
-export declare const DEFAULT_LABEL_WIDTH_SIZE: LabelColumnSize;
-export declare type FieldsLayoutContextProviderProps = {
-    layout?: FieldLayout;
-    labelWidth?: LabelColumnSize | ResponsiveLabelColumnSize;
-    children: React.ReactNode;
-};
-export declare const FieldsLayoutContextProvider: ({ layout, labelWidth, children, }: FieldsLayoutContextProviderProps) => JSX.Element;
-export declare const useFieldsLayoutContext: () => FieldsLayoutContextValue;
-//# sourceMappingURL=FieldsLayoutContext.d.ts.map

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

@@ -1 +0,0 @@
-{"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,WAAW,CAAA;IACpB,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

@@ -1,17 +0,0 @@
-import React, { createContext, useContext, useMemo } from 'react';
-import { useBreakpoint } from '@toptal/picasso-utils';
-export const DEFAULT_LABEL_WIDTH_SIZE = 3;
-const FieldsLayoutContext = createContext({
-    layout: 'vertical',
-    labelWidth: DEFAULT_LABEL_WIDTH_SIZE,
-});
-export const FieldsLayoutContextProvider = ({ layout = 'vertical', labelWidth = DEFAULT_LABEL_WIDTH_SIZE, children, }) => {
-    const isSmallScreen = useBreakpoint(['sm', 'xs']);
-    const value = useMemo(() => ({
-        layout: isSmallScreen ? 'vertical' : layout,
-        labelWidth,
-    }), [layout, isSmallScreen, labelWidth]);
-    return (React.createElement(FieldsLayoutContext.Provider, { value: value }, children));
-};
-export const useFieldsLayoutContext = () => useContext(FieldsLayoutContext);
-//# sourceMappingURL=FieldsLayoutContext.js.map

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

@@ -1 +0,0 @@
-{"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/dist-package/src/FieldsLayout/index.d.ts

@@ -1,2 +0,0 @@
-export * from './FieldsLayoutContext';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FieldsLayout/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

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

@@ -1,2 +0,0 @@
-export * from './FieldsLayoutContext';
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/FieldsLayout/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

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

@@ -1,23 +0,0 @@
-import type { ReactElement, ReactNode, LabelHTMLAttributes } from 'react';
-import React from 'react';
-import type { FormControlLabelProps } from '@material-ui/core/FormControlLabel';
-import type { StandardProps, TextLabelProps } from '@toptal/picasso-shared';
-import type { RequiredDecoration } from '../FormLabel';
-export declare type FormControlLabelAttributesType = LabelHTMLAttributes<HTMLLabelElement> & Pick<FormControlLabelProps, 'onChange'>;
-export interface Props extends StandardProps, TextLabelProps, FormControlLabelAttributesType {
-    /** A control element. For instance, it can be be a Radio or a Checkbox */
-    control: ReactElement;
-    /** The text to be used in an enclosing label element */
-    label?: ReactNode;
-    /** Shows whether label is disabled or not */
-    disabled?: boolean;
-    /** Whether to show asterisk or (optional) postfix as a 'required' decoration */
-    requiredDecoration?: RequiredDecoration;
-    classes?: {
-        root?: string;
-        label?: string;
-    };
-}
-declare const FormControlLabel: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLabelElement>>;
-export default FormControlLabel;
-//# sourceMappingURL=FormControlLabel.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FormControlLabel.d.ts","sourceRoot":"","sources":["../../../src/FormControlLabel/FormControlLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AACzE,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAC/E,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAG3E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAItD,oBAAY,8BAA8B,GACxC,mBAAmB,CAAC,gBAAgB,CAAC,GACnC,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC,CAAA;AAE3C,MAAM,WAAW,KACf,SAAQ,aAAa,EACnB,cAAc,EACd,8BAA8B;IAChC,0EAA0E;IAC1E,OAAO,EAAE,YAAY,CAAA;IACrB,wDAAwD;IACxD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAA;CACF;AAED,QAAA,MAAM,gBAAgB,gFA+CrB,CAAA;AAID,eAAe,gBAAgB,CAAA"}

package/dist-package/src/FormControlLabel/FormControlLabel.js

@@ -1,26 +0,0 @@
-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 { twMerge } from '@toptal/picasso-tailwind-merge';
-import { FormCompound as Form } from '../FormCompound';
-import { useFieldsLayoutContext } from '../FieldsLayout';
-const FormControlLabel = forwardRef(function FormControlLabel(props, ref) {
-    const { control, label, className, style, disabled, requiredDecoration, titleCase, classes } = props, rest = __rest(props, ["control", "label", "className", "style", "disabled", "requiredDecoration", "titleCase", "classes"]);
-    const { layout } = useFieldsLayoutContext();
-    const isHorizontalLayout = layout === 'horizontal';
-    return (React.createElement("label", Object.assign({}, rest, { ref: ref, className: twMerge('inline-flex items-center', 'max-w-full', 'align-middle', '-webkit-tap-highlight-color-transparent', 'mx-0', disabled ? 'cursor-default' : 'cursor-pointer', isHorizontalLayout && 'col-start-1 col-span-2', classes === null || classes === void 0 ? void 0 : classes.root, className), style: style }),
-        React.cloneElement(control, { disabled }),
-        React.createElement(Form.Label, { className: twMerge(disabled && 'pointer-events-auto', classes === null || classes === void 0 ? void 0 : classes.label), as: 'span', requiredDecoration: requiredDecoration, disabled: disabled, titleCase: titleCase }, label)));
-});
-FormControlLabel.displayName = 'FormControlLabel';
-export default FormControlLabel;
-//# sourceMappingURL=FormControlLabel.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FormControlLabel.js","sourceRoot":"","sources":["../../../src/FormControlLabel/FormControlLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD,OAAO,EAAE,YAAY,IAAI,IAAI,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAwBxD,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,gBAAgB,CAAC,KAAK,EAAE,GAAG;IAClC,MAAM,EACJ,OAAO,EACP,KAAK,EACL,SAAS,EACT,KAAK,EACL,QAAQ,EACR,kBAAkB,EAClB,SAAS,EACT,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,oGAUL,CAAQ,CAAA;IAET,MAAM,EAAE,MAAM,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAC3C,MAAM,kBAAkB,GAAG,MAAM,KAAK,YAAY,CAAA;IAElD,OAAO,CACL,+CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,0BAA0B,EAC1B,YAAY,EACZ,cAAc,EACd,yCAAyC,EACzC,MAAM,EACN,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,EAC9C,kBAAkB,IAAI,wBAAwB,EAC9C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,EACb,SAAS,CACV,EACD,KAAK,EAAE,KAAK;QAEX,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,CAAC;QAC1C,oBAAC,IAAI,CAAC,KAAK,IACT,SAAS,EAAE,OAAO,CAAC,QAAQ,IAAI,qBAAqB,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,EACrE,EAAE,EAAC,MAAM,EACT,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,IAEnB,KAAK,CACK,CACP,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEjD,eAAe,gBAAgB,CAAA"}

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

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

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

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

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

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

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

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

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

@@ -1,30 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import React from 'react';
-import type { BaseProps, TextLabelProps, SizeType } from '@toptal/picasso-shared';
-declare type ComponentType = 'label' | 'span';
-export declare type RequiredDecoration = 'asterisk' | 'optional';
-export declare type Size = SizeType<'medium' | 'large'>;
-export declare type Alignment = 'top' | 'middle';
-export interface Props extends BaseProps, TextLabelProps, HTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
-    /** Content of the label */
-    children: ReactNode;
-    /** Whether to show asterisk or (optional) postfix as a 'required' decoration */
-    requiredDecoration?: RequiredDecoration;
-    /** Is this label for disabled input or not */
-    disabled?: boolean;
-    /** Specifies an id of the input */
-    htmlFor?: string;
-    /** Whether label should act as inline element `display: inline-block` */
-    inline?: boolean;
-    /** Component used for the root node */
-    as?: ComponentType;
-    /** Component size */
-    size?: Size;
-    /** Whether label should be aligned to top of the container or not */
-    alignment?: Alignment;
-    /** Label's end adornment */
-    labelEndAdornment?: ReactNode;
-}
-export declare const FormLabel: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLabelElement>>;
-export default FormLabel;
-//# sourceMappingURL=FormLabel.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FormLabel.d.ts","sourceRoot":"","sources":["../../../src/FormLabel/FormLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,QAAQ,EACT,MAAM,wBAAwB,CAAA;AAQ/B,aAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA;AACrC,oBAAY,kBAAkB,GAAG,UAAU,GAAG,UAAU,CAAA;AAExD,oBAAY,IAAI,GAAG,QAAQ,CAAC,QAAQ,GAAG,OAAO,CAAC,CAAA;AAC/C,oBAAY,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAA;AAExC,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,cAAc,CAAC,gBAAgB,GAAG,eAAe,CAAC;IACpD,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAA;IACnB,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,yEAAyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,uCAAuC;IACvC,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,qBAAqB;IACrB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,qEAAqE;IACrE,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,4BAA4B;IAC5B,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAC9B;AAED,eAAO,MAAM,SAAS,gFAmDpB,CAAA;AAUF,eAAe,SAAS,CAAA"}

package/dist-package/src/FormLabel/FormLabel.js

@@ -1,37 +0,0 @@
-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 { useTitleCase } from '@toptal/picasso-shared';
-import { toTitleCase } from '@toptal/picasso-utils';
-import { twMerge } from '@toptal/picasso-tailwind-merge';
-import { classesBySize, getRootClasses } from './styles';
-import { useFieldsLayoutContext } from '../FieldsLayout';
-export const FormLabel = forwardRef(function FormLabel(props, ref) {
-    const { children, disabled, htmlFor, className, style, inline, as: Component = 'label', titleCase: propsTitleCase, requiredDecoration, size = 'medium', alignment = 'middle', labelEndAdornment } = props, rest = __rest(props, ["children", "disabled", "htmlFor", "className", "style", "inline", "as", "titleCase", "requiredDecoration", "size", "alignment", "labelEndAdornment"]);
-    const isInline = inline || Component === 'span';
-    const titleCase = useTitleCase(propsTitleCase);
-    const { layout } = useFieldsLayoutContext();
-    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, htmlFor: htmlFor, className: twMerge(getRootClasses({ disabled, isInline, layout, alignment }), className), style: style }),
-        React.createElement("span", { className: isInline ? 'align-top text-[0.8125rem]' : classesBySize[size] },
-            requiredDecoration === 'asterisk' && (React.createElement("span", { className: 'align-top text-red-500 mr-[0.3125em]' }, "*")),
-            titleCase ? toTitleCase(children) : children,
-            requiredDecoration === 'optional' && ' (optional)',
-            labelEndAdornment)));
-});
-FormLabel.defaultProps = {
-    as: 'label',
-    inline: false,
-    size: 'medium',
-};
-FormLabel.displayName = 'FormLabel';
-export default FormLabel;
-//# sourceMappingURL=FormLabel.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FormLabel.js","sourceRoot":"","sources":["../../../src/FormLabel/FormLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAMzC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAgCxD,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAA0B,SAAS,SAAS,CAC7E,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,EAAE,EAAE,SAAS,GAAG,OAAO,EACvB,SAAS,EAAE,cAAc,EACzB,kBAAkB,EAClB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,QAAQ,EACpB,iBAAiB,KAEf,KAAK,EADJ,IAAI,UACL,KAAK,EAdH,sJAcL,CAAQ,CAAA;IACT,MAAM,QAAQ,GAAG,MAAM,IAAI,SAAS,KAAK,MAAM,CAAA;IAC/C,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,CAAA;IAC9C,MAAM,EAAE,MAAM,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAE3C,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,OAAO,CAChB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EACzD,SAAS,CACV,EACD,KAAK,EAAE,KAAK;QAEZ,8BACE,SAAS,EACP,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC;YAG9D,kBAAkB,KAAK,UAAU,IAAI,CACpC,8BAAM,SAAS,EAAC,sCAAsC,QAAS,CAChE;YAEA,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ;YAE5C,kBAAkB,KAAK,UAAU,IAAI,aAAa;YAElD,iBAAiB,CACb,CACG,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,EAAE,EAAE,OAAO;IACX,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,QAAQ;CACf,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormLabel/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAExC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AACrD,oBAAY,cAAc,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}

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

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

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

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

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

@@ -1,12 +0,0 @@
-import type { FieldLayout } from '../FieldsLayout/FieldsLayoutContext';
-import type { Alignment, Size } from './FormLabel';
-export declare const classesBySize: Record<Size, string>;
-declare type GetRootClassesOptions = {
-    disabled?: boolean;
-    isInline: boolean;
-    layout: FieldLayout;
-    alignment: Alignment;
-};
-export declare const getRootClasses: ({ disabled, isInline, layout, alignment, }: GetRootClassesOptions) => string;
-export {};
-//# sourceMappingURL=styles.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/FormLabel/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAG9C,CAAA;AAED,aAAK,qBAAqB,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,WAAW,CAAA;IACnB,SAAS,EAAE,SAAS,CAAA;CACrB,CAAA;AAqCD,eAAO,MAAM,cAAc,+CAKxB,qBAAqB,WAQvB,CAAA"}

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

@@ -1,24 +0,0 @@
-import { twJoin } from '@toptal/picasso-tailwind-merge';
-export const classesBySize = {
-    medium: 'text-[0.875rem]',
-    large: 'text-[1rem]',
-};
-const getDisplayClasses = ({ isInline, layout, alignment, }) => {
-    if (layout === 'horizontal' && alignment === 'top') {
-        return 'flex items-start';
-    }
-    if (layout === 'horizontal') {
-        return 'flex items-center';
-    }
-    if (isInline) {
-        return 'inline-block';
-    }
-    return 'block';
-};
-const getMarginClasses = ({ layout, isInline, }) => layout === 'horizontal' || isInline ? 'mb-0' : 'mb-[0.5em]';
-const getPaddingsClasses = ({ layout, alignment, }) => layout === 'horizontal' && alignment === 'top' ? 'pt-2' : '';
-const getColorClasses = ({ disabled }) => disabled ? 'text-graphite-700/[0.48]' : 'text-graphite-700';
-export const getRootClasses = ({ disabled, isInline, layout, alignment, }) => {
-    return twJoin(getDisplayClasses({ isInline, layout, alignment }), 'leading-[1em]', getMarginClasses({ layout, isInline }), getColorClasses({ disabled }), getPaddingsClasses({ layout, alignment }));
-};
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/FormLabel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAKvD,MAAM,CAAC,MAAM,aAAa,GAAyB;IACjD,MAAM,EAAE,iBAAiB;IACzB,KAAK,EAAE,aAAa;CACrB,CAAA;AASD,MAAM,iBAAiB,GAAG,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,GACsB,EAAE,EAAE;IACnC,IAAI,MAAM,KAAK,YAAY,IAAI,SAAS,KAAK,KAAK,EAAE;QAClD,OAAO,kBAAkB,CAAA;KAC1B;IAED,IAAI,MAAM,KAAK,YAAY,EAAE;QAC3B,OAAO,mBAAmB,CAAA;KAC3B;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,cAAc,CAAA;KACtB;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,EACxB,MAAM,EACN,QAAQ,GACuB,EAAE,EAAE,CACnC,MAAM,KAAK,YAAY,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAA;AAE7D,MAAM,kBAAkB,GAAG,CAAC,EAC1B,MAAM,EACN,SAAS,GACsB,EAAE,EAAE,CACnC,MAAM,KAAK,YAAY,IAAI,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;AAE9D,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAkC,EAAE,EAAE,CACvE,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,mBAAmB,CAAA;AAE7D,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,GACa,EAAE,EAAE;IAC1B,OAAO,MAAM,CACX,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EAClD,eAAe,EACf,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EACtC,eAAe,CAAC,EAAE,QAAQ,EAAE,CAAC,EAC7B,kBAAkB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAC1C,CAAA;AACH,CAAC,CAAA"}

package/src/FieldsLayout/FieldsLayoutContext.tsx

@@ -1,53 +0,0 @@
-import React, { createContext, useContext, useMemo } from 'react'
-import { useBreakpoint } from '@toptal/picasso-utils'
-import type { BreakpointKeys } from '@toptal/picasso-utils'
-
-export type LabelColumnSize = 2 | 3 | 4
-
-export type ResponsiveLabelColumnSize = {
-  [k in BreakpointKeys]?: LabelColumnSize
-}
-
-export type FieldLayout = 'horizontal' | 'vertical'
-
-export type FieldsLayoutContextValue = {
-  layout: FieldLayout
-  labelWidth: LabelColumnSize | ResponsiveLabelColumnSize
-}
-
-export const DEFAULT_LABEL_WIDTH_SIZE: LabelColumnSize = 3
-
-const FieldsLayoutContext = createContext<FieldsLayoutContextValue>({
-  layout: 'vertical',
-  labelWidth: DEFAULT_LABEL_WIDTH_SIZE,
-})
-
-export type FieldsLayoutContextProviderProps = {
-  layout?: FieldLayout
-  labelWidth?: LabelColumnSize | ResponsiveLabelColumnSize
-  children: React.ReactNode
-}
-
-export const FieldsLayoutContextProvider = ({
-  layout = 'vertical',
-  labelWidth = DEFAULT_LABEL_WIDTH_SIZE,
-  children,
-}: FieldsLayoutContextProviderProps) => {
-  const isSmallScreen = useBreakpoint(['sm', 'xs'])
-
-  const value = useMemo(
-    () => ({
-      layout: isSmallScreen ? 'vertical' : layout,
-      labelWidth,
-    }),
-    [layout, isSmallScreen, labelWidth]
-  )
-
-  return (
-    <FieldsLayoutContext.Provider value={value}>
-      {children}
-    </FieldsLayoutContext.Provider>
-  )
-}
-
-export const useFieldsLayoutContext = () => useContext(FieldsLayoutContext)

package/src/FieldsLayout/index.ts

@@ -1 +0,0 @@
-export * from './FieldsLayoutContext'

package/src/FormControlLabel/FormControlLabel.tsx

@@ -1,84 +0,0 @@
-import type { ReactElement, ReactNode, LabelHTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-import type { FormControlLabelProps } from '@material-ui/core/FormControlLabel'
-import type { StandardProps, TextLabelProps } from '@toptal/picasso-shared'
-import { twMerge } from '@toptal/picasso-tailwind-merge'
-
-import type { RequiredDecoration } from '../FormLabel'
-import { FormCompound as Form } from '../FormCompound'
-import { useFieldsLayoutContext } from '../FieldsLayout'
-
-export type FormControlLabelAttributesType =
-  LabelHTMLAttributes<HTMLLabelElement> &
-    Pick<FormControlLabelProps, 'onChange'>
-
-export interface Props
-  extends StandardProps,
-    TextLabelProps,
-    FormControlLabelAttributesType {
-  /** A control element. For instance, it can be be a Radio or a Checkbox */
-  control: ReactElement
-  /** The text to be used in an enclosing label element */
-  label?: ReactNode
-  /** Shows whether label is disabled or not */
-  disabled?: boolean
-  /** Whether to show asterisk or (optional) postfix as a 'required' decoration */
-  requiredDecoration?: RequiredDecoration
-  classes?: {
-    root?: string
-    label?: string
-  }
-}
-
-const FormControlLabel = forwardRef<HTMLLabelElement, Props>(
-  function FormControlLabel(props, ref) {
-    const {
-      control,
-      label,
-      className,
-      style,
-      disabled,
-      requiredDecoration,
-      titleCase,
-      classes,
-      ...rest
-    } = props
-
-    const { layout } = useFieldsLayoutContext()
-    const isHorizontalLayout = layout === 'horizontal'
-
-    return (
-      <label
-        {...rest}
-        ref={ref}
-        className={twMerge(
-          'inline-flex items-center',
-          'max-w-full',
-          'align-middle',
-          '-webkit-tap-highlight-color-transparent',
-          'mx-0',
-          disabled ? 'cursor-default' : 'cursor-pointer',
-          isHorizontalLayout && 'col-start-1 col-span-2',
-          classes?.root,
-          className
-        )}
-        style={style}
-      >
-        {React.cloneElement(control, { disabled })}
-        <Form.Label
-          className={twMerge(disabled && 'pointer-events-auto', classes?.label)}
-          as='span'
-          requiredDecoration={requiredDecoration}
-          disabled={disabled}
-          titleCase={titleCase}
-        >
-          {label}
-        </Form.Label>
-      </label>
-    )
-  }
-)
-
-FormControlLabel.displayName = 'FormControlLabel'
-
-export default FormControlLabel

package/src/FormControlLabel/index.ts

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

package/src/FormLabel/FormLabel.tsx

@@ -1,106 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react'
-import React, { forwardRef } from 'react'
-import type {
-  BaseProps,
-  TextLabelProps,
-  SizeType,
-} from '@toptal/picasso-shared'
-import { useTitleCase } from '@toptal/picasso-shared'
-import { toTitleCase } from '@toptal/picasso-utils'
-import { twMerge } from '@toptal/picasso-tailwind-merge'
-
-import { classesBySize, getRootClasses } from './styles'
-import { useFieldsLayoutContext } from '../FieldsLayout'
-
-type ComponentType = 'label' | 'span'
-export type RequiredDecoration = 'asterisk' | 'optional'
-
-export type Size = SizeType<'medium' | 'large'>
-export type Alignment = 'top' | 'middle'
-
-export interface Props
-  extends BaseProps,
-    TextLabelProps,
-    HTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
-  /** Content of the label */
-  children: ReactNode
-  /** Whether to show asterisk or (optional) postfix as a 'required' decoration */
-  requiredDecoration?: RequiredDecoration
-  /** Is this label for disabled input or not */
-  disabled?: boolean
-  /** Specifies an id of the input */
-  htmlFor?: string
-  /** Whether label should act as inline element `display: inline-block` */
-  inline?: boolean
-  /** Component used for the root node */
-  as?: ComponentType
-  /** Component size */
-  size?: Size
-  /** Whether label should be aligned to top of the container or not */
-  alignment?: Alignment
-  /** Label's end adornment */
-  labelEndAdornment?: ReactNode
-}
-
-export const FormLabel = forwardRef<HTMLLabelElement, Props>(function FormLabel(
-  props,
-  ref
-) {
-  const {
-    children,
-    disabled,
-    htmlFor,
-    className,
-    style,
-    inline,
-    as: Component = 'label',
-    titleCase: propsTitleCase,
-    requiredDecoration,
-    size = 'medium',
-    alignment = 'middle',
-    labelEndAdornment,
-    ...rest
-  } = props
-  const isInline = inline || Component === 'span'
-  const titleCase = useTitleCase(propsTitleCase)
-  const { layout } = useFieldsLayoutContext()
-
-  return (
-    <Component
-      {...rest}
-      ref={ref}
-      htmlFor={htmlFor}
-      className={twMerge(
-        getRootClasses({ disabled, isInline, layout, alignment }),
-        className
-      )}
-      style={style}
-    >
-      <span
-        className={
-          isInline ? 'align-top text-[0.8125rem]' : classesBySize[size]
-        }
-      >
-        {requiredDecoration === 'asterisk' && (
-          <span className='align-top text-red-500 mr-[0.3125em]'>*</span>
-        )}
-
-        {titleCase ? toTitleCase(children) : children}
-
-        {requiredDecoration === 'optional' && ' (optional)'}
-
-        {labelEndAdornment}
-      </span>
-    </Component>
-  )
-})
-
-FormLabel.defaultProps = {
-  as: 'label',
-  inline: false,
-  size: 'medium',
-}
-
-FormLabel.displayName = 'FormLabel'
-
-export default FormLabel