@hazelcast/ui 3.0.1-canary.0 → 3.0.1-canary.2

package/lib/components/Dialog.js

@@ -1,11 +1,8 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var components_Modal = require('./Modal.js');
-var Dialog_module = require('./Dialog.module.scss.js');
-
-const DIALOG_AFFIRMATION_DEFAULT = 'Are you sure you wish to proceed?';
+import React, { useMemo } from 'react';
+import cn from 'classnames';
+import { Modal } from './Modal';
+import styles from './Dialog.module.scss';
+export const DIALOG_AFFIRMATION_DEFAULT = 'Are you sure you wish to proceed?';
 /**
  * ### Purpose
  * Occasionally there's a user-story that's not a part of the main user flow. Such action can be contained in a Dialog.
@@ -15,46 +12,29 @@ const DIALOG_AFFIRMATION_DEFAULT = 'Are you sure you wish to proceed?';
  * - Dialog is a special kind of Modal. It's made for simple use-cases such as confirmations.
  * - Use affirmation` and `consequences` props to set the content of the Dialog.
  */
-const Dialog = ({
-  modalClassName,
-  consequences,
-  affirmation = DIALOG_AFFIRMATION_DEFAULT,
-  actionChildren,
-  actionDangerous,
-  actionDisabled,
-  actionDisabledTooltip,
-  actionOnConfirm,
-  ...rest
-}) => {
-  const actions = React.useMemo(() => {
-    const props = actionChildren && actionOnConfirm ? [{
-      autoFocus: !actionDangerous,
-      color: actionDangerous ? 'secondary' : 'primary',
-      ...(actionDisabled && actionDisabledTooltip ? {
-        disabled: actionDisabled,
-        disabledTooltip: actionDisabledTooltip
-      } : {
-        disabled: undefined,
-        disabledTooltip: undefined
-      }),
-      onClick: actionOnConfirm,
-      children: actionChildren
-    }] : [];
-    return props;
-  }, [actionDangerous, actionDisabled, actionDisabledTooltip, actionOnConfirm, actionChildren]);
-  return /*#__PURE__*/React.createElement(components_Modal.Modal, {
-    className: cn(Dialog_module.default.dialog, modalClassName),
-    headerClassName: Dialog_module.default.dialogHeader,
-    bodyClassName: Dialog_module.default.dialogBody,
-    contentClassName: Dialog_module.default.dialogConsequences,
-    footerClassName: Dialog_module.default.dialogFooter,
-    actions: actions,
-    title: affirmation,
-    showCloseButton: false,
-    ...rest
-  }, consequences);
+export const Dialog = ({ modalClassName, consequences, affirmation = DIALOG_AFFIRMATION_DEFAULT, actionChildren, actionDangerous, actionDisabled, actionDisabledTooltip, actionOnConfirm, ...rest }) => {
+    const actions = useMemo(() => {
+        const props = actionChildren && actionOnConfirm
+            ? [
+                {
+                    autoFocus: !actionDangerous,
+                    color: actionDangerous ? 'secondary' : 'primary',
+                    ...(actionDisabled && actionDisabledTooltip
+                        ? {
+                            disabled: actionDisabled,
+                            disabledTooltip: actionDisabledTooltip,
+                        }
+                        : {
+                            disabled: undefined,
+                            disabledTooltip: undefined,
+                        }),
+                    onClick: actionOnConfirm,
+                    children: actionChildren,
+                },
+            ]
+            : [];
+        return props;
+    }, [actionDangerous, actionDisabled, actionDisabledTooltip, actionOnConfirm, actionChildren]);
+    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));
 };
-
-exports.DIALOG_AFFIRMATION_DEFAULT = DIALOG_AFFIRMATION_DEFAULT;
-exports.Dialog = Dialog;
-//# sourceMappingURL=Dialog.js.map
+//# sourceMappingURL=Dialog.js.map

