@jobber/components 2.86.0 → 2.86.2

package/dist/FormField/FormFieldTypes.d.ts

@@ -1,160 +1,160 @@
-import { ChangeEvent, ReactNode, RefObject } from "react";
-import { ValidationRules } from "react-hook-form";
-import { XOR } from "ts-xor";
-import { IconNames } from "../Icon";
-export declare type FormFieldTypes = "text" | "password" | "number" | "time" | "textarea" | "select" | "email";
-export declare type AutocompleteTypes = "one-time-code" | "address-line1" | "address-line2";
-export interface FieldActionsRef {
-    setValue(value: string | number): void;
-}
-export interface Affix {
-    readonly label?: string;
-    readonly icon?: IconNames;
-}
-interface BaseSuffix extends Affix {
-    readonly icon: IconNames;
-    onClick?(): void;
-}
-export interface Suffix extends BaseSuffix {
-    onClick(): void;
-    readonly ariaLabel: string;
-}
-export interface CommonFormFieldProps {
-    /**
-     * Determines the alignment of the text inside the input.
-     */
-    readonly align?: "center" | "right";
-    /**
-     * Further description of the input, can be used for a hint.
-     */
-    readonly description?: string;
-    /**
-     * Disable the input
-     */
-    readonly disabled?: boolean;
-    /**
-     * Highlights the field red to indicate an error.
-     */
-    readonly invalid?: boolean;
-    /**
-     * Adjusts the form field to go inline with a content. This also silences the
-     * given `validations` prop. You'd have to used the `onValidate` prop to
-     * capture the message and render it somewhere else using the
-     * `InputValidation` component.
-     */
-    readonly inline?: boolean;
-    /**
-     * Show a spinner to indicate loading
-     */
-    loading?: boolean;
-    /**
-     * Name of the input.
-     */
-    readonly name?: string;
-    /**
-     * onChange handler that provides the new value (or event)
-     * @param newValue
-     * @param event
-     */
-    onChange?(newValue: string | number | boolean | Date, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>): void;
-    /**
-     * Callback to get the the status and message when validating a field
-     * @param message
-     */
-    onValidation?(message: string): void;
-    /**
-     * Hint text that goes above the value once the form is filled out.
-     */
-    readonly placeholder?: string;
-    /**
-     * Adjusts the interface to either have small or large spacing.
-     */
-    readonly size?: "small" | "large";
-    /**
-     * Set the component to the given value.
-     */
-    readonly value?: string | number | Date;
-}
-export interface FormFieldProps extends CommonFormFieldProps {
-    actionsRef?: RefObject<FieldActionsRef>;
-    /**
-     * Determines if browser form autocomplete is enabled.
-     * Note that "one-time-code" is experimental and should not be used without
-     * consultation. "address-line1" and "address-line2" are
-     * used for billing address information.
-     */
-    readonly autocomplete?: boolean | AutocompleteTypes;
-    /**
-     * If you need to pass in a children. For example, `<options>` inside
-     * `<select>`.
-     */
-    readonly children?: ReactNode;
-    inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
-    /**
-     * Initial value of the input. Only use this when you need to pre-populate
-     * the field with a data that is not controlled by the components state. If a
-     * state is controlling the value, use the `value` prop instead.
-     */
-    readonly defaultValue?: string | Date;
-    /**
-     * Determines what kind of keyboard appears on mobile web.
-     */
-    readonly keyboard?: "numeric";
-    /**
-     * Specifies the maximum numerical or date value that a user can type
-     */
-    readonly max?: number;
-    /**
-     * Maximum character length for an input. This also changes the width to
-     * roughly the same size as the max length. This is to communicate that the
-     * user that on certain cases, they can only type a limited amount of
-     * characters.
-     */
-    readonly maxLength?: number;
-    /**
-     * Adds a prefix label and icon to the field
-     */
-    readonly prefix?: Affix;
-    /**
-     * Adds a suffix label and icon with an optional action to the field
-     */
-    readonly suffix?: XOR<Affix, Suffix>;
-    /**
-     * Simplified onChange handler that only provides the new value.
-     * @param newValue
-     * Specifies the minimum numerical or date value that a user can type
-     */
-    readonly min?: number;
-    /**
-     * A callback to handle "Enter" keypress. This will only run
-     * if Enter is the only key. Will not run if Shift or Control
-     * are being held.
-     */
-    onEnter?(event: React.KeyboardEvent): void;
-    /**
-     * Focus callback.
-     */
-    onFocus?(): void;
-    /**
-     * Blur callback.
-     */
-    onBlur?(): void;
-    /**
-     * Exclusively for textareas. Specifies the visible height of a textarea.
-     */
-    readonly rows?: number;
-    /**
-     * Prevents users from editing the value.
-     */
-    readonly readonly?: boolean;
-    /**
-     * Determines what kind of form field should the component give you.
-     */
-    readonly type?: FormFieldTypes;
-    /**
-     * Show an error message above the field. This also
-     * highlights the the field red if an error message shows up.
-     */
-    readonly validations?: ValidationRules;
-}
-export {};
+import { ChangeEvent, ReactNode, RefObject } from "react";
+import { ValidationRules } from "react-hook-form";
+import { XOR } from "ts-xor";
+import { IconNames } from "../Icon";
+export declare type FormFieldTypes = "text" | "password" | "number" | "time" | "textarea" | "select" | "email";
+export declare type AutocompleteTypes = "one-time-code" | "address-line1" | "address-line2";
+export interface FieldActionsRef {
+    setValue(value: string | number): void;
+}
+export interface Affix {
+    readonly label?: string;
+    readonly icon?: IconNames;
+}
+interface BaseSuffix extends Affix {
+    readonly icon: IconNames;
+    onClick?(): void;
+}
+export interface Suffix extends BaseSuffix {
+    onClick(): void;
+    readonly ariaLabel: string;
+}
+export interface CommonFormFieldProps {
+    /**
+     * Determines the alignment of the text inside the input.
+     */
+    readonly align?: "center" | "right";
+    /**
+     * Further description of the input, can be used for a hint.
+     */
+    readonly description?: string;
+    /**
+     * Disable the input
+     */
+    readonly disabled?: boolean;
+    /**
+     * Highlights the field red to indicate an error.
+     */
+    readonly invalid?: boolean;
+    /**
+     * Adjusts the form field to go inline with a content. This also silences the
+     * given `validations` prop. You'd have to used the `onValidate` prop to
+     * capture the message and render it somewhere else using the
+     * `InputValidation` component.
+     */
+    readonly inline?: boolean;
+    /**
+     * Show a spinner to indicate loading
+     */
+    loading?: boolean;
+    /**
+     * Name of the input.
+     */
+    readonly name?: string;
+    /**
+     * onChange handler that provides the new value (or event)
+     * @param newValue
+     * @param event
+     */
+    onChange?(newValue: string | number | boolean | Date, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>): void;
+    /**
+     * Callback to get the the status and message when validating a field
+     * @param message
+     */
+    onValidation?(message: string): void;
+    /**
+     * Hint text that goes above the value once the form is filled out.
+     */
+    readonly placeholder?: string;
+    /**
+     * Adjusts the interface to either have small or large spacing.
+     */
+    readonly size?: "small" | "large";
+    /**
+     * Set the component to the given value.
+     */
+    readonly value?: string | number | Date;
+}
+export interface FormFieldProps extends CommonFormFieldProps {
+    actionsRef?: RefObject<FieldActionsRef>;
+    /**
+     * Determines if browser form autocomplete is enabled.
+     * Note that "one-time-code" is experimental and should not be used without
+     * consultation. "address-line1" and "address-line2" are
+     * used for billing address information.
+     */
+    readonly autocomplete?: boolean | AutocompleteTypes;
+    /**
+     * If you need to pass in a children. For example, `<options>` inside
+     * `<select>`.
+     */
+    readonly children?: ReactNode;
+    inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+    /**
+     * Initial value of the input. Only use this when you need to pre-populate
+     * the field with a data that is not controlled by the components state. If a
+     * state is controlling the value, use the `value` prop instead.
+     */
+    readonly defaultValue?: string | Date;
+    /**
+     * Determines what kind of keyboard appears on mobile web.
+     */
+    readonly keyboard?: "numeric";
+    /**
+     * Specifies the maximum numerical or date value that a user can type
+     */
+    readonly max?: number;
+    /**
+     * Maximum character length for an input. This also changes the width to
+     * roughly the same size as the max length. This is to communicate that the
+     * user that on certain cases, they can only type a limited amount of
+     * characters.
+     */
+    readonly maxLength?: number;
+    /**
+     * Adds a prefix label and icon to the field
+     */
+    readonly prefix?: Affix;
+    /**
+     * Adds a suffix label and icon with an optional action to the field
+     */
+    readonly suffix?: XOR<Affix, Suffix>;
+    /**
+     * Simplified onChange handler that only provides the new value.
+     * @param newValue
+     * Specifies the minimum numerical or date value that a user can type
+     */
+    readonly min?: number;
+    /**
+     * A callback to handle "Enter" keypress. This will only run
+     * if Enter is the only key. Will not run if Shift or Control
+     * are being held.
+     */
+    onEnter?(event: React.KeyboardEvent): void;
+    /**
+     * Focus callback.
+     */
+    onFocus?(): void;
+    /**
+     * Blur callback.
+     */
+    onBlur?(): void;
+    /**
+     * Exclusively for textareas. Specifies the visible height of a textarea.
+     */
+    readonly rows?: number;
+    /**
+     * Prevents users from editing the value.
+     */
+    readonly readonly?: boolean;
+    /**
+     * Determines what kind of form field should the component give you.
+     */
+    readonly type?: FormFieldTypes;
+    /**
+     * Show an error message above the field. This also
+     * highlights the the field red if an error message shows up.
+     */
+    readonly validations?: ValidationRules;
+}
+export {};

package/dist/FormField/FormFieldWrapper.d.ts

@@ -1,9 +1,9 @@
-import { PropsWithChildren } from "react";
-import { FormFieldProps } from "./FormFieldTypes";
-interface FormFieldWrapperProps extends FormFieldProps {
-    error: string;
-    identifier: string;
-    descriptionIdentifier: string;
-}
-export declare function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, }: PropsWithChildren<FormFieldWrapperProps>): JSX.Element;
-export {};
+import { PropsWithChildren } from "react";
+import { FormFieldProps } from "./FormFieldTypes";
+interface FormFieldWrapperProps extends FormFieldProps {
+    error: string;
+    identifier: string;
+    descriptionIdentifier: string;
+}
+export declare function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, }: PropsWithChildren<FormFieldWrapperProps>): JSX.Element;
+export {};

package/dist/FormField/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./FormField";
-export * from "./FormFieldTypes";
+export * from "./FormField";
+export * from "./FormFieldTypes";

package/dist/FormField/index.js

@@ -2,216 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var __chunk_1 = require('../chunk-b67af3cb.js');
-var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
-require('../Typography/index.js');
-var index$1 = require('../Text/index.js');
-require('@jobber/design');
-var index$2 = require('../Icon/index.js');
-var uuid = require('uuid');
-var reactHookForm = require('react-hook-form');
+var FormField = require('../FormField-a92c7bac.js');
+require('../tslib.es6-5b50eb8e.js');
+require('react');
+require('uuid');
+require('react-hook-form');
+require('../style-inject.es-dcee06b6.js');
+require('classnames');
+require('../Button-5b2f1636.js');
 require('react-router-dom');
