@wix/patterns 1.325.0 → 1.328.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter494994749";
+var _namespace_ = "TabsFilter3724851838";
 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":"TabsFilter494994749__root","title":"TabsFilter494994749__title"};
+export var classes = {"root":"TabsFilter3724851838__root","title":"TabsFilter3724851838__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_ = "ManageTagsModal2750172858";
+var _namespace_ = "ManageTagsModal970534421";
 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":"ManageTagsModal2750172858__root"};
+export var classes = {"root":"ManageTagsModal970534421__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_ = "ToolbarItem2717057697";
+var _namespace_ = "ToolbarItem1154854352";
 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":"ToolbarItem2717057697__root"};
+export var classes = {"root":"ToolbarItem1154854352__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_ = "ToolbarItemBox4200702974";
+var _namespace_ = "ToolbarItemBox2032730535";
 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":"ToolbarItemBox4200702974__root"};
+export var classes = {"root":"ToolbarItemBox2032730535__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_ = "common1210614291";
+var _namespace_ = "common1571706969";
 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":"common1210614291__root","column":"common1210614291__column","fullHeight":"common1210614291__fullHeight"};
+export var classes = {"root":"common1571706969__root","column":"common1571706969__column","fullHeight":"common1571706969__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_ = "CollectionPageHeader736711144";
+var _namespace_ = "CollectionPageHeader2819825270";
 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":"CollectionPageHeader736711144__root"};
+export var classes = {"root":"CollectionPageHeader2819825270__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_ = "FormPageHeader3304963303";
+var _namespace_ = "FormPageHeader2065995919";
 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":"FormPageHeader3304963303__root"};
+export var classes = {"root":"FormPageHeader2065995919__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/PickerContentState.ts

@@ -17,7 +17,7 @@ import { addEventListener } from '@wix/bex-core/util';
 import type { PickerModalState } from '../hooks';
 import { UsePickerContentParamsBase } from '../hooks/usePickerContent';
 import { fromMultipleSelectionToBoolean } from '../components/MaxSelection';
-import { action, makeObservable } from 'mobx';
+import { action, makeObservable, observable, runInAction } from 'mobx';
 import { cairoFilterToggled, newItemCreationStart } from '@wix/bex-core/bi';
 import { EventEmitter } from 'events';
 import { TypedEmitter } from '@wix/bex-core/events';
@@ -53,6 +53,11 @@ export class PickerContentState<T, F extends FiltersMap> {
 
   additionalStep?: AdditionalStepState<T, F>;
 
+  isAdditionalStepShown = false;
+
+  autoAdditionalStepOnInitialSelect = false;
+  isAutoAdditionalStepPending = true;
+
   constructor(params: PickerContentStateParams<T, F>) {
     const { collection, modalState, createBILogger, events, initialSelect } =
       params;
@@ -80,6 +85,9 @@ export class PickerContentState<T, F extends FiltersMap> {
 
     makeObservable(this, {
       _setInitialSelection: action,
+      isAdditionalStepShown: observable.ref,
+      setIsAdditionalStepShown: action.bound,
+      isAutoAdditionalStepPending: observable.ref,
     });
 
     if (modalState.pickerContentRef.current == null) {
@@ -309,10 +317,16 @@ export class PickerContentState<T, F extends FiltersMap> {
     this.picker.collection.emitter.on('fetch', onFetch);
   }
 
-  init() {
+  init(initParams?: { autoAdditionalStepOnInitialSelect?: boolean }) {
     const { picker, modalState, initTask } = this;
     const { collection } = picker;
 
+    if (initParams?.autoAdditionalStepOnInitialSelect) {
+      this.autoAdditionalStepOnInitialSelect = true;
+    } else {
+      this.isAutoAdditionalStepPending = false;
+    }
+
     const bi = new PickerContentStateBI({ state: this });
 
     const disposers = [picker.init(), bi.init()];
@@ -340,6 +354,17 @@ export class PickerContentState<T, F extends FiltersMap> {
       if (!isPickerSelectionV2(this.initialSelect)) {
         this._setInitialSelection();
       }
+
+      if (this.autoAdditionalStepOnInitialSelect) {
+        runInAction(() => {
+          const selectedItem =
+            this.picker.collection.bulkSelect.selectedValues?.[0];
+          if (selectedItem) {
+            this.isAdditionalStepShown = true;
+          }
+          this.isAutoAdditionalStepPending = false;
+        });
+      }
     });
 
     return () => {
@@ -381,4 +406,8 @@ export class PickerContentState<T, F extends FiltersMap> {
 
     afters.forEach(({ afterToggleIsSelectAll }) => afterToggleIsSelectAll());
   });
+
+  setIsAdditionalStepShown(value: boolean) {
+    this.isAdditionalStepShown = value;
+  }
 }

package/src/styles.global.css

@@ -1 +1 @@
-.CardContainer312641811__root.CardContainer312641811--mobile{border-radius:0}.Collapse635544407__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse635544407__exit{height:0}.CollectionPage3558163292__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage3558163292__root.CollectionPage3558163292--mobile{--wds-page-header-padding-horizontal:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage3558163292__root.CollectionPage3558163292--panel{overflow:hidden;position:relative}.CollectionTable967591821__root td{vertical-align:middle}.CollectionTable967591821__root.CollectionTable967591821--mobile td:first-child{padding-left:18px}.CollectionTable967591821__root.CollectionTable967591821--mobile td:last-child{padding-right:18px}.CollectionToolbar2765748828__left{min-width:0}.CollectionToolbar2765748828__root.CollectionToolbar2765748828--views .CollectionToolbar2765748828__left{flex-shrink:1;flex-grow:0}.CollectionToolbar2765748828__left.CollectionToolbar2765748828--expandable{flex:auto}.CollectionToolbar2765748828__root .CollectionToolbar2765748828__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar2765748828__root.CollectionToolbar2765748828--views .CollectionToolbar2765748828__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar2765748828__root .CollectionToolbar2765748828__right.CollectionToolbar2765748828__fullWidth{margin-inline-start:0!important}.CollectionToolbar2765748828__root.CollectionToolbar2765748828--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter676053826__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter676053826__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter676053826__searchMobile:not(.SearchOrCustomFilter676053826--expandable){left:18px}.SearchOrCustomFilter676053826__searchMobile.SearchOrCustomFilter676053826--expandable.SearchOrCustomFilter676053826--expanded{left:18px}.AutoCompleteReadonly2136975089__root.AutoCompleteReadonly2136975089--disableEditing{cursor:pointer}.AutoCompleteReadonly2136975089__root.AutoCompleteReadonly2136975089--disableEditing input{cursor:pointer}.ViewsDropdown1562602937__root{width:200px}.DragHandle1680406004__root{display:flex;align-items:center}.DragHandle1680406004__root:not(.DragHandle1680406004--disabled){cursor:grab;color:#a8caff}.DragHandle1680406004__root.DragHandle1680406004--disabled{color:#acafc4}.DragHandle1680406004__root:focus-visible:not(.DragHandle1680406004--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle1680406004__root.DragHandle1680406004--disabled{pointer-events:none}.DragHandle1680406004__root.DragHandle1680406004--dragging:not(.DragHandle1680406004--disabled){cursor:grabbing}.EntityPagePlain2129186045__root.EntityPagePlain2129186045--mobile{--wds-page-header-padding-horizontal:0}.Fade2580742614__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade2580742614__root.Fade2580742614--exit{opacity:0}.Heading1552734931__root{visibility:visible}.Heading1552734931__root.Heading1552734931--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow1980064947__root.InputOverflow1980064947--selected:not(.InputOverflow1980064947--focused) input::placeholder{color:#000624}@keyframes LoadingRow72311180__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%}}.LoadingRow72311180__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:LoadingRow72311180__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText2940241560__root{opacity:1}.MaxHeightText2940241560__root.MaxHeightText2940241560--height24{line-height:24px}.MaxLines1993089027__root{overflow:hidden}.MaxLines1993089027__root.MaxLines1993089027--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar3117766984__root{min-width:0}.MultiBulkActionToolbar3117766984__leftGroupWrapper{overflow:hidden;padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar3117766984__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar3117766984__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow634506500__root td{padding:0!important;width:100%}.NestedTableRow3595325079__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow3595325079__root:hover{background-color:#e7f0ff!important}.NestedTableRow3595325079__root.NestedTableRow3595325079--expandable{cursor:pointer}.NestedTableRow3595325079__placeholder td{padding:0!important;width:100%}.NestedTableRow3595325079__root:hover td:first-of-type::before,.NestedTableRow3595325079__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect3760073984__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)}.NestedTableDragAndDropRow2976497727__root.NestedTableDragAndDropRow2976497727--draggingInto td{background-color:#e7f0ff!important}.PickerContent3108120277__root{display:flex}.PickerContentAdditionalStep4199282124__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep4199282124__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem2983769481__root{box-sizing:border-box}.ScrollableContent980648129__root.ScrollableContent980648129--overflowY{overflow-y:auto}.ScrollableContent980648129__root.ScrollableContent980648129--overflowX{overflow-x:auto}.ScrollableContent980648129__root.ScrollableContent980648129--smooth{scroll-behavior:smooth}.SkeletonCard1226407146__headerLoading{display:block!important}.SlidingModal3040154923__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal3040154923__root.SlidingModal3040154923--overlay{transition:transform 0s ease 0s}.SlidingModal3040154923__root.SlidingModal3040154923---appendTo-6-parent{position:absolute}.SlidingModal3040154923__root:not(.SlidingModal3040154923--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter494994749__root .TabsFilter494994749__title{color:inherit!important}.ManageTagsModal2750172858__root{display:flex}.ToolbarItem2717057697__root{min-width:0}.ToolbarItemBox4200702974__root{min-width:0}.ToolbarItemBox4200702974__root.ToolbarItemBox4200702974--removeStartPadding{margin-left:-24px}.ToolbarItemBox4200702974__root.ToolbarItemBox4200702974--expandable{flex:1 0}.common1210614291__column{display:flex;flex-direction:column}.common1210614291__fullHeight{height:100%;min-height:0}.CollectionPageHeader736711144__root.CollectionPageHeader736711144--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader736711144__root.CollectionPageHeader736711144--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader3304963303__root.FormPageHeader3304963303--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader3304963303__root.FormPageHeader3304963303--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+.CardContainer3687363124__root.CardContainer3687363124--mobile{border-radius:0}.Collapse1559384194__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse1559384194__exit{height:0}.CollectionPage3255568042__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage3255568042__root.CollectionPage3255568042--mobile{--wds-page-header-padding-horizontal:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage3255568042__root.CollectionPage3255568042--panel{overflow:hidden;position:relative}.CollectionTable2031780918__root td{vertical-align:middle}.CollectionTable2031780918__root.CollectionTable2031780918--mobile td:first-child{padding-left:18px}.CollectionTable2031780918__root.CollectionTable2031780918--mobile td:last-child{padding-right:18px}.CollectionToolbar1004433849__left{min-width:0}.CollectionToolbar1004433849__root.CollectionToolbar1004433849--views .CollectionToolbar1004433849__left{flex-shrink:1;flex-grow:0}.CollectionToolbar1004433849__left.CollectionToolbar1004433849--expandable{flex:auto}.CollectionToolbar1004433849__root .CollectionToolbar1004433849__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar1004433849__root.CollectionToolbar1004433849--views .CollectionToolbar1004433849__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar1004433849__root .CollectionToolbar1004433849__right.CollectionToolbar1004433849__fullWidth{margin-inline-start:0!important}.CollectionToolbar1004433849__root.CollectionToolbar1004433849--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter1235070044__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter1235070044__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter1235070044__searchMobile:not(.SearchOrCustomFilter1235070044--expandable){left:18px}.SearchOrCustomFilter1235070044__searchMobile.SearchOrCustomFilter1235070044--expandable.SearchOrCustomFilter1235070044--expanded{left:18px}.AutoCompleteReadonly1011499478__root.AutoCompleteReadonly1011499478--disableEditing{cursor:pointer}.AutoCompleteReadonly1011499478__root.AutoCompleteReadonly1011499478--disableEditing input{cursor:pointer}.ViewsDropdown2695123684__root{width:200px}.DragHandle123620585__root{display:flex;align-items:center}.DragHandle123620585__root:not(.DragHandle123620585--disabled){cursor:grab;color:#a8caff}.DragHandle123620585__root.DragHandle123620585--disabled{color:#acafc4}.DragHandle123620585__root:focus-visible:not(.DragHandle123620585--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle123620585__root.DragHandle123620585--disabled{pointer-events:none}.DragHandle123620585__root.DragHandle123620585--dragging:not(.DragHandle123620585--disabled){cursor:grabbing}.EntityPagePlain301057334__root.EntityPagePlain301057334--mobile{--wds-page-header-padding-horizontal:0}.Fade1912210342__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade1912210342__root.Fade1912210342--exit{opacity:0}.Heading941919792__root{visibility:visible}.Heading941919792__root.Heading941919792--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow114927068__root.InputOverflow114927068--selected:not(.InputOverflow114927068--focused) input::placeholder{color:#000624}@keyframes LoadingRow1343617370__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%}}.LoadingRow1343617370__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:LoadingRow1343617370__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText549151743__root{opacity:1}.MaxHeightText549151743__root.MaxHeightText549151743--height24{line-height:24px}.MaxLines2207513211__root{overflow:hidden}.MaxLines2207513211__root.MaxLines2207513211--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar460152276__root{min-width:0}.MultiBulkActionToolbar460152276__leftGroupWrapper{overflow:hidden;padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar460152276__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar460152276__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow3701326031__root td{padding:0!important;width:100%}.NestedTableRow1368243707__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow1368243707__root:hover{background-color:#e7f0ff!important}.NestedTableRow1368243707__root.NestedTableRow1368243707--expandable{cursor:pointer}.NestedTableRow1368243707__placeholder td{padding:0!important;width:100%}.NestedTableRow1368243707__root:hover td:first-of-type::before,.NestedTableRow1368243707__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect2955383918__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)}.NestedTableDragAndDropRow3437582656__root.NestedTableDragAndDropRow3437582656--draggingInto td{background-color:#e7f0ff!important}.PickerContent454214005__root{display:flex}.PickerContentAdditionalStep1442705227__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep1442705227__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem644266313__root{box-sizing:border-box}.ScrollableContent2292865565__root.ScrollableContent2292865565--overflowY{overflow-y:auto}.ScrollableContent2292865565__root.ScrollableContent2292865565--overflowX{overflow-x:auto}.ScrollableContent2292865565__root.ScrollableContent2292865565--smooth{scroll-behavior:smooth}.SkeletonCard2419374409__headerLoading{display:block!important}.SlidingModal745475248__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal745475248__root.SlidingModal745475248--overlay{transition:transform 0s ease 0s}.SlidingModal745475248__root.SlidingModal745475248---appendTo-6-parent{position:absolute}.SlidingModal745475248__root:not(.SlidingModal745475248--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter3724851838__root .TabsFilter3724851838__title{color:inherit!important}.ManageTagsModal970534421__root{display:flex}.ToolbarItem1154854352__root{min-width:0}.ToolbarItemBox2032730535__root{min-width:0}.ToolbarItemBox2032730535__root.ToolbarItemBox2032730535--removeStartPadding{margin-left:-24px}.ToolbarItemBox2032730535__root.ToolbarItemBox2032730535--expandable{flex:1 0}.common1571706969__column{display:flex;flex-direction:column}.common1571706969__fullHeight{height:100%;min-height:0}.CollectionPageHeader2819825270__root.CollectionPageHeader2819825270--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader2819825270__root.CollectionPageHeader2819825270--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader2065995919__root.FormPageHeader2065995919--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader2065995919__root.FormPageHeader2065995919--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/src/version.ts

@@ -1 +1 @@
-export const version = 'patterns@1.325.0';
+export const version = 'patterns@1.328.0';

package/dist/cjs/components/Suggestions/DESIGN_BI_REPORTING.md

@@ -1,73 +0,0 @@
-# Suggestions BI Reporting - Design Doc
-
-## Overview
-
-Implement BI (Business Intelligence) reporting for the Suggestions component to track user interactions and component lifecycle events.
-
-## Events to Report
-
-| Event | Description |
-|-------|-------------|
-| **LOAD** | Offers successfully fetched from dealer service |
-| **VIEW** | Offer card becomes visible to the user |
-| **CLICK** | User clicks on an offer card CTA |
-
-## Reporting Targets
-
-1. **Cairo BI** - Standard internal analytics via `reportBi`
-2. **Dealer API** - External package for dealer-specific tracking (TBD)
-
-## Key Requirements
-
-- [ ] VIEW events should fire only once per offer (not on every scroll)
-- [ ] Infrastructure should be extensible for future event types
-- [ ] Must include unit tests
-- [ ] Performance validation required
-
-## Technical Approach
-
-- Use `IntersectionObserver` for VIEW event detection (see existing `IntersectionObserverState`)
-- Follow existing BIReporter patterns (e.g., `ToolbarBIReporter`, `KanbanStateBIReporter`)
-
----
-
-## Progress:
- - [X] Implemented basic IntersectionObsever for view events 
- - [X] Decide how to report viw events: callback for each card, general callback + additional array that saves data (hook becomes very spesific) - Descidion is callback
- - [X] Finalize dealer view rportings 
- - [X] Finalize cairo reporting
- - [X] add tests
- - [X] understand if dealer has bi testtkit (It does not)
- - [] mock IntersectionObserver properly for dealer BI
- - [] add more dealer events (main cta clicked)
-
-## Notes & Findings
-
-- For BI, should create a new BIlogger class and use it inside the state.
-state should expose different handlers for actions in UI (onView, onCtaClick, onLoad...) and I just call it in UI. the state class handles the bi logging with the BI logger, I should not expose it outside to the compoennts or users themselves.
-
-### Dealer API Research
-- Package name: TBD
-- Available methods: TBD
-- Required payload structure: TBD
-
-### IntersectionObserver Investigation
-- it is the way, we can set the suggestions container as observer
-- we can use unobserve once an element was "viewed" and the event fired.
-
-
-### Performance Considerations
-- 
-
-### Open Questions
-- What specific data fields are required for each event?
-- What is the exact dealer reporting package to use?
-- Should VIEW tracking be opt-in or opt-out?
-
----
-
-## References
-
-- `packages/cairo/src/state/IntersectionObserverState.ts`
-- `packages/cairo/src/state/ToolbarBIReporter.ts`
-- `packages/cairo/src/state/Suggestions/SuggestionsState.ts`

package/dist/esm/components/Suggestions/DESIGN_BI_REPORTING.md

@@ -1,73 +0,0 @@
-# Suggestions BI Reporting - Design Doc
-
-## Overview
-
-Implement BI (Business Intelligence) reporting for the Suggestions component to track user interactions and component lifecycle events.
-
-## Events to Report
-
-| Event | Description |
-|-------|-------------|
-| **LOAD** | Offers successfully fetched from dealer service |
-| **VIEW** | Offer card becomes visible to the user |
-| **CLICK** | User clicks on an offer card CTA |
-
-## Reporting Targets
-
-1. **Cairo BI** - Standard internal analytics via `reportBi`
-2. **Dealer API** - External package for dealer-specific tracking (TBD)
-
-## Key Requirements
-
-- [ ] VIEW events should fire only once per offer (not on every scroll)
-- [ ] Infrastructure should be extensible for future event types
-- [ ] Must include unit tests
-- [ ] Performance validation required
-
-## Technical Approach
-
-- Use `IntersectionObserver` for VIEW event detection (see existing `IntersectionObserverState`)
-- Follow existing BIReporter patterns (e.g., `ToolbarBIReporter`, `KanbanStateBIReporter`)
-
----
-
-## Progress:
- - [X] Implemented basic IntersectionObsever for view events 
- - [X] Decide how to report viw events: callback for each card, general callback + additional array that saves data (hook becomes very spesific) - Descidion is callback
- - [X] Finalize dealer view rportings 
- - [X] Finalize cairo reporting
- - [X] add tests
- - [X] understand if dealer has bi testtkit (It does not)
- - [] mock IntersectionObserver properly for dealer BI
- - [] add more dealer events (main cta clicked)
-
-## Notes & Findings
-
-- For BI, should create a new BIlogger class and use it inside the state.
-state should expose different handlers for actions in UI (onView, onCtaClick, onLoad...) and I just call it in UI. the state class handles the bi logging with the BI logger, I should not expose it outside to the compoennts or users themselves.
-
-### Dealer API Research
-- Package name: TBD
-- Available methods: TBD
-- Required payload structure: TBD
-
-### IntersectionObserver Investigation
-- it is the way, we can set the suggestions container as observer
-- we can use unobserve once an element was "viewed" and the event fired.
-
-
-### Performance Considerations
-- 
-
-### Open Questions
-- What specific data fields are required for each event?
-- What is the exact dealer reporting package to use?
-- Should VIEW tracking be opt-in or opt-out?
-
----
-
-## References
-
-- `packages/cairo/src/state/IntersectionObserverState.ts`
-- `packages/cairo/src/state/ToolbarBIReporter.ts`
-- `packages/cairo/src/state/Suggestions/SuggestionsState.ts`

package/src/components/Suggestions/DESIGN_BI_REPORTING.md

@@ -1,73 +0,0 @@
-# Suggestions BI Reporting - Design Doc
-
-## Overview
-
-Implement BI (Business Intelligence) reporting for the Suggestions component to track user interactions and component lifecycle events.
-
-## Events to Report
-
-| Event | Description |
-|-------|-------------|
-| **LOAD** | Offers successfully fetched from dealer service |
-| **VIEW** | Offer card becomes visible to the user |
-| **CLICK** | User clicks on an offer card CTA |
-
-## Reporting Targets
-
-1. **Cairo BI** - Standard internal analytics via `reportBi`
-2. **Dealer API** - External package for dealer-specific tracking (TBD)
-
-## Key Requirements
-
-- [ ] VIEW events should fire only once per offer (not on every scroll)
-- [ ] Infrastructure should be extensible for future event types
-- [ ] Must include unit tests
-- [ ] Performance validation required
-
-## Technical Approach
-
-- Use `IntersectionObserver` for VIEW event detection (see existing `IntersectionObserverState`)
-- Follow existing BIReporter patterns (e.g., `ToolbarBIReporter`, `KanbanStateBIReporter`)
-
----
-
-## Progress:
- - [X] Implemented basic IntersectionObsever for view events 
- - [X] Decide how to report viw events: callback for each card, general callback + additional array that saves data (hook becomes very spesific) - Descidion is callback
- - [X] Finalize dealer view rportings 
- - [X] Finalize cairo reporting
- - [X] add tests
- - [X] understand if dealer has bi testtkit (It does not)
- - [] mock IntersectionObserver properly for dealer BI
- - [] add more dealer events (main cta clicked)
-
-## Notes & Findings
-
-- For BI, should create a new BIlogger class and use it inside the state.
-state should expose different handlers for actions in UI (onView, onCtaClick, onLoad...) and I just call it in UI. the state class handles the bi logging with the BI logger, I should not expose it outside to the compoennts or users themselves.
-
-### Dealer API Research
-- Package name: TBD
-- Available methods: TBD
-- Required payload structure: TBD
-
-### IntersectionObserver Investigation
-- it is the way, we can set the suggestions container as observer
-- we can use unobserve once an element was "viewed" and the event fired.
-
-
-### Performance Considerations
-- 
-
-### Open Questions
-- What specific data fields are required for each event?
-- What is the exact dealer reporting package to use?
-- Should VIEW tracking be opt-in or opt-out?
-
----
-
-## References
-
-- `packages/cairo/src/state/IntersectionObserverState.ts`
-- `packages/cairo/src/state/ToolbarBIReporter.ts`
-- `packages/cairo/src/state/Suggestions/SuggestionsState.ts`