sequential-workflow-designer 0.29.2 → 0.30.1

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { Definition, Step, Sequence, ComponentType, DefinitionWalker, StepWithParentSequence, StepOrName } from 'sequential-workflow-model';
+import { Definition, Step, Sequence, ComponentType, DefinitionWalker, StepWithParentSequence, BranchedStep, StepOrName } from 'sequential-workflow-model';
 export * from 'sequential-workflow-model';
 
 declare class Icons {
@@ -178,7 +178,7 @@ interface ComponentView {
     joinX: number;
 }
 interface StepComponentView extends ComponentView {
-    sequenceComponents: SequenceComponent[] | null;
+    components: Component[] | null;
     placeholders: Placeholder[] | null;
     hasOutput: boolean;
     haveCollapsedChildren?: boolean;
@@ -250,7 +250,7 @@ interface Placeholder {
     resolveClick(click: ClickDetails): ClickCommand | null;
 }
 declare enum PlaceholderDirection {
-    none = 0,
+    gap = 0,
     in = 1,
     out = 2
 }
@@ -281,6 +281,14 @@ declare class StepComponentFactory {
     create(parentElement: SVGElement, stepContext: StepContext, componentContext: ComponentContext): StepComponent;
 }
 
+declare class PlaceholderController {
+    private readonly configuration;
+    static create(configuration: PlaceholderConfiguration | undefined): PlaceholderController;
+    private constructor();
+    readonly canCreate: (sequence: Sequence, index: number) => boolean;
+    readonly canShow: (sequence: Sequence, index: number, draggingStepComponentType: string, draggingStepType: string) => boolean;
+}
+
 declare class ComponentContext {
     readonly shadowRoot: ShadowRoot | undefined;
     readonly validator: DefinitionValidator;
@@ -291,7 +299,7 @@ declare class ComponentContext {
     readonly services: Services;
     readonly preferenceStorage: PreferenceStorage;
     readonly i18n: I18n;
-    static create(configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, placeholderController: PlaceholderController, i18n: I18n, services: Services): ComponentContext;
+    static create(configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, placeholderController: PlaceholderController, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, i18n: I18n, services: Services): ComponentContext;
     private constructor();
 }
 
@@ -361,6 +369,7 @@ declare class DesignerContext {
     readonly componentContext: ComponentContext;
     readonly definitionWalker: DefinitionWalker;
     readonly i18n: I18n;
+    readonly uidGenerator: UidGenerator;
     readonly stateModifier: StateModifier;
     readonly layoutController: LayoutController;
     readonly workspaceController: WorkspaceControllerWrapper;
@@ -369,7 +378,7 @@ declare class DesignerContext {
     readonly customActionController: CustomActionController;
     readonly historyController: HistoryController | undefined;
     static create(placeholder: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services): DesignerContext;
-    constructor(theme: string, state: DesignerState, configuration: DesignerConfiguration, services: Services, componentContext: ComponentContext, definitionWalker: DefinitionWalker, i18n: I18n, stateModifier: StateModifier, layoutController: LayoutController, workspaceController: WorkspaceControllerWrapper, placeholderController: PlaceholderController, behaviorController: BehaviorController, customActionController: CustomActionController, historyController: HistoryController | undefined);
+    constructor(theme: string, state: DesignerState, configuration: DesignerConfiguration, services: Services, componentContext: ComponentContext, definitionWalker: DefinitionWalker, i18n: I18n, uidGenerator: UidGenerator, stateModifier: StateModifier, layoutController: LayoutController, workspaceController: WorkspaceControllerWrapper, placeholderController: PlaceholderController, behaviorController: BehaviorController, customActionController: CustomActionController, historyController: HistoryController | undefined);
     setWorkspaceController(controller: WorkspaceController): void;
 }
 
@@ -424,10 +433,10 @@ declare class PathBarApi {
 }
 
 declare class ToolboxDataProvider {
-    private readonly iconProvider;
     private readonly i18n;
+    private readonly iconProvider;
     private readonly configuration;
-    constructor(iconProvider: IconProvider, i18n: I18n, configuration: ToolboxConfiguration | false);
+    constructor(i18n: I18n, iconProvider: IconProvider, configuration: ToolboxConfiguration | false);
     getAllGroups(): ToolboxGroupData[];
     private readonly createItemData;
     applyFilter(allGroups: ToolboxGroupData[], filter: string | undefined): ToolboxGroupData[];
@@ -450,7 +459,7 @@ declare class ToolboxApi {
     private readonly behaviorController;
     private readonly toolboxDataProvider;
     private readonly uidGenerator;
-    constructor(state: DesignerState, designerContext: DesignerContext, behaviorController: BehaviorController, toolboxDataProvider: ToolboxDataProvider, uidGenerator: UidGenerator | undefined);
+    constructor(state: DesignerState, designerContext: DesignerContext, behaviorController: BehaviorController, toolboxDataProvider: ToolboxDataProvider, uidGenerator: UidGenerator);
     isCollapsed(): boolean;
     toggleIsCollapsed(): void;
     subscribeIsCollapsed(listener: SimpleEventListener<boolean>): void;
@@ -617,12 +626,14 @@ interface StartStopRootComponentViewConfiguration {
     defaultIconSize: number;
     folderIconSize: number;
     folderIconD: string;
-    startIconD: string;
+    start: {
+        iconD: string;
+    } | null;
     stopIconD: string;
 }
 
 interface StartStopRootComponentExtensionConfiguration {
-    view: StartStopRootComponentViewConfiguration;
+    view?: Partial<StartStopRootComponentViewConfiguration>;
 }
 
 declare class StartStopRootComponentExtension implements RootComponentExtension {
@@ -653,6 +664,23 @@ interface LineGridConfiguration {
     gridSizeY: number;
 }
 
+interface LaunchPadStepComponentViewConfiguration {
+    isRegionEnabled: boolean;
+    paddingY: number;
+    connectionHeight: number;
+    emptyPaddingX: number;
+    emptyPaddingY: number;
+    emptyInputSize: number;
+    emptyOutputSize: number;
+    emptyIconSize: number;
+}
+
+declare const createLaunchPadStepComponentViewFactory: (isInterruptedIfEmpty: boolean, cfg: LaunchPadStepComponentViewConfiguration) => StepComponentViewFactory;
+
+interface LaunchPadStepExtensionConfiguration {
+    view?: LaunchPadStepComponentViewConfiguration;
+}
+
 interface SwitchStepComponentViewConfiguration {
     minBranchWidth: number;
     paddingX: number;
@@ -677,12 +705,19 @@ interface SwitchStepComponentViewConfiguration {
     branchNameLabel: LabelViewConfiguration;
 }
 
-declare const createSwitchStepComponentViewFactory: (cfg: SwitchStepComponentViewConfiguration) => StepComponentViewFactory;
-
+type BranchNamesResolver = (step: BranchedStep) => string[];
 interface SwitchStepExtensionConfiguration {
-    view: SwitchStepComponentViewConfiguration;
+    view?: SwitchStepComponentViewConfiguration;
+    /**
+     * A function that takes a `BranchedStep` and returns an array of branch names.
+     * If not provided, the default is: `Object.keys(step.branches)`.
+     * You can use this to provide custom ordering or filtering of branch names.
+     */
+    branchNamesResolver?: BranchNamesResolver;
 }
 
+declare const createSwitchStepComponentViewFactory: (cfg: SwitchStepComponentViewConfiguration, branchNameResolver: BranchNamesResolver | undefined) => StepComponentViewFactory;
+
 interface TaskStepComponentViewConfiguration {
     paddingLeft: number;
     paddingRight: number;
@@ -745,13 +780,6 @@ declare class DefaultViewportControllerExtension implements ViewportControllerEx
     create(api: WorkspaceApi): DefaultViewportController;
 }
 
-interface RectPlaceholderConfiguration {
-    gapWidth: number;
-    gapHeight: number;
-    radius: number;
-    iconSize: number;
-}
-
 declare class RectPlaceholderView implements PlaceholderView {
     readonly rect: SVGElement;
     readonly g: SVGGElement;
@@ -765,7 +793,7 @@ declare class RectPlaceholder implements Placeholder {
     readonly view: RectPlaceholderView;
     readonly parentSequence: Sequence;
     readonly index: number;
-    static create(parent: SVGElement, size: Vector, direction: PlaceholderDirection, sequence: Sequence, index: number, configuration: RectPlaceholderConfiguration): RectPlaceholder;
+    static create(parent: SVGElement, size: Vector, direction: PlaceholderDirection, sequence: Sequence, index: number, radius: number, iconSize: number): RectPlaceholder;
     constructor(view: RectPlaceholderView, parentSequence: Sequence, index: number);
     getClientRect(): DOMRect;
     setIsHover(isHover: boolean): void;
@@ -773,6 +801,13 @@ declare class RectPlaceholder implements Placeholder {
     resolveClick(): null;
 }
 
+interface RectPlaceholderConfiguration {
+    gapWidth: number;
+    gapHeight: number;
+    radius: number;
+    iconSize: number;
+}
+
 declare class DefaultRegionView implements RegionView {
     private readonly lines;
     private readonly width;
@@ -798,7 +833,6 @@ interface DesignerExtension {
     draggedComponent?: DraggedComponentExtension;
     wheelController?: WheelControllerExtension;
     viewportController?: ViewportControllerExtension;
-    placeholderController?: PlaceholderControllerExtension;
     placeholder?: PlaceholderExtension;
     regionComponentView?: RegionComponentViewExtension;
     grid?: GridExtension;
@@ -816,7 +850,10 @@ interface StepComponentViewContext {
     i18n: I18n;
     getStepName(): string;
     getStepIconUrl(): string | null;
+    createStepComponent(parentElement: SVGElement, parentSequence: Sequence, step: Step, position: number): StepComponent;
     createSequenceComponent(parentElement: SVGElement, sequence: Sequence): SequenceComponent;
+    getPlaceholderGapSize(orientation: PlaceholderGapOrientation): Vector;
+    createPlaceholderForGap(parentElement: SVGElement, sequence: Sequence, index: number, orientation: PlaceholderGapOrientation): Placeholder;
     createPlaceholderForArea(parentElement: SVGElement, size: Vector, direction: PlaceholderDirection, sequence: Sequence, index: number): Placeholder;
     createRegionComponentView(parentElement: SVGElement, componentClassName: string, contentFactory: RegionComponentViewContentFactory): StepComponentView;
     getPreference(key: string): string | null;
@@ -909,16 +946,13 @@ interface ContextMenuItem {
     readonly order: number;
     readonly callback?: () => void;
 }
-interface PlaceholderControllerExtension {
-    create(): PlaceholderController;
-}
-interface PlaceholderController {
-    canCreate(sequence: Sequence, index: number): boolean;
-    canShow?: (sequence: Sequence, index: number, draggingStepComponentType: ComponentType, draggingStepType: string) => boolean;
+declare enum PlaceholderGapOrientation {
+    along = 0,
+    perpendicular = 1
 }
 interface PlaceholderExtension {
-    gapSize: Vector;
-    createForGap(parentElement: SVGElement, sequence: Sequence, index: number): Placeholder;
+    getGapSize(orientation: PlaceholderGapOrientation): Vector;
+    createForGap(parentElement: SVGElement, sequence: Sequence, index: number, orientation: PlaceholderGapOrientation): Placeholder;
     createForArea(parentElement: SVGElement, size: Vector, direction: PlaceholderDirection, sequence: Sequence, index: number): Placeholder;
 }
 interface ViewportControllerExtension {
@@ -982,6 +1016,10 @@ interface DesignerConfiguration<TDefinition extends Definition = Definition> {
      * @description The common configuration of the steps.
      */
     steps: StepsConfiguration;
+    /**
+     * @description The configuration of the placeholders.
+     */
+    placeholder?: PlaceholderConfiguration;
     /**
      * @description The configuration of the toolbox. If not set, the toolbox will be hidden.
      */
@@ -1100,6 +1138,10 @@ interface StepsConfiguration {
     iconUrlProvider?: StepIconUrlProvider;
 }
 type StepIconUrlProvider = (componentType: ComponentType, type: string) => string | null;
+interface PlaceholderConfiguration {
+    canCreate?: (sequence: Sequence, index: number) => boolean;
+    canShow?: (sequence: Sequence, index: number, draggingStepComponentType: ComponentType, draggingStepType: string) => boolean;
+}
 interface ValidatorConfiguration {
     step?: StepValidator;
     root?: RootValidator;
@@ -1149,14 +1191,15 @@ declare enum DefinitionChangeType {
 
 declare class StateModifier {
     private readonly definitionWalker;
+    private readonly uidGenerator;
     private readonly state;
     private readonly configuration;
     private readonly dependencies;
-    static create(definitionWalker: DefinitionWalker, state: DesignerState, configuration: DesignerConfiguration): StateModifier;
-    constructor(definitionWalker: DefinitionWalker, state: DesignerState, configuration: DesignerConfiguration, dependencies: StateModifierDependency[]);
+    static create(definitionWalker: DefinitionWalker, uidGenerator: UidGenerator, state: DesignerState, configuration: StepsConfiguration): StateModifier;
+    constructor(definitionWalker: DefinitionWalker, uidGenerator: UidGenerator, state: DesignerState, configuration: StepsConfiguration, dependencies: StateModifierDependency[]);
     addDependency(dependency: StateModifierDependency): void;
     isSelectable(step: Step, parentSequence: Sequence): boolean;
-    trySelectStep(step: Step, parentSequence: Sequence): void;
+    trySelectStep(step: Step, parentSequence: Sequence): boolean;
     trySelectStepById(stepId: string): void;
     isDeletable(stepId: string): boolean;
     tryDelete(stepId: string): boolean;
@@ -1225,6 +1268,7 @@ interface StepsDesignerExtensionConfiguration {
     container?: ContainerStepExtensionConfiguration;
     switch?: SwitchStepExtensionConfiguration;
     task?: TaskStepExtensionConfiguration;
+    launchPad?: LaunchPadStepExtensionConfiguration;
 }
 declare class StepsDesignerExtension implements DesignerExtension {
     readonly steps: StepExtension<Step>[];
@@ -1378,5 +1422,5 @@ declare class Designer<TDefinition extends Definition = Definition> {
     private getHistoryController;
 }
 
-export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ComponentDom, ControlBarApi, CustomActionController, DefaultRegionComponentViewExtension, DefaultRegionView, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerDesignerExtension, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderDirection, RectPlaceholder, RectPlaceholderView, SelectStepBehaviorEndToken, ServicesResolver, SimpleEvent, StartStopRootComponentDesignerExtension, StartStopRootComponentExtension, StepComponent, StepExtensionResolver, StepsDesignerExtension, TYPE, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, ViewportApi, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
-export type { Attributes, Badge, BadgeExtension, BadgeView, BadgesDecorator, BadgesResult, BaseClickCommand, Behavior, BehaviorEndToken, ClickBehaviorWrapper, ClickBehaviorWrapperExtension, ClickCommand, ClickDetails, Component, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultViewportControllerConfiguration, DefaultViewportControllerExtensionConfiguration, DefinitionChangedEvent, DesignerConfiguration, DesignerExtension, DraggedComponent, DraggedComponentExtension, EditorsConfiguration, FoundPlaceholders, Grid, GridExtension, I18n, KeyboardConfiguration, LineGridConfiguration, NextScale, OpenFolderClickCommand, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderExtension, PlaceholderView, PreferenceStorage, RectPlaceholderConfiguration, RegionComponentViewContentFactory, RegionComponentViewExtension, RegionView, RegionViewFactory, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, SimpleEventListener, StartStopRootComponentExtensionConfiguration, StartStopRootComponentViewConfiguration, StateModifierDependency, StepBadgesDecoratorExtension, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceRootSequence };
+export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ComponentDom, ControlBarApi, CustomActionController, DefaultRegionComponentViewExtension, DefaultRegionView, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerDesignerExtension, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderController, PlaceholderDirection, PlaceholderGapOrientation, RectPlaceholder, RectPlaceholderView, SelectStepBehaviorEndToken, ServicesResolver, SimpleEvent, StartStopRootComponentDesignerExtension, StartStopRootComponentExtension, StepComponent, StepExtensionResolver, StepsDesignerExtension, TYPE, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, ViewportApi, WorkspaceApi, createContainerStepComponentViewFactory, createLaunchPadStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
+export type { Attributes, Badge, BadgeExtension, BadgeView, BadgesDecorator, BadgesResult, BaseClickCommand, Behavior, BehaviorEndToken, BranchNamesResolver, ClickBehaviorWrapper, ClickBehaviorWrapperExtension, ClickCommand, ClickDetails, Component, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultViewportControllerConfiguration, DefaultViewportControllerExtensionConfiguration, DefinitionChangedEvent, DesignerConfiguration, DesignerExtension, DraggedComponent, DraggedComponentExtension, EditorsConfiguration, FoundPlaceholders, Grid, GridExtension, I18n, KeyboardConfiguration, LaunchPadStepComponentViewConfiguration, LaunchPadStepExtensionConfiguration, LineGridConfiguration, NextScale, OpenFolderClickCommand, Placeholder, PlaceholderConfiguration, PlaceholderExtension, PlaceholderView, PreferenceStorage, RectPlaceholderConfiguration, RegionComponentViewContentFactory, RegionComponentViewExtension, RegionView, RegionViewFactory, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, SimpleEventListener, StartStopRootComponentExtensionConfiguration, StartStopRootComponentViewConfiguration, StateModifierDependency, StepBadgesDecoratorExtension, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceRootSequence };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer",
 	"description": "Customizable no-code component for building flow-based programming applications.",
-	"version": "0.29.2",
+	"version": "0.30.1",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

package/sass/designer-dark.scss

@@ -65,4 +65,10 @@
 	$outputFillColor: #707070
 );
 @include sqd-theme-switch-step-component('dark', $inputStrokeColor: #707070, $inputFillColor: #c6c6c6);
+@include sqd-theme-launch-pad-step-component(
+	'dark',
+	$emptyInputStrokeColor: #707070,
+	$emptyInputFillColor: #c6c6c6,
+	$emptyOutputFillColor: #707070
+);
 @include sqd-theme-container-step-component('dark', $inputStrokeColor: #707070, $inputFillColor: #c6c6c6);

package/sass/designer-light.scss

@@ -17,4 +17,5 @@
 
 @include sqd-theme-task-step-component('light');
 @include sqd-theme-switch-step-component('light');
+@include sqd-theme-launch-pad-step-component('light');
 @include sqd-theme-container-step-component('light');

package/sass/designer-soft.scss

@@ -44,4 +44,5 @@ $joinColor: #2a2a2a;
 	$labelSecondaryFillColor: #e9e9e9,
 	$inputStrokeColor: $joinColor
 );
+@include sqd-theme-launch-pad-step-component('soft', $emptyInputStrokeColor: $joinColor, $emptyOutputFillColor: $joinColor);
 @include sqd-theme-container-step-component('soft', $labelFillColor: #3747dd, $inputStrokeColor: $joinColor);

package/sass/designer-theme.scss

@@ -354,6 +354,32 @@
 	}
 }
 
+@mixin sqd-theme-launch-pad-step-component(
+	$theme,
+	$stepType: '',
+	$emptyInputStrokeWidth: 2,
+	$emptyInputStrokeColor: #000,
+	$emptyInputFillColor: #fff,
+	$emptyOutputFillColor: #000,
+	$emptyOutputStrokeWidth: 0,
+	$emptyOutputStrokeColor: #000
+) {
+	.sqd-theme-#{$theme} .sqd-step-launch-pad#{if($stepType != '', '.sqd-type-' + $stepType, '')} {
+		& > g > {
+			@include _sqd-input(
+				$inputFillColor: $emptyInputFillColor,
+				$inputStrokeWidth: $emptyInputStrokeWidth,
+				$inputStrokeColor: $emptyInputStrokeColor
+			);
+			@include _sqd-output(
+				$outputFillColor: $emptyOutputFillColor,
+				$outputStrokeWidth: $emptyOutputStrokeWidth,
+				$outputStrokeColor: $emptyOutputStrokeColor
+			);
+		}
+	}
+}
+
 @mixin sqd-theme-container-step-component(
 	$theme,
 	$stepType: '',