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

package/lib/components/Icon.js

@@ -1,50 +1,27 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var export_module = require('../styles/constants/export.module.scss.js');
-var Icon_module = require('./Icon.module.scss.js');
-
-const Icon = /*#__PURE__*/React.forwardRef(({
-  color,
-  icon: IconElement,
-  ariaLabel,
-  ariaLabelledBy,
-  ariaHidden,
-  className,
-  containerClassName,
-  size = 'medium',
-  bold = false,
-  role = 'img',
-  'data-test': dataTest
-}, ref) => {
-  const iconStroke = bold ? export_module.default.iconStrokeWidthBold : export_module.default.iconStrokeWidth;
-  const props = {
-    'aria-label': ariaLabel || 'icon',
-    'aria-labelledby': ariaLabelledBy,
-    'aria-hidden': ariaHidden,
-    color,
-    width: '1em',
-    height: '1em',
-    className: cn({
-      [Icon_module.default.small]: size === 'small',
-      [Icon_module.default.smallMedium]: size === 'smallMedium',
-      [Icon_module.default.medium]: size === 'medium',
-      [Icon_module.default.large]: size === 'large',
-      [Icon_module.default.xlarge]: size === 'xlarge'
-    }, className),
-    strokeWidth: iconStroke
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(Icon_module.default.iconContainer, containerClassName),
-    "data-test": dataTest,
-    ref: ref
-  }, /*#__PURE__*/React.createElement(IconElement, {
-    role: role,
-    ...props
-  }));
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import styleConsts from '../../styles/constants/export.module.scss';
+import styles from './Icon.module.scss';
+export const Icon = forwardRef(({ color, icon: IconElement, ariaLabel, ariaLabelledBy, ariaHidden, className, containerClassName, size = 'medium', bold = false, role = 'img', 'data-test': dataTest, }, ref) => {
+    const iconStroke = bold ? styleConsts.iconStrokeWidthBold : styleConsts.iconStrokeWidth;
+    const props = {
+        'aria-label': ariaLabel || 'icon',
+        'aria-labelledby': ariaLabelledBy,
+        'aria-hidden': ariaHidden,
+        color,
+        width: '1em',
+        height: '1em',
+        className: cn({
+            [styles.small]: size === 'small',
+            [styles.smallMedium]: size === 'smallMedium',
+            [styles.medium]: size === 'medium',
+            [styles.large]: size === 'large',
+            [styles.xlarge]: size === 'xlarge',
+        }, className),
+        strokeWidth: iconStroke,
+    };
+    return (React.createElement("div", { className: cn(styles.iconContainer, containerClassName), "data-test": dataTest, ref: ref },
+        React.createElement(IconElement, { role: role, ...props })));
 });
 Icon.displayName = 'Icon';
-
-exports.Icon = Icon;
-//# sourceMappingURL=Icon.js.map
+//# sourceMappingURL=Icon.js.map

package/lib/components/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../src/components/Icon.tsx"],"sourcesContent":[null],"names":["Icon","forwardRef","color","icon","IconElement","ariaLabel","ariaLabelledBy","ariaHidden","className","containerClassName","size","bold","role","dataTest","ref","iconStroke","styleConsts","iconStrokeWidthBold","iconStrokeWidth","props","width","height","cn","styles","small","smallMedium","medium","large","xlarge","strokeWidth","React","createElement","iconContainer","displayName"],"mappings":";;;;;;;AA8CO,MAAMA,IAAI,gBAAGC,gBAAU,CAC5B,CACE;EACEC,KAAK;AACLC,EAAAA,IAAI,EAAEC,WAAW;EACjBC,SAAS;EACTC,cAAc;EACdC,UAAU;EACVC,SAAS;EACTC,kBAAkB;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,IAAI,GAAG,KAAK;AACZ,EAAA,WAAW,EAAEC;CACd,EACDC,GAAG,KACD;EACF,MAAMC,UAAU,GAAGJ,IAAI,GAAGK,qBAAW,CAACC,mBAAmB,GAAGD,qBAAW,CAACE,eAAe;AAEvF,EAAA,MAAMC,KAAK,GAAyB;IAClC,YAAY,EAAEd,SAAS,IAAI,MAAM;AACjC,IAAA,iBAAiB,EAAEC,cAAc;AACjC,IAAA,aAAa,EAAEC,UAAU;IACzBL,KAAK;AACLkB,IAAAA,KAAK,EAAE,KAAK;AACZC,IAAAA,MAAM,EAAE,KAAK;IACbb,SAAS,EAAEc,EAAE,CACX;AACE,MAAA,CAACC,mBAAM,CAACC,KAAK,GAAGd,IAAI,KAAK,OAAO;AAChC,MAAA,CAACa,mBAAM,CAACE,WAAW,GAAGf,IAAI,KAAK,aAAa;AAC5C,MAAA,CAACa,mBAAM,CAACG,MAAM,GAAGhB,IAAI,KAAK,QAAQ;AAClC,MAAA,CAACa,mBAAM,CAACI,KAAK,GAAGjB,IAAI,KAAK,OAAO;AAChC,MAAA,CAACa,mBAAM,CAACK,MAAM,GAAGlB,IAAI,KAAK;KAC3B,EACDF,SAAS,CACV;AACDqB,IAAAA,WAAW,EAAEd;GACd;AAED,EAAA,oBACEe,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKvB,SAAS,EAAEc,EAAE,CAACC,mBAAM,CAACS,aAAa,EAAEvB,kBAAkB,CAAC;AAAA,IAAA,WAAA,EAAaI,QAAQ;AAAEC,IAAAA,GAAG,EAAEA;AAAG,GAAA,eACzFgB,KAAA,CAAAC,aAAA,CAAC3B,WAAW,EAAA;AAACQ,IAAAA,IAAI,EAAEA,IAAI;OAAMO;AAAK,GAAA,CAAI,CAClC;AAEV,CAAC;AAEHnB,IAAI,CAACiC,WAAW,GAAG,MAAM;;;;"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAA2B,MAAM,OAAO,CAAA;AACtE,OAAO,EAAE,MAAM,YAAY,CAAA;AAI3B,OAAO,WAAW,MAAM,2CAA2C,CAAA;AACnE,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAwCvC,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EACE,KAAK,EACL,IAAI,EAAE,WAAW,EACjB,SAAS,EACT,cAAc,EACd,UAAU,EACV,SAAS,EACT,kBAAkB,EAClB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,KAAK,EACZ,IAAI,GAAG,KAAK,EACZ,WAAW,EAAE,QAAQ,GACtB,EACD,GAAG,EACH,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC,CAAC,WAAW,CAAC,eAAe,CAAA;IAEvF,MAAM,KAAK,GAAyB;QAClC,YAAY,EAAE,SAAS,IAAI,MAAM;QACjC,iBAAiB,EAAE,cAAc;QACjC,aAAa,EAAE,UAAU;QACzB,KAAK;QACL,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,EAAE,CACX;YACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,IAAI,KAAK,aAAa;YAC5C,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;YAClC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;SACnC,EACD,SAAS,CACV;QACD,WAAW,EAAE,UAAU;KACxB,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,kBAAkB,CAAC,eAAa,QAAQ,EAAE,GAAG,EAAE,GAAG;QACzF,oBAAC,WAAW,IAAC,IAAI,EAAE,IAAI,KAAM,KAAK,GAAI,CAClC,CACP,CAAA;AACH,CAAC,CACF,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA"}

