npm - @synerise/ds-step-card - Versions diffs - 1.2.38 → 1.2.40 - Mend

@synerise/ds-step-card 1.2.38 → 1.2.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/CHANGELOG.md +8 -0
package/README.md +58 -37
package/dist/StepCard.d.ts +2 -2
package/dist/StepCard.js +109 -139
package/dist/StepCard.styles.d.ts +20 -20
package/dist/StepCard.styles.js +62 -62
package/dist/StepCard.types.d.ts +2 -2
package/dist/StepCard.types.js +1 -1
package/dist/hooks/useDefaultTexts.d.ts +1 -1
package/dist/hooks/useDefaultTexts.js +53 -51
package/dist/index.js +4 -1
package/dist/modules.d.js +1 -1
package/dist/modules.d.ts +0 -0
package/package.json +10 -10

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,14 @@
 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
 ## [1.2.38](https://github.com/Synerise/synerise-design/compare/@synerise/ds-step-card@1.2.37...@synerise/ds-step-card@1.2.38) (2026-03-09)
 **Note:** Version bump only for package @synerise/ds-step-card

package/README.md CHANGED Viewed

@@ -15,29 +15,30 @@ yarn add @synerise/ds-step-card
 ## Usage
-```
+```jsx
 import StepCard from '@synerise/ds-step-card'
 <StepCard
-matching={true}
-onChangeMatching={(matchingValue) => {}}
-name={'funnel'}
-onChangeName={(name) => {}}
-onDuplicate={() => {}}
-onDelete={() => {}}
-texts={{
-  matching: 'Matching',
-  notMatching: 'Not matching',
-  namePlaceholder: 'Placeholder',
-  moveTooltip: 'Move',
-  deleteTooltip: 'Delete',
-  duplicateTooltip: 'Duplicate',
-}}
-footer={<span>Footer</span>}
+  matching={true}
+  onChangeMatching={(matchingValue) => {}}
+  name={'funnel'}
+  onMove={(index, offset) => reorder(index, offset)}
+  expressionIndex={0}
+  expressionCount={3}
+  onDuplicate={() => {}}
+  onDelete={() => {}}
+  texts={{
+    matching: 'Matching',
+    notMatching: 'Not matching',
+    namePlaceholder: 'Placeholder',
+    moveTooltip: 'Move',
+    deleteTooltip: 'Delete',
+    duplicateTooltip: 'Duplicate',
+  }}
+  footer={<span>Footer</span>}
 >
