@wix/patterns 1.422.0 → 1.424.0

package/dist/cjs/components/SetupWidget/SetupStepIcon.js

@@ -12,15 +12,21 @@ var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cj
  * green check when completed, muted dot when disabled, blue dot otherwise.
  */
 const SetupStepIcon = ({
-  status
+  status,
+  /**
+   * Top nudge that centers the 18px icon on a single line of text. Defaults to
+   * the desktop value; the mobile card centers the icon via its own wrapper and
+   * passes "0px" to drop the nudge.
+   */
+  marginTop = '3px'
 }) => {
   if (status === 'completed') {
     return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-      marginTop: "3px",
+      marginTop: marginTop,
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 17,
+        lineNumber: 24,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ConfirmSmall, {
@@ -30,18 +36,18 @@ const SetupStepIcon = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 18,
+        lineNumber: 25,
         columnNumber: 9
       }
     }));
   }
   const color = status === 'disabled' ? 'var(--wsr-color-D40)' : 'var(--wsr-color-B10)';
   return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    marginTop: "3px",
+    marginTop: marginTop,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 27,
+      lineNumber: 34,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.CircleSmallFilledSmall, {
@@ -51,7 +57,7 @@ const SetupStepIcon = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 28,
+      lineNumber: 35,
       columnNumber: 7
     }
   }));