package/lib/components/Icon.module.scss

@@ -0,0 +1,33 @@
+@use '../../styles/constants' as c;
+
+.iconContainer {
+  display: inline-block;
+
+  // Note: Font-size reset in order break inheritance.
+  font-size: 0;
+
+  .small {
+    width: c.$iconSizeSmall;
+    height: c.$iconSizeSmall;
+  }
+
+  .smallMedium {
+    width: c.$iconSizeSmallMedium;
+    height: c.$iconSizeSmallMedium;
+  }
+
+  .medium {
+    width: c.$iconSizeMedium;
+    height: c.$iconSizeMedium;
+  }
+
+  .large {
+    width: c.$iconSizeLarge;
+    height: c.$iconSizeLarge;
+  }
+
+  .xlarge {
+    width: c.$iconSizeXLarge;
+    height: c.$iconSizeXLarge;
+  }
+}

package/lib/components/IconButton.js

@@ -1,83 +1,25 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var reactUid = require('react-uid');
-var mergeRefs = require('react-merge-refs');
-var components_Icon = require('./Icon.js');
-var components_Tooltip = require('./Tooltip.js');
-var components_Loader = require('./Loader.js');
-var IconButton_module = require('./IconButton.module.scss.js');
-
-const IconButton = /*#__PURE__*/React.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) => {
-  const tooltipId = reactUid.useUID();
-  const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
-  const labelledByFinal = [ariaLabelledBy, disabled ? tooltipId : undefined].filter(Boolean).join(' ');
-  return /*#__PURE__*/React.createElement(components_Tooltip.Tooltip, {
-    id: tooltipId,
-    content: disabled ? disabledTooltip : tooltip,
-    placement: disabled ? disabledTooltipPlacement : tooltipPlacement,
-    visible: disabled ? disabledTooltipVisible : tooltipVisible
-  }, tooltipRef => (/*#__PURE__*/React.createElement(Component, {
-    className: cn(IconButton_module.default.iconButton, {
-      [IconButton_module.default.primary]: kind === 'primary',
-      [IconButton_module.default.transparent]: kind === 'transparent',
-      [IconButton_module.default.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
-  }, /*#__PURE__*/React.createElement("span", {
-    className: IconButton_module.default.body,
-    ref: mergeRefs([ref, tooltipRef])
-  }, loading && /*#__PURE__*/React.createElement(components_Loader.Loader, {
-    role: loaderRole,
-    size: size
-  }), !loading && (/*#__PURE__*/React.createElement(components_Icon.Icon, {
-    role: iconRole,
-    className: iconClassName,
-    color: iconColor,
-    "data-test": `${dataTest}-icon`,
-    icon: icon,
-    size: size,
-    ariaHidden: true
-  }))))));
+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) => {
+    const tooltipId = useUID();
+    const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
+    const labelledByFinal = [ariaLabelledBy, disabled ? tooltipId : undefined].filter(Boolean).join(' ');
+    return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : 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 })))))));
 });
 IconButton.displayName = 'IconButton';
