@wix/patterns 1.371.0 → 1.373.0

package/src/components/EntityPage/EntityPagePlain.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain2487263059";
+var _namespace_ = "EntityPagePlain3145214366";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EntityPagePlain2487263059__root"};
+export var classes = {"root":"EntityPagePlain3145214366__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Fade/Fade.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Fade1567583554";
+var _namespace_ = "Fade3842165336";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Fade1567583554__root"};
+export var classes = {"root":"Fade3842165336__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Heading/Heading.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading1481587474";
+var _namespace_ = "Heading4148041557";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Heading1481587474__root"};
+export var classes = {"root":"Heading4148041557__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload3390764480";
+var _namespace_ = "ImportStepUpload211257678";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ImportStepUpload3390764480__root","fileUpload":"ImportStepUpload3390764480__fileUpload"};
+export var classes = {"root":"ImportStepUpload211257678__root","fileUpload":"ImportStepUpload211257678__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/InputOverflow/InputOverflow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow1504964908";
+var _namespace_ = "InputOverflow872763976";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"InputOverflow1504964908__root"};
+export var classes = {"root":"InputOverflow872763976__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/LoadingRow/LoadingRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow3747305452";
+var _namespace_ = "LoadingRow975211669";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow3747305452__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3747305452__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow975211669__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow975211669__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/MaxHeightText/MaxHeightText.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxHeightText2189127686";
+var _namespace_ = "MaxHeightText1367840830";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxHeightText2189127686__root"};
+export var classes = {"root":"MaxHeightText1367840830__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MaxLines/MaxLines.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxLines3579747663";
+var _namespace_ = "MaxLines656958095";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxLines3579747663__root"};
+export var classes = {"root":"MaxLines656958095__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar1535700698";
+var _namespace_ = "MultiBulkActionToolbar2713033554";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultiBulkActionToolbar1535700698__root","leftGroupWrapper":"MultiBulkActionToolbar1535700698__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1535700698__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1535700698__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2713033554__root","leftGroupWrapper":"MultiBulkActionToolbar2713033554__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2713033554__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2713033554__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow2941296825";
+var _namespace_ = "NestedTablePlaceholderStatesRow3978783323";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTablePlaceholderStatesRow2941296825__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3978783323__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow2742150021";
+var _namespace_ = "NestedTableRow2920094749";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableRow2742150021__root","firstLevel":"NestedTableRow2742150021__firstLevel","placeholder":"NestedTableRow2742150021__placeholder","parentHovered":"NestedTableRow2742150021__parentHovered"};
+export var classes = {"root":"NestedTableRow2920094749__root","firstLevel":"NestedTableRow2920094749__firstLevel","placeholder":"NestedTableRow2920094749__placeholder","parentHovered":"NestedTableRow2920094749__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect476205922";
+var _namespace_ = "MultipleDragOverlayEffect240712335";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultipleDragOverlayEffect476205922__root"};
+export var classes = {"root":"MultipleDragOverlayEffect240712335__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow2134279555";
+var _namespace_ = "NestedTableDragAndDropRow272065097";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableDragAndDropRow2134279555__root"};
+export var classes = {"root":"NestedTableDragAndDropRow272065097__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent1637703828";
+var _namespace_ = "PickerContent2165515576";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContent1637703828__root"};
+export var classes = {"root":"PickerContent2165515576__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep655306352";
+var _namespace_ = "PickerContentAdditionalStep4210406177";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContentAdditionalStep655306352__root","titles":"PickerContentAdditionalStep655306352__titles","suffix":"PickerContentAdditionalStep655306352__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep4210406177__root","titles":"PickerContentAdditionalStep4210406177__titles","suffix":"PickerContentAdditionalStep4210406177__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerTableListItem/PickerTableListItem.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem2557666801";
+var _namespace_ = "PickerTableListItem3225860742";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerTableListItem2557666801__root"};
+export var classes = {"root":"PickerTableListItem3225860742__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ScrollableContent/ScrollableContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent2987253200";
+var _namespace_ = "ScrollableContent2276511285";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ScrollableContent2987253200__root"};
+export var classes = {"root":"ScrollableContent2276511285__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SkeletonCard/SkeletonCard.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard129083397";
+var _namespace_ = "SkeletonCard1716674223";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SkeletonCard129083397__root","headerLoading":"SkeletonCard129083397__headerLoading"};
+export var classes = {"root":"SkeletonCard1716674223__root","headerLoading":"SkeletonCard1716674223__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SlidingModal/SlidingModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SlidingModal99804975";
+var _namespace_ = "SlidingModal4220018320";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SlidingModal99804975__root"};
+export var classes = {"root":"SlidingModal4220018320__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabsFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter1979421083";
+var _namespace_ = "TabsFilter1301922792";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"TabsFilter1979421083__root","title":"TabsFilter1979421083__title"};
+export var classes = {"root":"TabsFilter1301922792__root","title":"TabsFilter1301922792__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal3837008104";
+var _namespace_ = "ManageTagsModal1003527117";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ManageTagsModal3837008104__root"};
+export var classes = {"root":"ManageTagsModal1003527117__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.tsx

@@ -9,6 +9,7 @@ import {
   Text,
   Divider,
   Search,
+  ToastContainer,
 } from '@wix/design-system';
 import { Add } from '@wix/wix-ui-icons-common';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -103,21 +104,15 @@ const ManageTagsModalComponent = ({ state }: ManageTagsModalProps) => {
           dataHook="manage-tags-modal-layout"
         >
           <Box direction="vertical" height="100%" flex={1}>
-            {state.toastConfig && (
-              <Box
-                position="absolute"
-                top="18px"
-                left="50%"
-                transform="translateX(-50%)"
-                maxWidth="388px"
-              >
+            <ToastContainer>
+              {state.toastConfig && (
                 <ManageTagsNotification
                   toastConfig={state.toastConfig}
                   onClose={handleNotificationClose}
                   dataHook="manage-tags-modal-notification"
                 />
-              </Box>
-            )}
+              )}
+            </ToastContainer>
             <Box direction="vertical" gap="SP2">
               <Box padding="0 SP4">
                 <Search

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.uni.driver.ts

@@ -10,7 +10,7 @@ import {
   FormFieldUniDriver,
   IconButtonUniDriver,
   MessageModalLayoutUniDriver,
-  FloatingNotificationUniDriver,
+  StatusToastUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 
 export function ManageTagsModalUniDriver(base: UniDriver, body: UniDriver) {
@@ -56,16 +56,30 @@ export function ManageTagsModalUniDriver(base: UniDriver, body: UniDriver) {
       body,
     );
 
-  const getNotificationDriver = () =>
-    FloatingNotificationUniDriver(
-      body.$(`[data-hook="manage-tags-modal-notification"]`),
+  const getNotificationDriver = () => {
+    const notificationBase = body.$(
+      `[data-hook="manage-tags-modal-notification"]`,
+    );
+    const statusToast = StatusToastUniDriver(notificationBase, body);
+    const actionButton = TextButtonUniDriver(
+      notificationBase.$(`[data-hook="manage-tags-modal-notification-action"]`),
       body,
     );
+    return {
+      ...statusToast,
+      getText: () =>
+        notificationBase
+          .$('[data-hook="manage-tags-modal-notification-message"]')
+          .text(),
+      clickTextButton: () => actionButton.click(),
+      getTextButtonLabel: () => actionButton.getButtonTextContent(),
+    };
+  };
 
   const getNotificationButtonExists = () =>
     body
       .$(`[data-hook="manage-tags-modal-notification"]`)
-      .$(`[data-hook="floating-notification-text-button"]`)
+      .$(`[data-hook="manage-tags-modal-notification-action"]`)
       .exists();
 
   const clickCloseButton = async () => {

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsNotification.tsx

@@ -1,11 +1,6 @@
 import React, { useMemo } from 'react';
 import { ToastConfig, ToastType } from '@wix/bex-core';
-import {
-  FloatingNotification,
-  FloatingNotificationType,
-  IconElement,
-} from '@wix/design-system';
-import { InfoCircle, StatusComplete } from '@wix/wix-ui-icons-common';
+import { StatusToast } from '@wix/design-system';
 
 interface ManageTagsNotificationProps {
   toastConfig: ToastConfig;
@@ -13,37 +8,14 @@ interface ManageTagsNotificationProps {
   dataHook?: string;
 }
 
-const toastTypeToNotificationType: {
-  [key in ToastType]?: FloatingNotificationType;
+const toastTypeToStatus: {
+  [key in ToastType]?: 'success' | 'error' | 'warning' | 'info';
 } = {
+  STANDARD: 'info',
+  PREMIUM: 'info',
   SUCCESS: 'success',
-  ERROR: 'destructive',
-};
-
-const convertToastConfigToButtonProps = ({
-  toastConfig,
-  onClose,
-}: {
-  toastConfig: ToastConfig;
-  onClose: (toastConfig: ToastConfig) => unknown;
-}) => {
-  return {
-    label: toastConfig.action?.text,
-    onClick: () => {
-      toastConfig.action?.onClick?.();
-
-      if (toastConfig.action?.removeToastOnClick) {
-        onClose(toastConfig);
-      }
-    },
-  };
-};
-
-const toastTypeToIcon: {
-  [key in ToastType]?: IconElement;
-} = {
-  SUCCESS: <StatusComplete />,
-  ERROR: <InfoCircle />,
+  WARNING: 'warning',
+  ERROR: 'error',
 };
 
 export const ManageTagsNotification = ({
@@ -51,30 +23,39 @@ export const ManageTagsNotification = ({
   onClose,
   dataHook,
 }: ManageTagsNotificationProps) => {
-  const notificationProps = useMemo(() => {
-    let type;
-    let prefixIcon;
-    if (toastConfig.type) {
-      type = toastTypeToNotificationType[toastConfig.type];
-      prefixIcon = toastTypeToIcon[toastConfig.type];
+  const actionElement = useMemo(() => {
+    if (!toastConfig.action?.text) {
+      return undefined;
     }
 
-    const buttonProps = convertToastConfigToButtonProps({
-      toastConfig,
-      onClose,
-    });
+    const handleClick = () => {
+      toastConfig.action?.onClick?.();
 
-    return {
-      type,
-      prefixIcon,
-      text: toastConfig.message,
-      buttonProps:
-        toastConfig.action?.uiType === 'BUTTON' ? buttonProps : undefined,
-      textButtonProps:
-        toastConfig.action?.uiType === 'LINK' ? buttonProps : undefined,
-      onClose: () => onClose(toastConfig),
+      if (toastConfig.action?.removeToastOnClick) {
+        onClose(toastConfig);
+      }
     };
+
+    return (
+      <StatusToast.Action
+        dataHook="manage-tags-modal-notification-action"
+        onClick={handleClick}
+      >
+        {toastConfig.action.text}
+      </StatusToast.Action>
+    );
   }, [toastConfig, onClose]);
 
-  return <FloatingNotification dataHook={dataHook} {...notificationProps} />;
+  return (
+    <StatusToast
+      key={toastConfig.biName ?? toastConfig.message}
+      dataHook={dataHook}
+      status={toastTypeToStatus[toastConfig.type ?? 'STANDARD']}
+      dismissible
+      onDismiss={() => onClose(toastConfig)}
+      action={actionElement}
+    >
+      <span data-hook="manage-tags-modal-notification-message">{toastConfig.message}</span>
+    </StatusToast>
+  );
 };

package/src/components/TagsWidget/TagsWidget.tsx

@@ -6,6 +6,7 @@ import {
   Card,
   Cell,
   Layout,
+  PopoverCommonProps,
   SkeletonLine,
   Text,
   TextButton,
@@ -66,6 +67,10 @@ export type TagsWidgetProps = {
    * Displays tags without the option to edit them.
    */
   readOnly?: boolean;
+  /**
+   * Props to pass to the MultiSelect popover.
+   */
+  popoverProps?: PopoverCommonProps;
 } & (
   | {
       /**

package/src/components/TagsWidget/TagsWidgetContent.tsx

@@ -78,6 +78,7 @@ const _TagsWidgetContent = ({
   initialTags,
   entityId,
   readOnly,
+  popoverProps,
 }: TagsWidgetContentProps) => {
   const { translate: t } = useWixPatternsContainer();
   const [formState] = useState(() =>
@@ -179,6 +180,7 @@ const _TagsWidgetContent = ({
   return (
     <>
       <MultiSelect
+        popoverProps={popoverProps}
         value={formState.searchValue}
         onChange={handleSearchChange}
         options={tagsOptions}

package/src/components/ToolbarItem/ToolbarItem.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem1030764821";
+var _namespace_ = "ToolbarItem2753006863";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ToolbarItem1030764821__root"};
+export var classes = {"root":"ToolbarItem2753006863__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};