@capillarytech/blaze-ui 5.23.3-beta.3 → 5.23.3-beta.5

package/CapActionBar/index.js

@@ -1,83 +1,50 @@
-var _excluded = ["options"],
-  _excluded2 = ["label", "value"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-/**
- * CapActionBar
- */
-import classNames from 'classnames';
-import React from 'react';
-import CapButton from "../CapButton";
-import CapColumn from "../CapColumn";
-import CapFormItem from "../CapFormItem";
-import { CapInputSearch } from "../CapInput";
-import CapRadioButton from "../CapRadioButton";
-import CapRadioGroup from "../CapRadioGroup";
-import CapRow from "../CapRow";
-import CapSelect from "../CapSelect";
-import './styles.scss';
-const styles = {"cap-action-bar":"cap-action-bar_8vvXH"};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var clsPrefix = 'cap-action-bar';
-function RadioButtonComponent(_ref) {
-  var {
-      options
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/_jsx(CapRadioGroup, _extends({}, otherProps, {
-    children: options.map(option => {
-      var {
-          label,
-          value
-        } = option,
-        restOptionProps = _objectWithoutPropertiesLoose(option, _excluded2);
-      return /*#__PURE__*/_jsx(CapRadioButton, _extends({
-        value: value
-      }, restOptionProps, {
-        children: label
-      }), value);
-    })
-  }));
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import CapButton from "../CapButton/index.js";
+import CapColumn from "../CapColumn/index.js";
+import CapFormItem from "../CapFormItem/index.js";
+import "../CapInput/index.js";
+import CapRadioButton from "../CapRadioButton/index.js";
+import CapRadioGroup from "../CapRadioGroup/index.js";
+import CapRow from "../CapRow/index.js";
+import CapSelectFinal from "../CapSelect/index.js";
+import styles from "./styles.module.scss.js";
+import CapSearch from "../CapInput/Search.js";
+const clsPrefix = "cap-action-bar";
+function RadioButtonComponent({
+  options,
+  ...otherProps
+}) {
+  return /* @__PURE__ */ jsx(CapRadioGroup, { ...otherProps, children: options.map((option) => {
+    const { label, value, ...restOptionProps } = option;
+    return /* @__PURE__ */ jsx(CapRadioButton, { value, ...restOptionProps, children: label }, value);
+  }) });
 }
-var CapActionBar = _ref2 => {
-  var {
-    className,
-    search,
-    filterItemOne,
-    filterItemTwo,
-    sort,
-    actionItemOne,
-    actionItemTwo,
-    row
-  } = _ref2;
-  var rowProps = (row == null ? void 0 : row.props) || {};
-  return /*#__PURE__*/_jsxs(CapRow, _extends({}, rowProps, {
-    className: classNames(styles[clsPrefix], className),
-    children: [search && /*#__PURE__*/_jsx(CapColumn, _extends({}, search.capColumn, {
-      children: /*#__PURE__*/_jsx(CapFormItem, _extends({}, search.formItem, {
-        children: /*#__PURE__*/_jsx(CapInputSearch, _extends({}, search.props))
-      }))
-    })), filterItemOne && /*#__PURE__*/_jsx(CapColumn, _extends({}, filterItemOne.capColumn, {
-      children: /*#__PURE__*/_jsx(CapFormItem, _extends({}, filterItemOne.formItem, {
-        children: filterItemOne.radioButton ? /*#__PURE__*/_jsx(RadioButtonComponent, _extends({}, filterItemOne.props)) : /*#__PURE__*/_jsx(CapSelect, _extends({}, filterItemOne.props))
-      }))
-    })), filterItemTwo && /*#__PURE__*/_jsx(CapColumn, _extends({}, filterItemTwo.capColumn, {
-      children: /*#__PURE__*/_jsx(CapFormItem, _extends({}, filterItemTwo.formItem, {
-        children: /*#__PURE__*/_jsx(CapSelect, _extends({}, filterItemTwo.props))
-      }))
-    })), sort && /*#__PURE__*/_jsx(CapColumn, _extends({}, sort.capColumn, {
-      children: /*#__PURE__*/_jsx(CapFormItem, _extends({}, sort.formItem, {
-        children: /*#__PURE__*/_jsx(CapSelect, _extends({}, sort.props))
-      }))
-    })), actionItemOne && /*#__PURE__*/_jsx(CapColumn, _extends({}, actionItemOne.capColumn, {
-      children: /*#__PURE__*/_jsx(CapButton, _extends({}, actionItemOne.props, {
-        children: actionItemOne.props.children
-      }))
-    })), actionItemTwo && /*#__PURE__*/_jsx(CapColumn, _extends({}, actionItemTwo.capColumn, {
-      children: /*#__PURE__*/_jsx(CapButton, _extends({}, actionItemTwo.props, {
-        children: actionItemTwo.props.children
-      }))
-    }))]
-  }));
+const CapActionBar = ({
+  className,
+  search,
+  filterItemOne,
+  filterItemTwo,
+  sort,
+  actionItemOne,
+  actionItemTwo,
+  row
+}) => {
+  const rowProps = (row == null ? void 0 : row.props) || {};
+  return /* @__PURE__ */ jsxs(CapRow, { ...rowProps, className: classNames(styles[clsPrefix], className), children: [
+    search && /* @__PURE__ */ jsx(CapColumn, { ...search.capColumn, children: /* @__PURE__ */ jsx(CapFormItem, { ...search.formItem, children: /* @__PURE__ */ jsx(CapSearch, { ...search.props }) }) }),
+    filterItemOne && /* @__PURE__ */ jsx(CapColumn, { ...filterItemOne.capColumn, children: /* @__PURE__ */ jsx(CapFormItem, { ...filterItemOne.formItem, children: filterItemOne.radioButton ? /* @__PURE__ */ jsx(
+      RadioButtonComponent,
+      {
+        ...filterItemOne.props
+      }
+    ) : /* @__PURE__ */ jsx(CapSelectFinal, { ...filterItemOne.props }) }) }),
+    filterItemTwo && /* @__PURE__ */ jsx(CapColumn, { ...filterItemTwo.capColumn, children: /* @__PURE__ */ jsx(CapFormItem, { ...filterItemTwo.formItem, children: /* @__PURE__ */ jsx(CapSelectFinal, { ...filterItemTwo.props }) }) }),
+    sort && /* @__PURE__ */ jsx(CapColumn, { ...sort.capColumn, children: /* @__PURE__ */ jsx(CapFormItem, { ...sort.formItem, children: /* @__PURE__ */ jsx(CapSelectFinal, { ...sort.props }) }) }),
+    actionItemOne && /* @__PURE__ */ jsx(CapColumn, { ...actionItemOne.capColumn, children: /* @__PURE__ */ jsx(CapButton, { ...actionItemOne.props, children: actionItemOne.props.children }) }),
+    actionItemTwo && /* @__PURE__ */ jsx(CapColumn, { ...actionItemTwo.capColumn, children: /* @__PURE__ */ jsx(CapButton, { ...actionItemTwo.props, children: actionItemTwo.props.children }) })
+  ] });
+};
+export {
+  CapActionBar as default
 };
-export default CapActionBar;

package/CapActionBar/styles.module.css

@@ -0,0 +1,11 @@
+/* Color Palette */
+/* Fonts */
+/* Backward Compatibility Aliases */
+/* Component Heights */
+/* Border Radius */
+/* Border Width */
+/* Transition */
+/* Timezones Footer */
+.cap-action-bar {
+  align-items: baseline;
+}

package/CapActionBar/styles.module.scss.js

@@ -0,0 +1,6 @@
+import './styles.module.css';const styles = {
+  "cap-action-bar": "cap-action-bar"
+};
+export {
+  styles as default
+};

package/CapAdvancedIcon/index.js

@@ -1,66 +1,74 @@
-var _excluded = ["type", "backgroundColor", "actionNodes", "label", "preview", "dragRef", "backgroundProps", "positionLabel", "id", "isConfigured", "isDisabled", "userHistoryProps", "hasError", "joinBlockNameArray", "showStoreUploadStatusIcon", "StoreUploadStatusIndicator", "abTestStatus", "journeyStatus", "isJourneyMetaVersion"];
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import classnames from 'classnames';
-import React, { useState, useCallback } from 'react';
-import { CHANNEL_TO_ICONS_MAPPING, EMAIL, RUNNING, RESULT_AWAITING, LIVE } from "../CapDnDGraph/constants";
-import CapHeading from "../CapHeading";
-import CapIcon from "../CapIcon";
-import CapLabel from "../CapLabel";
-import CapPopover from "../CapPopover";
-import CapRow from "../CapRow";
-import CapTooltip from "../CapTooltip";
-import { CAP_YELLOW, CAP_G05, CAP_WHITE } from "../styles/_variables";
-import './styles.scss';
-const styles = {"advanced-icon-container":"advanced-icon-container_ZTm7j","action-icon-container":"action-icon-container_d1xff","error-icon-container":"error-icon-container_D--dR","cap-icon-v2":"cap-icon-v2_CnoxJ","top-left-action-icon-container":"top-left-action-icon-container_SK15l","bottom-left-action-icon-container":"bottom-left-action-icon-container_uEryx","top-right-action-icon-container":"top-right-action-icon-container_Hp-lg","bottom-right-action-icon-container":"bottom-right-action-icon-container_KTHyk","top-center-error-icon-container":"top-center-error-icon-container_5L0VY","item-disabled":"item-disabled_V7UE4","icon-wrapper":"icon-wrapper_bE3Lh","icon-wrapper--with-color":"icon-wrapper--with-color_Fjq-I","label-row":"label-row_39VUK","label-row--position-label":"label-row--position-label_QXNwW","join-link-row":"join-link-row_w-gxz","join-link-label":"join-link-label_Pthil","migrate-desc":"migrate-desc_co3CQ","engagement-block-replacement-preview":"engagement-block-replacement-preview_fP1ux","engagement-block-replacement-menu":"engagement-block-replacement-menu_yNH2U","replacement-block-menu-icon":"replacement-block-menu-icon_8Uc7F","replacement-block-menu-icon-other-channels":"replacement-block-menu-icon-other-channels_hbq-K","engagement-block-replacement-preview-content":"engagement-block-replacement-preview-content_kdb6F","engagement-block-replacement-preview-heading":"engagement-block-replacement-preview-heading_wNLjj"};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-var getEngagementBlocksContent = (id, engagementBlocks, onChangeCurrentEngagementBlock, replaceEngagementBlockMsg) => /*#__PURE__*/_jsxs(CapRow, {
-  className: "engagement-block-replacement-preview-content_kdb6F",
-  children: [/*#__PURE__*/_jsx(CapHeading, {
-    type: "label6",
-    className: "engagement-block-replacement-preview-heading_wNLjj",
-    children: replaceEngagementBlockMsg
-  }), engagementBlocks == null ? void 0 : engagementBlocks.map(_ref => {
-    var {
-      name: blockName,
-      type: iconType,
-      label
-    } = _ref;
-    return /*#__PURE__*/_jsxs(CapRow, {
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useState, useCallback } from "react";
+import { LIVE, RUNNING, RESULT_AWAITING, EMAIL, CHANNEL_TO_ICONS_MAPPING } from "../CapDnDGraph/constants.js";
+import CapHeadingWithStatic from "../CapHeading/index.js";
+import CapIcon from "../CapIcon/index.js";
+import CapLabelWithStatic from "../CapLabel/index.js";
+import CapPopover from "../CapPopover/index.js";
+import CapRow from "../CapRow/index.js";
+import CapTooltip from "../CapTooltip/index.js";
+import { CAP_WHITE, CAP_YELLOW, CAP_G05 } from "../styles/_variables.js";
+import styles from "./styles.module.scss.js";
+const getEngagementBlocksContent = (id, engagementBlocks, onChangeCurrentEngagementBlock, replaceEngagementBlockMsg) => /* @__PURE__ */ jsxs(CapRow, { className: styles["engagement-block-replacement-preview-content"], children: [
+  /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "label6", className: styles["engagement-block-replacement-preview-heading"], children: replaceEngagementBlockMsg }),
+  engagementBlocks == null ? void 0 : engagementBlocks.map(({ name: blockName, type: iconType, label }) => /* @__PURE__ */ jsxs(
+    CapRow,
+    {
       type: "flex",
       align: "middle",
-      className: "engagement-block-replacement-menu_yNH2U",
-      onClick: () => onChangeCurrentEngagementBlock == null ? void 0 : onChangeCurrentEngagementBlock(blockName, id || '', CHANNEL_TO_ICONS_MAPPING[blockName] || ''),
-      children: [/*#__PURE__*/_jsx(CapIcon, {
-        type: iconType,
-        svgProps: {
-          fill: 'black',
-          height: '1em',
-          width: '1em',
-          viewBox: blockName === CHANNEL_TO_ICONS_MAPPING.VIBER ? '0 0 18 18' : '0 0 24 24'
-        },
-        size: "s",
-        className: classnames(blockName === EMAIL ? "replacement-block-menu-icon_8Uc7F" : "replacement-block-menu-icon-other-channels_hbq-K")
-      }), /*#__PURE__*/_jsxs(CapLabel, {
-        type: "label15",
-        children: [" ", label, " "]
-      })]
-    }, blockName);
-  })]
-});
-var getEngagementBlocks = (showEngagementBlocks, setShowEngagementBlocks, ActionIcon, id, engagementBlocks, onChangeCurrentEngagementBlock, replaceEngagementBlockMsg) => /*#__PURE__*/_jsx(CapPopover, {
-  content: getEngagementBlocksContent(id, engagementBlocks, onChangeCurrentEngagementBlock, replaceEngagementBlockMsg),
-  classNames: {
-    root: "engagement-block-replacement-preview_fP1ux"
-  },
-  placement: "bottom",
-  trigger: "click",
-  open: showEngagementBlocks,
-  onOpenChange: setShowEngagementBlocks,
-  children: ActionIcon
-});
-var getActionIcons = (actionNodes, id, showEngagementBlocks, setShowEngagementBlocks) => actionNodes.map(node => {
-  var {
+      className: styles["engagement-block-replacement-menu"],
+      onClick: () => onChangeCurrentEngagementBlock == null ? void 0 : onChangeCurrentEngagementBlock(
+        blockName,
+        id || "",
+        CHANNEL_TO_ICONS_MAPPING[blockName] || ""
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          CapIcon,
+          {
+            type: iconType,
+            svgProps: {
+              fill: "black",
+              height: "1em",
+              width: "1em",
+              viewBox: blockName === CHANNEL_TO_ICONS_MAPPING.VIBER ? "0 0 18 18" : "0 0 24 24"
+            },
+            size: "s",
+            className: classNames(
+              blockName === EMAIL ? styles["replacement-block-menu-icon"] : styles["replacement-block-menu-icon-other-channels"]
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(CapLabelWithStatic, { type: "label15", children: [
+          " ",
+          label,
+          " "
+        ] })
+      ]
+    },
+    blockName
+  ))
+] });
+const getEngagementBlocks = (showEngagementBlocks, setShowEngagementBlocks, ActionIcon, id, engagementBlocks, onChangeCurrentEngagementBlock, replaceEngagementBlockMsg) => /* @__PURE__ */ jsx(
+  CapPopover,
+  {
+    content: getEngagementBlocksContent(
+      id,
+      engagementBlocks,
+      onChangeCurrentEngagementBlock,
+      replaceEngagementBlockMsg
+    ),
+    classNames: { root: styles["engagement-block-replacement-preview"] },
+    placement: "bottom",
+    trigger: "click",
+    open: showEngagementBlocks,
+    onOpenChange: setShowEngagementBlocks,
+    children: ActionIcon
+  }
+);
+const getActionIcons = (actionNodes, id, showEngagementBlocks, setShowEngagementBlocks) => actionNodes.map((node) => {
+  const {
     type,
     backgroundColor,
     position,
@@ -68,145 +76,174 @@ var getActionIcons = (actionNodes, id, showEngagementBlocks, setShowEngagementBl
     isJourneyMetaVersion,
     engagementBlocks,
     onChangeCurrentEngagementBlock,
-    replaceEngagementBlockMsg = ''
+    replaceEngagementBlockMsg = ""
   } = node;
-  var ActionIcon = /*#__PURE__*/_jsx(CapIcon, _extends({
-    type: type,
-    withBackground: true,
-    backgroundProps: {
-      style: {
-        backgroundColor: backgroundColor || CAP_G05
+  const ActionIcon = /* @__PURE__ */ jsx(
+    CapIcon,
+    {
+      type,
+      withBackground: true,
+      backgroundProps: {
+        style: {
+          backgroundColor: backgroundColor || CAP_G05
+        },
+        className: classNames(
+          position && styles[`${position}-action-icon-container`],
+          styles["action-icon-container"]
+        )
       },
-      className: classnames(position && styles[position + "-action-icon-container"], "action-icon-container_d1xff")
+      onClick: () => node.onClick({ blockId: id || "", actionType: type }),
+      ...nodeProps,
+      size: "xs"
     },
-    onClick: () => node.onClick({
-      blockId: id || '',
-      actionType: type
-    })
-  }, nodeProps, {
-    size: "xs"
-  }), type);
-  // Show engagement block replace action icon if journeyMetaVersion is true otherwise delete action icon
+    type
+  );
   if (isJourneyMetaVersion) {
-    return /*#__PURE__*/_jsx(CapTooltip, {
-      title: replaceEngagementBlockMsg,
-      children: getEngagementBlocks(showEngagementBlocks, setShowEngagementBlocks, ActionIcon, id, engagementBlocks, onChangeCurrentEngagementBlock, replaceEngagementBlockMsg)
-    }, type);
+    return /* @__PURE__ */ jsx(CapTooltip, { title: replaceEngagementBlockMsg, children: getEngagementBlocks(
+      showEngagementBlocks,
+      setShowEngagementBlocks,
+      ActionIcon,
+      id,
+      engagementBlocks,
+      onChangeCurrentEngagementBlock,
+      replaceEngagementBlockMsg
+    ) }, type);
   }
   return ActionIcon;
 });
-var CapAdvancedIcon = _ref2 => {
-  var {
-      type,
-      backgroundColor,
-      actionNodes = [],
-      label,
-      preview,
-      dragRef,
-      backgroundProps,
-      positionLabel,
-      id,
-      isDisabled,
-      userHistoryProps,
-      hasError,
-      joinBlockNameArray = [],
-      showStoreUploadStatusIcon = false,
-      StoreUploadStatusIndicator,
-      abTestStatus,
-      journeyStatus,
-      isJourneyMetaVersion
-    } = _ref2,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
-  var [actionIconsVisible, setActionIconsVisibility] = useState(false);
-  var [showEngagementBlocks, setShowEngagementBlocks] = useState(false);
-  var showActionIcons = useCallback(() => {
+const CapAdvancedIcon = ({
+  type,
+  backgroundColor,
+  actionNodes = [],
+  label,
+  preview,
+  dragRef,
+  backgroundProps,
+  positionLabel,
+  id,
+  isConfigured: _isConfigured,
+  isDisabled,
+  userHistoryProps,
+  hasError,
+  joinBlockNameArray = [],
+  showStoreUploadStatusIcon = false,
+  StoreUploadStatusIndicator,
+  abTestStatus,
+  journeyStatus,
+  isJourneyMetaVersion,
+  ...rest
+}) => {
+  const [actionIconsVisible, setActionIconsVisibility] = useState(false);
+  const [showEngagementBlocks, setShowEngagementBlocks] = useState(false);
+  const showActionIcons = useCallback(() => {
     setActionIconsVisibility(true);
   }, []);
-  var hideActionIcons = useCallback(() => {
+  const hideActionIcons = useCallback(() => {
     setActionIconsVisibility(false);
   }, []);
-  var joinBlockNameArrayLength = joinBlockNameArray.length;
-  var getShowActionIcons = () => {
-    actionNodes.length ? showActionIcons() : undefined;
+  const joinBlockNameArrayLength = joinBlockNameArray.length;
+  const getShowActionIcons = () => {
+    actionNodes.length ? showActionIcons() : void 0;
     if (joinBlockNameArrayLength > 0 && id) {
-      var element = document.getElementById(id);
+      const element = document.getElementById(id);
       if (element) {
-        element.style.transform = 'translateY(-10px)';
+        element.style.transform = "translateY(-10px)";
       }
     }
   };
-  var gethideActionIcons = () => {
-    actionNodes.length ? hideActionIcons() : undefined;
+  const gethideActionIcons = () => {
+    actionNodes.length ? hideActionIcons() : void 0;
     if (joinBlockNameArrayLength > 0 && id) {
-      var element = document.getElementById(id);
+      const element = document.getElementById(id);
       if (element) {
-        element.style.transform = 'translateY(0px)';
+        element.style.transform = "translateY(0px)";
       }
     }
     setShowEngagementBlocks(false);
   };
-  var getBlockStatusIcon = (iconType, ariaLabel) => /*#__PURE__*/_jsx(CapIcon, {
-    type: iconType,
-    "aria-label": ariaLabel,
-    className: classnames("top-center-error-icon-container_5L0VY", "error-icon-container_D--dR"),
-    size: "s"
-  });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [joinBlockNameArrayLength > 0 && /*#__PURE__*/_jsxs(CapRow, {
-      className: "join-link-row_w-gxz",
-      id: id,
-      children: [/*#__PURE__*/_jsx(CapIcon, {
-        type: "join-link",
-        size: "s"
-      }), /*#__PURE__*/_jsx(CapTooltip, {
-        title: joinBlockNameArray.join(', '),
-        children: /*#__PURE__*/_jsx(CapLabel, {
-          type: "label9",
-          className: "join-link-label_Pthil",
-          children: joinBlockNameArrayLength === 1 ? joinBlockNameArray[0] : joinBlockNameArrayLength + " joins"
-        })
-      })]
-    }), (userHistoryProps == null ? void 0 : userHistoryProps.isMigrated) && /*#__PURE__*/_jsx(CapLabel, {
-      type: "label26",
-      className: "migrate-desc_co3CQ",
-      children: userHistoryProps == null ? void 0 : userHistoryProps.migrateText
-    }), /*#__PURE__*/_jsx(CapRow, {
-      className: classnames("advanced-icon-container_ZTm7j", isDisabled && "item-disabled_V7UE4"),
-      children: /*#__PURE__*/_jsxs("div", {
-        ref: dragRef,
-        className: classnames("icon-wrapper_bE3Lh", (userHistoryProps == null ? void 0 : userHistoryProps.color) && "icon-wrapper--with-color_Fjq-I"),
-        onMouseEnter: getShowActionIcons,
-        onMouseLeave: gethideActionIcons,
-        style: userHistoryProps != null && userHistoryProps.color ? {
-          '--outline-color': userHistoryProps.color
-        } : undefined,
-        children: [hasError &&
-        // error icon to highlight block has error.
-        getBlockStatusIcon('error'), !hasError && !isJourneyMetaVersion && journeyStatus === LIVE && abTestStatus === RUNNING && /*#__PURE__*/_jsx(CapTooltip, {
-          title: "Test running",
-          children: getBlockStatusIcon('test-running', 'test running')
-        }), !hasError && !isJourneyMetaVersion && journeyStatus === LIVE && abTestStatus === RESULT_AWAITING && /*#__PURE__*/_jsx(CapTooltip, {
-          title: "Test completed",
-          children: getBlockStatusIcon('test-complete', 'test complete')
-        }), showStoreUploadStatusIcon ? StoreUploadStatusIndicator : null, /*#__PURE__*/_jsx(CapIcon, _extends({
-          type: type,
-          withBackground: true,
-          backgroundProps: _extends({}, backgroundProps, {
-            style: _extends({
-              backgroundColor: backgroundColor || CAP_YELLOW,
-              lineHeight: 0,
-              padding: '9px'
-            }, backgroundProps == null ? void 0 : backgroundProps.style)
-          }),
-          style: {
-            color: CAP_WHITE
+  const getBlockStatusIcon = (iconType, ariaLabel) => /* @__PURE__ */ jsx(
+    CapIcon,
+    {
+      type: iconType,
+      "aria-label": ariaLabel,
+      className: classNames(
+        styles["top-center-error-icon-container"],
+        styles["error-icon-container"]
+      ),
+      size: "s"
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    joinBlockNameArrayLength > 0 && /* @__PURE__ */ jsxs(CapRow, { className: styles["join-link-row"], id, children: [
+      /* @__PURE__ */ jsx(CapIcon, { type: "join-link", size: "s" }),
+      /* @__PURE__ */ jsx(CapTooltip, { title: joinBlockNameArray.join(", "), children: /* @__PURE__ */ jsx(CapLabelWithStatic, { type: "label9", className: styles["join-link-label"], children: joinBlockNameArrayLength === 1 ? joinBlockNameArray[0] : `${joinBlockNameArrayLength} joins` }) })
+    ] }),
+    (userHistoryProps == null ? void 0 : userHistoryProps.isMigrated) && /* @__PURE__ */ jsx(CapLabelWithStatic, { type: "label26", className: styles["migrate-desc"], children: userHistoryProps == null ? void 0 : userHistoryProps.migrateText }),
+    /* @__PURE__ */ jsx(
+      CapRow,
+      {
+        className: classNames(
+          styles["advanced-icon-container"],
+          isDisabled && styles["item-disabled"]
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: dragRef,
+            className: classNames(
+              styles["icon-wrapper"],
+              (userHistoryProps == null ? void 0 : userHistoryProps.color) && styles["icon-wrapper--with-color"]
+            ),
+            onMouseEnter: getShowActionIcons,
+            onMouseLeave: gethideActionIcons,
+            style: (userHistoryProps == null ? void 0 : userHistoryProps.color) ? {
+              "--outline-color": userHistoryProps.color
+            } : void 0,
+            children: [
+              hasError && // error icon to highlight block has error.
+              getBlockStatusIcon("error"),
+              !hasError && !isJourneyMetaVersion && journeyStatus === LIVE && abTestStatus === RUNNING && /* @__PURE__ */ jsx(CapTooltip, { title: "Test running", children: getBlockStatusIcon("test-running", "test running") }),
+              !hasError && !isJourneyMetaVersion && journeyStatus === LIVE && abTestStatus === RESULT_AWAITING && /* @__PURE__ */ jsx(CapTooltip, { title: "Test completed", children: getBlockStatusIcon("test-complete", "test complete") }),
+              showStoreUploadStatusIcon ? StoreUploadStatusIndicator : null,
+              /* @__PURE__ */ jsx(
+                CapIcon,
+                {
+                  type,
+                  withBackground: true,
+                  backgroundProps: {
+                    ...backgroundProps,
+                    style: {
+                      backgroundColor: backgroundColor || CAP_YELLOW,
+                      lineHeight: 0,
+                      padding: "9px",
+                      ...backgroundProps == null ? void 0 : backgroundProps.style
+                    }
+                  },
+                  style: { color: CAP_WHITE },
+                  ...rest
+                }
+              ),
+              actionIconsVisible && getActionIcons(actionNodes, id, showEngagementBlocks, setShowEngagementBlocks)
+            ]
           }
-        }, rest)), actionIconsVisible && getActionIcons(actionNodes, id, showEngagementBlocks, setShowEngagementBlocks)]
-      })
-    }), /*#__PURE__*/_jsxs(CapRow, {
-      className: classnames("label-row_39VUK", positionLabel && "label-row--position-label_QXNwW"),
-      children: [label, preview]
-    })]
-  });
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      CapRow,
+      {
+        className: classNames(
+          styles["label-row"],
+          positionLabel && styles["label-row--position-label"]
+        ),
+        children: [
+          label,
+          preview
+        ]
+      }
+    )
+  ] });
+};
+export {
+  CapAdvancedIcon as default
 };
-export default CapAdvancedIcon;