@wix/patterns 0.8.0

package/dist/cjs/state/PickerStandaloneState.js

@@ -0,0 +1,266 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.PickerStandaloneState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _bexCore = require("@wix/bex-core");
+var _replaceUrlCurlySegments = require("../utils/replaceUrlCurlySegments");
+var _mobx = require("mobx");
+var _validateEncodedUrl = require("../utils/validateEncodedUrl");
+var _bi = require("@wix/bex-core/bi");
+var _matchMediaQuery = require("../utils/matchMediaQuery");
+const withoutDefaults = (0, _bexCore.withoutIrrelevant)();
+const supportedProtocols = ['https:', 'http:'];
+function tryParseUrl(str) {
+  try {
+    const url = new URL(str);
+    (0, _validateEncodedUrl.validateEncodedUrl)(url);
+    if (!supportedProtocols.includes(url.protocol)) {
+      throw new Error(`Unsupported action url protocol: ${url.protocol}`);
+    }
+    return url;
+  } catch (e) {
+    console.error(e);
+  }
+  return undefined;
+}
+class PickerStandaloneState {
+  constructor(params) {
+    var _windowUrl$searchPara;
+    (0, _defineProperty2.default)(this, "picker", void 0);
+    (0, _defineProperty2.default)(this, "initialSelect", void 0);
+    (0, _defineProperty2.default)(this, "noItemsAvailableDestinationUrl", void 0);
+    (0, _defineProperty2.default)(this, "defaultDestinationUrl", void 0);
+    (0, _defineProperty2.default)(this, "primaryButtonText", void 0);
+    (0, _defineProperty2.default)(this, "title", void 0);
+    (0, _defineProperty2.default)(this, "subtitle", void 0);
+    (0, _defineProperty2.default)(this, "destinationUrlTemplate", void 0);
+    (0, _defineProperty2.default)(this, "reportBi", void 0);
+    (0, _defineProperty2.default)(this, "window", void 0);
+    (0, _defineProperty2.default)(this, "errorMonitor", void 0);
+    (0, _defineProperty2.default)(this, "urlSegmentPropertyMap", void 0);
+    (0, _defineProperty2.default)(this, "events", void 0);
+    (0, _defineProperty2.default)(this, "initTask", new _bexCore.TaskState());
+    (0, _defineProperty2.default)(this, "logoType", void 0);
+    (0, _defineProperty2.default)(this, "submitted", false);
+    (0, _defineProperty2.default)(this, "isMobileView", void 0);
+    (0, _defineProperty2.default)(this, "isDuringSearch", void 0);
+    (0, _defineProperty2.default)(this, "_hasCreateNewAction", void 0);
+    this.reportBi = params.createBILogger({
+      ...params.collection.fqdn,
+      type: 'standalone',
+      componentType: 'Picker Standalone'
+    });
+    this.picker = new _bexCore.PickerState({
+      getMaxItems: () => 1,
+      collection: params.collection,
+      shouldFilterNotAffectTotalCount: params.shouldFilterNotAffectTotalCount,
+      events: params.events,
+      reportBi: this.reportBi,
+      loadStartTime: 0 // for standalone we want measure from start of navigation
+    });
+    this.noItemsAvailableDestinationUrl = params.noItemsAvailableDestinationUrl;
+    this.defaultDestinationUrl = params.defaultDestinationUrl;
+    this.initialSelect = params.initialSelect;
+    this.window = params.window;
+    this.errorMonitor = params.errorMonitor;
+    this.urlSegmentPropertyMap = params.urlSegmentPropertyMap;
+    this.events = params.events ?? {};
+    this.logoType = params.logoType;
+    const windowUrl = new URL(this.window.location.href);
+    this.primaryButtonText = windowUrl.searchParams.get('primaryButtonText');
+    this.title = (_windowUrl$searchPara = windowUrl.searchParams.get('title')) == null ? void 0 : _windowUrl$searchPara.trim();
+    this.subtitle = windowUrl.searchParams.get('subtitle');
+    const maybeActionUrlString = windowUrl.searchParams.get('actionUrl');
+    if (maybeActionUrlString) {
+      this.destinationUrlTemplate = tryParseUrl(maybeActionUrlString);
+    }
+    this.isMobileView = !this.window.matchMedia(`(min-width: 768px)`).matches;
+    this.isDuringSearch = false;
+    (0, _mobx.makeObservable)(this, {
+      handlePrimaryButtonClick: _mobx.action.bound,
+      submitted: _mobx.observable.ref,
+      isMobileView: _mobx.observable.ref,
+      isDuringSearch: _mobx.observable.ref,
+      setIsDuringSearch: _mobx.action
+    });
+  }
+  onCreateNewClick() {
+    this.reportBi(withoutDefaults(_bi.newItemCreationStart)({
+      ...this.picker._commonDynamicBiParams()
+    }));
+  }
+  onCreateNewActionCompleted({
+    itemId
+  }) {
+    this.reportBi(withoutDefaults(_bi.newItemCreationEnd)({
+      ...this.picker._commonDynamicBiParams(),
+      resultType: 'success',
+      itemId
+    }));
+  }
+  init() {
+    const {
+      picker,
+      initTask,
+      noItemsAvailableDestinationUrl,
+      initialSelect,
+      window,
+      errorMonitor,
+      events: {
+        onSingleItemAutoNavigation
+      }
+    } = this;
+    const matchMedia = this.window.matchMedia(`(min-width: 768px)`);
+    const matchMediaChangeListener = ({
+      matches
+    }) => {
+      this.isMobileView = !matches;
+    };
+    const disposeMedia = (0, _matchMediaQuery.registerMatchMedia)({
+      errorMonitor,
+      matchMediaChangeListener,
+      matchMedia
+    });
+    const disposers = [picker.init(), this.subscribeResultUpdated(), disposeMedia];
+    initTask.run(async () => {
+      await picker.initTask.status.promise;
+      await (0, _mobx.runInAction)(async () => {
+        const {
+          collection,
+          someHidden
+        } = picker;
+        const {
+          result,
+          hasAvailableItems,
+          bulkSelect,
+          query: {
+            search: {
+              isEmpty: searchIsEmpty
+            }
+          }
+        } = collection;
+        const {
+          status,
+          keyedItems,
+          total
+        } = result;
+        if (status.isSuccess && !hasAvailableItems && !this._hasCreateNewAction && noItemsAvailableDestinationUrl) {
+          window.location.href = noItemsAvailableDestinationUrl;
+          await new Promise(() => {}); // keep showing loader while navigating
+          return;
+        }
+        if (status.isSuccess && total === 1 && !this._hasCreateNewAction && !someHidden && searchIsEmpty) {
+          const navigated = this.navigateToDestinationUrl(keyedItems[0], onSingleItemAutoNavigation);
+          if (navigated) {
+            await new Promise(() => {}); // keep showing loader while navigating
+          }
+          return;
+        }
+        if (initialSelect) {
+          const selectedItem = initialSelect === true ? keyedItems[0] : keyedItems.find(({
+            item
+          }, index) => initialSelect(item, index));
+          if (selectedItem != null) {
+            bulkSelect.selectOneItem(selectedItem);
+          }
+        }
+      });
+    }, error => {
+      errorMonitor.captureException(error);
+    });
+    return () => {
+      for (const disposer of disposers) {
+        disposer();
+      }
+    };
+  }
+  resolveDestinationUrl(item) {
+    const {
+      destinationUrlTemplate,
+      defaultDestinationUrl,
+      urlSegmentPropertyMap
+    } = this;
+    if (destinationUrlTemplate) {
+      return (0, _replaceUrlCurlySegments.replaceUrlCurlySegments)(destinationUrlTemplate, item, urlSegmentPropertyMap);
+    }
+    if (typeof defaultDestinationUrl === 'string') {
+      const url = tryParseUrl(defaultDestinationUrl);
+      if (url) {
+        return (0, _replaceUrlCurlySegments.replaceUrlCurlySegments)(url, item, urlSegmentPropertyMap);
+      }
+      return defaultDestinationUrl;
+    }
+    return defaultDestinationUrl(item);
+  }
+  navigateToDestinationUrl({
+    item,
+    index
+  }, onNavigate) {
+    const {
+      window
+    } = this;
+    const destinationUrl = this.resolveDestinationUrl(item);
+    const url = destinationUrl.toString();
+    onNavigate == null || onNavigate({
+      item,
+      index,
+      url
+    });
+    window.location.href = url;
+    return true;
+  }
+  handlePrimaryButtonClick(keyedItem) {
+    const {
+      events: {
+        onContinueToDestinationUrl
+      },
+      submitted,
+      picker,
+      reportBi
+    } = this;
+    if (submitted) {
+      return;
+    }
+    picker.toggle(keyedItem, {
+      clear: true
+    });
+    reportBi((0, _bi.cairoCtaClicked)({
+      ...this.picker._commonDynamicBiParams(),
+      ctaIndex: 1,
+      numCtas: 1,
+      location: 'pickerStandalone',
+      moreActionsIndex: 0,
+      ctaName: 'continue'
+    }));
+    this.submitted = this.navigateToDestinationUrl(keyedItem, onContinueToDestinationUrl);
+  }
+  setIsDuringSearch(newVal = !this.isDuringSearch) {
+    this.isDuringSearch = newVal;
+  }
+  subscribeResultUpdated() {
+    const onResultUpdated = (0, _mobx.action)(() => {
+      const {
+        picker: {
+          collection: {
+            result,
+            bulkSelect
+          }
+        }
+      } = this;
+      bulkSelect.select.filter(value => result.has(value.key));
+    });
+    const {
+      picker: {
+        collection
+      }
+    } = this;
+    collection.emitter.on('resultUpdated', onResultUpdated);
+    return () => {
+      collection.emitter.off('resultUpdated', onResultUpdated);
+    };
+  }
+}
+exports.PickerStandaloneState = PickerStandaloneState;
+//# sourceMappingURL=PickerStandaloneState.js.map