package/lib/components/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../src/components/Dialog.tsx"],"sourcesContent":[null],"names":["DIALOG_AFFIRMATION_DEFAULT","Dialog","modalClassName","consequences","affirmation","actionChildren","actionDangerous","actionDisabled","actionDisabledTooltip","actionOnConfirm","rest","actions","useMemo","props","autoFocus","color","disabled","disabledTooltip","undefined","onClick","children","React","createElement","Modal","className","cn","styles","dialog","headerClassName","dialogHeader","bodyClassName","dialogBody","contentClassName","dialogConsequences","footerClassName","dialogFooter","title","showCloseButton"],"mappings":";;;;;;;AAOO,MAAMA,0BAA0B,GAAG;AAyB1C;;;;;;;;AAQG;AACI,MAAMC,MAAM,GAAoBA,CAAC;EACtCC,cAAc;EACdC,YAAY;AACZC,EAAAA,WAAW,GAAGJ,0BAA0B;EACxCK,cAAc;EACdC,eAAe;EACfC,cAAc;EACdC,qBAAqB;EACrBC,eAAe;EACf,GAAGC;AAAI,CACR,KAAI;AACH,EAAA,MAAMC,OAAO,GAAGC,aAAO,CAAC,MAAK;AAC3B,IAAA,MAAMC,KAAK,GACTR,cAAc,IAAII,eAAe,GAC7B,CACE;MACEK,SAAS,EAAE,CAACR,eAAe;AAC3BS,MAAAA,KAAK,EAAET,eAAe,GAAG,WAAW,GAAG,SAAS;MAChD,IAAIC,cAAc,IAAIC,qBAAqB,GACvC;AACEQ,QAAAA,QAAQ,EAAET,cAAc;AACxBU,QAAAA,eAAe,EAAET;AAClB,OAAA,GACD;AACEQ,QAAAA,QAAQ,EAAEE,SAAS;AACnBD,QAAAA,eAAe,EAAEC;OAClB,CAAC;AACNC,MAAAA,OAAO,EAAEV,eAAe;AACxBW,MAAAA,QAAQ,EAAEf;KACX,CACF,GACD,EAAE;AAER,IAAA,OAAOQ,KAAK;AACd,EAAA,CAAC,EAAE,CAACP,eAAe,EAAEC,cAAc,EAAEC,qBAAqB,EAAEC,eAAe,EAAEJ,cAAc,CAAC,CAAC;AAE7F,EAAA,oBACEgB,KAAA,CAAAC,aAAA,CAACC,sBAAK,EAAA;IACJC,SAAS,EAAEC,EAAE,CAACC,qBAAM,CAACC,MAAM,EAAEzB,cAAc,CAAC;IAC5C0B,eAAe,EAAEF,qBAAM,CAACG,YAAY;IACpCC,aAAa,EAAEJ,qBAAM,CAACK,UAAU;IAChCC,gBAAgB,EAAEN,qBAAM,CAACO,kBAAkB;IAC3CC,eAAe,EAAER,qBAAM,CAACS,YAAY;AACpCxB,IAAAA,OAAO,EAAEA,OAAO;AAChByB,IAAAA,KAAK,EAAEhC,WAAW;AAClBiC,IAAAA,eAAe,EAAE,KAAK;IAAA,GAClB3B;GAAI,EAEPP,YAAY,CACP;AAEZ;;;;;"}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/components/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,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,MAAM,KAAK,GACT,cAAc,IAAI,eAAe;YAC/B,CAAC,CAAC;gBACE;oBACE,SAAS,EAAE,CAAC,eAAe;oBAC3B,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;oBAChD,GAAG,CAAC,cAAc,IAAI,qBAAqB;wBACzC,CAAC,CAAC;4BACE,QAAQ,EAAE,cAAc;4BACxB,eAAe,EAAE,qBAAqB;yBACvC;wBACH,CAAC,CAAC;4BACE,QAAQ,EAAE,SAAS;4BACnB,eAAe,EAAE,SAAS;yBAC3B,CAAC;oBACN,OAAO,EAAE,eAAe;oBACxB,QAAQ,EAAE,cAAc;iBACzB;aACF;YACH,CAAC,CAAC,EAAE,CAAA;QAER,OAAO,KAAK,CAAA;IACd,CAAC,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,cAAc,CAAC,CAAC,CAAA;IAE7F,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/components/Dialog.module.scss