-<span>Content</span>
+  <span>Content</span>
 </StepCard>
 ```
 ## Demo
@@ -46,25 +47,45 @@ footer={<span>Footer</span>}
 ## API
-| Property         | Description                                                 | Type                        | Default |
-| ---------------- | ----------------------------------------------------------- | --------------------------- | ------- |
-| matching         | Main matching configuration                                 | : MatchingProps             | -       |
-| onChangeMatching | Function called when user change value of StepCard matching | (matching: boolean) => void | -       |
-| onChangeName     | Function called when user change name of StepCard           | (name: string) => void      | -       |
-| onDelete         | Function called when user click on delete StepCard icon     | () => void                  | -       |
-| onDuplicate      | Function called when user click on duplicate StepCard icon  | () => void                  | -       |
-| footer           | React node to inject as footer of StepCard React.ReactNode  | -                           |
-| headerRightSide  | React node to inject into header right side slot            | React.ReactNode             | -       |
-| texts            | Object with translations                                    | StepCardTexts               | -       |
-| readonly         | Toggles editability (cruds, step name, draggability)        | boolean                     | -       |
+| Property                | Description                                                                                             | Type                                                                  | Default |
+| ----------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------- |
+| matching                | Current matching state; shown via Matching toggle                                                       | boolean                                                               | -       |
+| onMove                  | Called after 1000ms debounce with current index and cumulative offset                                   | (index: number, offset: number) => void                               | -       |
+| expressionIndex         | Current position in the list                                                                            | number                                                                | -       |
+| expressionCount         | Total number of steps; used to disable move up/down at boundaries                                       | number                                                                | -       |
+| name                    | Step name                                                                                               | string                                                                | -       |
+| children                | Condition content rendered in the body                                                                  | React.ReactNode                                                       | -       |
+| footer                  | Content rendered in the footer section                                                                  | React.ReactNode                                                       | -       |
+| onChangeMatching        | Called when the matching toggle is clicked                                                              | (matching: boolean) => void                                           | -       |
+| onDelete                | Called when delete icon is clicked                                                                      | () => void                                                            | -       |
+| onDuplicate             | Called when duplicate icon is clicked                                                                   | () => void                                                            | -       |
+| texts                   | Object with translations                                                                                | Partial\<StepCardTexts\>                                              | -       |
+| isHeaderVisible         | Whether to render the header section                                                                    | boolean                                                               | `true`  |
+| isDraggable             | Shows drag handle icon and enables drag cursor                                                          | boolean                                                               | `true`  |
+| readOnly                | Hides cruds, drag handle, and disables matching toggle                                                  | boolean                                                               | `false` |
+| singleStepCondition     | Removes bottom padding from body                                                                        | boolean                                                               | `false` |
+| headerRightSide         | Static content in the header right slot                                                                 | React.ReactNode                                                       | -       |
+| renderHeaderRightSide   | Dynamic right-side renderer; also called in drag placeholder with `placeholder: true`                   | (index: number, options?: { placeholder?: boolean }) => React.ReactNode | -     |
+| getMoveByLabel          | Custom accessible label for the pending move                                                            | (moveByOffset: number) => string                                      | -       |
+| dropLabel               | Content shown in the drag placeholder (blue dashed area)                                               | React.ReactNode                                                       | -       |
+| additionalFields        | Extra content rendered between body and footer, separated by a border                                   | JSX.Element                                                           | -       |
+| expressionMoved         | Set `true` to show a success "Moved" alert for 2000ms                                                  | boolean                                                               | -       |
+| dragHandleProps         | dnd-kit drag handle attributes/listeners (from `@synerise/ds-sortable`)                                | DragHandlePropType                                                    | -       |
+| isDragged               | When `true`, hides body content and shows the blue dashed placeholder                                  | boolean                                                               | -       |
+| isDragOverlay           | When `true`, renders a compact preview (76px, no footer, no right side)                                | boolean                                                               | -       |
+| dragIndex               | Index passed to `renderHeaderRightSide` during drag overlay rendering                                  | number                                                                | -       |
 ### StepCardTexts
-| Property         | Description                                               | Type   | Default        |
-| ---------------- | --------------------------------------------------------- | ------ | -------------- |
-| matching         | Label of Toggle component, visible when matching is true  | string | 'Matching'     |
-| notMatching      | Label of Toggle component, visible when matching is false | string | 'Not matching' |
-| namePlaceholder  | Placeholder of step name                                  | string | 'Name'         |
-| moveTooltip      | Tooltip on move icon                                      | string | 'Move'         |
-| deleteTooltip    | Tooltip on delete icon                                    | string | 'Delete'       |
-| duplicateTooltip | Tooltip on duplicate icon                                 | string | 'Duplicate'    |
+| Property         | Description                                               | Type   | Default          |
+| ---------------- | --------------------------------------------------------- | ------ | ---------------- |
+| matching         | Label of Toggle component, visible when matching is true  | string | `'Performed'`    |
+| notMatching      | Label of Toggle component, visible when matching is false | string | `'Not performed'`|
+| conditionType    | Condition type label when matching                        | string | `'event'`        |
+| notConditionType | Condition type label when not matching                    | string | `'event'`        |
+| namePlaceholder  | Placeholder of step name                                  | string | `'Name'`         |
+| moveTooltip      | Tooltip on move icon                                      | string | `'Move'`         |
+| moveUpTooltip    | Tooltip on move up icon                                   | string | `'Move Up'`      |
+| moveDownTooltip  | Tooltip on move down icon                                 | string | `'Move Down'`    |
+| deleteTooltip    | Tooltip on delete icon                                    | string | `'Delete'`       |
+| duplicateTooltip | Tooltip on duplicate icon                                 | string | `'Duplicate'`    |

package/dist/StepCard.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/dist/hooks/useDefaultTexts.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/dist/modules.d.js CHANGED Viewed

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

package/dist/modules.d.ts ADDED Viewed

File without changes

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-step-card",
-  "version": "1.2.38",
+  "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.43",
-    "@synerise/ds-cruds": "^1.1.0",
-    "@synerise/ds-icon": "^1.14.1",
-    "@synerise/ds-logic": "^1.1.30",
-    "@synerise/ds-typography": "^1.1.11"
+    "@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.12"
+    "@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": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }