@hazelcast/ui 1.3.3-next.9 → 2.0.1-canary.0

package/lib/components/Notification.module.scss

@@ -0,0 +1,97 @@
+@use '../../styles/constants' as c;
+
+.notification {
+  display: flex;
+  align-items: flex-start;
+  padding: c.$grid * 2 c.$grid * 3;
+  border-radius: c.$borderRadiusNotification;
+
+  @include c.typographyBodySmall;
+
+  .icon {
+    flex: 0 0 auto;
+    margin-right: c.$grid * 2;
+  }
+
+  .content {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    /*
+     * Note:
+     * The (min)height is equal to corresponding icon height. Necessary due to 'flex-start' alignment and
+     * specific alignment differences between single-line and multi-line text content.
+     */
+    min-height: c.$grid * 6;
+  }
+
+  .link {
+    // Note: The (min)height is equal to corresponding icon height. Necessary due to 'flex-start' alignment.
+    min-height: c.$grid * 6;
+
+    // TODO: Improvisation. Consult with @pawel.
+    margin-left: c.$grid * 2;
+
+    @include c.typographyBodyWeight('bold');
+  }
+
+  .closeButton {
+    margin-left: c.$grid * 3;
+  }
+
+  /* Theme - success */
+  &.success {
+    color: c.$colorText;
+    background-color: c.$colorSuccessLight;
+
+    .icon {
+      color: c.$colorText;
+    }
+
+    .link {
+      color: c.$colorText;
+    }
+  }
+
+  /* Theme - info */
+  &.info {
+    color: c.$colorText;
+    background-color: c.$colorInfoLight;
+
+    .icon {
+      color: c.$colorInfoDark;
+    }
+
+    .link {
+      color: c.$colorInfoDark;
+    }
+  }
+
+  /* Theme - warning */
+  &.warning {
+    color: c.$colorText;
+    background-color: c.$colorWarningLight;
+
+    .icon {
+      color: c.$colorText;
+    }
+
+    .link {
+      color: c.$colorText;
+    }
+  }
+
+  /* Theme - error */
+  &.error {
+    color: c.$colorText;
+    background-color: c.$colorErrorLight;
+
+    .icon {
+      color: c.$colorText;
+    }
+
+    .link {
+      color: c.$colorText;
+    }
+  }
+}

package/lib/components/NumberBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberBadge.js","sourceRoot":"","sources":["../../src/components/NumberBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAC9C,OAAO,EAAE,MAAM,YAAY,CAAA;AAO3B,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;IACzE,MAAM,eAAe,GAAW,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAExE,OAAO,CACL,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,IACvE,eAAe,CACZ,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/NumberBadge.module.scss

@@ -0,0 +1,13 @@
+@use '../../styles/constants' as c;
+
+.numberBadge {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: c.$borderRadiusBadge;
+  padding: 0 c.$grid * 1.25;
+  background-color: c.$colorNeutral;
+  color: c.$colorText;
+
+  @include c.typographyBodySmall;
+}

package/lib/components/NumberField.d.ts

@@ -0,0 +1,33 @@
+import { DataTestProp } from '../../src';
+import { FC, FocusEvent, InputHTMLAttributes } from 'react';
+import { TextFieldProps, TextFieldSize } from './TextField';
+type NumberFieldCoreProps = {
+    name: string;
+    value?: number;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    onChange: (newValue?: number) => void;
+    error?: string;
+};
+export type NumberFieldExtraProps = Omit<TextFieldProps<'number'>, 'onChange' | 'inputTrailingIcon' | 'inputTrailingIconLabel'> & {
+    incrementIconAriaLabel?: string;
+    decrementIconAriaLabel?: string;
+    step?: number;
+    min?: number;
+    max?: number;
+    disableChangeOnScroll?: boolean;
+    defaultValue?: number;
+    numberType?: 'int' | 'float';
+    iconPosition?: 'separate' | 'together';
+    showIconButtons?: boolean;
+    label?: string;
+    showAriaLabel?: boolean;
+    size?: TextFieldSize;
+    className?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    inputContainerClassName?: string;
+    errorClassName?: string;
+} & DataTestProp & Pick<InputHTMLAttributes<HTMLInputElement>, 'autoFocus' | 'disabled' | 'autoComplete' | 'required' | 'placeholder'>;
+export type NumberFieldProps = NumberFieldCoreProps & NumberFieldExtraProps;
+export declare const NumberField: FC<NumberFieldProps>;
+export {};