@@ -0,0 +1,62 @@
+@use '../../styles/constants' as c;
+
+.dialog {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  // Note: Unset properties set by Modal
+  min-width: 0;
+  max-width: none;
+  min-height: c.$dialogMinHeight;
+  max-height: none;
+  width: c.$dialogWidth;
+  padding-bottom: 0;
+
+  .dialogBody {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    text-align: center;
+
+    .dialogHeader {
+      margin-right: 0;
+      justify-content: center;
+    }
+
+    .dialogConsequences {
+      flex: 1 1 auto;
+    }
+
+    .dialogFooter {
+      display: flex;
+      margin: (c.$grid * 5) (c.$grid * -5) 0 (c.$grid * -5);
+
+      & > button {
+        flex: 1 1 auto;
+        margin: 0 !important;
+        max-width: none;
+
+        // Note: Unset border-radius for the buttons
+        border-radius: 0;
+      }
+
+      // Note: In case there is only one button (Cancel)
+      & > button:only-of-type {
+        border-bottom-left-radius: c.$borderRadius;
+        border-bottom-right-radius: c.$borderRadius;
+      }
+
+      // Note: In case there are 2 buttons
+      & > button:not(:only-of-type) {
+        &:nth-of-type(1) {
+          border-bottom-left-radius: c.$borderRadius;
+        }
+
+        &:nth-of-type(2) {
+          border-bottom-right-radius: c.$borderRadius;
+        }
+      }
+    }
+  }
+}

package/lib/components/EmptyState.js

@@ -1,13 +1,10 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var reactFeather = require('react-feather');
-var components_Button = require('./Button.js');
-var components_Link = require('./Link.js');
-var components_Icon = require('./Icon.js');
-var EmptyState_module = require('./EmptyState.module.scss.js');
-
+import React from 'react';
+import cn from 'classnames';
+import { ChevronRight } from 'react-feather';
+import { Button } from './Button';
+import { Link } from './Link';
+import { Icon } from './Icon';
+import styles from './EmptyState.module.scss';
 /**
  * ### 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.
@@ -19,60 +16,17 @@ var EmptyState_module = require('./EmptyState.module.scss.js');
  * - 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.
  */
