@wix/patterns 1.454.0 → 1.456.0

package/dist/cjs/components/PageWrapper/PageWrapperBase.js

@@ -20,9 +20,9 @@ function PageWrapperBase(props) {
   const {
     modalsContainerRef,
     stackingRootRef,
-    _sidePanelOpen
+    _sidePanelReservedWidth
   } = state;
-  const sidePanelOpen = (0, _react2.useReactive)(_sidePanelOpen);
+  const sidePanelReservedWidth = (0, _react2.useReactive)(_sidePanelReservedWidth);
   const {
     environment,
     useRelativeSidePanel,
@@ -30,11 +30,11 @@ function PageWrapperBase(props) {
   } = (0, _react3.useWixPatternsContainer)();
   const pageAndModalsRootStyle = (0, _react.useMemo)(() => ({
     position: 'relative',
-    width: sidePanelOpen ? `calc(100% - ${_bexCore.SidePanelWidth}px)` : '100%',
+    width: sidePanelReservedWidth ? `calc(100% - ${sidePanelReservedWidth}px)` : '100%',
     height: '100%',
     transition: 'width 0.4s ease 0s',
     zIndex: 1
-  }), [sidePanelOpen]);
+  }), [sidePanelReservedWidth]);
   const rootStyle = (0, _react.useMemo)(() => ({
     position: 'relative',
     width: '100%',
@@ -50,7 +50,7 @@ function PageWrapperBase(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 56,
+      lineNumber: 59,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -64,15 +64,16 @@ function PageWrapperBase(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 57,
+      lineNumber: 60,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-hook": "page-and-modals-root",
     style: pageAndModalsRootStyle,
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 66,
+      lineNumber: 69,
       columnNumber: 9
     }
   }, children), /*#__PURE__*/_react.default.createElement("div", {
@@ -86,7 +87,7 @@ function PageWrapperBase(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 67,
+      lineNumber: 72,
       columnNumber: 9
     }
   })));
@@ -96,7 +97,7 @@ function PageWrapperBase(props) {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 82,
+        lineNumber: 87,
         columnNumber: 7
       }
     }, child);