package/dist/cjs/components/SetupWidget/SetupStepIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_wixUiIconsCommon","_jsxFileName","SetupStepIcon","status","default","createElement","Box","marginTop","__self","__source","fileName","lineNumber","columnNumber","ConfirmSmall","width","height","color","CircleSmallFilledSmall","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@wix/design-system';\nimport { ConfirmSmall, CircleSmallFilledSmall } from '@wix/wix-ui-icons-common';\nimport { SetupWidgetStepStatus } from '@wix/bex-core';\n\n/**\n * Leading status indicator for a step. Mirrors the existing Setup widget:\n * green check when completed, muted dot when disabled, blue dot otherwise.\n */\nexport const SetupStepIcon = ({\n  status,\n}: {\n  status: SetupWidgetStepStatus;\n}) => {\n  if (status === 'completed') {\n    return (\n      <Box marginTop=\"3px\">\n        <ConfirmSmall width=\"18px\" height=\"18px\" color=\"var(--wsr-color-G20)\" />\n      </Box>\n    );\n  }\n\n  const color =\n    status === 'disabled' ? 'var(--wsr-color-D40)' : 'var(--wsr-color-B10)';\n\n  return (\n    <Box marginTop=\"3px\">\n      <CircleSmallFilledSmall width=\"18px\" height=\"18px\" color={color} />\n    </Box>\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAAgF,IAAAG,YAAA;AAGhF;AACA;AACA;AACA;AACO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC;AAGF,CAAC,KAAK;EACJ,IAAIA,MAAM,KAAK,WAAW,EAAE;IAC1B,oBACEP,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACN,aAAA,CAAAO,GAAG;MAACC,SAAS,EAAC,KAAK;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAT,YAAA;QAAAU,UAAA;QAAAC,YAAA;MAAA;IAAA,gBAClBhB,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACL,iBAAA,CAAAa,YAAY;MAACC,KAAK,EAAC,MAAM;MAACC,MAAM,EAAC,MAAM;MAACC,KAAK,EAAC,sBAAsB;MAAAR,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAT,YAAA;QAAAU,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CACpE,CAAC;EAEV;EAEA,MAAMI,KAAK,GACTb,MAAM,KAAK,UAAU,GAAG,sBAAsB,GAAG,sBAAsB;EAEzE,oBACEP,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACN,aAAA,CAAAO,GAAG;IAACC,SAAS,EAAC,KAAK;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAT,YAAA;MAAAU,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAClBhB,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACL,iBAAA,CAAAiB,sBAAsB;IAACH,KAAK,EAAC,MAAM;IAACC,MAAM,EAAC,MAAM;IAACC,KAAK,EAAEA,KAAM;IAAAR,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAT,YAAA;MAAAU,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAC/D,CAAC;AAEV,CAAC;AAACM,OAAA,CAAAhB,aAAA,GAAAA,aAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_wixUiIconsCommon","_jsxFileName","SetupStepIcon","status","marginTop","default","createElement","Box","__self","__source","fileName","lineNumber","columnNumber","ConfirmSmall","width","height","color","CircleSmallFilledSmall","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@wix/design-system';\nimport { ConfirmSmall, CircleSmallFilledSmall } from '@wix/wix-ui-icons-common';\nimport { SetupWidgetStepStatus } from '@wix/bex-core';\n\n/**\n * Leading status indicator for a step. Mirrors the existing Setup widget:\n * green check when completed, muted dot when disabled, blue dot otherwise.\n */\nexport const SetupStepIcon = ({\n  status,\n  /**\n   * Top nudge that centers the 18px icon on a single line of text. Defaults to\n   * the desktop value; the mobile card centers the icon via its own wrapper and\n   * passes \"0px\" to drop the nudge.\n   */\n  marginTop = '3px',\n}: {\n  status: SetupWidgetStepStatus;\n  marginTop?: string;\n}) => {\n  if (status === 'completed') {\n    return (\n      <Box marginTop={marginTop}>\n        <ConfirmSmall width=\"18px\" height=\"18px\" color=\"var(--wsr-color-G20)\" />\n      </Box>\n    );\n  }\n\n  const color =\n    status === 'disabled' ? 'var(--wsr-color-D40)' : 'var(--wsr-color-B10)';\n\n  return (\n    <Box marginTop={marginTop}>\n      <CircleSmallFilledSmall width=\"18px\" height=\"18px\" color={color} />\n    </Box>\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAAgF,IAAAG,YAAA;AAGhF;AACA;AACA;AACA;AACO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,MAAM;EACN;AACF;AACA;AACA;AACA;EACEC,SAAS,GAAG;AAId,CAAC,KAAK;EACJ,IAAID,MAAM,KAAK,WAAW,EAAE;IAC1B,oBACEP,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACP,aAAA,CAAAQ,GAAG;MAACH,SAAS,EAAEA,SAAU;MAAAI,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAT,YAAA;QAAAU,UAAA;QAAAC,YAAA;MAAA;IAAA,gBACxBhB,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACN,iBAAA,CAAAa,YAAY;MAACC,KAAK,EAAC,MAAM;MAACC,MAAM,EAAC,MAAM;MAACC,KAAK,EAAC,sBAAsB;MAAAR,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAT,YAAA;QAAAU,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CACpE,CAAC;EAEV;EAEA,MAAMI,KAAK,GACTb,MAAM,KAAK,UAAU,GAAG,sBAAsB,GAAG,sBAAsB;EAEzE,oBACEP,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACP,aAAA,CAAAQ,GAAG;IAACH,SAAS,EAAEA,SAAU;IAAAI,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAT,YAAA;MAAAU,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACxBhB,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACN,iBAAA,CAAAiB,sBAAsB;IAACH,KAAK,EAAC,MAAM;IAACC,MAAM,EAAC,MAAM;IAACC,KAAK,EAAEA,KAAM;IAAAR,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAT,YAAA;MAAAU,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAC/D,CAAC;AAEV,CAAC;AAACM,OAAA,CAAAhB,aAAA,GAAAA,aAAA","ignoreList":[]}

package/dist/cjs/components/SetupWidget/SetupWidget.js

@@ -169,6 +169,7 @@ const _SetupWidget = ({
   const list = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     direction: "vertical",
     gap: isMobile ? 'SP3' : 'SP1',
+    width: "100%",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
@@ -221,6 +222,7 @@ const _SetupWidget = ({
       dataHook: dataHook,
       direction: "vertical",
       gap: "SP3",
+      width: "100%",
       __self: void 0,
       __source: {
         fileName: _jsxFileName,

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_designSystem","_react2","_CardContainer","_useIsMobile","_useIntersectionObserver","_SetupWidgetHeader","_SetupStepRow","_SetupStepCard","_SetupStepGroup","_AllCompleteState","_SetupWidgetSkeleton","_jsxFileName","StepViewTracker","stepId","onView","children","elementRef","useIntersectionObserver","default","createElement","ref","__self","__source","fileName","lineNumber","columnNumber","_SetupWidget","state","renderStepContent","onStepClick","onCompletedStepClick","onStepView","onAllCompleteClick","renderError","dataHook","translate","t","useWixPatternsContainer","isMobile","useIsMobile","status","_loadTask","activateStep","step","expansionMode","_toggleStep","id","activateChild","child","renderLeaf","isChild","expanded","_expandedStepId","onActivate","isFocused","_focusedStepId","SetupStepCard","key","isPrimary","SetupStepRow","_isAllComplete","AllCompleteState","onCtaClick","SetupWidgetSkeleton","_state$_loadTask$erro","Fragment","retry","_retry","error","errorStatus","header","SetupWidgetHeader","title","_title","completedCount","_completedCount","totalCount","_totalCount","progressPercentage","_progressPercentage","list","Box","direction","gap","steps","map","_step$steps","node","length","SetupStepGroup","_primaryStepId","onToggle","renderChild","body","CardContainer","errorState","subtitle","action","text","onClick","padding","SetupWidget","exports","observer"],"sources":["../../../../src/components/SetupWidget/SetupWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Box } from '@wix/design-system';\nimport { SetupWidgetState, SetupWidgetStep } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { CardContainer } from '../CardContainer';\nimport { useIsMobile } from '../../hooks/useIsMobile';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { SetupWidgetHeader } from './SetupWidgetHeader';\nimport { SetupStepRow } from './SetupStepRow';\nimport { SetupStepCard } from './SetupStepCard';\nimport { SetupStepGroup } from './SetupStepGroup';\nimport { AllCompleteState } from './AllCompleteState';\nimport { SetupWidgetSkeleton } from './SetupWidgetSkeleton';\n\nexport interface SetupWidgetProps {\n  /**\n   * A Setup widget state instance created with `useSetupWidget`. The widget\n   * owns loading / error / refetch; the state exposes the steps and a public\n   * API to change a step's status.\n   */\n  state: SetupWidgetState;\n  /**\n   * Inline-expansion content for a step, supplied at render time (the data does\n   * not carry it). Returned for the currently-expanded inline step.\n   */\n  renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;\n  /** Fired when a `navigate` step (or its CTA) is activated. */\n  onStepClick?: (step: SetupWidgetStep) => void;\n  /**\n   * Fired when a *completed* step's CTA (or row) is activated — a distinct\n   * action from `onStepClick` (mirrors `onCompletedCtaClick` in dashboard-setup,\n   * which targets the step's separate `completedCta`).\n   */\n  onCompletedStepClick?: (step: SetupWidgetStep) => void;\n  /**\n   * Fired once when a step (or group) scrolls into view — for the consumer to\n   * report view telemetry (BI/dealer). The widget itself stays\n   * telemetry-agnostic. Click telemetry hooks into `onStepClick` /\n   * `onCompletedStepClick`.\n   */\n  onStepView?: (step: SetupWidgetStep) => void;\n  /** Fired when the \"all complete\" celebratory CTA is clicked. */\n  onAllCompleteClick?: () => void;\n  /**\n   * Replaces the default error UI when the initial load fails. Receives a\n   * `retry` callback (re-runs the load) and the thrown `error`. When omitted, a\n   * standard error card with a \"Try again\" retry is shown.\n   */\n  renderError?: (params: {\n    retry: () => void;\n    error: unknown;\n  }) => React.ReactNode;\n  /** Applies a data-hook attribute for tests. */\n  dataHook?: string;\n}\n\n// Fires `onView` once when the wrapped step scrolls into view. Only mounted\n// when the consumer passes `onStepView`, so view tracking adds no DOM/observer\n// overhead otherwise.\nconst StepViewTracker = ({\n  stepId,\n  onView,\n  children,\n}: {\n  stepId: string;\n  onView: () => void;\n  children: React.ReactNode;\n}) => {\n  const { elementRef } = useIntersectionObserver(onView);\n  return (\n    <div\n      ref={elementRef as React.RefObject<HTMLDivElement>}\n      data-hook={`setup-step-view-${stepId}`}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst _SetupWidget = ({\n  state,\n  renderStepContent,\n  onStepClick,\n  onCompletedStepClick,\n  onStepView,\n  onAllCompleteClick,\n  renderError,\n  dataHook,\n}: SetupWidgetProps) => {\n  const { translate: t } = useWixPatternsContainer();\n  const isMobile = useIsMobile();\n  const { status } = state._loadTask.status;\n\n  const activateStep = (step: SetupWidgetStep) => {\n    // Completed steps fire their own action (never expand) — distinct from the\n    // active/navigate `onStepClick`.\n    if (step.status === 'completed') {\n      onCompletedStepClick?.(step);\n      return;\n    }\n    if (step.expansionMode === 'inline') {\n      state._toggleStep(step.id);\n    } else {\n      onStepClick?.(step);\n    }\n  };\n\n  // Children of an aggregated group are leaf steps — they never toggle/expand;\n  // completed children fire the completed action, the rest navigate.\n  const activateChild = (child: SetupWidgetStep) => {\n    if (child.status === 'completed') {\n      onCompletedStepClick?.(child);\n    } else {\n      onStepClick?.(child);\n    }\n  };\n\n  const renderLeaf = (step: SetupWidgetStep, isChild = false) => {\n    const expanded =\n      !isChild &&\n      step.expansionMode === 'inline' &&\n      state._expandedStepId === step.id;\n    const onActivate = () =>\n      isChild ? activateChild(step) : activateStep(step);\n\n    // A single step is focused/highlighted at a time — the expanded step when\n    // one is open, otherwise the primary. (Highlighting `primary || expanded`\n    // would mark two rows once the user opens a non-primary inline step.)\n    const isFocused = !isChild && step.id === state._focusedStepId;\n\n    return isMobile ? (\n      <SetupStepCard\n        key={step.id}\n        step={step}\n        isPrimary={isFocused}\n        expanded={expanded}\n        onActivate={onActivate}\n        renderStepContent={renderStepContent}\n      />\n    ) : (\n      <SetupStepRow\n        key={step.id}\n        step={step}\n        isFocused={isFocused}\n        expanded={expanded}\n        onActivate={onActivate}\n        renderStepContent={renderStepContent}\n      />\n    );\n  };\n\n  // All-complete is a distinct success surface with its own card.\n  if (status === 'success' && state._isAllComplete) {\n    return (\n      <AllCompleteState dataHook={dataHook} onCtaClick={onAllCompleteClick} />\n    );\n  }\n\n  // Built-in loading skeleton, shaped like the widget (desktop card / mobile\n  // bare) so there's no layout jump when data resolves.\n  if (status === 'idle' || status === 'loading') {\n    return <SetupWidgetSkeleton isMobile={isMobile} dataHook={dataHook} />;\n  }\n\n  // Consumer-supplied error UI fully replaces the default error card.\n  if (status === 'error' && renderError) {\n    return (\n      <>\n        {renderError({\n          retry: () => state._retry(),\n          error: state._loadTask.errorStatus?.error,\n        })}\n      </>\n    );\n  }\n\n  const header = (\n    <SetupWidgetHeader\n      title={state._title}\n      completedCount={state._completedCount}\n      totalCount={state._totalCount}\n      progressPercentage={state._progressPercentage}\n      isMobile={isMobile}\n    />\n  );\n\n  const list = (\n    <Box direction=\"vertical\" gap={isMobile ? 'SP3' : 'SP1'}>\n      {state.steps.map((step) => {\n        const node = step.steps?.length ? (\n          <SetupStepGroup\n            step={step}\n            isMobile={isMobile}\n            expanded={state._expandedStepId === step.id}\n            isPrimary={step.id === state._primaryStepId}\n            onToggle={() => state._toggleStep(step.id)}\n            renderChild={(child) => renderLeaf(child, true)}\n          />\n        ) : (\n          renderLeaf(step)\n        );\n\n        return onStepView ? (\n          <StepViewTracker\n            key={step.id}\n            stepId={step.id}\n            onView={() => onStepView(step)}\n          >\n            {node}\n          </StepViewTracker>\n        ) : (\n          <React.Fragment key={step.id}>{node}</React.Fragment>\n        );\n      })}\n    </Box>\n  );\n\n  const body = (\n    <>\n      {header}\n      {list}\n    </>\n  );\n\n  // Mobile success renders bare — no outer card (matches the mobile design;\n  // the consumer composes the surrounding page). Loading / error still flow\n  // through CardContainer so the widget owns those states everywhere.\n  if (isMobile && status === 'success') {\n    return (\n      <Box dataHook={dataHook} direction=\"vertical\" gap=\"SP3\">\n        {body}\n      </Box>\n    );\n  }\n\n  return (\n    <CardContainer\n      dataHook={dataHook}\n      status={status}\n      errorState={{\n        dataHook: 'error-state',\n        title: t('cairo.setupWidget.error.title'),\n        subtitle: t('cairo.setupWidget.error.subtitle'),\n        action: {\n          text: t('cairo.setupWidget.error.cta'),\n          onClick: () => state._retry(),\n        },\n      }}\n    >\n      <Box direction=\"vertical\" padding=\"SP6\">\n        {body}\n      </Box>\n    </CardContainer>\n  );\n};\n\nexport const SetupWidget = observer(_SetupWidget);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_designSystem","_react2","_CardContainer","_useIsMobile","_useIntersectionObserver","_SetupWidgetHeader","_SetupStepRow","_SetupStepCard","_SetupStepGroup","_AllCompleteState","_SetupWidgetSkeleton","_jsxFileName","StepViewTracker","stepId","onView","children","elementRef","useIntersectionObserver","default","createElement","ref","__self","__source","fileName","lineNumber","columnNumber","_SetupWidget","state","renderStepContent","onStepClick","onCompletedStepClick","onStepView","onAllCompleteClick","renderError","dataHook","translate","t","useWixPatternsContainer","isMobile","useIsMobile","status","_loadTask","activateStep","step","expansionMode","_toggleStep","id","activateChild","child","renderLeaf","isChild","expanded","_expandedStepId","onActivate","isFocused","_focusedStepId","SetupStepCard","key","isPrimary","SetupStepRow","_isAllComplete","AllCompleteState","onCtaClick","SetupWidgetSkeleton","_state$_loadTask$erro","Fragment","retry","_retry","error","errorStatus","header","SetupWidgetHeader","title","_title","completedCount","_completedCount","totalCount","_totalCount","progressPercentage","_progressPercentage","list","Box","direction","gap","width","steps","map","_step$steps","node","length","SetupStepGroup","_primaryStepId","onToggle","renderChild","body","CardContainer","errorState","subtitle","action","text","onClick","padding","SetupWidget","exports","observer"],"sources":["../../../../src/components/SetupWidget/SetupWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Box } from '@wix/design-system';\nimport { SetupWidgetState, SetupWidgetStep } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { CardContainer } from '../CardContainer';\nimport { useIsMobile } from '../../hooks/useIsMobile';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { SetupWidgetHeader } from './SetupWidgetHeader';\nimport { SetupStepRow } from './SetupStepRow';\nimport { SetupStepCard } from './SetupStepCard';\nimport { SetupStepGroup } from './SetupStepGroup';\nimport { AllCompleteState } from './AllCompleteState';\nimport { SetupWidgetSkeleton } from './SetupWidgetSkeleton';\n\nexport interface SetupWidgetProps {\n  /**\n   * A Setup widget state instance created with `useSetupWidget`. The widget\n   * owns loading / error / refetch; the state exposes the steps and a public\n   * API to change a step's status.\n   */\n  state: SetupWidgetState;\n  /**\n   * Inline-expansion content for a step, supplied at render time (the data does\n   * not carry it). Returned for the currently-expanded inline step.\n   */\n  renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;\n  /** Fired when a `navigate` step (or its CTA) is activated. */\n  onStepClick?: (step: SetupWidgetStep) => void;\n  /**\n   * Fired when a *completed* step's CTA (or row) is activated — a distinct\n   * action from `onStepClick` (mirrors `onCompletedCtaClick` in dashboard-setup,\n   * which targets the step's separate `completedCta`).\n   */\n  onCompletedStepClick?: (step: SetupWidgetStep) => void;\n  /**\n   * Fired once when a step (or group) scrolls into view — for the consumer to\n   * report view telemetry (BI/dealer). The widget itself stays\n   * telemetry-agnostic. Click telemetry hooks into `onStepClick` /\n   * `onCompletedStepClick`.\n   */\n  onStepView?: (step: SetupWidgetStep) => void;\n  /** Fired when the \"all complete\" celebratory CTA is clicked. */\n  onAllCompleteClick?: () => void;\n  /**\n   * Replaces the default error UI when the initial load fails. Receives a\n   * `retry` callback (re-runs the load) and the thrown `error`. When omitted, a\n   * standard error card with a \"Try again\" retry is shown.\n   */\n  renderError?: (params: {\n    retry: () => void;\n    error: unknown;\n  }) => React.ReactNode;\n  /** Applies a data-hook attribute for tests. */\n  dataHook?: string;\n}\n\n// Fires `onView` once when the wrapped step scrolls into view. Only mounted\n// when the consumer passes `onStepView`, so view tracking adds no DOM/observer\n// overhead otherwise.\nconst StepViewTracker = ({\n  stepId,\n  onView,\n  children,\n}: {\n  stepId: string;\n  onView: () => void;\n  children: React.ReactNode;\n}) => {\n  const { elementRef } = useIntersectionObserver(onView);\n  return (\n    <div\n      ref={elementRef as React.RefObject<HTMLDivElement>}\n      data-hook={`setup-step-view-${stepId}`}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst _SetupWidget = ({\n  state,\n  renderStepContent,\n  onStepClick,\n  onCompletedStepClick,\n  onStepView,\n  onAllCompleteClick,\n  renderError,\n  dataHook,\n}: SetupWidgetProps) => {\n  const { translate: t } = useWixPatternsContainer();\n  const isMobile = useIsMobile();\n  const { status } = state._loadTask.status;\n\n  const activateStep = (step: SetupWidgetStep) => {\n    // Completed steps fire their own action (never expand) — distinct from the\n    // active/navigate `onStepClick`.\n    if (step.status === 'completed') {\n      onCompletedStepClick?.(step);\n      return;\n    }\n    if (step.expansionMode === 'inline') {\n      state._toggleStep(step.id);\n    } else {\n      onStepClick?.(step);\n    }\n  };\n\n  // Children of an aggregated group are leaf steps — they never toggle/expand;\n  // completed children fire the completed action, the rest navigate.\n  const activateChild = (child: SetupWidgetStep) => {\n    if (child.status === 'completed') {\n      onCompletedStepClick?.(child);\n    } else {\n      onStepClick?.(child);\n    }\n  };\n\n  const renderLeaf = (step: SetupWidgetStep, isChild = false) => {\n    const expanded =\n      !isChild &&\n      step.expansionMode === 'inline' &&\n      state._expandedStepId === step.id;\n    const onActivate = () =>\n      isChild ? activateChild(step) : activateStep(step);\n\n    // A single step is focused/highlighted at a time — the expanded step when\n    // one is open, otherwise the primary. (Highlighting `primary || expanded`\n    // would mark two rows once the user opens a non-primary inline step.)\n    const isFocused = !isChild && step.id === state._focusedStepId;\n\n    return isMobile ? (\n      <SetupStepCard\n        key={step.id}\n        step={step}\n        isPrimary={isFocused}\n        expanded={expanded}\n        onActivate={onActivate}\n        renderStepContent={renderStepContent}\n      />\n    ) : (\n      <SetupStepRow\n        key={step.id}\n        step={step}\n        isFocused={isFocused}\n        expanded={expanded}\n        onActivate={onActivate}\n        renderStepContent={renderStepContent}\n      />\n    );\n  };\n\n  // All-complete is a distinct success surface with its own card.\n  if (status === 'success' && state._isAllComplete) {\n    return (\n      <AllCompleteState dataHook={dataHook} onCtaClick={onAllCompleteClick} />\n    );\n  }\n\n  // Built-in loading skeleton, shaped like the widget (desktop card / mobile\n  // bare) so there's no layout jump when data resolves.\n  if (status === 'idle' || status === 'loading') {\n    return <SetupWidgetSkeleton isMobile={isMobile} dataHook={dataHook} />;\n  }\n\n  // Consumer-supplied error UI fully replaces the default error card.\n  if (status === 'error' && renderError) {\n    return (\n      <>\n        {renderError({\n          retry: () => state._retry(),\n          error: state._loadTask.errorStatus?.error,\n        })}\n      </>\n    );\n  }\n\n  const header = (\n    <SetupWidgetHeader\n      title={state._title}\n      completedCount={state._completedCount}\n      totalCount={state._totalCount}\n      progressPercentage={state._progressPercentage}\n      isMobile={isMobile}\n    />\n  );\n\n  const list = (\n    <Box direction=\"vertical\" gap={isMobile ? 'SP3' : 'SP1'} width=\"100%\">\n      {state.steps.map((step) => {\n        const node = step.steps?.length ? (\n          <SetupStepGroup\n            step={step}\n            isMobile={isMobile}\n            expanded={state._expandedStepId === step.id}\n            isPrimary={step.id === state._primaryStepId}\n            onToggle={() => state._toggleStep(step.id)}\n            renderChild={(child) => renderLeaf(child, true)}\n          />\n        ) : (\n          renderLeaf(step)\n        );\n\n        return onStepView ? (\n          <StepViewTracker\n            key={step.id}\n            stepId={step.id}\n            onView={() => onStepView(step)}\n          >\n            {node}\n          </StepViewTracker>\n        ) : (\n          <React.Fragment key={step.id}>{node}</React.Fragment>\n        );\n      })}\n    </Box>\n  );\n\n  const body = (\n    <>\n      {header}\n      {list}\n    </>\n  );\n\n  // Mobile success renders bare — no outer card (matches the mobile design;\n  // the consumer composes the surrounding page). Loading / error still flow\n  // through CardContainer so the widget owns those states everywhere.\n  if (isMobile && status === 'success') {\n    return (\n      <Box dataHook={dataHook} direction=\"vertical\" gap=\"SP3\" width=\"100%\">\n        {body}\n      </Box>\n    );\n  }\n\n  return (\n    <CardContainer\n      dataHook={dataHook}\n      status={status}\n      errorState={{\n        dataHook: 'error-state',\n        title: t('cairo.setupWidget.error.title'),\n        subtitle: t('cairo.setupWidget.error.subtitle'),\n        action: {\n          text: t('cairo.setupWidget.error.cta'),\n          onClick: () => state._retry(),\n        },\n      }}\n    >\n      <Box direction=\"vertical\" padding=\"SP6\">\n        {body}\n      </Box>\n    </CardContainer>\n  );\n};\n\nexport const SetupWidget = observer(_SetupWidget);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAL,OAAA;AACA,IAAAM,wBAAA,GAAAN,OAAA;AACA,IAAAO,kBAAA,GAAAP,OAAA;AACA,IAAAQ,aAAA,GAAAR,OAAA;AACA,IAAAS,cAAA,GAAAT,OAAA;AACA,IAAAU,eAAA,GAAAV,OAAA;AACA,IAAAW,iBAAA,GAAAX,OAAA;AACA,IAAAY,oBAAA,GAAAZ,OAAA;AAA4D,IAAAa,YAAA;AA4C5D;AACA;AACA;AACA,MAAMC,eAAe,GAAGA,CAAC;EACvBC,MAAM;EACNC,MAAM;EACNC;AAKF,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAW,CAAC,GAAG,IAAAC,gDAAuB,EAACH,MAAM,CAAC;EACtD,oBACElB,MAAA,CAAAsB,OAAA,CAAAC,aAAA;IACEC,GAAG,EAAEJ,UAA8C;IACnD,aAAW,mBAAmBH,MAAM,EAAG;IAAAQ,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAZ,YAAA;MAAAa,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEtCV,QACE,CAAC;AAEV,CAAC;AAED,MAAMW,YAAY,GAAGA,CAAC;EACpBC,KAAK;EACLC,iBAAiB;EACjBC,WAAW;EACXC,oBAAoB;EACpBC,UAAU;EACVC,kBAAkB;EAClBC,WAAW;EACXC;AACgB,CAAC,KAAK;EACtB,MAAM;IAAEC,SAAS,EAAEC;EAAE,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAClD,MAAMC,QAAQ,GAAG,IAAAC,wBAAW,EAAC,CAAC;EAC9B,MAAM;IAAEC;EAAO,CAAC,GAAGb,KAAK,CAACc,SAAS,CAACD,MAAM;EAEzC,MAAME,YAAY,GAAIC,IAAqB,IAAK;IAC9C;IACA;IACA,IAAIA,IAAI,CAACH,MAAM,KAAK,WAAW,EAAE;MAC/BV,oBAAoB,YAApBA,oBAAoB,CAAGa,IAAI,CAAC;MAC5B;IACF;IACA,IAAIA,IAAI,CAACC,aAAa,KAAK,QAAQ,EAAE;MACnCjB,KAAK,CAACkB,WAAW,CAACF,IAAI,CAACG,EAAE,CAAC;IAC5B,CAAC,MAAM;MACLjB,WAAW,YAAXA,WAAW,CAAGc,IAAI,CAAC;IACrB;EACF,CAAC;;EAED;EACA;EACA,MAAMI,aAAa,GAAIC,KAAsB,IAAK;IAChD,IAAIA,KAAK,CAACR,MAAM,KAAK,WAAW,EAAE;MAChCV,oBAAoB,YAApBA,oBAAoB,CAAGkB,KAAK,CAAC;IAC/B,CAAC,MAAM;MACLnB,WAAW,YAAXA,WAAW,CAAGmB,KAAK,CAAC;IACtB;EACF,CAAC;EAED,MAAMC,UAAU,GAAGA,CAACN,IAAqB,EAAEO,OAAO,GAAG,KAAK,KAAK;IAC7D,MAAMC,QAAQ,GACZ,CAACD,OAAO,IACRP,IAAI,CAACC,aAAa,KAAK,QAAQ,IAC/BjB,KAAK,CAACyB,eAAe,KAAKT,IAAI,CAACG,EAAE;IACnC,MAAMO,UAAU,GAAGA,CAAA,KACjBH,OAAO,GAAGH,aAAa,CAACJ,IAAI,CAAC,GAAGD,YAAY,CAACC,IAAI,CAAC;;IAEpD;IACA;IACA;IACA,MAAMW,SAAS,GAAG,CAACJ,OAAO,IAAIP,IAAI,CAACG,EAAE,KAAKnB,KAAK,CAAC4B,cAAc;IAE9D,OAAOjB,QAAQ,gBACb1C,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAACZ,cAAA,CAAAiD,aAAa;MACZC,GAAG,EAAEd,IAAI,CAACG,EAAG;MACbH,IAAI,EAAEA,IAAK;MACXe,SAAS,EAAEJ,SAAU;MACrBH,QAAQ,EAAEA,QAAS;MACnBE,UAAU,EAAEA,UAAW;MACvBzB,iBAAiB,EAAEA,iBAAkB;MAAAP,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAZ,YAAA;QAAAa,UAAA;QAAAC,YAAA;MAAA;IAAA,CACtC,CAAC,gBAEF7B,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAqD,YAAY;MACXF,GAAG,EAAEd,IAAI,CAACG,EAAG;MACbH,IAAI,EAAEA,IAAK;MACXW,SAAS,EAAEA,SAAU;MACrBH,QAAQ,EAAEA,QAAS;MACnBE,UAAU,EAAEA,UAAW;MACvBzB,iBAAiB,EAAEA,iBAAkB;MAAAP,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAZ,YAAA;QAAAa,UAAA;QAAAC,YAAA;MAAA;IAAA,CACtC,CACF;EACH,CAAC;;EAED;EACA,IAAIe,MAAM,KAAK,SAAS,IAAIb,KAAK,CAACiC,cAAc,EAAE;IAChD,oBACEhE,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAACV,iBAAA,CAAAoD,gBAAgB;MAAC3B,QAAQ,EAAEA,QAAS;MAAC4B,UAAU,EAAE9B,kBAAmB;MAAAX,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAZ,YAAA;QAAAa,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CAAC;EAE5E;;EAEA;EACA;EACA,IAAIe,MAAM,KAAK,MAAM,IAAIA,MAAM,KAAK,SAAS,EAAE;IAC7C,oBAAO5C,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAACT,oBAAA,CAAAqD,mBAAmB;MAACzB,QAAQ,EAAEA,QAAS;MAACJ,QAAQ,EAAEA,QAAS;MAAAb,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAZ,YAAA;QAAAa,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CAAC;EACxE;;EAEA;EACA,IAAIe,MAAM,KAAK,OAAO,IAAIP,WAAW,EAAE;IAAA,IAAA+B,qBAAA;IACrC,oBACEpE,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAAAvB,MAAA,CAAAsB,OAAA,CAAA+C,QAAA,QACGhC,WAAW,CAAC;MACXiC,KAAK,EAAEA,CAAA,KAAMvC,KAAK,CAACwC,MAAM,CAAC,CAAC;MAC3BC,KAAK,GAAAJ,qBAAA,GAAErC,KAAK,CAACc,SAAS,CAAC4B,WAAW,qBAA3BL,qBAAA,CAA6BI;IACtC,CAAC,CACD,CAAC;EAEP;EAEA,MAAME,MAAM,gBACV1E,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAACd,kBAAA,CAAAkE,iBAAiB;IAChBC,KAAK,EAAE7C,KAAK,CAAC8C,MAAO;IACpBC,cAAc,EAAE/C,KAAK,CAACgD,eAAgB;IACtCC,UAAU,EAAEjD,KAAK,CAACkD,WAAY;IAC9BC,kBAAkB,EAAEnD,KAAK,CAACoD,mBAAoB;IAC9CzC,QAAQ,EAAEA,QAAS;IAAAjB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAZ,YAAA;MAAAa,UAAA;MAAAC,YAAA;IAAA;EAAA,CACpB,CACF;EAED,MAAMuD,IAAI,gBACRpF,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAACnB,aAAA,CAAAiF,GAAG;IAACC,SAAS,EAAC,UAAU;IAACC,GAAG,EAAE7C,QAAQ,GAAG,KAAK,GAAG,KAAM;IAAC8C,KAAK,EAAC,MAAM;IAAA/D,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAZ,YAAA;MAAAa,UAAA;MAAAC,YAAA;IAAA;EAAA,GAClEE,KAAK,CAAC0D,KAAK,CAACC,GAAG,CAAE3C,IAAI,IAAK;IAAA,IAAA4C,WAAA;IACzB,MAAMC,IAAI,GAAG,CAAAD,WAAA,GAAA5C,IAAI,CAAC0C,KAAK,aAAVE,WAAA,CAAYE,MAAM,gBAC7B7F,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAACX,eAAA,CAAAkF,cAAc;MACb/C,IAAI,EAAEA,IAAK;MACXL,QAAQ,EAAEA,QAAS;MACnBa,QAAQ,EAAExB,KAAK,CAACyB,eAAe,KAAKT,IAAI,CAACG,EAAG;MAC5CY,SAAS,EAAEf,IAAI,CAACG,EAAE,KAAKnB,KAAK,CAACgE,cAAe;MAC5CC,QAAQ,EAAEA,CAAA,KAAMjE,KAAK,CAACkB,WAAW,CAACF,IAAI,CAACG,EAAE,CAAE;MAC3C+C,WAAW,EAAG7C,KAAK,IAAKC,UAAU,CAACD,KAAK,EAAE,IAAI,CAAE;MAAA3B,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAZ,YAAA;QAAAa,UAAA;QAAAC,YAAA;MAAA;IAAA,CACjD,CAAC,GAEFwB,UAAU,CAACN,IAAI,CAChB;IAED,OAAOZ,UAAU,gBACfnC,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAACP,eAAe;MACd6C,GAAG,EAAEd,IAAI,CAACG,EAAG;MACbjC,MAAM,EAAE8B,IAAI,CAACG,EAAG;MAChBhC,MAAM,EAAEA,CAAA,KAAMiB,UAAU,CAACY,IAAI,CAAE;MAAAtB,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAZ,YAAA;QAAAa,UAAA;QAAAC,YAAA;MAAA;IAAA,GAE9B+D,IACc,CAAC,gBAElB5F,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAACvB,MAAA,CAAAsB,OAAK,CAAC+C,QAAQ;MAACR,GAAG,EAAEd,IAAI,CAACG,EAAG;MAAAzB,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAZ,YAAA;QAAAa,UAAA;QAAAC,YAAA;MAAA;IAAA,GAAE+D,IAAqB,CACrD;EACH,CAAC,CACE,CACN;EAED,MAAMM,IAAI,gBACRlG,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAAAvB,MAAA,CAAAsB,OAAA,CAAA+C,QAAA,QACGK,MAAM,EACNU,IACD,CACH;;EAED;EACA;EACA;EACA,IAAI1C,QAAQ,IAAIE,MAAM,KAAK,SAAS,EAAE;IACpC,oBACE5C,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAACnB,aAAA,CAAAiF,GAAG;MAAC/C,QAAQ,EAAEA,QAAS;MAACgD,SAAS,EAAC,UAAU;MAACC,GAAG,EAAC,KAAK;MAACC,KAAK,EAAC,MAAM;MAAA/D,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAZ,YAAA;QAAAa,UAAA;QAAAC,YAAA;MAAA;IAAA,GACjEqE,IACE,CAAC;EAEV;EAEA,oBACElG,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAACjB,cAAA,CAAA6F,aAAa;IACZ7D,QAAQ,EAAEA,QAAS;IACnBM,MAAM,EAAEA,MAAO;IACfwD,UAAU,EAAE;MACV9D,QAAQ,EAAE,aAAa;MACvBsC,KAAK,EAAEpC,CAAC,CAAC,+BAA+B,CAAC;MACzC6D,QAAQ,EAAE7D,CAAC,CAAC,kCAAkC,CAAC;MAC/C8D,MAAM,EAAE;QACNC,IAAI,EAAE/D,CAAC,CAAC,6BAA6B,CAAC;QACtCgE,OAAO,EAAEA,CAAA,KAAMzE,KAAK,CAACwC,MAAM,CAAC;MAC9B;IACF,CAAE;IAAA9C,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAZ,YAAA;MAAAa,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEF7B,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAACnB,aAAA,CAAAiF,GAAG;IAACC,SAAS,EAAC,UAAU;IAACmB,OAAO,EAAC,KAAK;IAAAhF,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAZ,YAAA;MAAAa,UAAA;MAAAC,YAAA;IAAA;EAAA,GACpCqE,IACE,CACQ,CAAC;AAEpB,CAAC;AAEM,MAAMQ,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAAE,uBAAQ,EAAC9E,YAAY,CAAC","ignoreList":[]}

package/dist/cjs/components/SetupWidget/SetupWidget.st.css

@@ -8,6 +8,12 @@
 @property st-global(--wsr-color-B30);
 @property st-global(--wsr-color-B40);
 @property st-global(--wsr-color-B60);
+@property st-global(--wds-color-text-standard-primary);
+@property st-global(--wds-color-text-disabled);
+@property st-global(--wds-color-text-urgent);
+@property st-global(--wsr-color-D10);
+@property st-global(--wsr-color-D10-30);
+@property st-global(--wsr-color-O10);
 @property st-global(--wds-space-100);
 @property st-global(--wds-border-radius-200);
 @property st-global(--wds-border-radius-400);
@@ -93,3 +99,40 @@
 .card:clickable {
   cursor: pointer;
 }
+
+/* 24px icon cell (matches the Figma spec): a single-line step row is then
+ * 24px + 2×12px padding = 48px tall. The 18px glyph is centered within it, so
+ * the icon lines up with the title (single line) or its first line (wrapped). */
+.stepIcon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 24px;
+}
+
+/* Trailing chevron that replaces the per-step CTA button on mobile. WDS has no
+ * dedicated icon-color token; icons take the text-standard color (the Figma
+ * variable is grouped as "Text & icon"). */
+.chevron {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
+}
+
+.chevronDisabled {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
+}
+
+/* "IN PROGRESS" label, rendered with a WDS <Text> (so it uses the design
+ * system's typography) but in the urgent orange. <Text> has no "urgent" skin,
+ * so we override the standard-text color token it reads — this beats the
+ * component's own color rule without !important — and uppercase the label to
+ * match the Figma spec. Using <Text> (not a Badge) keeps it flush with the
+ * title, with no badge padding/offset. */
+.inProgressLabel {
+  --wds-color-text-standard-primary: var(--wds-color-text-urgent, var(--wsr-color-O10, #FE620F));
+
+  text-transform: uppercase;
+}

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

@@ -5,17 +5,21 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "SetupWidget1301138261";
+var _namespace_ = "SetupWidget808034205";
 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": "SetupWidget1301138261__root",
-  "row": "SetupWidget1301138261__row",
-  "completedCta": "SetupWidget1301138261__completedCta",
-  "card": "SetupWidget1301138261__card"
+  "root": "SetupWidget808034205__root",
+  "row": "SetupWidget808034205__row",
+  "completedCta": "SetupWidget808034205__completedCta",
+  "card": "SetupWidget808034205__card",
+  "stepIcon": "SetupWidget808034205__stepIcon",
+  "chevron": "SetupWidget808034205__chevron",
+  "chevronDisabled": "SetupWidget808034205__chevronDisabled",
+  "inProgressLabel": "SetupWidget808034205__inProgressLabel"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};
@@ -32,6 +36,12 @@ var vars = exports.vars = {
   "wsr-color-B30": "--wsr-color-B30",
   "wsr-color-B40": "--wsr-color-B40",
   "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-space-100": "--wds-space-100",
   "wds-border-radius-200": "--wds-border-radius-200",
   "wds-border-radius-400": "--wds-border-radius-400"

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_ = \"SetupWidget1301138261\";\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\":\"SetupWidget1301138261__root\",\"row\":\"SetupWidget1301138261__row\",\"completedCta\":\"SetupWidget1301138261__completedCta\",\"card\":\"SetupWidget1301138261__card\"};\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-border-standard-primary\":\"--wds-color-border-standard-primary\",\"wds-color-border-standard-secondary\":\"--wds-color-border-standard-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-B30\":\"--wsr-color-B30\",\"wsr-color-B40\":\"--wsr-color-B40\",\"wsr-color-B60\":\"--wsr-color-B60\",\"wds-space-100\":\"--wds-space-100\",\"wds-border-radius-200\":\"--wds-border-radius-200\",\"wds-border-radius-400\":\"--wds-border-radius-400\"}; \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,MAAM,EAAC;AAA6B,CAAC;AACjL,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,mCAAmC,EAAC,qCAAqC;EAAC,qCAAqC,EAAC,uCAAuC;EAAC,kCAAkC,EAAC,oCAAoC;EAAC,wCAAwC,EAAC,0CAA0C;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,uBAAuB,EAAC;AAAyB,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_ = \"SetupWidget808034205\";\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\":\"SetupWidget808034205__root\",\"row\":\"SetupWidget808034205__row\",\"completedCta\":\"SetupWidget808034205__completedCta\",\"card\":\"SetupWidget808034205__card\",\"stepIcon\":\"SetupWidget808034205__stepIcon\",\"chevron\":\"SetupWidget808034205__chevron\",\"chevronDisabled\":\"SetupWidget808034205__chevronDisabled\",\"inProgressLabel\":\"SetupWidget808034205__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-border-standard-primary\":\"--wds-color-border-standard-primary\",\"wds-color-border-standard-secondary\":\"--wds-color-border-standard-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-B30\":\"--wsr-color-B30\",\"wsr-color-B40\":\"--wsr-color-B40\",\"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-space-100\":\"--wds-space-100\",\"wds-border-radius-200\":\"--wds-border-radius-200\",\"wds-border-radius-400\":\"--wds-border-radius-400\"}; \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,MAAM,EAAC,4BAA4B;EAAC,UAAU,EAAC,gCAAgC;EAAC,SAAS,EAAC,+BAA+B;EAAC,iBAAiB,EAAC,uCAAuC;EAAC,iBAAiB,EAAC;AAAuC,CAAC;AACvX,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,mCAAmC,EAAC,qCAAqC;EAAC,qCAAqC,EAAC,uCAAuC;EAAC,kCAAkC,EAAC,oCAAoC;EAAC,wCAAwC,EAAC,0CAA0C;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;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,eAAe,EAAC,iBAAiB;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,uBAAuB,EAAC;AAAyB,CAAC","ignoreList":[]}

package/dist/cjs/components/SetupWidget/SetupWidgetHeader.js

@@ -28,13 +28,18 @@ const SetupWidgetHeader = ({
     total: totalCount
   });
   if (isMobile) {
+    // Mobile (per Figma): the "X/Y" ratio sits inline to the left of the bar
+    // (no "completed" word) to save vertical space. The ratio is just numbers,
+    // so it needs no translation.
+    const ratio = `${completedCount}/${totalCount}`;
     return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
       direction: "vertical",
-      gap: "SP2",
+      gap: "SP3",
+      width: "100%",
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 35,
+        lineNumber: 39,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement(_designSystem.Heading, {
@@ -43,26 +48,36 @@ const SetupWidgetHeader = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 36,
+        lineNumber: 40,
         columnNumber: 9
       }
-    }, resolvedTitle), /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    }, resolvedTitle), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      width: "100%",
+      verticalAlign: "middle",
+      gap: "SP2",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 43,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
       dataHook: "setup-widget-progress",
       size: "small",
       secondary: true,
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 39,
-        columnNumber: 9
+        lineNumber: 44,
+        columnNumber: 11
       }
-    }, ratioLabel), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-      width: "100%",
+    }, ratio), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      flexGrow: 1,
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 42,
-        columnNumber: 9
+        lineNumber: 47,
+        columnNumber: 11
       }
     }, /*#__PURE__*/_react.default.createElement(_designSystem.LinearProgressBar, {
       skin: "standard",
@@ -70,10 +85,10 @@ const SetupWidgetHeader = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 43,
-        columnNumber: 11
+        lineNumber: 48,
+        columnNumber: 13
       }
-    })));
+    }))));
   }
   return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     align: "space-between",
