@wix/patterns 1.433.0 → 1.436.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow320214964";
+var _namespace_ = "InputOverflow3940823629";
 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":"InputOverflow320214964__root"};
+export var classes = {"root":"InputOverflow3940823629__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow1504112851";
+var _namespace_ = "LoadingRow1768217239";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow1504112851__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1504112851__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1768217239__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1768217239__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxHeightText3055850773";
+var _namespace_ = "MaxHeightText936978921";
 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":"MaxHeightText3055850773__root"};
+export var classes = {"root":"MaxHeightText936978921__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxLines1849116077";
+var _namespace_ = "MaxLines3650440761";
 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":"MaxLines1849116077__root"};
+export var classes = {"root":"MaxLines3650440761__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar1481972970";
+var _namespace_ = "MultiBulkActionToolbar516728091";
 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":"MultiBulkActionToolbar1481972970__root","leftGroupWrapper":"MultiBulkActionToolbar1481972970__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1481972970__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1481972970__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar516728091__root","leftGroupWrapper":"MultiBulkActionToolbar516728091__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar516728091__selectedCountItem","selectedCountText":"MultiBulkActionToolbar516728091__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow812840859";
+var _namespace_ = "NestedTablePlaceholderStatesRow2647025222";
 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":"NestedTablePlaceholderStatesRow812840859__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2647025222__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow2829227085";
+var _namespace_ = "NestedTableRow1019409453";
 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":"NestedTableRow2829227085__root","firstLevel":"NestedTableRow2829227085__firstLevel","placeholder":"NestedTableRow2829227085__placeholder","parentHovered":"NestedTableRow2829227085__parentHovered"};
+export var classes = {"root":"NestedTableRow1019409453__root","firstLevel":"NestedTableRow1019409453__firstLevel","placeholder":"NestedTableRow1019409453__placeholder","parentHovered":"NestedTableRow1019409453__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect900919034";
+var _namespace_ = "MultipleDragOverlayEffect1205368085";
 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":"MultipleDragOverlayEffect900919034__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1205368085__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow3774769656";
+var _namespace_ = "NestedTableDragAndDropRow2368782157";
 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":"NestedTableDragAndDropRow3774769656__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2368782157__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent4220848037";
+var _namespace_ = "PickerContent522827740";
 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":"PickerContent4220848037__root"};
+export var classes = {"root":"PickerContent522827740__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep205887611";
+var _namespace_ = "PickerContentAdditionalStep2982818180";
 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":"PickerContentAdditionalStep205887611__root","titles":"PickerContentAdditionalStep205887611__titles","suffix":"PickerContentAdditionalStep205887611__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2982818180__root","titles":"PickerContentAdditionalStep2982818180__titles","suffix":"PickerContentAdditionalStep2982818180__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem3188700452";
+var _namespace_ = "PickerTableListItem3646337391";
 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":"PickerTableListItem3188700452__root"};
+export var classes = {"root":"PickerTableListItem3646337391__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -11,7 +11,7 @@ import { standardFieldTypeLabels } from './standardFieldTypeLabels';
  * Builds the source-neutral FieldManagement over a source's state. add/edit/
  * delete call the schema's FieldActions, then merge the returned fields into
  * the loaded schema so the columns update from the response (no reload). The
- * creatable types, permissions, and can-edit/add rules come from the source.
+ * field modal, permissions, and can-edit/add rules come from the source.
  */
 export const schemaFieldManagement = (
   sourceState: SourceState<any>,
@@ -34,20 +34,6 @@ export const schemaFieldManagement = (
       const { schema, source } = sourceState;
       return schema ? source.canEditField(field, schema) : false;
     },
-    supportsPii: sourceState.source.supportsPii,
-    get piiWarning() {
-      return sourceState.source.piiWarning?.();
-    },
-    permissions: sourceState.source.fieldPermissions,
-    get fieldModalText() {
-      const t = sourceState.container.translate;
-      return (
-        sourceState.source.fieldModalText ?? {
-          addTitle: t('cairo.customFields.addCustomField.modal.title'),
-          editTitle: t('cairo.customFields.editCustomField.modal.title'),
-        }
-      );
-    },
     // Self-contained: does the delete and reports its own toast (matching the
     // DataExtension source). Rethrows on failure so the shared delete modal stays
     // open for a retry.
@@ -72,29 +58,40 @@ export const schemaFieldManagement = (
       }
     },
 
-    get creatableFieldTypes() {
+    get fieldModal() {
       const t = sourceState.container.translate;
-      return sourceState.source.creatableFieldTypes.map((ft) => {
-        // The standard pair applies only when the source didn't custom-label
-        // the entry — a custom label with the standard placeholder would show
-        // contradictory copy (the modal falls back to its generic placeholder).
-        const standard =
-          ft.label == null
-            ? standardFieldTypeLabels[ft.patternsType]
-            : undefined;
-        return {
-          id: ft.patternsType,
-          label:
-            ft.label ?? (standard ? t(standard.labelKey) : ft.patternsType),
-          namePlaceholder:
-            ft.namePlaceholder ??
-            (standard ? t(standard.namePlaceholderKey) : undefined),
-          subtitle: ft.subtitle,
-          group: ft.group,
-          supportsPii: ft.supportsPii,
-          patternsType: ft.patternsType,
-        };
-      });
+      const { fieldModal } = sourceState.source;
+      return {
+        text: fieldModal.text ?? {
+          addTitle: t('cairo.customFields.addCustomField.modal.title'),
+          editTitle: t('cairo.customFields.editCustomField.modal.title'),
+        },
+        types: fieldModal.types.map((ft) => {
+          // The standard pair applies only when the source didn't custom-label
+          // the entry — a custom label with the standard placeholder would show
+          // contradictory copy (the modal falls back to its generic placeholder).
+          const standard =
+            ft.label == null
+              ? standardFieldTypeLabels[ft.patternsType]
+              : undefined;
+          return {
+            id: ft.patternsType,
+            label:
+              ft.label ?? (standard ? t(standard.labelKey) : ft.patternsType),
+            namePlaceholder:
+              ft.namePlaceholder ??
+              (standard ? t(standard.namePlaceholderKey) : undefined),
+            subtitle: ft.subtitle,
+            group: ft.group,
+            supportsPii: ft.supportsPii,
+            piiWarning: ft.piiWarning,
+            settingsSection: ft.settingsSection,
+            patternsType: ft.patternsType,
+          };
+        }),
+        permissions: sourceState.source.fieldPermissions,
+        supportsPii: sourceState.source.supportsPii,
+      };
     },
     get existingFieldKeys() {
       return sourceState.fields.map((f) => f.id);
@@ -103,15 +100,18 @@ export const schemaFieldManagement = (
     addField: async (draft) => {
       const fields = await sourceState.fieldActions?.addField?.(
         draftToField(draft),
+        draft.settings,
       );
       if (fields) {
         runInAction(() => sourceState.mergeFields(fields));
       }
     },
     editField: async (fieldId, draft) => {
-      const fields = await sourceState.fieldActions?.editField?.(fieldId, {
-        displayName: draft.name,
-      });
+      const fields = await sourceState.fieldActions?.editField?.(
+        fieldId,
+        { displayName: draft.name },
+        draft.settings,
+      );
       if (fields) {
         runInAction(() => sourceState.mergeFields(fields));
       }
@@ -130,6 +130,7 @@ export const schemaFieldManagement = (
         writeApps: false,
         writeUsers: false,
         containsPii: field.isPii ?? false,
+        field,
       };
     },
   };

package/src/components/SchemaSource/standardFieldTypeLabels.ts

@@ -1,8 +1,8 @@
 import type { PatternsFieldType, TranslationsKeys } from '@wix/bex-core';
 
 /**
- * The add-field modal's standard name and name-input placeholder per creatable
- * field type, used when a source declares a type without a custom label.
+ * The add-field modal's standard name and name-input placeholder per field
+ * type, used when a source declares a type without a custom label.
  * NUMBER uses the integer variant's copy.
  */
 export const standardFieldTypeLabels: Partial<

package/src/components/SchemaSource/tableSchemaSource.ts

@@ -74,8 +74,8 @@ class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
     // wrapper would hand the components a source with no container.
     return (this.source as SchemaSourceWithFields).fieldsContainer;
   }
-  get creatableFieldTypes() {
-    return this.source.creatableFieldTypes;
+  get fieldModal() {
+    return this.source.fieldModal;
   }
   get fieldTypes() {
     return this.source.fieldTypes;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent3106237506";
+var _namespace_ = "ScrollableContent1350654399";
 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":"ScrollableContent3106237506__root"};
+export var classes = {"root":"ScrollableContent1350654399__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SetupWidget/AllCompleteState.tsx

@@ -25,7 +25,7 @@ export const AllCompleteState = observer(
           direction="vertical"
           padding="SP9"
           align="center"
-          backgroundColor="B50"
+          backgroundColor="var(--wds-color-fill-dark-secondary, var(--wsr-color-B50, #E7F0FF))"
           gap="SP3"
         >
           <Heading size="medium">

package/src/components/SetupWidget/SetupStepCard.tsx

@@ -107,7 +107,7 @@ export const SetupStepCard = ({
         >
           <Box verticalAlign="middle" gap="SP1" flexGrow={1} minWidth={0}>
             <Box className={st(classes.stepIcon)}>
-              <SetupStepIcon status={step.status} marginTop="0px" />
+              <SetupStepIcon status={step.status} />
             </Box>
             {/* Title + "In progress" badge stack together so the icon centers
                 against the whole block (matches the Figma in-progress card). */}

package/src/components/SetupWidget/SetupStepGroup.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Text, Badge, Tag } from '@wix/design-system';
+import { Box, Text, Badge, Tag, ClickableCard } from '@wix/design-system';
 import { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common/lazy';
 import { SetupWidgetStep } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -43,6 +43,75 @@ export const SetupStepGroup = ({
   const isFocused = expanded || isPrimary;
   const Chevron = expanded ? ChevronUp : ChevronDown;
 
+  const headerContent = (
+    <Box
+      align="space-between"
+      verticalAlign="middle"
+      width="100%"
+      minHeight="30px"
+    >
+      <Box
+        minHeight="24px"
+        verticalAlign="middle"
+        gap={isMobile ? 'SP1' : undefined}
+      >
+        {isMobile ? (
+          <Box className={st(classes.stepIcon)}>
+            <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />
+          </Box>
+        ) : (
+          <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />
+        )}
+        {/* Mobile cards stack the badge under the title (matches
+            SetupStepCard); desktop rows keep it inline next to it. */}
+        <Box
+          paddingLeft={isMobile ? undefined : 'SP2'}
+          direction={isMobile ? 'vertical' : 'horizontal'}
+          verticalAlign={isMobile ? undefined : 'middle'}
+          gap="SP1"
+        >
+          <Text
+            dataHook={`setup-step-title-${step.id}`}
+            size="small"
+            weight={isFocused ? 'bold' : 'thin'}
+          >
+            {step.title}
+          </Text>
+          {anyInProgress &&
+            !allCompleted &&
+            (isMobile ? (
+              <Text
+                size="tiny"
+                weight="normal"
+                className={st(classes.inProgressLabel)}
+              >
+                {t('cairo.setupWidget.step.inProgress')}
+              </Text>
+            ) : (
+              <Box marginTop="2px">
+                <Badge size="tiny" skin="urgent" type="transparent">
+                  {t('cairo.setupWidget.step.inProgress')}
+                </Badge>
+              </Box>
+            ))}
+        </Box>
+      </Box>
+      <Box verticalAlign="middle" gap="SP1">
+        <Tag
+          id={`setup-step-counter-${step.id}`}
+          skin="neutral"
+          removable={false}
+          size="small"
+        >
+          {t('cairo.setupWidget.aggregated.counter', { completed, total })}
+        </Tag>
+        <Box dataHook={`setup-step-chevron-${step.id}`}>
+          <Chevron width="20" height="20" />
+        </Box>
+      </Box>
+    </Box>
+  );
+
   const header = (
     <div
       role="button"
@@ -56,75 +125,15 @@ export const SetupStepGroup = ({
       }}
       style={{ cursor: 'pointer' }}
     >
-      <Box
-        align="space-between"
-        verticalAlign="middle"
-        width="100%"
-        minHeight="30px"
-      >
-        <Box
-          minHeight="24px"
-          verticalAlign="middle"
-          gap={isMobile ? 'SP1' : undefined}
-        >
-          {isMobile ? (
-            <Box className={st(classes.stepIcon)}>
-              <SetupStepIcon
-                status={allCompleted ? 'completed' : 'upcoming'}
-                marginTop="0px"
-              />
-            </Box>
-          ) : (
-            <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />
-          )}
-          {/* Mobile cards stack the badge under the title (matches
-              SetupStepCard); desktop rows keep it inline next to it. */}
-          <Box
-            paddingLeft={isMobile ? undefined : 'SP2'}
-            direction={isMobile ? 'vertical' : 'horizontal'}
-            verticalAlign={isMobile ? undefined : 'middle'}
-            gap="SP1"
-          >
-            <Text
-              dataHook={`setup-step-title-${step.id}`}
-              size="small"
-              weight={isFocused ? 'bold' : 'thin'}
-            >
-              {step.title}
-            </Text>
-            {anyInProgress &&
-              !allCompleted &&
-              (isMobile ? (
-                <Text
-                  size="tiny"
-                  weight="normal"
-                  className={st(classes.inProgressLabel)}
-                >
-                  {t('cairo.setupWidget.step.inProgress')}
-                </Text>
-              ) : (
-                <Box marginTop="2px">
-                  <Badge size="tiny" skin="urgent" type="transparent">
-                    {t('cairo.setupWidget.step.inProgress')}
-                  </Badge>
-                </Box>
-              ))}
-          </Box>
-        </Box>
-        <Box verticalAlign="middle" gap="SP1">
-          <Tag
-            id={`setup-step-counter-${step.id}`}
-            skin="neutral"
-            removable={false}
-            size="small"
-          >
-            {t('cairo.setupWidget.aggregated.counter', { completed, total })}
-          </Tag>
-          <Box dataHook={`setup-step-chevron-${step.id}`}>
-            <Chevron width="20" height="20" />
+      {isMobile ? (
+        headerContent
+      ) : (
+        <ClickableCard skin="outline" hasPadding={false}>
+          <Box direction="vertical" padding="6px">
+            {headerContent}
           </Box>
-        </Box>
-      </Box>
+        </ClickableCard>
+      )}
     </div>
   );
 

package/src/components/SetupWidget/SetupStepIcon.tsx

@@ -1,9 +1,5 @@
 import React from 'react';
-import { Box } from '@wix/design-system';
-import {
-  ConfirmSmall,
-  CircleSmallFilledSmall,
-} from '@wix/wix-ui-icons-common/lazy';
+import { ConfirmSmall, DotSmall } from '@wix/wix-ui-icons-common/lazy';
 import { SetupWidgetStepStatus } from '@wix/bex-core';
 
 /**
@@ -12,30 +8,23 @@ import { SetupWidgetStepStatus } from '@wix/bex-core';
  */
 export const SetupStepIcon = ({
   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',
 }: {
   status: SetupWidgetStepStatus;
-  marginTop?: string;
 }) => {
   if (status === 'completed') {
     return (
-      <Box marginTop={marginTop}>
-        <ConfirmSmall width="18px" height="18px" color="var(--wsr-color-G20)" />
-      </Box>
+      <ConfirmSmall
+        width="18px"
+        height="18px"
+        color="var(--wds-color-fill-success-primary, var(--wsr-color-G20, #51B77B))"
+      />
     );
   }
 
   const color =
-    status === 'disabled' ? 'var(--wsr-color-D40)' : 'var(--wsr-color-B10)';
+    status === 'disabled'
+      ? 'var(--wds-color-fill-standard-primary-disabled, var(--wsr-color-D40, #868AA5))'
+      : 'var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF))';
 
-  return (
-    <Box marginTop={marginTop}>
-      <CircleSmallFilledSmall width="18px" height="18px" color={color} />
-    </Box>
-  );
+  return <DotSmall width="18px" height="18px" color={color} />;
 };