package/dist/cjs/components/PageWrapper/PageWrapperBase.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_react2","_react3","_bexCore","_mobx","_designSystem","_version","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PageWrapperBase","props","pageState","children","state","useState","PageState","modalsContainerRef","stackingRootRef","_sidePanelOpen","sidePanelOpen","useReactive","environment","useRelativeSidePanel","isMobile","useWixPatternsContainer","pageAndModalsRootStyle","useMemo","position","width","SidePanelWidth","height","transition","zIndex","rootStyle","overflow","undefined","modalsContainerStyle","child","createElement","PageContextProvider","value","__self","__source","fileName","lineNumber","columnNumber","cairoVersion","style","ref","el","current","lang","language","runInAction","WixDesignSystemProvider","mobile"],"sources":["../../../../src/components/PageWrapper/PageWrapperBase.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, useState } from 'react';\nimport { useReactive } from '@wix/bex-utils/react';\nimport {\n  PageContextProvider,\n  useWixPatternsContainer,\n} from '@wix/bex-core/react';\nimport { PageState, SidePanelWidth } from '@wix/bex-core';\nimport { runInAction } from 'mobx';\nimport { WixDesignSystemProvider } from '@wix/design-system';\nimport { version as cairoVersion } from '../../version';\n\nexport interface PageWrapperBaseProps {\n  pageState?: PageState;\n  children?: ReactNode;\n}\n\nexport function PageWrapperBase(props: PageWrapperBaseProps) {\n  const { pageState, children } = props;\n\n  const [state] = useState(() => pageState ?? new PageState());\n  const { modalsContainerRef, stackingRootRef, _sidePanelOpen } = state;\n  const sidePanelOpen = useReactive(_sidePanelOpen);\n  const { environment, useRelativeSidePanel, isMobile } =\n    useWixPatternsContainer();\n\n  const pageAndModalsRootStyle = useMemo(\n    () => ({\n      position: 'relative' as const,\n      width: sidePanelOpen ? `calc(100% - ${SidePanelWidth}px)` : '100%',\n      height: '100%',\n      transition: 'width 0.4s ease 0s',\n      zIndex: 1,\n    }),\n    [sidePanelOpen],\n  );\n\n  const rootStyle = useMemo(\n    () => ({\n      position: 'relative' as const,\n      width: '100%',\n      height: '100%',\n      overflow: useRelativeSidePanel ? ('hidden' as const) : undefined,\n    }),\n    [],\n  );\n\n  const modalsContainerStyle = useMemo(\n    () => ({\n      position: 'absolute' as const,\n      zIndex: 1,\n    }),\n    [],\n  );\n\n  let child = (\n    <PageContextProvider value={state}>\n      <div\n        data-wix-patterns={cairoVersion}\n        style={rootStyle}\n        data-hook=\"cairo-root-stacking\"\n        ref={(el) => {\n          stackingRootRef.current = el;\n        }}\n        lang={environment.language}\n      >\n        <div style={pageAndModalsRootStyle}>{children}</div>\n        <div\n          data-hook=\"modals-container\"\n          ref={(el) => {\n            runInAction(() => {\n              modalsContainerRef.current = el;\n            });\n          }}\n          style={modalsContainerStyle}\n        />\n      </div>\n    </PageContextProvider>\n  );\n\n  if (isMobile) {\n    child = (\n      <WixDesignSystemProvider mobile={true}>{child}</WixDesignSystemProvider>\n    );\n  }\n\n  return child;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_react2","_react3","_bexCore","_mobx","_designSystem","_version","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PageWrapperBase","props","pageState","children","state","useState","PageState","modalsContainerRef","stackingRootRef","_sidePanelReservedWidth","sidePanelReservedWidth","useReactive","environment","useRelativeSidePanel","isMobile","useWixPatternsContainer","pageAndModalsRootStyle","useMemo","position","width","height","transition","zIndex","rootStyle","overflow","undefined","modalsContainerStyle","child","createElement","PageContextProvider","value","__self","__source","fileName","lineNumber","columnNumber","cairoVersion","style","ref","el","current","lang","language","runInAction","WixDesignSystemProvider","mobile"],"sources":["../../../../src/components/PageWrapper/PageWrapperBase.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, useState } from 'react';\nimport { useReactive } from '@wix/bex-utils/react';\nimport {\n  PageContextProvider,\n  useWixPatternsContainer,\n} from '@wix/bex-core/react';\nimport { PageState } from '@wix/bex-core';\nimport { runInAction } from 'mobx';\nimport { WixDesignSystemProvider } from '@wix/design-system';\nimport { version as cairoVersion } from '../../version';\n\nexport interface PageWrapperBaseProps {\n  pageState?: PageState;\n  children?: ReactNode;\n}\n\nexport function PageWrapperBase(props: PageWrapperBaseProps) {\n  const { pageState, children } = props;\n\n  const [state] = useState(() => pageState ?? new PageState());\n  const { modalsContainerRef, stackingRootRef, _sidePanelReservedWidth } =\n    state;\n  const sidePanelReservedWidth = useReactive(_sidePanelReservedWidth);\n  const { environment, useRelativeSidePanel, isMobile } =\n    useWixPatternsContainer();\n\n  const pageAndModalsRootStyle = useMemo(\n    () => ({\n      position: 'relative' as const,\n      width: sidePanelReservedWidth\n        ? `calc(100% - ${sidePanelReservedWidth}px)`\n        : '100%',\n      height: '100%',\n      transition: 'width 0.4s ease 0s',\n      zIndex: 1,\n    }),\n    [sidePanelReservedWidth],\n  );\n\n  const rootStyle = useMemo(\n    () => ({\n      position: 'relative' as const,\n      width: '100%',\n      height: '100%',\n      overflow: useRelativeSidePanel ? ('hidden' as const) : undefined,\n    }),\n    [],\n  );\n\n  const modalsContainerStyle = useMemo(\n    () => ({\n      position: 'absolute' as const,\n      zIndex: 1,\n    }),\n    [],\n  );\n\n  let child = (\n    <PageContextProvider value={state}>\n      <div\n        data-wix-patterns={cairoVersion}\n        style={rootStyle}\n        data-hook=\"cairo-root-stacking\"\n        ref={(el) => {\n          stackingRootRef.current = el;\n        }}\n        lang={environment.language}\n      >\n        <div data-hook=\"page-and-modals-root\" style={pageAndModalsRootStyle}>\n          {children}\n        </div>\n        <div\n          data-hook=\"modals-container\"\n          ref={(el) => {\n            runInAction(() => {\n              modalsContainerRef.current = el;\n            });\n          }}\n          style={modalsContainerStyle}\n        />\n      </div>\n    </PageContextProvider>\n  );\n\n  if (isMobile) {\n    child = (\n      <WixDesignSystemProvider mobile={true}>{child}</WixDesignSystemProvider>\n    );\n  }\n\n  return child;\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/PickerContent/PickerContent.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_ = "PickerContent2517787932";
+var _namespace_ = "PickerContent1132571777";
 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": "PickerContent2517787932__root"
+  "root": "PickerContent1132571777__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/PickerContent/PickerContent.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/PickerContent/PickerContent.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"PickerContent2517787932\";\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\":\"PickerContent2517787932__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":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/PickerContent/PickerContent.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"PickerContent1132571777\";\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\":\"PickerContent1132571777__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/PickerContent/PickerContentAdditionalStep.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_ = "PickerContentAdditionalStep1757242952";
+var _namespace_ = "PickerContentAdditionalStep3609243461";
 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": "PickerContentAdditionalStep1757242952__root",
-  "titles": "PickerContentAdditionalStep1757242952__titles",
-  "suffix": "PickerContentAdditionalStep1757242952__suffix"
+  "root": "PickerContentAdditionalStep3609243461__root",
+  "titles": "PickerContentAdditionalStep3609243461__titles",
+  "suffix": "PickerContentAdditionalStep3609243461__suffix"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/PickerContent/PickerContentAdditionalStep.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/PickerContent/PickerContentAdditionalStep.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"PickerContentAdditionalStep1757242952\";\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\":\"PickerContentAdditionalStep1757242952__root\",\"titles\":\"PickerContentAdditionalStep1757242952__titles\",\"suffix\":\"PickerContentAdditionalStep1757242952__suffix\"};\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,uCAAuC;AACzD,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,6CAA6C;EAAC,QAAQ,EAAC,+CAA+C;EAAC,QAAQ,EAAC;AAA+C,CAAC;AACtL,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/PickerContent/PickerContentAdditionalStep.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"PickerContentAdditionalStep3609243461\";\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\":\"PickerContentAdditionalStep3609243461__root\",\"titles\":\"PickerContentAdditionalStep3609243461__titles\",\"suffix\":\"PickerContentAdditionalStep3609243461__suffix\"};\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,uCAAuC;AACzD,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,6CAA6C;EAAC,QAAQ,EAAC,+CAA+C;EAAC,QAAQ,EAAC;AAA+C,CAAC;AACtL,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/PickerTableListItem/PickerTableListItem.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_ = "PickerTableListItem2909879809";
+var _namespace_ = "PickerTableListItem3396677433";
 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": "PickerTableListItem2909879809__root"
+  "root": "PickerTableListItem3396677433__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/PickerTableListItem/PickerTableListItem.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/PickerTableListItem/PickerTableListItem.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"PickerTableListItem2909879809\";\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\":\"PickerTableListItem2909879809__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/components/PickerTableListItem/PickerTableListItem.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"PickerTableListItem3396677433\";\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\":\"PickerTableListItem3396677433__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":[]}

package/dist/cjs/components/ScrollableContent/ScrollableContent.js

@@ -3,6 +3,7 @@
 exports.__esModule = true;
 exports.ScrollableContent = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
 var _ScrollableContentStCss = require("./ScrollableContent.st.css.js");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/ScrollableContent/ScrollableContent.tsx";
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -14,8 +15,9 @@ const ScrollableContent = exports.ScrollableContent = /*#__PURE__*/(0, _react.fo
     smooth,
     children
   } = props;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-hook": dataHook,
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    display: "block",
+    dataHook: dataHook,
     ref: ref,
     className: (0, _ScrollableContentStCss.st)(_ScrollableContentStCss.classes.root, {
       overflowX,
@@ -25,7 +27,7 @@ const ScrollableContent = exports.ScrollableContent = /*#__PURE__*/(0, _react.fo
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 19,
+      lineNumber: 20,
       columnNumber: 5
     }
   }, children);

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_ScrollableContentStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ScrollableContent","exports","forwardRef","props","ref","dataHook","overflowX","overflowY","smooth","children","createElement","className","st","classes","root","__self","__source","fileName","lineNumber","columnNumber"],"sources":["../../../../src/components/ScrollableContent/ScrollableContent.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classes, st } from './ScrollableContent.st.css.js';\n\nexport interface ScrollableContentProps {\n  overflowY?: boolean;\n  overflowX?: boolean;\n  smooth?: boolean;\n  children?: React.ReactNode;\n  dataHook?: string;\n}\n\nexport const ScrollableContent = forwardRef<\n  HTMLDivElement,\n  ScrollableContentProps\n>((props, ref) => {\n  const { dataHook, overflowX, overflowY, smooth, children } = props;\n\n  return (\n    <div\n      data-hook={dataHook}\n      ref={ref}\n      className={st(classes.root, {\n        overflowX,\n        overflowY,\n        smooth,\n      })}\n    >\n      {children}\n    </div>\n  );\n});\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AAA4D,IAAAE,YAAA;AAAA,SAAAH,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAUrD,MAAMkB,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,gBAAG,IAAAE,iBAAU,EAGzC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChB,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,SAAS;IAAEC,MAAM;IAAEC;EAAS,CAAC,GAAGN,KAAK;EAElE,oBACE3B,MAAA,CAAAe,OAAA,CAAAmB,aAAA;IACE,aAAWL,QAAS;IACpBD,GAAG,EAAEA,GAAI;IACTO,SAAS,EAAE,IAAAC,0BAAE,EAACC,+BAAO,CAACC,IAAI,EAAE;MAC1BR,SAAS;MACTC,SAAS;MACTC;IACF,CAAC,CAAE;IAAAO,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAArC,YAAA;MAAAsC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEFV,QACE,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_ScrollableContentStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ScrollableContent","exports","forwardRef","props","ref","dataHook","overflowX","overflowY","smooth","children","createElement","Box","display","className","st","classes","root","__self","__source","fileName","lineNumber","columnNumber"],"sources":["../../../../src/components/ScrollableContent/ScrollableContent.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box } from '@wix/design-system';\nimport { classes, st } from './ScrollableContent.st.css.js';\n\nexport interface ScrollableContentProps {\n  overflowY?: boolean;\n  overflowX?: boolean;\n  smooth?: boolean;\n  children?: React.ReactNode;\n  dataHook?: string;\n}\n\nexport const ScrollableContent = forwardRef<\n  HTMLDivElement,\n  ScrollableContentProps\n>((props, ref) => {\n  const { dataHook, overflowX, overflowY, smooth, children } = props;\n\n  return (\n    <Box\n      display=\"block\"\n      dataHook={dataHook}\n      ref={ref}\n      className={st(classes.root, {\n        overflowX,\n        overflowY,\n        smooth,\n      })}\n    >\n      {children}\n    </Box>\n  );\n});\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AAA4D,IAAAG,YAAA;AAAA,SAAAJ,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,CAAAK,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAUrD,MAAMkB,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,gBAAG,IAAAE,iBAAU,EAGzC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChB,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,SAAS;IAAEC,MAAM;IAAEC;EAAS,CAAC,GAAGN,KAAK;EAElE,oBACE5B,MAAA,CAAAgB,OAAA,CAAAmB,aAAA,CAAChC,aAAA,CAAAiC,GAAG;IACFC,OAAO,EAAC,OAAO;IACfP,QAAQ,EAAEA,QAAS;IACnBD,GAAG,EAAEA,GAAI;IACTS,SAAS,EAAE,IAAAC,0BAAE,EAACC,+BAAO,CAACC,IAAI,EAAE;MAC1BV,SAAS;MACTC,SAAS;MACTC;IACF,CAAC,CAAE;IAAAS,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAvC,YAAA;MAAAwC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEFZ,QACE,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/ScrollableContent/ScrollableContent.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_ = "ScrollableContent1862169288";
+var _namespace_ = "ScrollableContent2531331019";
 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": "ScrollableContent1862169288__root"
+  "root": "ScrollableContent2531331019__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/ScrollableContent/ScrollableContent.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/ScrollableContent/ScrollableContent.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ScrollableContent1862169288\";\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\":\"ScrollableContent1862169288__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,6BAA6B;AAC/C,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;AAAmC,CAAC;AAC1D,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/ScrollableContent/ScrollableContent.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ScrollableContent2531331019\";\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\":\"ScrollableContent2531331019__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,6BAA6B;AAC/C,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;AAAmC,CAAC;AAC1D,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/SetupWidget/SetupWidget.st.css.js

@@ -5,22 +5,22 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "SetupWidget870228798";
+var _namespace_ = "SetupWidget3264443714";
 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": "SetupWidget870228798__root",
-  "row": "SetupWidget870228798__row",
-  "completedCta": "SetupWidget870228798__completedCta",
-  "secondaryCta": "SetupWidget870228798__secondaryCta",
-  "card": "SetupWidget870228798__card",
-  "stepIcon": "SetupWidget870228798__stepIcon",
-  "chevron": "SetupWidget870228798__chevron",
-  "chevronDisabled": "SetupWidget870228798__chevronDisabled",
-  "inProgressLabel": "SetupWidget870228798__inProgressLabel"
+  "root": "SetupWidget3264443714__root",
+  "row": "SetupWidget3264443714__row",
+  "completedCta": "SetupWidget3264443714__completedCta",
+  "secondaryCta": "SetupWidget3264443714__secondaryCta",
+  "card": "SetupWidget3264443714__card",
+  "stepIcon": "SetupWidget3264443714__stepIcon",
+  "chevron": "SetupWidget3264443714__chevron",
+  "chevronDisabled": "SetupWidget3264443714__chevronDisabled",
+  "inProgressLabel": "SetupWidget3264443714__inProgressLabel"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/SetupWidget/SetupWidget.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/SetupWidget/SetupWidget.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"SetupWidget870228798\";\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\":\"SetupWidget870228798__root\",\"row\":\"SetupWidget870228798__row\",\"completedCta\":\"SetupWidget870228798__completedCta\",\"secondaryCta\":\"SetupWidget870228798__secondaryCta\",\"card\":\"SetupWidget870228798__card\",\"stepIcon\":\"SetupWidget870228798__stepIcon\",\"chevron\":\"SetupWidget870228798__chevron\",\"chevronDisabled\":\"SetupWidget870228798__chevronDisabled\",\"inProgressLabel\":\"SetupWidget870228798__inProgressLabel\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-border-dark-secondary\":\"--wds-color-border-dark-secondary\",\"wds-color-fill-standard-tertiary\":\"--wds-color-fill-standard-tertiary\",\"wds-color-fill-standard-tertiary-hover\":\"--wds-color-fill-standard-tertiary-hover\",\"wsr-color-D60\":\"--wsr-color-D60\",\"wsr-color-D80\":\"--wsr-color-D80\",\"wsr-color-B60\":\"--wsr-color-B60\",\"wds-color-text-standard-primary\":\"--wds-color-text-standard-primary\",\"wds-color-text-disabled\":\"--wds-color-text-disabled\",\"wds-color-text-urgent\":\"--wds-color-text-urgent\",\"wsr-color-D10\":\"--wsr-color-D10\",\"wsr-color-D10-30\":\"--wsr-color-D10-30\",\"wsr-color-O10\":\"--wsr-color-O10\",\"wds-border-radius-400\":\"--wds-border-radius-400\",\"wds-clickable-card-outline-border-color\":\"--wds-clickable-card-outline-border-color\",\"wds-color-border-standard-primary-active\":\"--wds-color-border-standard-primary-active\",\"wsr-color-B10\":\"--wsr-color-B10\",\"wds-color-fill-surface-default\":\"--wds-color-fill-surface-default\"}; \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,KAAK,EAAC,2BAA2B;EAAC,cAAc,EAAC,oCAAoC;EAAC,cAAc,EAAC,oCAAoC;EAAC,MAAM,EAAC,4BAA4B;EAAC,UAAU,EAAC,gCAAgC;EAAC,SAAS,EAAC,+BAA+B;EAAC,iBAAiB,EAAC,uCAAuC;EAAC,iBAAiB,EAAC;AAAuC,CAAC;AAC3a,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;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,kCAAkC,EAAC,oCAAoC;EAAC,wCAAwC,EAAC,0CAA0C;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,yBAAyB,EAAC,2BAA2B;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,eAAe,EAAC,iBAAiB;EAAC,kBAAkB,EAAC,oBAAoB;EAAC,eAAe,EAAC,iBAAiB;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,yCAAyC,EAAC,2CAA2C;EAAC,0CAA0C,EAAC,4CAA4C;EAAC,eAAe,EAAC,iBAAiB;EAAC,gCAAgC,EAAC;AAAkC,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/SetupWidget/SetupWidget.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"SetupWidget3264443714\";\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\":\"SetupWidget3264443714__root\",\"row\":\"SetupWidget3264443714__row\",\"completedCta\":\"SetupWidget3264443714__completedCta\",\"secondaryCta\":\"SetupWidget3264443714__secondaryCta\",\"card\":\"SetupWidget3264443714__card\",\"stepIcon\":\"SetupWidget3264443714__stepIcon\",\"chevron\":\"SetupWidget3264443714__chevron\",\"chevronDisabled\":\"SetupWidget3264443714__chevronDisabled\",\"inProgressLabel\":\"SetupWidget3264443714__inProgressLabel\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-border-dark-secondary\":\"--wds-color-border-dark-secondary\",\"wds-color-fill-standard-tertiary\":\"--wds-color-fill-standard-tertiary\",\"wds-color-fill-standard-tertiary-hover\":\"--wds-color-fill-standard-tertiary-hover\",\"wsr-color-D60\":\"--wsr-color-D60\",\"wsr-color-D80\":\"--wsr-color-D80\",\"wsr-color-B60\":\"--wsr-color-B60\",\"wds-color-text-standard-primary\":\"--wds-color-text-standard-primary\",\"wds-color-text-disabled\":\"--wds-color-text-disabled\",\"wds-color-text-urgent\":\"--wds-color-text-urgent\",\"wsr-color-D10\":\"--wsr-color-D10\",\"wsr-color-D10-30\":\"--wsr-color-D10-30\",\"wsr-color-O10\":\"--wsr-color-O10\",\"wds-border-radius-400\":\"--wds-border-radius-400\",\"wds-clickable-card-outline-border-color\":\"--wds-clickable-card-outline-border-color\",\"wds-color-border-standard-primary-active\":\"--wds-color-border-standard-primary-active\",\"wsr-color-B10\":\"--wsr-color-B10\",\"wds-color-fill-surface-default\":\"--wds-color-fill-surface-default\"}; \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,6BAA6B;EAAC,KAAK,EAAC,4BAA4B;EAAC,cAAc,EAAC,qCAAqC;EAAC,cAAc,EAAC,qCAAqC;EAAC,MAAM,EAAC,6BAA6B;EAAC,UAAU,EAAC,iCAAiC;EAAC,SAAS,EAAC,gCAAgC;EAAC,iBAAiB,EAAC,wCAAwC;EAAC,iBAAiB,EAAC;AAAwC,CAAC;AACpb,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;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,kCAAkC,EAAC,oCAAoC;EAAC,wCAAwC,EAAC,0CAA0C;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,yBAAyB,EAAC,2BAA2B;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,eAAe,EAAC,iBAAiB;EAAC,kBAAkB,EAAC,oBAAoB;EAAC,eAAe,EAAC,iBAAiB;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,yCAAyC,EAAC,2CAA2C;EAAC,0CAA0C,EAAC,4CAA4C;EAAC,eAAe,EAAC,iBAAiB;EAAC,gCAAgC,EAAC;AAAkC,CAAC","ignoreList":[]}

package/dist/cjs/components/SidePanelModal/SidePanelModal.js

@@ -46,11 +46,11 @@ function _SidePanelModal(props) {
     overflow: 'hidden',
     width
   }), [top, left, width, isPanelLayout, useRelativeSidePanel, inset]);
