@hazelcast/ui 3.0.13 → 4.0.1-canary.10

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/Dialog.js

@@ -18,7 +18,7 @@ export const Dialog = ({ modalClassName, consequences, affirmation = DIALOG_AFFI
             ? [
                 {
                     autoFocus: !actionDangerous,
-                    color: actionDangerous ? 'secondary' : 'primary',
+                    color: actionDangerous ? 'danger' : 'primary',
                     ...(actionDisabled && actionDisabledTooltip
                         ? {
                             disabled: actionDisabled,

package/lib/components/Dialog.js.map

@@ -1 +1 @@
-{"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"}
+{"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,QAAQ,CAAC,CAAC,CAAC,SAAS;oBAC7C,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/Error.d.ts

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

package/lib/components/Help.d.ts

@@ -1,12 +1,12 @@
 import { CSSProperties, FC, ReactElement } from 'react';
 import { IconSize } from './Icon';
-import { TooltipProps } from './Tooltip';
+import { TooltipSide } from './Tooltip';
 import { DataTestProp } from '../helpers/types';
 export declare const helpTooltipId: (inputId: string) => string;
 export interface HelpProps extends DataTestProp {
     parentId: string;
     helperText: string | ReactElement;
-    placement?: TooltipProps['placement'];
+    placement?: TooltipSide;
     className?: string;
     size?: IconSize;
     tooltipWordBreak?: CSSProperties['wordBreak'];

package/lib/components/Help.js

@@ -8,7 +8,8 @@ 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 })))));
+    return (React.createElement(Tooltip, { side: placement, content: helperText, id: tooltipId, wordBreak: tooltipWordBreak },
+        React.createElement("div", { "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 }))));
 };
 //# sourceMappingURL=Help.js.map

package/lib/components/Help.js.map

@@ -1 +1 @@
-{"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"}
+{"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,EAAe,MAAM,WAAW,CAAA;AAGhD,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,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB;QACvF,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;YAClE,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,CACE,CACX,CAAA;AACH,CAAC,CAAA"}

package/lib/components/IconButton.d.ts

@@ -1,22 +1,22 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import { Icon as FeatherIcon } from 'react-feather';
-import { IconProps, IconAriaProps } from './Icon';
-import { TooltipProps } from './Tooltip';
+import { IconAriaProps } from './Icon';
+import { ButtonVariant, ButtonColor, ButtonSize } from './Button';
+import { TooltipSide } from './Tooltip';
 import { LinkRel, LinkTarget } from './Link';
 import { DataTestProp } from '../helpers/types';
-export type IconButtonKind = 'primary' | 'transparent';
 type IconButtonCommonProps = {
     icon: FeatherIcon;
     iconClassName?: string;
     iconColor?: string;
     iconRole?: string;
     loaderRole?: string;
-    kind?: IconButtonKind;
-    size?: IconProps['size'];
-    padding?: 'normal';
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
     tooltip?: string;
     tooltipVisible?: boolean;
-    tooltipPlacement?: TooltipProps['placement'];
+    tooltipPlacement?: TooltipSide;
 } & DataTestProp & IconAriaProps & Pick<ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, 'onClick' | 'onMouseDown' | 'className' | 'tabIndex' | 'style'>;
 export type IconButtonNotDisabledProps = {
     disabledTooltip?: never;
@@ -27,7 +27,7 @@ export type IconButtonNotDisabledProps = {
 export type IconButtonDisabledProps = {
     disabledTooltip: string;
     disabled: boolean;
-    disabledTooltipPlacement?: TooltipProps['placement'];
+    disabledTooltipPlacement?: TooltipSide;
     disabledTooltipVisible?: boolean;
 };
 type IconButtonComponentProps = ({

package/lib/components/IconButton.js

@@ -1,25 +1,36 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { useUID } from 'react-uid';
-import mergeRefs from 'react-merge-refs';
 import { Icon } from './Icon';
 import { Tooltip } from './Tooltip';
 import { Loader } from './Loader';
-import styles from './IconButton.module.scss';
-export const IconButton = forwardRef(({ component: Component = 'button', icon, iconClassName, iconColor, iconRole, loaderRole, className, size, kind = 'transparent', ariaHidden, ariaLabelledBy, ariaLabel, 
-// Disabled tooltip
-disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, rel = 'noopener', target, type = 'button', loading, padding, tooltip, tooltipPlacement, tooltipVisible, 'data-test': dataTest = 'icon-button', ...rest }, ref) => {
+import styles from './IconButton.module.css';
+const variantClass = {
+    contained: styles.variantContained,
+    outlined: styles.variantOutlined,
+    ghost: styles.variantGhost,
+    link: styles.variantLink,
+};
+const colorClass = {
+    primary: styles.colorPrimary,
+    secondary: styles.colorSecondary,
+    warning: styles.colorWarning,
+    danger: styles.colorDanger,
+};
+const sizeClass = {
+    small: styles.sizeSmall,
+    regular: styles.sizeRegular,
+};
+export const IconButton = forwardRef(({ component: Component = 'button', icon, iconClassName, iconColor, iconRole, loaderRole, className, variant = 'contained', color = 'primary', size = 'regular', ariaHidden, ariaLabelledBy, ariaLabel, disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, rel = 'noopener', target, type = 'button', loading, tooltip, tooltipPlacement, tooltipVisible, 'data-test': dataTest = 'icon-button', ...rest }, ref) => {
     const tooltipId = useUID();
+    const iconSize = size === 'small' ? 'small' : 'smallMedium';
     const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
     const labelledByFinal = [ariaLabelledBy, disabled ? tooltipId : undefined].filter(Boolean).join(' ');
-    return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : tooltip, placement: disabled ? disabledTooltipPlacement : tooltipPlacement, visible: disabled ? disabledTooltipVisible : tooltipVisible }, (tooltipRef) => (React.createElement(Component, { className: cn(styles.iconButton, {
-            [styles.primary]: kind === 'primary',
-            [styles.transparent]: kind === 'transparent',
-            [styles.paddingNormal]: padding === 'normal',
-        }, className), "aria-hidden": ariaHidden, "aria-label": ariaLabel, "aria-labelledby": labelledByFinal, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined, "data-test": dataTest, ...rest },
-        React.createElement("span", { className: styles.body, ref: mergeRefs([ref, tooltipRef]) },
-            loading && React.createElement(Loader, { role: loaderRole, size: size }),
-            !loading && (React.createElement(Icon, { role: iconRole, className: iconClassName, color: iconColor, "data-test": `${dataTest}-icon`, icon: icon, size: size, ariaHidden: true })))))));
+    return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : tooltip, side: disabled ? disabledTooltipPlacement : tooltipPlacement, open: disabled ? disabledTooltipVisible : tooltipVisible },
+        React.createElement(Component, { className: cn(styles.iconButton, variantClass[variant], colorClass[color], sizeClass[size], className), "aria-hidden": ariaHidden, "aria-label": ariaLabel, "aria-labelledby": labelledByFinal, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined, "data-test": dataTest, ...rest },
+            React.createElement("span", { className: styles.body, ref: ref },
+                loading && React.createElement(Loader, { role: loaderRole, size: iconSize }),
+                !loading && (React.createElement(Icon, { role: iconRole, className: iconClassName, color: iconColor, "data-test": `${dataTest}-icon`, icon: icon, size: iconSize, ariaHidden: true }))))));
 });
 IconButton.displayName = 'IconButton';
 //# sourceMappingURL=IconButton.js.map

package/lib/components/IconButton.js.map

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

package/lib/components/IconButton.module.css

@@ -0,0 +1,145 @@
+.iconButton {
+  --button-size: 36px;
+  --button-color-base: var(--hive-color-brand-v4);
+  --button-color-fg-on-base: var(--hive-color-text-v4);
+  --button-color-fg-on-light: var(--hive-color-text-v4);
+  --button-bg: var(--button-color-base);
+  --button-bg-hover: oklch(from var(--button-bg) calc(l - 0.04) c h);
+  --button-bg-active: oklch(from var(--button-bg) calc(l - 0.08) c h);
+  --button-color: var(--button-color-fg-on-base);
+  --button-border: transparent;
+  --button-border-hover: var(--button-border);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--button-size);
+  height: var(--button-size);
+  padding: 0;
+  border: var(--hive-border-width) solid var(--button-border);
+  border-radius: var(--hive-border-radius);
+  background: var(--button-bg);
+  color: var(--button-color);
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease;
+}
+
+.sizeSmall {
+  --button-size: 32px;
+}
+
+.sizeRegular {
+  --button-size: 36px;
+}
+
+.iconButton:hover,
+.iconButton.hover {
+  background: var(--button-bg-hover);
+  border-color: var(--button-border-hover);
+}
+
+.iconButton:active,
+.iconButton.active {
+  background: var(--button-bg-active);
+}
+
+.iconButton:disabled,
+.iconButton.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.iconButton:focus-visible,
+.iconButton.focus {
+  outline: var(--hive-outline-width) solid var(--hive-color-primary-v4);
+  outline-offset: 2px;
+}
+
+.variantContained {
+  --button-bg: var(--button-color-base);
+  --button-color: var(--button-color-fg-on-base);
+  --button-border: transparent;
+}
+
+.variantOutlined {
+  --button-bg: var(--hive-color-neutral-white-v4);
+  --button-bg-hover: var(--hive-color-surface-hover-v4);
+  --button-bg-active: var(--hive-color-surface-active-v4);
+  --button-color: var(--button-color-fg-on-light);
+  --button-border: var(--button-color-base);
+  --button-border-hover: var(--button-color-base);
+}
+
+.variantGhost {
+  --button-bg: transparent;
+  --button-bg-hover: var(--hive-color-surface-hover-v4);
+  --button-bg-active: var(--hive-color-surface-active-v4);
+  --button-color: var(--button-color-fg-on-light);
+}
+
+.variantGhost.colorPrimary {
+  --button-bg-hover: oklch(from var(--hive-color-brand-v4) 0.95 calc(c * 0.5) h);
+  --button-bg-active: oklch(from var(--hive-color-brand-v4) 0.9 calc(c * 0.6) h);
+}
+
+.variantGhost.colorWarning {
+  --button-bg-hover: oklch(from var(--hive-color-warning) 0.95 calc(c * 0.5) h);
+  --button-bg-active: oklch(from var(--hive-color-warning) 0.9 calc(c * 0.6) h);
+}
+
+.variantGhost.colorDanger {
+  --button-bg-hover: oklch(from var(--hive-color-error) 0.95 calc(c * 0.4) h);
+  --button-bg-active: oklch(from var(--hive-color-error) 0.9 calc(c * 0.5) h);
+}
+
+.variantLink {
+  --button-bg: transparent;
+  --button-bg-hover: transparent;
+  --button-bg-active: transparent;
+  --button-color: var(--hive-color-link-v4);
+}
+
+.colorPrimary {
+  --button-color-base: var(--hive-color-brand-v4);
+  --button-color-fg-on-base: var(--hive-color-text-v4);
+  --button-color-fg-on-light: var(--hive-color-text-v4);
+}
+
+.colorSecondary {
+  --button-color-base: var(--hive-color-secondary-v4);
+  --button-color-fg-on-base: var(--hive-color-text-v4);
+  --button-color-fg-on-light: var(--hive-color-text-v4);
+}
+
+.colorWarning {
+  --button-color-base: var(--hive-color-warning);
+  --button-color-fg-on-base: var(--hive-color-warning-darkest);
+  --button-color-fg-on-light: var(--hive-color-warning-darkest);
+}
+
+.colorDanger {
+  --button-color-base: var(--hive-color-error);
+  --button-color-fg-on-base: var(--hive-color-neutral-white-v4);
+  --button-color-fg-on-light: var(--hive-color-error);
+}
+
+.variantOutlined.colorSecondary {
+  --button-border: var(--hive-color-border-v4);
+  --button-border-hover: var(--hive-color-border-v4);
+}
+
+.variantOutlined.colorWarning {
+  --button-border: var(--hive-color-warning-darkest);
+  --button-border-hover: var(--hive-color-warning-darkest);
+}
+
+.body {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

package/lib/components/InteractiveList.d.ts

@@ -35,4 +35,4 @@ export declare const InteractiveListItem: ({ onRemoveItem, content, error, idx,
  * This component is meant to be used only from InteractiveListFormik
  * @private
  */
-export declare const InteractiveList: <V>({ label, children, error, name, value, helperText, inputIcon, type, inputValue, setInputValue, onAddItem, onRemoveItem, className, inputClassName, iconClassName, itemClassName, listClassName, "data-test": dataTest, }: InteractiveListProps<V>) => React.JSX.Element;
+export declare const InteractiveList: <V>({ label, children, error, name, value, helperText, placeholder, inputIcon, type, inputValue, setInputValue, onAddItem, onRemoveItem, className, inputClassName, iconClassName, itemClassName, listClassName, "data-test": dataTest, }: InteractiveListProps<V>) => React.JSX.Element;

package/lib/components/InteractiveList.js

@@ -5,7 +5,7 @@ import cn from 'classnames';
 import { IconButton } from './IconButton';
 import { Error, errorId } from './Error';
 import { TextField } from './TextField';
-import styles from './InteractiveList.module.scss';
+import styles from './InteractiveList.module.css';
 export const InteractiveListItem = ({ onRemoveItem, content, error, idx, 'data-test': dataTest }) => {
     const id = useUID();
     const errorProps = error
@@ -18,7 +18,7 @@ export const InteractiveListItem = ({ onRemoveItem, content, error, idx, 'data-t
         React.createElement("div", { "data-test": dataTest, className: styles.content },
             React.createElement("span", { id: id, ...errorProps }, content),
             ' ',
-            React.createElement(IconButton, { kind: "primary", ariaLabel: "Remove Item", icon: X, size: "medium", className: styles.removeIcon, onClick: () => {
+            React.createElement(IconButton, { variant: "ghost", ariaLabel: "Remove Item", size: "small", icon: X, className: styles.removeIcon, onClick: () => {
                     onRemoveItem(idx);
                 } })),
         error && React.createElement(Error, { error: error, inputId: id })));
@@ -27,11 +27,11 @@ export const InteractiveListItem = ({ onRemoveItem, content, error, idx, 'data-t
  * This component is meant to be used only from InteractiveListFormik
  * @private
  */
-export const InteractiveList = ({ label, children, error, name, value, helperText, inputIcon, type, inputValue, setInputValue, onAddItem, onRemoveItem, className, inputClassName, iconClassName, itemClassName, listClassName, 'data-test': dataTest = 'interactive-list', }) => {
+export const InteractiveList = ({ label, children, error, name, value, helperText, placeholder, inputIcon, type, inputValue, setInputValue, onAddItem, onRemoveItem, className, inputClassName, iconClassName, itemClassName, listClassName, 'data-test': dataTest = 'interactive-list', }) => {
     const id = useUID();
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { "data-test": dataTest, className: cn(styles.inputRow, className) },
-            React.createElement(TextField, { id: id, type: type, helperText: helperText, inputIcon: inputIcon, inputClassName: cn(styles.input, inputClassName), inputContainerClassName: styles.inputContainer, inputBorderOverlayClassName: styles.inputBorderOverlay, error: typeof error === 'string' ? error : undefined, label: label, name: name, value: inputValue, onChange: ({ target: { value } }) => {
+            React.createElement(TextField, { id: id, type: type, helperText: helperText, placeholder: placeholder, inputIcon: inputIcon, inputClassName: inputClassName, className: styles.field, error: typeof error === 'string' ? error : undefined, label: label, name: name, value: inputValue, onChange: ({ target: { value } }) => {
                     setInputValue(value);
                 }, onKeyDown: async (e) => {
                     if (e.key === 'Enter') {
@@ -39,7 +39,7 @@ export const InteractiveList = ({ label, children, error, name, value, helperTex
                         await onAddItem();
                     }
                 } },
-                React.createElement(IconButton, { "data-test": `${dataTest}-add-button`, kind: "transparent", ariaLabel: "Add Icon", icon: Plus, className: cn(styles.addIcon, iconClassName), size: "medium", onClick: () => void onAddItem() }))),
+                React.createElement(IconButton, { "data-test": `${dataTest}-add-button`, variant: "contained", color: "secondary", ariaLabel: "Add item", icon: Plus, className: cn(styles.addIcon, iconClassName), onClick: () => void onAddItem() }))),
         children,
         React.createElement("ul", { className: cn(styles.list, listClassName) }, value.map((str, idx) => (React.createElement("li", { key: str, className: itemClassName },
             React.createElement(InteractiveListItem, { onRemoveItem: onRemoveItem, idx: idx, content: str, "data-test": `${dataTest}-item`, error: typeof error === 'object' && error[idx] ? error[idx] : undefined })))))));

package/lib/components/InteractiveList.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveList.js","sourceRoot":"","sources":["../../src/components/InteractiveList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAGxC,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAA;AAE5D,OAAO,MAAM,MAAM,+BAA+B,CAAA;AAoClD,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,QAAQ,EAA4B,EAAE,EAAE;IAC5H,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IACnB,MAAM,UAAU,GAAG,KAAK;QACtB,CAAC,CAAC;YACE,cAAc,EAAE,IAAI;YACpB,mBAAmB,EAAE,OAAO,CAAC,EAAE,CAAC;SACjC;QACH,CAAC,CAAC,EAAE,CAAA;IAEN,OAAO,CACL;QACE,0CAAgB,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO;YACjD,8BAAM,EAAE,EAAE,EAAE,KAAM,UAAU,IACzB,OAAO,CACH;YAAC,GAAG;YACX,oBAAC,UAAU,IACT,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,aAAa,EACvB,IAAI,EAAE,CAAC,EACP,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,CAAC,GAAG,CAAC,CAAA;gBACnB,CAAC,GACD,CACE;QACL,KAAK,IAAI,oBAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,GAAI,CAC7C,CACJ,CAAA;AACH,CAAC,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAK,EAClC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,KAAK,EACL,UAAU,EACV,SAAS,EACT,IAAI,EACJ,UAAU,EACV,aAAa,EACb,SAAS,EACT,YAAY,EACZ,SAAS,EACT,cAAc,EACd,aAAa,EACb,aAAa,EACb,aAAa,EACb,WAAW,EAAE,QAAQ,GAAG,kBAAkB,GAClB,EAAE,EAAE;IAC5B,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IAEnB,OAAO,CACL;QACE,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC;YACjE,oBAAC,SAAS,IACR,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,EAChD,uBAAuB,EAAE,MAAM,CAAC,cAAc,EAC9C,2BAA2B,EAAE,MAAM,CAAC,kBAAkB,EACtD,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACpD,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE;oBAClC,aAAa,CAAC,KAAK,CAAC,CAAA;gBACtB,CAAC,EACD,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;oBACrB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;wBACtB,CAAC,CAAC,cAAc,EAAE,CAAA;wBAClB,MAAM,SAAS,EAAE,CAAA;oBACnB,CAAC;gBACH,CAAC;gBAED,oBAAC,UAAU,iBACE,GAAG,QAAQ,aAAa,EACnC,IAAI,EAAC,aAAa,EAClB,SAAS,EAAC,UAAU,EACpB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,aAAa,CAAC,EAC5C,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,SAAS,EAAE,GAC/B,CACQ,CACR;QACL,QAAQ;QACT,4BAAI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,IAC1C,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CACvB,4BAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,aAAa;YACpC,oBAAC,mBAAmB,IAClB,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,GAAG,eACD,GAAG,QAAQ,OAAO,EAC7B,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,GACvE,CACC,CACN,CAAC,CACC,CACJ,CACJ,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"InteractiveList.js","sourceRoot":"","sources":["../../src/components/InteractiveList.tsx"],"names":[],"mappings":"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"}

package/lib/components/InteractiveList.module.css

@@ -0,0 +1,59 @@
+.inputRow {
+  margin-bottom: calc(var(--hive-grid) * 3);
+}
+
+.field {
+  width: 100%;
+}
+
+.addIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: calc(var(--hive-grid) * 2);
+  border-radius: var(--hive-border-radius);
+  border: var(--hive-border-width) solid transparent;
+  background-color: var(--hive-color-secondary-v4);
+  color: var(--hive-color-text-v4);
+  width: calc(var(--hive-grid) * 9);
+  height: calc(var(--hive-grid) * 9);
+}
+
+.addIcon:hover,
+.addIcon:focus-visible {
+  background-color: color-mix(in oklab, var(--hive-color-secondary-v4) 75%, var(--hive-color-neutral-white-v4));
+  border-color: transparent;
+  color: var(--hive-color-brand-v4);
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: calc(var(--hive-grid) * 3);
+  min-height: calc(var(--hive-grid) * 9);
+  padding: 0 calc(var(--hive-grid) * 2);
+  border: var(--hive-border-width) solid var(--hive-color-border-v4);
+  border-radius: var(--hive-border-radius);
+  background: color-mix(in oklab, var(--hive-color-neutral-lighter-v4) 80%, var(--hive-color-neutral-white-v4));
+  color: var(--hive-color-text-v4);
+}
+
+.removeIcon {
+  color: var(--hive-color-text-secondary-v4);
+  margin-right: 0;
+  border: none;
+}
+
+.removeIcon:hover,
+.removeIcon:focus-visible {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--hive-color-text-v4);
+}

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>;