@wix/patterns 1.467.0 → 1.468.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxLines175110764";
+var _namespace_ = "MaxLines1821347204";
 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":"MaxLines175110764__root"};
+export var classes = {"root":"MaxLines1821347204__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_ = "MultiBulkActionToolbar226953436";
+var _namespace_ = "MultiBulkActionToolbar3973334724";
 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":"MultiBulkActionToolbar226953436__root","leftGroupWrapper":"MultiBulkActionToolbar226953436__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar226953436__selectedCountItem","selectedCountText":"MultiBulkActionToolbar226953436__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar3973334724__root","leftGroupWrapper":"MultiBulkActionToolbar3973334724__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3973334724__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3973334724__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_ = "NestedTablePlaceholderStatesRow3087449528";
+var _namespace_ = "NestedTablePlaceholderStatesRow2500048676";
 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":"NestedTablePlaceholderStatesRow3087449528__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2500048676__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_ = "NestedTableRow3699970854";
+var _namespace_ = "NestedTableRow1727132175";
 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":"NestedTableRow3699970854__root","firstLevel":"NestedTableRow3699970854__firstLevel","placeholder":"NestedTableRow3699970854__placeholder","parentHovered":"NestedTableRow3699970854__parentHovered"};
+export var classes = {"root":"NestedTableRow1727132175__root","firstLevel":"NestedTableRow1727132175__firstLevel","placeholder":"NestedTableRow1727132175__placeholder","parentHovered":"NestedTableRow1727132175__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_ = "MultipleDragOverlayEffect3085860456";
+var _namespace_ = "MultipleDragOverlayEffect2880892721";
 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":"MultipleDragOverlayEffect3085860456__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2880892721__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_ = "NestedTableDragAndDropRow1109910316";
+var _namespace_ = "NestedTableDragAndDropRow2964883176";
 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":"NestedTableDragAndDropRow1109910316__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2964883176__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent2377797984";
+var _namespace_ = "PickerContent279598614";
 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":"PickerContent2377797984__root"};
+export var classes = {"root":"PickerContent279598614__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_ = "PickerContentAdditionalStep3394898760";
+var _namespace_ = "PickerContentAdditionalStep1268835811";
 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":"PickerContentAdditionalStep3394898760__root","titles":"PickerContentAdditionalStep3394898760__titles","suffix":"PickerContentAdditionalStep3394898760__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1268835811__root","titles":"PickerContentAdditionalStep1268835811__titles","suffix":"PickerContentAdditionalStep1268835811__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem2417037754";
+var _namespace_ = "PickerTableListItem2152260888";
 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":"PickerTableListItem2417037754__root"};
+export var classes = {"root":"PickerTableListItem2152260888__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_ = "ScrollableContent1511084467";
+var _namespace_ = "ScrollableContent2295773302";
 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":"ScrollableContent1511084467__root"};
+export var classes = {"root":"ScrollableContent2295773302__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget3796032648";
+var _namespace_ = "SetupWidget2579698650";
 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":"SetupWidget3796032648__root","row":"SetupWidget3796032648__row","completedCta":"SetupWidget3796032648__completedCta","secondaryCta":"SetupWidget3796032648__secondaryCta","card":"SetupWidget3796032648__card","stepIcon":"SetupWidget3796032648__stepIcon","chevron":"SetupWidget3796032648__chevron","chevronDisabled":"SetupWidget3796032648__chevronDisabled","inProgressLabel":"SetupWidget3796032648__inProgressLabel"};
+export var classes = {"root":"SetupWidget2579698650__root","row":"SetupWidget2579698650__row","completedCta":"SetupWidget2579698650__completedCta","secondaryCta":"SetupWidget2579698650__secondaryCta","card":"SetupWidget2579698650__card","stepIcon":"SetupWidget2579698650__stepIcon","chevron":"SetupWidget2579698650__chevron","chevronDisabled":"SetupWidget2579698650__chevronDisabled","inProgressLabel":"SetupWidget2579698650__inProgressLabel"};
 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_ = "SkeletonCard4266768508";
+var _namespace_ = "SkeletonCard3666684108";
 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":"SkeletonCard4266768508__root","headerLoading":"SkeletonCard4266768508__headerLoading"};
+export var classes = {"root":"SkeletonCard3666684108__root","headerLoading":"SkeletonCard3666684108__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_ = "SlidingModal1237452183";
+var _namespace_ = "SlidingModal304127389";
 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":"SlidingModal1237452183__root"};
+export var classes = {"root":"SlidingModal304127389__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/AddFieldColumnHeader.st.css

@@ -1,36 +1,59 @@
-.root {
-  display: inline-flex;
-  align-items: center;
+@property st-global(--wds-space-150);
+@property st-global(--wds-popover-fill);
+@property st-global(--wds-popover-border-width);
+@property st-global(--wds-popover-border-radius);
+@property st-global(--wds-shadow-surface-overlay);
+@property st-global(--wds-background-blur-surface-overlay);
+
+/* Non-resizable WDS headers have no positioning context. Sticky headers
+   already provide one and must keep their sticky positioning. */
+:global(th:not([data-sticky='true'])):has(.anchorLayer) {
+  position: relative;
+}
+
+.anchorLayer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.anchorLayer > .popover {
+  display: grid;
   width: 100%;
-  min-width: 0;
+  height: 100%;
+}
+
+.popover {
+  --wds-popover-fill: transparent;
+  --wds-popover-border-width: 0;
+  --wds-popover-border-radius: 0;
+  --wds-shadow-surface-overlay: none;
+  --wds-background-blur-surface-overlay: 0px;
 }
 
 .title {
   display: flex;
+  align-items: center;
+  box-sizing: content-box;
   width: 100%;
   min-width: 0;
+  /* Cover WDS's block padding without changing the header's layout height. */
+  min-height: 24px;
+  margin-block: calc(-1 * var(--wds-space-150, 9px));
+  padding-block: var(--wds-space-150, 9px);
 }
 
 /* Invisible hit-area around the IconButton so the cursor can travel from the
-   title up to the button without leaving the hover area (interactive=true
-   keeps the popover open while hovering the content). padding-bottom matches
-   moveBy.y so the bridge reaches the title's top edge. */
+   title to the button without leaving the hover area (interactive=true keeps
+   the popover open while hovering the content). */
 .hoverBridge {
+  -st-states: side(enum(left, right));
   display: inline-block;
-  padding: 4px 13px 4px 4px;
+  padding: 4px;
   background: transparent;
+  transform: translate(50%, -50%);
 }
 
-/* Popover content is portaled to <body> via appendTo="window", so it isn't a
-   descendant of the trigger. WDS sets data-content-element on the portaled
-   element to a unique id that includes our dataHook ("add-field-popover"),
-   so we link to it that way. */
-:global(
-    [data-content-element^='popover-content-add-field-popover-'][data-hook='popover-content'][class]
-  ) {
-  background: transparent;
-  border: none;
-  box-shadow: none;
-  border-radius: 0;
-  padding: 0;
+.hoverBridge:side(left) {
+  transform: translate(-50%, -50%);
 }

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader1088053720";
+var _namespace_ = "AddFieldColumnHeader475769976";
 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":"AddFieldColumnHeader1088053720__root","title":"AddFieldColumnHeader1088053720__title","hoverBridge":"AddFieldColumnHeader1088053720__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader475769976__root","anchorLayer":"AddFieldColumnHeader475769976__anchorLayer","popover":"AddFieldColumnHeader475769976__popover","title":"AddFieldColumnHeader475769976__title","hoverBridge":"AddFieldColumnHeader475769976__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {}; 
+export var vars = {"wds-space-150":"--wds-space-150","wds-popover-fill":"--wds-popover-fill","wds-popover-border-width":"--wds-popover-border-width","wds-popover-border-radius":"--wds-popover-border-radius","wds-shadow-surface-overlay":"--wds-shadow-surface-overlay","wds-background-blur-surface-overlay":"--wds-background-blur-surface-overlay"}; 
 
 
 

package/src/components/Table/AddFieldColumnHeader.tsx

@@ -1,65 +1,114 @@
-import React, { ReactNode, useContext, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { IconButton, Popover } from '@wix/design-system';
 import { Add } from '@wix/wix-ui-icons-common/lazy';
-import { ToolbarCollectionContext } from '../ToolbarCollectionContext';
-import { classes } from './AddFieldColumnHeader.st.css.js';
+import { observer } from 'mobx-react-lite';
+import { classes, st } from './AddFieldColumnHeader.st.css.js';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 
 export interface AddFieldColumnHeaderProps {
   children: ReactNode;
+  /** This column's id. The right border inserts after it. */
+  columnId: string;
 }
 
-export const AddFieldColumnHeader = ({
-  children,
-}: AddFieldColumnHeaderProps) => {
-  const collectionFieldsSource = useContext(
-    ToolbarCollectionContext,
-  )?.collectionFieldsSource;
-  // TODO: fix when the schema source exposes the CMS modal
-  const customColumnAddField = collectionFieldsSource?.fieldsSource
-    .fieldManagement?.canAddFields
-    ? () =>
-        collectionFieldsSource.openFieldModal({
-          origin: 'Custom columns panel',
-        })
-    : undefined;
-  const [hovered, setHovered] = useState(false);
+type Side = 'left' | 'right';
 
-  if (!collectionFieldsSource) {
-    return <>{children}</>;
-  }
+export const AddFieldColumnHeader = observer(
+  ({ children, columnId }: AddFieldColumnHeaderProps) => {
+    const toolbar = useToolbarCollectionContext();
+    const [side, setSide] = useState<Side>('right');
+    const [isButtonShown, setIsButtonShown] = useState(false);
 
-  return (
-    <Popover
-      shown={hovered}
-      appendTo="window"
-      placement="top-start"
-      moveBy={{ x: -27, y: -47 }}
-      interactive
-      fluid
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      className={classes.root}
-      dataHook="add-field-popover"
-    >
-      <Popover.Element>
-        <span className={classes.title}>{children}</span>
-      </Popover.Element>
-      <Popover.Content>
-        <span className={classes.hoverBridge}>
-          <IconButton
-            size="tiny"
-            skin="standard"
-            priority="secondary"
-            dataHook="add-field-column-header-button"
-            onClick={(e) => {
-              e.stopPropagation();
-              customColumnAddField?.();
-            }}
+    const collectionFieldsSource = toolbar?.collectionFieldsSource;
+
+    if (!collectionFieldsSource?.fieldsSource.fieldManagement?.canAddFields) {
+      return <>{children}</>;
+    }
+
+    if (toolbar.columnSizesState?.isResizing) {
+      return <>{children}</>;
+    }
+
+    // TODO: fix when the schema source exposes the CMS modal
+    const customColumnAddField = () => {
+      const columns = toolbar.selectedOrderedColumnsOrAll;
+      const index = columns.findIndex((c) => c.id === columnId);
+      const afterColumnId =
+        side === 'left'
+          ? columns
+              .slice(0, Math.max(index, 0))
+              .reverse()
+              .find((c) => c.id != null)?.id ?? null
+          : columnId;
+
+      toolbar.customColumnsState?.setPendingInsertPosition(afterColumnId);
+      collectionFieldsSource.openFieldModal({
+        origin: 'Table column header',
+      });
+    };
+
+    const handleMouseMove = (event: React.MouseEvent<HTMLSpanElement>) => {
+      const { left, width } = event.currentTarget.getBoundingClientRect();
+
+      setSide(event.clientX < left + width / 2 ? 'left' : 'right');
+      setIsButtonShown(true);
+    };
+
+    return (
+      <>
+        <span
+          className={classes.title}
+          data-hook="add-field-column-header-title"
+          onMouseMove={handleMouseMove}
+          onMouseLeave={() => setIsButtonShown(false)}
+        >
+          {children}
+        </span>
+        <span className={classes.anchorLayer}>
+          <Popover
+            shown={isButtonShown}
+            appendTo="window"
+            placement={side === 'left' ? 'bottom-start' : 'bottom-end'}
+            hideDelay={200}
+            flip={false}
+            // Turns off popper's preventOverflow, which otherwise pulls the button
+            // back inside the boundary and off the border it should sit on.
+            fixed
+            interactive
+            className={classes.popover}
+            dataHook="add-field-popover"
           >
-            <Add />
-          </IconButton>
+            <Popover.Element>
+              <span aria-hidden />
+            </Popover.Element>
+            <Popover.Content>
+              <span
+                className={st(classes.hoverBridge, { side })}
+                data-hook="add-field-column-header"
+                data-side={side}
+                onMouseEnter={() => setIsButtonShown(true)}
+                onMouseLeave={() => setIsButtonShown(false)}
+              >
+                <IconButton
+                  ariaLabel={toolbar.container.translate(
+                    'cairo.customFields.addCustomField.CTA',
+                  )}
+                  size="tiny"
+                  skin="dark"
+                  priority="secondary"
+                  dataHook="add-field-column-header-button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    customColumnAddField();
+                  }}
+                >
+                  <Add />
+                </IconButton>
+              </span>
+            </Popover.Content>
+          </Popover>
         </span>
-      </Popover.Content>
-    </Popover>
-  );
-};
+      </>
+    );
+  },
+);

package/src/components/Table/AddFieldColumnHeader.uni.driver.ts

@@ -0,0 +1,33 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { IconButtonUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+
+export function AddFieldColumnHeaderUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+) {
+  const bridge = body.$('[data-hook="add-field-column-header"]');
+  const addButton = body.$('[data-hook="add-field-column-header-button"]');
+
+  return {
+    ...baseUniDriverFactory(base),
+
+    /**
+     * Moves the pointer over the column title, which is what reveals the
+     * button. The border it lands on comes from where the pointer is across
+     * the title, so only a laid-out browser can produce a left one.
+     */
+    hoverTitle: () => base.mouse.moveTo(base),
+
+    /** The border the button sits on: "left" or "right". */
+    getSide: () => bridge.attr('data-side'),
+
+    addButtonExists: () => addButton.exists(),
+
+    getAddButtonLabel: () => addButton.attr('aria-label'),
+
+    clickAddButton: () => IconButtonUniDriver(addButton, body).click(),
+  };
+}
+
+export default AddFieldColumnHeaderUniDriver;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter560065561";
+var _namespace_ = "TabsFilter1758085590";
 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":"TabsFilter560065561__root","titleBox":"TabsFilter560065561__titleBox"};
+export var classes = {"root":"TabsFilter1758085590__root","titleBox":"TabsFilter1758085590__titleBox"};
 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_ = "ManageTagsModal17622325";
+var _namespace_ = "ManageTagsModal323279871";
 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":"ManageTagsModal17622325__root"};
+export var classes = {"root":"ManageTagsModal323279871__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem1298306547";
+var _namespace_ = "ToolbarItem37333139";
 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":"ToolbarItem1298306547__root"};
+export var classes = {"root":"ToolbarItem37333139__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_ = "ToolbarItemBox3970639897";
+var _namespace_ = "ToolbarItemBox4138502288";
 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":"ToolbarItemBox3970639897__root"};
+export var classes = {"root":"ToolbarItemBox4138502288__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_ = "common1871939312";
+var _namespace_ = "common3746632953";
 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":"common1871939312__root","column":"common1871939312__column","fullHeight":"common1871939312__fullHeight"};
+export var classes = {"root":"common3746632953__root","column":"common3746632953__column","fullHeight":"common3746632953__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};