@wix/patterns 1.338.0 → 1.340.0

package/dist/cjs/components/TabsFilter/TabsFilter.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_mobx","_FilterContext","_mobxReactLite","_TabTitle","_ToolbarCollectionContext","_TabsFilterState","_TabsFilterStCss","_TabsDropdown","_types","_TabsDefault","_useFilterValueTotalState","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_TabsFilter","props","type","filter","data","dataProp","all","counterBadge","placeAllTabLast","onChange","mobilePopoverProps","itemKey","itemName","table","useToolbarCollectionContext","filterAllValueTotal","useFilterValueTotalState","value","undefined","container","React","useRef","state","useState","tabs","TabsFilterState","useLayoutEffect","runInAction","persistent","responsive","isAllCounterBadgeLoading","useMemo","allStatus","totalsCollection","initTask","status","isLoading","isIdle","isTableLoading","hideCounterBadge","items","_mergedItems","map","index","id","name","title","createElement","TabTitle","tabIndex","text","__self","__source","fileName","lineNumber","columnNumber","item","minWidth","itemsMinWidths","maxWidth","itemMaxWidth","allTabItem","ALL_TAB_ITEM_ID","panelMinWidth","useEffect","init","current","itemsCount","length","selectedId","isEmpty","FilterContextProvider","Box","dataHook","className","st","classes","root","width","height","direction","verticalAlign","flexGrow","ref","node","mode","TabsDefault","TabsDropdown","popoverProps","TabsFilter","exports","observer","displayName"],"sources":["../../../../src/components/TabsFilter/TabsFilter.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { Box, DropdownProps, TabsProps } from '@wix/design-system';\nimport { Filter } from '@wix/bex-core';\nimport { runInAction } from 'mobx';\nimport { FilterContextProvider } from '../FilterContext';\nimport { observer } from 'mobx-react-lite';\nimport { TabTitle } from './TabTitle';\nimport { useToolbarCollectionContext } from '../ToolbarCollectionContext';\nimport { TabsFilterState } from './TabsFilterState';\nimport { classes, st } from './TabsFilter.st.css.js';\nimport { TabsDropdown } from './TabsDropdown';\nimport { ALL_TAB_ITEM_ID, TabsFilterItemBase } from './types';\nimport { TabsDefault } from './TabsDefault';\nimport { useFilterValueTotalState } from '../TabTotal/useFilterValueTotalState';\nimport type { TabCounterBadgeProps } from '../TabTotal/TabTotalCounterBadge';\nimport type { TabTotalParensProps } from '../TabTotal/TabTotalParens';\n\n/** Type alias for TabTotalCounterBadge component element */\ntype TabTotalCounterBadge<V> = ReactElement<\n  TabCounterBadgeProps<V, unknown, any>\n>;\n/** Type alias for TabTotalParens component element */\ntype TabTotalParens<V> = ReactElement<TabTotalParensProps<V, unknown, any>>;\n\nexport interface TabsFilterProps<V> {\n  /**\n   * List of tabs.\n   * @external\n   */\n  data: V[];\n  /**\n   * Defines the selected filter.\n   * <br><br>\n   * Must be an [arrayFilter](./?path=/story/features-filter-factories--arrayfilter) object.\n   * @external\n   */\n  filter: Filter<V[]>;\n  /**\n   * Display name of the tab that indicates that all items are included.\n   * <br>\n   * Changes the value of `filter` to an empty array.\n   * @external\n   */\n  all?: string | null | false;\n\n  /**\n   * Renders a counter badge next to the tabs' texts.\n   * <br><br>\n   * See different examples of this implementation in the [Overview](./?path=/story/features-filter-components--tabsfilter) tab.\n   * @external\n   */\n  counterBadge?: (\n    value: V | null | undefined,\n  ) => TabTotalCounterBadge<V> | TabTotalParens<V> | null | undefined;\n  onChange?: (value: V | null | undefined) => unknown;\n\n  /**\n   * Tabs layout type.\n   * <br><br>\n   * If this prop is omitted, the width depends on the label width. The total width of all the tabs cannot exceed 80% of the toolbar.\n   * <br><br>\n   * Supported values:<br>\n   * - `uniformFull`: Tabs are spread out uniformly.\n   * @external\n   */\n  type?: Extract<TabsProps['type'], 'uniformFull'>;\n\n  placeAllTabLast?: boolean;\n\n  /**\n   * Custom popover props for the mobile dropdown menu. On mobile devices, tabs are displayed as a dropdown menu.\n   * @external\n   */\n  mobilePopoverProps?: DropdownProps['popoverProps'];\n}\n\nfunction _TabsFilter<V>(props: TabsFilterProps<V>) {\n  const {\n    type,\n    filter,\n    data: dataProp,\n    all,\n    counterBadge,\n    placeAllTabLast,\n    onChange,\n    mobilePopoverProps,\n  } = props;\n  const { itemKey, itemName } = filter;\n\n  const table = useToolbarCollectionContext();\n  const filterAllValueTotal = useFilterValueTotalState({\n    ...props,\n    value: undefined,\n  });\n\n  const container = React.useRef<HTMLDivElement>();\n\n  const [state] = useState(\n    () =>\n      (table.tabs ??= new TabsFilterState({\n        table,\n      })),\n  );\n\n  useLayoutEffect(() => {\n    runInAction(() => {\n      if (filter.persistent == null) {\n        filter.persistent = true;\n      }\n    });\n  }, []);\n\n  const { responsive } = state;\n\n  const isAllCounterBadgeLoading = useMemo(() => {\n    const allStatus = filterAllValueTotal.totalsCollection.initTask.status;\n    const { isLoading, isIdle } = allStatus;\n    return isLoading || isIdle;\n  }, [filterAllValueTotal.totalsCollection.initTask.status]);\n\n  const isTableLoading = useMemo(() => {\n    const { isLoading, isIdle } = table.initTask.status;\n    return isLoading || isIdle;\n  }, [table.initTask.status]);\n\n  const hideCounterBadge = isTableLoading || isAllCounterBadgeLoading;\n\n  const items = useMemo<TabsFilterItemBase[]>(() => {\n    const _mergedItems = dataProp.map((value, index) => {\n      return {\n        id: itemKey(value),\n        name: itemName(value),\n        title: (\n          <TabTitle\n            tabIndex={all && !placeAllTabLast ? index + 1 : index}\n            state={responsive}\n            text={itemName(value)}\n            value={value}\n            counterBadge={hideCounterBadge ? undefined : counterBadge}\n          />\n        ),\n        value,\n      };\n    });\n\n    if (!all) {\n      return _mergedItems.map((item, index) => ({\n        ...item,\n        index,\n        minWidth: responsive.itemsMinWidths[index],\n        maxWidth: responsive.itemMaxWidth,\n      }));\n    }\n\n    const allTabItem = {\n      id: ALL_TAB_ITEM_ID,\n      name: all,\n      title: (\n        <TabTitle\n          tabIndex={0}\n          state={responsive}\n          text={all}\n          value={undefined}\n          counterBadge={hideCounterBadge ? undefined : counterBadge}\n        />\n      ),\n    };\n\n    return (\n      placeAllTabLast\n        ? [..._mergedItems, allTabItem]\n        : [allTabItem, ..._mergedItems]\n    ).map((item, index) => ({\n      ...item,\n      minWidth: responsive.itemsMinWidths[index],\n      index,\n    }));\n  }, [dataProp, all, counterBadge, responsive.panelMinWidth, hideCounterBadge]);\n\n  useEffect(\n    () =>\n      state.init({\n        container: container.current,\n        itemsCount: items.length,\n      }),\n    [],\n  );\n\n  const selectedId = filter.isEmpty\n    ? ALL_TAB_ITEM_ID\n    : itemKey(filter.value[0]);\n\n  return (\n    <FilterContextProvider value={filter}>\n      <Box\n        dataHook=\"collection-tabs-filter\"\n        className={st(classes.root)}\n        width=\"100%\"\n        height={60}\n        direction=\"vertical\"\n        verticalAlign=\"middle\"\n        flexGrow={1}\n      >\n        <div\n          ref={(node) => {\n            if (node) {\n              container.current = node;\n            }\n          }}\n        >\n          {responsive.mode === 'tabs' ? (\n            <TabsDefault\n              items={items}\n              data={dataProp}\n              filter={filter}\n              selectedId={selectedId}\n              state={state}\n              onChange={onChange}\n              type={type}\n              all={all}\n            />\n          ) : (\n            <TabsDropdown\n              filter={filter}\n              data={dataProp}\n              items={items}\n              selectedId={selectedId}\n              popoverProps={mobilePopoverProps}\n            />\n          )}\n        </div>\n      </Box>\n    </FilterContextProvider>\n  );\n}\n\nexport const TabsFilter = observer(_TabsFilter);\nTabsFilter.displayName = 'TabsFilter';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_mobx","_FilterContext","_mobxReactLite","_TabTitle","_ToolbarCollectionContext","_TabsFilterState","_TabsFilterStCss","_TabsDropdown","_types","_TabsDefault","_useFilterValueTotalState","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_TabsFilter","props","type","filter","data","dataProp","all","counterBadge","placeAllTabLast","onChange","mobilePopoverProps","itemKey","itemName","table","useToolbarCollectionContext","filterAllValueTotal","useFilterValueTotalState","value","undefined","container","React","useRef","state","useState","tabs","TabsFilterState","useLayoutEffect","runInAction","persistent","responsive","isAllCounterBadgeLoading","useMemo","allStatus","totalsCollection","initTask","status","isLoading","isIdle","isTableLoading","hideCounterBadge","items","_mergedItems","map","index","id","name","title","createElement","TabTitle","tabIndex","text","__self","__source","fileName","lineNumber","columnNumber","item","minWidth","itemsMinWidths","maxWidth","itemMaxWidth","allTabItem","ALL_TAB_ITEM_ID","panelMinWidth","useEffect","init","current","itemsCount","length","selectedId","isEmpty","FilterContextProvider","Box","ref","node","dataHook","className","st","classes","root","width","height","direction","verticalAlign","flexGrow","mode","TabsDefault","TabsDropdown","popoverProps","TabsFilter","exports","observer","displayName"],"sources":["../../../../src/components/TabsFilter/TabsFilter.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { Box, DropdownProps, TabsProps } from '@wix/design-system';\nimport { Filter } from '@wix/bex-core';\nimport { runInAction } from 'mobx';\nimport { FilterContextProvider } from '../FilterContext';\nimport { observer } from 'mobx-react-lite';\nimport { TabTitle } from './TabTitle';\nimport { useToolbarCollectionContext } from '../ToolbarCollectionContext';\nimport { TabsFilterState } from './TabsFilterState';\nimport { classes, st } from './TabsFilter.st.css.js';\nimport { TabsDropdown } from './TabsDropdown';\nimport { ALL_TAB_ITEM_ID, TabsFilterItemBase } from './types';\nimport { TabsDefault } from './TabsDefault';\nimport { useFilterValueTotalState } from '../TabTotal/useFilterValueTotalState';\nimport type { TabCounterBadgeProps } from '../TabTotal/TabTotalCounterBadge';\nimport type { TabTotalParensProps } from '../TabTotal/TabTotalParens';\n\n/** Type alias for TabTotalCounterBadge component element */\ntype TabTotalCounterBadge<V> = ReactElement<\n  TabCounterBadgeProps<V, unknown, any>\n>;\n/** Type alias for TabTotalParens component element */\ntype TabTotalParens<V> = ReactElement<TabTotalParensProps<V, unknown, any>>;\n\nexport interface TabsFilterProps<V> {\n  /**\n   * List of tabs.\n   * @external\n   */\n  data: V[];\n  /**\n   * Defines the selected filter.\n   * <br><br>\n   * Must be an [arrayFilter](./?path=/story/features-filter-factories--arrayfilter) object.\n   * @external\n   */\n  filter: Filter<V[]>;\n  /**\n   * Display name of the tab that indicates that all items are included.\n   * <br>\n   * Changes the value of `filter` to an empty array.\n   * @external\n   */\n  all?: string | null | false;\n\n  /**\n   * Renders a counter badge next to the tabs' texts.\n   * <br><br>\n   * See different examples of this implementation in the [Overview](./?path=/story/features-filter-components--tabsfilter) tab.\n   * @external\n   */\n  counterBadge?: (\n    value: V | null | undefined,\n  ) => TabTotalCounterBadge<V> | TabTotalParens<V> | null | undefined;\n  onChange?: (value: V | null | undefined) => unknown;\n\n  /**\n   * Tabs layout type.\n   * <br><br>\n   * If this prop is omitted, the width depends on the label width. The total width of all the tabs cannot exceed 80% of the toolbar.\n   * <br><br>\n   * Supported values:<br>\n   * - `uniformFull`: Tabs are spread out uniformly.\n   * @external\n   */\n  type?: Extract<TabsProps['type'], 'uniformFull'>;\n\n  placeAllTabLast?: boolean;\n\n  /**\n   * Custom popover props for the mobile dropdown menu. On mobile devices, tabs are displayed as a dropdown menu.\n   * @external\n   */\n  mobilePopoverProps?: DropdownProps['popoverProps'];\n}\n\nfunction _TabsFilter<V>(props: TabsFilterProps<V>) {\n  const {\n    type,\n    filter,\n    data: dataProp,\n    all,\n    counterBadge,\n    placeAllTabLast,\n    onChange,\n    mobilePopoverProps,\n  } = props;\n  const { itemKey, itemName } = filter;\n\n  const table = useToolbarCollectionContext();\n  const filterAllValueTotal = useFilterValueTotalState({\n    ...props,\n    value: undefined,\n  });\n\n  const container = React.useRef<HTMLDivElement>();\n\n  const [state] = useState(\n    () =>\n      (table.tabs ??= new TabsFilterState({\n        table,\n      })),\n  );\n\n  useLayoutEffect(() => {\n    runInAction(() => {\n      if (filter.persistent == null) {\n        filter.persistent = true;\n      }\n    });\n  }, []);\n\n  const { responsive } = state;\n\n  const isAllCounterBadgeLoading = useMemo(() => {\n    const allStatus = filterAllValueTotal.totalsCollection.initTask.status;\n    const { isLoading, isIdle } = allStatus;\n    return isLoading || isIdle;\n  }, [filterAllValueTotal.totalsCollection.initTask.status]);\n\n  const isTableLoading = useMemo(() => {\n    const { isLoading, isIdle } = table.initTask.status;\n    return isLoading || isIdle;\n  }, [table.initTask.status]);\n\n  const hideCounterBadge = isTableLoading || isAllCounterBadgeLoading;\n\n  const items = useMemo<TabsFilterItemBase[]>(() => {\n    const _mergedItems = dataProp.map((value, index) => {\n      return {\n        id: itemKey(value),\n        name: itemName(value),\n        title: (\n          <TabTitle\n            tabIndex={all && !placeAllTabLast ? index + 1 : index}\n            state={responsive}\n            text={itemName(value)}\n            value={value}\n            counterBadge={hideCounterBadge ? undefined : counterBadge}\n          />\n        ),\n        value,\n      };\n    });\n\n    if (!all) {\n      return _mergedItems.map((item, index) => ({\n        ...item,\n        index,\n        minWidth: responsive.itemsMinWidths[index],\n        maxWidth: responsive.itemMaxWidth,\n      }));\n    }\n\n    const allTabItem = {\n      id: ALL_TAB_ITEM_ID,\n      name: all,\n      title: (\n        <TabTitle\n          tabIndex={0}\n          state={responsive}\n          text={all}\n          value={undefined}\n          counterBadge={hideCounterBadge ? undefined : counterBadge}\n        />\n      ),\n    };\n\n    return (\n      placeAllTabLast\n        ? [..._mergedItems, allTabItem]\n        : [allTabItem, ..._mergedItems]\n    ).map((item, index) => ({\n      ...item,\n      minWidth: responsive.itemsMinWidths[index],\n      index,\n    }));\n  }, [dataProp, all, counterBadge, responsive.panelMinWidth, hideCounterBadge]);\n\n  useEffect(\n    () =>\n      state.init({\n        container: container.current,\n        itemsCount: items.length,\n      }),\n    [container, state],\n  );\n\n  const selectedId = filter.isEmpty\n    ? ALL_TAB_ITEM_ID\n    : itemKey(filter.value[0]);\n\n  return (\n    <FilterContextProvider value={filter}>\n      <Box\n        ref={(node) => {\n          if (node) {\n            container.current = node;\n          }\n        }}\n        dataHook=\"collection-tabs-filter\"\n        className={st(classes.root)}\n        width=\"100%\"\n        height={60}\n        direction=\"vertical\"\n        verticalAlign=\"middle\"\n        flexGrow={1}\n      >\n        {responsive.mode === 'tabs' ? (\n          <TabsDefault\n            items={items}\n            data={dataProp}\n            filter={filter}\n            selectedId={selectedId}\n            state={state}\n            onChange={onChange}\n            type={type}\n            all={all}\n          />\n        ) : (\n          <TabsDropdown\n            filter={filter}\n            data={dataProp}\n            items={items}\n            selectedId={selectedId}\n            popoverProps={mobilePopoverProps}\n          />\n        )}\n      </Box>\n    </FilterContextProvider>\n  );\n}\n\nexport const TabsFilter = observer(_TabsFilter);\nTabsFilter.displayName = 'TabsFilter';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/TabsFilter/TabsFilter.st.css.js

@@ -5,15 +5,15 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "TabsFilter2423008515";
+var _namespace_ = "TabsFilter2971966923";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "TabsFilter2423008515__root",
-  "title": "TabsFilter2423008515__title"
+  "root": "TabsFilter2971966923__root",
+  "title": "TabsFilter2971966923__title"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/TabsFilter/TabsFilter.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/TabsFilter/TabsFilter.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"TabsFilter2423008515\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"TabsFilter2423008515__root\",\"title\":\"TabsFilter2423008515__title\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,sBAAsB;AACxC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,4BAA4B;EAAC,OAAO,EAAC;AAA6B,CAAC;AACzF,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/TabsFilter/TabsFilter.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"TabsFilter2971966923\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"TabsFilter2971966923__root\",\"title\":\"TabsFilter2971966923__title\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,sBAAsB;AACxC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,4BAA4B;EAAC,OAAO,EAAC;AAA6B,CAAC;AACzF,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/TabsFilter/TabsResponsiveState.js

@@ -22,43 +22,28 @@ class TabsResponsiveState {
     (0, _defineProperty2.default)(this, "itemBadgeMargin", 6);
     (0, _defineProperty2.default)(this, "itemsMinWidths", []);
     (0, _defineProperty2.default)(this, "onResizeThrottled", void 0);
+    (0, _defineProperty2.default)(this, "_externalAvailableWidth", null);
     (0, _defineProperty2.default)(this, "_onResize", (0, _mobx.action)(() => {
       const {
         container
       } = this;
+      const availableWidth = this._externalAvailableWidth ?? (container == null ? void 0 : container.clientWidth) ?? 0;
       if (process.env.NODE_ENV === 'test') {
         return;
       }
       if (!container) {
         return;
       }
-
-      // Force dropdown mode on mobile
       if (this.isMobile) {
         this.mode = 'dropdown';
         return;
       }
       const nextPanelWidth = this.getPanelMinWidth();
-
-      // If the measurements show 0, this means that not all elements have loaded yet,
-      // so we skip such events.
       if (nextPanelWidth !== 0 && nextPanelWidth > this.panelMinWidth) {
         this.itemsMinWidths = this.getItemsMinWidth();
         this.panelMinWidth = nextPanelWidth;
       }
-
-      // The "container" is a node that wraps both Tabs and Dropdown components (but only
-      // one of them is rendered). It expands for as much space as all its elements
-      // inside need and shrinks down to the smallest possible state of the elements inside.
-      // Basically max-width and min-width with complications.
-      //
-      // Complications here are badges — they don't shrink, only tabs titles shrink.
-      //
-      // The state is switched when the certain container width (aka panelMinWidth) is reached.
-      // It is defined as: itemsCount * (itemMinWidth + itemPadding) + all badges widths.
-      // Tabs is shown when the container width is more or equal than panelMinWidth.
-      // Dropdown is shown when the container width is less than panelMinWidth.
-      if (this.panelMinWidth !== 0 && container.clientWidth < this.panelMinWidth) {
+      if (this.panelMinWidth !== 0 && availableWidth < this.panelMinWidth) {
         this.mode = 'dropdown';
       } else {
         this.mode = 'tabs';
@@ -99,6 +84,10 @@ class TabsResponsiveState {
     const badgesWidth = this.getBadgesWidth();
     return itemsCount * itemMinWidth + badgesWidth;
   }
+  setAvailableWidth(width) {
+    this._externalAvailableWidth = width;
+    this._onResize();
+  }
   init({
     container,
     itemsCount

package/dist/cjs/components/TabsFilter/TabsResponsiveState.js.map

@@ -1 +1 @@
-{"version":3,"names":["_mobx","require","_bexCore","TabsResponsiveState","constructor","params","_defineProperty2","default","Map","action","container","process","env","NODE_ENV","isMobile","mode","nextPanelWidth","getPanelMinWidth","panelMinWidth","itemsMinWidths","getItemsMinWidth","clientWidth","isMobileDevice","onResizeThrottled","lodash","throttle","window","requestAnimationFrame","_onResize","makeObservable","observable","ref","getBadgesWidth","Array","from","badges","values","reduce","sum","badge","itemBadgeMargin","itemTextMinWidth","length","itemsCount","map","_","index","get","maybeBadgeWidth","itemPadding","itemMinWidth","badgesWidth","init","disposer","addResizeObserver","exports"],"sources":["../../../../src/components/TabsFilter/TabsResponsiveState.ts"],"sourcesContent":["import { action, makeObservable, observable } from 'mobx';\nimport {\n  addResizeObserver,\n  WixPatternsContainer,\n  isMobileDevice,\n} from '@wix/bex-core';\n\nexport interface TabsResponsiveStateParams {\n  container: WixPatternsContainer;\n}\n\nexport class TabsResponsiveState {\n  readonly isMobile: boolean;\n  container?: HTMLDivElement;\n  // We save the badges in a Map and not in an Array because the badge is optional\n  // on a per-tab basis, but we still need to know the index of each badge.\n  badges = new Map<number, HTMLSpanElement>();\n  mode: 'tabs' | 'dropdown' = 'tabs';\n\n  panelMinWidth = 0;\n  itemsCount = 0;\n  itemPadding = 32;\n  itemMaxWidth = 200;\n  itemTextMinWidth = 48;\n  itemBadgeMargin = 6;\n  itemsMinWidths: number[] = [];\n\n  readonly onResizeThrottled;\n\n  constructor(params: TabsResponsiveStateParams) {\n    this.isMobile = isMobileDevice();\n    this.onResizeThrottled = params.container.lodash.throttle(\n      () => window.requestAnimationFrame(this._onResize),\n      300,\n    );\n\n    makeObservable(this, {\n      mode: observable.ref,\n      panelMinWidth: observable.ref,\n    });\n  }\n\n  getBadgesWidth() {\n    return Array.from(this.badges.values()).reduce((sum, badge) => {\n      return sum + badge.clientWidth + this.itemBadgeMargin;\n    }, 0);\n  }\n\n  getItemsMinWidth() {\n    const { itemTextMinWidth, itemBadgeMargin } = this;\n\n    return Array.from<number>({ length: this.itemsCount }).map((_, index) => {\n      const badge = this.badges.get(index);\n      const maybeBadgeWidth = badge ? badge.clientWidth + itemBadgeMargin : 0;\n\n      return itemTextMinWidth + maybeBadgeWidth;\n    });\n  }\n\n  getPanelMinWidth() {\n    const { itemsCount, itemTextMinWidth, itemPadding } = this;\n\n    const itemMinWidth = itemTextMinWidth + itemPadding;\n    const badgesWidth = this.getBadgesWidth();\n\n    return itemsCount * itemMinWidth + badgesWidth;\n  }\n\n  _onResize = action(() => {\n    const { container } = this;\n    if (process.env.NODE_ENV === 'test') {\n      return;\n    }\n\n    if (!container) {\n      return;\n    }\n\n    // Force dropdown mode on mobile\n    if (this.isMobile) {\n      this.mode = 'dropdown';\n      return;\n    }\n\n    const nextPanelWidth = this.getPanelMinWidth();\n\n    // If the measurements show 0, this means that not all elements have loaded yet,\n    // so we skip such events.\n    if (nextPanelWidth !== 0 && nextPanelWidth > this.panelMinWidth) {\n      this.itemsMinWidths = this.getItemsMinWidth();\n      this.panelMinWidth = nextPanelWidth;\n    }\n\n    // The \"container\" is a node that wraps both Tabs and Dropdown components (but only\n    // one of them is rendered). It expands for as much space as all its elements\n    // inside need and shrinks down to the smallest possible state of the elements inside.\n    // Basically max-width and min-width with complications.\n    //\n    // Complications here are badges — they don't shrink, only tabs titles shrink.\n    //\n    // The state is switched when the certain container width (aka panelMinWidth) is reached.\n    // It is defined as: itemsCount * (itemMinWidth + itemPadding) + all badges widths.\n    // Tabs is shown when the container width is more or equal than panelMinWidth.\n    // Dropdown is shown when the container width is less than panelMinWidth.\n    if (\n      this.panelMinWidth !== 0 &&\n      container.clientWidth < this.panelMinWidth\n    ) {\n      this.mode = 'dropdown';\n    } else {\n      this.mode = 'tabs';\n    }\n  });\n\n  init({\n    container,\n    itemsCount,\n  }: {\n    container?: HTMLDivElement;\n    itemsCount: number;\n  }) {\n    this.container = container;\n    this.itemsCount = itemsCount;\n\n    const disposer = addResizeObserver(container, this.onResizeThrottled);\n\n    this.onResizeThrottled();\n\n    return () => {\n      disposer?.();\n    };\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_mobx","require","_bexCore","TabsResponsiveState","constructor","params","_defineProperty2","default","Map","action","container","availableWidth","_externalAvailableWidth","clientWidth","process","env","NODE_ENV","isMobile","mode","nextPanelWidth","getPanelMinWidth","panelMinWidth","itemsMinWidths","getItemsMinWidth","isMobileDevice","onResizeThrottled","lodash","throttle","window","requestAnimationFrame","_onResize","makeObservable","observable","ref","getBadgesWidth","Array","from","badges","values","reduce","sum","badge","itemBadgeMargin","itemTextMinWidth","length","itemsCount","map","_","index","get","maybeBadgeWidth","itemPadding","itemMinWidth","badgesWidth","setAvailableWidth","width","init","disposer","addResizeObserver","exports"],"sources":["../../../../src/components/TabsFilter/TabsResponsiveState.ts"],"sourcesContent":["import { action, makeObservable, observable } from 'mobx';\nimport {\n  addResizeObserver,\n  WixPatternsContainer,\n  isMobileDevice,\n} from '@wix/bex-core';\n\nexport interface TabsResponsiveStateParams {\n  container: WixPatternsContainer;\n}\n\nexport class TabsResponsiveState {\n  readonly isMobile: boolean;\n  container?: HTMLDivElement;\n  // We save the badges in a Map and not in an Array because the badge is optional\n  // on a per-tab basis, but we still need to know the index of each badge.\n  badges = new Map<number, HTMLSpanElement>();\n  mode: 'tabs' | 'dropdown' = 'tabs';\n\n  panelMinWidth = 0;\n  itemsCount = 0;\n  itemPadding = 32;\n  itemMaxWidth = 200;\n  itemTextMinWidth = 48;\n  itemBadgeMargin = 6;\n  itemsMinWidths: number[] = [];\n\n  readonly onResizeThrottled;\n\n  constructor(params: TabsResponsiveStateParams) {\n    this.isMobile = isMobileDevice();\n    this.onResizeThrottled = params.container.lodash.throttle(\n      () => window.requestAnimationFrame(this._onResize),\n      300,\n    );\n\n    makeObservable(this, {\n      mode: observable.ref,\n      panelMinWidth: observable.ref,\n    });\n  }\n\n  getBadgesWidth() {\n    return Array.from(this.badges.values()).reduce((sum, badge) => {\n      return sum + badge.clientWidth + this.itemBadgeMargin;\n    }, 0);\n  }\n\n  getItemsMinWidth() {\n    const { itemTextMinWidth, itemBadgeMargin } = this;\n\n    return Array.from<number>({ length: this.itemsCount }).map((_, index) => {\n      const badge = this.badges.get(index);\n      const maybeBadgeWidth = badge ? badge.clientWidth + itemBadgeMargin : 0;\n\n      return itemTextMinWidth + maybeBadgeWidth;\n    });\n  }\n\n  getPanelMinWidth() {\n    const { itemsCount, itemTextMinWidth, itemPadding } = this;\n\n    const itemMinWidth = itemTextMinWidth + itemPadding;\n    const badgesWidth = this.getBadgesWidth();\n\n    return itemsCount * itemMinWidth + badgesWidth;\n  }\n\n  _externalAvailableWidth: number | null = null;\n\n  setAvailableWidth(width: number) {\n    this._externalAvailableWidth = width;\n    this._onResize();\n  }\n\n  _onResize = action(() => {\n    const { container } = this;\n    const availableWidth =\n      this._externalAvailableWidth ?? container?.clientWidth ?? 0;\n\n    if (process.env.NODE_ENV === 'test') {\n      return;\n    }\n    if (!container) {\n      return;\n    }\n\n    if (this.isMobile) {\n      this.mode = 'dropdown';\n      return;\n    }\n\n    const nextPanelWidth = this.getPanelMinWidth();\n\n    if (nextPanelWidth !== 0 && nextPanelWidth > this.panelMinWidth) {\n      this.itemsMinWidths = this.getItemsMinWidth();\n      this.panelMinWidth = nextPanelWidth;\n    }\n\n    if (this.panelMinWidth !== 0 && availableWidth < this.panelMinWidth) {\n      this.mode = 'dropdown';\n    } else {\n      this.mode = 'tabs';\n    }\n  });\n\n  init({\n    container,\n    itemsCount,\n  }: {\n    container?: HTMLDivElement;\n    itemsCount: number;\n  }) {\n    this.container = container;\n    this.itemsCount = itemsCount;\n\n    const disposer = addResizeObserver(container, this.onResizeThrottled);\n\n    this.onResizeThrottled();\n\n    return () => {\n      disposer?.();\n    };\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "ManageTagsModal3936625449";
+var _namespace_ = "ManageTagsModal2860881838";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "ManageTagsModal3936625449__root"
+  "root": "ManageTagsModal2860881838__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ManageTagsModal3936625449\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ManageTagsModal3936625449__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,2BAA2B;AAC7C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAiC,CAAC;AACxD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ManageTagsModal2860881838\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ManageTagsModal2860881838__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,2BAA2B;AAC7C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAiC,CAAC;AACxD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/ToolbarItem/ToolbarItem.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "ToolbarItem1352350803";
+var _namespace_ = "ToolbarItem2847693431";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "ToolbarItem1352350803__root"
+  "root": "ToolbarItem2847693431__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/ToolbarItem/ToolbarItem.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/ToolbarItem/ToolbarItem.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ToolbarItem1352350803\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ToolbarItem1352350803__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA6B,CAAC;AACpD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/ToolbarItem/ToolbarItem.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ToolbarItem2847693431\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ToolbarItem2847693431__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA6B,CAAC;AACpD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/ToolbarItemBox/ToolbarItemBox.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "ToolbarItemBox2099455071";
+var _namespace_ = "ToolbarItemBox404627416";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "ToolbarItemBox2099455071__root"
+  "root": "ToolbarItemBox404627416__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/ToolbarItemBox/ToolbarItemBox.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/ToolbarItemBox/ToolbarItemBox.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ToolbarItemBox2099455071\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ToolbarItemBox2099455071__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAgC,CAAC;AACvD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/ToolbarItemBox/ToolbarItemBox.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ToolbarItemBox404627416\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ToolbarItemBox404627416__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA+B,CAAC;AACtD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/common.st.css.js

@@ -5,16 +5,16 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "common3366408934";
+var _namespace_ = "common3570722167";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "common3366408934__root",
-  "column": "common3366408934__column",
-  "fullHeight": "common3366408934__fullHeight"
+  "root": "common3570722167__root",
+  "column": "common3570722167__column",
+  "fullHeight": "common3570722167__fullHeight"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/common.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../src/components/common.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"common3366408934\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"common3366408934__root\",\"column\":\"common3366408934__column\",\"fullHeight\":\"common3366408934__fullHeight\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,kBAAkB;AACpC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,wBAAwB;EAAC,QAAQ,EAAC,0BAA0B;EAAC,YAAY,EAAC;AAA8B,CAAC;AAC/H,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../src/components/common.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"common3570722167\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"common3570722167__root\",\"column\":\"common3570722167__column\",\"fullHeight\":\"common3570722167__fullHeight\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,kBAAkB;AACpC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,wBAAwB;EAAC,QAAQ,EAAC,0BAA0B;EAAC,YAAY,EAAC;AAA8B,CAAC;AAC/H,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/state/CollectionPage/CollectionPageHeader.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "CollectionPageHeader630394202";
+var _namespace_ = "CollectionPageHeader1007594454";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "CollectionPageHeader630394202__root"
+  "root": "CollectionPageHeader1007594454__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/state/CollectionPage/CollectionPageHeader.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/state/CollectionPage/CollectionPageHeader.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"CollectionPageHeader630394202\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"CollectionPageHeader630394202__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,+BAA+B;AACjD,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAqC,CAAC;AAC5D,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/state/CollectionPage/CollectionPageHeader.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"CollectionPageHeader1007594454\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"CollectionPageHeader1007594454__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,gCAAgC;AAClD,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAsC,CAAC;AAC7D,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/state/FormPage/FormPageHeader.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "FormPageHeader3500407043";
+var _namespace_ = "FormPageHeader3322132341";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "FormPageHeader3500407043__root"
+  "root": "FormPageHeader3322132341__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/state/FormPage/FormPageHeader.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/state/FormPage/FormPageHeader.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"FormPageHeader3500407043\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"FormPageHeader3500407043__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAgC,CAAC;AACvD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/state/FormPage/FormPageHeader.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"FormPageHeader3322132341\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"FormPageHeader3322132341__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAgC,CAAC;AACvD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/state/Toolbar/ToolbarLeftGroupState.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ToolbarLeftGroupState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _bexCore = require("@wix/bex-core");
+class ToolbarLeftGroupState {
+  constructor(params) {
+    (0, _defineProperty2.default)(this, "_responsive", void 0);
+    (0, _defineProperty2.default)(this, "_getTabsState", void 0);
+    (0, _defineProperty2.default)(this, "_element", null);
+    (0, _defineProperty2.default)(this, "_prevWidth", 0);
+    (0, _defineProperty2.default)(this, "mode", void 0);
+    (0, _defineProperty2.default)(this, "minWidth", void 0);
+    (0, _defineProperty2.default)(this, "EXPANSION_THRESHOLD", 20);
+    (0, _defineProperty2.default)(this, "_handleResize", () => {
+      const element = this._element;
+      if (!element) {
+        return;
+      }
+      const width = element.clientWidth;
+      const prevWidth = this._prevWidth;
+      const isAtMinWidth = width <= this.minWidth + 2; // 2px tolerance
+      const isGrowing = width > prevWidth;
+      const hasSpaceToExpand = width > this.minWidth + this.EXPANSION_THRESHOLD;
+      if (isAtMinWidth) {
+        this._responsive.overflow._scrollWidth = this._responsive.overflow._clientWidth + 1;
+        this._responsive._nextToShrink._shrinkIfNeeded();
+      } else if (isGrowing && hasSpaceToExpand) {
+        const availableSpace = width - this.minWidth;
+        this._responsive._nextToExpand._expandIfNeeded({
+          preCalculatedAvailableSpace: availableSpace
+        });
+      }
+      if (this.mode === 'tabs') {
+        var _this$_getTabsState;
+        const tabsState = (_this$_getTabsState = this._getTabsState) == null ? void 0 : _this$_getTabsState.call(this);
+        tabsState == null || tabsState.responsive.setAvailableWidth(width);
+      }
+      this._prevWidth = width;
+    });
+    this._responsive = params.responsive;
+    this.mode = params.mode;
+    this.minWidth = params.minWidth;
+    this._getTabsState = params.getTabsState;
+  }
+  init(element) {
+    this._element = null;
+    this._prevWidth = 0;
+    if (!element) {
+      return () => {};
+    }
+    this._element = element;
+    const disposer = (0, _bexCore.addResizeObserver)(element, this._handleResize);
+    this._handleResize();
+    return () => {
+      disposer == null || disposer();
+      this._element = null;
+      this._prevWidth = 0;
+    };
+  }
+}
+exports.ToolbarLeftGroupState = ToolbarLeftGroupState;
+//# sourceMappingURL=ToolbarLeftGroupState.js.map

package/dist/cjs/state/Toolbar/ToolbarLeftGroupState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_bexCore","require","ToolbarLeftGroupState","constructor","params","_defineProperty2","default","element","_element","width","clientWidth","prevWidth","_prevWidth","isAtMinWidth","minWidth","isGrowing","hasSpaceToExpand","EXPANSION_THRESHOLD","_responsive","overflow","_scrollWidth","_clientWidth","_nextToShrink","_shrinkIfNeeded","availableSpace","_nextToExpand","_expandIfNeeded","preCalculatedAvailableSpace","mode","_this$_getTabsState","tabsState","_getTabsState","call","responsive","setAvailableWidth","getTabsState","init","disposer","addResizeObserver","_handleResize","exports"],"sources":["../../../../src/state/Toolbar/ToolbarLeftGroupState.ts"],"sourcesContent":["import { addResizeObserver } from '@wix/bex-core';\nimport type { ToolbarResponsiveState } from './ToolbarResponsiveState';\nimport type { TabsFilterState } from '../../components/TabsFilter/TabsFilterState';\nimport type { FiltersMap } from '@wix/bex-core';\nimport { ToolbarMode } from '../../components/CollectionToolbar/toolbarModeUtils';\n\nexport interface ToolbarLeftGroupStateParams<T, F extends FiltersMap> {\n  readonly responsive: ToolbarResponsiveState;\n  readonly mode: ToolbarMode;\n  readonly minWidth: number;\n  readonly getTabsState?: () => TabsFilterState<T, F> | null | undefined;\n}\n\nexport class ToolbarLeftGroupState<T, F extends FiltersMap> {\n  private readonly _responsive: ToolbarResponsiveState;\n  private readonly _getTabsState?: () =>\n    | TabsFilterState<T, F>\n    | null\n    | undefined;\n\n  private _element: HTMLElement | null = null;\n  private _prevWidth = 0;\n\n  readonly mode: ToolbarMode;\n  readonly minWidth: number;\n\n  private readonly EXPANSION_THRESHOLD = 20;\n\n  constructor(params: ToolbarLeftGroupStateParams<T, F>) {\n    this._responsive = params.responsive;\n    this.mode = params.mode;\n    this.minWidth = params.minWidth;\n    this._getTabsState = params.getTabsState;\n  }\n\n  init(element: HTMLElement | null | undefined): () => void {\n    this._element = null;\n    this._prevWidth = 0;\n\n    if (!element) {\n      return () => {};\n    }\n\n    this._element = element;\n    const disposer = addResizeObserver(element, this._handleResize);\n    this._handleResize();\n\n    return () => {\n      disposer?.();\n      this._element = null;\n      this._prevWidth = 0;\n    };\n  }\n\n  private _handleResize = () => {\n    const element = this._element;\n    if (!element) {\n      return;\n    }\n\n    const width = element.clientWidth;\n    const prevWidth = this._prevWidth;\n    const isAtMinWidth = width <= this.minWidth + 2; // 2px tolerance\n    const isGrowing = width > prevWidth;\n    const hasSpaceToExpand = width > this.minWidth + this.EXPANSION_THRESHOLD;\n\n    if (isAtMinWidth) {\n      this._responsive.overflow._scrollWidth =\n        this._responsive.overflow._clientWidth + 1;\n      this._responsive._nextToShrink._shrinkIfNeeded();\n    } else if (isGrowing && hasSpaceToExpand) {\n      const availableSpace = width - this.minWidth;\n\n      this._responsive._nextToExpand._expandIfNeeded({\n        preCalculatedAvailableSpace: availableSpace,\n      });\n    }\n\n    if (this.mode === 'tabs') {\n      const tabsState = this._getTabsState?.();\n      tabsState?.responsive.setAvailableWidth(width);\n    }\n\n    this._prevWidth = width;\n  };\n}\n"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AAaO,MAAMC,qBAAqB,CAA0B;EAe1DC,WAAWA,CAACC,MAAyC,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,oBARhB,IAAI;IAAA,IAAAD,gBAAA,CAAAC,OAAA,sBACtB,CAAC;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,+BAKiB,EAAE;IAAA,IAAAD,gBAAA,CAAAC,OAAA,yBA4BjB,MAAM;MAC5B,MAAMC,OAAO,GAAG,IAAI,CAACC,QAAQ;MAC7B,IAAI,CAACD,OAAO,EAAE;QACZ;MACF;MAEA,MAAME,KAAK,GAAGF,OAAO,CAACG,WAAW;MACjC,MAAMC,SAAS,GAAG,IAAI,CAACC,UAAU;MACjC,MAAMC,YAAY,GAAGJ,KAAK,IAAI,IAAI,CAACK,QAAQ,GAAG,CAAC,CAAC,CAAC;MACjD,MAAMC,SAAS,GAAGN,KAAK,GAAGE,SAAS;MACnC,MAAMK,gBAAgB,GAAGP,KAAK,GAAG,IAAI,CAACK,QAAQ,GAAG,IAAI,CAACG,mBAAmB;MAEzE,IAAIJ,YAAY,EAAE;QAChB,IAAI,CAACK,WAAW,CAACC,QAAQ,CAACC,YAAY,GACpC,IAAI,CAACF,WAAW,CAACC,QAAQ,CAACE,YAAY,GAAG,CAAC;QAC5C,IAAI,CAACH,WAAW,CAACI,aAAa,CAACC,eAAe,CAAC,CAAC;MAClD,CAAC,MAAM,IAAIR,SAAS,IAAIC,gBAAgB,EAAE;QACxC,MAAMQ,cAAc,GAAGf,KAAK,GAAG,IAAI,CAACK,QAAQ;QAE5C,IAAI,CAACI,WAAW,CAACO,aAAa,CAACC,eAAe,CAAC;UAC7CC,2BAA2B,EAAEH;QAC/B,CAAC,CAAC;MACJ;MAEA,IAAI,IAAI,CAACI,IAAI,KAAK,MAAM,EAAE;QAAA,IAAAC,mBAAA;QACxB,MAAMC,SAAS,IAAAD,mBAAA,GAAG,IAAI,CAACE,aAAa,qBAAlBF,mBAAA,CAAAG,IAAA,KAAqB,CAAC;QACxCF,SAAS,YAATA,SAAS,CAAEG,UAAU,CAACC,iBAAiB,CAACzB,KAAK,CAAC;MAChD;MAEA,IAAI,CAACG,UAAU,GAAGH,KAAK;IACzB,CAAC;IAvDC,IAAI,CAACS,WAAW,GAAGd,MAAM,CAAC6B,UAAU;IACpC,IAAI,CAACL,IAAI,GAAGxB,MAAM,CAACwB,IAAI;IACvB,IAAI,CAACd,QAAQ,GAAGV,MAAM,CAACU,QAAQ;IAC/B,IAAI,CAACiB,aAAa,GAAG3B,MAAM,CAAC+B,YAAY;EAC1C;EAEAC,IAAIA,CAAC7B,OAAuC,EAAc;IACxD,IAAI,CAACC,QAAQ,GAAG,IAAI;IACpB,IAAI,CAACI,UAAU,GAAG,CAAC;IAEnB,IAAI,CAACL,OAAO,EAAE;MACZ,OAAO,MAAM,CAAC,CAAC;IACjB;IAEA,IAAI,CAACC,QAAQ,GAAGD,OAAO;IACvB,MAAM8B,QAAQ,GAAG,IAAAC,0BAAiB,EAAC/B,OAAO,EAAE,IAAI,CAACgC,aAAa,CAAC;IAC/D,IAAI,CAACA,aAAa,CAAC,CAAC;IAEpB,OAAO,MAAM;MACXF,QAAQ,YAARA,QAAQ,CAAG,CAAC;MACZ,IAAI,CAAC7B,QAAQ,GAAG,IAAI;MACpB,IAAI,CAACI,UAAU,GAAG,CAAC;IACrB,CAAC;EACH;AAiCF;AAAC4B,OAAA,CAAAtC,qBAAA,GAAAA,qBAAA","ignoreList":[]}

package/dist/cjs/state/Toolbar/ToolbarResponsivePriorityState.js

@@ -14,7 +14,7 @@ class ToolbarResponsivePriorityState {
     (0, _defineProperty2.default)(this, "_minWidth", void 0);
     (0, _defineProperty2.default)(this, "_collapsedWidth", void 0);
     (0, _defineProperty2.default)(this, "_shouldShrink", false);
-    (0, _defineProperty2.default)(this, "_groupElement", void 0);
+    (0, _defineProperty2.default)(this, "_groupElement", null);
     this._count = params.count;
     this._minWidth = params.minWidth ?? 0;
     this._collapsedWidth = params.minWidth ?? 0;
@@ -60,6 +60,9 @@ class ToolbarResponsivePriorityState {
         available
       }
     } = responsive;
+    if (responsive._expandCooldown) {
+      return;
+    }
     if (_nextToExpand !== this || (preCalculatedAvailableSpace ?? available) + _collapsedWidth <= this._minWidth || !this._shouldShrink) {
       return;
     }
@@ -67,12 +70,13 @@ class ToolbarResponsivePriorityState {
     responsive._nextToExpand = _nextToExpand.getNextToExpand();
     responsive._nextToShrink = this;
     responsive.actionsAvailableSpace._syncThrottled();
-
-    // experimental - expanding the next item without waiting for the layout tick
-    // const availableAfterExpand = available + _collapsedWidth - this._minWidth;
-    // responsive._nextToExpand._expandIfNeeded({
-    //   preCalculatedAvailableSpace: availableAfterExpand,
-    // });
+    const spaceUsed = this._minWidth - _collapsedWidth;
+    const availableAfterExpand = (preCalculatedAvailableSpace ?? available) - spaceUsed;
+    if (availableAfterExpand > 0) {
+      responsive._nextToExpand._expandIfNeeded({
+        preCalculatedAvailableSpace: availableAfterExpand
+      });
+    }
   }
   _shrinkIfNeeded() {
     const {
@@ -88,6 +92,15 @@ class ToolbarResponsivePriorityState {
     this._shouldShrink = true;
     responsive._nextToShrink = _nextToShrink.getNextToShrink();
     responsive._nextToExpand = this;
+
+    // Double rAF ensures the shrink is fully painted before allowing expansion.
+    // Single rAF can cause flickering because layout may not be settled yet.
+    responsive._expandCooldown = true;
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        responsive._expandCooldown = false;
+      });
+    });
     responsive.overflow._syncThrottled();
   }
 }

package/dist/cjs/state/Toolbar/ToolbarResponsivePriorityState.js.map

@@ -1 +1 @@
-{"version":3,"names":["_mobx","require","ToolbarResponsivePriorityState","constructor","params","_defineProperty2","default","_count","count","_minWidth","minWidth","_collapsedWidth","responsive","getNextToShrink","getNextToExpand","makeObservable","observable","ref","_shouldShrink","_syncWidth","action","_expandIfNeeded","_shrinkIfNeeded","_groupElement","responsiveDisabled","scrollWidth","preCalculatedAvailableSpace","_nextToExpand","actionsAvailableSpace","available","_nextToShrink","_syncThrottled","overflow","_isOverflowing","exports"],"sources":["../../../../src/state/Toolbar/ToolbarResponsivePriorityState.ts"],"sourcesContent":["import { ToolbarResponsiveState } from './ToolbarResponsiveState';\nimport { action, makeObservable, observable } from 'mobx';\n\nexport interface ToolbarResponsivePriorityStateParams {\n  responsive: ToolbarResponsiveState;\n  getNextToShrink: () => ToolbarResponsivePriorityState;\n  getNextToExpand: () => ToolbarResponsivePriorityState;\n  count: number;\n  minWidth?: number;\n}\n\nexport class ToolbarResponsivePriorityState {\n  readonly responsive;\n  readonly getNextToShrink;\n  readonly getNextToExpand;\n  readonly _count;\n\n  _minWidth;\n  _collapsedWidth;\n\n  _shouldShrink = false;\n\n  _groupElement?: HTMLElement | null | undefined;\n\n  constructor(params: ToolbarResponsivePriorityStateParams) {\n    this._count = params.count;\n\n    this._minWidth = params.minWidth ?? 0;\n    this._collapsedWidth = params.minWidth ?? 0;\n\n    this.responsive = params.responsive;\n    this.getNextToShrink = params.getNextToShrink;\n    this.getNextToExpand = params.getNextToExpand;\n\n    makeObservable(this, {\n      _minWidth: observable.ref,\n      _shouldShrink: observable.ref,\n      _syncWidth: action,\n      _expandIfNeeded: action,\n      _shrinkIfNeeded: action,\n    });\n  }\n\n  _syncWidth() {\n    const { _groupElement, _shouldShrink, responsive } = this;\n    if (responsive.responsiveDisabled) {\n      return;\n    }\n    if (!_groupElement) {\n      return;\n    }\n    if (_shouldShrink) {\n      this._collapsedWidth = _groupElement.scrollWidth;\n    } else {\n      this._minWidth = _groupElement.scrollWidth;\n    }\n  }\n\n  _expandIfNeeded({\n    preCalculatedAvailableSpace,\n  }: {\n    preCalculatedAvailableSpace?: number;\n  } = {}) {\n    const { responsive, _collapsedWidth } = this;\n\n    const {\n      _nextToExpand,\n      actionsAvailableSpace: { available },\n    } = responsive;\n\n    if (\n      _nextToExpand !== this ||\n      (preCalculatedAvailableSpace ?? available) + _collapsedWidth <=\n        this._minWidth ||\n      !this._shouldShrink\n    ) {\n      return;\n    }\n\n    this._shouldShrink = false;\n    responsive._nextToExpand = _nextToExpand.getNextToExpand();\n    responsive._nextToShrink = this;\n    responsive.actionsAvailableSpace._syncThrottled();\n\n    // experimental - expanding the next item without waiting for the layout tick\n    // const availableAfterExpand = available + _collapsedWidth - this._minWidth;\n    // responsive._nextToExpand._expandIfNeeded({\n    //   preCalculatedAvailableSpace: availableAfterExpand,\n    // });\n  }\n\n  _shrinkIfNeeded() {\n    const { responsive } = this;\n\n    const { _nextToShrink, overflow } = responsive;\n\n    if (\n      _nextToShrink !== this ||\n      !overflow._isOverflowing ||\n      this._shouldShrink\n    ) {\n      return;\n    }\n\n    this._shouldShrink = true;\n    responsive._nextToShrink = _nextToShrink.getNextToShrink();\n    responsive._nextToExpand = this;\n    responsive.overflow._syncThrottled();\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_mobx","require","ToolbarResponsivePriorityState","constructor","params","_defineProperty2","default","_count","count","_minWidth","minWidth","_collapsedWidth","responsive","getNextToShrink","getNextToExpand","makeObservable","observable","ref","_shouldShrink","_syncWidth","action","_expandIfNeeded","_shrinkIfNeeded","_groupElement","responsiveDisabled","scrollWidth","preCalculatedAvailableSpace","_nextToExpand","actionsAvailableSpace","available","_expandCooldown","_nextToShrink","_syncThrottled","spaceUsed","availableAfterExpand","overflow","_isOverflowing","window","requestAnimationFrame","exports"],"sources":["../../../../src/state/Toolbar/ToolbarResponsivePriorityState.ts"],"sourcesContent":["import { ToolbarResponsiveState } from './ToolbarResponsiveState';\nimport { action, makeObservable, observable } from 'mobx';\n\nexport interface ToolbarResponsivePriorityStateParams {\n  responsive: ToolbarResponsiveState;\n  getNextToShrink: () => ToolbarResponsivePriorityState;\n  getNextToExpand: () => ToolbarResponsivePriorityState;\n  count: number;\n  minWidth?: number;\n}\n\nexport class ToolbarResponsivePriorityState {\n  readonly responsive: ToolbarResponsiveState;\n  getNextToShrink: () => ToolbarResponsivePriorityState;\n  getNextToExpand: () => ToolbarResponsivePriorityState;\n  readonly _count: number;\n\n  _minWidth: number;\n  _collapsedWidth: number;\n\n  _shouldShrink = false;\n\n  _groupElement: HTMLElement | null = null;\n\n  constructor(params: ToolbarResponsivePriorityStateParams) {\n    this._count = params.count;\n\n    this._minWidth = params.minWidth ?? 0;\n    this._collapsedWidth = params.minWidth ?? 0;\n\n    this.responsive = params.responsive;\n    this.getNextToShrink = params.getNextToShrink;\n    this.getNextToExpand = params.getNextToExpand;\n\n    makeObservable(this, {\n      _minWidth: observable.ref,\n      _shouldShrink: observable.ref,\n      _syncWidth: action,\n      _expandIfNeeded: action,\n      _shrinkIfNeeded: action,\n    });\n  }\n\n  _syncWidth() {\n    const { _groupElement, _shouldShrink, responsive } = this;\n    if (responsive.responsiveDisabled) {\n      return;\n    }\n    if (!_groupElement) {\n      return;\n    }\n    if (_shouldShrink) {\n      this._collapsedWidth = _groupElement.scrollWidth;\n    } else {\n      this._minWidth = _groupElement.scrollWidth;\n    }\n  }\n\n  _expandIfNeeded({\n    preCalculatedAvailableSpace,\n  }: {\n    preCalculatedAvailableSpace?: number;\n  } = {}) {\n    const { responsive, _collapsedWidth } = this;\n\n    const {\n      _nextToExpand,\n      actionsAvailableSpace: { available },\n    } = responsive;\n\n    if (responsive._expandCooldown) {\n      return;\n    }\n\n    if (\n      _nextToExpand !== this ||\n      (preCalculatedAvailableSpace ?? available) + _collapsedWidth <=\n        this._minWidth ||\n      !this._shouldShrink\n    ) {\n      return;\n    }\n\n    this._shouldShrink = false;\n    responsive._nextToExpand = _nextToExpand.getNextToExpand();\n    responsive._nextToShrink = this;\n    responsive.actionsAvailableSpace._syncThrottled();\n\n    const spaceUsed = this._minWidth - _collapsedWidth;\n    const availableAfterExpand =\n      (preCalculatedAvailableSpace ?? available) - spaceUsed;\n    if (availableAfterExpand > 0) {\n      responsive._nextToExpand._expandIfNeeded({\n        preCalculatedAvailableSpace: availableAfterExpand,\n      });\n    }\n  }\n\n  _shrinkIfNeeded() {\n    const { responsive } = this;\n\n    const { _nextToShrink, overflow } = responsive;\n\n    if (\n      _nextToShrink !== this ||\n      !overflow._isOverflowing ||\n      this._shouldShrink\n    ) {\n      return;\n    }\n\n    this._shouldShrink = true;\n    responsive._nextToShrink = _nextToShrink.getNextToShrink();\n    responsive._nextToExpand = this;\n\n    // Double rAF ensures the shrink is fully painted before allowing expansion.\n    // Single rAF can cause flickering because layout may not be settled yet.\n    responsive._expandCooldown = true;\n    window.requestAnimationFrame(() => {\n      window.requestAnimationFrame(() => {\n        responsive._expandCooldown = false;\n      });\n    });\n\n    responsive.overflow._syncThrottled();\n  }\n}\n"],"mappings":"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","ignoreList":[]}