@dfds-ui/forms 2.0.13-alpha.387f7b2c → 2.0.13-alpha.a1d8e406

package/cjs/assistive-text/AssistiveText.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type AssistiveTextProps = {
+    id?: string;
+    children: React.ReactNode;
+    className?: string;
+};
+export declare const AssistiveText: ({ id, className, children }: AssistiveTextProps) => JSX.Element;
+export default AssistiveText;

package/cjs/asterisk/Asterisk.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare type AsteriskProps = {
+    /**
+     * Class name to be assigned to the component
+     */
+    className?: string;
+};
+export declare const Asterisk: ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;
+export default Asterisk;

package/cjs/checkbox/Checkbox.d.ts

@@ -0,0 +1,65 @@
+import React, { ReactNode } from 'react';
+declare type CheckboxSize = 'medium' | 'small';
+export declare type CheckboxProps = {
+    /**
+     * Field name.
+     */
+    name: string;
+    /**
+     * Indicate that the checkbox is checked.
+     *
+     * Setting to either true or false will make this a controlled component.
+     */
+    checked?: boolean;
+    /**
+     * Indicate that the checkbox is defaultChecked.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Class name to be assigned to the component.
+     */
+    className?: string;
+    /**
+     * Field label.
+     */
+    value?: string;
+    /**
+     * Indicates that the radio button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates an error in the field.
+     */
+    error?: boolean;
+    /**
+     * Additional help.
+     *
+     * **This is an experimental prop and the behavior might change.**
+     */
+    help?: string;
+    /**
+     * If true the checkbox will be rendered in indeterminate state (visual only).
+     */
+    indeterminate?: boolean;
+    /**
+     * Size variant.
+     */
+    visualSize?: CheckboxSize;
+    /**
+     * Controls the vertical alignment of the checkbox in relation to the label.
+     */
+    inputVerticalAlignment?: 'center' | 'top';
+    /**
+     * Callback when the checkbox is checked or unchecked.
+     */
+    onChange?: JSX.IntrinsicElements['input']['onChange'];
+    /**
+     * Callback when the label (or checkbox control) is clicked.
+     */
+    onLabelClick?: JSX.IntrinsicElements['label']['onClick'];
+    children?: ReactNode;
+};
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+/** @deprecated Use Checkbox */
+export declare const CheckboxField: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/cjs/checkbox/CheckboxContext.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CheckboxProps } from './Checkbox';
+declare type CheckboxContextProps = {
+    children?: React.ReactNode;
+    visualSize: NonNullable<CheckboxProps['visualSize']>;
+    error: CheckboxProps['error'];
+};
+export declare const CheckboxContext: React.Context<CheckboxContextProps | undefined>;
+export declare const CheckboxContextProvider: React.FC<{
+    value: CheckboxContextProps;
+}>;
+declare const useCheckboxContext: () => CheckboxContextProps | undefined;
+export default useCheckboxContext;

package/cjs/checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { BaseFieldProps } from '../types';
+import { CheckboxProps } from './Checkbox';
+export declare type CheckboxGroupProps = Pick<BaseFieldProps, 'help' | 'label' | 'required' | 'hideAsterisk' | 'disabled' | 'errorMessage' | 'assistiveText'> & Pick<CheckboxProps, 'visualSize'> & {
+    children: ReactNode;
+    /**
+     * Indicates that the CheckboxGroup has an error.
+     *
+     * You can also set the `errorMessage` prop to indicate an error but setting `error` will trigger
+     * the visual indication regardless of the value of `errorMessage`. Setting `errorMessage` and setting
+     * `error` to `false` will however still render the visual indication.
+     */
+    error?: boolean;
+    /**
+     * Class name to be assigned to the component
+     */
+    className?: string;
+    column?: boolean;
+};
+export declare const CheckboxGroup: ({ visualSize, help, label, children, column, assistiveText, errorMessage, error, required, className, ...rest }: CheckboxGroupProps) => JSX.Element;

package/cjs/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+export * from './CheckboxGroup';

package/cjs/counter/Counter.d.ts

