@hazelcast/ui 1.0.3 → 1.2.1-next.0

package/lib/TextField.module.scss

@@ -5,16 +5,10 @@ $inputHorizontalPadding: c.$grid * 3;
 $marginLeftWithIcon: c.$grid * 5;
 
 .container {
-  @include c.typographyBodySmall;
-
   color: c.$colorText;
   box-sizing: border-box;
-  position: relative;
 
-  .label {
-    display: block;
-    margin-bottom: c.$grid;
-  }
+  @include c.typographyBodySmall;
 
   .inputBlock {
     display: flex;
@@ -22,15 +16,6 @@ $marginLeftWithIcon: c.$grid * 5;
     align-items: center;
   }
 
-  .errorContainer {
-    margin-top: c.$grid;
-  }
-
-  .helperText {
-    margin-left: c.$grid * 1.5;
-    display: block;
-  }
-
   .inputContainer {
     position: relative;
     flex: 1 1 auto;
@@ -42,17 +27,30 @@ $marginLeftWithIcon: c.$grid * 5;
     border-radius: c.$borderRadius;
   }
 
+  .inputIconContainer {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: $marginLeftWithIcon + $inputHorizontalPadding;
+  }
+
+  .inputTrailingIconContainer {
+    width: auto;
+    margin-right: c.$grid * 1.5;
+  }
+
+  .inputLeftIconContainer {
+    order: -1;
+  }
+
   .inputIcon,
   .inputIconTrailing {
     pointer-events: none;
-    position: absolute;
-    top: 50%;
-    // c.$grid * 9 / 2 is half of the padding. We need to shift it to the left just a bit to account for the border width
-    transform: translate(-50%, -50%) translateX(c.$outlineWidth);
   }
 
   .inputIcon {
-    left: ($marginLeftWithIcon + $inputHorizontalPadding) / 2;
+    left: ($marginLeftWithIcon + $inputHorizontalPadding) * 0.5;
   }
 
   .inputIconTrailing {
@@ -62,8 +60,10 @@ $marginLeftWithIcon: c.$grid * 5;
 
   // Here we go. Another border hack. Why?
   // TextField is re-used for PasswordField. PasswordField is meant for passwords.
-  // Passwords are often handled by password managers. Password managers often add their own UI on top of the password inputs.
-  // To make our password visibility toggle and their UI not overlap, we have to make the actual input shorter than its visual representation.
+  // Passwords are often handled by password managers.
+  // Password managers often add their own UI on top of the password inputs.
+  // To make our password visibility toggle and their UI not overlap,
+  // we have to make the actual input shorter than its visual representation.
   // However, visually we still would like our users to see it as one unit.
   // As result, we cannot apply border to the input itself (because it's shorter).
   // We could have applied border styles to .inputContainer. But IE11 does not support :focus-within.
@@ -101,20 +101,18 @@ $marginLeftWithIcon: c.$grid * 5;
     &::placeholder {
       color: c.$colorTextSecondary;
     }
+  }
 
-    &.trailingIcon {
-      padding-right: c.$grid * 8;
-    }
+  .clearButton {
+    display: inline-flex;
+    align-items: center;
+    margin-right: c.$grid * 1.5;
   }
 
   &.small {
     .inputContainer {
       height: c.$inputHeightSmall;
     }
-
-    .inputIconTrailing {
-      right: 0;
-    }
   }
 
   &.mockAutofill {
@@ -126,9 +124,6 @@ $marginLeftWithIcon: c.$grid * 5;
   &.withIcon {
     input {
       padding-left: 0;
-      // Chrome fills the input (including paddings) with its custom override color on autofill.
-      // If we leave the padding in place it fills a part fo the background for the icon.
-      margin-left: $marginLeftWithIcon + $inputHorizontalPadding;
     }
   }
 
@@ -141,6 +136,7 @@ $marginLeftWithIcon: c.$grid * 5;
     & ~ .borderOverlay {
       border-color: c.$colorPrimary;
     }
+
     & ~ .inputIconContainer > .inputIcon {
       color: c.$colorPrimary;
     }
@@ -161,12 +157,14 @@ $marginLeftWithIcon: c.$grid * 5;
     & ~ .borderOverlay {
       @include h.outlineFormField;
     }
+
     & ~ .inputIconContainer > .inputIcon {
       color: c.$colorPrimary;
     }
   }
 
-  // .hasError styles split in two groups to always color the icon with the error color but the change the color of the border
+  // .hasError styles split in two groups to always color the icon with the error colors
+  // but the change the color of the border
   /* stylelint-disable-next-line no-duplicate-selectors */
   &.hasError input {
     ~ .inputIconContainer > .inputIcon {
@@ -185,12 +183,16 @@ $marginLeftWithIcon: c.$grid * 5;
       & ~ .borderOverlay {
         border-color: c.$colorNeutralLight;
       }
+
       & ~ .inputIconContainer > .inputIcon {
         color: c.$colorTextSecondary;
       }
+
       & ~ .inputIconContainer > .inputIconTrailing {
         color: c.$colorTextSecondary;
       }
     }
   }
 }
