@hazelcast/ui 4.0.1-canary.5 → 4.0.1-canary.6

package/lib/components/Button.d.ts

@@ -51,6 +51,7 @@ export type ButtonCommonProps = {
     tooltip?: string;
     active?: boolean;
     truncate?: boolean;
+    fullWidth?: boolean;
 } & (ButtonDisabledProps | ButtonNotDisabledProps) & Pick<HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, 'className' | 'onClick' | 'tabIndex' | 'style'>;
 export type ButtonTypeAnchorProps = {
     component: 'a';

package/lib/components/Button.js

@@ -22,7 +22,7 @@ const sizeClass = {
     small: styles.sizeSmall,
     regular: styles.sizeRegular,
 };
-export const Button = forwardRef(({ component: Component = 'button', className, bodyClassName, outline = 'outline', children, disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, iconLeft, iconLeftAriaLabel, iconLeftColor, iconLeftClassName, iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopener', target, type = 'button', loading, variant = 'contained', color = 'primary', size = 'regular', tooltip, active, truncate = true, ...rest }, ref) => {
+export const Button = forwardRef(({ component: Component = 'button', className, bodyClassName, outline = 'outline', children, disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, iconLeft, iconLeftAriaLabel, iconLeftColor, iconLeftClassName, iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopener', target, type = 'button', loading, variant = 'contained', color = 'primary', size = 'regular', tooltip, active, truncate = true, fullWidth, ...rest }, ref) => {
     const tooltipId = useUID();
     const iconSize = size === 'small' ? 'small' : 'smallMedium';
     const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
@@ -31,6 +31,7 @@ export const Button = forwardRef(({ component: Component = 'button', className,
         React.createElement(Component, { "data-test": "button", className: cn(styles.button, variantClass[variant], colorClass[color], sizeClass[size], {
                 [styles.active]: active,
                 [styles.inset]: outline === 'inset',
+                [styles.fullWidth]: fullWidth,
             }, className), "aria-describedby": disabled ? tooltipId : undefined, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined, ref: ref, ...rest },
             React.createElement("span", { className: cn(styles.body, bodyClassName) },
                 loading && !loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconLeft, size: iconSize }),

package/lib/components/Button.js.map

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

package/lib/components/Button.module.css

@@ -47,6 +47,12 @@
   --button-padding-x: 16px;
 }
 
+.fullWidth.fullWidth {
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+}
+
 .button:hover,
 .button.hover {
   background: var(--button-bg-hover);

package/lib/components/Checkbox.js

@@ -4,7 +4,7 @@ import { useUID } from 'react-uid';
 import classNames from 'classnames';
 import { Error, errorId } from './Error';
 import { Help, helpTooltipId } from './Help';
-import styles from './Checkbox.module.scss';
+import styles from './Checkbox.module.css';
 import { TruncatedText } from './TruncatedText';
 /**
  * ### Purpose

package/lib/components/Checkbox.js.map

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

package/lib/components/Checkbox.module.css

@@ -0,0 +1,97 @@
+.wrapper {
+  --checkbox-size: calc(var(--hive-grid) * 4);
+  --checkbox-radius: calc(var(--hive-grid) * 1);
+  --checkbox-padding: 1px;
+  --checkbox-transition-duration: 120ms;
+  --checkbox-shadow: 0 1px 2px oklch(0 0 0 / 0.05);
+  --checkbox-shadow-checked: 0 1px 1px oklch(0 0 0 / 0.05);
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: calc(var(--hive-grid) * 2);
+  cursor: pointer;
+  box-sizing: border-box;
+  color: var(--hive-color-text-v4);
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-body-small);
+  font-weight: var(--hive-font-weight-text-regular);
+  line-height: var(--hive-line-height-body-small);
+}
+
+.wrapper * {
+  box-sizing: border-box;
+}
+
+.wrapper input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.wrapper .checkmark {
+  order: -1;
+  flex-shrink: 0;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  padding: var(--checkbox-padding);
+  border: var(--hive-border-width) solid var(--hive-color-border-v4);
+  border-radius: var(--checkbox-radius);
+  background-color: var(--hive-color-neutral-white-v4);
+  color: var(--hive-color-neutral-white-v4);
+  box-shadow: var(--checkbox-shadow);
+  transition:
+    background-color var(--checkbox-transition-duration) ease,
+    border-color var(--checkbox-transition-duration) ease,
+    box-shadow var(--checkbox-transition-duration) ease;
+}
+
+.wrapper > input:checked ~ .checkmark,
+.wrapper.indeterminate > input ~ .checkmark {
+  background-color: var(--hive-color-primary-v4);
+  border-color: var(--hive-color-primary-v4);
+  box-shadow: var(--checkbox-shadow-checked);
+}
+
+.wrapper:hover > input:not(:disabled) ~ .checkmark,
+.wrapper.hover > input:not(:disabled) ~ .checkmark {
+  border-color: var(--hive-color-primary-v4);
+}
+
+.wrapper.error > input ~ .checkmark {
+  border-color: var(--hive-color-error-v4);
+}
+
+.wrapper > input:focus-visible ~ .checkmark,
+.wrapper.focus > input ~ .checkmark {
+  border-color: var(--hive-color-primary-v4);
+  box-shadow: 0 0 0 3px oklch(from var(--hive-color-primary-v4) l c h / 0.5);
+}
+
+.wrapper.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.wrapper .name {
+  overflow: hidden;
+}
+
+.wrapper .helperText {
+  margin-left: calc(var(--hive-grid) * 1);
+}
+
+.errorContainer {
+  margin-top: calc(var(--hive-grid) * 0.5);
+  margin-left: calc(var(--hive-grid) * 6);
+}
+
+.withError {
+  margin-bottom: calc(var(--hive-grid) * 2);
+}

package/lib/components/Modal.d.ts

@@ -1,13 +1,23 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactElement, ReactNode, AnchorHTMLAttributes } from 'react';
 import { Props as ReactModalProps } from 'react-modal';
 import { DataTestProp } from '../helpers/types';
 import { ButtonProps, ButtonTypeButtonProps } from './Button';
 import { IconProps } from './Icon';
 export declare const setAppElement: (appElement: string | HTMLElement) => void;
 export type ModalActionProps = ButtonProps<ButtonTypeButtonProps>;
+export type ModalIntent = 'action' | 'confirm' | 'info' | 'danger' | 'success';
+export type ModalHelperLinkProps = {
+    label: ReactNode;
+    href: string;
+    ariaLabel?: string;
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    rel?: AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
+};
 export type ModalProps = {
     actions?: ModalActionProps[];
     hideActions?: boolean;
+    hideHeader?: boolean;
+    hideFooter?: boolean;
     autoFocus?: boolean;
     children?: ReactNode;
     closable?: boolean;
@@ -18,9 +28,16 @@ export type ModalProps = {
     footerClassName?: string;
     overlayClassName?: string;
     className?: string;
+    cancelLabel?: string | ReactElement;
     icon?: IconProps['icon'];
     iconAriaLabel?: IconProps['ariaLabel'];
     onClose: ReactModalProps['onRequestClose'];
-    title: string;
+    title?: string;
+    description?: ReactNode;
+    eyebrow?: ReactNode;
+    intent?: ModalIntent;
+    helperLink?: ModalHelperLinkProps;
+    header?: ReactNode;
+    footer?: ReactNode;
 } & DataTestProp & Exclude<ReactModalProps, 'onRequestClose' | 'shouldFocusAfterRender' | 'shouldReturnFocusAfterClose'>;
 export declare const Modal: FC<ModalProps>;

package/lib/components/Modal.js

@@ -1,41 +1,72 @@
 import React, { useMemo } from 'react';
 import ReactModal from 'react-modal';
 import cn from 'classnames';
-import { X } from 'react-feather';
+import { X, ExternalLink } from 'react-feather';
 import { Button } from './Button';
 import { Icon } from './Icon';
-import { IconButton } from './IconButton';
-import styles from './Modal.module.scss';
+import styles from './Modal.module.css';
 // Direct re-exporting is breaking tests in MC
 // TODO: Investigate why
 export const setAppElement = (appElement) => ReactModal.setAppElement(appElement);
+const intentClass = {
+    action: undefined,
+    confirm: styles.intentConfirm,
+    info: styles.intentInfo,
+    danger: styles.intentDanger,
+    success: styles.intentSuccess,
+};
+const intentActionColor = {
+    action: 'primary',
+    confirm: 'warning',
+    info: 'primary',
+    danger: 'danger',
+    success: 'primary',
+};
 /*
  * ### Purpose
- * Occasionally there's a user-story that's not a part of the main user flow. Such action can be contained in a Modal.
- * Modals can contain components like forms, menus, tables etc.
- * Usually modals are used to drive a complex action. In case there is a simple action (e.g. confirmation), consider using a Dialog.
+ * Modal surfaces a focused, secondary user-story on top of the current page. Use it for
+ * confirmations, short forms, or any flow that should pause the underlying page.
  *
  * ### General Info
- * - Modal always contains a title, icon "X" in the header, content and active buttons in the footer.
- * - No interactions on the underlying page can be performed while a Modal.
- * - Content beneath the modal is covered by a "blanket".
- * - To close the Modal, use "Cancel" button in the footer, "X" button in the header, press "Esc" key or click anywhere on the "blanket".
+ * - Three optional sections — `header`, body (`children`) and `footer` — are independently
+ *   customizable. Omit a section (or pass `hideHeader` / `hideFooter`) to remove it entirely.
+ * - The default header renders structured `title`, `eyebrow`, `description` and `icon` props.
+ *   Pass a `header` ReactNode to fully replace the header section (the close button is preserved).
+ * - The default footer renders `actions` plus an optional `helperLink`. Pass a `footer`
+ *   ReactNode to fully replace it, or `hideActions` / no `helperLink` to drop pieces.
+ * - Underlying page is blocked by an overlay; click overlay or press Esc to close (when `closable`).
  */
-export const Modal = ({ 'data-test': dataTest = 'modal', actions, hideActions = false, autoFocus = true, children, className, closable = true, showCloseButton = true, bodyClassName, headerClassName, contentClassName, footerClassName, icon, iconAriaLabel, onClose, overlayClassName, title, ...rest }) => {
+export const Modal = ({ 'data-test': dataTest = 'modal', actions, hideActions = false, hideHeader = false, hideFooter = false, autoFocus = true, children, className, closable = true, showCloseButton = true, bodyClassName, headerClassName, contentClassName, footerClassName, icon, iconAriaLabel, onClose, overlayClassName, cancelLabel = 'Cancel', title, description, eyebrow, intent = 'action', helperLink, header, footer, ...rest }) => {
+    var _a, _b;
     const shouldAutoFocusCancelButton = useMemo(() => autoFocus && !(actions === null || actions === void 0 ? void 0 : actions.some((action) => action === null || action === void 0 ? void 0 : action.autoFocus)), [autoFocus, actions]);
-    return (React.createElement(ReactModal, { portalClassName: styles.portal, className: cn(styles.modal, className), contentLabel: title, onRequestClose: onClose, overlayClassName: cn(styles.overlay, overlayClassName), shouldCloseOnEsc: closable, shouldCloseOnOverlayClick: closable, shouldFocusAfterRender: false, shouldReturnFocusAfterClose: true, ...rest },
-        React.createElement("div", { className: styles.outline }),
-        React.createElement("div", { className: cn(styles.body, bodyClassName) },
-            React.createElement("div", { "data-test": "modal-header", className: cn(styles.header, headerClassName) },
-                icon && iconAriaLabel && React.createElement(Icon, { "data-test": "modal-header-icon", className: styles.icon, icon: icon, ariaLabel: iconAriaLabel }),
-                React.createElement("h3", { "data-test": "modal-header-title", className: styles.title }, title),
-                closable && showCloseButton && (
-                // Note: Mostly a Dialog use-case. We want it to be closable, but we don't want to show an X button in the corner.
-                React.createElement("div", { className: styles.close },
-                    React.createElement(IconButton, { "data-test": `${dataTest}-button-close`, variant: "ghost", ariaLabel: "Close icon", icon: X, onClick: onClose })))),
-            React.createElement("div", { "data-test": "modal-content", className: cn(styles.content, contentClassName) }, children),
-            !hideActions && (React.createElement("div", { "data-test": "modal-footer", className: cn(styles.footer, footerClassName) }, actions === null || actions === void 0 ? void 0 :
-                actions.map(({ children, ...actionPropsRest }, key) => (React.createElement(Button, { key: key, "data-test": "modal-button-action", ...actionPropsRest }, children))),
-                React.createElement(Button, { autoFocus: shouldAutoFocusCancelButton, "data-test": "modal-button-cancel", variant: "outlined", color: "secondary", onClick: onClose }, "Cancel"))))));
+    const hasIcon = !!(icon && iconAriaLabel);
+    const hasBody = children !== undefined && children !== null && children !== false;
+    const hasStructuredHeader = !!(title || eyebrow || description || hasIcon);
+    const hasCustomHeader = header !== undefined && header !== null && header !== false;
+    const renderHeader = !hideHeader && (hasCustomHeader || hasStructuredHeader);
+    const hasCustomFooter = footer !== undefined && footer !== null && footer !== false;
+    const hasStructuredFooter = !hideActions || !!helperLink;
+    const renderFooter = !hideFooter && (hasCustomFooter || hasStructuredFooter);
+    const renderClose = closable && showCloseButton;
+    return (React.createElement(ReactModal, { portalClassName: styles.portal, className: cn(styles.modal, intent !== 'action' && intentClass[intent], className), contentLabel: title, onRequestClose: onClose, overlayClassName: cn(styles.overlay, overlayClassName), shouldCloseOnEsc: closable, shouldCloseOnOverlayClick: closable, shouldFocusAfterRender: false, shouldReturnFocusAfterClose: true, ...rest },
+        renderClose && (React.createElement("button", { type: "button", "data-test": `${dataTest}-button-close`, className: styles.close, "aria-label": "Close icon", onClick: (e) => onClose === null || onClose === void 0 ? void 0 : onClose(e) },
+            React.createElement(X, { size: 16, "aria-hidden": true }))),
+        renderHeader &&
+            (hasCustomHeader ? (React.createElement("div", { "data-test": "modal-header", className: headerClassName }, header)) : (React.createElement("div", { "data-test": "modal-header", className: cn(styles.header, headerClassName) },
+                React.createElement("div", { className: styles.headerRow },
+                    hasIcon && (React.createElement("div", { className: styles.iconBox },
+                        React.createElement(Icon, { "data-test": "modal-header-icon", icon: icon, ariaLabel: iconAriaLabel }))),
+                    React.createElement("div", { className: styles.headerText },
+                        eyebrow && (React.createElement("p", { "data-test": "modal-header-eyebrow", className: styles.eyebrow }, eyebrow)),
+                        title && (React.createElement("h3", { "data-test": "modal-header-title", className: styles.title }, title)),
+                        description && (React.createElement("p", { "data-test": "modal-header-description", className: styles.description }, description))))))),
+        hasBody && (React.createElement("div", { "data-test": "modal-content", className: cn(styles.body, bodyClassName, contentClassName) }, children)),
+        renderFooter && (React.createElement("div", { "data-test": "modal-footer", className: cn(styles.footer, footerClassName) }, hasCustomFooter ? (footer) : (React.createElement(React.Fragment, null,
+            helperLink && (React.createElement("a", { "data-test": "modal-helper-link", className: styles.helperLink, href: helperLink.href, target: (_a = helperLink.target) !== null && _a !== void 0 ? _a : '_blank', rel: (_b = helperLink.rel) !== null && _b !== void 0 ? _b : 'noopener noreferrer', "aria-label": helperLink.ariaLabel },
+                helperLink.label,
+                React.createElement(ExternalLink, { size: 12, "aria-hidden": true }))),
+            !hideActions && (React.createElement("div", { className: styles.footerActions },
+                React.createElement(Button, { autoFocus: shouldAutoFocusCancelButton, "data-test": "modal-button-cancel", variant: "ghost", color: "secondary", size: "small", onClick: (e) => onClose === null || onClose === void 0 ? void 0 : onClose(e) }, cancelLabel), actions === null || actions === void 0 ? void 0 :
+                actions.map(({ children: actionChildren, size = 'small', color, ...actionPropsRest }, key) => (React.createElement(Button, { key: key, "data-test": "modal-button-action", size: size, color: color !== null && color !== void 0 ? color : intentActionColor[intent], ...actionPropsRest }, actionChildren)))))))))));
 };
 //# sourceMappingURL=Modal.js.map

package/lib/components/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,OAAO,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,UAAwC,MAAM,aAAa,CAAA;AAClE,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAGjC,OAAO,EAAE,MAAM,EAAsC,MAAM,UAAU,CAAA;AACrE,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,MAAM,MAAM,qBAAqB,CAAA;AAExC,8CAA8C;AAC9C,wBAAwB;AACxB,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,UAAgC,EAAE,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;AA0BvG;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,WAAW,EAAE,QAAQ,GAAG,OAAO,EAC/B,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,IAAI,EAChB,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,eAAe,GAAG,IAAI,EACtB,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,IAAI,EACJ,aAAa,EACb,OAAO,EACP,gBAAgB,EAChB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,2BAA2B,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS,CAAC,CAAA,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAA;IAEnI,OAAO,CACL,oBAAC,UAAU,IACT,eAAe,EAAE,MAAM,CAAC,MAAM,EAC9B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EACtC,YAAY,EAAE,KAAK,EACnB,cAAc,EAAE,OAAO,EACvB,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,EACtD,gBAAgB,EAAE,QAAQ,EAC1B,yBAAyB,EAAE,QAAQ,EACnC,sBAAsB,EAAE,KAAK,EAC7B,2BAA2B,WACvB,IAAI;QAER,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI;QAClC,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC;YAC5C,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC;gBACxE,IAAI,IAAI,aAAa,IAAI,oBAAC,IAAI,iBAAW,mBAAmB,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,GAAI;gBAC9H,yCAAc,oBAAoB,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,IACvD,KAAK,CACH;gBACJ,QAAQ,IAAI,eAAe,IAAI;gBAC9B,kHAAkH;gBAClH,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK;oBAC1B,oBAAC,UAAU,iBAAY,GAAG,QAAQ,eAAe,EAAE,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,GAAI,CACnH,CACP,CACG;YACN,0CAAe,eAAe,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,IAC3E,QAAQ,CACL;YACL,CAAC,WAAW,IAAI,CACf,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,IACxE,OAAO,aAAP,OAAO;gBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvD,oBAAC,MAAM,IAAC,GAAG,EAAE,GAAG,eAAY,qBAAqB,KAAK,eAAe,IAClE,QAAQ,CACF,CACV,CAAC;gBACF,oBAAC,MAAM,IACL,SAAS,EAAE,2BAA2B,eAC5B,qBAAqB,EAC/B,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,OAAO,aAGT,CACL,CACP,CACG,CACK,CACd,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"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"}

package/lib/components/Modal.module.css

@@ -0,0 +1,222 @@
+.portal {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.portal * {
+  box-sizing: border-box;
+}
+
+.overlay {
+  width: 100%;
+  height: 100%;
+  background-color: oklch(0 0 0 / 0.5);
+  pointer-events: all;
+}
+
+.modal {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--hive-modal-width);
+  min-width: var(--hive-modal-min-width);
+  max-width: var(--hive-modal-max-width);
+  max-height: var(--hive-modal-max-height);
+  background-color: var(--hive-color-neutral-lighter-v4);
+  border: var(--hive-border-width) solid var(--hive-color-border-v4);
+  border-radius: var(--hive-border-radius);
+  box-shadow:
+    0 10px 15px -3px oklch(0 0 0 / 0.1),
+    0 4px 6px -4px oklch(0 0 0 / 0.1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 1000;
+}
+
+.modal:focus,
+.modal.focus {
+  outline: transparent solid var(--hive-outline-width);
+  box-shadow:
+    0 10px 15px -3px oklch(0 0 0 / 0.1),
+    0 4px 6px -4px oklch(0 0 0 / 0.1),
+    0 0 0 3px oklch(from var(--hive-color-primary-v4) l c h / 0.5);
+}
+
+.header {
+  position: relative;
+  padding: calc(var(--hive-grid) * 4) calc(var(--hive-grid) * 6);
+  border-bottom: var(--hive-border-width) solid var(--hive-color-border-v4);
+  background-color: color-mix(in oklab, var(--hive-color-primary-v4) 20%, var(--hive-color-neutral-lighter-v4));
+}
+
+.modal.intentConfirm .header {
+  background-color: color-mix(in oklab, var(--hive-color-warning-v4) 20%, var(--hive-color-neutral-lighter-v4));
+}
+
+.modal.intentInfo .header {
+  background-color: color-mix(in oklab, var(--hive-color-info-v4) 20%, var(--hive-color-neutral-lighter-v4));
+}
+
+.modal.intentDanger .header {
+  background-color: color-mix(in oklab, var(--hive-color-error-v4) 20%, var(--hive-color-neutral-lighter-v4));
+}
+
+.modal.intentSuccess .header {
+  background-color: color-mix(in oklab, var(--hive-color-success-v4) 20%, var(--hive-color-neutral-lighter-v4));
+}
+
+.headerRow {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: calc(var(--hive-grid) * 3);
+  padding-right: calc(var(--hive-grid) * 8);
+}
+
+.iconBox {
+  flex-shrink: 0;
+  width: calc(var(--hive-grid) * 10);
+  height: calc(var(--hive-grid) * 10);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--hive-color-neutral-white-v4);
+  border: var(--hive-border-width) solid var(--hive-color-border-v4);
+  border-radius: var(--hive-border-radius);
+  color: var(--hive-color-primary-v4);
+}
+
+.modal.intentConfirm .iconBox {
+  color: var(--hive-color-warning-v4);
+}
+
+.modal.intentInfo .iconBox {
+  color: var(--hive-color-info-v4);
+}
+
+.modal.intentDanger .iconBox {
+  color: var(--hive-color-error-v4);
+}
+
+.modal.intentSuccess .iconBox {
+  color: var(--hive-color-success-v4);
+}
+
+.headerText {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--hive-grid) * 1);
+}
+
+.eyebrow {
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-body-tiny);
+  line-height: var(--hive-line-height-body-tiny);
+  font-weight: var(--hive-font-weight-text-regular);
+  color: var(--hive-color-text-secondary-v4);
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.title {
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-h3);
+  line-height: var(--hive-line-height-h3);
+  font-weight: var(--hive-font-weight-text-bold);
+  color: var(--hive-color-text-v4);
+  margin: 0;
+  word-break: break-word;
+}
+
+.description {
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-body-smaller);
+  line-height: var(--hive-line-height-body-smaller);
+  color: var(--hive-color-text-secondary-v4);
+  margin: 0;
+  margin-top: calc(var(--hive-grid) * 2);
+}
+
+.close {
+  position: absolute;
+  top: calc(var(--hive-grid) * 4);
+  right: calc(var(--hive-grid) * 4);
+  opacity: 0.7;
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--hive-grid) * 4);
+  height: calc(var(--hive-grid) * 4);
+  color: var(--hive-color-text-v4);
+  border-radius: var(--hive-border-radius);
+  z-index: 1;
+}
+
+.close:hover,
+.close:focus-visible {
+  opacity: 1;
+  outline: none;
+}
+
+.close:focus-visible {
+  box-shadow: 0 0 0 3px oklch(from var(--hive-color-primary-v4) l c h / 0.5);
+}
+
+.body {
+  padding: calc(var(--hive-grid) * 5) calc(var(--hive-grid) * 6);
+  overflow: auto;
+  flex: 1;
+  color: var(--hive-color-text-v4);
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-body-small);
+  line-height: var(--hive-line-height-body-small);
+}
+
+.footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--hive-grid) * 3);
+  padding: calc(var(--hive-grid) * 3) calc(var(--hive-grid) * 6);
+  background-color: var(--hive-color-surface-hover-v4);
+  border-top: var(--hive-border-width) solid var(--hive-color-border-v4);
+}
+
+.footerActions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: calc(var(--hive-grid) * 2);
+  margin-left: auto;
+}
+
+.helperLink {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--hive-grid) * 1);
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-body-smaller);
+  line-height: var(--hive-line-height-body-smaller);
+  color: var(--hive-color-text-secondary-v4);
+  text-decoration: none;
+}
+
+.helperLink:hover,
+.helperLink:focus-visible {
+  text-decoration: underline;
+  color: var(--hive-color-text-v4);
+  outline: none;
+}