-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 /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'empty-state-container',
-    className: cn(EmptyState_module.default.container, {
-      [EmptyState_module.default.horizontal]: direction === 'horizontal',
-      [EmptyState_module.default.large]: size === 'large'
-    }, className)
-  }, /*#__PURE__*/React.createElement(components_Icon.Icon, {
-    "data-test": "empty-state-icon",
-    className: EmptyState_module.default.icon,
-    icon: icon,
-    ariaLabel: iconLabel,
-    size: iconSize
-  }), /*#__PURE__*/React.createElement("div", {
-    className: EmptyState_module.default.content
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-test": "empty-state-title",
-    className: EmptyState_module.default.title
-  }, title), description && (/*#__PURE__*/React.createElement("p", {
-    "data-test": "empty-state-description",
-    className: EmptyState_module.default.description
-  }, description)), action ? direction === 'horizontal' && actionHref !== undefined ? (/*#__PURE__*/React.createElement(components_Link.Link, {
-    "data-test": "empty-state-link",
-    className: EmptyState_module.default.action,
-    icon: reactFeather.ChevronRight,
-    ariaLabel: "Icon Chevron Right",
-    href: actionHref,
-    target: actionTarget,
-    rel: actionRel,
-    size: "small"
-  }, action)) : (/*#__PURE__*/React.createElement(components_Button.Button, {
-    "data-test": "empty-state-button",
-    className: EmptyState_module.default.action,
-    onClick: actionOnClick
-  }, action)) : null));
+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": dataTest !== null && dataTest !== void 0 ? dataTest : 'empty-state-container', className: cn(styles.container, {
+            [styles.horizontal]: direction === 'horizontal',
+            [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("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)));
 };
-
-exports.EmptyState = EmptyState;
-//# sourceMappingURL=EmptyState.js.map
+//# sourceMappingURL=EmptyState.js.map

package/lib/components/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../src/components/EmptyState.tsx"],"sourcesContent":[null],"names":["EmptyState","dataTest","direction","size","title","description","icon","iconLabel","className","restWActionProps","action","actionHref","actionOnClick","actionTarget","actionRel","iconSize","React","createElement","cn","styles","container","horizontal","large","Icon","ariaLabel","content","undefined","Link","ChevronRight","href","target","rel","Button","onClick"],"mappings":";;;;;;;;;;AAwDA;;;;;;;;;;AAUG;AACI,MAAMA,UAAU,GAAwBA,CAAC;AAC9C,EAAA,WAAW,EAAEC,QAAQ;AACrBC,EAAAA,SAAS,GAAG,UAAU;AACtBC,EAAAA,IAAI,GAAG,QAAQ;EACfC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,SAAS;EACTC,SAAS;EACT,GAAGC;AAAgB,CACpB,KAAI;EACH,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC,aAAa;IAAEC,YAAY;AAAEC,IAAAA;AAAS,GAAE,GAAGL,gBAAgB;AAEvF,EAAA,MAAMM,QAAQ,GAAGb,SAAS,KAAK,UAAU,IAAIC,IAAI,KAAK,OAAO,GAAG,QAAQ,GAAG,OAAO;AAElF,EAAA,oBACEa,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAA,IAAA,WAAA,EACahB,QAAQ,KAAA,IAAA,IAARA,QAAQ,cAARA,QAAQ,GAAI,uBAAuB;AAC9CO,IAAAA,SAAS,EAAEU,EAAE,CACXC,yBAAM,CAACC,SAAS,EAChB;AACE,MAAA,CAACD,yBAAM,CAACE,UAAU,GAAGnB,SAAS,KAAK,YAAY;AAC/C,MAAA,CAACiB,yBAAM,CAACG,KAAK,GAAGnB,IAAI,KAAK;AAC1B,KAAA,EACDK,SAAS;AACV,GAAA,eAEDQ,KAAA,CAAAC,aAAA,CAACM,oBAAI;iBAAW,kBAAkB;IAACf,SAAS,EAAEW,yBAAM,CAACb,IAAI;AAAEA,IAAAA,IAAI,EAAEA,IAAI;AAAEkB,IAAAA,SAAS,EAAEjB,SAAS;AAAEJ,IAAAA,IAAI,EAAEY;AAAQ,GAAA,CAAI,eAC/GC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKT,SAAS,EAAEW,yBAAM,CAACM;AAAO,GAAA,eAC5BT,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAA,IAAA,WAAA,EAAe,mBAAmB;IAACT,SAAS,EAAEW,yBAAM,CAACf;GAAK,EACvDA,KAAK,CACF,EACLC,WAAW,kBACVW,KAAA,CAAAC,aAAA,CAAA,GAAA,EAAA;AAAA,IAAA,WAAA,EAAa,yBAAyB;IAACT,SAAS,EAAEW,yBAAM,CAACd;GAAW,EACjEA,WAAW,CACV,CACL,EAEAK,MAAM,GACLR,SAAS,KAAK,YAAY,IAAIS,UAAU,KAAKe,SAAS,iBACpDV,KAAA,CAAAC,aAAA,CAACU,oBAAI,EAAA;AAAA,IAAA,WAAA,EACO,kBAAkB;IAC5BnB,SAAS,EAAEW,yBAAM,CAACT,MAAM;AACxBJ,IAAAA,IAAI,EAAEsB,yBAAY;AAClBJ,IAAAA,SAAS,EAAC,oBAAoB;AAC9BK,IAAAA,IAAI,EAAElB,UAAU;AAChBmB,IAAAA,MAAM,EAAEjB,YAAY;AACpBkB,IAAAA,GAAG,EAAEjB,SAAS;AACdX,IAAAA,IAAI,EAAC;KAEJO,MAAM,CACF,kBAEPM,oBAACgB,wBAAM,EAAA;AAAA,IAAA,WAAA,EAAW,oBAAoB;IAACxB,SAAS,EAAEW,yBAAM,CAACT,MAAM;AAAEuB,IAAAA,OAAO,EAAErB;KACvEF,MAAM,CACA,CACV,GACC,IAAI,CACJ,CACF;AAEV;;;;"}
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,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;AAGxC,OAAO,MAAM,MAAM,0BAA0B,CAAA;AA+C7C;;;;;;;;;;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;YAEA,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/components/EmptyState.module.scss

@@ -0,0 +1,87 @@
+@use '../../styles/constants' as c;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+
+  .content {
+    .title {
+      margin: c.$grid * 4.5 0 0 0;
+
+      @include c.typographyBodyNormal('bold' !important);
+    }
+
+    .description {
+      color: c.$colorTextSecondary;
+      margin: c.$grid 0 0 0;
+
+      @include c.typographyBodySmall;
+    }
+
+    .action {
+      flex: 1;
+      min-width: c.$emptyStateButtonMinWidthNormal;
+      margin-top: c.$grid * 5;
+    }
+  }
+
+  // Size
+  &.large {
+    .content {
+      .title {
+        margin-top: c.$grid * 5.5;
+      }
+
+      .description {
+        margin-top: c.$grid * 2;
+
+        @include c.typographyBodyNormal;
+      }
+
+      .action {
+        min-width: c.$emptyStateButtonMinWidthLarge;
+        margin-top: c.$grid * 6;
+      }
+    }
+  }
+
+  // Direction
+  &.horizontal {
+    flex: 1;
+    flex-direction: row;
+    text-align: start;
+
+    .icon {
+      flex: 0 0 auto;
+      align-self: flex-start;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      margin-left: c.$grid * 2;
+
+      .title {
+        margin: 0;
+
+        @include c.typographyBodyNormal('bold' !important);
+      }
+
+      .description {
+        margin-top: c.$grid;
+
+        @include c.typographyBodySmall;
+      }
+
+      .action {
+        align-self: flex-start;
+        min-width: auto;
+        margin: c.$grid 0 0 0;
+      }
+    }
+  }
+}