package/lib/components/NumberField.js

@@ -0,0 +1,141 @@
+import React, { useCallback, useMemo, useRef, useEffect } from 'react';
+import { PlusCircle, MinusCircle } from 'react-feather';
+import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
+import cn from 'classnames';
+import { TextField } from './TextField';
+import { IconButton } from './IconButton';
+import styles from './NumberField.module.scss';
+export const NumberField = ({ incrementIconAriaLabel = 'Increment', decrementIconAriaLabel = 'Decrement', step = 1, min, max, disableChangeOnScroll, value, numberType = 'int', iconPosition = 'together', showIconButtons = true, inputClassName, inputContainerClassName, onChange, disabled, size, 'data-test': dataTest = 'number-field', ...props }) => {
+    const field = useRef(null);
+    const handleWheel = useCallback((e) => {
+        const target = e.target;
+        target.blur();
+    }, []);
+    useEffect(() => {
+        if (disableChangeOnScroll) {
+            const current = field.current;
+            if (current) {
+                current.addEventListener('wheel', handleWheel);
+                return () => {
+                    current.removeEventListener('wheel', handleWheel);
+                };
+            }
+        }
+    }, [disableChangeOnScroll, handleWheel]);
+    useIsomorphicLayoutEffect(() => {
+        if (min !== undefined && value !== undefined && value < min) {
+            onChange(min);
+        }
+        if (max !== undefined && value !== undefined && value > max) {
+            onChange(max);
+        }
+    }, [min, max]);
+    const onDecrement = useCallback(() => {
+        let newValue = value - step;
+        if (min !== undefined && newValue < min) {
+            newValue = min;
+        }
+        onChange(newValue);
+    }, [value, onChange, step, min]);
+    const onIncrement = useCallback(() => {
+        let newValue;
+        if (value === undefined && min !== undefined) {
+            newValue = min;
+        }
+        else {
+            newValue = value + step;
+        }
+        if (max !== undefined && newValue > max) {
+            newValue = max;
+        }
+        onChange(newValue);
+    }, [value, onChange, step, max, min]);
+    const overlay = useMemo(() => {
+        if (!showIconButtons) {
+            return undefined;
+        }
+        let decrementDisabledProps = {};
+        if (value === undefined) {
+            decrementDisabledProps = {
+                disabled: true,
+                disabledTooltip: 'Please, fill in the initial value',
+            };
+        }
+        else if (min !== undefined && value <= min) {
+            decrementDisabledProps = {
+                disabled: true,
+                disabledTooltip: `Value can't be less than ${min}`,
+            };
+        }
+        else if (disabled) {
+            // The entire input is disabled. No need for a tooltip.
+            decrementDisabledProps = {
+                disabled: true,
+                disabledTooltip: '',
+                disabledTooltipVisible: false,
+            };
+        }
+        let incrementDisabledProps = {};
+        if (value === undefined && min === undefined) {
+            incrementDisabledProps = {
+                disabled: true,
+                disabledTooltip: 'Please, fill in the initial value',
+            };
+        }
+        else if (max !== undefined && value !== undefined && value >= max) {
+            incrementDisabledProps = {
+                disabled: true,
+                disabledTooltip: `Value can't be greater than ${max}`,
+            };
+        }
+        else if (disabled) {
+            // The entire input is disabled. No need for a tooltip.
+            incrementDisabledProps = {
+                disabled: true,
+                disabledTooltip: '',
+                disabledTooltipVisible: false,
+            };
+        }
+        return (React.createElement(React.Fragment, null,
+            React.createElement(IconButton, { size: size === 'small' ? 'small' : 'smallMedium', icon: MinusCircle, ariaLabel: decrementIconAriaLabel, className: cn(styles.decrement, {
+                    [styles.decrementSmall]: size === 'small',
+                    [styles.decrementIconsSeparate]: iconPosition === 'separate',
+                    [styles.disabled]: disabled,
+                }), onClick: onDecrement, kind: "transparent", "data-test": `${dataTest}-decrement`, type: "button", ...decrementDisabledProps }),
+            React.createElement(IconButton, { size: size === 'small' ? 'small' : 'smallMedium', icon: PlusCircle, ariaLabel: incrementIconAriaLabel, className: cn(styles.increment, {
+                    [styles.disabled]: disabled,
+                }), onClick: onIncrement, kind: "transparent", "data-test": `${dataTest}-increment`, type: "button", ...incrementDisabledProps })));
+    }, [
+        showIconButtons,
+        value,
+        min,
+        disabled,
+        max,
+        size,
+        decrementIconAriaLabel,
+        iconPosition,
+        onDecrement,
+        dataTest,
+        incrementIconAriaLabel,
+        onIncrement,
+    ]);
+    const onChangeWrapped = useCallback(({ target: { value: newValue } }) => {
+        let newValueParsed;
+        if (newValue !== '') {
+            newValueParsed = numberType === 'int' ? parseInt(newValue, 10) : parseFloat(newValue);
+        }
+        if (min !== undefined && newValueParsed !== undefined && newValueParsed < min) {
+            newValueParsed = min;
+        }
+        if (max !== undefined && newValueParsed !== undefined && newValueParsed > max) {
+            newValueParsed = max;
+        }
+        onChange(newValueParsed);
+    }, [onChange, numberType, min, max]);
+    return (React.createElement(TextField, { ...props, ...(disableChangeOnScroll ? { mRef: field } : {}), value: value, "data-test": dataTest, onChange: onChangeWrapped, type: "number", inputContainerChild: overlay, inputContainerClassName: cn(styles.inputContainer, {
+            [styles.buttons]: showIconButtons,
+            [styles.buttonsIconsSeparate]: iconPosition === 'separate',
+            [styles.buttonsRegularIconsSeparate]: iconPosition === 'separate' && size !== 'small',
+        }, inputContainerClassName), inputClassName: inputClassName, disabled: disabled, size: size }));
+};
+//# sourceMappingURL=NumberField.js.map