@@ -0,0 +1,66 @@
+import React, { ReactNode } from 'react';
+declare type Size = 's' | 'm';
+export declare type CounterProps = {
+    /**
+     * Minimum value
+     */
+    minValue: number;
+    /**
+     * Maximum value
+     */
+    maxValue: number;
+    /**
+     * Disables the minus button
+     */
+    disableMin?: boolean;
+    /**
+     * Disables the plus button
+     */
+    disableMax?: boolean;
+    /**
+     * Class name
+     */
+    className?: string;
+    /**
+     * Disables input of counter
+     */
+    disableInput?: boolean;
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * Initial value of the counter, if not specified it's set to `minValue`
+     */
+    value?: number;
+    /**
+     * Sets default value
+     */
+    defaultValue?: number;
+    /**
+     * Set aria label on plus/increase
+     */
+    increaseAriaLabel?: string;
+    /**
+     * Set aria label on minus/decrease
+     */
+    decreaseAriaLabel?: string;
+    /**
+     * Disable tool tips
+     */
+    disableToolTips?: boolean;
+    /**
+     * Callback when value changes
+     */
+    onChange?: (arg: number, event: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Label to display instead of the input element, see example below
+     */
+    text?: ReactNode;
+    /**
+     * Size of counter
+     */
+    size?: Size;
+};
+export declare const Counter: React.ForwardRefExoticComponent<CounterProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/cjs/counter/index.d.ts

@@ -0,0 +1 @@
+export { Counter } from './Counter';

package/cjs/enhanced/EnhancedField.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+declare type ReactInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export declare type EnhancedInputProps<TValue> = Omit<EnhancedFieldProps, 'value'> & {
+    value?: TValue;
+};
+export declare type EnhancedFieldProps = Omit<ReactInputProps, 'size' | 'css'> & {
+    name?: string;
+    /**
+     * Label to be displayed
+     */
+    label?: React.ReactNode;
+    /**
+     * Icon to be displayed
+     */
+    icon?: React.ElementType;
+    className?: string;
+    onClick?: (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+};
+export declare const EnhancedField: React.ForwardRefExoticComponent<Pick<EnhancedFieldProps, "max" | "required" | "type" | "key" | "id" | "height" | "width" | "name" | "color" | "translate" | "value" | "hidden" | "form" | "label" | "slot" | "style" | "title" | "dir" | "pattern" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "enterKeyHint" | "inputMode" | "tabIndex" | "disabled" | "multiple" | "icon" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "maxLength" | "min" | "minLength" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "readOnly" | "src" | "step" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLInputElement>>;
+export default EnhancedField;

package/cjs/enhanced/index.d.ts

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

package/cjs/error-text/ErrorText.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type ErrorTextProps = {
+    id?: string;
+    children: React.ReactNode;
+    className?: string;
+};
+export declare const ErrorText: ({ id, className, children }: ErrorTextProps) => JSX.Element;
+export default ErrorText;

package/cjs/field-wrap/FieldWrap.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { BaseFieldProps, Size } from '../types';
+export declare type FieldWrapProps = BaseFieldProps & {
+    size: Size;
+    children?: ReactNode;
+    extraAssistiveText?: string;
+    className?: string;
+};
+export declare const FieldWrap: ({ name, assistiveText, errorMessage, size, required, hideAsterisk, label, help, extraAssistiveText, className, children, }: FieldWrapProps) => JSX.Element;

package/cjs/field-wrap/index.d.ts

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

package/cjs/help-icon/HelpIcon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare type HelpIconProps = {
+    content: string;
+    className?: string;
+};
+export declare const HelpIcon: ({ content, className }: HelpIconProps) => JSX.Element;
+export default HelpIcon;

package/cjs/index.d.ts

@@ -0,0 +1,15 @@
+export * from './checkbox';
+export * from './enhanced';
+export * from './error-text/ErrorText';
+export * from './field-wrap';
+export * from './label/Label';
+export * from './password-field/PasswordField';
+export * from './radio';
+export * from './rating';
+export * from './select-field/NativeSelectField';
+export * from './select-field/SelectField';
+export * from './switch/index';
+export * from './tel-field/TelField';
+export * from './text-field/TextField';
+export * from './textarea-field/TextareaField';
+export * from './counter/Counter';

package/cjs/label/Label.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+import { Size } from '../types';
+export declare type LabelProps = {
+    children: ReactNode;
+    className?: string;
+    hideAsterisk?: boolean;
+    required?: boolean;
+    visualSize?: Size;
+} & React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+export declare const Label: ({ visualSize, required, hideAsterisk, className, children, ...rest }: LabelProps) => JSX.Element;

package/cjs/password-field/PasswordField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TextFieldProps } from '../text-field/TextField';
+export declare type PasswordFieldProps = Omit<TextFieldProps, 'icon' | 'inputType'>;
+export declare const PasswordField: React.ForwardRefExoticComponent<PasswordFieldProps & React.RefAttributes<HTMLInputElement>>;

package/cjs/radio/Radio.d.ts

@@ -0,0 +1,51 @@
+import React, { ReactNode } from 'react';
+declare type RadioSize = 'medium' | 'small';
+export declare type RadioStyleState = 'checked';
+export declare type RadioProps = {
+    /**
+     * Field name.
+     */
+    name: string;
+    /**
+     * Indicate that the radio button is checked
+     */
+    checked?: boolean;
+    /**
+     *
+     */
+    defaultChecked?: boolean;
+    /**
+     * Field label.
+     */
+    label?: ReactNode;
+    /**
+     * Class name to be assigned to the component
+     */
+    className?: string;
+    /**
+     * Field label.
+     */
+    value?: string;
+    /**
+     * Indicates that the radio button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates an error in the field.
+     */
+    error?: boolean;
+    /**
+     * Size variant.
+     */
+    visualSize?: RadioSize;
+    /**
+     * Callback when the radio button is checked or unchecked
+     */
+    onChange?: JSX.IntrinsicElements['input']['onChange'];
+    Icon?: React.ComponentType;
+    styledAs?: RadioStyleState;
+};
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+/** @deprecated Use Radio */
+export declare const RadioField: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/cjs/radio/RadioContext.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RadioProps } from './Radio';
+declare type RadioContextProps = {
+    children?: React.ReactNode;
+    visualSize: NonNullable<RadioProps['visualSize']>;
+    error: RadioProps['error'];
+};
+export declare const RadioContext: React.Context<RadioContextProps | undefined>;
+export declare const RadioContextProvider: React.FC<{
+    value: RadioContextProps;
+}>;
+declare const useRadioContext: () => RadioContextProps | undefined;
+export default useRadioContext;

package/cjs/radio/RadioGroup.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { BaseFieldProps } from '../types';
+import { RadioProps } from './Radio';
+export declare type RadioGroupProps = Pick<BaseFieldProps, 'help' | 'label' | 'required' | 'hideAsterisk' | 'disabled' | 'errorMessage'> & Pick<RadioProps, 'visualSize'> & {
+    children: ReactNode;
+    /**
+     * Class name to be assigned to the component
+     */
+    className?: string;
+    column?: boolean;
+};
+export declare const RadioGroup: ({ visualSize, label, children, column, errorMessage, help, required, hideAsterisk, className, }: RadioGroupProps) => JSX.Element;

