@hazelcast/ui 1.1.1 → 1.3.0

package/lib/CodeEditor.module.scss

@@ -4,13 +4,15 @@
 .container {
   box-shadow: 0 c.$cardShadowSize c.$cardShadowBlur 0 c.$colorShadow;
   border-radius: c.$borderRadius;
-  :global .cm-wrap {
+
+  :global .cm-editor {
     // bogus padding to avoid overlapping with our outlineFormField mixin.
     padding: 1px;
     border-radius: c.$borderRadius;
     border: c.$borderWidth solid c.$colorNeutralLight;
   }
-  :global .cm-wrap.cm-focused {
+
+  :global .cm-editor.cm-focused {
     // inherited outline just looks weird, override it
     outline: none;
 
@@ -19,6 +21,7 @@
 
     border: c.$borderWidth solid c.$colorAccessibilityOutline;
   }
+
   :global .cm-scroller {
     border-radius: c.$borderRadius;
   }

package/lib/CodeEditorFormik.js

@@ -7,8 +7,8 @@ export const CodeEditorFormik = ({ name, validate, ...props }) => {
         name,
         validate,
     });
-    return (React.createElement(CodeEditor, Object.assign({}, props, { name: name, value: field.value, onChange: (val) => {
+    return (React.createElement(CodeEditor, { ...props, name: name, value: field.value, onChange: (val) => {
             helpers.setValue(val, false);
-        }, onBlur: field.onBlur, error: getFieldError(meta) })));
+        }, onBlur: field.onBlur, error: getFieldError(meta) }));
 };
 //# sourceMappingURL=CodeEditorFormik.js.map

package/lib/CodeEditorFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditorFormik.js","sourceRoot":"","sources":["../src/CodeEditorFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAkB,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAQ9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA4B,EAAgB,EAAE;IACzH,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB;QAC1D,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,UAAU,oBACL,KAAK,IACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,GAAW,EAAE,EAAE;YACxB,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QAC9B,CAAC,EACD,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,IAC1B,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"CodeEditorFormik.js","sourceRoot":"","sources":["../src/CodeEditorFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAkB,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAQ9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA4B,EAAgB,EAAE;IACzH,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB;QAC1D,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,UAAU,OACL,KAAK,EACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,GAAW,EAAE,EAAE;YACxB,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QAC9B,CAAC,EACD,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAC1B,CACH,CAAA;AACH,CAAC,CAAA"}

package/lib/Dialog.js

@@ -19,15 +19,18 @@ export const Dialog = ({ modalClassName, consequences, affirmation = DIALOG_AFFI
                 autoFocus: !actionDangerous,
                 kind: actionDangerous ? 'danger' : 'primary',
                 ...(actionDisabled &&
-                    actionDisabledTooltip && {
+                    actionDisabledTooltip ? {
                     disabled: actionDisabled,
                     disabledTooltip: actionDisabledTooltip,
+                } : {
+                    disabled: undefined,
+                    disabledTooltip: undefined
                 }),
                 onClick: actionOnConfirm,
                 children: actionChildren,
             },
         ]
         : [], [actionDangerous, actionDisabled, actionDisabledTooltip, actionOnConfirm, actionChildren]);
-    return (React.createElement(Modal, Object.assign({ className: cn(styles.dialog, modalClassName), headerClassName: styles.dialogHeader, bodyClassName: styles.dialogBody, contentClassName: styles.dialogConsequences, footerClassName: styles.dialogFooter, actions: actions, title: affirmation, showCloseButton: false }, rest), consequences));
+    return (React.createElement(Modal, { className: cn(styles.dialog, modalClassName), headerClassName: styles.dialogHeader, bodyClassName: styles.dialogBody, contentClassName: styles.dialogConsequences, footerClassName: styles.dialogFooter, actions: actions, title: affirmation, showCloseButton: false, ...rest }, consequences));
 };
 //# sourceMappingURL=Dialog.js.map