-
-exports.IconButton = IconButton;
-//# sourceMappingURL=IconButton.js.map
+//# sourceMappingURL=IconButton.js.map

package/lib/components/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../src/components/IconButton.tsx"],"sourcesContent":[null],"names":["IconButton","forwardRef","component","Component","icon","iconClassName","iconColor","iconRole","loaderRole","className","size","kind","ariaHidden","ariaLabelledBy","ariaLabel","disabled","disabledTooltip","disabledTooltipVisible","disabledTooltipPlacement","rel","target","type","loading","padding","tooltip","tooltipPlacement","tooltipVisible","dataTest","rest","ref","tooltipId","useUID","relFinal","Array","isArray","join","labelledByFinal","undefined","filter","Boolean","React","createElement","Tooltip","id","content","placement","visible","tooltipRef","cn","styles","iconButton","primary","transparent","paddingNormal","body","mergeRefs","Loader","role","Icon","color","displayName"],"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.scss

@@ -0,0 +1,59 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+.iconButton {
+  display: inline-flex;
+  cursor: pointer;
+  border: c.$borderWidth solid transparent;
+  background-color: transparent;
+  border-radius: c.$borderRadius;
+  color: inherit;
+  padding: 0;
+  box-sizing: border-box;
+
+  &.paddingNormal {
+    // With icon size "normal" matches text input
+    /* doiuse-disable calc */
+    padding: calc(#{c.$grid * 2} - #{c.$borderWidth});
+    /* doiuse-enable calc */
+  }
+
+  .body {
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &.primary {
+    color: c.$colorPrimary;
+
+    &:hover,
+    &.hover {
+      background-color: c.$colorNeutralLighter;
+      border-color: c.$colorNeutralLight;
+    }
+
+    &:disabled {
+      background-color: transparent;
+      border-color: transparent;
+      color: c.$colorTextSecondary;
+    }
+
+    &:focus,
+    &.focus {
+      @include h.outlineFormField;
+    }
+  }
+
+  &.transparent {
+    color: inherit;
+
+    &:focus,
+    &.focus {
+      @include h.outlineFormField;
+    }
+  }
+}

package/lib/components/InteractiveList.js

@@ -1,121 +1,47 @@
-'use strict';
-
-var React = require('react');
-var reactFeather = require('react-feather');
-var reactUid = require('react-uid');
-var cn = require('classnames');
-var components_IconButton = require('./IconButton.js');
-var components_Error = require('./Error.js');
-var components_TextField = require('./TextField.js');
-var InteractiveList_module = require('./InteractiveList.module.scss.js');
-
-const InteractiveListItem = ({
-  onRemoveItem,
-  content,
-  error,
-  idx,
-  'data-test': dataTest
-}) => {
-  const id = reactUid.useUID();
-  const errorProps = error ? {
-    'aria-invalid': true,
-    'aria-errormessage': components_Error.errorId(id)
-  } : {};
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: InteractiveList_module.default.content
-  }, /*#__PURE__*/React.createElement("span", {
-    id: id,
-    ...errorProps
-  }, content), ' ', /*#__PURE__*/React.createElement(components_IconButton.IconButton, {
-    kind: "primary",
-    ariaLabel: "Remove Item",
-    icon: reactFeather.X,
-    size: "medium",
-    className: InteractiveList_module.default.removeIcon,
-    onClick: () => {
-      onRemoveItem(idx);
-    }
-  })), error && /*#__PURE__*/React.createElement(components_Error.Error, {
-    error: error,
-    inputId: id
-  }));
+import React from 'react';
+import { Plus, X } from 'react-feather';
+import { useUID } from 'react-uid';
+import cn from 'classnames';
+import { IconButton } from './IconButton';
+import { Error, errorId } from './Error';
+import { TextField } from './TextField';
+import styles from './InteractiveList.module.scss';
+export const InteractiveListItem = ({ onRemoveItem, content, error, idx, 'data-test': dataTest }) => {
+    const id = useUID();
+    const errorProps = error
+        ? {
+            'aria-invalid': true,
+            'aria-errormessage': errorId(id),
+        }
+        : {};
+    return (React.createElement(React.Fragment, null,
+        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: () => {
+                    onRemoveItem(idx);
+                } })),
+        error && React.createElement(Error, { error: error, inputId: id })));
 };
 /**
  * This component is meant to be used only from InteractiveListFormik
  * @private
  */