package/lib/components/Error.js

@@ -1,29 +1,8 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var components_TruncatedText = require('./TruncatedText.js');
-var Error_module = require('./Error.module.scss.js');
-
-const errorId = inputId => `${inputId}-error`;
+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 */
-const Error = ({
-  error,
-  className,
-  inputId,
-  truncated,
-  tooltipPlacement,
-  'data-test': dataTest = 'error'
-}) => (/*#__PURE__*/React.createElement("div", {
-  role: "alert",
-  id: errorId(inputId),
-  "data-test": dataTest,
-  className: cn(Error_module.default.container, error && Error_module.default.hasError, className)
-}, truncated ? /*#__PURE__*/React.createElement(components_TruncatedText.TruncatedText, {
-  text: error || '',
-  tooltipPlacement: tooltipPlacement
-}) : error));
-
-exports.Error = Error;
-exports.errorId = errorId;
-//# sourceMappingURL=Error.js.map
+export const Error = ({ error, className, inputId, truncated, tooltipPlacement, 'data-test': dataTest = 'error' }) => (React.createElement("div", { role: "alert", id: errorId(inputId), "data-test": dataTest, className: cn(styles.container, error && styles.hasError, className) }, truncated ? React.createElement(TruncatedText, { text: error || '', tooltipPlacement: tooltipPlacement }) : error));
+//# sourceMappingURL=Error.js.map

package/lib/components/Error.js.map