package/cjs/radio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Radio';
+export * from './RadioGroup';

package/cjs/rating/Rating.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { FieldWrapProps } from '../field-wrap/FieldWrap';
+import { Size } from '../types';
+export declare type RatingProps = {
+    /**
+     * Amount of related checkboxes
+     */
+    rangeCardinality: number;
+    /**
+     * Name for the checkbox group
+     */
+    name: string;
+    /**
+     * Hint text on the left
+     */
+    leadingHint?: string;
+    /**
+     * Hint text on the right
+     */
+    trailingHint?: string;
+    /**
+     * Labels on top of the radio selectors, a string returning function called with the selector's index
+     */
+    scaleLabels?: (index: number) => string;
+    /**
+     * If used as a controlled component, this value sets the selected radio
+     */
+    value?: number;
+    /**
+     * Initial selected value
+     */
+    defaultValue?: number;
+    /**
+     * Callback when the user changes the selected value
+     */
+    onChange?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    showScaleLabels?: boolean;
+    /**
+     * When this property is `true`, it styles the radios to the left of the selected as `checked`
+     */
+    cumulative?: boolean;
+    Icon?: (index: number) => React.ComponentType;
+};
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLInputElement>>;
+export declare type RatingFieldProps = RatingProps & Omit<FieldWrapProps, 'size' | 'placeholder' | 'helpPlacement' | 'children'> & {
+    size: Exclude<Size, 'large'>;
+};
+/**
+ * The `RatingField` component will allow the user to provide feedback by ranking things on a specified scale.
+ */
+export declare const RatingField: React.ForwardRefExoticComponent<RatingProps & Omit<FieldWrapProps, "children" | "size" | "placeholder" | "helpPlacement"> & {
+    size: Exclude<Size, 'large'>;
+} & React.RefAttributes<HTMLInputElement>>;
+export default RatingField;

package/cjs/rating/index.d.ts

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

package/cjs/select-field/NativeSelectField.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BaseFieldProps, Size } from '../types';
+export declare type NativeSelectFieldProps = BaseFieldProps & React.ComponentPropsWithRef<'select'> & {
+    className?: string;
+    visualSize?: Size;
+};
+export declare const NativeSelectField: React.ForwardRefExoticComponent<Pick<NativeSelectFieldProps, "required" | "key" | "id" | "name" | "color" | "translate" | "value" | "hidden" | "form" | "label" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "disabled" | "multiple" | "size" | "help" | "autoComplete" | "autoFocus" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "hideAsterisk" | "assistiveText" | "errorMessage" | "visualSize" | "helpPlacement"> & React.RefAttributes<HTMLSelectElement>>;
+export default NativeSelectField;

package/cjs/select-field/SelectField.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import Select, { createFilter, GroupBase, OptionsOrGroups, SingleValue } from 'react-select';
+import { BaseFieldProps } from '../types';
+export declare type BaseReactSelectProps = Omit<React.PropsWithRef<Select>, 'size' | 'css'>;
+export declare type Size = 'small' | 'medium' | 'large';
+export declare const ReactSelectWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & {
+    error?: boolean | undefined;
+    size?: string | undefined;
+    arrow?: boolean | undefined;
+    selected?: boolean | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Menu: (props: any) => JSX.Element;
+export declare type SelectFieldProps<T = string> = BaseFieldProps & {
+    autoFocus?: boolean;
+    defaultValue?: SingleValue<T>;
+    className?: string;
+    components?: any;
+    value?: SingleValue<T>;
+    visualSize?: Size;
+    options?: OptionsOrGroups<T, GroupBase<T>>;
+    isSearchable?: boolean;
+    onSelect?: (value: SingleValue<T>) => void;
+    onChange?: (value: SingleValue<T>) => void;
+    onBlur?: (value: any) => void;
+    menuIsOpen?: boolean;
+    menuPlacement?: 'bottom' | 'auto' | 'top';
+    placeholder?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    assistiveText?: string;
+    errorMessage?: string;
+    /**
+     * Indicates that the Select can be cleared after selecting an Option.
+     *
+     * Setting this to true will display a small dismiss cross when a value is selected
+     */
+    isClearable?: boolean;
+    /**
+     * Configuration object passed to react-select createFilter function to create [custom filter
+     * logic](https://react-select.com/advanced#custom-filter-logic)
+     * @param ignoreCase - boolean (optional)
+     * @param ignoreAccents - boolean (optional)
+     * @param stringify (obj: any) => string (optional)
+     * @param trim - boolean (optional)
+     * @param matchForm - 'any' | 'start'
+     */
+    filterConfig?: Parameters<typeof createFilter>[0];
+    styles?: any;
+};
+declare function SelectFieldInner<T>({ components, name, label, defaultValue, value, placeholder, onSelect, onChange, isSearchable, onBlur, assistiveText, options, errorMessage, isClearable, disabled, visualSize, required, hideAsterisk, filterConfig, styles, help, helpPlacement, ...rest }: SelectFieldProps<T>, ref: React.ForwardedRef<any>): JSX.Element;
+export declare const SelectField: <T>(props: BaseFieldProps & {
+    autoFocus?: boolean | undefined;
+    defaultValue?: SingleValue<T> | undefined;
+    className?: string | undefined;
+    components?: any;
+    value?: SingleValue<T> | undefined;
+    visualSize?: Size | undefined;
+    options?: OptionsOrGroups<T, GroupBase<T>> | undefined;
+    isSearchable?: boolean | undefined;
+    onSelect?: ((value: SingleValue<T>) => void) | undefined;
+    onChange?: ((value: SingleValue<T>) => void) | undefined;
+    onBlur?: ((value: any) => void) | undefined;
+    menuIsOpen?: boolean | undefined;
+    menuPlacement?: "auto" | "top" | "bottom" | undefined;
+    placeholder?: string | undefined;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    assistiveText?: string | undefined;
+    errorMessage?: string | undefined;
+    /**
+     * Indicates that the Select can be cleared after selecting an Option.
+     *
+     * Setting this to true will display a small dismiss cross when a value is selected
+     */
+    isClearable?: boolean | undefined;
+    /**
+     * Configuration object passed to react-select createFilter function to create [custom filter
+     * logic](https://react-select.com/advanced#custom-filter-logic)
+     * @param ignoreCase - boolean (optional)
+     * @param ignoreAccents - boolean (optional)
+     * @param stringify (obj: any) => string (optional)
+     * @param trim - boolean (optional)
+     * @param matchForm - 'any' | 'start'
+     */
+    filterConfig?: Parameters<typeof createFilter>[0];
+    styles?: any;
+} & {
+    ref?: React.ForwardedRef<any> | undefined;
+}) => ReturnType<typeof SelectFieldInner>;
+export default SelectField;

package/cjs/switch/Switch.d.ts

@@ -0,0 +1,32 @@
+import React, { ChangeEvent } from 'react';
+declare type Size = 'small' | 'medium';
+export declare type SwitchProps = React.PropsWithRef<JSX.IntrinsicElements['label']> & {
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * State of the switch
+     *
+     */
+    checked?: boolean;
+    /**
+     * Controls whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Callback to fire when the state of the input changes
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Controls whether the input label should be displayed on the right of the input, displayed on the left by default
+     */
+    right?: boolean;
+    /**
+     * Visual size of the switch
+     */
+    size?: Size;
+    error?: boolean;
+};
+export declare const Switch: React.ForwardRefExoticComponent<Pick<SwitchProps, "error" | "key" | "name" | "right" | "disabled" | "size" | "checked" | "css" | keyof React.LabelHTMLAttributes<HTMLLabelElement>> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/cjs/switch/SwitchContext.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SwitchProps } from './Switch';
+declare type SwitchContextProps = Required<Pick<SwitchProps, 'size' | 'error'>> & {
+    children?: React.ReactNode;
+};
+export declare const SwitchContext: React.Context<SwitchContextProps | undefined>;
+export declare const SwitchContextProvider: React.FC<{
+    value: SwitchContextProps;
+}>;
+declare const useSwitchContext: () => SwitchContextProps | undefined;
+export default useSwitchContext;