package/lib/components/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../src/components/NumberField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAoD,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxH,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,SAAS,EAAiC,MAAM,aAAa,CAAA;AACtE,OAAO,EAAE,UAAU,EAAuD,MAAM,cAAc,CAAA;AAE9F,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAkC9C,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAChD,sBAAsB,GAAG,WAAW,EACpC,sBAAsB,GAAG,WAAW,EACpC,IAAI,GAAG,CAAC,EACR,GAAG,EACH,GAAG,EACH,qBAAqB,EACrB,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,YAAY,GAAG,UAAU,EACzB,eAAe,GAAG,IAAI,EACtB,cAAc,EACd,uBAAuB,EACvB,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,WAAW,EAAE,QAAQ,GAAG,cAAc,EACtC,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IAE5C,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAa,EAAE,EAAE;QAChD,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC3C,MAAM,CAAC,IAAI,EAAE,CAAA;IACf,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,qBAAqB,EAAE,CAAC;YAC1B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;YAC7B,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAA;gBAC9C,OAAO,GAAG,EAAE;oBACV,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAA;gBACnD,CAAC,CAAA;YACH,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,qBAAqB,EAAE,WAAW,CAAC,CAAC,CAAA;IAExC,yBAAyB,CAAC,GAAG,EAAE;QAC7B,IAAI,GAAG,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;YAC5D,QAAQ,CAAC,GAAG,CAAC,CAAA;QACf,CAAC;QACD,IAAI,GAAG,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;YAC5D,QAAQ,CAAC,GAAG,CAAC,CAAA;QACf,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAA;IAEd,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,QAAQ,GAAG,KAAM,GAAG,IAAI,CAAA;QAC5B,IAAI,GAAG,KAAK,SAAS,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC;YACxC,QAAQ,GAAG,GAAG,CAAA;QAChB,CAAC;QACD,QAAQ,CAAC,QAAQ,CAAC,CAAA;IACpB,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAA;IAEhC,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,QAAgB,CAAA;QAEpB,IAAI,KAAK,KAAK,SAAS,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YAC7C,QAAQ,GAAG,GAAG,CAAA;QAChB,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,KAAM,GAAG,IAAI,CAAA;QAC1B,CAAC;QAED,IAAI,GAAG,KAAK,SAAS,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC;YACxC,QAAQ,GAAG,GAAG,CAAA;QAChB,CAAC;QACD,QAAQ,CAAC,QAAQ,CAAC,CAAA;IACpB,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAA;IAErC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,OAAO,SAAS,CAAA;QAClB,CAAC;QAED,IAAI,sBAAsB,GAAyD,EAAE,CAAA;QACrF,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,sBAAsB,GAAG;gBACvB,QAAQ,EAAE,IAAI;gBACd,eAAe,EAAE,mCAAmC;aACrD,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,SAAS,IAAI,KAAK,IAAI,GAAG,EAAE,CAAC;YAC7C,sBAAsB,GAAG;gBACvB,QAAQ,EAAE,IAAI;gBACd,eAAe,EAAE,4BAA4B,GAAG,EAAE;aACnD,CAAA;QACH,CAAC;aAAM,IAAI,QAAQ,EAAE,CAAC;YACpB,uDAAuD;YACvD,sBAAsB,GAAG;gBACvB,QAAQ,EAAE,IAAI;gBACd,eAAe,EAAE,EAAE;gBACnB,sBAAsB,EAAE,KAAK;aAC9B,CAAA;QACH,CAAC;QAED,IAAI,sBAAsB,GAAyD,EAAE,CAAA;QACrF,IAAI,KAAK,KAAK,SAAS,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YAC7C,sBAAsB,GAAG;gBACvB,QAAQ,EAAE,IAAI;gBACd,eAAe,EAAE,mCAAmC;aACrD,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,IAAI,GAAG,EAAE,CAAC;YACpE,sBAAsB,GAAG;gBACvB,QAAQ,EAAE,IAAI;gBACd,eAAe,EAAE,+BAA+B,GAAG,EAAE;aACtD,CAAA;QACH,CAAC;aAAM,IAAI,QAAQ,EAAE,CAAC;YACpB,uDAAuD;YACvD,sBAAsB,GAAG;gBACvB,QAAQ,EAAE,IAAI;gBACd,eAAe,EAAE,EAAE;gBACnB,sBAAsB,EAAE,KAAK;aAC9B,CAAA;QACH,CAAC;QAED,OAAO,CACL;YACE,oBAAC,UAAU,IACT,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAChD,IAAI,EAAE,WAAW,EACjB,SAAS,EAAE,sBAAsB,EACjC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE;oBAC9B,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,IAAI,KAAK,OAAO;oBACzC,CAAC,MAAM,CAAC,sBAAsB,CAAC,EAAE,YAAY,KAAK,UAAU;oBAC5D,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;iBAC5B,CAAC,EACF,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,aAAa,eACP,GAAG,QAAQ,YAAY,EAClC,IAAI,EAAC,QAAQ,KACT,sBAAsB,GAC1B;YACF,oBAAC,UAAU,IACT,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAChD,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,sBAAsB,EACjC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE;oBAC9B,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;iBAC5B,CAAC,EACF,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,aAAa,eACP,GAAG,QAAQ,YAAY,EAClC,IAAI,EAAC,QAAQ,KACT,sBAAsB,GAC1B,CACD,CACJ,CAAA;IACH,CAAC,EAAE;QACD,eAAe;QACf,KAAK;QACL,GAAG;QACH,QAAQ;QACR,GAAG;QACH,IAAI;QACJ,sBAAsB;QACtB,YAAY;QACZ,WAAW;QACX,QAAQ;QACR,sBAAsB;QACtB,WAAW;KACZ,CAAC,CAAA;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAiC,EAAE,EAAE;QACjE,IAAI,cAAkC,CAAA;QACtC,IAAI,QAAQ,KAAK,EAAE,EAAE,CAAC;YACpB,cAAc,GAAG,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAA;QACvF,CAAC;QAED,IAAI,GAAG,KAAK,SAAS,IAAI,cAAc,KAAK,SAAS,IAAI,cAAc,GAAG,GAAG,EAAE,CAAC;YAC9E,cAAc,GAAG,GAAG,CAAA;QACtB,CAAC;QACD,IAAI,GAAG,KAAK,SAAS,IAAI,cAAc,KAAK,SAAS,IAAI,cAAc,GAAG,GAAG,EAAE,CAAC;YAC9E,cAAc,GAAG,GAAG,CAAA;QACtB,CAAC;QAED,QAAQ,CAAC,cAAc,CAAC,CAAA;IAC1B,CAAC,EACD,CAAC,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,CAAC,CACjC,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,OACJ,KAAK,KACL,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAClD,KAAK,EAAE,KAAK,eACD,QAAQ,EACnB,QAAQ,EAAE,eAAe,EACzB,IAAI,EAAC,QAAQ,EACb,mBAAmB,EAAE,OAAO,EAC5B,uBAAuB,EAAE,EAAE,CACzB,MAAM,CAAC,cAAc,EACrB;YACE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,eAAe;YACjC,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,YAAY,KAAK,UAAU;YAC1D,CAAC,MAAM,CAAC,2BAA2B,CAAC,EAAE,YAAY,KAAK,UAAU,IAAI,IAAI,KAAK,OAAO;SACtF,EACD,uBAAuB,CACxB,EACD,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,GACV,CACH,CAAA;AACH,CAAC,CAAA"}

