@synerise/ds-step-card 1.2.39 → 1.2.40

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.40](https://github.com/Synerise/synerise-design/compare/@synerise/ds-step-card@1.2.39...@synerise/ds-step-card@1.2.40) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-step-card
+
 ## [1.2.39](https://github.com/Synerise/synerise-design/compare/@synerise/ds-step-card@1.2.38...@synerise/ds-step-card@1.2.39) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-step-card

package/dist/StepCard.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type StepCardProps } from './StepCard.types';
+import { default as React } from 'react';
+import { StepCardProps } from './StepCard.types';
 export declare const REORDER_THROTTLE = 1000;
 declare const StepCard: React.ForwardRefExoticComponent<StepCardProps & React.RefAttributes<HTMLDivElement>>;
 export default StepCard;

package/dist/StepCard.js

@@ -1,114 +1,91 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { createRef, forwardRef, useEffect, useRef, useState } from 'react';
-import { InlineAlert } from '@synerise/ds-alert';
-import Cruds from '@synerise/ds-cruds';
-import { DragHandleM } from '@synerise/ds-icon';
-import { Matching } from '@synerise/ds-logic';
-import { Title } from '@synerise/ds-typography';
-import * as S from './StepCard.styles';
-import { useDefaultTexts } from './hooks/useDefaultTexts';
-export var REORDER_THROTTLE = 1000;
-var MOVE_SUCCESS_FEEDBACK_DURATION = 2000;
-var StepCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    onDelete = _ref.onDelete,
-    onDuplicate = _ref.onDuplicate,
-    onMove = _ref.onMove,
-    expressionIndex = _ref.expressionIndex,
-    expressionMoved = _ref.expressionMoved,
-    expressionCount = _ref.expressionCount,
-    footer = _ref.footer,
-    matching = _ref.matching,
-    onChangeMatching = _ref.onChangeMatching,
-    texts = _ref.texts,
-    headerRightSide = _ref.headerRightSide,
-    renderHeaderRightSide = _ref.renderHeaderRightSide,
-    _ref$isHeaderVisible = _ref.isHeaderVisible,
-    isHeaderVisible = _ref$isHeaderVisible === void 0 ? true : _ref$isHeaderVisible,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _ref$singleStepCondit = _ref.singleStepCondition,
-    singleStepCondition = _ref$singleStepCondit === void 0 ? false : _ref$singleStepCondit,
-    getMoveByLabel = _ref.getMoveByLabel,
-    _ref$isDraggable = _ref.isDraggable,
-    isDraggable = _ref$isDraggable === void 0 ? true : _ref$isDraggable,
-    isDragged = _ref.isDragged,
-    isDragOverlay = _ref.isDragOverlay,
-    dragIndex = _ref.dragIndex,
-    dropLabel = _ref.dropLabel,
-    dragHandleProps = _ref.dragHandleProps,
-    additionalFields = _ref.additionalFields;
-  var allTexts = useDefaultTexts(texts);
-  var _useState = useState(0),
-    moveByOffset = _useState[0],
-    setMoveByOffset = _useState[1];
-  var moveUpInactive = expressionIndex + moveByOffset <= 0;
-  var moveDownInactive = expressionIndex + moveByOffset >= expressionCount - 1;
-  var timeoutMovedRef = useRef(null);
-  var _useState2 = useState(expressionMoved),
-    recentlyMoved = _useState2[0],
-    setRecentlyMoved = _useState2[1];
-  var spinnerRef = /*#__PURE__*/createRef();
-  var countDownSpinnerElement = /*#__PURE__*/React.createElement(S.CountDownWrapper, null, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24"
-  }, /*#__PURE__*/React.createElement(S.CountDownSpinner, {
-    "data-test": moveByOffset,
-    duration: REORDER_THROTTLE / 1000,
-    "stroke-dashoffset": "40",
-    "stroke-linecap": "butt"
-  }, /*#__PURE__*/React.createElement("circle", {
-    ref: spinnerRef,
-    r: "5",
-    cx: "12",
-    cy: "12",
-    fill: "transparent",
-    transform: "rotate(-90,12,12)"
-  }))));
-  var resetAnimation = function resetAnimation() {
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, createRef, useEffect } from "react";
+import { InlineAlert } from "@synerise/ds-alert";
+import Cruds from "@synerise/ds-cruds";
+import { DragHandleM } from "@synerise/ds-icon";
+import { Matching } from "@synerise/ds-logic";
+import { Title } from "@synerise/ds-typography";
+import { Container, DragPlaceholder, DragPlaceholderContent, DragPlaceholderTag, Content, Header, LeftSide, DragIcon, StepCardTitle, Middle, RightSide, Body, AdditionalFields, Footer, CrudsWrapper, MoveByOffset, MoveByOffsetLabel, RecentlyMoved, CountDownWrapper, CountDownSpinner } from "./StepCard.styles.js";
+import { useDefaultTexts } from "./hooks/useDefaultTexts.js";
+const REORDER_THROTTLE = 1e3;
+const MOVE_SUCCESS_FEEDBACK_DURATION = 2e3;
+const StepCard = forwardRef(({
+  children,
+  onDelete,
+  onDuplicate,
+  onMove,
+  expressionIndex,
+  expressionMoved,
+  expressionCount,
+  footer,
+  matching,
+  onChangeMatching,
+  texts,
+  headerRightSide,
+  renderHeaderRightSide,
+  isHeaderVisible = true,
+  readOnly = false,
+  singleStepCondition = false,
+  getMoveByLabel,
+  isDraggable = true,
+  isDragged,
+  isDragOverlay,
+  dragIndex,
+  dropLabel,
+  dragHandleProps,
+  additionalFields
+}, ref) => {
+  const allTexts = useDefaultTexts(texts);
+  const [moveByOffset, setMoveByOffset] = useState(0);
+  const moveUpInactive = expressionIndex + moveByOffset <= 0;
+  const moveDownInactive = expressionIndex + moveByOffset >= expressionCount - 1;
+  const timeoutMovedRef = useRef(null);
+  const [recentlyMoved, setRecentlyMoved] = useState(expressionMoved);
+  const spinnerRef = createRef();
+  const countDownSpinnerElement = /* @__PURE__ */ jsx(CountDownWrapper, { children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(CountDownSpinner, { "data-test": moveByOffset, duration: REORDER_THROTTLE / 1e3, "stroke-dashoffset": "40", "stroke-linecap": "butt", children: /* @__PURE__ */ jsx("circle", { ref: spinnerRef, r: "5", cx: "12", cy: "12", fill: "transparent", transform: "rotate(-90,12,12)" }) }) }) });
+  const resetAnimation = () => {
     if (spinnerRef.current && spinnerRef.current.parentElement) {
-      var svgGroupElem = spinnerRef.current.parentElement;
-      svgGroupElem.style.transitionProperty = 'none';
-      svgGroupElem.style.strokeDashoffset = '75';
+      const svgGroupElem = spinnerRef.current.parentElement;
+      svgGroupElem.style.transitionProperty = "none";
+      svgGroupElem.style.strokeDashoffset = "75";
     }
   };