package/lib/old/Checkbox.d.ts

@@ -0,0 +1,35 @@
+import React, { ChangeEvent, FocusEvent, ReactElement, MouseEvent } from 'react';
+import { HelpProps } from '../components/Help';
+import { DataTestProp } from '../helpers/types';
+type CheckboxCoreProps = {
+    name: string;
+    value?: string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (e: MouseEvent<HTMLInputElement>) => void;
+    error?: string;
+    checked?: boolean;
+};
+export type CheckboxExtraProps = {
+    label?: ReactElement | string;
+    helperText?: HelpProps['helperText'];
+    indeterminate?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+    classNameLabel?: string;
+    'aria-label'?: string;
+    classNameCheckmark?: string;
+};
+/**
+ * ### Purpose
+ * Forms require input from users. If you need information that can be represented as boolean, use input with type 'checkbox'.
+ * Checkbox fields accept boolean types of data. And help and error guidance to ensure they know what to enter.
+ *
+ *
+ * ### General Info
+ * - It's important to realise that we don't set checkbox value, but state (on/off). That is the main difference from other input types.
+ * - They can have a special indeterminate state, that represents a '3rd' value, usually used in tree structures, etc.
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxCoreProps & CheckboxExtraProps & DataTestProp & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/old/Checkbox.js

@@ -0,0 +1,38 @@
+import React, { useRef, forwardRef } from 'react';
+import { Check, Minus } from 'react-feather';
+import { useUID } from 'react-uid';
+import classNames from 'classnames';
+import { Error, errorId } from '../components/Error';
+import { Help, helpTooltipId } from '../components/Help';
+import styles from './CheckboxLegacy.module.scss';
+import { TruncatedText } from '../components/TruncatedText';
+/**
+ * ### Purpose
+ * Forms require input from users. If you need information that can be represented as boolean, use input with type 'checkbox'.
+ * Checkbox fields accept boolean types of data. And help and error guidance to ensure they know what to enter.
+ *
+ *
+ * ### General Info
+ * - It's important to realise that we don't set checkbox value, but state (on/off). That is the main difference from other input types.
+ * - They can have a special indeterminate state, that represents a '3rd' value, usually used in tree structures, etc.
+ */
+export const Checkbox = forwardRef((props, ref) => {
+    const { checked, name, onChange, onBlur, className, classNameLabel, classNameCheckmark, value, indeterminate = false, label, helperText, error, disabled = false, required, 'data-test': dataTest = 'checkbox', 'aria-label': ariaLabel, onClick, } = props;
+    const inputRef = useRef(null);
+    const id = useUID();
+    return (React.createElement("div", { ref: ref, className: classNames(className, { [styles.withError]: 'error' in props }), "data-test": dataTest },
+        React.createElement("label", { className: classNames(styles.wrapper, {
+                [styles.error]: !!error,
+                [styles.checked]: checked,
+                [styles.disabled]: disabled,
+                [styles.indeterminate]: indeterminate,
+            }, classNameLabel), htmlFor: id },
+            label !== undefined && (React.createElement("div", { className: styles.name, "data-test": "input-checkbox-label" },
+                React.createElement(TruncatedText, { text: label }))),
+            React.createElement("input", { type: "checkbox", ref: inputRef, id: id, name: name, "aria-label": ariaLabel, checked: !!checked, onChange: onChange, onBlur: onBlur, onClick: onClick, value: value, disabled: disabled, "aria-invalid": !!error, "aria-required": required, "aria-describedby": helperText && helpTooltipId(id), "aria-errormessage": error && errorId(id) }),
+            indeterminate ? (React.createElement(Minus, { "data-test": `${dataTest}-minus`, className: classNames(styles.checkmark, classNameCheckmark) })) : (React.createElement(Check, { "data-test": `${dataTest}-check`, className: classNames(styles.checkmark, classNameCheckmark) })),
+            helperText && React.createElement(Help, { parentId: id, helperText: helperText, className: styles.helperText })),
+        React.createElement(Error, { truncated: true, error: error, className: styles.errorContainer, inputId: id })));
+});
+Checkbox.displayName = 'Checkbox';
+//# sourceMappingURL=Checkbox.js.map

package/lib/old/Checkbox.js.map

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

package/lib/old/CheckboxFormik.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { CheckboxExtraProps } from './Checkbox';
+import { FieldValidatorGeneric } from '../utils/formik';
+import { ExtractKeysOfValueType } from '../utils/types';
+export type CheckboxFieldFormikProps<V extends object> = CheckboxExtraProps & {
+    name: ExtractKeysOfValueType<V, boolean>;
+    validate?: FieldValidatorGeneric<boolean>;
+    onChange?: (value: boolean) => void;
+};
+export declare const CheckboxFormik: <V extends object>({ name, validate, onChange, ...props }: CheckboxFieldFormikProps<V>) => ReactElement;

package/lib/old/CheckboxFormik.js

@@ -0,0 +1,17 @@
+import React, { useCallback } from 'react';
+import { useField } from 'formik';
+import { Checkbox } from './Checkbox';
+import { getFieldError } from '../utils/formik';
+export const CheckboxFormik = ({ name, validate, onChange, ...props }) => {
+    const [{ onBlur, onChange: onFormikChange, value }, meta] = useField({
+        name,
+        validate,
+    });
+    return (React.createElement(Checkbox, { ...props, name: name, checked: value, onChange: useCallback((e) => {
+            if (onChange) {
+                onChange(e.target.checked);
+            }
+            onFormikChange(e);
+        }, [onFormikChange, onChange]), onBlur: onBlur, error: getFieldError(meta) }));
+};
+//# sourceMappingURL=CheckboxFormik.js.map

package/lib/old/CheckboxFormik.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxFormik.js","sourceRoot":"","sources":["../../src/old/CheckboxFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,WAAW,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA;AACzD,OAAO,EAAyB,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAStE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA+B,EAAgB,EAAE;IACpI,MAAM,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAU;QAC5E,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,QAAQ,OACH,KAAK,EACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,WAAW,CACnB,CAAC,CAAC,EAAE,EAAE;YACJ,IAAI,QAAQ,EAAE,CAAC;gBACb,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YAC5B,CAAC;YAED,cAAc,CAAC,CAAC,CAAC,CAAA;QACnB,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,EACD,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAC1B,CACH,CAAA;AACH,CAAC,CAAA"}

package/lib/old/Modal.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from 'react';
+import { Props as ReactModalProps } from 'react-modal';
+import { DataTestProp } from '../helpers/types';
+import { ButtonProps, ButtonTypeButtonProps } from './Button';
+import { IconProps } from '../components/Icon';
+export declare const setAppElement: (appElement: string | HTMLElement) => void;
+export type ModalActionProps = ButtonProps<ButtonTypeButtonProps>;
+export type ModalProps = {
+    actions?: ModalActionProps[];
+    hideActions?: boolean;
+    autoFocus?: boolean;
+    children?: ReactNode;
+    closable?: boolean;
+    showCloseButton?: boolean;
+    bodyClassName?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    footerClassName?: string;
+    overlayClassName?: string;
+    className?: string;
+    icon?: IconProps['icon'];
+    iconAriaLabel?: IconProps['ariaLabel'];
+    onClose: ReactModalProps['onRequestClose'];
+    title: string;
+} & DataTestProp & Exclude<ReactModalProps, 'onRequestClose' | 'shouldFocusAfterRender' | 'shouldReturnFocusAfterClose'>;
+export declare const Modal: FC<ModalProps>;

package/lib/old/Modal.js

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import ReactModal from 'react-modal';
+import cn from 'classnames';
+import { X } from 'react-feather';
+import { Button } from './Button';
+import { Icon } from '../components/Icon';
+import { IconButton } from './IconButton';
+import styles from './ModalLegacy.module.scss';
+// Direct re-exporting is breaking tests in MC
+// TODO: Investigate why
+export const setAppElement = (appElement) => ReactModal.setAppElement(appElement);
+/*
+ * ### Purpose
+ * Occasionally there's a user-story that's not a part of the main user flow. Such action can be contained in a Modal.
+ * Modals can contain components like forms, menus, tables etc.
+ * Usually modals are used to drive a complex action. In case there is a simple action (e.g. confirmation), consider using a Dialog.
+ *
+ * ### General Info
+ * - Modal always contains a title, icon "X" in the header, content and active buttons in the footer.
+ * - No interactions on the underlying page can be performed while a Modal.
+ * - Content beneath the modal is covered by a "blanket".
+ * - To close the Modal, use "Cancel" button in the footer, "X" button in the header, press "Esc" key or click anywhere on the "blanket".
+ */
+export const Modal = ({ 'data-test': dataTest = 'modal', actions, hideActions = false, autoFocus = true, children, className, closable = true, showCloseButton = true, bodyClassName, headerClassName, contentClassName, footerClassName, icon, iconAriaLabel, onClose, overlayClassName, title, ...rest }) => {
+    const shouldAutoFocusCancelButton = useMemo(() => autoFocus && !(actions === null || actions === void 0 ? void 0 : actions.some((action) => action === null || action === void 0 ? void 0 : action.autoFocus)), [autoFocus, actions]);
+    return (React.createElement(ReactModal, { portalClassName: styles.portal, className: cn(styles.modal, className), contentLabel: title, onRequestClose: onClose, overlayClassName: cn(styles.overlay, overlayClassName), shouldCloseOnEsc: closable, shouldCloseOnOverlayClick: closable, shouldFocusAfterRender: false, shouldReturnFocusAfterClose: true, ...rest },
+        React.createElement("div", { className: styles.outline }),
+        React.createElement("div", { className: cn(styles.body, bodyClassName) },
+            React.createElement("div", { "data-test": "modal-header", className: cn(styles.header, headerClassName) },
+                icon && iconAriaLabel && React.createElement(Icon, { "data-test": "modal-header-icon", className: styles.icon, icon: icon, ariaLabel: iconAriaLabel }),
+                React.createElement("h3", { "data-test": "modal-header-title", className: styles.title }, title),
+                closable && showCloseButton && (
+                // Note: Mostly a Dialog use-case. We want it to be closable, but we don't want to show an X button in the corner.
+                React.createElement("div", { className: styles.close },
+                    React.createElement(IconButton, { "data-test": `${dataTest}-button-close`, kind: "transparent", ariaLabel: "Close icon", icon: X, onClick: onClose })))),
+            React.createElement("div", { "data-test": "modal-content", className: cn(styles.content, contentClassName) }, children),
+            !hideActions && (React.createElement("div", { "data-test": "modal-footer", className: cn(styles.footer, footerClassName) }, actions === null || actions === void 0 ? void 0 :
+                actions.map(({ children, ...actionPropsRest }, key) => (React.createElement(Button, { key: key, "data-test": "modal-button-action", ...actionPropsRest }, children))),
+                React.createElement(Button, { autoFocus: shouldAutoFocusCancelButton, "data-test": "modal-button-cancel", variant: "outlined", color: "secondary", onClick: onClose }, "Cancel"))))));
+};
+//# sourceMappingURL=Modal.js.map

package/lib/old/Modal.js.map

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

package/lib/old/index.d.ts

@@ -7,9 +7,15 @@ export { Button } from './Button';
 export type { ButtonProps, ButtonVariant, ButtonColor, ButtonOutlineType, ButtonAccessibleIconLeftProps, ButtonAccessibleIconRightProps, ButtonDisabledProps, ButtonCommonProps, ButtonTypeAnchorProps, ButtonTypeButtonProps, ButtonTypeProps, } from './Button';
 export { IconButton } from './IconButton';
 export type { IconButtonProps, IconButtonKind, IconButtonDisabledProps, IconButtonNotDisabledProps } from './IconButton';
+export { Checkbox } from './Checkbox';
+export type { CheckboxExtraProps } from './Checkbox';
+export { CheckboxFormik } from './CheckboxFormik';
+export type { CheckboxFieldFormikProps } from './CheckboxFormik';
 export { TextField } from './TextField';
 export type { TextFieldProps, TextFieldExtraProps, TextFieldSize, TextFieldVariant, TextFieldTypes } from './TextField';
 export { TextFieldFormik } from './TextFieldFormik';
 export type { TextFieldFormikProps } from './TextFieldFormik';
 export { TabContext, TabContextProvider, TabContextProviderControlled, useTabContext, TabList, Tab, TabPanel } from './Tabs';
 export type { TabContextValue, TabContextProviderProps, TabContextProviderControlledProps, TabListProps, TabProps, TabCommonProps, AnchorTabProps, ButtonTabProps, TabPanelProps, } from './Tabs';
+export { Modal, setAppElement } from './Modal';
+export type { ModalProps, ModalActionProps } from './Modal';

package/lib/old/index.js

@@ -5,7 +5,10 @@ export { Toggle } from './Toggle';
 export { ToggleFormik } from './ToggleFormik';
 export { Button } from './Button';
 export { IconButton } from './IconButton';
+export { Checkbox } from './Checkbox';
+export { CheckboxFormik } from './CheckboxFormik';
 export { TextField } from './TextField';
 export { TextFieldFormik } from './TextFieldFormik';
 export { TabContext, TabContextProvider, TabContextProviderControlled, useTabContext, TabList, Tab, TabPanel } from './Tabs';
+export { Modal, setAppElement } from './Modal';
 //# sourceMappingURL=index.js.map

package/lib/old/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/old/index.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yDAAyD;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAcjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/old/index.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yDAAyD;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAcjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAY5H,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazelcast/ui",
-  "version": "4.0.1-canary.5",
+  "version": "4.0.1-canary.6",
   "description": "Hazelcast design system components and utilities",
   "homepage": "https://github.com/hazelcast/hive#readme",
   "bugs": {