package/cjs/switch/SwitchGroup.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { BaseFieldProps } from '../types';
+import { SwitchProps } from './Switch';
+export declare type SwitchGroupProps = Pick<BaseFieldProps, 'label' | 'errorMessage' | 'hideAsterisk' | 'required'> & {
+    /**
+     * JSX enclosed by the group.
+     */
+    children: ReactNode;
+} & Pick<SwitchProps, 'size'>;
+export declare const SwitchGroup: ({ size, label, errorMessage, required, hideAsterisk, children, }: SwitchGroupProps) => JSX.Element;

package/cjs/switch/SwitchGroup.js

@@ -18,12 +18,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "7bcvef-SwitchGroupContainer",
   styles: "display:flex;flex-direction:column;border:none;padding:0;margin:0;label:SwitchGroupContainer;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zd2l0Y2gvU3dpdGNoR3JvdXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCWSIsImZpbGUiOiIuLi8uLi8uLi9zcmMvc3dpdGNoL1N3aXRjaEdyb3VwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEJhc2VGaWVsZFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IFN3aXRjaFByb3BzIH0gZnJvbSAnLi9Td2l0Y2gnXG5pbXBvcnQgeyBMYWJlbCB9IGZyb20gJy4uL2xhYmVsL0xhYmVsJ1xuaW1wb3J0IHsgU3dpdGNoQ29udGV4dFByb3ZpZGVyIH0gZnJvbSAnLi9Td2l0Y2hDb250ZXh0J1xuaW1wb3J0IHsgRmxleEJveCB9IGZyb20gJ0BkZmRzLXVpL3JlYWN0LWNvbXBvbmVudHMvZmxleGJveCdcbmltcG9ydCBFcnJvclRleHQgZnJvbSAnLi4vZXJyb3ItdGV4dC9FcnJvclRleHQnXG5cbmV4cG9ydCB0eXBlIFN3aXRjaEdyb3VwUHJvcHMgPSBQaWNrPEJhc2VGaWVsZFByb3BzLCAnbGFiZWwnIHwgJ2Vycm9yTWVzc2FnZScgfCAnaGlkZUFzdGVyaXNrJyB8ICdyZXF1aXJlZCc+ICYge1xuICAvKipcbiAgICogSlNYIGVuY2xvc2VkIGJ5IHRoZSBncm91cC5cbiAgICovXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbn0gJiBQaWNrPFN3aXRjaFByb3BzLCAnc2l6ZSc+XG5cbmNvbnN0IFN3aXRjaEdyb3VwQ29udGFpbmVyID0gKHsgY2hpbGRyZW4sIGVycm9yTWVzc2FnZSB9OiBQYXJ0aWFsPFN3aXRjaEdyb3VwUHJvcHM+KSA9PiAoXG4gIDxmaWVsZHNldFxuICAgIGNzcz17Y3NzYFxuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgICBib3JkZXI6IG5vbmU7XG4gICAgICBwYWRkaW5nOiAwO1xuICAgICAgbWFyZ2luOiAwO1xuICAgIGB9XG4gID5cbiAgICB7Y2hpbGRyZW59XG4gIDwvZmllbGRzZXQ+XG4pXG5cbmV4cG9ydCBjb25zdCBTd2l0Y2hHcm91cCA9ICh7XG4gIHNpemUgPSAnbWVkaXVtJyxcbiAgbGFiZWwsXG4gIGVycm9yTWVzc2FnZSxcbiAgcmVxdWlyZWQsXG4gIGhpZGVBc3RlcmlzayxcbiAgY2hpbGRyZW4sXG59OiBTd2l0Y2hHcm91cFByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFN3aXRjaEdyb3VwQ29udGFpbmVyPlxuICAgICAgPFN3aXRjaENvbnRleHRQcm92aWRlciB2YWx1ZT17eyBzaXplLCBlcnJvcjogISFlcnJvck1lc3NhZ2UgfX0+XG4gICAgICAgIDxMYWJlbCByZXF1aXJlZD17cmVxdWlyZWR9IGhpZGVBc3Rlcmlzaz17aGlkZUFzdGVyaXNrfSB2aXN1YWxTaXplPXtzaXplfT5cbiAgICAgICAgICB7bGFiZWx9XG4gICAgICAgIDwvTGFiZWw+XG4gICAgICAgIDxGbGV4Qm94IGRpcmVjdGlvbkNvbHVtbj57Y2hpbGRyZW59PC9GbGV4Qm94PlxuICAgICAgPC9Td2l0Y2hDb250ZXh0UHJvdmlkZXI+XG4gICAgICB7ZXJyb3JNZXNzYWdlICYmIDxFcnJvclRleHQ+e2Vycm9yTWVzc2FnZX08L0Vycm9yVGV4dD59XG4gICAgPC9Td2l0Y2hHcm91cENvbnRhaW5lcj5cbiAgKVxufVxuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zd2l0Y2gvU3dpdGNoR3JvdXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCWSIsImZpbGUiOiIuLi8uLi8uLi9zcmMvc3dpdGNoL1N3aXRjaEdyb3VwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEJhc2VGaWVsZFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IFN3aXRjaFByb3BzIH0gZnJvbSAnLi9Td2l0Y2gnXG5pbXBvcnQgeyBMYWJlbCB9IGZyb20gJy4uL2xhYmVsL0xhYmVsJ1xuaW1wb3J0IHsgU3dpdGNoQ29udGV4dFByb3ZpZGVyIH0gZnJvbSAnLi9Td2l0Y2hDb250ZXh0J1xuaW1wb3J0IHsgRmxleEJveCB9IGZyb20gJ0BkZmRzLXVpL3JlYWN0LWNvbXBvbmVudHMvZmxleGJveCdcbmltcG9ydCBFcnJvclRleHQgZnJvbSAnLi4vZXJyb3ItdGV4dC9FcnJvclRleHQnXG5cbmV4cG9ydCB0eXBlIFN3aXRjaEdyb3VwUHJvcHMgPSBQaWNrPEJhc2VGaWVsZFByb3BzLCAnbGFiZWwnIHwgJ2Vycm9yTWVzc2FnZScgfCAnaGlkZUFzdGVyaXNrJyB8ICdyZXF1aXJlZCc+ICYge1xuICAvKipcbiAgICogSlNYIGVuY2xvc2VkIGJ5IHRoZSBncm91cC5cbiAgICovXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbn0gJiBQaWNrPFN3aXRjaFByb3BzLCAnc2l6ZSc+XG5cbmNvbnN0IFN3aXRjaEdyb3VwQ29udGFpbmVyID0gKHsgY2hpbGRyZW4gfTogUGFydGlhbDxTd2l0Y2hHcm91cFByb3BzPikgPT4gKFxuICA8ZmllbGRzZXRcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgcGFkZGluZzogMDtcbiAgICAgIG1hcmdpbjogMDtcbiAgICBgfVxuICA+XG4gICAge2NoaWxkcmVufVxuICA8L2ZpZWxkc2V0PlxuKVxuXG5leHBvcnQgY29uc3QgU3dpdGNoR3JvdXAgPSAoe1xuICBzaXplID0gJ21lZGl1bScsXG4gIGxhYmVsLFxuICBlcnJvck1lc3NhZ2UsXG4gIHJlcXVpcmVkLFxuICBoaWRlQXN0ZXJpc2ssXG4gIGNoaWxkcmVuLFxufTogU3dpdGNoR3JvdXBQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTd2l0Y2hHcm91cENvbnRhaW5lcj5cbiAgICAgIDxTd2l0Y2hDb250ZXh0UHJvdmlkZXIgdmFsdWU9e3sgc2l6ZSwgZXJyb3I6ICEhZXJyb3JNZXNzYWdlIH19PlxuICAgICAgICA8TGFiZWwgcmVxdWlyZWQ9e3JlcXVpcmVkfSBoaWRlQXN0ZXJpc2s9e2hpZGVBc3Rlcmlza30gdmlzdWFsU2l6ZT17c2l6ZX0+XG4gICAgICAgICAge2xhYmVsfVxuICAgICAgICA8L0xhYmVsPlxuICAgICAgICA8RmxleEJveCBkaXJlY3Rpb25Db2x1bW4+e2NoaWxkcmVufTwvRmxleEJveD5cbiAgICAgIDwvU3dpdGNoQ29udGV4dFByb3ZpZGVyPlxuICAgICAge2Vycm9yTWVzc2FnZSAmJiA8RXJyb3JUZXh0PntlcnJvck1lc3NhZ2V9PC9FcnJvclRleHQ+fVxuICAgIDwvU3dpdGNoR3JvdXBDb250YWluZXI+XG4gIClcbn1cbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 const SwitchGroupContainer = ({