@@ -1 +1 @@
-{"version":3,"file":"Error.js","sources":["../../src/components/Error.tsx"],"sourcesContent":[null],"names":["errorId","inputId","Error","error","className","truncated","tooltipPlacement","dataTest","React","role","id","cn","styles","container","hasError","createElement","TruncatedText","text"],"mappings":";;;;;;;MASaA,OAAO,GAAIC,OAAe,IAAa,CAAA,EAAGA,OAAO,CAAA,MAAA;AAU9D;AACO,MAAMC,KAAK,GAAmBA,CAAC;EAAEC,KAAK;EAAEC,SAAS;EAAEH,OAAO;EAAEI,SAAS;EAAEC,gBAAgB;EAAE,WAAW,EAAEC,QAAQ,GAAG;CAAS,mBAC/HC;AAAKC,EAAAA,IAAI,EAAC,OAAO;AAACC,EAAAA,EAAE,EAAEV,OAAO,CAACC,OAAO,CAAC;eAAaM,QAAQ;AAAEH,EAAAA,SAAS,EAAEO,EAAE,CAACC,oBAAM,CAACC,SAAS,EAAEV,KAAK,IAAIS,oBAAM,CAACE,QAAQ,EAAEV,SAAS;AAAC,CAAA,EAC9HC,SAAS,gBAAGG,KAAA,CAAAO,aAAA,CAACC,sCAAa;EAACC,IAAI,EAAEd,KAAK,IAAI,EAAE;AAAEG,EAAAA,gBAAgB,EAAEA;EAAoB,GAAGH,KAAK,CACzF;;;;;"}
+{"version":3,"file":"Error.js","sourceRoot":"","sources":["../../src/components/Error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,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,WAAW,EAAE,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC,CACpI,6BAAK,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,OAAO,CAAC,OAAO,CAAC,eAAa,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,IAAI,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,IAC9H,SAAS,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,IAAI,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,GAAI,CAAC,CAAC,CAAC,KAAK,CACzF,CACP,CAAA"}

package/lib/components/Error.module.scss

@@ -0,0 +1,12 @@
+@use '../../styles/constants' as c;
+
+.container {
+  @include c.typographyBodySmall;
+
+  color: c.$colorError;
+  display: none;
+
+  &.hasError {
+    display: block;
+  }
+}

package/lib/components/FieldHeader.js

@@ -1,44 +1,15 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var components_Label = require('./Label.js');
-var components_Help = require('./Help.js');
-var FieldHeader_module = require('./FieldHeader.module.scss.js');
-
-const FieldHeader = props => {
-  const {
-    label,
-    id,
-    variant,
-    helperText,
-    size = 'medium',
-    labelClassName,
-    'data-test': dataTest,
-    showAriaLabel,
-    helperTextTooltipWordBreak
-  } = props;
-  if (showAriaLabel) {
-    return null;
-  }
-  return label ? (/*#__PURE__*/React.createElement("div", {
-    className: FieldHeader_module.default.root
-  }, /*#__PURE__*/React.createElement(components_Label.Label, {
-    id: id,
-    label: label,
-    variant: variant,
-    "data-test": dataTest ? `${dataTest}-label` : undefined,
-    className: cn(FieldHeader_module.default.label, {
-      [FieldHeader_module.default.small]: size === 'small'
-    }, labelClassName)
-  }), helperText && (/*#__PURE__*/React.createElement(components_Help.Help, {
-    parentId: id,
-    helperText: helperText,
-    className: FieldHeader_module.default.helperText,
-    tooltipWordBreak: helperTextTooltipWordBreak,
-    "data-test": dataTest ? `${dataTest}-helperText` : undefined
-  })))) : null;
+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, variant, helperText, size = 'medium', labelClassName, 'data-test': dataTest, showAriaLabel, helperTextTooltipWordBreak, } = props;
+    if (showAriaLabel) {
+        return null;
+    }
+    return label ? (React.createElement("div", { className: styles.root },
+        React.createElement(Label, { id: id, label: label, variant: variant, "data-test": dataTest ? `${dataTest}-label` : undefined, className: cn(styles.label, { [styles.small]: size === 'small' }, labelClassName) }),
+        helperText && (React.createElement(Help, { parentId: id, helperText: helperText, className: styles.helperText, tooltipWordBreak: helperTextTooltipWordBreak, "data-test": dataTest ? `${dataTest}-helperText` : undefined })))) : null;
 };
-
-exports.FieldHeader = FieldHeader;
-//# sourceMappingURL=FieldHeader.js.map
+//# sourceMappingURL=FieldHeader.js.map

