@wix/patterns 1.423.0 → 1.424.0

package/src/components/SetupWidget/SetupStepCard.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
-import {
-  Box,
-  Text,
-  Button,
-  TextButton,
-  Badge,
-  Tooltip,
-} from '@wix/design-system';
+import { Box, Text, Divider, Tooltip } from '@wix/design-system';
+import { ChevronRight, ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common';
 import { SetupWidgetStep } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { SetupStepIcon } from './SetupStepIcon';
@@ -14,7 +8,7 @@ import { st, classes } from './SetupWidget.st.css.js';
 
 export interface SetupStepCardProps {
   step: SetupWidgetStep;
-  /** The recommended next step — soft blue surface + primary CTA. */
+  /** The recommended next step — soft blue surface + bold title. */
   isPrimary: boolean;
   /** Inline content is shown below the header. */
   expanded: boolean;
@@ -23,11 +17,12 @@ export interface SetupStepCardProps {
 }
 
 /**
- * Mobile step card. Phase-1 layout ("matching desktop"): shadowed card, the
- * focused card gets a soft blue surface, an "In progress" badge sits under the
- * title, completed cards strike the title and drop the CTA. Story-only
- * experiment knobs (peach shell / colored bullet / hero art / full-screen
- * modal) are intentionally omitted — those are consumer/page concerns.
+ * Mobile step card (per Figma "Support FW on mobile"). 12px padding, a 24px
+ * icon cell and a trailing chevron that replaces the per-step CTA button: a
+ * right chevron for navigate / completed (with a completed action) steps, and a
+ * down/up chevron for inline-expandable steps. The whole card is the click
+ * target. Collapsed cards are a bare title + chevron; an expanded inline card
+ * adds a divider, its description, and the consumer content below the header.
  */
 export const SetupStepCard = ({
   step,
@@ -44,8 +39,41 @@ export const SetupStepCard = ({
   const isInline = step.expansionMode === 'inline';
   const isInlineExpanded = expanded && isInline;
 
-  // The whole card toggles inline steps; navigate steps act via the CTA.
-  const clickable = isInline && !isCompleted && !isDisabled;
+  // Completed steps stay actionable only when they carry a completed action.
+  const showCompletedCta =
+    isCompleted && !!step.completedCtaLabel && !isDisabled;
+  // Inline steps toggle; navigate steps act; completed steps fire their action.
+  const isTogglable = isInline && !isCompleted && !isDisabled;
+  const isNavigable = !isInline && !isCompleted && !isDisabled;
+  const clickable = isTogglable || isNavigable || showCompletedCta;
+
+  // Disabled steps show a muted chevron (with a permission tooltip); completed
+  // steps without an action show none. Everything actionable shows a chevron.
+  const showChevron = clickable || isDisabled;
+
+  const ChevronIcon = isInline
+    ? isInlineExpanded
+      ? ChevronUp
+      : ChevronDown
+    : ChevronRight;
+
+  const chevron = showChevron && (
+    <Box
+      dataHook={`setup-step-cta-${step.id}`}
+      verticalAlign="middle"
+      className={st(isDisabled ? classes.chevronDisabled : classes.chevron)}
+    >
+      <ChevronIcon width="18" height="18" />
+    </Box>
+  );
+
+  // The description only belongs to the expanded inline state. Non-inline steps
+  // keep theirs (if provided) inline below the header.
+  const description = step.description && !isCompleted && (
+    <Text size="small" secondary>
+      {step.description}
+    </Text>
+  );
 
   return (
     <div
@@ -66,101 +94,82 @@ export const SetupStepCard = ({
           : undefined
       }
     >
-      <Box direction="vertical" gap="SP2" padding="SP4">
-        <Box gap="SP2" verticalAlign="top">
-          <SetupStepIcon status={step.status} />
-          <Box direction="vertical" gap="SP1">
-            <Text
-              dataHook={`setup-step-title-${step.id}`}
-              size="small"
-              weight={isPrimary ? 'bold' : 'thin'}
-              skin={isDisabled ? 'disabled' : 'standard'}
-              secondary={isCompleted}
-            >
-              {isCompleted ? <del>{step.title}</del> : step.title}
-            </Text>
-            {isInProgress && (
-              <Box>
-                <Badge size="tiny" skin="urgent" type="transparent">
+      <Box direction="vertical" gap="SP2" padding="SP2">
+        <Box
+          align="space-between"
+          verticalAlign="middle"
+          gap="SP1"
+          width="100%"
+        >
+          <Box verticalAlign="middle" gap="SP1" flexGrow={1} minWidth={0}>
+            <Box className={st(classes.stepIcon)}>
+              <SetupStepIcon status={step.status} marginTop="0px" />
+            </Box>
+            {/* Title + "In progress" badge stack together so the icon centers
+                against the whole block (matches the Figma in-progress card). */}
+            <Box direction="vertical" gap="SP1">
+              <Text
+                dataHook={`setup-step-title-${step.id}`}
+                size="small"
+                weight={isPrimary ? 'bold' : 'thin'}
+                skin={isDisabled ? 'disabled' : 'standard'}
+                secondary={isCompleted}
+              >
+                {isCompleted ? <del>{step.title}</del> : step.title}
+              </Text>
+              {isInProgress && (
+                <Text
+                  size="tiny"
+                  weight="normal"
+                  className={st(classes.inProgressLabel)}
+                >
                   {t('cairo.setupWidget.step.inProgress')}
-                </Badge>
-              </Box>
-            )}
+                </Text>
+              )}
+            </Box>
           </Box>
+          {isDisabled ? (
+            <Tooltip
+              dataHook={`setup-step-disabled-tooltip-${step.id}`}
+              content={
+                step.disabledTooltip ??
+                // Translation-key id stays `lockedTooltip` until the
+                // Translation Center key is renamed (TC follow-up to T2).
+                t('cairo.setupWidget.step.lockedTooltip')
+              }
+            >
+              {chevron}
+            </Tooltip>
+          ) : (
+            chevron
+          )}
         </Box>
 
-        {!isCompleted && step.description && (
-          <Text size="small" secondary>
-            {step.description}
-          </Text>
-        )}
-
+        {/* Expanded inline step: a divider separates the header from the
+            description and the consumer-supplied content. */}
         {isInlineExpanded && (
-          <Box dataHook={`setup-step-content-${step.id}`} direction="vertical">
-            {/* Stop clicks/keys inside the consumer widget from bubbling to
-                the card's toggle handler — otherwise interacting with the
-                content (e.g. an input) would collapse the card. */}
-            <div
-              onClick={(event) => event.stopPropagation()}
-              onKeyDown={(event) => event.stopPropagation()}
+          <>
+            <Divider />
+            {description}
+            <Box
+              dataHook={`setup-step-content-${step.id}`}
+              direction="vertical"
             >
-              {renderStepContent?.(step)}
-            </div>
-          </Box>
-        )}
-
-        {!isCompleted &&
-          !isInlineExpanded &&
-          step.ctaLabel &&
-          (() => {
-            const ctaButton = (
-              <Button
-                dataHook={`setup-step-cta-${step.id}`}
-                fullWidth
-                size="medium"
-                priority={isPrimary ? 'primary' : 'secondary'}
-                disabled={isDisabled}
-                onClick={(event: React.MouseEvent) => {
-                  event.stopPropagation();
-                  onActivate();
-                }}
-              >
-                {step.ctaLabel}
-              </Button>
-            );
-
-            // Disabled steps explain why the CTA is disabled (G5).
-            return isDisabled ? (
-              <Tooltip
-                dataHook={`setup-step-disabled-tooltip-${step.id}`}
-                content={
-                  step.disabledTooltip ??
-                  // Translation-key id stays `lockedTooltip` until the
-                  // Translation Center key is renamed (TC follow-up to T2).
-                  t('cairo.setupWidget.step.lockedTooltip')
-                }
+              {/* Stop clicks/keys inside the consumer widget from bubbling to
+                  the card's toggle handler — otherwise interacting with the
+                  content (e.g. an input) would collapse the card. */}
+              <div
+                onClick={(event) => event.stopPropagation()}
+                onKeyDown={(event) => event.stopPropagation()}
               >
-                <Box>{ctaButton}</Box>
-              </Tooltip>
-            ) : (
-              ctaButton
-            );
-          })()}
-
-        {isCompleted && step.completedCtaLabel && !isDisabled && (
-          <Box>
-            <TextButton
-              dataHook={`setup-step-cta-${step.id}`}
-              size="small"
-              onClick={(event: React.MouseEvent) => {
-                event.stopPropagation();
-                onActivate();
-              }}
-            >
-              {step.completedCtaLabel}
-            </TextButton>
-          </Box>
+                {renderStepContent?.(step)}
+              </div>
+            </Box>
+          </>
         )}
+
+        {/* Non-inline steps render their description (if any) under the row. */}
+        {!isInline && description}
       </Box>
     </div>
   );

package/src/components/SetupWidget/SetupStepGroup.tsx

@@ -58,18 +58,31 @@ export const SetupStepGroup = ({
     >
       <Box
         align="space-between"
-        verticalAlign={isMobile ? 'top' : 'middle'}
+        verticalAlign="middle"
         width="100%"
         minHeight="30px"
       >
-        <Box minHeight="24px" verticalAlign={isMobile ? 'top' : 'middle'}>
-          <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />
+        <Box
+          minHeight="24px"
+          verticalAlign="middle"
+          gap={isMobile ? 'SP1' : undefined}
+        >
+          {isMobile ? (
+            <Box className={st(classes.stepIcon)}>
+              <SetupStepIcon
+                status={allCompleted ? 'completed' : 'upcoming'}
+                marginTop="0px"
+              />
+            </Box>
+          ) : (
+            <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />
+          )}
           {/* Mobile cards stack the badge under the title (matches
               SetupStepCard); desktop rows keep it inline next to it. */}
           <Box
-            paddingLeft="SP2"
+            paddingLeft={isMobile ? undefined : 'SP2'}
             direction={isMobile ? 'vertical' : 'horizontal'}
-            verticalAlign={isMobile ? 'top' : 'middle'}
+            verticalAlign={isMobile ? undefined : 'middle'}
             gap="SP1"
           >
             <Text
@@ -79,13 +92,23 @@ export const SetupStepGroup = ({
             >
               {step.title}
             </Text>
-            {anyInProgress && !allCompleted && (
-              <Box marginTop={isMobile ? undefined : '2px'}>
-                <Badge size="tiny" skin="urgent" type="transparent">
+            {anyInProgress &&
+              !allCompleted &&
+              (isMobile ? (
+                <Text
+                  size="tiny"
+                  weight="normal"
+                  className={st(classes.inProgressLabel)}
+                >
                   {t('cairo.setupWidget.step.inProgress')}
-                </Badge>
-              </Box>
-            )}
+                </Text>
+              ) : (
+                <Box marginTop="2px">
+                  <Badge size="tiny" skin="urgent" type="transparent">
+                    {t('cairo.setupWidget.step.inProgress')}
+                  </Badge>
+                </Box>
+              ))}
           </Box>
         </Box>
         <Box verticalAlign="middle" gap="SP1">
@@ -110,7 +133,7 @@ export const SetupStepGroup = ({
       dataHook={`setup-step-children-${step.id}`}
       direction="vertical"
       gap={isMobile ? 'SP3' : 'SP1'}
-      paddingLeft={isMobile ? 'SP4' : 'SP5'}
+      paddingLeft="SP5"
       marginTop={isMobile ? 'SP3' : 'SP1'}
     >
       {children.map((child) => (
@@ -122,7 +145,7 @@ export const SetupStepGroup = ({
   if (isMobile) {
     return (
       <div data-hook={`setup-step-${step.id}`} className={st(classes.card)}>
-        <Box direction="vertical" padding="SP4">
+        <Box direction="vertical" padding="SP2">
           {header}
           {childList}
         </Box>

package/src/components/SetupWidget/SetupStepIcon.tsx

@@ -9,12 +9,19 @@ import { SetupWidgetStepStatus } from '@wix/bex-core';
  */
 export const SetupStepIcon = ({
   status,
+  /**
+   * Top nudge that centers the 18px icon on a single line of text. Defaults to
+   * the desktop value; the mobile card centers the icon via its own wrapper and
+   * passes "0px" to drop the nudge.
+   */
+  marginTop = '3px',
 }: {
   status: SetupWidgetStepStatus;
+  marginTop?: string;
 }) => {
   if (status === 'completed') {
     return (
-      <Box marginTop="3px">
+      <Box marginTop={marginTop}>
         <ConfirmSmall width="18px" height="18px" color="var(--wsr-color-G20)" />
       </Box>
     );
@@ -24,7 +31,7 @@ export const SetupStepIcon = ({
     status === 'disabled' ? 'var(--wsr-color-D40)' : 'var(--wsr-color-B10)';
 
   return (
-    <Box marginTop="3px">
+    <Box marginTop={marginTop}>
       <CircleSmallFilledSmall width="18px" height="18px" color={color} />
     </Box>
   );

package/src/components/SetupWidget/SetupWidget.st.css

@@ -8,6 +8,12 @@
 @property st-global(--wsr-color-B30);
 @property st-global(--wsr-color-B40);
 @property st-global(--wsr-color-B60);
+@property st-global(--wds-color-text-standard-primary);
+@property st-global(--wds-color-text-disabled);
+@property st-global(--wds-color-text-urgent);
+@property st-global(--wsr-color-D10);
+@property st-global(--wsr-color-D10-30);
+@property st-global(--wsr-color-O10);
 @property st-global(--wds-space-100);
 @property st-global(--wds-border-radius-200);
 @property st-global(--wds-border-radius-400);
@@ -93,3 +99,40 @@
 .card:clickable {
   cursor: pointer;
 }
+
+/* 24px icon cell (matches the Figma spec): a single-line step row is then
+ * 24px + 2×12px padding = 48px tall. The 18px glyph is centered within it, so
+ * the icon lines up with the title (single line) or its first line (wrapped). */
+.stepIcon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 24px;
+}
+
+/* Trailing chevron that replaces the per-step CTA button on mobile. WDS has no
+ * dedicated icon-color token; icons take the text-standard color (the Figma
+ * variable is grouped as "Text & icon"). */
+.chevron {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
+}
+
+.chevronDisabled {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
+}
+
+/* "IN PROGRESS" label, rendered with a WDS <Text> (so it uses the design
+ * system's typography) but in the urgent orange. <Text> has no "urgent" skin,
+ * so we override the standard-text color token it reads — this beats the
+ * component's own color rule without !important — and uppercase the label to
+ * match the Figma spec. Using <Text> (not a Badge) keeps it flush with the
+ * title, with no badge padding/offset. */
+.inProgressLabel {
+  --wds-color-text-standard-primary: var(--wds-color-text-urgent, var(--wsr-color-O10, #FE620F));
+
+  text-transform: uppercase;
+}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget4051015157";
+var _namespace_ = "SetupWidget808034205";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SetupWidget4051015157__root","row":"SetupWidget4051015157__row","completedCta":"SetupWidget4051015157__completedCta","card":"SetupWidget4051015157__card"};
+export var classes = {"root":"SetupWidget808034205__root","row":"SetupWidget808034205__row","completedCta":"SetupWidget808034205__completedCta","card":"SetupWidget808034205__card","stepIcon":"SetupWidget808034205__stepIcon","chevron":"SetupWidget808034205__chevron","chevronDisabled":"SetupWidget808034205__chevronDisabled","inProgressLabel":"SetupWidget808034205__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-border-standard-primary":"--wds-color-border-standard-primary","wds-color-border-standard-secondary":"--wds-color-border-standard-secondary","wds-color-fill-standard-tertiary":"--wds-color-fill-standard-tertiary","wds-color-fill-standard-tertiary-hover":"--wds-color-fill-standard-tertiary-hover","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-B30":"--wsr-color-B30","wsr-color-B40":"--wsr-color-B40","wsr-color-B60":"--wsr-color-B60","wds-space-100":"--wds-space-100","wds-border-radius-200":"--wds-border-radius-200","wds-border-radius-400":"--wds-border-radius-400"}; 
+export var vars = {"wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-border-standard-primary":"--wds-color-border-standard-primary","wds-color-border-standard-secondary":"--wds-color-border-standard-secondary","wds-color-fill-standard-tertiary":"--wds-color-fill-standard-tertiary","wds-color-fill-standard-tertiary-hover":"--wds-color-fill-standard-tertiary-hover","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-B30":"--wsr-color-B30","wsr-color-B40":"--wsr-color-B40","wsr-color-B60":"--wsr-color-B60","wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-color-text-disabled":"--wds-color-text-disabled","wds-color-text-urgent":"--wds-color-text-urgent","wsr-color-D10":"--wsr-color-D10","wsr-color-D10-30":"--wsr-color-D10-30","wsr-color-O10":"--wsr-color-O10","wds-space-100":"--wds-space-100","wds-border-radius-200":"--wds-border-radius-200","wds-border-radius-400":"--wds-border-radius-400"}; 
 
 
 

package/src/components/SetupWidget/SetupWidget.tsx

@@ -186,7 +186,7 @@ const _SetupWidget = ({
   );
 
   const list = (
-    <Box direction="vertical" gap={isMobile ? 'SP3' : 'SP1'}>
+    <Box direction="vertical" gap={isMobile ? 'SP3' : 'SP1'} width="100%">
       {state.steps.map((step) => {
         const node = step.steps?.length ? (
           <SetupStepGroup
@@ -228,7 +228,7 @@ const _SetupWidget = ({
   // through CardContainer so the widget owns those states everywhere.
   if (isMobile && status === 'success') {
     return (
-      <Box dataHook={dataHook} direction="vertical" gap="SP3">
+      <Box dataHook={dataHook} direction="vertical" gap="SP3" width="100%">
         {body}
       </Box>
     );

package/src/components/SetupWidget/SetupWidgetHeader.tsx

@@ -31,16 +31,22 @@ export const SetupWidgetHeader = ({
   });
 
   if (isMobile) {
+    // Mobile (per Figma): the "X/Y" ratio sits inline to the left of the bar
+    // (no "completed" word) to save vertical space. The ratio is just numbers,
+    // so it needs no translation.
+    const ratio = `${completedCount}/${totalCount}`;
     return (
-      <Box direction="vertical" gap="SP2">
+      <Box direction="vertical" gap="SP3" width="100%">
         <Heading dataHook="setup-widget-title" size="large">
           {resolvedTitle}
         </Heading>
-        <Text dataHook="setup-widget-progress" size="small" secondary>
-          {ratioLabel}
-        </Text>
-        <Box width="100%">
-          <LinearProgressBar skin="standard" value={progressPercentage} />
+        <Box width="100%" verticalAlign="middle" gap="SP2">
+          <Text dataHook="setup-widget-progress" size="small" secondary>
+            {ratio}
+          </Text>
+          <Box flexGrow={1}>
+            <LinearProgressBar skin="standard" value={progressPercentage} />
+          </Box>
         </Box>
       </Box>
     );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard4040440223";
+var _namespace_ = "SkeletonCard3144351190";
 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":"SkeletonCard4040440223__root","headerLoading":"SkeletonCard4040440223__headerLoading"};
+export var classes = {"root":"SkeletonCard3144351190__root","headerLoading":"SkeletonCard3144351190__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_ = "SlidingModal2850071977";
+var _namespace_ = "SlidingModal538401435";
 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":"SlidingModal2850071977__root"};
+export var classes = {"root":"SlidingModal538401435__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/TableCompat.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { CollectionState, FiltersMap } from '@wix/bex-core';
-import { TableV2 } from '../..';
+import { TableV2 } from './TableV2';
 import { TableState } from '../../state';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CollectionTableBaseProps } from '../CollectionTable';

package/src/components/TableGridSwitch/TableGridSwitch.tsx

@@ -12,7 +12,7 @@ import type {
 } from '../CollectionSectionHeader';
 import { TableSections } from '../TableSections';
 import { GridBasePropsWithoutPreset } from '../Grid/Grid';
-import { TableProps } from '..';
+import type { TableProps } from '..';
 import { LayoutSwitch } from '../LayoutSwitch';
 
 export interface TableGridSwitchBaseProps<T, F extends FiltersMap>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter3869411207";
+var _namespace_ = "TabsFilter128028699";
 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":"TabsFilter3869411207__root","title":"TabsFilter3869411207__title"};
+export var classes = {"root":"TabsFilter128028699__root","title":"TabsFilter128028699__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_ = "ManageTagsModal4070692141";
+var _namespace_ = "ManageTagsModal1465315821";
 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":"ManageTagsModal4070692141__root"};
+export var classes = {"root":"ManageTagsModal1465315821__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TagsAssignButton/TagsAssignButton.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useRef } from 'react';
 import { Box, Button } from '@wix/design-system';
 import { TagSmall } from '@wix/wix-ui-icons-common';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
-import { useWixPatternsContainer } from '../..';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { BulkAssignTagsPopover } from '../Tags/BulkAssignTagsPopover';
 import { DisabledTooltip } from '../DisabledTooltip';
 import { observer } from 'mobx-react-lite';

package/src/components/ToolbarCollection/ToolbarCollection.tsx

@@ -6,7 +6,11 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import { CollectionToolbarProps, FilterElement, TabsFilterProps } from '../..';
+import type {
+  CollectionToolbarProps,
+  FilterElement,
+  TabsFilterProps,
+} from '../..';
 import { ComputedQuery, FiltersMap } from '@wix/bex-core';
 import { ToolbarCollectionState } from '../../state';
 import {

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

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