-const InteractiveList = ({
-  label,
-  children,
-  error,
-  name,
-  value,
-  helperText,
-  inputIcon,
-  type,
-  inputValue,
-  setInputValue,
-  onAddItem,
-  onRemoveItem,
-  className,
-  inputClassName,
-  iconClassName,
-  itemClassName,
-  listClassName,
-  'data-test': dataTest = 'interactive-list'
-}) => {
-  const id = reactUid.useUID();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: cn(InteractiveList_module.default.inputRow, className)
-  }, /*#__PURE__*/React.createElement(components_TextField.TextField, {
-    id: id,
-    type: type,
-    helperText: helperText,
-    inputIcon: inputIcon,
-    inputClassName: cn(InteractiveList_module.default.input, inputClassName),
-    inputContainerClassName: InteractiveList_module.default.inputContainer,
-    inputBorderOverlayClassName: InteractiveList_module.default.inputBorderOverlay,
-    error: typeof error === 'string' ? error : undefined,
-    label: label,
-    name: name,
-    value: inputValue,
-    onChange: ({
-      target: {
-        value
-      }
-    }) => {
-      setInputValue(value);
-    },
-    onKeyDown: async e => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        await onAddItem();
-      }
-    }
-  }, /*#__PURE__*/React.createElement(components_IconButton.IconButton, {
-    "data-test": `${dataTest}-add-button`,
-    kind: "transparent",
-    ariaLabel: "Add Icon",
-    icon: reactFeather.Plus,
-    className: cn(InteractiveList_module.default.addIcon, iconClassName),
-    size: "medium",
-    onClick: () => void onAddItem()
-  }))), children, /*#__PURE__*/React.createElement("ul", {
-    className: cn(InteractiveList_module.default.list, listClassName)
-  }, value.map((str, idx) => (/*#__PURE__*/React.createElement("li", {
-    key: str,
-    className: itemClassName
-  }, /*#__PURE__*/React.createElement(InteractiveListItem, {
-    onRemoveItem: onRemoveItem,
-    idx: idx,
-    content: str,
-    "data-test": `${dataTest}-item`,
-    error: typeof error === 'object' && error[idx] ? error[idx] : undefined
-  }))))));
+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', }) => {
+    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 } }) => {
+                    setInputValue(value);
+                }, onKeyDown: async (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        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() }))),
+        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 })))))));
 };