-  var startAnimation = function startAnimation() {
+  const startAnimation = () => {
     if (spinnerRef.current && spinnerRef.current.parentElement) {
-      var svgGroupElem = spinnerRef.current.parentElement;
-      svgGroupElem.style.transitionDuration = REORDER_THROTTLE / 1000 + "s";
-      svgGroupElem.style.transitionProperty = 'stroke-dashoffset';
-      svgGroupElem.style.strokeDashoffset = '40';
+      const svgGroupElem = spinnerRef.current.parentElement;
+      svgGroupElem.style.transitionDuration = `${REORDER_THROTTLE / 1e3}s`;
+      svgGroupElem.style.transitionProperty = "stroke-dashoffset";
+      svgGroupElem.style.strokeDashoffset = "40";
     }
   };
-  var onMoveUp = function onMoveUp() {
+  const onMoveUp = () => {
     if (!moveUpInactive) {
       resetAnimation();
       setMoveByOffset(moveByOffset - 1);
     }
   };
-  var onMoveDown = function onMoveDown() {
+  const onMoveDown = () => {
     if (!moveDownInactive) {
       resetAnimation();
       setMoveByOffset(moveByOffset + 1);
     }
   };
-  useEffect(function () {
+  useEffect(() => {
     if (expressionMoved) {
       setRecentlyMoved(expressionMoved);
-      timeoutMovedRef.current = setTimeout(function () {
-        return setRecentlyMoved(false);
-      }, MOVE_SUCCESS_FEEDBACK_DURATION);
+      timeoutMovedRef.current = setTimeout(() => setRecentlyMoved(false), MOVE_SUCCESS_FEEDBACK_DURATION);
     }
     return resetMoveSuccess;
   }, [expressionMoved, expressionIndex]);
-  var resetMoveSuccess = function resetMoveSuccess() {
+  const resetMoveSuccess = () => {
     timeoutMovedRef.current && clearTimeout(timeoutMovedRef.current);
     setRecentlyMoved(false);
   };
-  useEffect(function () {
-    var timer;
-    var timer2;
+  useEffect(() => {
+    let timer;
+    let timer2;
     if (moveByOffset !== 0) {
-      timer = setTimeout(function () {
+      timer = setTimeout(() => {
         onMove(expressionIndex, moveByOffset);
         setMoveByOffset(0);
       }, REORDER_THROTTLE);
@@ -117,62 +94,55 @@ var StepCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (moveByOffset) {
       timer2 = setTimeout(startAnimation, 0);
     }
-    return function () {
+    return () => {
       timer && clearTimeout(timer);
       timer2 && clearTimeout(timer2);
     };
   });
-  var moveByOffsetLabel = getMoveByLabel ? getMoveByLabel(moveByOffset) : "Move " + Math.abs(moveByOffset) + " " + (moveByOffset < 0 ? 'up' : 'down') + "...";
-  var renderRightSide = function renderRightSide() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, !readOnly && /*#__PURE__*/React.createElement(S.CrudsWrapper, null, /*#__PURE__*/React.createElement(S.MoveByOffset, {
-      offset: moveByOffset
-    }, countDownSpinnerElement, ' ', /*#__PURE__*/React.createElement(S.MoveByOffsetLabel, null, moveByOffsetLabel)), /*#__PURE__*/React.createElement(Cruds, {
-      onMoveUp: onMoveUp,
-      moveUpTooltip: allTexts.moveUpTooltip,
-      moveUpInactive: moveUpInactive,
-      onMoveDown: onMoveDown,
-      moveDownTooltip: allTexts.moveDownTooltip,
-      moveDownInactive: moveDownInactive,
-      deleteTooltip: allTexts.deleteTooltip,
-      onDelete: onDelete,
-      duplicateTooltip: allTexts.duplicateTooltip,
-      onDuplicate: onDuplicate
-    })), recentlyMoved && /*#__PURE__*/React.createElement(S.RecentlyMoved, {
-      duration: MOVE_SUCCESS_FEEDBACK_DURATION
-    }, /*#__PURE__*/React.createElement(InlineAlert, {
-      type: "success",
-      message: "Moved"
-    })), renderHeaderRightSide ? renderHeaderRightSide(dragIndex != null ? dragIndex : expressionIndex) : headerRightSide);
+  const moveByOffsetLabel = getMoveByLabel ? getMoveByLabel(moveByOffset) : `Move ${Math.abs(moveByOffset)} ${moveByOffset < 0 ? "up" : "down"}...`;
+  const renderRightSide = () => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      !readOnly && /* @__PURE__ */ jsxs(CrudsWrapper, { children: [
+        /* @__PURE__ */ jsxs(MoveByOffset, { offset: moveByOffset, children: [
+          countDownSpinnerElement,
+          " ",
+          /* @__PURE__ */ jsx(MoveByOffsetLabel, { children: moveByOffsetLabel })
+        ] }),
+        /* @__PURE__ */ jsx(Cruds, { onMoveUp, moveUpTooltip: allTexts.moveUpTooltip, moveUpInactive, onMoveDown, moveDownTooltip: allTexts.moveDownTooltip, moveDownInactive, deleteTooltip: allTexts.deleteTooltip, onDelete, duplicateTooltip: allTexts.duplicateTooltip, onDuplicate })
+      ] }),
+      recentlyMoved && /* @__PURE__ */ jsx(RecentlyMoved, { duration: MOVE_SUCCESS_FEEDBACK_DURATION, children: /* @__PURE__ */ jsx(InlineAlert, { type: "success", message: "Moved" }) }),
+      renderHeaderRightSide ? renderHeaderRightSide(dragIndex ?? expressionIndex) : headerRightSide
+    ] });
   };
-  return /*#__PURE__*/React.createElement(S.Container, {
-    isDragged: isDragged,
-    isDragOverlay: isDragOverlay,
-    ref: ref
-  }, /*#__PURE__*/React.createElement(S.DragPlaceholder, null, dropLabel && /*#__PURE__*/React.createElement(S.DragPlaceholderContent, null, dropLabel), /*#__PURE__*/React.createElement(S.DragPlaceholderTag, null, renderHeaderRightSide && dragIndex !== undefined ? renderHeaderRightSide(dragIndex, {
-    placeholder: true
-  }) : headerRightSide)), /*#__PURE__*/React.createElement(S.Content, null, isHeaderVisible && /*#__PURE__*/React.createElement(S.Header, {
-    isDraggable: !readOnly && isDraggable,
-    onMouseOver: resetMoveSuccess,
-    onFocus: resetMoveSuccess
-  }, /*#__PURE__*/React.createElement(S.LeftSide, {
-    isDraggable: !readOnly && isDraggable
-  }, !readOnly && isDraggable && /*#__PURE__*/React.createElement(S.DragIcon, _extends({
-    component: /*#__PURE__*/React.createElement(DragHandleM, null)
-  }, !readOnly && isDraggable ? dragHandleProps : {})), matching !== undefined && onChangeMatching && /*#__PURE__*/React.createElement(S.StepCardTitle, null, /*#__PURE__*/React.createElement(Matching, {
-    matching: matching,
-    onChange: onChangeMatching,
-    texts: {
-      matching: allTexts.matching,
-      notMatching: allTexts.notMatching
-    },
-    readOnly: readOnly
-  }), /*#__PURE__*/React.createElement(Title, {
-    withoutMargin: true,
-    level: 4
-  }, matching ? allTexts.conditionType : allTexts.notConditionType))), !readOnly && isDraggable && /*#__PURE__*/React.createElement(S.Middle, dragHandleProps), (!readOnly || headerRightSide || renderHeaderRightSide) && /*#__PURE__*/React.createElement(S.RightSide, {
-    className: "step-card-right-side"
-  }, renderRightSide())), /*#__PURE__*/React.createElement(S.Body, {
-    singleStepCondition: singleStepCondition
-  }, children), additionalFields && /*#__PURE__*/React.createElement(S.AdditionalFields, null, additionalFields), footer && /*#__PURE__*/React.createElement(S.Footer, null, footer)));
+  return /* @__PURE__ */ jsxs(Container, { isDragged, isDragOverlay, ref, children: [
+    /* @__PURE__ */ jsxs(DragPlaceholder, { children: [
+      dropLabel && /* @__PURE__ */ jsx(DragPlaceholderContent, { children: dropLabel }),
+      /* @__PURE__ */ jsx(DragPlaceholderTag, { children: renderHeaderRightSide && dragIndex !== void 0 ? renderHeaderRightSide(dragIndex, {
+        placeholder: true
+      }) : headerRightSide })
+    ] }),
+    /* @__PURE__ */ jsxs(Content, { children: [
+      isHeaderVisible && /* @__PURE__ */ jsxs(Header, { isDraggable: !readOnly && isDraggable, onMouseOver: resetMoveSuccess, onFocus: resetMoveSuccess, children: [
+        /* @__PURE__ */ jsxs(LeftSide, { isDraggable: !readOnly && isDraggable, children: [
+          !readOnly && isDraggable && /* @__PURE__ */ jsx(DragIcon, { component: /* @__PURE__ */ jsx(DragHandleM, {}), ...!readOnly && isDraggable ? dragHandleProps : {} }),
+          matching !== void 0 && onChangeMatching && /* @__PURE__ */ jsxs(StepCardTitle, { children: [
+            /* @__PURE__ */ jsx(Matching, { matching, onChange: onChangeMatching, texts: {
+              matching: allTexts.matching,
+              notMatching: allTexts.notMatching
+            }, readOnly }),
+            /* @__PURE__ */ jsx(Title, { withoutMargin: true, level: 4, children: matching ? allTexts.conditionType : allTexts.notConditionType })
+          ] })
+        ] }),
+        !readOnly && isDraggable && /* @__PURE__ */ jsx(Middle, { ...dragHandleProps }),
+        (!readOnly || headerRightSide || renderHeaderRightSide) && /* @__PURE__ */ jsx(RightSide, { className: "step-card-right-side", children: renderRightSide() })
+      ] }),
+      /* @__PURE__ */ jsx(Body, { singleStepCondition, children }),
+      additionalFields && /* @__PURE__ */ jsx(AdditionalFields, { children: additionalFields }),
+      footer && /* @__PURE__ */ jsx(Footer, { children: footer })
+    ] })
+  ] });
 });
-export default StepCard;
+export {
+  REORDER_THROTTLE,
+  StepCard as default
+};

package/dist/StepCard.styles.d.ts

@@ -1,36 +1,36 @@
-import { type StyledIcon } from '@synerise/ds-icon';
-export declare const DragPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DragPlaceholderContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DragPlaceholderTag: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
+import { StyledIcon } from '@synerise/ds-icon';
+export declare const DragPlaceholder: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DragPlaceholderContent: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DragPlaceholderTag: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Content: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Container: import('styled-components').StyledComponent<"div", any, {
     isDragged?: boolean;
     isDragOverlay?: boolean;
 }, never>;
-export declare const RecentlyMoved: import("styled-components").StyledComponent<"span", any, {
+export declare const RecentlyMoved: import('styled-components').StyledComponent<"span", any, {
     duration: number;
 }, never>;
-export declare const CountDownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MoveByOffsetLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const CountDownSpinner: import("styled-components").StyledComponent<"g", any, {
+export declare const CountDownWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const MoveByOffsetLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const CountDownSpinner: import('styled-components').StyledComponent<"g", any, {
     duration: number;
 }, never>;
-export declare const MoveByOffset: import("styled-components").StyledComponent<"span", any, {
+export declare const MoveByOffset: import('styled-components').StyledComponent<"span", any, {
     offset: number;
 }, never>;
-export declare const CrudsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CrudsWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const DragIcon: StyledIcon;
-export declare const Header: import("styled-components").StyledComponent<"div", any, {
+export declare const Header: import('styled-components').StyledComponent<"div", any, {
     isDraggable?: boolean;
 }, never>;
-export declare const StepCardTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Middle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LeftSide: import("styled-components").StyledComponent<"div", any, {
+export declare const StepCardTitle: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Middle: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const LeftSide: import('styled-components').StyledComponent<"div", any, {
     isDraggable?: boolean;
 }, never>;
-export declare const RightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Body: import("styled-components").StyledComponent<"div", any, {
+export declare const RightSide: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Body: import('styled-components').StyledComponent<"div", any, {
     singleStepCondition: boolean;
 }, never>;
-export declare const AdditionalFields: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Footer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AdditionalFields: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Footer: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/StepCard.styles.js

@@ -1,111 +1,111 @@
-import styled, { css, keyframes } from 'styled-components';
-import Icon from '@synerise/ds-icon';
-var fadeout = keyframes(["from{opacity:1}to{opacity:0;}"]);
-export var DragPlaceholder = styled.div.withConfig({
+import styled, { css, keyframes } from "styled-components";
+import Icon from "@synerise/ds-icon";
+const fadeout = /* @__PURE__ */ keyframes(["from{opacity:1}to{opacity:0;}"]);
+const DragPlaceholder = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StepCardstyles__DragPlaceholder",
   componentId: "sc-45dbps-0"
 })(["opacity:0;pointer-events:none;visibility:hidden;display:none;align-items:center;"]);
-export var DragPlaceholderContent = styled.div.withConfig({
+const DragPlaceholderContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StepCardstyles__DragPlaceholderContent",
   componentId: "sc-45dbps-1"
-})(["position:absolute;left:0;top:0;width:100%;height:calc(100% - 24px);display:flex;align-items:center;justify-content:center;color:", ";"], function (props) {
-  return props.theme.palette['blue-600'];
-});
-export var DragPlaceholderTag = styled.div.withConfig({
+})(["position:absolute;left:0;top:0;width:100%;height:calc(100% - 24px);display:flex;align-items:center;justify-content:center;color:", ";"], (props) => props.theme.palette["blue-600"]);
+const DragPlaceholderTag = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StepCardstyles__DragPlaceholderTag",
   componentId: "sc-45dbps-2"
 })(["position:absolute;right:24px;top:22px;opacity:0.4;"]);
-export var Content = styled.div.withConfig({
+const Content = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StepCardstyles__Content",
   componentId: "sc-45dbps-3"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:", ";box-shadow:0 4px 12px 0 #2329360a;border-radius:3px;"], function (props) {
-  return props.theme.palette.white;
-});
-export var Container = styled.div.withConfig({
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:", ";box-shadow:0 4px 12px 0 #2329360a;border-radius:3px;"], (props) => props.theme.palette.white);
+const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StepCardstyles__Container",
   componentId: "sc-45dbps-4"
-})(["width:100%;min-width:594px;", ""], function (props) {
-  return (props.isDragged || props.isDragOverlay) && css(["cursor:grabbing;width:100%;opacity:1 !important;padding:0;", " ", " ", "", "{visibility:visible;opacity:1;}", "{position:absolute;opacity:0;height:0;}", "{display:none;}"], props.isDragged && // dragged item - blue placeholder
-  css(["height:100px;", "", "{visibility:visible;opacity:1;display:block;}", "{visibility:hidden;opacity:0;}"], DragPlaceholder, DragPlaceholder, Content), props.isDragOverlay && // grabbed item on top layer
-  css(["", "{height:76px;margin-bottom:24px;display:flex;align-items:center;justify-content:center;}", "{display:none;}"], Content, RightSide), DragIcon, DragIcon, Body, Footer);
-});
-export var RecentlyMoved = styled.span.withConfig({
+})(["width:100%;min-width:594px;", ""], (props) => (props.isDragged || props.isDragOverlay) && css(["cursor:grabbing;width:100%;opacity:1 !important;padding:0;", " ", " ", "", "{visibility:visible;opacity:1;}", "{position:absolute;opacity:0;height:0;}", "{display:none;}"], props.isDragged && // dragged item - blue placeholder
+css(["height:100px;", "", "{visibility:visible;opacity:1;display:block;}", "{visibility:hidden;opacity:0;}"], DragPlaceholder, DragPlaceholder, Content), props.isDragOverlay && // grabbed item on top layer
+css(["", "{height:76px;margin-bottom:24px;display:flex;align-items:center;justify-content:center;}", "{display:none;}"], Content, RightSide), DragIcon, DragIcon, Body, Footer));
+const RecentlyMoved = /* @__PURE__ */ styled.span.withConfig({
   displayName: "StepCardstyles__RecentlyMoved",
   componentId: "sc-45dbps-5"
-})(["animation:", " 0.1s linear ", "s 1 forwards;"], fadeout, function (props) {
-  return (props.duration - 200) / 1000;
-});
-export var CountDownWrapper = styled.div.withConfig({
+})(["animation:", " 0.1s linear ", "s 1 forwards;"], fadeout, (props) => (props.duration - 200) / 1e3);
+const CountDownWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StepCardstyles__CountDownWrapper",
   componentId: "sc-45dbps-6"
 })(["vertical-align:middle;display:inline-block;width:24px;height:24px;color:inherit;"]);
-export var MoveByOffsetLabel = styled.span.withConfig({
+const MoveByOffsetLabel = /* @__PURE__ */ styled.span.withConfig({
   displayName: "StepCardstyles__MoveByOffsetLabel",
   componentId: "sc-45dbps-7"
 })([""]);
-export var CountDownSpinner = styled.g.withConfig({
+const CountDownSpinner = /* @__PURE__ */ styled.g.withConfig({
   displayName: "StepCardstyles__CountDownSpinner",
   componentId: "sc-45dbps-8"
-})(["stroke:", ";stroke-width:2px;stroke-dasharray:75;transition:stroke-dashoffset ", "s linear;"], function (props) {
-  return props.theme.palette['grey-500'];
-}, function (props) {
-  return props.duration;
-});
-export var MoveByOffset = styled.span.withConfig({
+})(["stroke:", ";stroke-width:2px;stroke-dasharray:75;transition:stroke-dashoffset ", "s linear;"], (props) => props.theme.palette["grey-500"], (props) => props.duration);
+const MoveByOffset = /* @__PURE__ */ styled.span.withConfig({
   displayName: "StepCardstyles__MoveByOffset",
   componentId: "sc-45dbps-9"
-})(["display:flex;align-items:center;gap:2px;", "{display:", ";}"], MoveByOffsetLabel, function (props) {
-  return props.offset === 0 ? 'none' : 'block';
-});
-export var CrudsWrapper = styled.div.withConfig({
+})(["display:flex;align-items:center;gap:2px;", "{display:", ";}"], MoveByOffsetLabel, (props) => props.offset === 0 ? "none" : "block");
+const CrudsWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StepCardstyles__CrudsWrapper",
   componentId: "sc-45dbps-10"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-end;opacity:0;visibility:hidden;"]);
-export var DragIcon = styled(Icon).withConfig({
+const DragIcon = /* @__PURE__ */ styled(Icon).withConfig({
   displayName: "StepCardstyles__DragIcon",
   componentId: "sc-45dbps-11"
 })(["visibility:hidden;opacity:0;"]);
-export var Header = styled.div.withConfig({
+const Header = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StepCardstyles__Header",
   componentId: "sc-45dbps-12"
-})(["display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;padding:22px 0;margin:0 24px 0 0;width:100%;max-width:calc(100% - 24px);position:relative;cursor:", ";&:hover{", "{display:none;}", "{opacity:1;visibility:visible;}", "{visibility:visible;opacity:1;}}"], function (props) {
-  return props.isDraggable ? 'grab' : 'default';
-}, RecentlyMoved, CrudsWrapper, DragIcon);
-export var StepCardTitle = styled.div.withConfig({
+})(["display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;padding:22px 0;margin:0 24px 0 0;width:100%;max-width:calc(100% - 24px);position:relative;cursor:", ";&:hover{", "{display:none;}", "{opacity:1;visibility:visible;}", "{visibility:visible;opacity:1;}}"], (props) => props.isDraggable ? "grab" : "default", RecentlyMoved, CrudsWrapper, DragIcon);
+const StepCardTitle = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StepCardstyles__StepCardTitle",
   componentId: "sc-45dbps-13"
 })(["display:flex;gap:8px;"]);
-export var Middle = styled.div.withConfig({
+const Middle = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StepCardstyles__Middle",
   componentId: "sc-45dbps-14"
 })(["flex-grow:1;"]);
-export var LeftSide = styled.div.withConfig({
+const LeftSide = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StepCardstyles__LeftSide",
   componentId: "sc-45dbps-15"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding-left:", ";"], function (_ref) {
-  var isDraggable = _ref.isDraggable;
-  return isDraggable ? '0' : '24px';
-});
-export var RightSide = styled.div.withConfig({
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding-left:", ";"], ({
+  isDraggable
+}) => isDraggable ? "0" : "24px");
+const RightSide = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StepCardstyles__RightSide",
   componentId: "sc-45dbps-16"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;> *{margin-left:8px;}"]);
-export var Body = styled.div.withConfig({
+const Body = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StepCardstyles__Body",
   componentId: "sc-45dbps-17"
-})(["padding:", ";width:100%;.ds-conditions{&:first-of-type{padding-top:0;}&:last-of-type{padding-bottom:0;}}"], function (_ref2) {
-  var singleStepCondition = _ref2.singleStepCondition;
-  return singleStepCondition ? '0' : '0 0 24px';
-});
-export var AdditionalFields = styled.div.withConfig({
+})(["padding:", ";width:100%;.ds-conditions{&:first-of-type{padding-top:0;}&:last-of-type{padding-bottom:0;}}"], ({
+  singleStepCondition
+}) => singleStepCondition ? "0" : "0 0 24px");
+const AdditionalFields = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StepCardstyles__AdditionalFields",
   componentId: "sc-45dbps-18"
-})(["width:100%;padding:24px 24px 12px;border-top:1px solid ", ";"], function (props) {
-  return props.theme.palette['grey-200'];
-});
-export var Footer = styled.div.withConfig({
+})(["width:100%;padding:24px 24px 12px;border-top:1px solid ", ";"], (props) => props.theme.palette["grey-200"]);
+const Footer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StepCardstyles__Footer",
   componentId: "sc-45dbps-19"
-})(["background-color:rgba(249,250,251,0.6);border-top:1px solid ", ";padding:16px 24px;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;width:100%;> *{margin-left:8px;}"], function (props) {
-  return props.theme.palette['grey-100'];
-});
+})(["background-color:rgba(249,250,251,0.6);border-top:1px solid ", ";padding:16px 24px;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;width:100%;> *{margin-left:8px;}"], (props) => props.theme.palette["grey-100"]);
+export {
+  AdditionalFields,
+  Body,
+  Container,
+  Content,
+  CountDownSpinner,
+  CountDownWrapper,
+  CrudsWrapper,
+  DragIcon,
+  DragPlaceholder,
+  DragPlaceholderContent,
+  DragPlaceholderTag,
+  Footer,
+  Header,
+  LeftSide,
+  Middle,
+  MoveByOffset,
+  MoveByOffsetLabel,
+  RecentlyMoved,
+  RightSide,
+  StepCardTitle
+};

package/dist/StepCard.types.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
-import type { DragHandlePropType } from '@synerise/ds-sortable';
+import { ReactNode } from 'react';
+import { DragHandlePropType } from '@synerise/ds-sortable';
 export type StepCardTexts = {
     matching: string;
     notMatching: string;

package/dist/StepCard.types.js

@@ -1 +1 @@
-export {};
+

package/dist/hooks/useDefaultTexts.d.ts

@@ -1,2 +1,2 @@
-import { type StepCardTexts } from '../StepCard.types';
+import { StepCardTexts } from '../StepCard.types';
 export declare const useDefaultTexts: (texts?: Partial<StepCardTexts>) => StepCardTexts;

package/dist/hooks/useDefaultTexts.js

@@ -1,52 +1,54 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { useMemo } from 'react';
-import { useIntl } from 'react-intl';
-export var useDefaultTexts = function useDefaultTexts(texts) {
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var allTexts = useMemo(function () {
-    return _extends({
-      matching: formatMessage({
-        id: 'DS.MATCHING.PERFORMED',
-        defaultMessage: 'Performed'
-      }),
-      notMatching: formatMessage({
-        id: 'DS.MATCHING.NOT-PERFORMED',
-        defaultMessage: 'Not performed'
-      }),
-      conditionType: formatMessage({
-        id: 'DS.STEP-CARD.CONDITION-TYPE',
-        defaultMessage: 'event'
-      }),
-      notConditionType: formatMessage({
-        id: 'DS.STEP-CARD.NOT-CONDITION-TYPE',
-        defaultMessage: 'event'
-      }),
-      namePlaceholder: formatMessage({
-        id: 'DS.STEP-CARD.NAME-PLACEHOLDER',
-        defaultMessage: 'Name'
-      }),
-      moveTooltip: formatMessage({
-        id: 'DS.STEP-CARD.MOVE',
-        defaultMessage: 'Move'
-      }),
-      moveUpTooltip: formatMessage({
-        id: 'DS.STEP-CARD.MOVE-UP',
-        defaultMessage: 'Move Up'
-      }),
-      moveDownTooltip: formatMessage({
-        id: 'DS.STEP-CARD.MOVE-DOWN',
-        defaultMessage: 'Move Down'
-      }),
-      deleteTooltip: formatMessage({
-        id: 'DS.STEP-CARD.DELETE',
-        defaultMessage: 'Delete'
-      }),
-      duplicateTooltip: formatMessage({
-        id: 'DS.STEP-CARD.DUPLICATE',
-        defaultMessage: 'Duplicate'
-      })
-    }, texts || {});
-  }, [formatMessage, texts]);
+import { useMemo } from "react";
+import { useIntl } from "react-intl";
+const useDefaultTexts = (texts) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const allTexts = useMemo(() => ({
+    matching: formatMessage({
+      id: "DS.MATCHING.PERFORMED",
+      defaultMessage: "Performed"
+    }),
+    notMatching: formatMessage({
+      id: "DS.MATCHING.NOT-PERFORMED",
+      defaultMessage: "Not performed"
+    }),
+    conditionType: formatMessage({
+      id: "DS.STEP-CARD.CONDITION-TYPE",
+      defaultMessage: "event"
+    }),
+    notConditionType: formatMessage({
+      id: "DS.STEP-CARD.NOT-CONDITION-TYPE",
+      defaultMessage: "event"
+    }),
+    namePlaceholder: formatMessage({
+      id: "DS.STEP-CARD.NAME-PLACEHOLDER",
+      defaultMessage: "Name"
+    }),
+    moveTooltip: formatMessage({
+      id: "DS.STEP-CARD.MOVE",
+      defaultMessage: "Move"
+    }),
+    moveUpTooltip: formatMessage({
+      id: "DS.STEP-CARD.MOVE-UP",
+      defaultMessage: "Move Up"
+    }),
+    moveDownTooltip: formatMessage({
+      id: "DS.STEP-CARD.MOVE-DOWN",
+      defaultMessage: "Move Down"
+    }),
+    deleteTooltip: formatMessage({
+      id: "DS.STEP-CARD.DELETE",
+      defaultMessage: "Delete"
+    }),
+    duplicateTooltip: formatMessage({
+      id: "DS.STEP-CARD.DUPLICATE",
+      defaultMessage: "Duplicate"
+    }),
+    ...texts || {}
+  }), [formatMessage, texts]);
   return allTexts;
-};
+};
+export {
+  useDefaultTexts
+};

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './StepCard';
+import { default as default2 } from "./StepCard.js";
+export {
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-step-card",
-  "version": "1.2.39",
+  "version": "1.2.40",
   "description": "StepCard UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,14 +35,14 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^1.1.44",
-    "@synerise/ds-cruds": "^1.1.1",
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-logic": "^1.1.31",
-    "@synerise/ds-typography": "^1.1.12"
+    "@synerise/ds-alert": "^1.1.45",
+    "@synerise/ds-cruds": "^1.1.2",
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-logic": "^1.1.32",
+    "@synerise/ds-typography": "^1.1.13"
   },
   "devDependencies": {
-    "@synerise/ds-sortable": "^1.3.13"
+    "@synerise/ds-sortable": "^1.3.14"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -50,5 +50,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }