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

package/lib/components/AppHeader/SelectCluster/SelectCluster.js

@@ -27,7 +27,7 @@ export const SelectCluster = ({ clusterVersions, clusterName, clusterNames, isRe
     })), [clusterVersions, clusterNames]);
     const { status, value } = getSafeValue(clusterName, clusterNames);
     const disabled = isReadOnly || status === 'disabled';
-    return (React.createElement(SelectField, { name: "cluster", label: "Select Cluster", showAriaLabel: true, size: "small", "data-test": "select-cluster", className: cn(styles.select, { [styles.disabled]: disabled }), classNames: {
+    return (React.createElement(SelectField, { name: "cluster", label: "Select Cluster", showAriaLabel: true, "data-test": "select-cluster", className: cn(styles.select, { [styles.disabled]: disabled }), classNames: {
             menuPortal: () => styles.menuPortal,
         }, disabled: disabled, iconLeft: CheckCircle, iconLeftAriaLabel: "Select cluster", iconLeftContainerClassName: styles.selectIconLeftContainer, iconLeftClassName: cn(styles.selectIconLeft, {
             [styles.disabled]: status === 'disabled',

package/lib/components/AppHeader/SelectCluster/SelectCluster.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectCluster.js","sourceRoot":"","sources":["../../../../src/components/AppHeader/SelectCluster/SelectCluster.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,KAAK,EAAE,EAAM,OAAO,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAEhD,MAAM,YAAY,GAAG,CACnB,WAA0B,EAC1B,YAA6B,EAI7B,EAAE;IACF,IAAI,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,CAAA,EAAE,CAAC;QAC1B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA;IACrD,CAAC;IAED,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO;YACL,MAAM,EAAE,cAAc;YACtB,KAAK,EAAE,gBAAgB;SACxB,CAAA;IACH,CAAC;IAED,OAAO;QACL,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc;QACzE,KAAK,EAAE,WAAW;KACnB,CAAA;AACH,CAAC,CAAA;AAUD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5H,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CACH,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAClC,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,YAAY,EACV,eAAe,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACzC,2CAAgB,iBAAiB,IAAE,eAAe,CAAC,IAAI,CAAC,CAAQ,CACjE,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,GAAG,CAChC;KACJ,CAAC,CAAC,EACL,CAAC,eAAe,EAAE,YAAY,CAAC,CAChC,CAAA;IAED,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAA;IACjE,MAAM,QAAQ,GAAG,UAAU,IAAI,MAAM,KAAK,UAAU,CAAA;IAEpD,OAAO,CACL,oBAAC,WAAW,IACV,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,gBAAgB,EACtB,aAAa,QACb,IAAI,EAAC,OAAO,eACF,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,EAC7D,UAAU,EAAE;YACV,UAAU,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU;SACpC,EACD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,WAAW,EACrB,iBAAiB,EAAC,gBAAgB,EAClC,0BAA0B,EAAE,MAAM,CAAC,uBAAuB,EAC1D,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE;YAC3C,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,UAAU;YACxC,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,MAAM,KAAK,cAAc;SACjD,CAAC,EACF,WAAW,EAAE,KAAK,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"SelectCluster.js","sourceRoot":"","sources":["../../../../src/components/AppHeader/SelectCluster/SelectCluster.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,KAAK,EAAE,EAAM,OAAO,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAEhD,MAAM,YAAY,GAAG,CACnB,WAA0B,EAC1B,YAA6B,EAI7B,EAAE;IACF,IAAI,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,CAAA,EAAE,CAAC;QAC1B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA;IACrD,CAAC;IAED,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO;YACL,MAAM,EAAE,cAAc;YACtB,KAAK,EAAE,gBAAgB;SACxB,CAAA;IACH,CAAC;IAED,OAAO;QACL,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc;QACzE,KAAK,EAAE,WAAW;KACnB,CAAA;AACH,CAAC,CAAA;AAUD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5H,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CACH,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAClC,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,YAAY,EACV,eAAe,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACzC,2CAAgB,iBAAiB,IAAE,eAAe,CAAC,IAAI,CAAC,CAAQ,CACjE,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,GAAG,CAChC;KACJ,CAAC,CAAC,EACL,CAAC,eAAe,EAAE,YAAY,CAAC,CAChC,CAAA;IAED,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAA;IACjE,MAAM,QAAQ,GAAG,UAAU,IAAI,MAAM,KAAK,UAAU,CAAA;IAEpD,OAAO,CACL,oBAAC,WAAW,IACV,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,gBAAgB,EACtB,aAAa,qBACH,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,EAC7D,UAAU,EAAE;YACV,UAAU,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU;SACpC,EACD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,WAAW,EACrB,iBAAiB,EAAC,gBAAgB,EAClC,0BAA0B,EAAE,MAAM,CAAC,uBAAuB,EAC1D,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE;YAC3C,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,UAAU;YACxC,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,MAAM,KAAK,cAAc;SACjD,CAAC,EACF,WAAW,EAAE,KAAK,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC,CAAA"}

package/lib/components/AutocompleteField.d.ts

@@ -1,7 +1,6 @@
 import React, { FocusEvent, ReactNode } from 'react';
 import { FormatOptionLabelMeta } from 'react-select';
 import { HelpProps } from './Help';
-import { SelectFieldSize } from './Select/SelectField';
 import { FieldHeaderProps } from './FieldHeader';
 export type AutocompleteFieldOption = {
     label: string;
@@ -10,7 +9,6 @@ export type AutocompleteFieldOption = {
 export type RenderOptionFunction<O = AutocompleteFieldOption> = (highlightedLabelText: ReactNode, option: O extends AutocompleteFieldOption ? O : never, labelMeta: FormatOptionLabelMeta<AutocompleteFieldOption>) => ReactNode;
 export type AutocompleteFieldProps = {
     'data-test'?: string;
-    size?: SelectFieldSize;
     className?: string;
     disabled?: boolean;
     error?: string;
@@ -31,7 +29,7 @@ export type AutocompleteFieldProps = {
     value?: string | null;
     placeholder?: string;
     openMenuOnClick?: boolean;
-} & Omit<FieldHeaderProps, 'id'>;
+} & Omit<FieldHeaderProps, 'id' | 'size'>;
 type GetSelectedOptionFromValueProps = {
     value?: string | null;
     optionsMap: {

package/lib/components/AutocompleteField.js

@@ -4,7 +4,7 @@ import { useUID } from 'react-uid';
 import cn from 'classnames';
 import { Search, X } from 'react-feather';
 import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
-import styles from './AutocompleteField.module.scss';
+import styles from './AutocompleteField.module.css';
 import { Error, errorId } from './Error';
 import { canUseDOM } from '../utils/ssr';
 import { IconButton } from './IconButton';
@@ -39,7 +39,7 @@ const DropdownIndicator = (props) => {
 const ClearIndicator = ({ innerProps }) => {
     // Visually impaired people will use the keyboard (backspace) to remove the value. We do not want to confuse them by allowing to focus this button.
     // @ts-ignore
-    return React.createElement(IconButton, { ...innerProps, icon: X, ariaHidden: true, variant: "ghost", className: styles.clear, tabIndex: -1 });
+    return React.createElement(IconButton, { ...innerProps, icon: X, ariaHidden: true, variant: "ghost", size: "small", className: styles.clear, tabIndex: -1 });
 };
 export const highlightOptionText = (labelText, inputValue) => {
     const separator = '<%>';
@@ -54,7 +54,7 @@ export const highlightOptionText = (labelText, inputValue) => {
             }), key: val + `${i}` }, val)))
         : labelText;
 };
-export const AutocompleteField = ({ 'data-test': dataTest = 'autocomplete-field', className, disabled, error, errorClassName, isClearable, label, labelClassName, helperText, size = 'medium', menuPortalTarget = 'body', name, onChange, onFocus, onBlur, onInputChange, options, required, value, placeholder = 'Search...', showAriaLabel = false, renderOption, openMenuOnClick = true, ...rest }) => {
+export const AutocompleteField = ({ 'data-test': dataTest = 'autocomplete-field', className, disabled, error, errorClassName, isClearable, label, labelClassName, helperText, menuPortalTarget = 'body', name, onChange, onFocus, onBlur, onInputChange, options, required, value, placeholder = 'Search...', showAriaLabel = false, renderOption, openMenuOnClick = true, ...rest }) => {
     // when the user clicks on an input with the value, the value should disappear,
     // but then it should appear after the user selects something or blurs the input
     const [isValueHidden, setValueHidden] = useState(false);
@@ -140,14 +140,13 @@ export const AutocompleteField = ({ 'data-test': dataTest = 'autocomplete-field'
             [styles.withError]: 'error' in props,
             [styles.disabled]: disabled,
             [styles.hasError]: error,
-            [styles.small]: size === 'small',
             [styles.empty]: !value,
         }, 
         // Menu container is either this select itself or any other element
         // We can always add this class to the select itself because even if the menu container is any parent it won't break it
         // However, if it is the select itself, it will properly add necessary specificity level to the menu styles.
         styles.menuContainer, className) },
-        React.createElement(FieldHeader, { label: label, id: id, size: size, "data-test": dataTest, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName }),
+        React.createElement(FieldHeader, { label: label, id: id, size: "small", "data-test": dataTest, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName }),
         React.createElement("div", { className: styles.selectBlock },
             React.createElement(ReactSelect, { onInputChange: onInputChange, formatOptionLabel: formatOptionLabelFn, styles: {
                     ...props.styles,

package/lib/components/AutocompleteField.js.map

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

package/lib/components/AutocompleteField.module.css

@@ -0,0 +1,183 @@
+.container {
+  color: var(--hive-color-text-v4);
+  box-sizing: border-box;
+  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: normal;
+}
+
+.container .selectBlock {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+}
+
+.clear.clear {
+  --button-size: calc(var(--hive-grid) * 6);
+
+  margin-left: calc(var(--hive-grid) * 1);
+  border-radius: var(--hive-border-radius-pill);
+}
+
+.container :global(.hz-autocomplete-field) {
+  flex: 1 1 auto;
+  font-size: var(--hive-font-size-body-small);
+}
+
+.container :global(.hz-autocomplete-field__value-container) {
+  padding: 0;
+}
+
+.container :global(.hz-autocomplete-field__single-value) {
+  color: var(--hive-color-text-v4);
+}
+
+.container :global(.hz-autocomplete-field__placeholder) {
+  color: var(--hive-color-text-secondary-v4);
+}
+
+.container :global(.hz-autocomplete-field__indicator-separator) {
+  display: none;
+}
+
+.container :global(.hz-autocomplete-field__control) {
+  cursor: text;
+  color: var(--hive-color-text-v4);
+  min-height: calc(var(--hive-grid) * 7.5);
+  padding-left: calc(var(--hive-grid) * 3);
+  padding-right: calc(var(--hive-grid) * 2);
+  box-sizing: border-box;
+  border: var(--hive-border-width) solid var(--hive-color-border-v4);
+  border-radius: var(--hive-border-radius);
+  background-color: var(--hive-color-neutral-white-v4);
+  transition: none;
+  box-shadow: none;
+}
+
+.container :global(.hz-autocomplete-field__control--menu-is-open) {
+  border-radius: var(--hive-border-radius) var(--hive-border-radius) 0 0;
+}
+
+.container :global(.hz-autocomplete-field__dropdown-indicator) {
+  color: var(--hive-color-text-secondary-v4);
+  padding: 0 calc(var(--hive-grid) * 0.5);
+}
+
+.container.disabled {
+  opacity: 0.5;
+}
+
+.container.disabled :global(.hz-autocomplete-field__control) {
+  color: var(--hive-color-text-secondary-v4);
+  background-color: var(--hive-color-neutral-white-v4);
+  border-color: var(--hive-color-border-v4);
+}
+
+.container.hasError :global(.hz-autocomplete-field__control) {
+  border-color: var(--hive-color-error-v4);
+}
+
+.container :global(.hz-autocomplete-field__control):hover,
+.container.hover :global(.hz-autocomplete-field__control) {
+  border-color: var(--hive-color-text-v4);
+}
+
+.container.focus :global(.hz-autocomplete-field__control),
+.container :global(.hz-autocomplete-field__control--is-focused) {
+  outline: none;
+  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);
+}
+
+.container :global(.hz-autocomplete-field__control--menu-is-open),
+.container :global(.hz-autocomplete-field__control--is-focused.hz-autocomplete-field__control--menu-is-open) {
+  border-color: var(--hive-color-border-v4);
+  box-shadow: none;
+}
+
+.container.hasError.focus :global(.hz-autocomplete-field__control),
+.container.hasError :global(.hz-autocomplete-field__control--is-focused) {
+  border-color: var(--hive-color-error-v4);
+  box-shadow: 0 0 0 3px oklch(from var(--hive-color-error-v4) l c h / 0.4);
+}
+
+.container.hasError :global(.hz-autocomplete-field__control--menu-is-open) {
+  border-color: var(--hive-color-error-v4);
+  box-shadow: none;
+}
+
+.menuContainer :global(.hz-autocomplete-field__menu-portal) {
+  z-index: 2000;
+}
+
+.menuContainer.menuContainer :global(.hz-autocomplete-field__menu) {
+  margin-top: 0;
+  margin-bottom: calc(var(--hive-grid) * 1);
+  border: var(--hive-border-width) solid var(--hive-color-border-v4);
+  border-top: none;
+  border-radius: 0 0 var(--hive-border-radius) var(--hive-border-radius);
+  background-color: var(--hive-color-neutral-white-v4);
+  overflow: hidden;
+  box-shadow:
+    0 4px 12px oklch(0 0 0 / 0.08),
+    0 1px 3px oklch(0 0 0 / 0.06);
+  z-index: 1000;
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-body-small);
+}
+
+.menuContainer :global(.hz-autocomplete-field__menu-list) {
+  padding: 0;
+  color: var(--hive-color-text-v4);
+}
+
+.menuContainer.menuContainer.menuContainer :global(.hz-autocomplete-field__option),
+.menuContainer.menuContainer.menuContainer :global(.hz-autocomplete-field__menu-notice) {
+  min-height: calc(var(--hive-grid) * 10);
+  line-height: calc(var(--hive-grid) * 10);
+  padding: 0 calc(var(--hive-grid) * 3);
+  background-color: transparent;
+  outline: none;
+  text-align: left;
+  white-space: pre;
+  cursor: pointer;
+  color: var(--hive-color-text-v4);
+  text-decoration: none;
+}
+
+.menuContainer.menuContainer.menuContainer :global(.hz-autocomplete-field__option--is-focused) {
+  background-color: var(--hive-color-surface-hover-v4);
+  outline: none;
+  box-shadow: none !important;
+  text-decoration: none !important;
+}
+
+.menuContainer.menuContainer.menuContainer :global(.hz-autocomplete-field__option--is-selected) {
+  background-color: var(--hive-color-surface-active-v4);
+  color: var(--hive-color-text-v4);
+  font-weight: var(--hive-font-weight-text-medium);
+  text-decoration: none !important;
+  box-shadow: none !important;
+}
+
+.menuContainer.menuContainer.menuContainer :global(.hz-autocomplete-field__matched-option-text) {
+  font-weight: var(--hive-font-weight-text-bold);
+  color: var(--hive-color-text-v4);
+  text-decoration: none;
+}
+
+.withError {
+  position: relative;
+  padding-bottom: calc(var(--hive-grid) * 4.75 + var(--hive-grid));
+}
+
+.withError .errorContainer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  height: calc(var(--hive-grid) * 4.75);
+  width: 100%;
+}

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