@launchpad-ui/form 0.1.1 → 0.2.0

package/dist/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import { Component, InputHTMLAttributes, RefObject } from 'react';
+import type { InputHTMLAttributes } from 'react';
 import './styles/Form.css';
 declare type CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
     /**
@@ -24,13 +24,30 @@ declare type CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
      */
     testId?: string;
 };
-declare class Checkbox extends Component<CheckboxProps> {
-    inputRef: RefObject<HTMLInputElement>;
-    constructor(props: CheckboxProps);
-    value(): string | undefined;
-    checked(): boolean | undefined;
-    render(): JSX.Element;
-}
+declare const Checkbox: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    /**
+     * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.
+     */
+    'aria-label'?: string | undefined;
+    /**
+     * id attribute of the label text elsewhere in the app, used for screen reader support
+     * Use this for cases where you have a visible label on the page that is not close to
+     * the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/
+     */
+    'aria-labelledby'?: string | undefined;
+    /**
+     * Label for the Checkbox
+     */
+    children?: React.ReactNode;
+    /**
+     * The className to pass into the Checkbox's Label component
+     */
+    labelClassName?: string | undefined;
+    /**
+     * The test id for the data-test-id attribute for React Testing Library support
+     */
+    testId?: string | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export { Checkbox };
 export type { CheckboxProps };
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAa,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,mBAAmB,CAAC;AAE3B,aAAK,aAAa,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAC3D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,cAAM,QAAS,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;gBAE1B,KAAK,EAAE,aAAa;IAKhC,KAAK;IAIL,OAAO;IAIP,MAAM;CAqCP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,mBAAmB,CAAC;AAE3B,aAAK,aAAa,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAC3D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,QAAQ;IAxBZ;;OAEG;;IAEH;;;;OAIG;;IAEH;;OAEG;eACQ,MAAM,SAAS;IAC1B;;OAEG;;IAEH;;OAEG;;oDA2CJ,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/CompactTextField.d.ts

@@ -1,22 +1,20 @@
-import { Component, FocusEvent } from 'react';
-import { TextField, TextFieldProps } from './TextField';
+/// <reference types="react" />
+import { TextFieldProps } from './TextField';
 import './styles/CompactTextField.css';
 import './styles/FormInput.css';
 declare type CompactTextFieldProps = TextFieldProps & {
     label: string;
     needsErrorFeedback?: boolean;
 };