-  children,
-  errorMessage
+  children
 }) => (0, _react2.jsx)("fieldset", {
   css: _ref
 }, children);

package/cjs/switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Switch';
+export * from './SwitchGroup';

package/cjs/tel-field/TelField.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Locale } from '@dfds-ui/react-components';
+import { BaseFieldProps } from '../types';
+export declare type TelFieldProps = BaseFieldProps & {
+    /**
+     * Class name to be added to the TelField.
+     */
+    className?: string;
+    /**
+     * Default value for the phone number
+     */
+    defaultValue?: string;
+    /**
+     * Default locale. Will set the matching country in the dropdown
+     */
+    defaultLocale?: Locale;
+    /**
+     * Show trunk values (the local area code shown in parenthesis)
+     */
+    showTrunkValues?: boolean;
+    /**
+     * Makes value splitted so easier to convert to object
+     */
+    splitValues?: boolean;
+    /**
+     * Callback when value changes
+     */
+    onChange?: (newValue: string) => void;
+    /**
+     * Callback when blur
+     */
+    onBlur?: () => void;
+};
+export declare type TelFieldElement = {
+    focus?: () => void;
+};
+export declare const TelField: React.ForwardRefExoticComponent<BaseFieldProps & {
+    /**
+     * Class name to be added to the TelField.
+     */
+    className?: string | undefined;
+    /**
+     * Default value for the phone number
+     */
+    defaultValue?: string | undefined;
+    /**
+     * Default locale. Will set the matching country in the dropdown
+     */
+    defaultLocale?: "en" | "nl-BE" | "bg-BG" | "pt-BR" | "en-CA" | "zh-CN" | "cs-CZ" | "da-DK" | "et-EE" | "fi-FI" | "fr-BE" | "fr-FR" | "de-DE" | "hu-HU" | "it-IT" | "ja-JP" | "lv-LV" | "lt-LT" | "nl-NL" | "nb-NO" | "pl-PL" | "ro-RO" | "ru-RU" | "sk-SK" | "ko-KR" | "es-ES" | "sv-SE" | "tr-TR" | "en-GB" | "en-US" | undefined;
+    /**
+     * Show trunk values (the local area code shown in parenthesis)
+     */
+    showTrunkValues?: boolean | undefined;
+    /**
+     * Makes value splitted so easier to convert to object
+     */
+    splitValues?: boolean | undefined;
+    /**
+     * Callback when value changes
+     */
+    onChange?: ((newValue: string) => void) | undefined;
+    /**
+     * Callback when blur
+     */
+    onBlur?: (() => void) | undefined;
+} & React.RefAttributes<TelFieldElement>>;
+export default TelField;