package/lib/components/NumberField.module.scss

@@ -0,0 +1,76 @@
+@use '../../styles/constants' as c;
+
+$buttonMargin: c.$grid * 2;
+$inputMargin: c.$iconSizeSmall + $buttonMargin * 2;
+
+.disabled {
+  visibility: hidden;
+}
+
+.inputContainer {
+  position: relative;
+
+  > input {
+    /* doiuse-disable css-appearance */
+    appearance: textfield;
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+    /* doiuse-enable css-appearance */
+  }
+
+  &.buttons {
+    > input {
+      padding-right: $inputMargin * 2;
+    }
+
+    &.buttonsIconsSeparate > input {
+      padding-left: $inputMargin;
+      padding-right: $inputMargin;
+      text-align: center;
+    }
+
+    &.buttonsRegularIconsSeparate > input {
+      padding-left: $inputMargin + c.$grid;
+      padding-right: $inputMargin + c.$grid;
+      text-align: center;
+    }
+
+    .decrement {
+      color: c.$colorPrimary;
+      position: absolute;
+      right: $buttonMargin;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-right: c.$iconSizeSmallMedium + c.$grid;
+
+      &.decrementIconsSeparate {
+        left: $buttonMargin;
+        right: auto;
+      }
+
+      &.decrementSmall {
+        margin-right: c.$iconSizeSmall + c.$grid;
+      }
+
+      :global line {
+        color: black;
+      }
+    }
+
+    .increment {
+      color: c.$colorPrimary;
+      position: absolute;
+      right: $buttonMargin;
+      top: 50%;
+      transform: translateY(-50%);
+
+      :global line {
+        color: black;
+      }
+    }
+  }
+}