package/lib/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../src/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,OAAO,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,KAAK,EAAgC,MAAM,SAAS,CAAA;AAE7D,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,MAAM,CAAC,MAAM,0BAA0B,GAAG,mCAAmC,CAAA;AAyB7E;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EACtC,cAAc,EACd,YAAY,EACZ,WAAW,GAAG,0BAA0B,EACxC,cAAc,EACd,eAAe,EACf,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,OAAO,GAA0B,OAAO,CAC5C,GAAG,EAAE,CACH,cAAc,IAAI,eAAe;QAC/B,CAAC,CAAC;YACE;gBACE,SAAS,EAAE,CAAC,eAAe;gBAC3B,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBAC5C,GAAG,CAAC,cAAc;oBAChB,qBAAqB,IAAI;oBACvB,QAAQ,EAAE,cAAc;oBACxB,eAAe,EAAE,qBAAqB;iBACvC,CAAC;gBACJ,OAAO,EAAE,eAAe;gBACxB,QAAQ,EAAE,cAAc;aACzB;SACF;QACH,CAAC,CAAC,EAAE,EACR,CAAC,eAAe,EAAE,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,cAAc,CAAC,CAC1F,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,kBACJ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,EAC5C,eAAe,EAAE,MAAM,CAAC,YAAY,EACpC,aAAa,EAAE,MAAM,CAAC,UAAU,EAChC,gBAAgB,EAAE,MAAM,CAAC,kBAAkB,EAC3C,eAAe,EAAE,MAAM,CAAC,YAAY,EACpC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,EAClB,eAAe,EAAE,KAAK,IAClB,IAAI,GAEP,YAAY,CACP,CACT,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../src/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,OAAO,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,KAAK,EAAgC,MAAM,SAAS,CAAA;AAE7D,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,MAAM,CAAC,MAAM,0BAA0B,GAAG,mCAAmC,CAAA;AAyB7E;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EACtC,cAAc,EACd,YAAY,EACZ,WAAW,GAAG,0BAA0B,EACxC,cAAc,EACd,eAAe,EACf,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,OAAO,GAA0B,OAAO,CAC5C,GAAG,EAAE,CACH,cAAc,IAAI,eAAe;QAC/B,CAAC,CAAC;YACE;gBACE,SAAS,EAAE,CAAC,eAAe;gBAC3B,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBAC5C,GAAG,CAAC,cAAc;oBAChB,qBAAqB,CAAC,CAAC,CAAC;oBACtB,QAAQ,EAAE,cAAc;oBACxB,eAAe,EAAE,qBAAqB;iBACvC,CAAA,CAAC,CAAA;oBACF,QAAQ,EAAE,SAAS;oBACnB,eAAe,EAAE,SAAS;iBAC3B,CAAC;gBACF,OAAO,EAAE,eAAe;gBACxB,QAAQ,EAAE,cAAc;aACzB;SACF;QACH,CAAC,CAAC,EAAE,EACR,CAAC,eAAe,EAAE,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,cAAc,CAAC,CAC1F,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,EAC5C,eAAe,EAAE,MAAM,CAAC,YAAY,EACpC,aAAa,EAAE,MAAM,CAAC,UAAU,EAChC,gBAAgB,EAAE,MAAM,CAAC,kBAAkB,EAC3C,eAAe,EAAE,MAAM,CAAC,YAAY,EACpC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,EAClB,eAAe,EAAE,KAAK,KAClB,IAAI,IAEP,YAAY,CACP,CACT,CAAA;AACH,CAAC,CAAA"}

package/lib/Dialog.module.scss

@@ -4,6 +4,7 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+
   // Note: Unset properties set by Modal
   min-width: 0;
   max-width: none;
@@ -35,6 +36,7 @@
         flex: 1 1 auto;
         margin: 0 !important;
         max-width: none;
+
         // Note: Unset border-radius for the buttons
         border-radius: 0;
       }
@@ -50,6 +52,7 @@
         &:nth-of-type(1) {
           border-bottom-left-radius: c.$borderRadius;
         }
+
         &:nth-of-type(2) {
           border-bottom-right-radius: c.$borderRadius;
         }

package/lib/EmptyState.d.ts

@@ -1,6 +1,7 @@
-import { FC } from 'react';
+import { FC, ReactChild } from 'react';
 import { ButtonTypeAnchorProps, ButtonProps } from './Button';
 import { IconProps } from './Icon';