-declare class CompactTextField extends Component<CompactTextFieldProps, {
-    isActive: boolean;
-}> {
-    textField?: TextField | null;
-    constructor(props: CompactTextFieldProps);
-    render(): JSX.Element;
-    handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
-    handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
-    value: () => string | undefined;
-    focus: () => void;
-}
+declare const CompactTextField: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
+    suffix?: string | undefined;
+    testId?: string | undefined;
+    tiny?: boolean | undefined;
+    overrideWidth?: string | undefined;
+} & {
+    label: string;
+    needsErrorFeedback?: boolean | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export { CompactTextField };
 export type { CompactTextFieldProps };
 //# sourceMappingURL=CompactTextField.d.ts.map

package/dist/CompactTextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CompactTextField.d.ts","sourceRoot":"","sources":["../src/CompactTextField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,+BAA+B,CAAC;AACvC,OAAO,wBAAwB,CAAC;AAEhC,aAAK,qBAAqB,GAAG,cAAc,GAAG;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,cAAM,gBAAiB,SAAQ,SAAS,CAAC,qBAAqB,EAAE;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;IACpF,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;gBAEjB,KAAK,EAAE,qBAAqB;IASxC,MAAM;IA6BN,WAAW,UAAW,WAAW,gBAAgB,CAAC,UAKhD;IAEF,UAAU,UAAW,WAAW,gBAAgB,CAAC,UAM/C;IAEF,KAAK,2BAAwD;IAE7D,KAAK,aAIH;CACH;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"CompactTextField.d.ts","sourceRoot":"","sources":["../src/CompactTextField.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,+BAA+B,CAAC;AACvC,OAAO,wBAAwB,CAAC;AAEhC,aAAK,qBAAqB,GAAG,cAAc,GAAG;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,gBAAgB;;;;;;WAJb,MAAM;;oDAqDd,CAAC;AAIF,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/InputGroup.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithRef } from 'react';
 import './styles/InputGroup.css';
 declare type InputGroupProps = ComponentPropsWithRef<'div'>;
-export declare const InputGroup: ({ className, children, ...other }: InputGroupProps) => JSX.Element;
-export {};
+declare const InputGroup: ({ className, children, ...other }: InputGroupProps) => JSX.Element;
+export { InputGroup };
+export type { InputGroupProps };
 //# sourceMappingURL=InputGroup.d.ts.map

package/dist/InputGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../src/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,yBAAyB,CAAC;AAEjC,aAAK,eAAe,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEpD,eAAO,MAAM,UAAU,sCAAuC,eAAe,gBAQ5E,CAAC"}
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../src/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,yBAAyB,CAAC;AAEjC,aAAK,eAAe,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEpD,QAAA,MAAM,UAAU,sCAAuC,eAAe,gBAQrE,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/Label.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './styles/Form.css';
-export declare type LabelProps = {
+declare type LabelProps = {
     htmlFor?: string;
     required?: boolean;
     optional?: boolean;
@@ -10,5 +10,7 @@ export declare type LabelProps = {
     style?: React.CSSProperties;
     hidden?: boolean;
 };
-export declare const Label: ({ htmlFor, disabled, className, children, required, optional, ...other }: LabelProps) => JSX.Element;
+declare const Label: ({ htmlFor, disabled, className, children, required, optional, ...other }: LabelProps) => JSX.Element;
+export { Label };
+export type { LabelProps };
 //# sourceMappingURL=Label.d.ts.map

package/dist/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../src/Label.tsx"],"names":[],"mappings":";AAGA,OAAO,mBAAmB,CAAC;AAE3B,oBAAY,UAAU,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,KAAK,6EAQf,UAAU,gBASZ,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../src/Label.tsx"],"names":[],"mappings":";AAGA,OAAO,mBAAmB,CAAC;AAE3B,aAAK,UAAU,GAAG;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,KAAK,6EAQR,UAAU,gBASZ,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/RequiredAsterisk.d.ts

@@ -5,4 +5,5 @@ declare type RequiredAsteriskProps = HTMLAttributes<HTMLSpanElement> & {
 };
 declare const RequiredAsterisk: ({ className, testId, ...rest }: RequiredAsteriskProps) => JSX.Element;
 export { RequiredAsterisk };
+export type { RequiredAsteriskProps };
 //# sourceMappingURL=RequiredAsterisk.d.ts.map

package/dist/RequiredAsterisk.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RequiredAsterisk.d.ts","sourceRoot":"","sources":["../src/RequiredAsterisk.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,OAAO,+BAA+B,CAAC;AAEvC,aAAK,qBAAqB,GAAG,cAAc,CAAC,eAAe,CAAC,GAAG;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,gBAAgB,mCAAoC,qBAAqB,gBAQ9E,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"RequiredAsterisk.d.ts","sourceRoot":"","sources":["../src/RequiredAsterisk.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,OAAO,+BAA+B,CAAC;AAEvC,aAAK,qBAAqB,GAAG,cAAc,CAAC,eAAe,CAAC,GAAG;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,gBAAgB,mCAAoC,qBAAqB,gBAQ9E,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/TextArea.d.ts

@@ -1,12 +1,7 @@
-import { Component, RefObject, TextareaHTMLAttributes } from 'react';
+import type { TextareaHTMLAttributes } from 'react';
 import './styles/FormInput.css';
 declare type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
-declare class TextArea extends Component<TextAreaProps> {
-    textareaRef: RefObject<HTMLTextAreaElement>;
-    constructor(props: TextAreaProps);
-    render(): JSX.Element;
-    focus(): void;
-}
+declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export { TextArea };
 export type { TextAreaProps };
 //# sourceMappingURL=TextArea.d.ts.map

package/dist/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../src/TextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAa,SAAS,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAEhF,OAAO,wBAAwB,CAAC;AAGhC,aAAK,aAAa,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;AAEjE,cAAM,QAAS,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7C,WAAW,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;gBAEhC,KAAK,EAAE,aAAa;IAKhC,MAAM;IAcN,KAAK;CAGN;AAgBD,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../src/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAKpD,OAAO,wBAAwB,CAAC;AAGhC,aAAK,aAAa,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;AAEjE,QAAA,MAAM,QAAQ,+GAwBZ,CAAC;AAIH,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/TextField.d.ts

@@ -1,4 +1,4 @@
-import { Component, InputHTMLAttributes, RefObject } from 'react';
+import type { InputHTMLAttributes } from 'react';
 import './styles/FormInput.css';
 declare type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
     suffix?: string;
@@ -6,16 +6,12 @@ declare type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
     tiny?: boolean;
     overrideWidth?: string;
 };
-declare class TextField extends Component<TextFieldProps> {
-    inputRef: RefObject<HTMLInputElement>;
-    constructor(props: TextFieldProps);
-    render(): JSX.Element;
-    getElement(): HTMLInputElement | null;
-    value(): string | undefined;
-    focus(): void;
-    blur(): void;
-    select(): void;
-}
-export type { TextFieldProps };
+declare const TextField: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    suffix?: string | undefined;
+    testId?: string | undefined;
+    tiny?: boolean | undefined;
+    overrideWidth?: string | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export { TextField };
+export type { TextFieldProps };
 //# sourceMappingURL=TextField.d.ts.map

package/dist/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAa,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,wBAAwB,CAAC;AAGhC,aAAK,cAAc,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,cAAM,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;gBAC1B,KAAK,EAAE,cAAc;IAKjC,MAAM;IAyDN,UAAU;IAIV,KAAK;IAIL,KAAK;IAIL,IAAI;IAIJ,MAAM;CAGP;AAED,YAAY,EAAE,cAAc,EAAE,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,wBAAwB,CAAC;AAGhC,aAAK,cAAc,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;oDA2Dd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/dist/index.d.ts

@@ -1,14 +1,20 @@
 export type { CheckboxProps } from './Checkbox';
 export type { CompactTextFieldProps } from './CompactTextField';
+export type { FieldErrorProps } from './FieldError';
+export type { FieldSetProps } from './FieldSet';
+export type { FormProps } from './Form';
 export type { FormFieldProps } from './FormField';
+export type { FormGroupProps } from './FormGroup';
 export type { FormHintProps } from './FormHint';
-export type { FormProps } from './Form';
 export type { IconFieldProps } from './IconField';
+export type { InputGroupProps } from './InputGroup';
 export type { LabelProps } from './Label';
-export type { RadioGroupProps } from './RadioGroup';
 export type { RadioProps } from './Radio';
+export type { RadioGroupProps } from './RadioGroup';
+export type { RequiredAsteriskProps } from './RequiredAsterisk';
 export type { SelectProps } from './Select';
 export type { TextAreaProps } from './TextArea';
+export type { TextFieldProps } from './TextField';
 export { Checkbox } from './Checkbox';
 export { CompactTextField } from './CompactTextField';
 export { FieldError } from './FieldError';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.es.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 
 // src/Checkbox.tsx
-import { Component, createRef } from "react";
+import { forwardRef } from "react";
 
 // src/Label.tsx
 import cx2 from "clsx";
@@ -42,187 +42,139 @@ var Label = ({
 
 // src/Checkbox.tsx
 import "./styles/Form.css";
-var Checkbox = class extends Component {
-  constructor(props) {
-    super(props);
-    this.inputRef = createRef();
-  }
-  value() {
-    return this.inputRef.current?.value;
-  }
-  checked() {
-    return this.inputRef.current?.checked;
-  }
-  render() {
-    const {
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledby,
-      children,
-      disabled,
-      testId,
-      checked,
-      labelClassName,
-      ...other
-    } = this.props;
-    const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
-    if (!children && !hasAriaLabel) {
-      console.warn("If you do not provide children, you must specify an aria-label for accessibility");
-    }
-    return /* @__PURE__ */ React.createElement(Label, {
-      className: labelClassName
-    }, /* @__PURE__ */ React.createElement("input", {
-      ...other,
-      ref: this.inputRef,
-      checked,
-      "aria-checked": checked ? "true" : "false",
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledby,
-      className: "Form-checkbox",
-      disabled,
-      "data-test-id": testId,
-      type: "checkbox"
-    }), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
-      className: "Form-label--disabled"
-    }, children) : children);
+var Checkbox = forwardRef(({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  children,
+  disabled,
+  testId,
+  checked,
+  labelClassName,
+  ...other
+}, ref) => {
+  const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
+  if (!children && !hasAriaLabel) {
+    console.warn("If you do not provide children, you must specify an aria-label for accessibility");
   }
-};
+  return /* @__PURE__ */ React.createElement(Label, {
+    className: labelClassName
+  }, /* @__PURE__ */ React.createElement("input", {
+    ...other,
+    ref,
+    checked,
+    "aria-checked": checked ? "true" : "false",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    className: "Form-checkbox",
+    disabled,
+    "data-test-id": testId,
+    type: "checkbox"
+  }), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
+    className: "Form-label--disabled"
+  }, children) : children);
+});
+Checkbox.displayName = "Checkbox";
 
 // src/CompactTextField.tsx
 import cx4 from "clsx";
 import { isBoolean } from "lodash-es";
-import { Component as Component3 } from "react";
+import { forwardRef as forwardRef3, useState } from "react";
 
 // src/TextField.tsx
 import cx3 from "clsx";
-import { Component as Component2, createRef as createRef2 } from "react";
+import { forwardRef as forwardRef2 } from "react";
 import "./styles/FormInput.css";
 
 // src/utils/index.ts
 var createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
 
 // src/TextField.tsx
-var TextField = class extends Component2 {
-  constructor(props) {
-    super(props);
-    this.inputRef = createRef2();
-  }
-  render() {
-    const {
-      className,
-      type = "text",
-      tiny = false,
-      readOnly,
-      tabIndex = 0,
-      testId,
-      suffix,
-      overrideWidth,
-      ...rest
-    } = this.props;
-    const classes = overrideWidth ? className : cx3("FormInput", `FormInput-${type}`, className, {
-      "FormInput--tiny": tiny
-    });
-    if (suffix) {
-      return /* @__PURE__ */ React.createElement("div", {
-        className: "FormInput-suffixContainer"
-      }, /* @__PURE__ */ React.createElement("input", {
-        ...rest,
-        type,
-        className: cx3(classes, "FormInput-suffix"),
-        readOnly,
-        ref: this.inputRef,
-        "data-test-id": testId,
-        "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-      }), /* @__PURE__ */ React.createElement("label", {
-        className: "FormInput-suffix",
-        htmlFor: rest.id
-      }, suffix));
-    }
-    return /* @__PURE__ */ React.createElement("input", {
+var TextField = forwardRef2(({
+  className,
+  type = "text",
+  tiny = false,
+  readOnly,
+  tabIndex = 0,
+  testId,
+  suffix,
+  overrideWidth,
+  ...rest
+}, ref) => {
+  const classes = overrideWidth ? className : cx3("FormInput", `FormInput-${type}`, className, {
+    "FormInput--tiny": tiny
+  });
+  if (suffix) {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: "FormInput-suffixContainer"
+    }, /* @__PURE__ */ React.createElement("input", {
       ...rest,
       type,
-      className: classes,
+      className: cx3(classes, "FormInput-suffix"),
       readOnly,
-      tabIndex,
-      ref: this.inputRef,
+      ref,
       "data-test-id": testId,
-      style: overrideWidth ? {
-        width: overrideWidth
-      } : void 0,
       "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-    });
-  }
-  getElement() {
-    return this.inputRef.current;
-  }
-  value() {
-    return this.inputRef.current?.value;
+    }), /* @__PURE__ */ React.createElement("label", {
+      className: "FormInput-suffix",
+      htmlFor: rest.id
+    }, suffix));
   }
-  focus() {
-    this.inputRef.current?.focus();
-  }
-  blur() {
-    this.inputRef.current?.blur();
-  }
-  select() {
-    this.inputRef.current?.focus();
-  }
-};
+  return /* @__PURE__ */ React.createElement("input", {
+    ...rest,
+    type,
+    className: classes,
+    readOnly,
+    tabIndex,
+    ref,
+    "data-test-id": testId,
+    style: overrideWidth ? {
+      width: overrideWidth
+    } : void 0,
+    "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
+  });
+});
+TextField.displayName = "TextField";
 
 // src/CompactTextField.tsx
 import "./styles/CompactTextField.css";
 import "./styles/FormInput.css";
-var CompactTextField = class extends Component3 {
-  constructor(props) {
-    super(props);
-    this.handleFocus = (event) => {
-      this.setState({ isActive: true });
-      if (this.props.onFocus) {
-        this.props.onFocus(event);
-      }
-    };
-    this.handleBlur = (event) => {
-      const value = event.target.value || "";
-      this.setState({ isActive: value.trim().length !== 0 });
-      if (this.props.onBlur) {
-        this.props.onBlur(event);
-      }
-    };
-    this.value = () => this.textField ? this.textField.value() : "";
-    this.focus = () => {
-      if (this.textField) {
-        this.textField.focus();
-      }
-    };
-    const value = props.value;
-    this.state = {
-      isActive: (isBoolean(value) || value ? value.toString() : "").trim().length !== 0
-    };
-  }
-  render() {
-    const { className, id, name, label, type, needsErrorFeedback, ...rest } = this.props;
-    const isActive = this.state.isActive || needsErrorFeedback;
-    const classes = cx4("CompactTextField", className, {
-      "is-active": isActive
-    });
-    const placeholder = isActive ? "" : label;
-    return /* @__PURE__ */ React.createElement("div", {
-      className: classes
-    }, /* @__PURE__ */ React.createElement(Label, {
-      htmlFor: id
-    }, label), /* @__PURE__ */ React.createElement(TextField, {
-      ...rest,
-      id,
-      name,
-      type,
-      placeholder,
-      ref: (textField) => {
-        this.textField = textField;
-      },
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur
-    }));
-  }
-};
+var CompactTextField = forwardRef3(({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
+  const [isActive, setIsActive] = useState((isBoolean(value) || value ? value.toString() : "").trim().length !== 0);
+  const isActiveState = isActive || needsErrorFeedback;
+  const classes = cx4("CompactTextField", className, {
+    "is-active": isActiveState
+  });
+  const placeholder = isActiveState ? "" : label;
+  const handleFocus = (event) => {
+    setIsActive(true);
+    if (onFocus) {
+      onFocus(event);
+    }
+  };
+  const handleBlur = (event) => {
+    const value2 = event.target.value || "";
+    setIsActive(value2.trim().length !== 0);
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    className: classes
+  }, /* @__PURE__ */ React.createElement(Label, {
+    htmlFor: id
+  }, label), /* @__PURE__ */ React.createElement(TextField, {
+    ...rest,
+    id,
+    name,
+    type,
+    placeholder,
+    value,
+    ref,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }));
+});
+CompactTextField.displayName = "CompactTextField";
 
 // src/FieldError.tsx
 import cx5 from "clsx";
@@ -460,35 +412,26 @@ var Select = ({ className, children, testId, ...rest }) => {
 
 // src/TextArea.tsx
 import cx13 from "clsx";
-import { Component as Component4, createRef as createRef3 } from "react";
+import { forwardRef as forwardRef4 } from "react";
 import "./styles/FormInput.css";
-var TextArea = class extends Component4 {
-  constructor(props) {
-    super(props);
-    this.textareaRef = createRef3();
-  }
-  render() {
-    const { className, ...props } = this.props;
-    return /* @__PURE__ */ React.createElement("textarea", {
-      ...props,
-      className: cx13("FormInput", className),
-      ref: this.textareaRef,
-      "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
-      onKeyDown
-    });
-  }
-  focus() {
-    this.textareaRef.current?.focus();
-  }
-};
-function onKeyDown(e) {
-  if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
-    e.stopPropagation();
-  }
-  if (e.key === "Escape") {
-    e.nativeEvent.stopImmediatePropagation();
-  }
-}
+var TextArea = forwardRef4(({ className, ...props }, ref) => {
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
+      e.stopPropagation();
+    }
+    if (e.key === "Escape") {
+      e.nativeEvent.stopImmediatePropagation();
+    }
+  };
+  return /* @__PURE__ */ React.createElement("textarea", {
+    ...props,
+    className: cx13("FormInput", className),
+    ref,
+    "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
+    onKeyDown
+  });
+});
+TextArea.displayName = "TextArea";
 export {
   Checkbox,
   CompactTextField,