@wix/patterns 1.432.0 → 1.434.0

package/src/components/EditableTable/cellTypes/object/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1691792250";
+var _namespace_ = "View299129491";
 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":"View1691792250__root"};
+export var classes = {"root":"View299129491__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/select/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit606883967";
+var _namespace_ = "Edit678433903";
 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":"Edit606883967__root","selectInput":"Edit606883967__selectInput"};
+export var classes = {"root":"Edit678433903__root","selectInput":"Edit678433903__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/Edit.st.css

@@ -1,3 +1,8 @@
+@property st-global(--wds-font-size-body-small);
+@property st-global(--wsr-text-font-size-small);
+@property st-global(--wds-font-line-height-body-small);
+@property st-global(--wsr-text-line-height-small);
+
 .editWrapper {
   width: 100%;
 }
@@ -8,9 +13,23 @@
   width: 100%;
 }
 
+/* The cell view renders text at body-small. Some themes map the input's own
+   font size a step below that, which makes the text shrink on edit. */
+.inputArea input,
+.inputArea textarea {
+  font-size: var(
+    --wds-font-size-body-small,
+    var(--wsr-text-font-size-small, 14px)
+  ) !important;
+  line-height: var(
+    --wds-font-line-height-body-small,
+    var(--wsr-text-line-height-small, 18px)
+  ) !important;
+}
+
 /* Specific-values (autocomplete) mode */
 .inputArea input {
-  padding: 9px 12px 8px !important;
+  padding: 6px 8px !important;
   outline: none !important;
   border: none !important;
   box-sizing: border-box !important;
@@ -25,8 +44,14 @@
   outline: none !important;
 }
 
+/* WDS draws the input's inner shadow on a pseudo-element, so the rules above
+   don't reach it. Some themes give it a visible fill. */
+.inputArea > div::after {
+  box-shadow: none !important;
+}
+
 .inputArea textarea {
-  padding: 9px 12px 8px !important;
+  padding: 6px 8px !important;
   outline: none !important;
   border: none !important;
   box-sizing: border-box !important;

package/src/components/EditableTable/cellTypes/text/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2107400312";
+var _namespace_ = "Edit1380780013";
 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":"Edit2107400312__root","editWrapper":"Edit2107400312__editWrapper","inputArea":"Edit2107400312__inputArea"};
+export var classes = {"root":"Edit1380780013__root","editWrapper":"Edit1380780013__editWrapper","inputArea":"Edit1380780013__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {}; 
+export var vars = {"wds-font-size-body-small":"--wds-font-size-body-small","wsr-text-font-size-small":"--wsr-text-font-size-small","wds-font-line-height-body-small":"--wds-font-line-height-body-small","wsr-text-line-height-small":"--wsr-text-line-height-small"}; 
 
 
 

package/src/components/EditableTable/cellTypes/text/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View614683738";
+var _namespace_ = "View846422894";
 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":"View614683738__root"};
+export var classes = {"root":"View846422894__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/time/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1165847028";
+var _namespace_ = "Edit1089604992";
 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":"Edit1165847028__root","wrapper":"Edit1165847028__wrapper","overlay":"Edit1165847028__overlay"};
+export var classes = {"root":"Edit1089604992__root","wrapper":"Edit1089604992__wrapper","overlay":"Edit1089604992__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3379054411";
+var _namespace_ = "Edit1905676537";
 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":"Edit3379054411__root","urlInput":"Edit3379054411__urlInput"};
+export var classes = {"root":"Edit1905676537__root","urlInput":"Edit1905676537__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1273965631";
+var _namespace_ = "View379792089";
 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":"View1273965631__root","textView":"View1273965631__textView","urlText":"View1273965631__urlText","suffix":"View1273965631__suffix"};
+export var classes = {"root":"View379792089__root","textView":"View379792089__textView","urlText":"View379792089__urlText","suffix":"View379792089__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/useAddRow.ts

@@ -31,6 +31,7 @@ export function useAddRow<T, F extends FiltersMap>(
     // RAF gives React one frame to render the new row before we try to focus it.
     requestAnimationFrame(() => {
       state.cellInteraction.startEdit(newKey, firstEditableColId, 'enter');
+      state.cellInteraction.scrollFocusedCellIntoView();
     });
   }, [state, firstEditableColId]);
 

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

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

package/src/components/ExportButton/ExportButton.tsx

@@ -113,7 +113,6 @@ function _ExportButton<T, F extends FiltersMap>(
         </ResponsiveButton>
       ) : (
         <Button
-          skin="standard"
           priority="secondary"
           size="small"
           ellipsis

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

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

package/src/components/Grid/GridContent.tsx

@@ -13,6 +13,7 @@ import { DragAndDropCancel, DragAndDropSubmit } from '../DragAndDrop';
 import { ActionCell } from '../ActionCell';
 import { GridDragAndDrop } from '../GridDragAndDropDndKit/GridDragAndDrop';
 import type { Preset } from './Grid.types';
+import { version as cairoVersion } from '../../version';
 
 export interface GridContentBaseProps<T, F extends FiltersMap> {
   preset?: Preset;
@@ -116,6 +117,7 @@ function _GridContent<T, F extends FiltersMap = FiltersMap>(
       paddingLeft={contentPaddingPx}
     >
       <div
+        data-wix-patterns={cairoVersion}
         ref={(el) => {
           state._containerRectState.element = el;
         }}

package/src/components/Grid/useGridItemActions.tsx

@@ -99,7 +99,9 @@ export function useGridItemActions<T, F extends FiltersMap>(
         }
         size="small"
         skin={actionCell.imagePlacement === 'top' ? 'light' : 'standard'}
-        ariaLabel={actionCell.gridState.container.translate('cairo.moreActions')}
+        ariaLabel={actionCell.gridState.container.translate(
+          'cairo.moreActions',
+        )}
       />
     );
   } else if (

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

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

package/src/components/ImportButton/ImportButton.tsx

@@ -87,7 +87,6 @@ function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
         </ResponsiveButton>
       ) : (
         <Button
-          skin="standard"
           priority="secondary"
           size="small"
           ellipsis

package/src/components/ImportButton/ImportStepProgress.tsx

@@ -59,10 +59,7 @@ function _ImportStepProgress({ state }: ImportStepProgressProps) {
         <Text size="small" dataHook="import-progress-label">
           {isBackingUp
             ? t('cairo.import.backupDescription')
-            : t('cairo.import.progressLabel', {
-                processed: processedCount,
-                total: totalCount,
-              })}
+            : t('cairo.import.progressLabel')}
         </Text>
       )}
     </Box>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload2906753210";
+var _namespace_ = "ImportStepUpload2184561826";
 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":"ImportStepUpload2906753210__root","fileUpload":"ImportStepUpload2906753210__fileUpload"};
+export var classes = {"root":"ImportStepUpload2184561826__root","fileUpload":"ImportStepUpload2184561826__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/getImportModalStepProps.tsx

@@ -116,14 +116,11 @@ export function getImportModalStepProps({
   }
 
   if (currentStep === 'summary') {
-    const { succeeded, failed } = state.result;
+    const { failed } = state.result;
     const hasFailures = failed > 0;
 
     return {
-      title: t('cairo.import.summaryTitle', {
-        imported: String(succeeded),
-        total: state.totalCount,
-      }),
+      title: t('cairo.import.summaryTitle'),
       children: <ImportStepSummary state={state} />,
       showFooterDivider: false,
       // When rows failed, "Download CSV" is the primary (emphasized) action and

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow1123225006";
+var _namespace_ = "InputOverflow76574458";
 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":"InputOverflow1123225006__root"};
+export var classes = {"root":"InputOverflow76574458__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_ = "LoadingRow214488386";
+var _namespace_ = "LoadingRow1130441557";
 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":"LoadingRow214488386__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow214488386__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1130441557__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1130441557__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_ = "MaxHeightText1460525093";
+var _namespace_ = "MaxHeightText1050269616";
 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":"MaxHeightText1460525093__root"};
+export var classes = {"root":"MaxHeightText1050269616__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_ = "MaxLines488704964";
+var _namespace_ = "MaxLines1963498891";
 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":"MaxLines488704964__root"};
+export var classes = {"root":"MaxLines1963498891__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_ = "MultiBulkActionToolbar402848319";
+var _namespace_ = "MultiBulkActionToolbar3848768586";
 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":"MultiBulkActionToolbar402848319__root","leftGroupWrapper":"MultiBulkActionToolbar402848319__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar402848319__selectedCountItem","selectedCountText":"MultiBulkActionToolbar402848319__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar3848768586__root","leftGroupWrapper":"MultiBulkActionToolbar3848768586__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3848768586__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3848768586__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_ = "NestedTablePlaceholderStatesRow4105787451";
+var _namespace_ = "NestedTablePlaceholderStatesRow1090080776";
 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":"NestedTablePlaceholderStatesRow4105787451__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1090080776__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_ = "NestedTableRow1122296152";
+var _namespace_ = "NestedTableRow2441062097";
 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":"NestedTableRow1122296152__root","firstLevel":"NestedTableRow1122296152__firstLevel","placeholder":"NestedTableRow1122296152__placeholder","parentHovered":"NestedTableRow1122296152__parentHovered"};
+export var classes = {"root":"NestedTableRow2441062097__root","firstLevel":"NestedTableRow2441062097__firstLevel","placeholder":"NestedTableRow2441062097__placeholder","parentHovered":"NestedTableRow2441062097__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_ = "MultipleDragOverlayEffect2427680455";
+var _namespace_ = "MultipleDragOverlayEffect2325489378";
 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":"MultipleDragOverlayEffect2427680455__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2325489378__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_ = "NestedTableDragAndDropRow889009264";
+var _namespace_ = "NestedTableDragAndDropRow4280626577";
 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":"NestedTableDragAndDropRow889009264__root"};
+export var classes = {"root":"NestedTableDragAndDropRow4280626577__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PageWrapper/PageWrapperBase.tsx

@@ -7,6 +7,7 @@ import {
 import { PageState, SidePanelWidth } from '@wix/bex-core';
 import { runInAction } from 'mobx';
 import { WixDesignSystemProvider } from '@wix/design-system';
+import { version as cairoVersion } from '../../version';
 
 export interface PageWrapperBaseProps {
   pageState?: PageState;
@@ -54,7 +55,7 @@ export function PageWrapperBase(props: PageWrapperBaseProps) {
   let child = (
     <PageContextProvider value={state}>
       <div
-        data-wix-patterns
+        data-wix-patterns={cairoVersion}
         style={rootStyle}
         data-hook="cairo-root-stacking"
         ref={(el) => {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent170665173";
+var _namespace_ = "PickerContent2797420304";
 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":"PickerContent170665173__root"};
+export var classes = {"root":"PickerContent2797420304__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_ = "PickerContentAdditionalStep1878984807";
+var _namespace_ = "PickerContentAdditionalStep1055771732";
 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":"PickerContentAdditionalStep1878984807__root","titles":"PickerContentAdditionalStep1878984807__titles","suffix":"PickerContentAdditionalStep1878984807__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1055771732__root","titles":"PickerContentAdditionalStep1055771732__titles","suffix":"PickerContentAdditionalStep1055771732__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerModal/PickerModal.tsx

@@ -5,6 +5,7 @@ import { FiltersMap } from '@wix/bex-core';
 import { useReactive } from '@wix/bex-utils/react';
 import { PickerModalSplash } from '../PickerModalSplash';
 import { MultipleSelection } from '../MaxSelection';
+import { version as cairoVersion } from '../../version';
 
 export interface PickerModalProps<T, F extends FiltersMap = FiltersMap>
   extends Partial<CustomModalLayoutProps> {
@@ -116,7 +117,7 @@ export function PickerModal<T, F extends FiltersMap = FiltersMap>(
         isOpen={isModalOpen}
       >
         <div
-          data-wix-patterns
+          data-wix-patterns={cairoVersion}
           style={{ width, maxHeight: '100%', display: 'flex' }}
         >
           {child}

package/src/components/PickerStandalone/PickerStandalone.tsx

@@ -14,6 +14,7 @@ import { PickerListContent } from '../PickerListContent';
 import { PickerStandaloneTableListItem } from './PickerStandaloneTableListItem';
 import { observer } from 'mobx-react-lite';
 import { MultiCollectionSupportProvider } from '../MultiCollectionSupportProvider';
+import { version as cairoVersion } from '../../version';
 
 export interface PickerStandaloneProps<T, F extends FiltersMap>
   extends Partial<PickerStandaloneLayoutProps<T, F>> {
@@ -134,7 +135,7 @@ export function _PickerStandalone<T, F extends FiltersMap = FiltersMap>(
   return (
     <CollectionProvider value={collection}>
       <MultiCollectionSupportProvider value={state.picker.multi}>
-        <div data-patterns>
+        <div data-wix-patterns={cairoVersion}>
           <Splash
             renderError={renderError}
             dataHook={dataHook}

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

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