+import { DataTestProp } from '@hazelcast/helpers';
 declare type EmptyStateSize = 'normal' | 'large';
 declare type EmptyStateActionButton = {
     direction?: 'vertical';
@@ -30,11 +31,12 @@ declare type EmptyStateAction = ({
     size?: EmptyStateSize;
 };
 export declare type EmptyStateProps = {
-    title: string;
-    description?: string;
+    title: ReactChild;
+    description?: ReactChild;
     icon: IconProps['icon'];
     iconLabel: string;
-} & EmptyStateAction;
+    className?: string;
+} & EmptyStateAction & DataTestProp;
 /**
  * ### Purpose
  * Sometimes users performs an action, that yields an empty result. Such cases may be first use of a feature, view with no data, user cleared view or an error state.

package/lib/EmptyState.js

@@ -16,18 +16,16 @@ import styles from './EmptyState.module.scss';
  * - Good practice is add an action button to guide a user for the next steps to get out of the empty state.
  * - Description helps to describe the semantics more thoroughly.
  */
-export const EmptyState = ({ direction = 'vertical', size = 'normal', title, description, icon, iconLabel, ...restWActionProps }) => {
+export const EmptyState = ({ 'data-test': dataTest, direction = 'vertical', size = 'normal', title, description, icon, iconLabel, className, ...restWActionProps }) => {
     const { action, actionHref, actionOnClick, actionTarget, actionRel } = restWActionProps;
     const iconSize = direction === 'vertical' && size === 'large' ? 'xlarge' : 'large';
-    return (React.createElement("div", { "data-test": "empty-state-container", className: cn(styles.container, {
-            // Direction
+    return (React.createElement("div", { "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'empty-state-container', className: cn(styles.container, {
             [styles.horizontal]: direction === 'horizontal',
-            // Size
             [styles.large]: size === 'large',
-        }) },
+        }, className) },
         React.createElement(Icon, { "data-test": "empty-state-icon", className: styles.icon, icon: icon, ariaLabel: iconLabel, size: iconSize }),
         React.createElement("div", { className: styles.content },
-            React.createElement("h3", { "data-test": "empty-state-title", className: styles.title }, title),
+            React.createElement("div", { "data-test": "empty-state-title", className: styles.title }, title),
             description && (React.createElement("p", { "data-test": "empty-state-description", className: styles.description }, description)),
             action ? (direction === 'horizontal' && actionHref !== undefined ? (React.createElement(Link, { "data-test": "empty-state-link", className: styles.action, icon: ChevronRight, ariaLabel: "Icon Chevron Right", href: actionHref, target: actionTarget, rel: actionRel, size: "small" }, action)) : (React.createElement(Button, { "data-test": "empty-state-button", className: styles.action, onClick: actionOnClick }, action))) : null)));
 };

package/lib/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../src/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,EAAsC,MAAM,EAAE,MAAM,UAAU,CAAA;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,OAAO,MAAM,MAAM,0BAA0B,CAAA;AA6C7C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,WAAW,EACX,IAAI,EACJ,SAAS,EACT,GAAG,gBAAgB,EACpB,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAA;IAEvF,MAAM,QAAQ,GAAG,SAAS,KAAK,UAAU,IAAI,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAA;IAElF,OAAO,CACL,0CACY,uBAAuB,EACjC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE;YAC9B,YAAY;YACZ,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,SAAS,KAAK,YAAY;YAC/C,OAAO;YACP,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;SACjC,CAAC;QAEF,oBAAC,IAAI,iBAAW,kBAAkB,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,GAAI;QAC/G,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;YAE5B,yCAAc,mBAAmB,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,IACtD,KAAK,CACH;YACJ,WAAW,IAAI,CACd,wCAAa,yBAAyB,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,IACjE,WAAW,CACV,CACL;YACA,MAAM,CAAC,CAAC,CAAC,CACR,SAAS,KAAK,YAAY,IAAI,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,CACvD,oBAAC,IAAI,iBACO,kBAAkB,EAC5B,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,IAAI,EAAE,YAAY,EAClB,SAAS,EAAC,oBAAoB,EAC9B,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,OAAO,IAEX,MAAM,CACF,CACR,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,iBAAW,oBAAoB,EAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,aAAa,IACpF,MAAM,CACA,CACV,CACF,CAAC,CAAC,CAAC,IAAI,CACJ,CACF,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../src/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,EAAsC,MAAM,EAAE,MAAM,UAAU,CAAA;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAgD7C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,WAAW,EAAE,QAAQ,EACrB,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,WAAW,EACX,IAAI,EACJ,SAAS,EACT,SAAS,EACT,GAAG,gBAAgB,EACpB,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAA;IAEvF,MAAM,QAAQ,GAAG,SAAS,KAAK,UAAU,IAAI,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAA;IAElF,OAAO,CACL,0CACa,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,uBAAuB,EAC9C,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,SAAS,KAAK,YAAY;YAC/C,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;SACjC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAW,kBAAkB,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,GAAI;QAC/G,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;YAC5B,0CAAe,mBAAmB,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,IACvD,KAAK,CACF;YACL,WAAW,IAAI,CACd,wCAAa,yBAAyB,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,IACjE,WAAW,CACV,CACL;YACA,MAAM,CAAC,CAAC,CAAC,CACR,SAAS,KAAK,YAAY,IAAI,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,CACvD,oBAAC,IAAI,iBACO,kBAAkB,EAC5B,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,IAAI,EAAE,YAAY,EAClB,SAAS,EAAC,oBAAoB,EAC9B,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,OAAO,IAEX,MAAM,CACF,CACR,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,iBAAW,oBAAoB,EAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,aAAa,IACpF,MAAM,CACA,CACV,CACF,CAAC,CAAC,CAAC,IAAI,CACJ,CACF,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/EmptyState.module.scss

@@ -5,12 +5,12 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  max-width: c.$emptyStateMaxWidth;
   text-align: center;
 
   .content {
     .title {
       margin: c.$grid * 4.5 0 0 0;
+
       @include c.typographyBodyNormal('bold' !important);
     }
 

package/lib/Error.d.ts

@@ -1,9 +1,12 @@
 import { FC } from 'react';
+import { TooltipProps } from './Tooltip';
 export declare const errorId: (inputId: string) => string;
 interface ErrorProps {
     error?: string;
     className?: string;
     inputId: string;
+    truncated?: boolean;
+    tooltipPlacement?: TooltipProps['placement'];
 }
 export declare const Error: FC<ErrorProps>;
 export {};

package/lib/Error.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import cn from 'classnames';
+import { TruncatedText } from './TruncatedText';
 import styles from './Error.module.scss';
 export const errorId = (inputId) => `${inputId}-error`;
 /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role */
-export const Error = ({ error, className, inputId }) => (React.createElement("div", { className: cn(styles.container, error && styles.hasError, className), role: "alert", id: errorId(inputId) }, error));
+export const Error = ({ error, className, inputId, truncated, tooltipPlacement }) => (React.createElement("div", { className: cn(styles.container, error && styles.hasError, className), role: "alert", id: errorId(inputId) }, truncated ? React.createElement(TruncatedText, { text: error || '', tooltipPlacement: tooltipPlacement, hoverAbleTooltip: false }) : error));
 //# sourceMappingURL=Error.js.map

package/lib/Error.js.map

@@ -1 +1 @@
-{"version":3,"file":"Error.js","sourceRoot":"","sources":["../src/Error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,MAAM,qBAAqB,CAAA;AAExC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,QAAQ,CAAA;AAQtE,0GAA0G;AAC1G,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CACtE,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,IAAI,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,OAAO,CAAC,OAAO,CAAC,IACzG,KAAK,CACF,CACP,CAAA"}
+{"version":3,"file":"Error.js","sourceRoot":"","sources":["../src/Error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG/C,OAAO,MAAM,MAAM,qBAAqB,CAAA;AAExC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,QAAQ,CAAA;AAUtE,0GAA0G;AAC1G,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CACnG,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,IAAI,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,OAAO,CAAC,OAAO,CAAC,IACzG,SAAS,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,IAAI,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,KAAK,CAClH,CACP,CAAA"}

package/lib/FieldHeader.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { HelpProps } from './Help';
+import { DataTestProp } from '@hazelcast/helpers';
+export declare type FieldHeaderSize = 'small' | 'medium';
+export declare type FieldHeaderLabelProps = {
+    label: string;
+    labelClassName?: string;
+    helperText?: HelpProps['helperText'];
+};
+export declare type FieldHeaderNoLabelProps = {
+    label: never;
+    labelClassName: never;
+    helperText: never;
+};
+export declare type FieldHeaderProps = {
+    size?: FieldHeaderSize;
+    id: string;
+    showAriaLabel?: boolean;
+} & DataTestProp & (FieldHeaderNoLabelProps | FieldHeaderLabelProps);
+export declare const FieldHeader: (props: FieldHeaderProps) => JSX.Element | null;

package/lib/FieldHeader.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import cn from 'classnames';
+import { Label } from './Label';
+import { Help } from './Help';
+import styles from './FieldHeader.module.scss';
+export const FieldHeader = (props) => {
+    const { label, id, helperText, size = 'medium', labelClassName, 'data-test': dataTest, showAriaLabel } = props;
+    if (showAriaLabel) {
+        return null;
+    }
+    return (React.createElement("div", { className: styles.root },
+        label && (React.createElement(Label, { id: id, label: label, "data-test": dataTest ? `${dataTest}-label` : undefined, className: cn(styles.label, { [styles.small]: size === 'small' }, labelClassName) })),
+        label && helperText && (React.createElement(Help, { parentId: id, helperText: helperText, className: styles.helperText, "data-test": dataTest ? `${dataTest}-helperText` : undefined }))));
+};
+//# sourceMappingURL=FieldHeader.js.map

package/lib/FieldHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldHeader.js","sourceRoot":"","sources":["../src/FieldHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAGxC,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAY9C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACrD,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,GAAG,QAAQ,EAAE,cAAc,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;IAE9G,IAAI,aAAa,EAAE;QACjB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACxB,KAAK,IAAI,CACR,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,eACD,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,QAAQ,CAAC,CAAC,CAAC,SAAS,EACrD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO,EAAE,EAAE,cAAc,CAAC,GACjF,CACH;QACA,KAAK,IAAI,UAAU,IAAI,CACtB,oBAAC,IAAI,IACH,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,MAAM,CAAC,UAAU,eACjB,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,aAAa,CAAC,CAAC,CAAC,SAAS,GAC1D,CACH,CACG,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/FieldHeader.module.scss

@@ -0,0 +1,20 @@
+@use '../styles/constants' as c;
+
+.root {
+  display: flex;
+  margin-bottom: c.$grid;
+}
+
+.label {
+  flex-shrink: 0;
+  white-space: pre-wrap;
+
+  &.small {
+    @include c.typographyBodySmall;
+  }
+}
+
+.helperText {
+  flex-shrink: 0;
+  margin-top: c.$grid * 0.5;
+}

package/lib/Icon.d.ts

@@ -11,7 +11,7 @@ export declare type IconAriaProps = {
 } | {
     ariaLabel?: never;
     ariaLabelledBy?: never;
-    ariaHidden: boolean;
+    ariaHidden?: boolean;
 };
 export declare type IconType = FC<SVGAttributes<SVGElement> & {
     color?: string;
@@ -25,37 +25,4 @@ export declare type IconProps = {
     containerClassName?: string;
     bold?: boolean;
 } & IconAriaProps;
-export declare const Icon: React.ForwardRefExoticComponent<({
-    color?: string | undefined;
-    icon: IconType;
-    size?: "medium" | "large" | "small" | "smallMedium" | "xlarge" | undefined;
-    className?: string | undefined;
-    containerClassName?: string | undefined;
-    bold?: boolean | undefined;
-} & {
-    ariaLabel: string;
-    ariaLabelledBy?: undefined;
-    ariaHidden?: undefined;
-} & React.RefAttributes<HTMLDivElement>) | ({
-    color?: string | undefined;
-    icon: IconType;
-    size?: "medium" | "large" | "small" | "smallMedium" | "xlarge" | undefined;
-    className?: string | undefined;
-    containerClassName?: string | undefined;
-    bold?: boolean | undefined;
-} & {
-    ariaLabel?: undefined;
-    ariaLabelledBy: string;
-    ariaHidden?: undefined;
-} & React.RefAttributes<HTMLDivElement>) | ({
-    color?: string | undefined;
-    icon: IconType;
-    size?: "medium" | "large" | "small" | "smallMedium" | "xlarge" | undefined;
-    className?: string | undefined;
-    containerClassName?: string | undefined;
-    bold?: boolean | undefined;
-} & {
-    ariaLabel?: undefined;
-    ariaLabelledBy?: undefined;
-    ariaHidden: boolean;
-} & React.RefAttributes<HTMLDivElement>)>;
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;

package/lib/Icon.js

@@ -21,7 +21,7 @@ export const Icon = forwardRef(({ color, icon: IconElement, ariaLabel, ariaLabel
         strokeWidth: iconStroke,
     };
     return (React.createElement("div", { className: cn(styles.iconContainer, containerClassName), ref: ref },
-        React.createElement(IconElement, Object.assign({ role: "img" }, props))));
+        React.createElement(IconElement, { role: "img", ...props })));
 });
 Icon.displayName = 'Icon';
 //# sourceMappingURL=Icon.js.map

package/lib/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAA2B,MAAM,OAAO,CAAA;AACtE,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,WAAW,MAAM,wCAAwC,CAAA;AAChE,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAsCvC,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,GAAG,QAAQ,EAAE,IAAI,GAAG,KAAK,EAAE,EACjI,GAAG,EACH,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC,CAAC,WAAW,CAAC,eAAe,CAAA;IAEvF,MAAM,KAAK,GAAyB;QAClC,YAAY,EAAE,SAAS;QACvB,iBAAiB,EAAE,cAAc;QACjC,aAAa,EAAE,UAAU;QACzB,KAAK;QACL,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,EAAE,CACX;YACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,IAAI,KAAK,aAAa;YAC5C,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;YAClC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;SACnC,EACD,SAAS,CACV;QACD,WAAW,EAAE,UAAU;KACxB,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,kBAAkB,CAAC,EAAE,GAAG,EAAE,GAAG;QACpE,oBAAC,WAAW,kBAAC,IAAI,EAAC,KAAK,IAAK,KAAK,EAAI,CACjC,CACP,CAAA;AACH,CAAC,CACF,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAA2B,MAAM,OAAO,CAAA;AACtE,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,WAAW,MAAM,wCAAwC,CAAA;AAChE,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAsCvC,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,GAAG,QAAQ,EAAE,IAAI,GAAG,KAAK,EAAE,EACjI,GAAG,EACH,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC,CAAC,WAAW,CAAC,eAAe,CAAA;IAEvF,MAAM,KAAK,GAAyB;QAClC,YAAY,EAAE,SAAS;QACvB,iBAAiB,EAAE,cAAc;QACjC,aAAa,EAAE,UAAU;QACzB,KAAK;QACL,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,EAAE,CACX;YACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,IAAI,KAAK,aAAa;YAC5C,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;YAClC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;SACnC,EACD,SAAS,CACV;QACD,WAAW,EAAE,UAAU;KACxB,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,kBAAkB,CAAC,EAAE,GAAG,EAAE,GAAG;QACpE,oBAAC,WAAW,IAAC,IAAI,EAAC,KAAK,KAAK,KAAK,GAAI,CACjC,CACP,CAAA;AACH,CAAC,CACF,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA"}

package/lib/Icon.module.scss

@@ -2,6 +2,7 @@
 
 .iconContainer {
   display: inline-block;
+
   // Note: Font-size reset in order break inheritance.
   font-size: 0;
 
@@ -9,18 +10,22 @@
     width: c.$iconSizeSmall;
     height: c.$iconSizeSmall;
   }
+
   .smallMedium {
     width: c.$iconSizeSmallMedium;
     height: c.$iconSizeSmallMedium;
   }
+
   .medium {
     width: c.$iconSizeMedium;
     height: c.$iconSizeMedium;
   }
+
   .large {
     width: c.$iconSizeLarge;
     height: c.$iconSizeLarge;
   }
+
   .xlarge {
     width: c.$iconSizeXLarge;
     height: c.$iconSizeXLarge;

package/lib/IconButton.d.ts

@@ -3,6 +3,7 @@ import { Icon as FeatherIcon } from 'react-feather';
 import { IconProps, IconAriaProps } from './Icon';
 import { TooltipProps } from './Tooltip';
 import { LinkRel, LinkTarget } from './Link';
+import { DataTestProp } from '../../helpers';
 export declare type IconButtonKind = 'primary' | 'transparent';
 declare type IconButtonCommonProps = {
     icon: FeatherIcon;
@@ -11,7 +12,10 @@ declare type IconButtonCommonProps = {
     kind?: IconButtonKind;
     size?: IconProps['size'];
     padding?: 'normal';
-} & IconAriaProps & Pick<ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, 'onClick' | 'onMouseDown' | 'className' | 'tabIndex' | 'style'>;
+    tooltip?: string;
+    tooltipVisible?: boolean;
+    tooltipPlacement?: TooltipProps['placement'];
+} & DataTestProp & IconAriaProps & Pick<ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, 'onClick' | 'onMouseDown' | 'className' | 'tabIndex' | 'style'>;
 export declare type IconButtonNotDisabledProps = {
     disabledTooltip?: never;
     disabled?: never;
@@ -39,161 +43,5 @@ declare type IconButtonComponentProps = ({
     loading?: boolean;
 } & (IconButtonDisabledProps | IconButtonNotDisabledProps) & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'autoFocus' | 'type'>);
 export declare type IconButtonProps = IconButtonCommonProps & IconButtonComponentProps;
-export declare const IconButton: React.ForwardRefExoticComponent<({
-    icon: FeatherIcon;
-    iconClassName?: string | undefined;
-    iconColor?: string | undefined;
-    kind?: "transparent" | "primary" | undefined;
-    size?: IconProps['size'];
-    padding?: "normal" | undefined;
-} & {
-    ariaLabel: string;
-    ariaLabelledBy?: undefined;
-    ariaHidden?: undefined;
-} & Pick<React.ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick" | "onMouseDown"> & {
-    component: 'a';
-    href: string;
-    target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
-    rel?: "alternate" | "help" | "search" | "author" | "bookmark" | "dns-prefetch" | "external" | "license" | "next" | "nofollow" | "noopener" | "noreferrer" | "opener" | "prev" | "tag" | LinkRel[] | undefined;
-    type?: undefined;
-    loading?: undefined;
-} & IconButtonNotDisabledProps & React.RefAttributes<HTMLElement>) | ({
-    icon: FeatherIcon;
-    iconClassName?: string | undefined;
-    iconColor?: string | undefined;
-    kind?: "transparent" | "primary" | undefined;
-    size?: IconProps['size'];
-    padding?: "normal" | undefined;
-} & {
-    ariaLabel: string;
-    ariaLabelledBy?: undefined;
-    ariaHidden?: undefined;
-} & Pick<React.ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick" | "onMouseDown"> & {
-    component?: "button" | undefined;
-    href?: undefined;
-    target?: undefined;
-    rel?: undefined;
-    loading?: boolean | undefined;
-} & IconButtonNotDisabledProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "autoFocus"> & React.RefAttributes<HTMLElement>) | ({
-    icon: FeatherIcon;
-    iconClassName?: string | undefined;
-    iconColor?: string | undefined;
-    kind?: "transparent" | "primary" | undefined;
-    size?: IconProps['size'];
-    padding?: "normal" | undefined;
-} & {
-    ariaLabel: string;
-    ariaLabelledBy?: undefined;
-    ariaHidden?: undefined;
-} & Pick<React.ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick" | "onMouseDown"> & {
-    component?: "button" | undefined;
-    href?: undefined;
-    target?: undefined;
-    rel?: undefined;
-    loading?: boolean | undefined;
-} & IconButtonDisabledProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "autoFocus"> & React.RefAttributes<HTMLElement>) | ({
-    icon: FeatherIcon;
-    iconClassName?: string | undefined;
-    iconColor?: string | undefined;
-    kind?: "transparent" | "primary" | undefined;
-    size?: IconProps['size'];
-    padding?: "normal" | undefined;
-} & {
-    ariaLabel?: undefined;
-    ariaLabelledBy: string;
-    ariaHidden?: undefined;
-} & Pick<React.ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick" | "onMouseDown"> & {
-    component: 'a';
-    href: string;
-    target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
-    rel?: "alternate" | "help" | "search" | "author" | "bookmark" | "dns-prefetch" | "external" | "license" | "next" | "nofollow" | "noopener" | "noreferrer" | "opener" | "prev" | "tag" | LinkRel[] | undefined;
-    type?: undefined;
-    loading?: undefined;
-} & IconButtonNotDisabledProps & React.RefAttributes<HTMLElement>) | ({
-    icon: FeatherIcon;
-    iconClassName?: string | undefined;
-    iconColor?: string | undefined;
-    kind?: "transparent" | "primary" | undefined;
-    size?: IconProps['size'];
-    padding?: "normal" | undefined;
-} & {
-    ariaLabel?: undefined;
-    ariaLabelledBy: string;
-    ariaHidden?: undefined;
-} & Pick<React.ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick" | "onMouseDown"> & {
-    component?: "button" | undefined;
-    href?: undefined;
-    target?: undefined;
-    rel?: undefined;
-    loading?: boolean | undefined;
-} & IconButtonNotDisabledProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "autoFocus"> & React.RefAttributes<HTMLElement>) | ({
-    icon: FeatherIcon;
-    iconClassName?: string | undefined;
-    iconColor?: string | undefined;
-    kind?: "transparent" | "primary" | undefined;
-    size?: IconProps['size'];
-    padding?: "normal" | undefined;
-} & {
-    ariaLabel?: undefined;
-    ariaLabelledBy: string;
-    ariaHidden?: undefined;
-} & Pick<React.ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick" | "onMouseDown"> & {
-    component?: "button" | undefined;
-    href?: undefined;
-    target?: undefined;
-    rel?: undefined;
-    loading?: boolean | undefined;
-} & IconButtonDisabledProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "autoFocus"> & React.RefAttributes<HTMLElement>) | ({
-    icon: FeatherIcon;
-    iconClassName?: string | undefined;
-    iconColor?: string | undefined;
-    kind?: "transparent" | "primary" | undefined;
-    size?: IconProps['size'];
-    padding?: "normal" | undefined;
-} & {
-    ariaLabel?: undefined;
-    ariaLabelledBy?: undefined;
-    ariaHidden: boolean;
-} & Pick<React.ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick" | "onMouseDown"> & {
-    component: 'a';
-    href: string;
-    target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
-    rel?: "alternate" | "help" | "search" | "author" | "bookmark" | "dns-prefetch" | "external" | "license" | "next" | "nofollow" | "noopener" | "noreferrer" | "opener" | "prev" | "tag" | LinkRel[] | undefined;
-    type?: undefined;
-    loading?: undefined;
-} & IconButtonNotDisabledProps & React.RefAttributes<HTMLElement>) | ({
-    icon: FeatherIcon;
-    iconClassName?: string | undefined;
-    iconColor?: string | undefined;
-    kind?: "transparent" | "primary" | undefined;
-    size?: IconProps['size'];
-    padding?: "normal" | undefined;
-} & {
-    ariaLabel?: undefined;
-    ariaLabelledBy?: undefined;
-    ariaHidden: boolean;
-} & Pick<React.ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick" | "onMouseDown"> & {
-    component?: "button" | undefined;
-    href?: undefined;
-    target?: undefined;
-    rel?: undefined;
-    loading?: boolean | undefined;
-} & IconButtonNotDisabledProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "autoFocus"> & React.RefAttributes<HTMLElement>) | ({
-    icon: FeatherIcon;
-    iconClassName?: string | undefined;
-    iconColor?: string | undefined;
-    kind?: "transparent" | "primary" | undefined;
-    size?: IconProps['size'];
-    padding?: "normal" | undefined;
-} & {
-    ariaLabel?: undefined;
-    ariaLabelledBy?: undefined;
-    ariaHidden: boolean;
-} & Pick<React.ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick" | "onMouseDown"> & {
-    component?: "button" | undefined;
-    href?: undefined;
-    target?: undefined;
-    rel?: undefined;
-    loading?: boolean | undefined;
-} & IconButtonDisabledProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "autoFocus"> & React.RefAttributes<HTMLElement>)>;
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLElement>>;
 export {};