+  const reservedWidth = isOpen && !isPanelLayout ? _bexCore.SidePanelWidth + inset : 0;
   (0, _react2.useEffect)(() => {
-    return (0, _mobx.reaction)(() => sidePanel.isOpen, sidePanelOpen => {
-      pageState.sidePanelOpen = sidePanelOpen;
-    });
-  }, []);
+    pageState.setSidePanelReservedWidth(state, reservedWidth);
+  }, [state, reservedWidth]);
+  (0, _react2.useEffect)(() => () => pageState.setSidePanelReservedWidth(state, 0), [state]);
   (0, _react2.useEffect)(() => {
     const onGlobalSidePanelOpenSub = onSidePanelOpen == null ? void 0 : onSidePanelOpen(() => {
       state.closeSidePanel();
@@ -96,7 +96,7 @@ function _SidePanelModal(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 92,
+      lineNumber: 91,
       columnNumber: 5
     }
   }, Array.from(sidePanelComponents.entries()).map(([key, ComponentType]) => {
@@ -108,14 +108,14 @@ function _SidePanelModal(props) {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 123,
+        lineNumber: 122,
         columnNumber: 11
       }
     }, /*#__PURE__*/_react2.default.createElement(ComponentType, {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 124,
+        lineNumber: 123,
         columnNumber: 13
       }
     }));

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

@@ -1 +1 @@
-{"version":3,"names":["_mobxReactLite","require","_bexCore","_react","_SlidingModal","_react2","_interopRequireWildcard","_mobx","_SidePanelModalItem","_useBmHarmonyTheme","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_SidePanelModal","props","top","left","state","onSidePanelOpen","closeSidePanel","isPanelLayout","useRelativeSidePanel","useWixPatternsContainer","pageState","usePageContext","sidePanel","sidePanelComponents","isOpen","width","useMemo","SidePanelWidth","isBmHarmonyTheme","useBmHarmonyTheme","inset","SidePanelInset","style","right","undefined","bottom","overflow","useEffect","reaction","sidePanelOpen","onGlobalSidePanelOpenSub","disposers","sidePanelShow","remove","forEach","d","createElement","SlidingModal","dataHook","transitionStatus","transition","status","appendTo","overlay","contentRef","el","focus","modalElement","onExited","setStatus","onEntered","onEntering","onExiting","closedOffset","onRequestClose","close","__self","__source","fileName","lineNumber","columnNumber","Array","from","entries","map","key","ComponentType","SidePanelModalItem","id","SidePanelModal","exports","observer"],"sources":["../../../../src/components/SidePanelModal/SidePanelModal.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite';\nimport { SidePanelInset, SidePanelWidth } from '@wix/bex-core';\nimport { useWixPatternsContainer, usePageContext } from '@wix/bex-core/react';\nimport { SlidingModal } from '../SlidingModal';\nimport React, { useEffect, useMemo } from 'react';\nimport { reaction } from 'mobx';\nimport { SidePanelModalItem } from './SidePanelModalItem';\nimport { SidePanelsState } from '../../state/SidePanelsState';\nimport { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';\n\nexport interface SidePanelModalProps {\n  top: number;\n  left?: number;\n  state: SidePanelsState;\n}\n\nfunction _SidePanelModal(props: SidePanelModalProps) {\n  const { top, left, state } = props;\n  const {\n    onSidePanelOpen,\n    closeSidePanel,\n    isPanelLayout,\n    useRelativeSidePanel,\n  } = useWixPatternsContainer();\n  const pageState = usePageContext();\n\n  const { sidePanel, sidePanelComponents } = state;\n\n  const { isOpen } = sidePanel;\n\n  const width = useMemo(\n    () => (isPanelLayout ? '100%' : SidePanelWidth),\n    [isPanelLayout],\n  );\n\n  const isBmHarmonyTheme = useBmHarmonyTheme();\n  const inset = isBmHarmonyTheme && !isPanelLayout ? SidePanelInset : 0;\n\n  const style = useMemo(\n    () => ({\n      top: top + inset,\n      ...(useRelativeSidePanel\n        ? {\n            right: isPanelLayout ? undefined : inset,\n          }\n        : {\n            left: isPanelLayout\n              ? 0\n              : left != null\n              ? left - SidePanelWidth - inset\n              : undefined,\n          }),\n      bottom: inset,\n      overflow: 'hidden',\n      width,\n    }),\n    [top, left, width, isPanelLayout, useRelativeSidePanel, inset],\n  );\n\n  useEffect(() => {\n    return reaction(\n      () => sidePanel.isOpen,\n      (sidePanelOpen) => {\n        pageState.sidePanelOpen = sidePanelOpen;\n      },\n    );\n  }, []);\n\n  useEffect(() => {\n    const onGlobalSidePanelOpenSub = onSidePanelOpen?.(() => {\n      state.closeSidePanel();\n    });\n\n    const disposers = [\n      reaction(\n        () => sidePanel.isOpen,\n        (sidePanelShow) => {\n          if (sidePanelShow) {\n            closeSidePanel?.();\n          }\n        },\n      ),\n    ];\n\n    return () => {\n      onGlobalSidePanelOpenSub?.remove();\n      disposers.forEach((d) => d?.());\n    };\n  }, []);\n\n  return (\n    <SlidingModal\n      dataHook=\"cairo-side-panel-modal\"\n      transitionStatus={sidePanel.transition.status}\n      style={style}\n      appendTo={isPanelLayout || useRelativeSidePanel ? 'parent' : undefined}\n      overlay={isPanelLayout}\n      contentRef={(el) => {\n        sidePanel.focus.modalElement = el;\n      }}\n      onExited={() => {\n        sidePanel.transition.setStatus('exited');\n      }}\n      onEntered={() => {\n        sidePanel.transition.setStatus('entered');\n      }}\n      onEntering={() => {\n        sidePanel.transition.setStatus('entering');\n      }}\n      onExiting={() => {\n        sidePanel.transition.setStatus('exiting');\n      }}\n      width={SidePanelWidth}\n      closedOffset={inset}\n      inset={inset}\n      isOpen={isOpen}\n      onRequestClose={() => {\n        sidePanel.close();\n      }}\n    >\n      {Array.from(sidePanelComponents.entries()).map(([key, ComponentType]) => {\n        return (\n          <SidePanelModalItem key={key} id={key} width={width} state={state}>\n            <ComponentType />\n          </SidePanelModalItem>\n        );\n      })}\n    </SlidingModal>\n  );\n}\n\nexport const SidePanelModal = observer(_SidePanelModal);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_mobxReactLite","require","_bexCore","_react","_SlidingModal","_react2","_interopRequireWildcard","_mobx","_SidePanelModalItem","_useBmHarmonyTheme","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_SidePanelModal","props","top","left","state","onSidePanelOpen","closeSidePanel","isPanelLayout","useRelativeSidePanel","useWixPatternsContainer","pageState","usePageContext","sidePanel","sidePanelComponents","isOpen","width","useMemo","SidePanelWidth","isBmHarmonyTheme","useBmHarmonyTheme","inset","SidePanelInset","style","right","undefined","bottom","overflow","reservedWidth","useEffect","setSidePanelReservedWidth","onGlobalSidePanelOpenSub","disposers","reaction","sidePanelShow","remove","forEach","d","createElement","SlidingModal","dataHook","transitionStatus","transition","status","appendTo","overlay","contentRef","el","focus","modalElement","onExited","setStatus","onEntered","onEntering","onExiting","closedOffset","onRequestClose","close","__self","__source","fileName","lineNumber","columnNumber","Array","from","entries","map","key","ComponentType","SidePanelModalItem","id","SidePanelModal","exports","observer"],"sources":["../../../../src/components/SidePanelModal/SidePanelModal.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite';\nimport { SidePanelInset, SidePanelWidth } from '@wix/bex-core';\nimport { useWixPatternsContainer, usePageContext } from '@wix/bex-core/react';\nimport { SlidingModal } from '../SlidingModal';\nimport React, { useEffect, useMemo } from 'react';\nimport { reaction } from 'mobx';\nimport { SidePanelModalItem } from './SidePanelModalItem';\nimport { SidePanelsState } from '../../state/SidePanelsState';\nimport { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';\n\nexport interface SidePanelModalProps {\n  top: number;\n  left?: number;\n  state: SidePanelsState;\n}\n\nfunction _SidePanelModal(props: SidePanelModalProps) {\n  const { top, left, state } = props;\n  const {\n    onSidePanelOpen,\n    closeSidePanel,\n    isPanelLayout,\n    useRelativeSidePanel,\n  } = useWixPatternsContainer();\n  const pageState = usePageContext();\n\n  const { sidePanel, sidePanelComponents } = state;\n\n  const { isOpen } = sidePanel;\n\n  const width = useMemo(\n    () => (isPanelLayout ? '100%' : SidePanelWidth),\n    [isPanelLayout],\n  );\n\n  const isBmHarmonyTheme = useBmHarmonyTheme();\n  const inset = isBmHarmonyTheme && !isPanelLayout ? SidePanelInset : 0;\n\n  const style = useMemo(\n    () => ({\n      top: top + inset,\n      ...(useRelativeSidePanel\n        ? {\n            right: isPanelLayout ? undefined : inset,\n          }\n        : {\n            left: isPanelLayout\n              ? 0\n              : left != null\n              ? left - SidePanelWidth - inset\n              : undefined,\n          }),\n      bottom: inset,\n      overflow: 'hidden',\n      width,\n    }),\n    [top, left, width, isPanelLayout, useRelativeSidePanel, inset],\n  );\n\n  const reservedWidth = isOpen && !isPanelLayout ? SidePanelWidth + inset : 0;\n\n  useEffect(() => {\n    pageState.setSidePanelReservedWidth(state, reservedWidth);\n  }, [state, reservedWidth]);\n\n  useEffect(() => () => pageState.setSidePanelReservedWidth(state, 0), [state]);\n\n  useEffect(() => {\n    const onGlobalSidePanelOpenSub = onSidePanelOpen?.(() => {\n      state.closeSidePanel();\n    });\n\n    const disposers = [\n      reaction(\n        () => sidePanel.isOpen,\n        (sidePanelShow) => {\n          if (sidePanelShow) {\n            closeSidePanel?.();\n          }\n        },\n      ),\n    ];\n\n    return () => {\n      onGlobalSidePanelOpenSub?.remove();\n      disposers.forEach((d) => d?.());\n    };\n  }, []);\n\n  return (\n    <SlidingModal\n      dataHook=\"cairo-side-panel-modal\"\n      transitionStatus={sidePanel.transition.status}\n      style={style}\n      appendTo={isPanelLayout || useRelativeSidePanel ? 'parent' : undefined}\n      overlay={isPanelLayout}\n      contentRef={(el) => {\n        sidePanel.focus.modalElement = el;\n      }}\n      onExited={() => {\n        sidePanel.transition.setStatus('exited');\n      }}\n      onEntered={() => {\n        sidePanel.transition.setStatus('entered');\n      }}\n      onEntering={() => {\n        sidePanel.transition.setStatus('entering');\n      }}\n      onExiting={() => {\n        sidePanel.transition.setStatus('exiting');\n      }}\n      width={SidePanelWidth}\n      closedOffset={inset}\n      inset={inset}\n      isOpen={isOpen}\n      onRequestClose={() => {\n        sidePanel.close();\n      }}\n    >\n      {Array.from(sidePanelComponents.entries()).map(([key, ComponentType]) => {\n        return (\n          <SidePanelModalItem key={key} id={key} width={width} state={state}>\n            <ComponentType />\n          </SidePanelModalItem>\n        );\n      })}\n    </SlidingModal>\n  );\n}\n\nexport const SidePanelModal = observer(_SidePanelModal);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/SkeletonCard/SkeletonCard.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_ = "SkeletonCard2751193167";
+var _namespace_ = "SkeletonCard1698790681";
 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": "SkeletonCard2751193167__root",
-  "headerLoading": "SkeletonCard2751193167__headerLoading"
+  "root": "SkeletonCard1698790681__root",
+  "headerLoading": "SkeletonCard1698790681__headerLoading"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/SkeletonCard/SkeletonCard.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/SkeletonCard/SkeletonCard.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"SkeletonCard2751193167\";\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\":\"SkeletonCard2751193167__root\",\"headerLoading\":\"SkeletonCard2751193167__headerLoading\"};\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,wBAAwB;AAC1C,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,8BAA8B;EAAC,eAAe,EAAC;AAAuC,CAAC;AAC7G,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/SkeletonCard/SkeletonCard.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"SkeletonCard1698790681\";\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\":\"SkeletonCard1698790681__root\",\"headerLoading\":\"SkeletonCard1698790681__headerLoading\"};\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,wBAAwB;AAC1C,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,8BAA8B;EAAC,eAAe,EAAC;AAAuC,CAAC;AAC7G,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/SlidingModal/SlidingModal.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_ = "SlidingModal1609958439";
+var _namespace_ = "SlidingModal1192996305";
 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": "SlidingModal1609958439__root"
+  "root": "SlidingModal1192996305__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/SlidingModal/SlidingModal.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/SlidingModal/SlidingModal.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"SlidingModal1609958439\";\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\":\"SlidingModal1609958439__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-side-panel-standard-corner-radius\":\"--wds-side-panel-standard-corner-radius\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,wBAAwB;AAC1C,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;AAA8B,CAAC;AACrD,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;EAAC,uCAAuC,EAAC;AAAyC,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/SlidingModal/SlidingModal.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"SlidingModal1192996305\";\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\":\"SlidingModal1192996305__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-side-panel-standard-corner-radius\":\"--wds-side-panel-standard-corner-radius\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,wBAAwB;AAC1C,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;AAA8B,CAAC;AACrD,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;EAAC,uCAAuC,EAAC;AAAyC,CAAC","ignoreList":[]}

package/dist/cjs/components/TabTotal/TabTotalCounterBadge.js

@@ -21,25 +21,20 @@ function _TabCounterBadge(props) {
     size = defaultSize,
     ...rest
   } = props;
-  const state = (0, _useFilterValueTotalState.useFilterValueTotalState)(props);
   const {
-    totalsCollection: {
-      totalStatus,
-      total,
-      lifecycleState
-    }
-  } = state;
-  return totalStatus === 'success' && lifecycleState === 'result' ? /*#__PURE__*/_react.default.createElement(_designSystem.CounterBadge, (0, _extends2.default)({
+    resolvedTotal
+  } = (0, _useFilterValueTotalState.useFilterValueTotalState)(props);
+  return resolvedTotal != null ? /*#__PURE__*/_react.default.createElement(_designSystem.CounterBadge, (0, _extends2.default)({
     size: size,
-    skin: skin
+    skin: typeof skin === 'function' ? skin(resolvedTotal) : skin
   }, rest, {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 31,
+      lineNumber: 36,
       columnNumber: 5
     }
-  }), total) : null;
+  }), resolvedTotal) : null;
 }
 _TabCounterBadge.initTabTotal = _initTabTotal.initTabTotal;
 const TabTotalCounterBadge = exports.TabTotalCounterBadge = (0, _mobxReactLite.observer)(_TabCounterBadge);

