@wix/patterns 1.371.0 → 1.372.0

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_ = "PickerTableListItem3029049152";
 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":"PickerTableListItem3029049152__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_ = "ScrollableContent213279461";
 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":"ScrollableContent213279461__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_ = "SkeletonCard2973485831";
 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":"SkeletonCard2973485831__root","headerLoading":"SkeletonCard2973485831__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_ = "SlidingModal1623514908";
 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":"SlidingModal1623514908__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_ = "TabsFilter2657081565";
 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":"TabsFilter2657081565__root","title":"TabsFilter2657081565__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_ = "ManageTagsModal1423203914";
 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":"ManageTagsModal1423203914__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_ = "ToolbarItem3258589852";
 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":"ToolbarItem3258589852__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItemBox3190202883";
+var _namespace_ = "ToolbarItemBox2437244340";
 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":"ToolbarItemBox3190202883__root"};
+export var classes = {"root":"ToolbarItemBox2437244340__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common181684603";
+var _namespace_ = "common61718607";
 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":"common181684603__root","column":"common181684603__column","fullHeight":"common181684603__fullHeight"};
+export var classes = {"root":"common61718607__root","column":"common61718607__column","fullHeight":"common61718607__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader3766095296";
+var _namespace_ = "CollectionPageHeader2851520069";
 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":"CollectionPageHeader3766095296__root"};
+export var classes = {"root":"CollectionPageHeader2851520069__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/FormPage/FormPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "FormPageHeader3591422314";
+var _namespace_ = "FormPageHeader716225895";
 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":"FormPageHeader3591422314__root"};
+export var classes = {"root":"FormPageHeader716225895__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/styles.global.css

@@ -1 +1 @@
-.CardContainer4013682371__root.CardContainer4013682371--mobile{border-radius:0}.Collapse1057956979__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse1057956979__exit{height:0}.CollectionPage728143402__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage728143402__root.CollectionPage728143402--mobile{--wds-page-header-padding-horizontal:0;--wds-page-header-padding-horizontal-small:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage728143402__root.CollectionPage728143402--panel{overflow:hidden;position:relative}.CollectionSectionHeader1255494790__summaryIcon{display:flex;color:var(--wds-color-text-standard-secondary)}.CollectionTable2250614523__root td{vertical-align:middle}.CollectionTable2250614523__root.CollectionTable2250614523--mobile td:first-child{padding-left:18px}.CollectionTable2250614523__root.CollectionTable2250614523--mobile td:last-child{padding-right:18px}.CollectionToolbar3038135629__left{min-width:0}.CollectionToolbar3038135629__left.CollectionToolbar3038135629--expandable{flex:auto}.CollectionToolbar3038135629__left.CollectionToolbar3038135629--title>*{width:100%}.CollectionToolbar3038135629__root.CollectionToolbar3038135629---responsiveMode-5-title .CollectionToolbar3038135629__left{flex:1 100;min-width:50px}.CollectionToolbar3038135629__root.CollectionToolbar3038135629---responsiveMode-4-tabs .CollectionToolbar3038135629__left,.CollectionToolbar3038135629__root.CollectionToolbar3038135629---responsiveMode-4-tabs .CollectionToolbar3038135629__left.CollectionToolbar3038135629--expandable{flex:1 100 auto;min-width:140px}.CollectionToolbar3038135629__root.CollectionToolbar3038135629---responsiveMode-4-tabs .CollectionToolbar3038135629__left>*{flex-shrink:1;min-width:0}.CollectionToolbar3038135629__root .CollectionToolbar3038135629__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar3038135629__root.CollectionToolbar3038135629--views .CollectionToolbar3038135629__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar3038135629__root.CollectionToolbar3038135629---responsiveMode-4-tabs .CollectionToolbar3038135629__right,.CollectionToolbar3038135629__root.CollectionToolbar3038135629---responsiveMode-5-title .CollectionToolbar3038135629__right{flex:0 1 auto;min-width:0}.CollectionToolbar3038135629__root .CollectionToolbar3038135629__right.CollectionToolbar3038135629__fullWidth{margin-inline-start:0!important}.CollectionToolbar3038135629__root.CollectionToolbar3038135629--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter1798657430__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter1798657430__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter1798657430__searchMobile:not(.SearchOrCustomFilter1798657430--expandable){left:18px}.SearchOrCustomFilter1798657430__searchMobile.SearchOrCustomFilter1798657430--expandable.SearchOrCustomFilter1798657430--expanded{left:18px}.AutoCompleteReadonly59401130__root.AutoCompleteReadonly59401130--disableEditing{cursor:pointer}.AutoCompleteReadonly59401130__root.AutoCompleteReadonly59401130--disableEditing input{cursor:pointer}.ViewsDropdown3795669271__root{width:200px}.DragHandle1066552789__root{display:flex;align-items:center}.DragHandle1066552789__root:not(.DragHandle1066552789--disabled){cursor:grab;color:#a8caff}.DragHandle1066552789__root.DragHandle1066552789--disabled{color:#acafc4}.DragHandle1066552789__root:focus-visible:not(.DragHandle1066552789--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle1066552789__root.DragHandle1066552789--disabled{pointer-events:none}.DragHandle1066552789__root.DragHandle1066552789--dragging:not(.DragHandle1066552789--disabled){cursor:grabbing}td:has(>.EditableCell3567552358__root){position:relative;min-height:24px}.EditableCell3567552358__root{display:flex;align-items:center;padding:0;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;box-sizing:border-box;outline:0;cursor:default;user-select:none;background:var(--wsr-color-D80);border:1px solid var(--wsr-color-B40)}.EditableCell3567552358__root.EditableCell3567552358--selected{background:rgba(56,153,236,.08)}.EditableCell3567552358__root.EditableCell3567552358--focused:not(.EditableCell3567552358--selected){box-shadow:inset 0 0 0 2px var(--wsr-color-B10);z-index:2}.EditableCell3567552358__root.EditableCell3567552358--editing{background:var(--wsr-color-D80);box-shadow:inset 0 0 0 2px var(--wsr-color-B10);z-index:3;user-select:auto;overflow:visible}.EditableCell3567552358__root.EditableCell3567552358--selectionTop{border-top:2px solid var(--wsr-color-B10)}.EditableCell3567552358__root.EditableCell3567552358--selectionBottom{border-bottom:2px solid var(--wsr-color-B10)}.EditableCell3567552358__root.EditableCell3567552358--selectionLeft{border-left:2px solid var(--wsr-color-B10)}.EditableCell3567552358__root.EditableCell3567552358--selectionRight{border-right:2px solid var(--wsr-color-B10)}.EditableCell3567552358__root.EditableCell3567552358--invalid:not(.EditableCell3567552358--editing){background:rgba(229,0,77,.06)}.EditableCell3567552358__root.EditableCell3567552358--copiedTop:not(.EditableCell3567552358--selectionTop){border-top:2px dashed var(--wsr-color-B10)}.EditableCell3567552358__root.EditableCell3567552358--copiedBottom:not(.EditableCell3567552358--selectionBottom){border-bottom:2px dashed var(--wsr-color-B10)}.EditableCell3567552358__root.EditableCell3567552358--copiedLeft:not(.EditableCell3567552358--selectionLeft){border-left:2px dashed var(--wsr-color-B10)}.EditableCell3567552358__root.EditableCell3567552358--copiedRight:not(.EditableCell3567552358--selectionRight){border-right:2px dashed var(--wsr-color-B10)}.EditableCell3567552358__validationIndicator{flex-shrink:0;margin-left:12px;margin-right:6px;color:var(--wsr-color-Y10)}.CellViewLayout1573867565__root{width:100%;height:100%;padding:9px 12px;box-sizing:border-box;display:flex;align-items:center;overflow:clip}.CellViewLayout1573867565__root>*{flex:1;min-width:0}.Edit154220941__booleanEdit{display:flex;align-items:center;margin-left:12px}.View350828709__booleanView{display:flex;align-items:center;margin-left:9px;pointer-events:none}.Edit3846716213__dateInput{width:100%;margin-left:-1px}.Edit3086717192__emailInput{width:100%;margin-left:-1px}.Edit3019314736__numberInput{width:100%;margin-right:2px}.Edit3019314736__numberInput input{text-align:right;direction:ltr}.View2041965662__textView{width:100%;text-align:right}.Edit1375720722__jsonInput{width:100%;margin-left:-1px}.Edit3833869363__selectInput{width:100%}.Edit3533849564__editWrapper{width:100%}.Edit3533849564__inputArea{background-color:transparent;width:100%}.Edit3533849564__inputArea>div{border:0!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;outline:0!important}.Edit3533849564__inputArea textarea{padding:9px 12px 8px!important;outline:0!important;border:0!important}.Edit3533849564__inputArea:not(.Edit3533849564--isFocused) textarea{resize:none;overflow:hidden}.Edit3533849564__inputArea:not(.Edit3533849564--isFocused) textarea::-webkit-scrollbar{display:none}.Edit4284777530__urlInput{width:100%;margin-left:-1px}.View3871877239__textView{width:100%;padding:9px 12px;display:flex;align-items:center;justify-content:space-between}.View3871877239__urlText{flex:1;min-width:0}.View3871877239__suffix{flex-shrink:0;margin-left:10px}.View3871877239__textView.View3871877239--suffixOnHover:not(:hover) .View3871877239__suffix{display:none}.EntityPagePlain2487263059__root.EntityPagePlain2487263059--mobile{--wds-page-header-padding-horizontal:0}.Fade1567583554__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade1567583554__root.Fade1567583554--exit{opacity:0}.Heading1481587474__root{visibility:visible}.Heading1481587474__root.Heading1481587474--appearanceH2{font-size:28px!important;line-height:36px!important}.ImportStepUpload3390764480__fileUpload{width:100%}.InputOverflow1504964908__root.InputOverflow1504964908--selected:not(.InputOverflow1504964908--focused) input::placeholder{color:#000624}@keyframes LoadingRow3747305452__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow3747305452__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow3747305452__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText2189127686__root{opacity:1}.MaxHeightText2189127686__root.MaxHeightText2189127686--height24{line-height:24px}.MaxLines3579747663__root{overflow:hidden}.MaxLines3579747663__root.MaxLines3579747663--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar1535700698__root{min-width:0}.MultiBulkActionToolbar1535700698__leftGroupWrapper{padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar1535700698__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar1535700698__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow2941296825__root td{padding:0!important;width:100%}.NestedTableRow2742150021__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow2742150021__root:hover{background-color:#e7f0ff!important}.NestedTableRow2742150021__root.NestedTableRow2742150021--expandable{cursor:pointer}.NestedTableRow2742150021__placeholder td{padding:0!important;width:100%}.NestedTableRow2742150021__root:hover td:first-of-type::before,.NestedTableRow2742150021__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect476205922__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow2134279555__root.NestedTableDragAndDropRow2134279555--draggingInto td{background-color:#e7f0ff!important}.PickerContent1637703828__root{display:flex}.PickerContentAdditionalStep655306352__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep655306352__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem2557666801__root{box-sizing:border-box}.ScrollableContent2987253200__root.ScrollableContent2987253200--overflowY{overflow-y:auto}.ScrollableContent2987253200__root.ScrollableContent2987253200--overflowX{overflow-x:auto}.ScrollableContent2987253200__root.ScrollableContent2987253200--smooth{scroll-behavior:smooth}.SkeletonCard129083397__headerLoading{display:block!important}.SlidingModal99804975__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal99804975__root.SlidingModal99804975--overlay{transition:transform 0s ease 0s}.SlidingModal99804975__root.SlidingModal99804975---appendTo-6-parent{position:absolute}.SlidingModal99804975__root:not(.SlidingModal99804975--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter1979421083__root .TabsFilter1979421083__title{color:var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)))}.TabsFilter1979421083__root.TabsFilter1979421083--selected .TabsFilter1979421083__title,.TabsFilter1979421083__root:hover .TabsFilter1979421083__title{color:var(--wds-tabs-label-fill-active, var(--wsr-color-B10, #116DFF))}.ManageTagsModal3837008104__root{display:flex}.ToolbarItem1030764821__root{min-width:0}.ToolbarItemBox3190202883__root{min-width:0}.ToolbarItemBox3190202883__root.ToolbarItemBox3190202883--removeStartPadding{margin-left:-24px}.ToolbarItemBox3190202883__root.ToolbarItemBox3190202883--expandable{flex:1 0}.common181684603__column{display:flex;flex-direction:column}.common181684603__fullHeight{height:100%;min-height:0}.CollectionPageHeader3766095296__root:not(.CollectionPageHeader3766095296--mobile){gap:12px}.CollectionPageHeader3766095296__root.CollectionPageHeader3766095296--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader3766095296__root.CollectionPageHeader3766095296--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader3591422314__root.FormPageHeader3591422314--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader3591422314__root.FormPageHeader3591422314--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+.CardContainer372719456__root.CardContainer372719456--mobile{border-radius:0}.Collapse1942925566__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse1942925566__exit{height:0}.CollectionPage1342347111__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage1342347111__root.CollectionPage1342347111--mobile{--wds-page-header-padding-horizontal:0;--wds-page-header-padding-horizontal-small:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage1342347111__root.CollectionPage1342347111--panel{overflow:hidden;position:relative}.CollectionSectionHeader2466180153__summaryIcon{display:flex;color:var(--wds-color-text-standard-secondary)}.CollectionTable1125554644__root td{vertical-align:middle}.CollectionTable1125554644__root.CollectionTable1125554644--mobile td:first-child{padding-left:18px}.CollectionTable1125554644__root.CollectionTable1125554644--mobile td:last-child{padding-right:18px}.CollectionToolbar3211433462__left{min-width:0}.CollectionToolbar3211433462__left.CollectionToolbar3211433462--expandable{flex:auto}.CollectionToolbar3211433462__left.CollectionToolbar3211433462--title>*{width:100%}.CollectionToolbar3211433462__root.CollectionToolbar3211433462---responsiveMode-5-title .CollectionToolbar3211433462__left{flex:1 100;min-width:50px}.CollectionToolbar3211433462__root.CollectionToolbar3211433462---responsiveMode-4-tabs .CollectionToolbar3211433462__left,.CollectionToolbar3211433462__root.CollectionToolbar3211433462---responsiveMode-4-tabs .CollectionToolbar3211433462__left.CollectionToolbar3211433462--expandable{flex:1 100 auto;min-width:140px}.CollectionToolbar3211433462__root.CollectionToolbar3211433462---responsiveMode-4-tabs .CollectionToolbar3211433462__left>*{flex-shrink:1;min-width:0}.CollectionToolbar3211433462__root .CollectionToolbar3211433462__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar3211433462__root.CollectionToolbar3211433462--views .CollectionToolbar3211433462__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar3211433462__root.CollectionToolbar3211433462---responsiveMode-4-tabs .CollectionToolbar3211433462__right,.CollectionToolbar3211433462__root.CollectionToolbar3211433462---responsiveMode-5-title .CollectionToolbar3211433462__right{flex:0 1 auto;min-width:0}.CollectionToolbar3211433462__root .CollectionToolbar3211433462__right.CollectionToolbar3211433462__fullWidth{margin-inline-start:0!important}.CollectionToolbar3211433462__root.CollectionToolbar3211433462--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter1641104256__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter1641104256__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter1641104256__searchMobile:not(.SearchOrCustomFilter1641104256--expandable){left:18px}.SearchOrCustomFilter1641104256__searchMobile.SearchOrCustomFilter1641104256--expandable.SearchOrCustomFilter1641104256--expanded{left:18px}.AutoCompleteReadonly831457872__root.AutoCompleteReadonly831457872--disableEditing{cursor:pointer}.AutoCompleteReadonly831457872__root.AutoCompleteReadonly831457872--disableEditing input{cursor:pointer}.ViewsDropdown1553220924__root{width:200px}.DragHandle4278266936__root{display:flex;align-items:center}.DragHandle4278266936__root:not(.DragHandle4278266936--disabled){cursor:grab;color:#a8caff}.DragHandle4278266936__root.DragHandle4278266936--disabled{color:#acafc4}.DragHandle4278266936__root:focus-visible:not(.DragHandle4278266936--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle4278266936__root.DragHandle4278266936--disabled{pointer-events:none}.DragHandle4278266936__root.DragHandle4278266936--dragging:not(.DragHandle4278266936--disabled){cursor:grabbing}td:has(>.EditableCell3007846860__root){position:relative;min-height:24px}.EditableCell3007846860__root{display:flex;align-items:center;padding:0;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;box-sizing:border-box;outline:0;cursor:default;user-select:none;background:var(--wsr-color-D80);border:1px solid var(--wsr-color-B40)}.EditableCell3007846860__root.EditableCell3007846860--selected{background:rgba(56,153,236,.08)}.EditableCell3007846860__root.EditableCell3007846860--focused:not(.EditableCell3007846860--selected){box-shadow:inset 0 0 0 2px var(--wsr-color-B10);z-index:2}.EditableCell3007846860__root.EditableCell3007846860--editing{background:var(--wsr-color-D80);box-shadow:inset 0 0 0 2px var(--wsr-color-B10);z-index:3;user-select:auto;overflow:visible}.EditableCell3007846860__root.EditableCell3007846860--selectionTop{border-top:2px solid var(--wsr-color-B10)}.EditableCell3007846860__root.EditableCell3007846860--selectionBottom{border-bottom:2px solid var(--wsr-color-B10)}.EditableCell3007846860__root.EditableCell3007846860--selectionLeft{border-left:2px solid var(--wsr-color-B10)}.EditableCell3007846860__root.EditableCell3007846860--selectionRight{border-right:2px solid var(--wsr-color-B10)}.EditableCell3007846860__root.EditableCell3007846860--invalid:not(.EditableCell3007846860--editing){background:rgba(229,0,77,.06)}.EditableCell3007846860__root.EditableCell3007846860--copiedTop:not(.EditableCell3007846860--selectionTop){border-top:2px dashed var(--wsr-color-B10)}.EditableCell3007846860__root.EditableCell3007846860--copiedBottom:not(.EditableCell3007846860--selectionBottom){border-bottom:2px dashed var(--wsr-color-B10)}.EditableCell3007846860__root.EditableCell3007846860--copiedLeft:not(.EditableCell3007846860--selectionLeft){border-left:2px dashed var(--wsr-color-B10)}.EditableCell3007846860__root.EditableCell3007846860--copiedRight:not(.EditableCell3007846860--selectionRight){border-right:2px dashed var(--wsr-color-B10)}.EditableCell3007846860__validationIndicator{flex-shrink:0;margin-left:12px;margin-right:6px;color:var(--wsr-color-Y10)}.CellViewLayout3107312690__root{width:100%;height:100%;padding:9px 12px;box-sizing:border-box;display:flex;align-items:center;overflow:clip}.CellViewLayout3107312690__root>*{flex:1;min-width:0}.Edit166605484__booleanEdit{display:flex;align-items:center;margin-left:12px}.View3413904664__booleanView{display:flex;align-items:center;margin-left:9px;pointer-events:none}.Edit4270586868__dateInput{width:100%;margin-left:-1px}.Edit1046836042__emailInput{width:100%;margin-left:-1px}.Edit2222893124__numberInput{width:100%;margin-right:2px}.Edit2222893124__numberInput input{text-align:right;direction:ltr}.View4000722991__textView{width:100%;text-align:right}.Edit2361215158__jsonInput{width:100%;margin-left:-1px}.Edit348678459__selectInput{width:100%}.Edit3677548107__editWrapper{width:100%}.Edit3677548107__inputArea{background-color:transparent;width:100%}.Edit3677548107__inputArea>div{border:0!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;outline:0!important}.Edit3677548107__inputArea textarea{padding:9px 12px 8px!important;outline:0!important;border:0!important}.Edit3677548107__inputArea:not(.Edit3677548107--isFocused) textarea{resize:none;overflow:hidden}.Edit3677548107__inputArea:not(.Edit3677548107--isFocused) textarea::-webkit-scrollbar{display:none}.Edit1918298928__urlInput{width:100%;margin-left:-1px}.View3735259345__textView{width:100%;padding:9px 12px;display:flex;align-items:center;justify-content:space-between}.View3735259345__urlText{flex:1;min-width:0}.View3735259345__suffix{flex-shrink:0;margin-left:10px}.View3735259345__textView.View3735259345--suffixOnHover:not(:hover) .View3735259345__suffix{display:none}.EntityPagePlain1555082948__root.EntityPagePlain1555082948--mobile{--wds-page-header-padding-horizontal:0}.Fade2689624820__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade2689624820__root.Fade2689624820--exit{opacity:0}.Heading1447303529__root{visibility:visible}.Heading1447303529__root.Heading1447303529--appearanceH2{font-size:28px!important;line-height:36px!important}.ImportStepUpload2219928482__fileUpload{width:100%}.InputOverflow2534104229__root.InputOverflow2534104229--selected:not(.InputOverflow2534104229--focused) input::placeholder{color:#000624}@keyframes LoadingRow3930299149__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow3930299149__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow3930299149__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText1538279176__root{opacity:1}.MaxHeightText1538279176__root.MaxHeightText1538279176--height24{line-height:24px}.MaxLines2300563937__root{overflow:hidden}.MaxLines2300563937__root.MaxLines2300563937--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar2154874272__root{min-width:0}.MultiBulkActionToolbar2154874272__leftGroupWrapper{padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar2154874272__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar2154874272__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow2829325166__root td{padding:0!important;width:100%}.NestedTableRow926890738__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow926890738__root:hover{background-color:#e7f0ff!important}.NestedTableRow926890738__root.NestedTableRow926890738--expandable{cursor:pointer}.NestedTableRow926890738__placeholder td{padding:0!important;width:100%}.NestedTableRow926890738__root:hover td:first-of-type::before,.NestedTableRow926890738__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect397167104__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow206459736__root.NestedTableDragAndDropRow206459736--draggingInto td{background-color:#e7f0ff!important}.PickerContent1837306975__root{display:flex}.PickerContentAdditionalStep4061668691__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep4061668691__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem3029049152__root{box-sizing:border-box}.ScrollableContent213279461__root.ScrollableContent213279461--overflowY{overflow-y:auto}.ScrollableContent213279461__root.ScrollableContent213279461--overflowX{overflow-x:auto}.ScrollableContent213279461__root.ScrollableContent213279461--smooth{scroll-behavior:smooth}.SkeletonCard2973485831__headerLoading{display:block!important}.SlidingModal1623514908__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal1623514908__root.SlidingModal1623514908--overlay{transition:transform 0s ease 0s}.SlidingModal1623514908__root.SlidingModal1623514908---appendTo-6-parent{position:absolute}.SlidingModal1623514908__root:not(.SlidingModal1623514908--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter2657081565__root .TabsFilter2657081565__title{color:var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)))}.TabsFilter2657081565__root.TabsFilter2657081565--selected .TabsFilter2657081565__title,.TabsFilter2657081565__root:hover .TabsFilter2657081565__title{color:var(--wds-tabs-label-fill-active, var(--wsr-color-B10, #116DFF))}.ManageTagsModal1423203914__root{display:flex}.ToolbarItem3258589852__root{min-width:0}.ToolbarItemBox2437244340__root{min-width:0}.ToolbarItemBox2437244340__root.ToolbarItemBox2437244340--removeStartPadding{margin-left:-24px}.ToolbarItemBox2437244340__root.ToolbarItemBox2437244340--expandable{flex:1 0}.common61718607__column{display:flex;flex-direction:column}.common61718607__fullHeight{height:100%;min-height:0}.CollectionPageHeader2851520069__root:not(.CollectionPageHeader2851520069--mobile){gap:12px}.CollectionPageHeader2851520069__root.CollectionPageHeader2851520069--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader2851520069__root.CollectionPageHeader2851520069--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader716225895__root.FormPageHeader716225895--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader716225895__root.FormPageHeader716225895--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/src/test-utils/TagsMocks.ts

@@ -243,6 +243,8 @@ export const tagsAPIHttpClientMocks = (tags: TagType[]) => {
           .then(({ items }) => {
             if (fqdn === 'wix.patterns.dummyservice.v1.empty') {
               return { tags: [] };
+            } else if (fqdn === 'wix.patterns.dummyservice.v1.over_limit') {
+              return { tags: aTagsArray(105) };
             } else {
               return { tags: items };
             }

package/src/version.ts

@@ -1 +1 @@
-export const version = 'patterns@1.371.0';
+export const version = 'patterns@1.372.0';