package/cjs/text-field/TextField.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { BaseFieldProps, Size } from '../types';
+export declare type TextFieldProps = BaseFieldProps & {
+    autoFocus?: boolean;
+    defaultValue?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    icon?: React.ElementType;
+    /**
+     * Element to be placed after the input element.
+     *
+     * Useful for adding a button next to the TextField.
+     */
+    adornment?: React.ReactNode;
+    className?: string;
+    value?: string;
+    visualSize?: Size;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    inputType?: 'email' | 'text' | 'tel' | 'time' | 'url' | 'date' | 'file' | 'number' | 'search' | 'password';
+    autoComplete?: string;
+    minValue?: string;
+    maxValue?: string;
+    maxLength?: number;
+    minLength?: number;
+    step?: number | 'any';
+};
+export declare const TextField: React.ForwardRefExoticComponent<BaseFieldProps & {
+    autoFocus?: boolean | undefined;
+    defaultValue?: string | undefined;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    icon?: React.ElementType<any> | undefined;
+    /**
+     * Element to be placed after the input element.
+     *
+     * Useful for adding a button next to the TextField.
+     */
+    adornment?: React.ReactNode;
+    className?: string | undefined;
+    value?: string | undefined;
+    visualSize?: Size | undefined;
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    onFocus?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+    onBlur?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    inputType?: "number" | "search" | "file" | "password" | "url" | "time" | "text" | "tel" | "email" | "date" | undefined;
+    autoComplete?: string | undefined;
+    minValue?: string | undefined;
+    maxValue?: string | undefined;
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    step?: number | "any" | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default TextField;

package/cjs/textarea-field/TextareaField.d.ts

@@ -0,0 +1,44 @@
+import React, { ChangeEvent } from 'react';
+import { BaseFieldProps, Size } from '../types';
+export declare const inputPaddings: {
+    small: {
+        vertical: number;
+        horizontal: number;
+    };
+    medium: {
+        vertical: number;
+        horizontal: number;
+    };
+};
+declare type FieldSize = Extract<Size, 'small' | 'medium'>;
+export declare type TextareaFieldProps = BaseFieldProps & {
+    defaultValue?: string;
+    size?: FieldSize;
+    /**
+     * Set a limit to the amount of characters the user may add. This number is also displayed on the bottom counter by default.
+     */
+    maxValueLength?: number;
+    /**
+     * Whether to show the length counter at the bottom right
+     */
+    showLengthCounter?: boolean;
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    rows?: number;
+};
+export declare const TextareaField: React.ForwardRefExoticComponent<BaseFieldProps & {
+    defaultValue?: string | undefined;
+    size?: FieldSize | undefined;
+    /**
+     * Set a limit to the amount of characters the user may add. This number is also displayed on the bottom counter by default.
+     */
+    maxValueLength?: number | undefined;
+    /**
+     * Whether to show the length counter at the bottom right
+     */
+    showLengthCounter?: boolean | undefined;
+    value?: string | undefined;
+    onChange?: ((event: React.ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
+    rows?: number | undefined;
+} & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/cjs/types/field.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+/**
+ * Generic FieldProps
+ */
+export declare type BaseFieldProps = {
+    /**
+     * Field name.
+     */
+    name: string;
+    /**
+     * Field label.
+     */
+    label?: ReactNode;
+    /**
+     * Indicates if the field is required. Will add an asterisk to the label unless `hideAsterisk` is set to `true`.
+     */
+    required?: boolean;
+    /**
+     * If set to `true` the asterisk will never be shown.
+     */
+    hideAsterisk?: boolean;
+    /**
+     * Hint for the field. For Input elements this maps to the `placeholder` attribute.
+     */
+    placeholder?: string;
+    /**
+     * Indicates that the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Sets an error message (if assistive text applies it will be replaced by this).
+     */
+    errorMessage?: string;
+    /**
+     * Assistive text describing the field.
+     *
+     * NB! If space is needed for alignment you can use a space char (' ') here.
+     */
+    assistiveText?: string;
+    /**
+     * Additional help.
+     *
+     * **This is an experimental prop and the behavior might change.**
+     */
+    help?: string;
+    /**
+     * Controls the placement of the help icon.
+     *
+     * **This is an experimental prop and the behavior might change.**
+     */
+    helpPlacement?: 'top' | 'right';
+};

package/cjs/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './field';
+export * from './size';

package/cjs/types/size.d.ts

@@ -0,0 +1 @@
+export declare type Size = 'small' | 'medium' | 'large';

package/package.json

@@ -3,7 +3,7 @@
   "description": "Form components",
   "license": "MIT",
   "private": false,
-  "version": "2.0.13-alpha.387f7b2c",
+  "version": "2.0.13-alpha.a1d8e406",
   "sideEffects": false,
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -17,13 +17,13 @@
     "react-select": "^4.0.0"
   },
   "dependencies": {
-    "@dfds-ui/hooks": "2.0.13-alpha.387f7b2c",
-    "@dfds-ui/icons": "2.0.13-alpha.387f7b2c",
-    "@dfds-ui/react-components": "2.0.13-alpha.387f7b2c",
-    "@dfds-ui/theme": "2.0.13-alpha.387f7b2c",
-    "@dfds-ui/typography": "2.0.13-alpha.387f7b2c"
+    "@dfds-ui/hooks": "2.0.13-alpha.a1d8e406",
+    "@dfds-ui/icons": "2.0.13-alpha.a1d8e406",
+    "@dfds-ui/react-components": "2.0.13-alpha.a1d8e406",
+    "@dfds-ui/theme": "2.0.13-alpha.a1d8e406",
+    "@dfds-ui/typography": "2.0.13-alpha.a1d8e406"
   },
-  "gitHead": "387f7b2ce9dcdb55d365191b83a14a0c2e63c005",
+  "gitHead": "a1d8e40616f0367183a714bee0b2a5b5e96c7d4a",
   "publishConfig": {
     "access": "public"
   }

package/switch/SwitchGroup.js

@@ -12,12 +12,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "7bcvef-SwitchGroupContainer",
   styles: "display:flex;flex-direction:column;border:none;padding:0;margin:0;label:SwitchGroupContainer;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zd2l0Y2gvU3dpdGNoR3JvdXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCWSIsImZpbGUiOiIuLi8uLi9zcmMvc3dpdGNoL1N3aXRjaEdyb3VwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEJhc2VGaWVsZFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IFN3aXRjaFByb3BzIH0gZnJvbSAnLi9Td2l0Y2gnXG5pbXBvcnQgeyBMYWJlbCB9IGZyb20gJy4uL2xhYmVsL0xhYmVsJ1xuaW1wb3J0IHsgU3dpdGNoQ29udGV4dFByb3ZpZGVyIH0gZnJvbSAnLi9Td2l0Y2hDb250ZXh0J1xuaW1wb3J0IHsgRmxleEJveCB9IGZyb20gJ0BkZmRzLXVpL3JlYWN0LWNvbXBvbmVudHMvZmxleGJveCdcbmltcG9ydCBFcnJvclRleHQgZnJvbSAnLi4vZXJyb3ItdGV4dC9FcnJvclRleHQnXG5cbmV4cG9ydCB0eXBlIFN3aXRjaEdyb3VwUHJvcHMgPSBQaWNrPEJhc2VGaWVsZFByb3BzLCAnbGFiZWwnIHwgJ2Vycm9yTWVzc2FnZScgfCAnaGlkZUFzdGVyaXNrJyB8ICdyZXF1aXJlZCc+ICYge1xuICAvKipcbiAgICogSlNYIGVuY2xvc2VkIGJ5IHRoZSBncm91cC5cbiAgICovXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbn0gJiBQaWNrPFN3aXRjaFByb3BzLCAnc2l6ZSc+XG5cbmNvbnN0IFN3aXRjaEdyb3VwQ29udGFpbmVyID0gKHsgY2hpbGRyZW4sIGVycm9yTWVzc2FnZSB9OiBQYXJ0aWFsPFN3aXRjaEdyb3VwUHJvcHM+KSA9PiAoXG4gIDxmaWVsZHNldFxuICAgIGNzcz17Y3NzYFxuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgICBib3JkZXI6IG5vbmU7XG4gICAgICBwYWRkaW5nOiAwO1xuICAgICAgbWFyZ2luOiAwO1xuICAgIGB9XG4gID5cbiAgICB7Y2hpbGRyZW59XG4gIDwvZmllbGRzZXQ+XG4pXG5cbmV4cG9ydCBjb25zdCBTd2l0Y2hHcm91cCA9ICh7XG4gIHNpemUgPSAnbWVkaXVtJyxcbiAgbGFiZWwsXG4gIGVycm9yTWVzc2FnZSxcbiAgcmVxdWlyZWQsXG4gIGhpZGVBc3RlcmlzayxcbiAgY2hpbGRyZW4sXG59OiBTd2l0Y2hHcm91cFByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFN3aXRjaEdyb3VwQ29udGFpbmVyPlxuICAgICAgPFN3aXRjaENvbnRleHRQcm92aWRlciB2YWx1ZT17eyBzaXplLCBlcnJvcjogISFlcnJvck1lc3NhZ2UgfX0+XG4gICAgICAgIDxMYWJlbCByZXF1aXJlZD17cmVxdWlyZWR9IGhpZGVBc3Rlcmlzaz17aGlkZUFzdGVyaXNrfSB2aXN1YWxTaXplPXtzaXplfT5cbiAgICAgICAgICB7bGFiZWx9XG4gICAgICAgIDwvTGFiZWw+XG4gICAgICAgIDxGbGV4Qm94IGRpcmVjdGlvbkNvbHVtbj57Y2hpbGRyZW59PC9GbGV4Qm94PlxuICAgICAgPC9Td2l0Y2hDb250ZXh0UHJvdmlkZXI+XG4gICAgICB7ZXJyb3JNZXNzYWdlICYmIDxFcnJvclRleHQ+e2Vycm9yTWVzc2FnZX08L0Vycm9yVGV4dD59XG4gICAgPC9Td2l0Y2hHcm91cENvbnRhaW5lcj5cbiAgKVxufVxuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zd2l0Y2gvU3dpdGNoR3JvdXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCWSIsImZpbGUiOiIuLi8uLi9zcmMvc3dpdGNoL1N3aXRjaEdyb3VwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEJhc2VGaWVsZFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IFN3aXRjaFByb3BzIH0gZnJvbSAnLi9Td2l0Y2gnXG5pbXBvcnQgeyBMYWJlbCB9IGZyb20gJy4uL2xhYmVsL0xhYmVsJ1xuaW1wb3J0IHsgU3dpdGNoQ29udGV4dFByb3ZpZGVyIH0gZnJvbSAnLi9Td2l0Y2hDb250ZXh0J1xuaW1wb3J0IHsgRmxleEJveCB9IGZyb20gJ0BkZmRzLXVpL3JlYWN0LWNvbXBvbmVudHMvZmxleGJveCdcbmltcG9ydCBFcnJvclRleHQgZnJvbSAnLi4vZXJyb3ItdGV4dC9FcnJvclRleHQnXG5cbmV4cG9ydCB0eXBlIFN3aXRjaEdyb3VwUHJvcHMgPSBQaWNrPEJhc2VGaWVsZFByb3BzLCAnbGFiZWwnIHwgJ2Vycm9yTWVzc2FnZScgfCAnaGlkZUFzdGVyaXNrJyB8ICdyZXF1aXJlZCc+ICYge1xuICAvKipcbiAgICogSlNYIGVuY2xvc2VkIGJ5IHRoZSBncm91cC5cbiAgICovXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbn0gJiBQaWNrPFN3aXRjaFByb3BzLCAnc2l6ZSc+XG5cbmNvbnN0IFN3aXRjaEdyb3VwQ29udGFpbmVyID0gKHsgY2hpbGRyZW4gfTogUGFydGlhbDxTd2l0Y2hHcm91cFByb3BzPikgPT4gKFxuICA8ZmllbGRzZXRcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgcGFkZGluZzogMDtcbiAgICAgIG1hcmdpbjogMDtcbiAgICBgfVxuICA+XG4gICAge2NoaWxkcmVufVxuICA8L2ZpZWxkc2V0PlxuKVxuXG5leHBvcnQgY29uc3QgU3dpdGNoR3JvdXAgPSAoe1xuICBzaXplID0gJ21lZGl1bScsXG4gIGxhYmVsLFxuICBlcnJvck1lc3NhZ2UsXG4gIHJlcXVpcmVkLFxuICBoaWRlQXN0ZXJpc2ssXG4gIGNoaWxkcmVuLFxufTogU3dpdGNoR3JvdXBQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTd2l0Y2hHcm91cENvbnRhaW5lcj5cbiAgICAgIDxTd2l0Y2hDb250ZXh0UHJvdmlkZXIgdmFsdWU9e3sgc2l6ZSwgZXJyb3I6ICEhZXJyb3JNZXNzYWdlIH19PlxuICAgICAgICA8TGFiZWwgcmVxdWlyZWQ9e3JlcXVpcmVkfSBoaWRlQXN0ZXJpc2s9e2hpZGVBc3Rlcmlza30gdmlzdWFsU2l6ZT17c2l6ZX0+XG4gICAgICAgICAge2xhYmVsfVxuICAgICAgICA8L0xhYmVsPlxuICAgICAgICA8RmxleEJveCBkaXJlY3Rpb25Db2x1bW4+e2NoaWxkcmVufTwvRmxleEJveD5cbiAgICAgIDwvU3dpdGNoQ29udGV4dFByb3ZpZGVyPlxuICAgICAge2Vycm9yTWVzc2FnZSAmJiA8RXJyb3JUZXh0PntlcnJvck1lc3NhZ2V9PC9FcnJvclRleHQ+fVxuICAgIDwvU3dpdGNoR3JvdXBDb250YWluZXI+XG4gIClcbn1cbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var SwitchGroupContainer = function SwitchGroupContainer(_ref2) {
-  var children = _ref2.children,
-    errorMessage = _ref2.errorMessage;
+  var children = _ref2.children;
   return ___EmotionJSX("fieldset", {
     css: _ref
   }, children);