package/dist/cjs/components/TabTotal/TabTotalCounterBadge.js.map

@@ -1 +1 @@
-{"version":3,"names":["_mobxReactLite","require","_designSystem","_react","_interopRequireDefault","_useFilterValueTotalState","_initTabTotal","_useBmHarmonyTheme","_jsxFileName","_TabCounterBadge","props","isHarmonyTheme","useBmHarmonyTheme","defaultSkin","defaultSize","value","skin","size","rest","state","useFilterValueTotalState","totalsCollection","totalStatus","total","lifecycleState","default","createElement","CounterBadge","_extends2","__self","__source","fileName","lineNumber","columnNumber","initTabTotal","TabTotalCounterBadge","exports","observer","displayName"],"sources":["../../../../src/components/TabTotal/TabTotalCounterBadge.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite';\nimport { CounterBadge, CounterBadgeProps } from '@wix/design-system';\nimport React from 'react';\nimport {\n  useFilterValueTotalState,\n  UseFilterValueTotalStateParams,\n} from './useFilterValueTotalState';\nimport { FiltersMap } from '@wix/bex-core';\nimport { initTabTotal } from '../../state/initTabTotal';\nimport { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';\n\nexport interface TabCounterBadgeProps<V, T, F extends FiltersMap>\n  extends UseFilterValueTotalStateParams<V, T, F>,\n    Partial<CounterBadgeProps> {}\n\nfunction _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(\n  props: TabCounterBadgeProps<V, T, F>,\n) {\n  const isHarmonyTheme = useBmHarmonyTheme();\n  const defaultSkin = isHarmonyTheme ? 'general' : 'neutralStandard';\n  const defaultSize = isHarmonyTheme ? 'tiny' : 'small';\n\n  const { value, skin = defaultSkin, size = defaultSize, ...rest } = props;\n  const state = useFilterValueTotalState(props);\n\n  const {\n    totalsCollection: { totalStatus, total, lifecycleState },\n  } = state;\n\n  return totalStatus === 'success' && lifecycleState === 'result' ? (\n    <CounterBadge size={size} skin={skin} {...rest}>\n      {total}\n    </CounterBadge>\n  ) : null;\n}\n\n_TabCounterBadge.initTabTotal = initTabTotal;\nexport const TabTotalCounterBadge = observer(_TabCounterBadge);\nTabTotalCounterBadge.displayName = 'TabTotalCounterBadge';\nTabTotalCounterBadge.initTabTotal = initTabTotal;\n"],"mappings":";;;;;;AAAA,IAAAA,cAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,yBAAA,GAAAJ,OAAA;AAKA,IAAAK,aAAA,GAAAL,OAAA;AACA,IAAAM,kBAAA,GAAAN,OAAA;AAAkE,IAAAO,YAAA;AAMlE,SAASC,gBAAgBA,CACvBC,KAAoC,EACpC;EACA,MAAMC,cAAc,GAAG,IAAAC,oCAAiB,EAAC,CAAC;EAC1C,MAAMC,WAAW,GAAGF,cAAc,GAAG,SAAS,GAAG,iBAAiB;EAClE,MAAMG,WAAW,GAAGH,cAAc,GAAG,MAAM,GAAG,OAAO;EAErD,MAAM;IAAEI,KAAK;IAAEC,IAAI,GAAGH,WAAW;IAAEI,IAAI,GAAGH,WAAW;IAAE,GAAGI;EAAK,CAAC,GAAGR,KAAK;EACxE,MAAMS,KAAK,GAAG,IAAAC,kDAAwB,EAACV,KAAK,CAAC;EAE7C,MAAM;IACJW,gBAAgB,EAAE;MAAEC,WAAW;MAAEC,KAAK;MAAEC;IAAe;EACzD,CAAC,GAAGL,KAAK;EAET,OAAOG,WAAW,KAAK,SAAS,IAAIE,cAAc,KAAK,QAAQ,gBAC7DrB,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAACxB,aAAA,CAAAyB,YAAY,MAAAC,SAAA,CAAAH,OAAA;IAACR,IAAI,EAAEA,IAAK;IAACD,IAAI,EAAEA;EAAK,GAAKE,IAAI;IAAAW,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAvB,YAAA;MAAAwB,UAAA;MAAAC,YAAA;IAAA;EAAA,IAC3CV,KACW,CAAC,GACb,IAAI;AACV;AAEAd,gBAAgB,CAACyB,YAAY,GAAGA,0BAAY;AACrC,MAAMC,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,uBAAQ,EAAC5B,gBAAgB,CAAC;AAC9D0B,oBAAoB,CAACG,WAAW,GAAG,sBAAsB;AACzDH,oBAAoB,CAACD,YAAY,GAAGA,0BAAY","ignoreList":[]}
+{"version":3,"names":["_mobxReactLite","require","_designSystem","_react","_interopRequireDefault","_useFilterValueTotalState","_initTabTotal","_useBmHarmonyTheme","_jsxFileName","_TabCounterBadge","props","isHarmonyTheme","useBmHarmonyTheme","defaultSkin","defaultSize","value","skin","size","rest","resolvedTotal","useFilterValueTotalState","default","createElement","CounterBadge","_extends2","__self","__source","fileName","lineNumber","columnNumber","initTabTotal","TabTotalCounterBadge","exports","observer","displayName"],"sources":["../../../../src/components/TabTotal/TabTotalCounterBadge.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite';\nimport { CounterBadge, CounterBadgeProps } from '@wix/design-system';\nimport React from 'react';\nimport {\n  useFilterValueTotalState,\n  UseFilterValueTotalStateParams,\n} from './useFilterValueTotalState';\nimport { FiltersMap } from '@wix/bex-core';\nimport { initTabTotal } from '../../state/initTabTotal';\nimport { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';\n\nexport interface TabCounterBadgeProps<V, T, F extends FiltersMap>\n  extends UseFilterValueTotalStateParams<V, T, F>,\n    Omit<Partial<CounterBadgeProps>, 'skin'> {\n  /**\n   * Badge skin. Pass a function to pick the skin from the total, for example to\n   * keep a tab neutral while its total is `0`.\n   * @external\n   */\n  readonly skin?:\n    | CounterBadgeProps['skin']\n    | ((total: number) => CounterBadgeProps['skin']);\n}\n\nfunction _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(\n  props: TabCounterBadgeProps<V, T, F>,\n) {\n  const isHarmonyTheme = useBmHarmonyTheme();\n  const defaultSkin = isHarmonyTheme ? 'general' : 'neutralStandard';\n  const defaultSize = isHarmonyTheme ? 'tiny' : 'small';\n\n  const { value, skin = defaultSkin, size = defaultSize, ...rest } = props;\n  const { resolvedTotal } = useFilterValueTotalState(props);\n\n  return resolvedTotal != null ? (\n    <CounterBadge\n      size={size}\n      skin={typeof skin === 'function' ? skin(resolvedTotal) : skin}\n      {...rest}\n    >\n      {resolvedTotal}\n    </CounterBadge>\n  ) : null;\n}\n\n_TabCounterBadge.initTabTotal = initTabTotal;\nexport const TabTotalCounterBadge = observer(_TabCounterBadge);\nTabTotalCounterBadge.displayName = 'TabTotalCounterBadge';\nTabTotalCounterBadge.initTabTotal = initTabTotal;\n"],"mappings":";;;;;;AAAA,IAAAA,cAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,yBAAA,GAAAJ,OAAA;AAKA,IAAAK,aAAA,GAAAL,OAAA;AACA,IAAAM,kBAAA,GAAAN,OAAA;AAAkE,IAAAO,YAAA;AAelE,SAASC,gBAAgBA,CACvBC,KAAoC,EACpC;EACA,MAAMC,cAAc,GAAG,IAAAC,oCAAiB,EAAC,CAAC;EAC1C,MAAMC,WAAW,GAAGF,cAAc,GAAG,SAAS,GAAG,iBAAiB;EAClE,MAAMG,WAAW,GAAGH,cAAc,GAAG,MAAM,GAAG,OAAO;EAErD,MAAM;IAAEI,KAAK;IAAEC,IAAI,GAAGH,WAAW;IAAEI,IAAI,GAAGH,WAAW;IAAE,GAAGI;EAAK,CAAC,GAAGR,KAAK;EACxE,MAAM;IAAES;EAAc,CAAC,GAAG,IAAAC,kDAAwB,EAACV,KAAK,CAAC;EAEzD,OAAOS,aAAa,IAAI,IAAI,gBAC1BhB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACpB,aAAA,CAAAqB,YAAY,MAAAC,SAAA,CAAAH,OAAA;IACXJ,IAAI,EAAEA,IAAK;IACXD,IAAI,EAAE,OAAOA,IAAI,KAAK,UAAU,GAAGA,IAAI,CAACG,aAAa,CAAC,GAAGH;EAAK,GAC1DE,IAAI;IAAAO,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,IAEPV,aACW,CAAC,GACb,IAAI;AACV;AAEAV,gBAAgB,CAACqB,YAAY,GAAGA,0BAAY;AACrC,MAAMC,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,uBAAQ,EAACxB,gBAAgB,CAAC;AAC9DsB,oBAAoB,CAACG,WAAW,GAAG,sBAAsB;AACzDH,oBAAoB,CAACD,YAAY,GAAGA,0BAAY","ignoreList":[]}

package/dist/cjs/components/TabTotal/useFilterValueTotalState.js

@@ -6,6 +6,7 @@ var _FilterContext = require("../FilterContext");
 var _CollectionContext = require("../CollectionContext");
 var _react = require("react");
 var _state = require("../../state");
+var _ToolbarCollectionContext = require("../ToolbarCollectionContext");
 function useFilterValueTotalState({
   value,
   ...params
@@ -18,12 +19,18 @@ function useFilterValueTotalState({
     collection,
     ...params
   }));
+  const table = (0, _react.useContext)(_ToolbarCollectionContext.ToolbarCollectionContext);
+  const key = value == null ? undefined : filter.itemKey(value);
   (0, _react.useEffect)(() => state.init(), []);
   (0, _react.useEffect)(() => {
     if (value !== state.value) {
       state.refresh(value);
     }
   }, [value]);
+  (0, _react.useEffect)(() => {
+    var _table$tabs;
+    return key != null ? table == null || (_table$tabs = table.tabs) == null ? void 0 : _table$tabs.registerTabTotal(filter, key, state) : undefined;
+  }, [table, key]);
   return state;
 }
 //# sourceMappingURL=useFilterValueTotalState.js.map