@@ -82,7 +97,7 @@ const SetupWidgetHeader = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 50,
+      lineNumber: 56,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Heading, {
@@ -91,7 +106,7 @@ const SetupWidgetHeader = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 51,
+      lineNumber: 57,
       columnNumber: 7
     }
   }, resolvedTitle), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -100,7 +115,7 @@ const SetupWidgetHeader = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 54,
+      lineNumber: 60,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
@@ -110,7 +125,7 @@ const SetupWidgetHeader = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 55,
+      lineNumber: 61,
       columnNumber: 9
     }
   }, ratioLabel), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -119,7 +134,7 @@ const SetupWidgetHeader = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 58,
+      lineNumber: 64,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.LinearProgressBar, {
@@ -128,7 +143,7 @@ const SetupWidgetHeader = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 59,
+      lineNumber: 65,
       columnNumber: 11
     }
   }))));

package/dist/cjs/components/SetupWidget/SetupWidgetHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_react2","_jsxFileName","SetupWidgetHeader","title","completedCount","totalCount","progressPercentage","isMobile","translate","t","useWixPatternsContainer","resolvedTitle","ratioLabel","completed","total","default","createElement","Box","direction","gap","__self","__source","fileName","lineNumber","columnNumber","Heading","dataHook","size","Text","secondary","width","LinearProgressBar","skin","value","align","verticalAlign","marginBottom","weight","marginLeft","exports"],"sources":["../../../../src/components/SetupWidget/SetupWidgetHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Heading, Text, LinearProgressBar } from '@wix/design-system';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\n\nexport interface SetupWidgetHeaderProps {\n  /** Defaults to the translated \"Setup\" when omitted. */\n  title?: string | null;\n  completedCount: number;\n  totalCount: number;\n  progressPercentage: number;\n  isMobile: boolean;\n}\n\n/**\n * Widget header: title + \"X/Y completed\" ratio + progress bar.\n * - Desktop: title left, ratio + bar inline on the right.\n * - Mobile: large heading stacked above the ratio and a full-width bar.\n */\nexport const SetupWidgetHeader = ({\n  title,\n  completedCount,\n  totalCount,\n  progressPercentage,\n  isMobile,\n}: SetupWidgetHeaderProps) => {\n  const { translate: t } = useWixPatternsContainer();\n  const resolvedTitle = title ?? t('cairo.setupWidget.title');\n  const ratioLabel = t('cairo.setupWidget.progress.label', {\n    completed: completedCount,\n    total: totalCount,\n  });\n\n  if (isMobile) {\n    return (\n      <Box direction=\"vertical\" gap=\"SP2\">\n        <Heading dataHook=\"setup-widget-title\" size=\"large\">\n          {resolvedTitle}\n        </Heading>\n        <Text dataHook=\"setup-widget-progress\" size=\"small\" secondary>\n          {ratioLabel}\n        </Text>\n        <Box width=\"100%\">\n          <LinearProgressBar skin=\"standard\" value={progressPercentage} />\n        </Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Box align=\"space-between\" verticalAlign=\"middle\" marginBottom=\"SP4\">\n      <Heading dataHook=\"setup-widget-title\" size=\"medium\">\n        {resolvedTitle}\n      </Heading>\n      <Box gap=\"SP1\" verticalAlign=\"middle\">\n        <Text dataHook=\"setup-widget-progress\" size=\"tiny\" weight=\"thin\">\n          {ratioLabel}\n        </Text>\n        <Box width={220} marginLeft=\"-8px\">\n          <LinearProgressBar skin=\"standard\" value={progressPercentage} />\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_react2","_jsxFileName","SetupWidgetHeader","title","completedCount","totalCount","progressPercentage","isMobile","translate","t","useWixPatternsContainer","resolvedTitle","ratioLabel","completed","total","ratio","default","createElement","Box","direction","gap","width","__self","__source","fileName","lineNumber","columnNumber","Heading","dataHook","size","verticalAlign","Text","secondary","flexGrow","LinearProgressBar","skin","value","align","marginBottom","weight","marginLeft","exports"],"sources":["../../../../src/components/SetupWidget/SetupWidgetHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Heading, Text, LinearProgressBar } from '@wix/design-system';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\n\nexport interface SetupWidgetHeaderProps {\n  /** Defaults to the translated \"Setup\" when omitted. */\n  title?: string | null;\n  completedCount: number;\n  totalCount: number;\n  progressPercentage: number;\n  isMobile: boolean;\n}\n\n/**\n * Widget header: title + \"X/Y completed\" ratio + progress bar.\n * - Desktop: title left, ratio + bar inline on the right.\n * - Mobile: large heading stacked above the ratio and a full-width bar.\n */\nexport const SetupWidgetHeader = ({\n  title,\n  completedCount,\n  totalCount,\n  progressPercentage,\n  isMobile,\n}: SetupWidgetHeaderProps) => {\n  const { translate: t } = useWixPatternsContainer();\n  const resolvedTitle = title ?? t('cairo.setupWidget.title');\n  const ratioLabel = t('cairo.setupWidget.progress.label', {\n    completed: completedCount,\n    total: totalCount,\n  });\n\n  if (isMobile) {\n    // Mobile (per Figma): the \"X/Y\" ratio sits inline to the left of the bar\n    // (no \"completed\" word) to save vertical space. The ratio is just numbers,\n    // so it needs no translation.\n    const ratio = `${completedCount}/${totalCount}`;\n    return (\n      <Box direction=\"vertical\" gap=\"SP3\" width=\"100%\">\n        <Heading dataHook=\"setup-widget-title\" size=\"large\">\n          {resolvedTitle}\n        </Heading>\n        <Box width=\"100%\" verticalAlign=\"middle\" gap=\"SP2\">\n          <Text dataHook=\"setup-widget-progress\" size=\"small\" secondary>\n            {ratio}\n          </Text>\n          <Box flexGrow={1}>\n            <LinearProgressBar skin=\"standard\" value={progressPercentage} />\n          </Box>\n        </Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Box align=\"space-between\" verticalAlign=\"middle\" marginBottom=\"SP4\">\n      <Heading dataHook=\"setup-widget-title\" size=\"medium\">\n        {resolvedTitle}\n      </Heading>\n      <Box gap=\"SP1\" verticalAlign=\"middle\">\n        <Text dataHook=\"setup-widget-progress\" size=\"tiny\" weight=\"thin\">\n          {ratioLabel}\n        </Text>\n        <Box width={220} marginLeft=\"-8px\">\n          <LinearProgressBar skin=\"standard\" value={progressPercentage} />\n        </Box>\n      </Box>\n    </Box>\n  );\n};\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_ = "SkeletonCard1867398531";
+var _namespace_ = "SkeletonCard3144351190";
 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": "SkeletonCard1867398531__root",
-  "headerLoading": "SkeletonCard1867398531__headerLoading"
+  "root": "SkeletonCard3144351190__root",
+  "headerLoading": "SkeletonCard3144351190__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_ = \"SkeletonCard1867398531\";\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\":\"SkeletonCard1867398531__root\",\"headerLoading\":\"SkeletonCard1867398531__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_ = \"SkeletonCard3144351190\";\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\":\"SkeletonCard3144351190__root\",\"headerLoading\":\"SkeletonCard3144351190__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_ = "SlidingModal719247517";
+var _namespace_ = "SlidingModal538401435";
 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": "SlidingModal719247517__root"
+  "root": "SlidingModal538401435__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_ = \"SlidingModal719247517\";\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\":\"SlidingModal719247517__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/SlidingModal/SlidingModal.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"SlidingModal538401435\";\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\":\"SlidingModal538401435__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/Table/TableCompat.js

@@ -6,7 +6,7 @@ exports.TableCompat = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _mobxReactLite = require("mobx-react-lite");
-var _ = require("../..");
+var _TableV = require("./TableV2");
 var _state = require("../../state");
 var _react2 = require("@wix/bex-core/react");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/Table/TableCompat.tsx";
@@ -17,7 +17,7 @@ function _TableCompat(props) {
     collection: props.state,
     container
   }));
-  return /*#__PURE__*/_react.default.createElement(_.TableV2, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_TableV.TableV2, (0, _extends2.default)({}, props, {
     state: state,
     __self: this,
     __source: {

package/dist/cjs/components/Table/TableCompat.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_mobxReactLite","_","_state","_react2","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_TableCompat","props","container","useWixPatternsContainer","state","useState","TableState","collection","createElement","TableV2","_extends2","__self","__source","fileName","lineNumber","columnNumber","TableCompat","exports","observer"],"sources":["../../../../src/components/Table/TableCompat.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { CollectionState, FiltersMap } from '@wix/bex-core';\nimport { TableV2 } from '../..';\nimport { TableState } from '../../state';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { CollectionTableBaseProps } from '../CollectionTable';\nimport type { TableSectionsProp } from '../TableSections';\n\nexport interface TableCompatProps<T, F extends FiltersMap>\n  extends CollectionTableBaseProps<T, F> {\n  /**\n   * A collection state instance created with [useCollection](./?path=/story/common-hooks--usecollection)\n   * @external\n   */\n  state: CollectionState<T, F> | TableState<T, F>;\n  sections?: TableSectionsProp<T>;\n}\n\nfunction _TableCompat<T, F extends FiltersMap = FiltersMap>(\n  props: TableCompatProps<T, F>,\n) {\n  const container = useWixPatternsContainer();\n\n  const [state] = useState(() =>\n    props.state instanceof TableState\n      ? props.state\n      : new TableState<T, F>({\n          collection: props.state,\n          container,\n        }),\n  );\n\n  return <TableV2 {...props} state={state} />;\n}\n\nexport const TableCompat = observer(_TableCompat);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AAEA,IAAAE,CAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAA8D,IAAAK,YAAA;AAAA,SAAAN,wBAAAO,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAO,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;AAc9D,SAASkB,YAAYA,CACnBC,KAA6B,EAC7B;EACA,MAAMC,SAAS,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAE3C,MAAM,CAACC,KAAK,CAAC,GAAG,IAAAC,eAAQ,EAAC,MACvBJ,KAAK,CAACG,KAAK,YAAYE,iBAAU,GAC7BL,KAAK,CAACG,KAAK,GACX,IAAIE,iBAAU,CAAO;IACnBC,UAAU,EAAEN,KAAK,CAACG,KAAK;IACvBF;EACF,CAAC,CACP,CAAC;EAED,oBAAO7B,MAAA,CAAAkB,OAAA,CAAAiB,aAAA,CAAC/B,CAAA,CAAAgC,OAAO,MAAAC,SAAA,CAAAnB,OAAA,MAAKU,KAAK;IAAEG,KAAK,EAAEA,KAAM;IAAAO,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjC,YAAA;MAAAkC,UAAA;MAAAC,YAAA;IAAA;EAAA,EAAE,CAAC;AAC7C;AAEO,MAAMC,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAAE,uBAAQ,EAAClB,YAAY,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_mobxReactLite","_TableV","_state","_react2","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_TableCompat","props","container","useWixPatternsContainer","state","useState","TableState","collection","createElement","TableV2","_extends2","__self","__source","fileName","lineNumber","columnNumber","TableCompat","exports","observer"],"sources":["../../../../src/components/Table/TableCompat.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { CollectionState, FiltersMap } from '@wix/bex-core';\nimport { TableV2 } from './TableV2';\nimport { TableState } from '../../state';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { CollectionTableBaseProps } from '../CollectionTable';\nimport type { TableSectionsProp } from '../TableSections';\n\nexport interface TableCompatProps<T, F extends FiltersMap>\n  extends CollectionTableBaseProps<T, F> {\n  /**\n   * A collection state instance created with [useCollection](./?path=/story/common-hooks--usecollection)\n   * @external\n   */\n  state: CollectionState<T, F> | TableState<T, F>;\n  sections?: TableSectionsProp<T>;\n}\n\nfunction _TableCompat<T, F extends FiltersMap = FiltersMap>(\n  props: TableCompatProps<T, F>,\n) {\n  const container = useWixPatternsContainer();\n\n  const [state] = useState(() =>\n    props.state instanceof TableState\n      ? props.state\n      : new TableState<T, F>({\n          collection: props.state,\n          container,\n        }),\n  );\n\n  return <TableV2 {...props} state={state} />;\n}\n\nexport const TableCompat = observer(_TableCompat);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AAEA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAA8D,IAAAK,YAAA;AAAA,SAAAN,wBAAAO,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAO,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;AAc9D,SAASkB,YAAYA,CACnBC,KAA6B,EAC7B;EACA,MAAMC,SAAS,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAE3C,MAAM,CAACC,KAAK,CAAC,GAAG,IAAAC,eAAQ,EAAC,MACvBJ,KAAK,CAACG,KAAK,YAAYE,iBAAU,GAC7BL,KAAK,CAACG,KAAK,GACX,IAAIE,iBAAU,CAAO;IACnBC,UAAU,EAAEN,KAAK,CAACG,KAAK;IACvBF;EACF,CAAC,CACP,CAAC;EAED,oBAAO7B,MAAA,CAAAkB,OAAA,CAAAiB,aAAA,CAAC/B,OAAA,CAAAgC,OAAO,MAAAC,SAAA,CAAAnB,OAAA,MAAKU,KAAK;IAAEG,KAAK,EAAEA,KAAM;IAAAO,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjC,YAAA;MAAAkC,UAAA;MAAAC,YAAA;IAAA;EAAA,EAAE,CAAC;AAC7C;AAEO,MAAMC,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAAE,uBAAQ,EAAClB,YAAY,CAAC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_LayoutSwitch","_jsxFileName","_TableGridSwitch","props","state","dragAndDrop","sections","restProps","tableSections","TableSections","groupBy","renderSection","collapsible","events","undefined","gridSections","GridSections","default","createElement","LayoutSwitch","tableProps","tableState","table","sticky","gridProps","gridState","grid","__self","__source","fileName","lineNumber","columnNumber","TableGridSwitch","exports","observer"],"sources":["../../../../src/components/TableGridSwitch/TableGridSwitch.tsx"],"sourcesContent":["import React from 'react';\nimport { FiltersMap } from '@wix/bex-core';\nimport { observer } from 'mobx-react-lite';\nimport type { TableGridSwitchState } from '../../state/TableGridSwitchState';\nimport { GridPresetProps } from '../Grid/Grid.types';\nimport type { TableGridSwitchDragAndDrop } from './TableGridSwitchDragAndDrop';\nimport { GridSectionsContent } from '../GridSections/GridSectionsContent';\nimport type {\n  GroupBy,\n  RenderSection,\n  SectionEvents,\n} from '../CollectionSectionHeader';\nimport { TableSections } from '../TableSections';\nimport { GridBasePropsWithoutPreset } from '../Grid/Grid';\nimport { TableProps } from '..';\nimport { LayoutSwitch } from '../LayoutSwitch';\n\nexport interface TableGridSwitchBaseProps<T, F extends FiltersMap>\n  extends Omit<\n      GridBasePropsWithoutPreset<T, F>,\n      'state' | 'dragAndDrop' | 'tableGridSwitchButton' | 'sticky' | 'sections'\n    >,\n    Omit<\n      TableProps<T, F>,\n      'state' | 'dragAndDrop' | 'tableGridSwitchButton' | 'sticky' | 'sections'\n    > {\n  /**\n   * A `TableGridSwitchState` instance created using [useTableGridSwitch](./?path=/story/base-components-collections-tablegridswitch-usetablegridswitchcollection--usetablegridswitchcollection).\n   */\n  state: TableGridSwitchState<T, F>;\n  /**\n   * Adds functionality to allow visitors to reorder items manually.\n   * For more information, see the [Drag and Drop Overview](./?path=/story/features-sort-drag-and-drop--overview).\n   * @overrideType [TableGridSwitchDragAndDrop](./?path=/story/features-sort-drag-and-drop--tablegridswitchdraganddrop)\n   * @external\n   */\n  dragAndDrop?: typeof TableGridSwitchDragAndDrop;\n  /**\n   * Configuration for rendering sections. When provided, the component will render with section headers\n   * that group related rows together for both Grid and Table views.\n   * @external\n   */\n  sections?: {\n    GridSections: typeof GridSectionsContent;\n    TableSections: typeof TableSections;\n    groupBy: GroupBy<T>;\n    renderSection: RenderSection<T>;\n    collapsible?: boolean;\n    events?: SectionEvents;\n  };\n}\n\nexport type TableGridSwitchProps<T, F extends FiltersMap> = GridPresetProps<\n  T,\n  TableGridSwitchBaseProps<T, F>\n>;\n\nexport function _TableGridSwitch<T, F extends FiltersMap = FiltersMap>(\n  props: TableGridSwitchProps<T, F>,\n) {\n  const { state, dragAndDrop, sections, ...restProps } = props;\n\n  const tableSections = sections\n    ? {\n        TableSections: sections.TableSections,\n        groupBy: sections.groupBy,\n        renderSection: sections.renderSection,\n        collapsible: sections.collapsible,\n        events: sections.events,\n      }\n    : undefined;\n\n  const gridSections = sections\n    ? {\n        GridSections: sections.GridSections,\n        groupBy: sections.groupBy,\n        renderSection: sections.renderSection,\n      }\n    : undefined;\n\n  return (\n    <LayoutSwitch\n      state={state}\n      tableProps={{\n        ...restProps,\n        state: state.tableState,\n        dragAndDrop: dragAndDrop?.table,\n        sections: tableSections,\n        sticky: true,\n      }}\n      gridProps={{\n        ...restProps,\n        state: state.gridState,\n        dragAndDrop: dragAndDrop?.grid,\n        sections: gridSections,\n      }}\n    />\n  );\n}\n\nexport const TableGridSwitch = observer(_TableGridSwitch);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAaA,IAAAE,aAAA,GAAAF,OAAA;AAA+C,IAAAG,YAAA;AA0CxC,SAASC,gBAAgBA,CAC9BC,KAAiC,EACjC;EACA,MAAM;IAAEC,KAAK;IAAEC,WAAW;IAAEC,QAAQ;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAE5D,MAAMK,aAAa,GAAGF,QAAQ,GAC1B;IACEG,aAAa,EAAEH,QAAQ,CAACG,aAAa;IACrCC,OAAO,EAAEJ,QAAQ,CAACI,OAAO;IACzBC,aAAa,EAAEL,QAAQ,CAACK,aAAa;IACrCC,WAAW,EAAEN,QAAQ,CAACM,WAAW;IACjCC,MAAM,EAAEP,QAAQ,CAACO;EACnB,CAAC,GACDC,SAAS;EAEb,MAAMC,YAAY,GAAGT,QAAQ,GACzB;IACEU,YAAY,EAAEV,QAAQ,CAACU,YAAY;IACnCN,OAAO,EAAEJ,QAAQ,CAACI,OAAO;IACzBC,aAAa,EAAEL,QAAQ,CAACK;EAC1B,CAAC,GACDG,SAAS;EAEb,oBACElB,MAAA,CAAAqB,OAAA,CAAAC,aAAA,CAAClB,aAAA,CAAAmB,YAAY;IACXf,KAAK,EAAEA,KAAM;IACbgB,UAAU,EAAE;MACV,GAAGb,SAAS;MACZH,KAAK,EAAEA,KAAK,CAACiB,UAAU;MACvBhB,WAAW,EAAEA,WAAW,oBAAXA,WAAW,CAAEiB,KAAK;MAC/BhB,QAAQ,EAAEE,aAAa;MACvBe,MAAM,EAAE;IACV,CAAE;IACFC,SAAS,EAAE;MACT,GAAGjB,SAAS;MACZH,KAAK,EAAEA,KAAK,CAACqB,SAAS;MACtBpB,WAAW,EAAEA,WAAW,oBAAXA,WAAW,CAAEqB,IAAI;MAC9BpB,QAAQ,EAAES;IACZ,CAAE;IAAAY,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA5B,YAAA;MAAA6B,UAAA;MAAAC,YAAA;IAAA;EAAA,CACH,CAAC;AAEN;AAEO,MAAMC,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,uBAAQ,EAAChC,gBAAgB,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_LayoutSwitch","_jsxFileName","_TableGridSwitch","props","state","dragAndDrop","sections","restProps","tableSections","TableSections","groupBy","renderSection","collapsible","events","undefined","gridSections","GridSections","default","createElement","LayoutSwitch","tableProps","tableState","table","sticky","gridProps","gridState","grid","__self","__source","fileName","lineNumber","columnNumber","TableGridSwitch","exports","observer"],"sources":["../../../../src/components/TableGridSwitch/TableGridSwitch.tsx"],"sourcesContent":["import React from 'react';\nimport { FiltersMap } from '@wix/bex-core';\nimport { observer } from 'mobx-react-lite';\nimport type { TableGridSwitchState } from '../../state/TableGridSwitchState';\nimport { GridPresetProps } from '../Grid/Grid.types';\nimport type { TableGridSwitchDragAndDrop } from './TableGridSwitchDragAndDrop';\nimport { GridSectionsContent } from '../GridSections/GridSectionsContent';\nimport type {\n  GroupBy,\n  RenderSection,\n  SectionEvents,\n} from '../CollectionSectionHeader';\nimport { TableSections } from '../TableSections';\nimport { GridBasePropsWithoutPreset } from '../Grid/Grid';\nimport type { TableProps } from '..';\nimport { LayoutSwitch } from '../LayoutSwitch';\n\nexport interface TableGridSwitchBaseProps<T, F extends FiltersMap>\n  extends Omit<\n      GridBasePropsWithoutPreset<T, F>,\n      'state' | 'dragAndDrop' | 'tableGridSwitchButton' | 'sticky' | 'sections'\n    >,\n    Omit<\n      TableProps<T, F>,\n      'state' | 'dragAndDrop' | 'tableGridSwitchButton' | 'sticky' | 'sections'\n    > {\n  /**\n   * A `TableGridSwitchState` instance created using [useTableGridSwitch](./?path=/story/base-components-collections-tablegridswitch-usetablegridswitchcollection--usetablegridswitchcollection).\n   */\n  state: TableGridSwitchState<T, F>;\n  /**\n   * Adds functionality to allow visitors to reorder items manually.\n   * For more information, see the [Drag and Drop Overview](./?path=/story/features-sort-drag-and-drop--overview).\n   * @overrideType [TableGridSwitchDragAndDrop](./?path=/story/features-sort-drag-and-drop--tablegridswitchdraganddrop)\n   * @external\n   */\n  dragAndDrop?: typeof TableGridSwitchDragAndDrop;\n  /**\n   * Configuration for rendering sections. When provided, the component will render with section headers\n   * that group related rows together for both Grid and Table views.\n   * @external\n   */\n  sections?: {\n    GridSections: typeof GridSectionsContent;\n    TableSections: typeof TableSections;\n    groupBy: GroupBy<T>;\n    renderSection: RenderSection<T>;\n    collapsible?: boolean;\n    events?: SectionEvents;\n  };\n}\n\nexport type TableGridSwitchProps<T, F extends FiltersMap> = GridPresetProps<\n  T,\n  TableGridSwitchBaseProps<T, F>\n>;\n\nexport function _TableGridSwitch<T, F extends FiltersMap = FiltersMap>(\n  props: TableGridSwitchProps<T, F>,\n) {\n  const { state, dragAndDrop, sections, ...restProps } = props;\n\n  const tableSections = sections\n    ? {\n        TableSections: sections.TableSections,\n        groupBy: sections.groupBy,\n        renderSection: sections.renderSection,\n        collapsible: sections.collapsible,\n        events: sections.events,\n      }\n    : undefined;\n\n  const gridSections = sections\n    ? {\n        GridSections: sections.GridSections,\n        groupBy: sections.groupBy,\n        renderSection: sections.renderSection,\n      }\n    : undefined;\n\n  return (\n    <LayoutSwitch\n      state={state}\n      tableProps={{\n        ...restProps,\n        state: state.tableState,\n        dragAndDrop: dragAndDrop?.table,\n        sections: tableSections,\n        sticky: true,\n      }}\n      gridProps={{\n        ...restProps,\n        state: state.gridState,\n        dragAndDrop: dragAndDrop?.grid,\n        sections: gridSections,\n      }}\n    />\n  );\n}\n\nexport const TableGridSwitch = observer(_TableGridSwitch);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAaA,IAAAE,aAAA,GAAAF,OAAA;AAA+C,IAAAG,YAAA;AA0CxC,SAASC,gBAAgBA,CAC9BC,KAAiC,EACjC;EACA,MAAM;IAAEC,KAAK;IAAEC,WAAW;IAAEC,QAAQ;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAE5D,MAAMK,aAAa,GAAGF,QAAQ,GAC1B;IACEG,aAAa,EAAEH,QAAQ,CAACG,aAAa;IACrCC,OAAO,EAAEJ,QAAQ,CAACI,OAAO;IACzBC,aAAa,EAAEL,QAAQ,CAACK,aAAa;IACrCC,WAAW,EAAEN,QAAQ,CAACM,WAAW;IACjCC,MAAM,EAAEP,QAAQ,CAACO;EACnB,CAAC,GACDC,SAAS;EAEb,MAAMC,YAAY,GAAGT,QAAQ,GACzB;IACEU,YAAY,EAAEV,QAAQ,CAACU,YAAY;IACnCN,OAAO,EAAEJ,QAAQ,CAACI,OAAO;IACzBC,aAAa,EAAEL,QAAQ,CAACK;EAC1B,CAAC,GACDG,SAAS;EAEb,oBACElB,MAAA,CAAAqB,OAAA,CAAAC,aAAA,CAAClB,aAAA,CAAAmB,YAAY;IACXf,KAAK,EAAEA,KAAM;IACbgB,UAAU,EAAE;MACV,GAAGb,SAAS;MACZH,KAAK,EAAEA,KAAK,CAACiB,UAAU;MACvBhB,WAAW,EAAEA,WAAW,oBAAXA,WAAW,CAAEiB,KAAK;MAC/BhB,QAAQ,EAAEE,aAAa;MACvBe,MAAM,EAAE;IACV,CAAE;IACFC,SAAS,EAAE;MACT,GAAGjB,SAAS;MACZH,KAAK,EAAEA,KAAK,CAACqB,SAAS;MACtBpB,WAAW,EAAEA,WAAW,oBAAXA,WAAW,CAAEqB,IAAI;MAC9BpB,QAAQ,EAAES;IACZ,CAAE;IAAAY,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA5B,YAAA;MAAA6B,UAAA;MAAAC,YAAA;IAAA;EAAA,CACH,CAAC;AAEN;AAEO,MAAMC,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,uBAAQ,EAAChC,gBAAgB,CAAC","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_ = "TabsFilter1604621513";
+var _namespace_ = "TabsFilter128028699";
 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": "TabsFilter1604621513__root",
-  "title": "TabsFilter1604621513__title"
+  "root": "TabsFilter128028699__root",
+  "title": "TabsFilter128028699__title"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};