+
+@include h.withError;

package/lib/TextFieldFormik.d.ts

@@ -1,9 +1,11 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { TextFieldExtraProps, TextFieldTypes } from './TextField';
 import { FieldValidatorGeneric } from './utils/formik';
 import { ExtractKeysOfValueType } from './utils/types';
 export declare type TextFieldFormikProps<V extends object> = TextFieldExtraProps<Exclude<TextFieldTypes, 'number' | 'password'>> & {
     name: ExtractKeysOfValueType<V, string | undefined>;
     validate?: FieldValidatorGeneric<string | undefined>;
+    onChange?: (value: string) => void;
+    onBlur?: (e: React.FocusEvent) => void;
 };
-export declare const TextFieldFormik: <V extends object>({ type, name, validate, ...props }: TextFieldFormikProps<V>) => ReactElement;
+export declare const TextFieldFormik: <V extends object>({ type, name, validate, onChange, onBlur, ...props }: TextFieldFormikProps<V>) => ReactElement;

package/lib/TextFieldFormik.js

@@ -1,12 +1,23 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useField } from 'formik';
 import { TextField } from './TextField';
 import { getFieldError } from './utils/formik';
-export const TextFieldFormik = ({ type, name, validate, ...props }) => {
-    const [field, meta] = useField({
+export const TextFieldFormik = ({ type, name, validate, onChange, onBlur, ...props }) => {
+    const [{ onBlur: onFormikBlur, value, onChange: onFormikChange }, meta] = useField({
         name,
         validate,
     });
-    return (React.createElement(TextField, Object.assign({}, props, { type: type, name: name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, error: getFieldError(meta) })));
+    const onBlurInner = React.useCallback((e) => {
+        if (onBlur) {
+            onBlur(e);
+        }
+        onFormikBlur(e);
+    }, [onBlur, onFormikBlur]);
+    return (React.createElement(TextField, { ...props, type: type, name: name, value: value, onChange: useCallback((e) => {
+            if (onChange) {
+                onChange(e.target.value);
+            }
+            onFormikChange(e);
+        }, [onFormikChange, onChange]), onBlur: onBlurInner, error: getFieldError(meta) }));
 };
 //# sourceMappingURL=TextFieldFormik.js.map

package/lib/TextFieldFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFieldFormik.js","sourceRoot":"","sources":["../src/TextFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,SAAS,EAAuC,MAAM,aAAa,CAAA;AAC5E,OAAO,EAAyB,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAQrE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAmB,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA2B,EAAgB,EAAE;IAC7H,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAqB;QACjD,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,SAAS,oBACJ,KAAK,IACT,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,IAC1B,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"TextFieldFormik.js","sourceRoot":"","sources":["../src/TextFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,WAAW,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,SAAS,EAAuC,MAAM,aAAa,CAAA;AAC5E,OAAO,EAAyB,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAUrE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAmB,EAChD,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACgB,EAAgB,EAAE;IAC1C,MAAM,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAqB;QACrG,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,CAAmB,EAAE,EAAE;QACtB,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,CAAC,CAAC,CAAA;SACV;QACD,YAAY,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC,EACD,CAAC,MAAM,EAAE,YAAY,CAAC,CACvB,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,CACnB,CAAC,CAAC,EAAE,EAAE;YACJ,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;aACzB;YAED,cAAc,CAAC,CAAC,CAAC,CAAA;QACnB,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,EACD,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAC1B,CACH,CAAA;AACH,CAAC,CAAA"}

package/lib/TimeField.d.ts

@@ -1,5 +1,6 @@
 import { FocusEvent, ChangeEvent, FC, InputHTMLAttributes } from 'react';
 import { DataTestProp } from '@hazelcast/helpers';
+import { FieldHeaderProps } from './FieldHeader';
 export declare type TimeFieldCoreProps = {
     name: string;
     value?: string;
@@ -7,20 +8,10 @@ export declare type TimeFieldCoreProps = {
     onChange: (e: ChangeEvent<HTMLInputElement>) => void;
     error?: string;
 };
-declare type TimeFieldLabelProps = {
-    ariaLabel?: never;
-    label: string;
-    labelClassName?: string;
-} | {
-    ariaLabel: string;
-    label?: never;
-    labelClassName?: never;
-};
 export declare type TimeFieldExtraProps = {
     inputClassName?: string;
     errorClassName?: string;
     seconds?: boolean;
-} & TimeFieldLabelProps & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'className' | 'autoFocus' | 'disabled' | 'required'>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'className' | 'autoFocus' | 'disabled' | 'required'> & Omit<FieldHeaderProps, 'id'>;
 export declare type TypeFieldProps = TimeFieldCoreProps & TimeFieldExtraProps & DataTestProp;
 export declare const TimeField: FC<TypeFieldProps>;
-export {};

package/lib/TimeField.js

@@ -2,21 +2,22 @@ import React from 'react';
 import cn from 'classnames';
 import { useUID } from 'react-uid';
 import { Error, errorId } from './Error';
+import { FieldHeader } from './FieldHeader';
 import styles from './TimeField.module.scss';
-import { Label } from './Label';
-export const TimeField = ({ 'data-test': dataTest, ariaLabel, className, disabled, error, errorClassName, id: explicitId, inputClassName, label, labelClassName, name, onBlur, onChange, required, seconds = false, value, ...props }) => {
+export const TimeField = (props) => {
+    const { 'data-test': dataTest, className, disabled, error, errorClassName, id: explicitId, inputClassName, label, labelClassName, name, onBlur, onChange, required, seconds = false, value, helperText, size, showAriaLabel, ...rest } = props;
     // Use an auto generated id if it's not set explicitly
     const autoId = useUID();
     const id = explicitId !== null && explicitId !== void 0 ? explicitId : autoId;
-    return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, className) },
-        label && React.createElement(Label, { id: id, label: label, className: cn(styles.label, labelClassName) }),
+    return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, className, { [styles.withError]: 'error' in props }) },
+        React.createElement(FieldHeader, { id: id, size: size, label: label, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName }),
         React.createElement("div", { className: styles.inputBlock },
             React.createElement("div", { className: styles.inputContainer },
-                React.createElement("input", Object.assign({ type: "time", step: seconds ? '1' : undefined, id: id, name: name, className: cn(styles.input, inputClassName, {
+                React.createElement("input", { type: "time", step: seconds ? '1' : undefined, id: id, name: name, className: cn(styles.input, inputClassName, {
                         [styles.disabled]: disabled,
                         [styles.error]: error,
-                    }), onChange: onChange, onBlur: onBlur, value: value, required: required, disabled: disabled, "aria-invalid": !!error, "aria-label": ariaLabel, "aria-required": required, "aria-errormessage": error && errorId(id) }, props)),
+                    }), onChange: onChange, onBlur: onBlur, value: value, required: required, disabled: disabled, "aria-invalid": !!error, "aria-label": showAriaLabel ? label : undefined, "aria-required": required, "aria-errormessage": error && errorId(id), ...rest }),
                 React.createElement("div", { className: styles.borderOverlay }))),
-        React.createElement(Error, { error: error, className: cn(styles.errorContainer, errorClassName), inputId: id })));
+        React.createElement(Error, { truncated: true, error: error, className: cn(styles.errorContainer, errorClassName), inputId: id })));
 };
 //# sourceMappingURL=TimeField.js.map