-
-exports.InteractiveList = InteractiveList;
-exports.InteractiveListItem = InteractiveListItem;
-//# sourceMappingURL=InteractiveList.js.map
+//# sourceMappingURL=InteractiveList.js.map

package/lib/components/InteractiveList.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveList.js","sources":["../../src/components/InteractiveList.tsx"],"sourcesContent":[null],"names":["InteractiveListItem","onRemoveItem","content","error","idx","dataTest","id","useUID","errorProps","errorId","React","createElement","Fragment","className","styles","IconButton","kind","ariaLabel","icon","X","size","removeIcon","onClick","Error","inputId","InteractiveList","label","children","name","value","helperText","inputIcon","type","inputValue","setInputValue","onAddItem","inputClassName","iconClassName","itemClassName","listClassName","cn","inputRow","TextField","input","inputContainerClassName","inputContainer","inputBorderOverlayClassName","inputBorderOverlay","undefined","onChange","target","onKeyDown","e","key","preventDefault","Plus","addIcon","list","map","str"],"mappings":"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"}
+{"version":3,"file":"InteractiveList.js","sourceRoot":"","sources":["../../src/components/InteractiveList.tsx"],"names":[],"mappings":"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"}

package/lib/components/InteractiveList.module.scss

@@ -0,0 +1,72 @@
+@use 'sass:math';
+@use '../../styles/constants' as c;
+
+$addIconSpacing: c.$grid;
+
+.inputRow {
+  display: flex;
+  margin-bottom: c.$grid * 3;
+
+  .input {
+    border-right: none;
+  }
+
+  .inputBorderOverlay {
+    border-radius: c.$borderRadius 0 0 c.$borderRadius;
+    border-right: none;
+  }
+
+  .inputContainer {
+    border-radius: c.$borderRadius 0 0 c.$borderRadius;
+
+    .input:focus {
+      & ~ .inputBorderOverlay {
+        border-right: none;
+        box-shadow: none;
+        border-color: c.$colorPrimary;
+      }
+    }
+  }
+
+  .addIcon {
+    display: block;
+    border-radius: 0 c.$borderRadius c.$borderRadius 0;
+    border: c.$borderWidth solid c.$colorPrimary;
+    background-color: c.$colorPrimary;
+    color: c.$colorNeutralWhite;
+    height: c.$inputHeight;
+    width: c.$inputHeight;
+
+    &:hover {
+      background-color: c.$colorPrimaryLight;
+      border-color: c.$colorPrimaryLight;
+    }
+  }
+}
+
+ul.list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+
+  .removeIcon {
+    margin-right: 0;
+
+    &:hover {
+      background-color: transparent;
+      border-color: transparent;
+      color: c.$colorPrimaryLight;
+    }
+  }
+
+  .content {
+    background: c.$colorOverlayBackground;
+    padding: math.div(c.$grid, 3) c.$grid math.div(c.$grid, 3) c.$grid * 2;
+    margin-top: c.$grid * 3;
+    border: c.$borderWidth solid c.$colorNeutralLight;
+    border-radius: c.$borderRadius;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}