package/lib/components/FieldHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldHeader.js","sources":["../../src/components/FieldHeader.tsx"],"sourcesContent":[null],"names":["FieldHeader","props","label","id","variant","helperText","size","labelClassName","dataTest","showAriaLabel","helperTextTooltipWordBreak","React","className","styles","root","createElement","Label","undefined","cn","small","Help","parentId","tooltipWordBreak"],"mappings":";;;;;;;;AA+BO,MAAMA,WAAW,GAAIC,KAAuB,IAAI;EACrD,MAAM;IACJC,KAAK;IACLC,EAAE;IACFC,OAAO;IACPC,UAAU;AACVC,IAAAA,IAAI,GAAG,QAAQ;IACfC,cAAc;AACd,IAAA,WAAW,EAAEC,QAAQ;IACrBC,aAAa;AACbC,IAAAA;AAA0B,GAC3B,GAAGT,KAAK;AAET,EAAA,IAAIQ,aAAa,EAAE;AACjB,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,OAAOP,KAAK,iBACVS;IAAKC,SAAS,EAAEC,0BAAM,CAACC;AAAI,GAAA,eAEzBH,KAAA,CAAAI,aAAA,CAACC,sBAAK;AACJb,IAAAA,EAAE,EAAEA,EAAE;AACND,IAAAA,KAAK,EAAEA,KAAK;AACZE,IAAAA,OAAO,EAAEA,OAAO;AAAA,IAAA,WAAA,EACLI,QAAQ,GAAG,GAAGA,QAAQ,CAAA,MAAA,CAAQ,GAAGS,SAAS;AACrDL,IAAAA,SAAS,EAAEM,EAAE,CAACL,0BAAM,CAACX,KAAK,EAAE;AAAE,MAAA,CAACW,0BAAM,CAACM,KAAK,GAAGb,IAAI,KAAK;AAAO,KAAE,EAAEC,cAAc;GAAC,CACjF,EACDF,UAAU,kBACTM,KAAA,CAAAI,aAAA,CAACK,oBAAI,EAAA;AACHC,IAAAA,QAAQ,EAAElB,EAAE;AACZE,IAAAA,UAAU,EAAEA,UAAU;IACtBO,SAAS,EAAEC,0BAAM,CAACR,UAAU;AAC5BiB,IAAAA,gBAAgB,EAAEZ,0BAA0B;AAAA,IAAA,WAAA,EACjCF,QAAQ,GAAG,CAAA,EAAGA,QAAQ,aAAa,GAAGS;AAAS,GAAA,CAC1D,CACH,CACG,IACJ,IAAI;AACV;;;;"}
+{"version":3,"file":"FieldHeader.js","sourceRoot":"","sources":["../../src/components/FieldHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,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;AAwB9C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACrD,MAAM,EACJ,KAAK,EACL,EAAE,EACF,OAAO,EACP,UAAU,EACV,IAAI,GAAG,QAAQ,EACf,cAAc,EACd,WAAW,EAAE,QAAQ,EACrB,aAAa,EACb,0BAA0B,GAC3B,GAAG,KAAK,CAAA;IAET,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QAEzB,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,eACL,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;QACD,UAAU,IAAI,CACb,oBAAC,IAAI,IACH,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,gBAAgB,EAAE,0BAA0B,eACjC,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,aAAa,CAAC,CAAC,CAAC,SAAS,GAC1D,CACH,CACG,CACP,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}

package/lib/components/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/components/Help.js

@@ -1,43 +1,14 @@
-'use strict';
-
-var React = require('react');
-var reactFeather = require('react-feather');
-var cn = require('classnames');
-var components_Icon = require('./Icon.js');
-var components_Tooltip = require('./Tooltip.js');
-var export_module = require('../styles/constants/export.module.scss.js');
-var Help_module = require('./Help.module.scss.js');
-
-const helpTooltipId = inputId => `${inputId}-help`;
-const Help = ({
-  helperText,
-  placement = 'top',
-  parentId,
-  className,
-  tooltipWordBreak,
-  size = 'small',
-  'data-test': dataTest = 'help'
-}) => {
-  const tooltipId = helpTooltipId(parentId);
-  return /*#__PURE__*/React.createElement(components_Tooltip.Tooltip, {
-    placement: placement,
-    content: helperText,
-    id: tooltipId,
-    wordBreak: tooltipWordBreak
-  }, ref => (/*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    "data-test": dataTest,
-    className: cn(Help_module.default.container, className)
-  }, /*#__PURE__*/React.createElement(components_Icon.Icon, {
-    ariaLabel: "Help",
-    "aria-describedby": tooltipId,
-    color: export_module.default.colorPrimary,
-    icon: reactFeather.HelpCircle,
-    className: Help_module.default.icon,
-    size: size
-  }))));
+import React from 'react';
+import { HelpCircle } from 'react-feather';
+import cn from 'classnames';
+import { Icon } from './Icon';
+import { Tooltip } from './Tooltip';
+import styleConsts from '../../styles/constants/export.module.scss';
+import styles from './Help.module.scss';
+export const helpTooltipId = (inputId) => `${inputId}-help`;
+export const Help = ({ helperText, placement = 'top', parentId, className, tooltipWordBreak, size = 'small', 'data-test': dataTest = 'help', }) => {
+    const tooltipId = helpTooltipId(parentId);
+    return (React.createElement(Tooltip, { placement: placement, content: helperText, id: tooltipId, wordBreak: tooltipWordBreak }, (ref) => (React.createElement("div", { ref: ref, "data-test": dataTest, className: cn(styles.container, className) },
+        React.createElement(Icon, { ariaLabel: "Help", "aria-describedby": tooltipId, color: styleConsts.colorPrimary, icon: HelpCircle, className: styles.icon, size: size })))));
 };
-
-exports.Help = Help;
-exports.helpTooltipId = helpTooltipId;
-//# sourceMappingURL=Help.js.map
+//# sourceMappingURL=Help.js.map

package/lib/components/Help.js.map

@@ -1 +1 @@
-{"version":3,"file":"Help.js","sources":["../../src/components/Help.tsx"],"sourcesContent":[null],"names":["helpTooltipId","inputId","Help","helperText","placement","parentId","className","tooltipWordBreak","size","dataTest","tooltipId","React","createElement","Tooltip","content","id","wordBreak","ref","cn","styles","container","Icon","ariaLabel","color","styleConsts","colorPrimary","icon","HelpCircle"],"mappings":";;;;;;;;;;MAWaA,aAAa,GAAIC,OAAe,IAAa,CAAA,EAAGA,OAAO,CAAA,KAAA;AAW7D,MAAMC,IAAI,GAAkBA,CAAC;EAClCC,UAAU;AACVC,EAAAA,SAAS,GAAG,KAAK;EACjBC,QAAQ;EACRC,SAAS;EACTC,gBAAgB;AAChBC,EAAAA,IAAI,GAAG,OAAO;EACd,WAAW,EAAEC,QAAQ,GAAG;AAAM,CAC/B,KAAI;AACH,EAAA,MAAMC,SAAS,GAAGV,aAAa,CAACK,QAAQ,CAAC;AAEzC,EAAA,oBACEM,KAAA,CAAAC,aAAA,CAACC,0BAAO;AAACT,IAAAA,SAAS,EAAEA,SAAS;AAAEU,IAAAA,OAAO,EAAEX,UAAU;AAAEY,IAAAA,EAAE,EAAEL,SAAS;AAAEM,IAAAA,SAAS,EAAET;GAAgB,EAC1FU,GAAG,kBACHN;AAAKM,IAAAA,GAAG,EAAEA,GAAG;AAAA,IAAA,WAAA,EAAaR,QAAQ;AAAEH,IAAAA,SAAS,EAAEY,EAAE,CAACC,mBAAM,CAACC,SAAS,EAAEd,SAAS;AAAC,GAAA,eAC5EK,KAAA,CAAAC,aAAA,CAACS,oBAAI,EAAA;AACHC,IAAAA,SAAS,EAAC,MAAM;AAAA,IAAA,kBAAA,EACEZ,SAAS;IAC3Ba,KAAK,EAAEC,qBAAW,CAACC,YAAY;AAC/BC,IAAAA,IAAI,EAAEC,uBAAU;IAChBrB,SAAS,EAAEa,mBAAM,CAACO,IAAI;AACtBlB,IAAAA,IAAI,EAAEA;GAAI,CACV,CACE,CACP,CACO;AAEd;;;;;"}
+{"version":3,"file":"Help.js","sourceRoot":"","sources":["../../src/components/Help.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAY,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAGjD,OAAO,WAAW,MAAM,2CAA2C,CAAA;AACnE,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,OAAO,CAAA;AAW3E,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,IAAI,GAAG,OAAO,EACd,WAAW,EAAE,QAAQ,GAAG,MAAM,GAC/B,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAA;IAEzC,OAAO,CACL,oBAAC,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,IAC3F,CAAC,GAAG,EAAE,EAAE,CAAC,CACR,6BAAK,GAAG,EAAE,GAAG,eAAa,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC5E,oBAAC,IAAI,IACH,SAAS,EAAC,MAAM,sBACE,SAAS,EAC3B,KAAK,EAAE,WAAW,CAAC,YAAY,EAC/B,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,IAAI,GACV,CACE,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Help.module.scss

@@ -0,0 +1,9 @@
+@use '../../styles/constants' as c;
+
+.container {
+  display: inline-flex;
+  vertical-align: middle;
+  line-height: 1;
+  padding-left: c.$grid;
+  padding-right: c.$grid;
+}