package/lib/IconButton.js

@@ -8,15 +8,15 @@ import { Loader } from './Loader';
 import styles from './IconButton.module.scss';
 export const IconButton = forwardRef(({ component: Component = 'button', icon, iconClassName, iconColor, className, size, kind = 'transparent', ariaHidden, ariaLabelledBy, ariaLabel, 
 // Disabled tooltip
-disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, rel = 'noopener', target, type = 'button', loading, padding, ...rest }, ref) => {
+disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, rel = 'noopener', target, type = 'button', loading, padding, tooltip, tooltipPlacement, tooltipVisible, ...rest }, ref) => {
     const tooltipId = useUID();
     const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
     const labelledByFinal = [ariaLabelledBy, disabled ? tooltipId : undefined].filter(Boolean).join(' ');
-    return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : undefined, placement: disabledTooltipPlacement, visible: disabledTooltipVisible }, (tooltipRef) => (React.createElement(Component, Object.assign({ className: cn(styles.iconButton, {
+    return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : tooltip, placement: disabled ? disabledTooltipPlacement : tooltipPlacement, visible: disabled ? disabledTooltipVisible : tooltipVisible }, (tooltipRef) => (React.createElement(Component, { className: cn(styles.iconButton, {
             [styles.primary]: kind === 'primary',
             [styles.transparent]: kind === 'transparent',
             [styles.paddingNormal]: padding === 'normal',
-        }, className), "aria-hidden": ariaHidden, "aria-label": ariaLabel, "aria-labelledby": labelledByFinal, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined }, rest),
+        }, className), "aria-hidden": ariaHidden, "aria-label": ariaLabel, "aria-labelledby": labelledByFinal, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined, ...rest },
         React.createElement("span", { className: styles.body, ref: mergeRefs([ref, tooltipRef]) },
             loading && React.createElement(Loader, { size: size }),
             !loading && React.createElement(Icon, { className: iconClassName, color: iconColor, icon: icon, size: size, ariaHidden: true }))))));