package/lib/components/NumberFieldFormik.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { NumberFieldExtraProps } from './NumberField';
+import { FieldValidatorGeneric } from '../utils/formik';
+import { ExtractKeysOfValueType } from '../utils/types';
+export type NumberFieldFormikProps<V extends object> = NumberFieldExtraProps & {
+    name: ExtractKeysOfValueType<V, number | undefined>;
+    validate?: FieldValidatorGeneric<number | undefined>;
+    onChange?: (value?: number) => void;
+};
+export declare const NumberFieldFormik: <V extends object>({ name, validate, onChange, ...props }: NumberFieldFormikProps<V>) => ReactElement;

package/lib/components/NumberFieldFormik.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useField, useFormikContext } from 'formik';
+import { NumberField } from './NumberField';
+import { getFieldError } from '../utils/formik';
+const changeNestedObjectValue = (oldValues, name, updatedValue) => {
+    const nameProps = name.split('.');
+    const newValues = {
+        ...oldValues,
+    };
+    nameProps.reduce((nestedValues, nextName, currentIndex) => {
+        if (currentIndex < nameProps.length - 1) {
+            // @ts-ignore
+            return nestedValues[nextName] || {};
+        }
+        else {
+            // @ts-ignore
+            nestedValues[nextName] = updatedValue;
+            return nestedValues;
+        }
+    }, newValues);
+    return newValues;
+};
+export const NumberFieldFormik = ({ name, validate, onChange, ...props }) => {
+    const [{ value, onBlur }, meta, { setTouched }] = useField({
+        name,
+        validate,
+    });
+    const formik = useFormikContext();
+    const handleChange = (value) => {
+        if (onChange) {
+            onChange(value);
+        }
+        // https://github.com/formium/formik/issues/2332
+        setTouched(true, false);
+        // Override default behavior by forcing undefined to be set on the state
+        if (value === undefined) {
+            const newValues = changeNestedObjectValue(formik.values, name, value);
+            formik.setValues({
+                ...newValues,
+            });
+            void formik.validateForm({
+                ...newValues,
+            });
+        }
+        else {
+            // Use default behavior for normal values
+            formik.setFieldValue(name, value, true);
+        }
+    };
+    return React.createElement(NumberField, { ...props, name: name, value: value, onChange: handleChange, onBlur: onBlur, error: getFieldError(meta) });
+};
+//# sourceMappingURL=NumberFieldFormik.js.map

