@wix/patterns 1.470.0 → 1.472.0

package/src/components/EditableTable/cellTypes/address/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1873859636";
+var _namespace_ = "Edit1358018662";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1873859636__root","addressInput":"Edit1873859636__addressInput"};
+export var classes = {"root":"Edit1358018662__root","addressInput":"Edit1358018662__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/array/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2643700821";
+var _namespace_ = "Edit358857369";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit2643700821__root","jsonInput":"Edit2643700821__jsonInput"};
+export var classes = {"root":"Edit358857369__root","jsonInput":"Edit358857369__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1989122268";
+var _namespace_ = "Edit2219071822";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1989122268__root","booleanEdit":"Edit1989122268__booleanEdit"};
+export var classes = {"root":"Edit2219071822__root","booleanEdit":"Edit2219071822__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View4059982468";
+var _namespace_ = "View2144580093";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View4059982468__root","booleanView":"View4059982468__booleanView"};
+export var classes = {"root":"View2144580093__root","booleanView":"View2144580093__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/color/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3602542179";
+var _namespace_ = "Edit3114259385";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3602542179__root"};
+export var classes = {"root":"Edit3114259385__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3276515586";
+var _namespace_ = "Edit1063685575";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3276515586__root","dateInput":"Edit3276515586__dateInput"};
+export var classes = {"root":"Edit1063685575__root","dateInput":"Edit1063685575__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View4089835174";
+var _namespace_ = "View4178573347";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View4089835174__root"};
+export var classes = {"root":"View4178573347__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/datetime/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2079910613";
+var _namespace_ = "Edit613962500";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit2079910613__root","half":"Edit2079910613__half","dateHalf":"Edit2079910613__dateHalf Edit2079910613__half","timeHalf":"Edit2079910613__timeHalf Edit2079910613__half","divider":"Edit2079910613__divider","passiveText":"Edit2079910613__passiveText","placeholderText":"Edit2079910613__placeholderText Edit2079910613__passiveText"};
+export var classes = {"root":"Edit613962500__root","half":"Edit613962500__half","dateHalf":"Edit613962500__dateHalf Edit613962500__half","timeHalf":"Edit613962500__timeHalf Edit613962500__half","divider":"Edit613962500__divider","passiveText":"Edit613962500__passiveText","placeholderText":"Edit613962500__placeholderText Edit613962500__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/datetime/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2038921840";
+var _namespace_ = "View3373617943";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View2038921840__root","leaf":"View2038921840__leaf","datePart":"View2038921840__datePart View2038921840__leaf","timePart":"View2038921840__timePart View2038921840__leaf","placeholder":"View2038921840__placeholder View2038921840__leaf","divider":"View2038921840__divider"};
+export var classes = {"root":"View3373617943__root","leaf":"View3373617943__leaf","datePart":"View3373617943__datePart View3373617943__leaf","timePart":"View3373617943__timePart View3373617943__leaf","placeholder":"View3373617943__placeholder View3373617943__leaf","divider":"View3373617943__divider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit554810667";
+var _namespace_ = "Edit3989222387";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit554810667__root","emailInput":"Edit554810667__emailInput"};
+export var classes = {"root":"Edit3989222387__root","emailInput":"Edit3989222387__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View183882515";
+var _namespace_ = "View1370576024";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View183882515__root"};
+export var classes = {"root":"View1370576024__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit166793133";
+var _namespace_ = "Edit1679697914";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit166793133__root","numberInput":"Edit166793133__numberInput"};
+export var classes = {"root":"Edit1679697914__root","numberInput":"Edit1679697914__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2181295351";
+var _namespace_ = "View694280156";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View2181295351__root","textView":"View2181295351__textView"};
+export var classes = {"root":"View694280156__root","textView":"View694280156__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit48804743";
+var _namespace_ = "Edit1573037080";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit48804743__root","jsonInput":"Edit48804743__jsonInput"};
+export var classes = {"root":"Edit1573037080__root","jsonInput":"Edit1573037080__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View136560335";
+var _namespace_ = "View4141561779";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View136560335__root"};
+export var classes = {"root":"View4141561779__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/select/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1710201859";
+var _namespace_ = "Edit4191845178";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1710201859__root","selectInput":"Edit1710201859__selectInput"};
+export var classes = {"root":"Edit4191845178__root","selectInput":"Edit4191845178__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1774410782";
+var _namespace_ = "Edit1818052711";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1774410782__root","editWrapper":"Edit1774410782__editWrapper","inputArea":"Edit1774410782__inputArea"};
+export var classes = {"root":"Edit1818052711__root","editWrapper":"Edit1818052711__editWrapper","inputArea":"Edit1818052711__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1405507263";
+var _namespace_ = "View1073797454";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View1405507263__root"};
+export var classes = {"root":"View1073797454__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/time/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3138156806";
+var _namespace_ = "Edit771623167";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3138156806__root","wrapper":"Edit3138156806__wrapper","overlay":"Edit3138156806__overlay"};
+export var classes = {"root":"Edit771623167__root","wrapper":"Edit771623167__wrapper","overlay":"Edit771623167__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2209840079";
+var _namespace_ = "Edit513638349";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit2209840079__root","urlInput":"Edit2209840079__urlInput"};
+export var classes = {"root":"Edit513638349__root","urlInput":"Edit513638349__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3043994015";
+var _namespace_ = "View1480974205";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View3043994015__root","textView":"View3043994015__textView","urlText":"View3043994015__urlText","suffix":"View3043994015__suffix"};
+export var classes = {"root":"View1480974205__root","textView":"View1480974205__textView","urlText":"View1480974205__urlText","suffix":"View1480974205__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EmptyState/EmptyStateBase.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EmptyStateBase2791893234";
+var _namespace_ = "EmptyStateBase1331254593";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EmptyStateBase2791893234__root"};
+export var classes = {"root":"EmptyStateBase1331254593__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPage/EntityPagePlain.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain1137509025";
+var _namespace_ = "EntityPagePlain4205162782";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EntityPagePlain1137509025__root"};
+export var classes = {"root":"EntityPagePlain4205162782__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Fade3917089856";
+var _namespace_ = "Fade2606535352";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Fade3917089856__root"};
+export var classes = {"root":"Fade2606535352__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/FormPage/FormPageActionsBar.tsx

@@ -1,5 +1,5 @@
 import { Box, Button, Loader } from '@wix/design-system';
-import React, { ReactNode } from 'react';
+import React, { lazy, ReactNode, Suspense } from 'react';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useFormPageContext } from '../../providers';
 import { observer } from 'mobx-react-lite';
@@ -7,6 +7,25 @@ import { MoreActionsElement } from '../MoreActions';
 import { ActionsBarConfig, ctaKeys } from '@wix/bex-core';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
+import type { FormPageSaveSplitActionProps } from './FormPageSaveSplitAction';
+
+const FormPageSaveSplitActionFallback = ({
+  size,
+  label,
+  onSave,
+}: FormPageSaveSplitActionProps) => (
+  <Button size={size} dataHook="form-page-save-btn" onClick={onSave}>
+    {label}
+  </Button>
+);
+
+// Lazy loaded so the split action and its popover stay out of the EntityPage bundle for consumers that pass no secondary actions.
+// A rejected chunk would otherwise throw in render and take the whole page down, so it degrades to the plain save button instead.
+const FormPageSaveSplitAction = lazy(() =>
+  import('./FormPageSaveSplitAction')
+    .then((module) => ({ default: module.FormPageSaveSplitAction }))
+    .catch(() => ({ default: FormPageSaveSplitActionFallback })),
+);
 
 export interface FormPageActionsBarProps {
   deleteAction?: ReactNode;
@@ -32,6 +51,28 @@ export function _FormPageActionsBar({
     return null;
   }
 
+  const size = isBmHarmonyTheme || isMobile ? 'small' : 'medium';
+  // Not supported on mobile: WDS SplitAction takes no fullWidth, so it cannot match the full-width mobile save button.
+  const secondaryActions = isMobile
+    ? undefined
+    : actionsBarConfig?.saveCta?.secondaryActions;
+  const saveLabel = state.submitTask.status.isLoading ? (
+    <Loader size="tiny" />
+  ) : (
+    (actionsBarConfig?.saveCta?.consumerText ??
+      t(ctaKeys[actionsBarConfig?.saveCta?.text ?? 'SAVE']))
+  );
+  const saveButton = (
+    <Button
+      fullWidth={isMobile}
+      size={size}
+      dataHook="form-page-save-btn"
+      onClick={onSave}
+    >
+      {saveLabel}
+    </Button>
+  );
+
   return (
     <Box gap="SP2">
       {deleteAction}
@@ -39,24 +80,27 @@ export function _FormPageActionsBar({
       <Button
         priority="secondary"
         fullWidth={isMobile}
-        size={isBmHarmonyTheme || isMobile ? 'small' : 'medium'}
+        size={size}
         dataHook="form-page-cancel-btn"
         onClick={onCancel}
       >
         {t('cairo.entityPage.header.cancel.CTA')}
       </Button>
-      <Button
-        fullWidth={isMobile}
-        size={isBmHarmonyTheme || isMobile ? 'small' : 'medium'}
-        dataHook="form-page-save-btn"
-        onClick={onSave}
-      >
-        {state.submitTask.status.isLoading ? (
-          <Loader size="tiny" />
-        ) : (
-          t(ctaKeys[actionsBarConfig?.saveCta?.text ?? 'SAVE'])
-        )}
-      </Button>
+      {secondaryActions?.length ? (
+        // The plain button is the fallback, so saving stays available while the split action loads and only the chevron arrives a beat later.
+        <Suspense fallback={saveButton}>
+          <FormPageSaveSplitAction
+            size={size}
+            label={saveLabel}
+            toggleAriaLabel={t('cairo.moreActions')}
+            secondaryActions={secondaryActions}
+            isSaving={state.submitTask.status.isLoading}
+            onSave={onSave}
+          />
+        </Suspense>
+      ) : (
+        saveButton
+      )}
     </Box>
   );
 }

package/src/components/FormPage/FormPageSaveSplitAction.tsx

@@ -0,0 +1,59 @@
+import {
+  PopoverMenu,
+  SplitAction,
+  SplitActionButton,
+  SplitActionIconButton,
+} from '@wix/design-system';
+import { ChevronDown } from '@wix/wix-ui-icons-common/lazy';
+import React, { ReactNode } from 'react';
+import type { SaveCtaSecondaryAction } from '@wix/bex-core';
+
+export interface FormPageSaveSplitActionProps {
+  size: 'small' | 'medium';
+  label: ReactNode;
+  toggleAriaLabel: string;
+  secondaryActions: SaveCtaSecondaryAction[];
+  isSaving?: boolean;
+  onSave?: () => void;
+}
+
+export function FormPageSaveSplitAction({
+  size,
+  label,
+  toggleAriaLabel,
+  secondaryActions,
+  isSaving,
+  onSave,
+}: FormPageSaveSplitActionProps) {
+  return (
+    <SplitAction size={size} priority="primary" dataHook="form-page-save-split">
+      <SplitActionButton dataHook="form-page-save-btn" onClick={onSave}>
+        {label}
+      </SplitActionButton>
+      <PopoverMenu
+        placement="bottom-end"
+        dataHook="form-page-save-menu"
+        triggerElement={
+          <SplitActionIconButton
+            dataHook="form-page-save-menu-toggle"
+            ariaLabel={toggleAriaLabel}
+            disabled={isSaving}
+          >
+            <ChevronDown />
+          </SplitActionIconButton>
+        }
+      >
+        {secondaryActions.map((action, index) => (
+          <PopoverMenu.MenuItem
+            key={action.dataHook ?? index}
+            dataHook={action.dataHook}
+            text={action.consumerText}
+            prefixIcon={action.icon}
+            disabled={isSaving || action.disabled}
+            onClick={action.onClick}
+          />
+        ))}
+      </PopoverMenu>
+    </SplitAction>
+  );
+}