package/lib/IconButton.js.map

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

package/lib/InteractiveList.d.ts

@@ -1,9 +1,10 @@
 import React, { FocusEvent } from 'react';
 import { TextFieldExtraProps } from './TextField';
 import { ExtractKeysOfValueType } from './utils/types';
+import { FieldHeaderProps } from './FieldHeader';
 export declare type InteractiveListExtraProps = {
     children?: React.ReactNode | React.ReactNode[];
-} & Pick<TextFieldExtraProps<'text'>, 'label' | 'helperText' | 'inputIcon' | 'type' | 'placeholder'>;
+} & Pick<TextFieldExtraProps<'text'>, 'inputIcon' | 'type' | 'placeholder'> & Omit<FieldHeaderProps, 'id'>;
 export declare type InteractiveListCoreProps<V> = {
     name: ExtractKeysOfValueType<V, string[]>;
     value: string[];
@@ -29,5 +30,4 @@ export declare const InteractiveListItem: ({ onRemoveItem, content, error, idx }
  * This component is meant to be used only from InteractiveListFormik
  * @private
  */
-declare const InteractiveList: <V>({ label, children, error, name, value, helperText, inputIcon, type, inputValue, setInputValue, onAddItem, onRemoveItem, }: InteractiveListProps<V>) => JSX.Element;
-export default InteractiveList;
+export declare const InteractiveList: <V>({ label, children, error, name, value, helperText, inputIcon, type, inputValue, setInputValue, onAddItem, onRemoveItem, }: InteractiveListProps<V>) => JSX.Element;