package/lib/components/NumberFieldFormik.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberFieldFormik.js","sourceRoot":"","sources":["../../src/components/NumberFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AAEnD,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA;AAClE,OAAO,EAAyB,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAStE,MAAM,uBAAuB,GAAG,CAAmB,SAAY,EAAE,IAAY,EAAE,YAAgC,EAAE,EAAE;IACjH,MAAM,SAAS,GAAa,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAC3C,MAAM,SAAS,GAAG;QAChB,GAAG,SAAS;KACb,CAAA;IACD,SAAS,CAAC,MAAM,CAAC,CAAC,YAAoB,EAAE,QAAgB,EAAE,YAAY,EAAE,EAAE;QACxE,IAAI,YAAY,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACxC,aAAa;YACb,OAAQ,YAAY,CAAC,QAAQ,CAAY,IAAI,EAAE,CAAA;QACjD,CAAC;aAAM,CAAC;YACN,aAAa;YACb,YAAY,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAA;YACrC,OAAO,YAAY,CAAA;QACrB,CAAC;IACH,CAAC,EAAE,SAAS,CAAC,CAAA;IACb,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA6B,EAAgB,EAAE;IACrI,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,GAAG,QAAQ,CAAqB;QAC7E,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,MAAM,GAAG,gBAAgB,EAAK,CAAA;IAEpC,MAAM,YAAY,GAAG,CAAC,KAAyB,EAAE,EAAE;QACjD,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,KAAK,CAAC,CAAA;QACjB,CAAC;QAED,gDAAgD;QAChD,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;QACvB,wEAAwE;QACxE,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,MAAM,SAAS,GAAG,uBAAuB,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,CAAA;YACrE,MAAM,CAAC,SAAS,CAAC;gBACf,GAAG,SAAS;aACb,CAAC,CAAA;YACF,KAAK,MAAM,CAAC,YAAY,CAAC;gBACvB,GAAG,SAAS;aACb,CAAC,CAAA;QACJ,CAAC;aAAM,CAAC;YACN,yCAAyC;YACzC,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAA;QACzC,CAAC;IACH,CAAC,CAAA;IAED,OAAO,oBAAC,WAAW,OAAK,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CAAA;AACjI,CAAC,CAAA"}