package/lib/TimeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.js","sourceRoot":"","sources":["../src/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAExC,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AA+B/B,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAC5C,WAAW,EAAE,QAAQ,EACrB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,KAAK,EACL,cAAc,EACd,EAAE,EAAE,UAAU,EACd,cAAc,EACd,KAAK,EACL,cAAc,EACd,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,sDAAsD;IACtD,MAAM,MAAM,GAAG,MAAM,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,MAAM,CAAA;IAE/B,OAAO,CACL,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QACjE,KAAK,IAAI,oBAAC,KAAK,IAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,GAAI;QACtF,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU;YAC/B,6BAAK,SAAS,EAAE,MAAM,CAAC,cAAc;gBACnC,6CACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAC/B,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,EAAE;wBAC1C,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;wBAC3B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK;qBACtB,CAAC,EACF,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBAEJ,CAAC,CAAC,KAAK,gBACT,SAAS,mBACN,QAAQ,uBACJ,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,IACnC,KAAK,EACT;gBACF,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa,GAAI,CACpC,CACF;QACN,oBAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAI,CACtF,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"TimeField.js","sourceRoot":"","sources":["../src/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAE7D,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAmB5C,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,KAAK,EAAE,EAAE;IACrD,MAAM,EACJ,WAAW,EAAE,QAAQ,EACrB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,cAAc,EACd,EAAE,EAAE,UAAU,EACd,cAAc,EACd,KAAK,EACL,cAAc,EACd,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,KAAK,EACL,UAAU,EACV,IAAI,EACJ,aAAa,EACb,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IACT,sDAAsD;IACtD,MAAM,MAAM,GAAG,MAAM,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,MAAM,CAAA;IAE/B,OAAO,CACL,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK,EAAE,CAAC;QAC5G,oBAAC,WAAW,IACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,GAC9B;QAEF,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU;YAC/B,6BAAK,SAAS,EAAE,MAAM,CAAC,cAAc;gBACnC,+BACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAC/B,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,EAAE;wBAC1C,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;wBAC3B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK;qBACtB,CAAC,EACF,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBAEJ,CAAC,CAAC,KAAK,gBACT,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,mBAC9B,QAAQ,uBACJ,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,KACnC,IAAI,GACR;gBACF,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa,GAAI,CACpC,CACF;QACN,oBAAC,KAAK,IAAC,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAI,CAChG,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/TimeField.module.scss

@@ -5,12 +5,10 @@
   display: inline-flex;
   flex-direction: column;
 
-  .label {
-    margin-bottom: c.$grid;
-  }
-
-  .errorContainer {
-    margin-top: c.$grid;
+  &.small {
+    input {
+      height: c.$inputHeightSmall;
+    }
   }
 
   .inputBlock {
@@ -89,3 +87,5 @@
     }
   }
 }