package/dist/cjs/state/PickerStandaloneState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_bexCore","require","_replaceUrlCurlySegments","_mobx","_validateEncodedUrl","_bi","_matchMediaQuery","withoutDefaults","withoutIrrelevant","supportedProtocols","tryParseUrl","str","url","URL","validateEncodedUrl","includes","protocol","Error","e","console","error","undefined","PickerStandaloneState","constructor","params","_windowUrl$searchPara","_defineProperty2","default","TaskState","reportBi","createBILogger","collection","fqdn","type","componentType","picker","PickerState","getMaxItems","shouldFilterNotAffectTotalCount","events","loadStartTime","noItemsAvailableDestinationUrl","defaultDestinationUrl","initialSelect","window","errorMonitor","urlSegmentPropertyMap","logoType","windowUrl","location","href","primaryButtonText","searchParams","get","title","trim","subtitle","maybeActionUrlString","destinationUrlTemplate","isMobileView","matchMedia","matches","isDuringSearch","makeObservable","handlePrimaryButtonClick","action","bound","submitted","observable","ref","setIsDuringSearch","onCreateNewClick","newItemCreationStart","_commonDynamicBiParams","onCreateNewActionCompleted","itemId","newItemCreationEnd","resultType","init","initTask","onSingleItemAutoNavigation","matchMediaChangeListener","disposeMedia","registerMatchMedia","disposers","subscribeResultUpdated","run","status","promise","runInAction","someHidden","result","hasAvailableItems","bulkSelect","query","search","isEmpty","searchIsEmpty","keyedItems","total","isSuccess","_hasCreateNewAction","Promise","navigated","navigateToDestinationUrl","selectedItem","find","item","index","selectOneItem","captureException","disposer","resolveDestinationUrl","replaceUrlCurlySegments","onNavigate","destinationUrl","toString","keyedItem","onContinueToDestinationUrl","toggle","clear","cairoCtaClicked","ctaIndex","numCtas","moreActionsIndex","ctaName","newVal","onResultUpdated","select","filter","value","has","key","emitter","on","off","exports"],"sources":["../../../src/state/PickerStandaloneState.ts"],"sourcesContent":["import {\n  CollectionState,\n  ErrorMonitor,\n  FiltersMap,\n  Fqdn,\n  KeyedItem,\n  PartialWindow,\n  PickerEvents,\n  PickerState,\n  ReportBI,\n  TaskState,\n  withoutIrrelevant,\n} from '@wix/bex-core';\nimport { replaceUrlCurlySegments } from '../utils/replaceUrlCurlySegments';\nimport { action, makeObservable, observable, runInAction } from 'mobx';\nimport { validateEncodedUrl } from '../utils/validateEncodedUrl';\nimport { LogoType } from '../hooks';\nimport {\n  cairoCtaClicked,\n  newItemCreationEnd,\n  newItemCreationStart,\n} from '@wix/bex-core/bi';\nimport { registerMatchMedia } from '../utils/matchMediaQuery';\n\nconst withoutDefaults = withoutIrrelevant<\n  | 'currentTab'\n  | 'currentView'\n  | 'currentFilters'\n  | 'currentSortOrder'\n  | 'listSize'\n  | 'filteredListSize'\n  | 'maxItems'\n  | 'initialItems'\n  | 'type'\n  | 'componentType'\n>();\n\ntype OnNavigate<T> = (params: {\n  item: T;\n  index: number;\n  url: string;\n}) => unknown;\n\nexport interface PickerStandaloneEvents<T, F extends FiltersMap>\n  extends PickerEvents<T, F> {\n  readonly onSingleItemAutoNavigation?: OnNavigate<T>;\n  readonly onContinueToDestinationUrl?: OnNavigate<T>;\n}\n\nexport interface PickerStandaloneStateParams<\n  T,\n  F extends FiltersMap = FiltersMap,\n> {\n  collection: CollectionState<T, F>;\n  initialSelect?: true | ((item: T, index: number) => boolean);\n  noItemsAvailableDestinationUrl?: string;\n  defaultDestinationUrl: string | ((item: T) => string);\n  window: PartialWindow;\n  errorMonitor: ErrorMonitor;\n  logoType: LogoType;\n  urlSegmentPropertyMap?: Record<string, (keyof T)[]>;\n  events?: PickerStandaloneEvents<T, F>;\n  shouldFilterNotAffectTotalCount?: (filterName: keyof F) => boolean;\n  createBILogger: <P extends Fqdn>(defaultParams: P) => ReportBI;\n}\n\nconst supportedProtocols = ['https:', 'http:'];\n\nfunction tryParseUrl(str: string) {\n  try {\n    const url = new URL(str);\n    validateEncodedUrl(url);\n\n    if (!supportedProtocols.includes(url.protocol)) {\n      throw new Error(`Unsupported action url protocol: ${url.protocol}`);\n    }\n\n    return url;\n  } catch (e) {\n    console.error(e);\n  }\n\n  return undefined;\n}\n\nexport class PickerStandaloneState<T, F extends FiltersMap = FiltersMap> {\n  readonly picker: PickerState<T, F>;\n  readonly initialSelect?: PickerStandaloneStateParams<T, F>['initialSelect'];\n  readonly noItemsAvailableDestinationUrl?: string;\n  readonly defaultDestinationUrl: string | ((item: T) => string);\n\n  primaryButtonText: string | null;\n  title?: string | null | undefined;\n  subtitle?: string | null | undefined;\n  destinationUrlTemplate?: URL;\n  readonly reportBi;\n  readonly window: PartialWindow;\n  readonly errorMonitor: ErrorMonitor;\n  readonly urlSegmentPropertyMap?: Record<string, (keyof T)[]>;\n  readonly events: PickerStandaloneEvents<T, F>;\n\n  readonly initTask = new TaskState();\n\n  readonly logoType: PickerStandaloneStateParams<T, F>['logoType'];\n\n  submitted = false;\n\n  isMobileView: boolean;\n  isDuringSearch: boolean;\n\n  _hasCreateNewAction?: boolean;\n\n  constructor(params: Readonly<PickerStandaloneStateParams<T, F>>) {\n    this.reportBi = params.createBILogger({\n      ...params.collection.fqdn,\n      type: 'standalone',\n      componentType: 'Picker Standalone',\n    });\n\n    this.picker = new PickerState({\n      getMaxItems: () => 1,\n      collection: params.collection,\n      shouldFilterNotAffectTotalCount: params.shouldFilterNotAffectTotalCount,\n      events: params.events,\n      reportBi: this.reportBi,\n      loadStartTime: 0, // for standalone we want measure from start of navigation\n    });\n\n    this.noItemsAvailableDestinationUrl = params.noItemsAvailableDestinationUrl;\n    this.defaultDestinationUrl = params.defaultDestinationUrl;\n    this.initialSelect = params.initialSelect;\n    this.window = params.window;\n    this.errorMonitor = params.errorMonitor;\n    this.urlSegmentPropertyMap = params.urlSegmentPropertyMap;\n    this.events = params.events ?? {};\n    this.logoType = params.logoType;\n\n    const windowUrl = new URL(this.window.location.href);\n\n    this.primaryButtonText = windowUrl.searchParams.get('primaryButtonText');\n\n    this.title = windowUrl.searchParams.get('title')?.trim();\n\n    this.subtitle = windowUrl.searchParams.get('subtitle');\n\n    const maybeActionUrlString = windowUrl.searchParams.get('actionUrl');\n\n    if (maybeActionUrlString) {\n      this.destinationUrlTemplate = tryParseUrl(maybeActionUrlString);\n    }\n\n    this.isMobileView = !this.window.matchMedia(`(min-width: 768px)`).matches;\n    this.isDuringSearch = false;\n\n    makeObservable(this, {\n      handlePrimaryButtonClick: action.bound,\n      submitted: observable.ref,\n      isMobileView: observable.ref,\n      isDuringSearch: observable.ref,\n      setIsDuringSearch: action,\n    });\n  }\n\n  onCreateNewClick() {\n    this.reportBi(\n      withoutDefaults(newItemCreationStart)({\n        ...(this.picker._commonDynamicBiParams() as {}),\n      }),\n    );\n  }\n\n  onCreateNewActionCompleted({ itemId }: { itemId?: string }) {\n    this.reportBi(\n      withoutDefaults(newItemCreationEnd)({\n        ...this.picker._commonDynamicBiParams(),\n        resultType: 'success',\n        itemId,\n      }),\n    );\n  }\n\n  init() {\n    const {\n      picker,\n      initTask,\n      noItemsAvailableDestinationUrl,\n      initialSelect,\n      window,\n      errorMonitor,\n      events: { onSingleItemAutoNavigation },\n    } = this;\n\n    const matchMedia = this.window.matchMedia(`(min-width: 768px)`);\n    const matchMediaChangeListener = ({ matches }: { matches: boolean }) => {\n      this.isMobileView = !matches;\n    };\n\n    const disposeMedia = registerMatchMedia({\n      errorMonitor,\n      matchMediaChangeListener,\n      matchMedia,\n    });\n\n    const disposers = [\n      picker.init(),\n      this.subscribeResultUpdated(),\n      disposeMedia,\n    ];\n\n    initTask.run(\n      async () => {\n        await picker.initTask.status.promise;\n\n        await runInAction(async () => {\n          const { collection, someHidden } = picker;\n\n          const {\n            result,\n            hasAvailableItems,\n            bulkSelect,\n            query: {\n              search: { isEmpty: searchIsEmpty },\n            },\n          } = collection;\n\n          const { status, keyedItems, total } = result;\n\n          if (\n            status.isSuccess &&\n            !hasAvailableItems &&\n            !this._hasCreateNewAction &&\n            noItemsAvailableDestinationUrl\n          ) {\n            window.location.href = noItemsAvailableDestinationUrl;\n            await new Promise(() => {}); // keep showing loader while navigating\n            return;\n          }\n\n          if (\n            status.isSuccess &&\n            total === 1 &&\n            !this._hasCreateNewAction &&\n            !someHidden &&\n            searchIsEmpty\n          ) {\n            const navigated = this.navigateToDestinationUrl(\n              keyedItems[0],\n              onSingleItemAutoNavigation,\n            );\n            if (navigated) {\n              await new Promise(() => {}); // keep showing loader while navigating\n            }\n\n            return;\n          }\n\n          if (initialSelect) {\n            const selectedItem =\n              initialSelect === true\n                ? keyedItems[0]\n                : keyedItems.find(({ item }, index) =>\n                    initialSelect(item, index),\n                  );\n\n            if (selectedItem != null) {\n              bulkSelect.selectOneItem(selectedItem);\n            }\n          }\n        });\n      },\n      (error) => {\n        errorMonitor.captureException(error);\n      },\n    );\n\n    return () => {\n      for (const disposer of disposers) {\n        disposer();\n      }\n    };\n  }\n\n  private resolveDestinationUrl(item: T) {\n    const {\n      destinationUrlTemplate,\n      defaultDestinationUrl,\n      urlSegmentPropertyMap,\n    } = this;\n    if (destinationUrlTemplate) {\n      return replaceUrlCurlySegments(\n        destinationUrlTemplate,\n        item,\n        urlSegmentPropertyMap,\n      );\n    }\n\n    if (typeof defaultDestinationUrl === 'string') {\n      const url = tryParseUrl(defaultDestinationUrl);\n      if (url) {\n        return replaceUrlCurlySegments(url, item, urlSegmentPropertyMap);\n      }\n\n      return defaultDestinationUrl;\n    }\n\n    return defaultDestinationUrl(item);\n  }\n\n  private navigateToDestinationUrl(\n    { item, index }: KeyedItem<T>,\n    onNavigate: OnNavigate<T> | undefined,\n  ) {\n    const { window } = this;\n\n    const destinationUrl = this.resolveDestinationUrl(item);\n\n    const url = destinationUrl.toString();\n\n    onNavigate?.({ item, index, url });\n\n    window.location.href = url;\n\n    return true;\n  }\n\n  handlePrimaryButtonClick(keyedItem: KeyedItem<T>) {\n    const {\n      events: { onContinueToDestinationUrl },\n      submitted,\n      picker,\n      reportBi,\n    } = this;\n\n    if (submitted) {\n      return;\n    }\n\n    picker.toggle(keyedItem, { clear: true });\n\n    reportBi(\n      cairoCtaClicked({\n        ...this.picker._commonDynamicBiParams(),\n        ctaIndex: 1,\n        numCtas: 1,\n        location: 'pickerStandalone',\n        moreActionsIndex: 0,\n        ctaName: 'continue',\n      }),\n    );\n\n    this.submitted = this.navigateToDestinationUrl(\n      keyedItem,\n      onContinueToDestinationUrl,\n    );\n  }\n\n  setIsDuringSearch(newVal: boolean = !this.isDuringSearch) {\n    this.isDuringSearch = newVal;\n  }\n\n  private subscribeResultUpdated() {\n    const onResultUpdated = action(() => {\n      const {\n        picker: {\n          collection: { result, bulkSelect },\n        },\n      } = this;\n      bulkSelect.select.filter((value) => result.has(value.key));\n    });\n\n    const {\n      picker: { collection },\n    } = this;\n    collection.emitter.on('resultUpdated', onResultUpdated);\n\n    return () => {\n      collection.emitter.off('resultUpdated', onResultUpdated);\n    };\n  }\n}\n"],"mappings":"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"}

package/dist/cjs/state/RectState.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.emptyRect = exports.RectState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobx = require("mobx");
+var _bexCore = require("@wix/bex-core");
+const emptyRect = () => ({
+  bottom: undefined,
+  height: undefined,
+  left: undefined,
+  right: undefined,
+  top: undefined,
+  width: undefined
+  // x: undefined,
+  // y: undefined,
+});
+exports.emptyRect = emptyRect;
+class RectState {
+  constructor(params) {
+    (0, _defineProperty2.default)(this, "_syncThrottled", void 0);
+    (0, _defineProperty2.default)(this, "_syncDebounced", void 0);
+    (0, _defineProperty2.default)(this, "container", void 0);
+    (0, _defineProperty2.default)(this, "element", void 0);
+    (0, _defineProperty2.default)(this, "rect", (0, _mobx.observable)(emptyRect()));
+    this.container = params.container;
+    (0, _mobx.makeObservable)(this, {
+      _sync: _mobx.action.bound
+    });
+    this._syncThrottled = this.container.lodash.throttle(() => {
+      requestAnimationFrame(this._sync);
+    }, 200);
+    this._syncDebounced = () => requestAnimationFrame(this._sync);
+  }
+  _readRect() {
+    const {
+      element,
+      container: {
+        window
+      }
+    } = this;
+    if (element == null) {
+      return {};
+    }
+    if (process.env.NODE_ENV === 'test') {
+      const {
+        matches
+      } = window.matchMedia('(min-width: 768px)');
+      return matches ? {
+        height: 600,
+        width: 840,
+        top: 0,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        y: 0,
+        x: 0
+      } : {
+        height: 600,
+        width: 610,
+        top: 0,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        y: 0,
+        x: 0
+      };
+    }
+    const r = element.getBoundingClientRect();
+    return {
+      bottom: r.bottom,
+      height: r.height,
+      left: r.left,
+      right: r.right,
+      top: r.top,
+      width: r.width,
+      x: r.x,
+      y: r.y
+    };
+  }
+  _sync() {
+    const {
+      rect
+    } = this;
+    Object.assign(rect, this._readRect());
+  }
+  init({
+    scrollElement
+  } = {}) {
+    const {
+      element
+    } = this;
+    if (element) {
+      this._syncThrottled();
+      if (scrollElement) {
+        scrollElement.addEventListener('scroll', this._syncThrottled);
+      }
+      const disposers = [(0, _bexCore.addResizeObserver)(element, this._syncDebounced)];
+      return (0, _mobx.action)(() => {
+        disposers.forEach(d => d == null ? void 0 : d());
+        Object.assign(this.rect, emptyRect());
+        if (scrollElement) {
+          scrollElement.removeEventListener('scroll', this._syncThrottled);
+        }
+      });
+    }
+    return undefined;
+  }
+}
+exports.RectState = RectState;
+//# sourceMappingURL=RectState.js.map

package/dist/cjs/state/RectState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobx","require","_bexCore","emptyRect","bottom","undefined","height","left","right","top","width","exports","RectState","constructor","params","_defineProperty2","default","observable","container","makeObservable","_sync","action","bound","_syncThrottled","lodash","throttle","requestAnimationFrame","_syncDebounced","_readRect","element","window","process","env","NODE_ENV","matches","matchMedia","y","x","r","getBoundingClientRect","rect","Object","assign","init","scrollElement","addEventListener","disposers","addResizeObserver","forEach","d","removeEventListener"],"sources":["../../../src/state/RectState.ts"],"sourcesContent":["import { action, makeObservable, observable } from 'mobx';\nimport { addResizeObserver, WixPatternsContainer } from '@wix/bex-core';\n\nexport interface Rect {\n  bottom: number;\n  height: number;\n  left: number;\n  right: number;\n  top: number;\n  width: number;\n  // x: number;\n  // y: number;\n}\n\nexport interface EmptyRect {\n  bottom: undefined;\n  height: undefined;\n  left: undefined;\n  right: undefined;\n  top: undefined;\n  width: undefined;\n  // x: undefined;\n  // y: undefined;\n}\n\nexport const emptyRect = () => ({\n  bottom: undefined,\n  height: undefined,\n  left: undefined,\n  right: undefined,\n  top: undefined,\n  width: undefined,\n  // x: undefined,\n  // y: undefined,\n});\n\nexport interface RectStateParams {\n  container: WixPatternsContainer;\n}\n\nexport class RectState {\n  readonly _syncThrottled;\n  readonly _syncDebounced;\n  readonly container;\n\n  element?: Element | null | undefined;\n\n  readonly rect = observable<Rect | EmptyRect>(emptyRect());\n\n  constructor(params: RectStateParams) {\n    this.container = params.container;\n\n    makeObservable(this, {\n      _sync: action.bound,\n    });\n\n    this._syncThrottled = this.container.lodash.throttle(() => {\n      requestAnimationFrame(this._sync);\n    }, 200);\n\n    this._syncDebounced = () => requestAnimationFrame(this._sync);\n  }\n\n  _readRect() {\n    const {\n      element,\n      container: { window },\n    } = this;\n\n    if (element == null) {\n      return {};\n    }\n\n    if (process.env.NODE_ENV === 'test') {\n      const { matches } = window.matchMedia('(min-width: 768px)');\n      return matches\n        ? {\n            height: 600,\n            width: 840,\n            top: 0,\n            bottom: 0,\n            right: 0,\n            left: 0,\n            y: 0,\n            x: 0,\n          }\n        : {\n            height: 600,\n            width: 610,\n            top: 0,\n            bottom: 0,\n            right: 0,\n            left: 0,\n            y: 0,\n            x: 0,\n          };\n    }\n\n    const r = element.getBoundingClientRect();\n    return {\n      bottom: r.bottom,\n      height: r.height,\n      left: r.left,\n      right: r.right,\n      top: r.top,\n      width: r.width,\n      x: r.x,\n      y: r.y,\n    };\n  }\n\n  _sync() {\n    const { rect } = this;\n    Object.assign(rect, this._readRect());\n  }\n\n  init({ scrollElement }: { scrollElement?: Element | null } = {}) {\n    const { element } = this;\n    if (element) {\n      this._syncThrottled();\n\n      if (scrollElement) {\n        scrollElement.addEventListener('scroll', this._syncThrottled);\n      }\n\n      const disposers = [addResizeObserver(element, this._syncDebounced)];\n\n      return action(() => {\n        disposers.forEach((d) => d?.());\n        Object.assign(this.rect, emptyRect());\n\n        if (scrollElement) {\n          scrollElement.removeEventListener('scroll', this._syncThrottled);\n        }\n      });\n    }\n\n    return undefined;\n  }\n}\n"],"mappings":"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"}

package/dist/cjs/state/ResizeObserverState.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ResizeObserverState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobx = require("mobx");
+class ResizeObserverState {
+  constructor() {
+    (0, _defineProperty2.default)(this, "contentRect", null);
+    (0, _mobx.makeObservable)(this, {
+      contentRect: _mobx.observable.ref
+    });
+  }
+  init({
+    target
+  }) {
+    if (target == null || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    const resizeObserver = new ResizeObserver((0, _mobx.action)(([{
+      contentRect
+    }]) => {
+      this.contentRect = {
+        height: contentRect.height
+      };
+    }));
+    resizeObserver.observe(target);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }
+}
+exports.ResizeObserverState = ResizeObserverState;
+//# sourceMappingURL=ResizeObserverState.js.map

package/dist/cjs/state/ResizeObserverState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobx","require","ResizeObserverState","constructor","_defineProperty2","default","makeObservable","contentRect","observable","ref","init","target","ResizeObserver","resizeObserver","action","height","observe","disconnect","exports"],"sources":["../../../src/state/ResizeObserverState.ts"],"sourcesContent":["import { action, makeObservable, observable } from 'mobx';\n\nexport class ResizeObserverState {\n  contentRect: {\n    height: number;\n  } | null = null;\n\n  constructor() {\n    makeObservable(this, {\n      contentRect: observable.ref,\n    });\n  }\n\n  init({ target }: { target?: Element | null }) {\n    if (target == null || typeof ResizeObserver === 'undefined') {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(\n      action(([{ contentRect }]) => {\n        this.contentRect = {\n          height: contentRect.height,\n        };\n      }),\n    );\n\n    resizeObserver.observe(target);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }\n}\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEO,MAAMC,mBAAmB,CAAC;EAK/BC,WAAWA,CAAA,EAAG;IAAA,IAAAC,gBAAA,CAAAC,OAAA,uBAFH,IAAI;IAGb,IAAAC,oBAAc,EAAC,IAAI,EAAE;MACnBC,WAAW,EAAEC,gBAAU,CAACC;IAC1B,CAAC,CAAC;EACJ;EAEAC,IAAIA,CAAC;IAAEC;EAAoC,CAAC,EAAE;IAC5C,IAAIA,MAAM,IAAI,IAAI,IAAI,OAAOC,cAAc,KAAK,WAAW,EAAE;MAC3D;IACF;IAEA,MAAMC,cAAc,GAAG,IAAID,cAAc,CACvC,IAAAE,YAAM,EAAC,CAAC,CAAC;MAAEP;IAAY,CAAC,CAAC,KAAK;MAC5B,IAAI,CAACA,WAAW,GAAG;QACjBQ,MAAM,EAAER,WAAW,CAACQ;MACtB,CAAC;IACH,CAAC,CACH,CAAC;IAEDF,cAAc,CAACG,OAAO,CAACL,MAAM,CAAC;IAE9B,OAAO,MAAM;MACXE,cAAc,CAACI,UAAU,CAAC,CAAC;IAC7B,CAAC;EACH;AACF;AAACC,OAAA,CAAAhB,mBAAA,GAAAA,mBAAA"}

package/dist/cjs/state/ResponsiveColumnsState.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ResponsiveColumnsState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobx = require("mobx");
+class ResponsiveColumnsState {
+  constructor({
+    gap,
+    minItemWidth,
+    rectState,
+    containerPadding = 0
+  }) {
+    (0, _defineProperty2.default)(this, "_gap", void 0);
+    (0, _defineProperty2.default)(this, "_minItemWidth", void 0);
+    (0, _defineProperty2.default)(this, "_rectState", void 0);
+    (0, _defineProperty2.default)(this, "_containerPadding", void 0);
+    this._gap = gap;
+    this._minItemWidth = minItemWidth;
+    this._rectState = rectState;
+    this._containerPadding = containerPadding;
+    (0, _mobx.makeObservable)(this, {
+      itemsContentWidth: _mobx.computed,
+      widthWithLastColumnGap: _mobx.computed,
+      columnCount: _mobx.computed,
+      containerPadding: _mobx.computed
+    });
+  }
+  get gap() {
+    return this.columnCount === 1 ? this._gap / 2 : this._gap;
+  }
+  get minItemWidth() {
+    return this._minItemWidth;
+  }
+  get itemsContentWidth() {
+    return this._rectState.rect.width ?? 0;
+  }
+  get widthWithLastColumnGap() {
+    return this.itemsContentWidth + this._gap - this.containerPadding;
+  }
+  get containerPadding() {
+    return this._containerPadding;
+  }
+  get columnCount() {
+    const {
+      _gap,
+      minItemWidth,
+      widthWithLastColumnGap
+    } = this;
+    const maxItemWidthWithGap = minItemWidth + _gap;
+    return Math.max(Math.floor(widthWithLastColumnGap / maxItemWidthWithGap), 1);
+  }
+}
+exports.ResponsiveColumnsState = ResponsiveColumnsState;
+//# sourceMappingURL=ResponsiveColumnsState.js.map

package/dist/cjs/state/ResponsiveColumnsState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobx","require","ResponsiveColumnsState","constructor","gap","minItemWidth","rectState","containerPadding","_defineProperty2","default","_gap","_minItemWidth","_rectState","_containerPadding","makeObservable","itemsContentWidth","computed","widthWithLastColumnGap","columnCount","rect","width","maxItemWidthWithGap","Math","max","floor","exports"],"sources":["../../../src/state/ResponsiveColumnsState.ts"],"sourcesContent":["import { RectState } from './RectState';\nimport { computed, makeObservable } from 'mobx';\n\ninterface ResponsiveColumnsStateParams {\n  gap: number;\n  minItemWidth: number;\n  rectState: RectState;\n  containerPadding?: number;\n}\n\nexport class ResponsiveColumnsState {\n  readonly _gap;\n  readonly _minItemWidth;\n  readonly _rectState;\n  readonly _containerPadding;\n\n  constructor({\n    gap,\n    minItemWidth,\n    rectState,\n    containerPadding = 0,\n  }: ResponsiveColumnsStateParams) {\n    this._gap = gap;\n    this._minItemWidth = minItemWidth;\n    this._rectState = rectState;\n    this._containerPadding = containerPadding;\n\n    makeObservable(this, {\n      itemsContentWidth: computed,\n      widthWithLastColumnGap: computed,\n      columnCount: computed,\n      containerPadding: computed,\n    });\n  }\n\n  get gap() {\n    return this.columnCount === 1 ? this._gap / 2 : this._gap;\n  }\n\n  get minItemWidth() {\n    return this._minItemWidth;\n  }\n\n  get itemsContentWidth() {\n    return this._rectState.rect.width ?? 0;\n  }\n\n  get widthWithLastColumnGap() {\n    return this.itemsContentWidth + this._gap - this.containerPadding;\n  }\n\n  get containerPadding() {\n    return this._containerPadding;\n  }\n\n  get columnCount() {\n    const { _gap, minItemWidth, widthWithLastColumnGap } = this;\n\n    const maxItemWidthWithGap = minItemWidth + _gap;\n\n    return Math.max(\n      Math.floor(widthWithLastColumnGap / maxItemWidthWithGap),\n      1,\n    );\n  }\n}\n"],"mappings":";;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AASO,MAAMC,sBAAsB,CAAC;EAMlCC,WAAWA,CAAC;IACVC,GAAG;IACHC,YAAY;IACZC,SAAS;IACTC,gBAAgB,GAAG;EACS,CAAC,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAC/B,IAAI,CAACC,IAAI,GAAGN,GAAG;IACf,IAAI,CAACO,aAAa,GAAGN,YAAY;IACjC,IAAI,CAACO,UAAU,GAAGN,SAAS;IAC3B,IAAI,CAACO,iBAAiB,GAAGN,gBAAgB;IAEzC,IAAAO,oBAAc,EAAC,IAAI,EAAE;MACnBC,iBAAiB,EAAEC,cAAQ;MAC3BC,sBAAsB,EAAED,cAAQ;MAChCE,WAAW,EAAEF,cAAQ;MACrBT,gBAAgB,EAAES;IACpB,CAAC,CAAC;EACJ;EAEA,IAAIZ,GAAGA,CAAA,EAAG;IACR,OAAO,IAAI,CAACc,WAAW,KAAK,CAAC,GAAG,IAAI,CAACR,IAAI,GAAG,CAAC,GAAG,IAAI,CAACA,IAAI;EAC3D;EAEA,IAAIL,YAAYA,CAAA,EAAG;IACjB,OAAO,IAAI,CAACM,aAAa;EAC3B;EAEA,IAAII,iBAAiBA,CAAA,EAAG;IACtB,OAAO,IAAI,CAACH,UAAU,CAACO,IAAI,CAACC,KAAK,IAAI,CAAC;EACxC;EAEA,IAAIH,sBAAsBA,CAAA,EAAG;IAC3B,OAAO,IAAI,CAACF,iBAAiB,GAAG,IAAI,CAACL,IAAI,GAAG,IAAI,CAACH,gBAAgB;EACnE;EAEA,IAAIA,gBAAgBA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACM,iBAAiB;EAC/B;EAEA,IAAIK,WAAWA,CAAA,EAAG;IAChB,MAAM;MAAER,IAAI;MAAEL,YAAY;MAAEY;IAAuB,CAAC,GAAG,IAAI;IAE3D,MAAMI,mBAAmB,GAAGhB,YAAY,GAAGK,IAAI;IAE/C,OAAOY,IAAI,CAACC,GAAG,CACbD,IAAI,CAACE,KAAK,CAACP,sBAAsB,GAAGI,mBAAmB,CAAC,EACxD,CACF,CAAC;EACH;AACF;AAACI,OAAA,CAAAvB,sBAAA,GAAAA,sBAAA"}

package/dist/cjs/state/ScrollState.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ScrollState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _events = require("@wix/bex-core/events");
+var _mobx = require("mobx");
+class ScrollState {
+  constructor(params) {
+    (0, _defineProperty2.default)(this, "events", new _events.EventEmitter());
+    (0, _defineProperty2.default)(this, "scrollListener", void 0);
+    (0, _defineProperty2.default)(this, "_container", void 0);
+    (0, _defineProperty2.default)(this, "_scrollPosition", void 0);
+    (0, _defineProperty2.default)(this, "lodash", void 0);
+    (0, _defineProperty2.default)(this, "handleScroll", async () => {
+      const {
+        clientHeight,
+        scrollHeight,
+        scrollTop
+      } = this._container;
+      this._scrollPosition = {
+        clientHeight,
+        scrollHeight,
+        scrollTop
+      };
+      this.events.emit('scroll');
+    });
+    this.lodash = params.lodash;
+    this._container = params.container;
+    this._scrollPosition = this._container ? {
+      scrollHeight: this._container.scrollHeight,
+      clientHeight: this._container.clientHeight,
+      scrollTop: this._container.scrollTop
+    } : {
+      scrollHeight: 0,
+      clientHeight: 0,
+      scrollTop: 0
+    };
+    const delay = Math.max(params.delay || 0, 0);
+    this.scrollListener = this.lodash.throttle(this.handleScroll, delay);
+    (0, _mobx.makeObservable)(this, {
+      _scrollPosition: _mobx.observable.ref
+    });
+  }
+  get scrollPosition() {
+    return this._scrollPosition;
+  }
+  init(params) {
+    this._container = params.container ?? this._container;
+    if (this._container == null) {
+      return;
+    }
+    this._container.addEventListener('scroll', this.scrollListener);
+    return () => {
+      this._container.removeEventListener('scroll', this.scrollListener);
+    };
+  }
+}
+exports.ScrollState = ScrollState;
+//# sourceMappingURL=ScrollState.js.map

package/dist/cjs/state/ScrollState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_events","require","_mobx","ScrollState","constructor","params","_defineProperty2","default","EventEmitter","clientHeight","scrollHeight","scrollTop","_container","_scrollPosition","events","emit","lodash","container","delay","Math","max","scrollListener","throttle","handleScroll","makeObservable","observable","ref","scrollPosition","init","addEventListener","removeEventListener","exports"],"sources":["../../../src/state/ScrollState.ts"],"sourcesContent":["import { ScrollableWindow } from '../reach-bottom-listener';\nimport { EventEmitter, TypedEmitter } from '@wix/bex-core/events';\nimport { makeObservable, observable } from 'mobx';\nimport { PartialLodash } from '@wix/bex-core';\n\nexport interface ScrollPositionParams {\n  container?: ScrollableWindow;\n  // throttle scroll event\n  delay?: number;\n  readonly lodash: PartialLodash;\n}\n\nexport interface ScrollState extends ScrollPositionParams {}\n\nexport class ScrollState {\n  public readonly events = new EventEmitter() as TypedEmitter<{\n    scroll: () => void;\n  }>;\n  private readonly scrollListener: (e: Event) => Promise<void> | undefined;\n  private _container?: ScrollableWindow;\n  _scrollPosition: {\n    scrollHeight: number;\n    clientHeight: number;\n    scrollTop: number;\n  };\n\n  readonly lodash;\n\n  constructor(params: ScrollPositionParams) {\n    this.lodash = params.lodash;\n    this._container = params.container;\n    this._scrollPosition = this._container\n      ? {\n          scrollHeight: this._container.scrollHeight,\n          clientHeight: this._container.clientHeight,\n          scrollTop: this._container.scrollTop,\n        }\n      : {\n          scrollHeight: 0,\n          clientHeight: 0,\n          scrollTop: 0,\n        };\n    const delay = Math.max(params.delay || 0, 0);\n    this.scrollListener = this.lodash.throttle(this.handleScroll, delay);\n    makeObservable(this, { _scrollPosition: observable.ref });\n  }\n\n  get scrollPosition() {\n    return this._scrollPosition;\n  }\n\n  init(params: ScrollPositionParams): void | (() => void) {\n    this._container = params.container ?? this._container;\n    if (this._container == null) {\n      return;\n    }\n    this._container.addEventListener('scroll', this.scrollListener);\n    return () => {\n      this._container!.removeEventListener('scroll', this.scrollListener);\n    };\n  }\n\n  handleScroll = async () => {\n    const { clientHeight, scrollHeight, scrollTop } = this._container!;\n    this._scrollPosition = { clientHeight, scrollHeight, scrollTop };\n    this.events.emit('scroll');\n  };\n}\n"],"mappings":";;;;;;AACA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAYO,MAAME,WAAW,CAAC;EAcvBC,WAAWA,CAACC,MAA4B,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA,kBAbjB,IAAIC,oBAAY,CAAC,CAAC;IAAA,IAAAF,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,wBA+C5B,YAAY;MACzB,MAAM;QAAEE,YAAY;QAAEC,YAAY;QAAEC;MAAU,CAAC,GAAG,IAAI,CAACC,UAAW;MAClE,IAAI,CAACC,eAAe,GAAG;QAAEJ,YAAY;QAAEC,YAAY;QAAEC;MAAU,CAAC;MAChE,IAAI,CAACG,MAAM,CAACC,IAAI,CAAC,QAAQ,CAAC;IAC5B,CAAC;IArCC,IAAI,CAACC,MAAM,GAAGX,MAAM,CAACW,MAAM;IAC3B,IAAI,CAACJ,UAAU,GAAGP,MAAM,CAACY,SAAS;IAClC,IAAI,CAACJ,eAAe,GAAG,IAAI,CAACD,UAAU,GAClC;MACEF,YAAY,EAAE,IAAI,CAACE,UAAU,CAACF,YAAY;MAC1CD,YAAY,EAAE,IAAI,CAACG,UAAU,CAACH,YAAY;MAC1CE,SAAS,EAAE,IAAI,CAACC,UAAU,CAACD;IAC7B,CAAC,GACD;MACED,YAAY,EAAE,CAAC;MACfD,YAAY,EAAE,CAAC;MACfE,SAAS,EAAE;IACb,CAAC;IACL,MAAMO,KAAK,GAAGC,IAAI,CAACC,GAAG,CAACf,MAAM,CAACa,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;IAC5C,IAAI,CAACG,cAAc,GAAG,IAAI,CAACL,MAAM,CAACM,QAAQ,CAAC,IAAI,CAACC,YAAY,EAAEL,KAAK,CAAC;IACpE,IAAAM,oBAAc,EAAC,IAAI,EAAE;MAAEX,eAAe,EAAEY,gBAAU,CAACC;IAAI,CAAC,CAAC;EAC3D;EAEA,IAAIC,cAAcA,CAAA,EAAG;IACnB,OAAO,IAAI,CAACd,eAAe;EAC7B;EAEAe,IAAIA,CAACvB,MAA4B,EAAuB;IACtD,IAAI,CAACO,UAAU,GAAGP,MAAM,CAACY,SAAS,IAAI,IAAI,CAACL,UAAU;IACrD,IAAI,IAAI,CAACA,UAAU,IAAI,IAAI,EAAE;MAC3B;IACF;IACA,IAAI,CAACA,UAAU,CAACiB,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAACR,cAAc,CAAC;IAC/D,OAAO,MAAM;MACX,IAAI,CAACT,UAAU,CAAEkB,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAACT,cAAc,CAAC;IACrE,CAAC;EACH;AAOF;AAACU,OAAA,CAAA5B,WAAA,GAAAA,WAAA"}