-var index$5 = require('../Button/index.js');
+require('../Icon-d5ad1a6d.js');
+require('@jobber/design');
+require('../Typography-7e542a72.js');
+require('../Text-9bc093e9.js');
+require('../InputValidation-24d3621a.js');
 require('framer-motion');
-var index$6 = require('../InputValidation/index.js');
-var index$7 = require('../Spinner/index.js');
-
-var css = ":root {\n  /**\n   * These `--public-field` properties are used in other components such\n   * as InputGroup, therefore they must stay on :root\n   **/\n  --public-field--top-left-radius: var(--radius-base);\n  --public-field--top-right-radius: var(--radius-base);\n  --public-field--bottom-left-radius: var(--radius-base);\n  --public-field--bottom-right-radius: var(--radius-base);\n}\n\n/**\n * Wrapper\n **/\n\n._2bOj_Hpd2VvA3mi9t4RcZO {\n  --field--placeholder-color: var(--color-greyBlue--light);\n  --field--placeholder-offset: 50%;\n  --field--placeholder-transform: -50%;\n\n  --field--textAlign: left;\n\n  --field--height: var(--space-largest);\n\n  --field--padding-top: calc(var(--space-base) - var(--space-smallest));\n  --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));\n  --field--padding-left: var(--space-base);\n  --field--padding-right: var(--space-base);\n\n  --field--value-color: var(--color-heading);\n\n  --field--border-color: var(--color-border);\n  --field--background-color: var(--color-surface);\n\n  --field--base-elevation: var(--elevation-base);\n  --field--label-elevation: calc(var(--field--base-elevation) + 1);\n  --field--postfix-elevation: calc(var(--field--base-elevation) - 1);\n  --field--postfix-action-elevation: calc(var(--field--base-elevation) + 2);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  width: 100%;\n  height: var(--field--height);\n  border: var(--border-base) solid var(--field--border-color);\n  border-radius: var(--radius-base);\n  border-top-right-radius: var(--radius-base);\n  border-top-right-radius: var(--radius-base);\n  border-top-right-radius: var(--public-field--top-right-radius);\n  border-bottom-right-radius: var(--radius-base);\n  border-bottom-right-radius: var(--radius-base);\n  border-bottom-right-radius: var(--public-field--bottom-right-radius);\n  border-bottom-left-radius: var(--radius-base);\n  border-bottom-left-radius: var(--radius-base);\n  border-bottom-left-radius: var(--public-field--bottom-left-radius);\n  border-top-left-radius: var(--radius-base);\n  border-top-left-radius: var(--radius-base);\n  border-top-left-radius: var(--public-field--top-left-radius);\n  color: var(--field--value-color);\n  font-size: var(--base-unit);\n  background-color: var(--field--background-color);\n}\n\n._2bOj_Hpd2VvA3mi9t4RcZO * {\n  box-sizing: border-box;\n}\n\n._2bOj_Hpd2VvA3mi9t4RcZO[focus-within] {\n  position: relative;\n  z-index: var(--field--base-elevation);\n  box-shadow: var(--shadow-focus);\n}\n\n._2bOj_Hpd2VvA3mi9t4RcZO[focus-within] {\n  position: relative;\n  z-index: var(--field--base-elevation);\n  box-shadow: var(--shadow-focus);\n}\n\n._2bOj_Hpd2VvA3mi9t4RcZO:focus-within {\n  position: relative;\n  z-index: var(--field--base-elevation);\n  box-shadow: var(--shadow-focus);\n}\n\n.IVFKQabHAwX8Kn2aNj8gM {\n  --field--label-elevation: calc(var(--field--base-elevation) - 1);\n  --field--placeholder-color: var(--color-text--secondary);\n  --field--placeholder-offset: var(--space-smallest);\n  --field--placeholder-transform: 0;\n}\n\n._2bOj_Hpd2VvA3mi9t4RcZO._1hfSn_RRn6Enf7teCHrbV8 {\n  height: auto;\n  min-height: auto;\n}\n\n._3H2M7GlXG4Qh417lRbpzS7,\n._3H2M7GlXG4Qh417lRbpzS7[focus-within] {\n  --field--border-color: var(--color-critical);\n}\n\n._3H2M7GlXG4Qh417lRbpzS7,\n._3H2M7GlXG4Qh417lRbpzS7[focus-within] {\n  --field--border-color: var(--color-critical);\n}\n\n._3H2M7GlXG4Qh417lRbpzS7,\n._3H2M7GlXG4Qh417lRbpzS7:focus-within {\n  --field--border-color: var(--color-critical);\n}\n\n._2xkImc45YUzsUp6bZ3Ik_4 {\n  --field--placeholder-color: var(--color-disabled);\n  --field--value-color: var(--color-disabled);\n  --field--background-color: var(--color-surface--background);\n  --field--border-color: var(--color-disabled--secondary);\n}\n\n._2N7Ipv_CbNRzrdEGCrptrV {\n  --field--padding-left: calc(var(--space-base) - var(--space-smaller));\n  --field--padding-right: calc(var(--space-base) - var(--space-smaller));\n  --field--height: calc(var(--space-larger) + var(--space-smaller));\n}\n\n._2RtHPlAJG3Hp2QD9Q9cfD_ {\n  --field--padding-left: var(--space-large);\n  --field--padding-right: var(--space-large);\n  --field--height: calc(var(--space-extravagant));\n}\n\n._3AHR56Sam4H_gp9JyzxRLl {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  width: auto;\n}\n\n._19KcCv1flBCB9mHUlTLkQL {\n  --field--textAlign: center;\n}\n\n._1wVbgkkxLyHZUFsS-xEPlc {\n  --field--textAlign: right;\n}\n\n/**\n * The custom property --formField-maxLength is getting defined inside the\n * component.\n */\n\n._1tABQjw4-IkgUE3cbBzs7r {\n  width: calc(\n    (var(--base-unit) * var(--formField-maxLength)) + var(--field--padding-left) +\n      var(--field--padding-right)\n  );\n}\n\n/**\n * Input Wrapper\n **/\n\n._1WnxEaBZY0zLsD8oKwh20b {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1;\n      flex: 1;\n  position: relative;\n}\n\n/**\n * Input\n **/\n\n._3koQsrzZZXPVxXmmESjSG_ {\n  position: relative;\n  z-index: var(--field--base-elevation);\n  width: 100%;\n  padding-top: var(--field--padding-top);\n  padding-bottom: var(--field--padding-bottom);\n  padding-left: var(--field--padding-left);\n  padding-right: var(--field--padding-right);\n  border: none;\n  border-radius: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: calc(var(--base-unit) * 1.25);\n  text-align: var(--field--textAlign);\n  background: transparent;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n._3koQsrzZZXPVxXmmESjSG_:focus {\n  outline: none;\n}\n\n.IVFKQabHAwX8Kn2aNj8gM ._3koQsrzZZXPVxXmmESjSG_ {\n  --field--padding-top: calc(var(--space-base) + var(--space-smaller));\n  --field--padding-bottom: var(--space-small);\n}\n\n._1hfSn_RRn6Enf7teCHrbV8 ._3koQsrzZZXPVxXmmESjSG_ {\n  resize: vertical;\n}\n\n._2N7Ipv_CbNRzrdEGCrptrV ._3koQsrzZZXPVxXmmESjSG_ {\n  --field--padding-top: var(--space-small);\n  --field--padding-bottom: var(--space-small);\n}\n\n.Ntcl388Qhhu4uLJc2d1Ll ._3koQsrzZZXPVxXmmESjSG_ {\n  --field--padding-top: 0;\n  --field--padding-bottom: 0;\n}\n\n.IVFKQabHAwX8Kn2aNj8gM.Ntcl388Qhhu4uLJc2d1Ll:not(._2N7Ipv_CbNRzrdEGCrptrV) ._3koQsrzZZXPVxXmmESjSG_ {\n  --field--padding-top: var(--space-small);\n}\n\n/**\n * Label\n **/\n\n.ktPFw5_r1v4MB-Ts5rPTG {\n  position: absolute;\n  top: var(--field--placeholder-offset);\n  z-index: var(--field--label-elevation);\n  width: 100%;\n  padding-left: var(--field--padding-left);\n  padding-right: var(--field--padding-right);\n  overflow: hidden;\n  color: var(--field--placeholder-color);\n  line-height: calc(var(--base-unit) * 1.25);\n  text-align: var(--field--textAlign);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  -webkit-transform: translateY(var(--field--placeholder-transform));\n          transform: translateY(var(--field--placeholder-transform));\n  transition: all var(--timing-quick);\n}\n\n.IVFKQabHAwX8Kn2aNj8gM .ktPFw5_r1v4MB-Ts5rPTG {\n  font-size: calc(var(--base-unit) * 0.875);\n}\n\n._1hfSn_RRn6Enf7teCHrbV8 .ktPFw5_r1v4MB-Ts5rPTG {\n  top: var(--field--padding-top);\n  -webkit-transform: translateY(0);\n          transform: translateY(0);\n}\n\n._1hfSn_RRn6Enf7teCHrbV8.IVFKQabHAwX8Kn2aNj8gM .ktPFw5_r1v4MB-Ts5rPTG {\n  top: var(--space-smallest);\n}\n\n._2N7Ipv_CbNRzrdEGCrptrV.IVFKQabHAwX8Kn2aNj8gM .ktPFw5_r1v4MB-Ts5rPTG {\n  display: none;\n}\n\n._2RtHPlAJG3Hp2QD9Q9cfD_.IVFKQabHAwX8Kn2aNj8gM .ktPFw5_r1v4MB-Ts5rPTG {\n  top: var(--space-small);\n}\n\n/**\n * Postfix\n **/\n\n._1yJbSG5N0hfPjPkrih4Q99 {\n  position: absolute;\n  top: 50%;\n  right: var(--space-base);\n  z-index: var(--field--postfix-elevation);\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n\n/**\n * Affix\n **/\n\n._1EBMzQ2qM74AhLWsJH_VD7 {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n  margin: 0 calc(var(--field--padding-left) * -1) 0 0;\n  padding: 0 var(--field--padding-right) 0 var(--field--padding-left);\n}\n\n@supports (aspect-ratio: 1/1) {\n  ._1EBMzQ2qM74AhLWsJH_VD7 {\n    /*\n     * disabling property-no-unknown here as this is a real property\n     * that stylelint just doesn't know about. We may be able to remove\n     * this when we update our stylelint to not care about IE11.\n     */\n    /* stylelint-disable-next-line property-no-unknown */\n    aspect-ratio: 1/1;\n    padding: 0;\n  }\n}\n\n._1EBMzQ2qM74AhLWsJH_VD7._2k-tb4HuwDpSggx3JEm4Rp {\n  margin: 0 0 0 calc(var(--field--padding-right) * -1);\n}\n\n._1EBMzQ2qM74AhLWsJH_VD7._1Pm2Qo4Aw45IfKYq1qX4CW {\n  position: relative;\n  z-index: var(--field--postfix-action-elevation);\n}\n\n._2PE8Igv1VLxZ4mpQc6iiR4 {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  margin: 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1) 0 0;\n  padding: 0 0 0 var(--field--padding-left);\n}\n\n._2PE8Igv1VLxZ4mpQc6iiR4._2k-tb4HuwDpSggx3JEm4Rp {\n  margin: 0 0 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1);\n  padding: 0 var(--field--padding-left) 0 0;\n}\n\n.IVFKQabHAwX8Kn2aNj8gM:not(._2N7Ipv_CbNRzrdEGCrptrV) ._2PE8Igv1VLxZ4mpQc6iiR4 {\n  padding-top: calc(var(--field--padding-top) - 2px);\n}\n\n._1iN0xB6nTG687YOOopowf {\n  margin-top: var(--space-smaller);\n}\n";
-var styles = {"wrapper":"_2bOj_Hpd2VvA3mi9t4RcZO","miniLabel":"IVFKQabHAwX8Kn2aNj8gM","textarea":"_1hfSn_RRn6Enf7teCHrbV8","invalid":"_3H2M7GlXG4Qh417lRbpzS7","disabled":"_2xkImc45YUzsUp6bZ3Ik_4","small":"_2N7Ipv_CbNRzrdEGCrptrV","large":"_2RtHPlAJG3Hp2QD9Q9cfD_","inline-left":"_3AHR56Sam4H_gp9JyzxRLl","inline-right":"_3AHR56Sam4H_gp9JyzxRLl","inline":"_3AHR56Sam4H_gp9JyzxRLl","center":"_19KcCv1flBCB9mHUlTLkQL","right":"_1wVbgkkxLyHZUFsS-xEPlc","maxLength":"_1tABQjw4-IkgUE3cbBzs7r","inputWrapper":"_1WnxEaBZY0zLsD8oKwh20b","input":"_3koQsrzZZXPVxXmmESjSG_","select":"Ntcl388Qhhu4uLJc2d1Ll","label":"ktPFw5_r1v4MB-Ts5rPTG","postfix":"_1yJbSG5N0hfPjPkrih4Q99","affixIcon":"_1EBMzQ2qM74AhLWsJH_VD7","suffix":"_2k-tb4HuwDpSggx3JEm4Rp","hasAction":"_1Pm2Qo4Aw45IfKYq1qX4CW","affixLabel":"_2PE8Igv1VLxZ4mpQc6iiR4","description":"_1iN0xB6nTG687YOOopowf"};
-__chunk_2.styleInject(css);
-
-function AffixLabel(_a) {
-    var _b;
-    var label = _a.label, _c = _a.variation, variation = _c === void 0 ? "prefix" : _c, labelRef = _a.labelRef;
-    var affixLabelClass = classnames(styles.affixLabel, (_b = {},
-        _b[styles.suffix] = variation === "suffix",
-        _b));
-    return (React__default.createElement("div", { ref: labelRef, className: affixLabelClass }, label));
-}
-function AffixIcon(_a) {
-    var _b;
-    var icon = _a.icon, onClick = _a.onClick, ariaLabel = _a.ariaLabel, _c = _a.variation, variation = _c === void 0 ? "prefix" : _c, size = _a.size;
-    var affixIconClass = classnames(styles.affixIcon, (_b = {},
-        _b[styles.suffix] = variation === "suffix",
-        _b[styles.hasAction] = onClick,
-        _b));
-    var iconSize = size === "small" ? "small" : "base";
-    if (!icon)
-        return React__default.createElement(React__default.Fragment, null);
-    return (React__default.createElement("div", { className: affixIconClass }, onClick ? (React__default.createElement(index$5.Button
-    /**
-     * We can cast the ariaLabel here as a `Suffix`
-     * requires an ariaLabel if there is an action
-     */
-    , { 
-        /**
-         * We can cast the ariaLabel here as a `Suffix`
-         * requires an ariaLabel if there is an action
-         */
-        ariaLabel: ariaLabel, icon: icon, onClick: onClick, variation: "subtle", type: "tertiary", size: iconSize })) : (React__default.createElement(index$2.Icon, { name: icon, size: iconSize, color: "greyBlue" }))));
-}
-
-function FormFieldDescription(_a) {
-    var id = _a.id, description = _a.description;
-    return (React__default.createElement("div", { id: id, className: styles.description },
-        React__default.createElement(index$1.Text, { variation: "subdued" }, description)));
-}
-
-function FormFieldWrapper(_a) {
-    var _b, _c;
-    var align = _a.align, description = _a.description, descriptionIdentifier = _a.descriptionIdentifier, placeholder = _a.placeholder, value = _a.value, children = _a.children, invalid = _a.invalid, error = _a.error, size = _a.size, prefix = _a.prefix, suffix = _a.suffix, max = _a.max, maxLength = _a.maxLength, type = _a.type, disabled = _a.disabled, inline = _a.inline, identifier = _a.identifier;
-    var wrapperClasses = classnames(styles.wrapper, size && styles[size], align && styles[align], (_b = {},
-        _b[styles.miniLabel] = (placeholder && value !== "") ||
-            (placeholder && type === "select") ||
-            (placeholder && type === "time"),
-        _b[styles.textarea] = type === "textarea",
-        _b[styles.invalid] = invalid !== null && invalid !== void 0 ? invalid : error,
-        _b[styles.disabled] = disabled,
-        _b[styles.inline] = inline,
-        _b[styles.maxLength] = maxLength,
-        _b[styles.select] = type === "select",
-        _b));
-    var wrapperInlineStyle = (_c = {},
-        _c["--formField-maxLength"] = maxLength || max,
-        _c);
-    var prefixRef = React.useRef();
-    var suffixRef = React.useRef();
-    var _d = __chunk_1.__read(React.useState({
-        paddingLeft: undefined,
-        paddingRight: undefined,
-    }), 2), labelStyle = _d[0], setLabelStyle = _d[1];
-    React.useEffect(function () {
-        setLabelStyle(getAffixPaddding);
-    }, [value]);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: wrapperClasses, style: wrapperInlineStyle },
-            (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && React__default.createElement(AffixIcon, __chunk_1.__assign({}, prefix, { size: size })),
-            React__default.createElement("div", { className: styles.inputWrapper },
-                React__default.createElement("label", { className: styles.label, htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) ? labelStyle : undefined }, placeholder),
-                (prefix === null || prefix === void 0 ? void 0 : prefix.label) && React__default.createElement(AffixLabel, __chunk_1.__assign({}, prefix, { labelRef: prefixRef })),
-                children,
-                (suffix === null || suffix === void 0 ? void 0 : suffix.label) && (React__default.createElement(AffixLabel, __chunk_1.__assign({}, suffix, { labelRef: suffixRef, variation: "suffix" })))),
-            (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React__default.createElement(AffixIcon, __chunk_1.__assign({}, suffix, { variation: "suffix", size: size })))),
-        description && !inline && (React__default.createElement(FormFieldDescription, { id: descriptionIdentifier, description: description })),
-        error && !inline && React__default.createElement(index$6.InputValidation, { message: error })));
-    function getAffixPaddding() {
-        var hasValue = value !== "";
-        var newPadding = {
-            paddingLeft: undefined,
-            paddingRight: undefined,
-        };
-        if ((prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) && !hasValue) {
-            var offsetWidth = (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current).offsetWidth;
-            newPadding.paddingLeft = offset(offsetWidth);
-        }
-        if ((suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) && !hasValue) {
-            var offsetWidth = (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current).offsetWidth;
-            newPadding.paddingRight = offset(offsetWidth);
-        }
-        function offset(width) {
-            return "calc(" + width + "px + var(--space-smallest)";
-        }
-        return newPadding;
-    }
-}
+require('../Spinner-18d3dee6.js');
 