+
+@include h.withError;

package/lib/TimeFieldFormik.js

@@ -6,6 +6,6 @@ export const TimeFieldFormik = ({ name, validate, ...props }) => {
         name,
         validate,
     });
-    return (React.createElement(TimeField, Object.assign({}, props, { name: name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, error: meta.touched || meta.initialError === meta.error ? meta.error : undefined })));
+    return (React.createElement(TimeField, { ...props, name: name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, error: meta.touched || meta.initialError === meta.error ? meta.error : undefined }));
 };
 //# sourceMappingURL=TimeFieldFormik.js.map

package/lib/TimeFieldFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeFieldFormik.js","sourceRoot":"","sources":["../src/TimeFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAA;AAS5D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA2B,EAAgB,EAAE;IACvH,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAqB;QACjD,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,SAAS,oBACJ,KAAK,IACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,IAChF,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"TimeFieldFormik.js","sourceRoot":"","sources":["../src/TimeFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAA;AAS5D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA2B,EAAgB,EAAE;IACvH,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAqB;QACjD,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAChF,CACH,CAAA;AACH,CAAC,CAAA"}

package/lib/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,WAAW,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAoB,CAAC,EAAE,MAAM,eAAe,CAAA;AAElG,OAAO,MAAM,MAAM,sBAAsB,CAAA;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,MAAM,MAAM,qBAAqB,CAAA;AASxC,MAAM,CAAC,MAAM,SAAS,GAAgD;IACpE,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,mBAAmB;KAC/B;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,uBAAuB;KACnC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,2BAA2B;KACvC;CACF,CAAA;AAUD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,mBAAmB,GAAG,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE;IAC5G,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,CAAA;IAE3C,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,WAA0B,EAAE,EAAE;QAC7B,IAAI,mBAAmB,EAAE;YACvB,UAAU,aAAV,UAAU,uBAAV,UAAU,GAAI;YACd,WAAW,CAAC,wBAAwB,EAAE,CAAA;SACvC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAClC,CAAA;IAED,MAAM,CAAC,qBAAqB,EAAE,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAA;IAEzG,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,KAAK,EACZ;YACE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM;YAC9B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,KAAK,UAAU;SACvC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAW,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;QACzF,0CAAe,eAAe,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IACrD,OAAO,CACJ;QACL,UAAU,IAAI,CACb,oBAAC,UAAU,iBACC,aAAa,EACvB,IAAI,EAAC,aAAa,EAClB,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,SAAS,EAAC,YAAY,EACtB,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,UAAU,GACnB,CACH,CACG,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,WAAW,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAoB,CAAC,EAAE,MAAM,eAAe,CAAA;AAElG,OAAO,MAAM,MAAM,sBAAsB,CAAA;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,MAAM,MAAM,qBAAqB,CAAA;AASxC,MAAM,CAAC,MAAM,SAAS,GAAgD;IACpE,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,mBAAmB;KAC/B;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,uBAAuB;KACnC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,2BAA2B;KACvC;CACF,CAAA;AAUD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,mBAAmB,GAAG,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE;IAC5G,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,CAAA;IAE3C,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,WAA0B,EAAE,EAAE;QAC7B,IAAI,mBAAmB,EAAE;YACvB,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;YACd,WAAW,CAAC,wBAAwB,EAAE,CAAA;SACvC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAClC,CAAA;IAED,MAAM,CAAC,qBAAqB,EAAE,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAA;IAEzG,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,KAAK,EACZ;YACE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM;YAC9B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,KAAK,UAAU;SACvC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAW,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;QACzF,0CAAe,eAAe,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IACrD,OAAO,CACJ;QACL,UAAU,IAAI,CACb,oBAAC,UAAU,iBACC,aAAa,EACvB,IAAI,EAAC,aAAa,EAClB,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,SAAS,EAAC,YAAY,EACtB,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,UAAU,GACnB,CACH,CACG,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/Toggle.js