package/lib/components/Overlay.d.ts

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+import { Props as ReactModalProps } from 'react-modal';
+import { DataTestProp } from '../../src';
+import { ButtonProps, ButtonTypeButtonProps } from './Button';
+import { IconProps } from './Icon';
+export type OverlayActionProps = ButtonProps<ButtonTypeButtonProps>;
+export type OverlayProps = {
+    children?: ReactNode;
+    closable?: boolean;
+    closeText?: string | null;
+    className?: string;
+    headerClassName?: string;
+    footerClassName?: string;
+    contentClassName?: string;
+    wrapperClassName?: string;
+    icon?: IconProps['icon'];
+    onClose?: ReactModalProps['onRequestClose'];
+    contentWidth?: 'fullscreen' | 'normal';
+    title?: string;
+    headingContent?: ReactNode;
+    footerContent?: ReactNode;
+} & DataTestProp & Exclude<ReactModalProps, 'onRequestClose' | 'shouldFocusAfterRender' | 'shouldReturnFocusAfterClose'>;
+export declare const Overlay: FC<OverlayProps>;

package/lib/components/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../src/components/Overlay.tsx"],"names":[],"mappings":"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"}

package/lib/components/Overlay.module.scss

@@ -0,0 +1,108 @@
+@use 'sass:color';
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+.overlayed {
+  overflow: hidden;
+}
+
+.portal {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: c.$zIndex1000;
+  pointer-events: none;
+}
+
+.modal {
+  background: color.adjust(c.$colorOverlayBackground, $alpha: -0.1);
+  width: 100vw;
+  height: 100vh;
+  z-index: c.$zIndex1000;
+  padding: c.$grid * 5;
+  box-sizing: border-box;
+  pointer-events: all;
+  animation: fadeIn 500ms;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  // Since Overlay is full screen, we don't have to show an outline
+  &:focus {
+    outline: transparent;
+  }
+
+  .wrapper {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: 100%;
+
+    &.normal {
+      max-width: c.$overlayContentMaxWidth;
+    }
+
+    .fullscreen {
+      max-width: 100%;
+    }
+
+    .header {
+      $iconSize: c.$grid * 9;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+      flex-shrink: 0;
+      margin-bottom: c.$grid * 9;
+      padding: 0 c.$grid * 21; // close button width
+
+      @media only screen and (width <= 640px) {
+        padding: 0 $iconSize;
+
+        .closeText {
+          @include h.visuallyHidden;
+        }
+      }
+
+      .close {
+        position: absolute;
+        right: c.$grid * 5;
+        top: c.$grid * 5;
+        padding: 0;
+
+        .closeIcon {
+          width: $iconSize;
+          height: $iconSize;
+          color: c.$colorText;
+        }
+      }
+
+      .icon {
+        margin-right: c.$grid * 2.5;
+      }
+
+      .title {
+        margin: 0;
+        overflow: hidden;
+        word-break: break-word;
+      }
+    }
+
+    .content {
+      flex: 1 1 auto;
+      overflow: auto;
+    }
+  }
+}