-function FormFieldPostFix(_a) {
-    var variation = _a.variation;
-    return (React__default.createElement("span", { className: styles.postfix }, variation === "select" ? (React__default.createElement(index$2.Icon, { name: "arrowDown" })) : (React__default.createElement(index$7.Spinner, { size: "small" }))));
-}
 
-function FormField(props) {
-    var _a;
-    var actionsRef = props.actionsRef, _b = props.autocomplete, autocomplete = _b === void 0 ? true : _b, children = props.children, defaultValue = props.defaultValue, description = props.description, disabled = props.disabled, inputRef = props.inputRef, inline = props.inline, keyboard = props.keyboard, max = props.max, maxLength = props.maxLength, min = props.min, name = props.name, readonly = props.readonly, rows = props.rows, loading = props.loading, _c = props.type, type = _c === void 0 ? "text" : _c, validations = props.validations, value = props.value, onChange = props.onChange, onEnter = props.onEnter, onFocus = props.onFocus, onBlur = props.onBlur, onValidation = props.onValidation;
-    var _d = reactHookForm.useFormContext() != undefined
-        ? reactHookForm.useFormContext()
-        : reactHookForm.useForm({ mode: "onTouched" }), control = _d.control, errors = _d.errors, setValue = _d.setValue, watch = _d.watch;
-    var _e = __chunk_1.__read(React.useState(uuid.v1()), 1), identifier = _e[0];
-    var _f = __chunk_1.__read(React.useState("descriptionUUID--" + uuid.v1()), 1), descriptionIdentifier = _f[0];
-    /**
-     * Generate a name if one is not supplied, this is the name
-     * that will be used for react-hook-form and not neccessarily
-     * attached to the DOM
-     */
-    var _g = __chunk_1.__read(React.useState(name ? name : "generatedName--" + identifier), 1), controlledName = _g[0];
-    React.useEffect(function () {
-        if (value != undefined) {
-            setValue(controlledName, value);
-        }
-    }, [value, watch(controlledName)]);
-    React.useImperativeHandle(actionsRef, function () { return ({
-        setValue: function (newValue) {
-            setValue(controlledName, newValue);
-        },
-    }); });
-    var error = errors[controlledName] && errors[controlledName].message;
-    React.useEffect(function () { return handleValidation(); }, [error]);
-    return (React__default.createElement(reactHookForm.Controller, { control: control, name: controlledName, rules: __chunk_1.__assign({}, validations), defaultValue: (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : "", render: function (_a) {
-            var onControllerChange = _a.onChange, onControllerBlur = _a.onBlur, controllerName = _a.name, rest = __chunk_1.__rest(_a, ["onChange", "onBlur", "name"]);
-            var fieldProps = __chunk_1.__assign(__chunk_1.__assign(__chunk_1.__assign({}, rest), { id: identifier, className: styles.input, name: (validations || name) && controllerName, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange }), (description &&
-                !inline && { "aria-describedby": descriptionIdentifier }));
-            var textFieldProps = __chunk_1.__assign(__chunk_1.__assign({}, fieldProps), { onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown });
-            return (React__default.createElement(FormFieldWrapper, __chunk_1.__assign({}, props, { value: rest.value, error: error, identifier: identifier, descriptionIdentifier: descriptionIdentifier }), renderField()));
-            function renderField() {
-                switch (type) {
-                    case "select":
-                        return (React__default.createElement(React__default.Fragment, null,
-                            React__default.createElement("select", __chunk_1.__assign({}, fieldProps), children),
-                            React__default.createElement(FormFieldPostFix, { variation: "select" })));
-                    case "textarea":
-                        return (React__default.createElement("textarea", __chunk_1.__assign({}, textFieldProps, { rows: rows, ref: inputRef })));
-                    default:
-                        return (React__default.createElement(React__default.Fragment, null,
-                            React__default.createElement("input", __chunk_1.__assign({}, textFieldProps, { autoComplete: setAutocomplete(autocomplete), type: type, maxLength: maxLength, max: max, min: min, ref: inputRef })),
-                            loading && React__default.createElement(FormFieldPostFix, { variation: "spinner" })));
-                }
-            }
-            function handleChange(event) {
-                var newValue;
-                newValue = event.currentTarget.value;
-                if (type === "number" && newValue.length > 0) {
-                    newValue = parseFloat(newValue);
-                }
-                onChange && onChange(newValue, event);
-                onControllerChange(event);
-            }
-            function handleKeyDown(event) {
-                if (!onEnter)
-                    return;
-                if (event.key !== "Enter")
-                    return;
-                if (event.shiftKey || event.ctrlKey)
-                    return;
-                event.preventDefault();
-                onEnter && onEnter(event);
-            }
-            function handleFocus(event) {
-                var target = event.currentTarget;
-                setTimeout(function () { return readonly && target.select(); });
-                onFocus && onFocus();
-            }
-            function handleBlur() {
-                onBlur && onBlur();
-                onControllerBlur();
-            }
-        } }));
-    function handleValidation() {
-        onValidation && onValidation(error);
-    }
-}
-function setAutocomplete(autocompleteSetting) {
-    if (autocompleteSetting === true) {
-        return undefined;
-    }
-    else if (autocompleteSetting === false) {
-        return "autocomplete-off";
-    }
-    return autocompleteSetting;
-}
 
-exports.FormField = FormField;
+exports.FormField = FormField.FormField;