@@ -4,9 +4,10 @@ import { useUID } from 'react-uid';
 import { Error, errorId } from './Error';
 import { Help, helpTooltipId } from './Help';
 import styles from './Toggle.module.scss';
-export const Toggle = ({ name, value, onChange, onBlur, error, checked, label, helperText, disabled, className, classNameLabel, 'data-test': dataTest, }) => {
+export const Toggle = (props) => {
+    const { name, value, onChange, onBlur, error, checked, label, helperText, disabled, className, classNameLabel, 'data-test': dataTest, } = props;
     const id = useUID();
-    return (React.createElement("div", { className: cn(styles.wrapper, className), "data-test": dataTest },
+    return (React.createElement("div", { className: cn(styles.wrapper, className, { [styles.withError]: 'error' in props }), "data-test": dataTest },
         React.createElement("input", { type: "checkbox", id: id, name: name, checked: !!checked, onChange: onChange, onBlur: onBlur, value: value, disabled: disabled, "aria-invalid": !!error, "aria-describedby": helperText && helpTooltipId(id), "aria-errormessage": error && errorId(id) }),
         React.createElement("label", { className: cn({
                 [styles.error]: !!error,
@@ -16,6 +17,6 @@ export const Toggle = ({ name, value, onChange, onBlur, error, checked, label, h
             React.createElement("span", { className: styles.toggleTrack },
                 React.createElement("span", { className: styles.toggleTrackText }, checked ? 'ON' : 'OFF'))),
         helperText && React.createElement(Help, { parentId: id, helperText: helperText, className: styles.helperText }),
-        React.createElement(Error, { error: error, className: styles.errorContainer, inputId: id })));
+        React.createElement(Error, { truncated: true, error: error, className: styles.errorContainer, inputId: id })));
 };
 //# sourceMappingURL=Toggle.js.map

package/lib/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,IAAI,EAAa,aAAa,EAAE,MAAM,QAAQ,CAAA;AAEvD,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAqBzC,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EACtC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,cAAc,EACd,WAAW,EAAE,QAAQ,GACtB,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IAEnB,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,eAAa,QAAQ;QAEhE,+BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,kBACJ,CAAC,CAAC,KAAK,sBACH,UAAU,IAAI,aAAa,CAAC,EAAE,CAAC,uBAC9B,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,GACvC;QAGF,+BACE,SAAS,EAAE,EAAE,CACX;gBACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK;gBACvB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;aAC5B,EACD,cAAc,CACf,EACD,OAAO,EAAE,EAAE;YAEX,8BAAM,SAAS,EAAE,MAAM,CAAC,SAAS,IAAG,KAAK,CAAQ;YAEjD,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW;gBACjC,8BAAM,SAAS,EAAE,MAAM,CAAC,eAAe,IAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAQ,CACnE,CACD;QAEP,UAAU,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,GAAI;QAE3F,oBAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,OAAO,EAAE,EAAE,GAAI,CAClE,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,IAAI,EAAa,aAAa,EAAE,MAAM,QAAQ,CAAA;AAEvD,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAqBzC,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC/C,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,cAAc,EACd,WAAW,EAAE,QAAQ,GACtB,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IAEnB,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK,EAAE,CAAC,eAAa,QAAQ;QAE1G,+BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,kBACJ,CAAC,CAAC,KAAK,sBACH,UAAU,IAAI,aAAa,CAAC,EAAE,CAAC,uBAC9B,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,GACvC;QAGF,+BACE,SAAS,EAAE,EAAE,CACX;gBACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK;gBACvB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;aAC5B,EACD,cAAc,CACf,EACD,OAAO,EAAE,EAAE;YAEX,8BAAM,SAAS,EAAE,MAAM,CAAC,SAAS,IAAG,KAAK,CAAQ;YAEjD,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW;gBACjC,8BAAM,SAAS,EAAE,MAAM,CAAC,eAAe,IAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAQ,CACnE,CACD;QAEP,UAAU,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,GAAI;QAE3F,oBAAC,KAAK,IAAC,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,OAAO,EAAE,EAAE,GAAI,CAC5E,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/Toggle.module.scss

@@ -1,34 +1,40 @@
 @use '../styles/constants' as c;
 @use '../styles/helpers' as h;
+@use 'sass:math';
 
-$h: c.$grid * 6;
-$w: c.$grid * 15;
+$height: c.$grid * 6;
+$width: c.$grid * 15;
 $labelMargin: c.$grid * 2.5;
 /* doiuse-disable calc */
-$trackBr: calc(#{$h} - #{c.$borderWidth * 2});
+$trackBr: calc(#{$height} - #{c.$borderWidth * 2});
 /* doiuse-enable calc */
 $trackBgOn: c.$colorSuccessLight;
 $trackBgOff: c.$colorNeutral;
 $knobBgOn: c.$colorNeutralWhite;
 $knobBgOff: c.$colorNeutralLighter;
 $knobRadius: c.$grid * 5;
-$knobHorizontalOffset: c.$outlineWidth;
+/* stylelint-disable  length-zero-no-unit */
+$knobHorizontalOffset: math.max(c.$outlineWidth - c.$borderWidth, 0px);
+/* stylelint-enable */
 
 @keyframes switchOn {
   from {
     opacity: 0;
-    transform: translateY(-50%) translateX(-100%);
+    transform: translateY(-50%) translateX(100%);
   }
+
   to {
     opacity: 1;
     transform: translateY(-50%);
   }
 }
+
 @keyframes switchOff {
   from {
     opacity: 0;
-    transform: translateY(-50%) translateX(100%);
+    transform: translateY(-50%) translateX(-100%);
   }
+
   to {
     opacity: 1;
     transform: translateY(-50%);
@@ -70,8 +76,8 @@ $knobHorizontalOffset: c.$outlineWidth;
   // the `track` (default off state)
   .toggleTrack {
     display: inline-block;
-    height: $h;
-    width: $w;
+    height: $height;
+    width: $width;
     background: $trackBgOff;
     border-radius: $trackBr;
     position: relative;
@@ -117,16 +123,16 @@ $knobHorizontalOffset: c.$outlineWidth;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    right: $knobHorizontalOffset;
+    /* doiuse-disable calc */
+    right: calc(#{$width} - #{c.$borderWidth * 2} - #{$knobRadius} - #{$knobHorizontalOffset});
+    /* doiuse-enable calc */
     transition: right c.$transitionTimeMedium ease-in;
   }
 
   // knob ON state
   input:checked + label .toggleTrack::before {
     background: $knobBgOn;
-    /* doiuse-disable calc */
-    right: calc(#{$w - $knobRadius} - #{2 * $knobHorizontalOffset});
-    /* doiuse-enable calc */
+    right: $knobHorizontalOffset;
   }
 
   .toggleTrackText {
@@ -138,20 +144,18 @@ $knobHorizontalOffset: c.$outlineWidth;
   // the "OFF" text
   input:not(:checked) + label .toggleTrackText {
     animation: switchOff c.$transitionTimeMedium ease-in;
-    right: auto;
-    left: c.$grid * 1.5;
+    right: c.$grid * 2;
+    left: auto;
     color: c.$colorTextSecondary;
   }
 
   // the "ON" text
   input:checked + label .toggleTrackText {
     animation: switchOn c.$transitionTimeMedium ease-in;
-    right: c.$grid * 2;
-    left: auto;
+    right: auto;
+    left: c.$grid * 1.5;
     color: c.$colorNeutralWhite;
   }
 }
 
-.errorContainer {
-  margin-top: c.$grid;
-}
+@include h.withError;

package/lib/ToggleFormik.js

@@ -7,6 +7,6 @@ export const ToggleFormik = ({ name, validate, ...props }) => {
         name,
         validate,
     });
-    return React.createElement(Toggle, Object.assign({}, props, { name: name, checked: field.value, onChange: field.onChange, onBlur: field.onBlur, error: getFieldError(meta) }));
+    return React.createElement(Toggle, { ...props, name: name, checked: field.value, onChange: field.onChange, onBlur: field.onBlur, error: getFieldError(meta) });
 };
 //# sourceMappingURL=ToggleFormik.js.map

package/lib/ToggleFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleFormik.js","sourceRoot":"","sources":["../src/ToggleFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAyB,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAGrE,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AAOnD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB,EAAgB,EAAE;IACjH,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAU;QACtC,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,oBAAC,MAAM,oBAAK,KAAK,IAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,IAAI,CAAA;AAC5I,CAAC,CAAA"}
+{"version":3,"file":"ToggleFormik.js","sourceRoot":"","sources":["../src/ToggleFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAyB,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAGrE,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AAOnD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB,EAAgB,EAAE;IACjH,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAU;QACtC,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,oBAAC,MAAM,OAAK,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CAAA;AAC5I,CAAC,CAAA"}

package/lib/Tooltip.d.ts

@@ -1,16 +1,21 @@
-import React, { FC, ReactNode, MutableRefObject } from 'react';
+import React, { FC, ReactNode, MutableRefObject, ReactText, MouseEventHandler } from 'react';
 import { Placement } from '@popperjs/core';
 import { usePopper } from 'react-popper';
+export declare type TooltipContainer = 'body' | 'referenceElement' | HTMLElement;
 export declare type PopperRef = ReturnType<typeof usePopper>;
 export declare type TooltipProps = {
     content: ReactNode;
     id: string;
     hideTimeoutDuration?: number;
     offset?: number;
+    padding?: number;
     placement?: Placement;
     visible?: boolean;
-    children: (ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>) => ReactNode;
+    hoverAbleTooltip?: boolean;
+    children: (ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>, onMouseEnter?: MouseEventHandler<Element>, onMouseLeave?: MouseEventHandler<Element>) => ReactNode;
     popperRef?: MutableRefObject<PopperRef | undefined>;
+    updateToken?: ReactText | boolean;
+    tooltipContainer?: TooltipContainer;
 };
 /**
  * ### Purpose
@@ -22,6 +27,8 @@ export declare type TooltipProps = {
  * - Offset (space between a target and tooltip elements) can be also configured via "offset" property.
  * - If "content" property is undefined, tooltip element will be removed from DOM entirely.
  * - It's required to set the "id" property which will be assigned to the tooltip. This id parameter can be then used as a value of "aria-labelledby" attribute.
+ * - Use `updateToken` prop to update the tooltip position.
+ * - Use `tooltipContainer` prop to change the tooltip portal container. Defaults to `body`.
  *
  * ### Usage
  * Wrap the target element with Tooltip component and use the "content" property to define what should be displayed inside the tooltip.