@synerise/ds-step-card 1.0.9 → 1.1.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-step-card@1.0.10...@synerise/ds-step-card@1.1.0) (2025-06-05)
+
+
+### Features
+
+* **filter:** change dnd lib and update ux ([f5a979e](https://github.com/Synerise/synerise-design/commit/f5a979e6c9e5d9c8251c3f57da8ce57c416dadab))
+
+
+
+
+
+## [1.0.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-step-card@1.0.9...@synerise/ds-step-card@1.0.10) (2025-06-03)
+
+**Note:** Version bump only for package @synerise/ds-step-card
+
+
+
+
+
 ## [1.0.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-step-card@1.0.8...@synerise/ds-step-card@1.0.9) (2025-05-26)
 
 **Note:** Version bump only for package @synerise/ds-step-card

package/dist/StepCard.js

@@ -1,12 +1,12 @@
 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, { useRef, forwardRef, useEffect, useMemo, useState, createRef } from 'react';
-import { useIntl } from 'react-intl';
+import React, { useRef, forwardRef, useEffect, useState, createRef } from 'react';
 import { Matching } from '@synerise/ds-logic';
 import Cruds from '@synerise/ds-cruds';
 import { InlineAlert } from '@synerise/ds-alert';
 import { DragHandleM } from '@synerise/ds-icon';
 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) {
@@ -22,6 +22,7 @@ var StepCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
     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,
@@ -31,46 +32,13 @@ var StepCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
     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 _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var text = useMemo(function () {
-    return _extends({
-      matching: formatMessage({
-        id: 'DS.MATCHING.PERFORMED'
-      }),
-      notMatching: formatMessage({
-        id: 'DS.MATCHING.NOT-PERFORMED'
-      }),
-      conditionType: formatMessage({
-        id: 'DS.STEP-CARD.CONDITION-TYPE'
-      }),
-      notConditionType: formatMessage({
-        id: 'DS.STEP-CARD.NOT-CONDITION-TYPE'
-      }),
-      namePlaceholder: formatMessage({
-        id: 'DS.STEP-CARD.NAME-PLACEHOLDER'
-      }),
-      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'
-      }),
-      duplicateTooltip: formatMessage({
-        id: 'DS.STEP-CARD.DUPLICATE'
-      })
-    }, texts);
-  }, [formatMessage, texts]);
+  var allTexts = useDefaultTexts(texts);
   var _useState = useState(0),
     moveByOffset = _useState[0],
     setMoveByOffset = _useState[1];
@@ -160,47 +128,51 @@ var StepCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
       offset: moveByOffset
     }, countDownSpinnerElement, " ", /*#__PURE__*/React.createElement(S.MoveByOffsetLabel, null, moveByOffsetLabel)), /*#__PURE__*/React.createElement(Cruds, {
       onMoveUp: onMoveUp,
-      moveUpTooltip: text.moveUpTooltip,
+      moveUpTooltip: allTexts.moveUpTooltip,
       moveUpInactive: moveUpInactive,
       onMoveDown: onMoveDown,
-      moveDownTooltip: text.moveDownTooltip,
+      moveDownTooltip: allTexts.moveDownTooltip,
       moveDownInactive: moveDownInactive,
-      deleteTooltip: text.deleteTooltip,
+      deleteTooltip: allTexts.deleteTooltip,
       onDelete: onDelete,
-      duplicateTooltip: text.duplicateTooltip,
+      duplicateTooltip: allTexts.duplicateTooltip,
       onDuplicate: onDuplicate
     })), recentlyMoved && /*#__PURE__*/React.createElement(S.RecentlyMoved, {
       duration: MOVE_SUCCESS_FEEDBACK_DURATION
     }, /*#__PURE__*/React.createElement(InlineAlert, {
       type: "success",
       message: "Moved"
-    })), headerRightSide);
+    })), renderHeaderRightSide && dragIndex !== undefined ? renderHeaderRightSide(dragIndex) : headerRightSide);
   };
   return /*#__PURE__*/React.createElement(S.Container, {
+    isDragged: isDragged,
+    isDragOverlay: isDragOverlay,
     ref: ref
-  }, isHeaderVisible && /*#__PURE__*/React.createElement(S.Header, {
+  }, /*#__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,
-    className: "step-card-drag-handler"
+    onFocus: resetMoveSuccess
   }, /*#__PURE__*/React.createElement(S.LeftSide, {
-    readOnly: readOnly
-  }, !readOnly && isDraggable && /*#__PURE__*/React.createElement(S.DragIcon, {
+    isDraggable: !readOnly && isDraggable
+  }, !readOnly && isDraggable && /*#__PURE__*/React.createElement(S.DragIcon, _extends({
     component: /*#__PURE__*/React.createElement(DragHandleM, null)
-  }), matching !== undefined && onChangeMatching && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Matching, {
+  }, !readOnly && isDraggable ? dragHandleProps : {})), matching !== undefined && onChangeMatching && /*#__PURE__*/React.createElement(S.StepCardTitle, null, /*#__PURE__*/React.createElement(Matching, {
     matching: matching,
     onChange: onChangeMatching,
     texts: {
-      matching: text.matching,
-      notMatching: text.notMatching
+      matching: allTexts.matching,
+      notMatching: allTexts.notMatching
     },
     readOnly: readOnly
   }), /*#__PURE__*/React.createElement(Title, {
     withoutMargin: true,
     level: 4
-  }, matching ? text.conditionType : text.notConditionType))), (!readOnly || headerRightSide) && /*#__PURE__*/React.createElement(S.RightSide, {
+  }, 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));
+  }, children), additionalFields && /*#__PURE__*/React.createElement(S.AdditionalFields, null, additionalFields), footer && /*#__PURE__*/React.createElement(S.Footer, null, footer)));
 });
 export default StepCard;

package/dist/StepCard.styles.d.ts

@@ -1,5 +1,12 @@
 /// <reference types="react" />
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+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 | undefined;
+    isDragOverlay?: boolean | undefined;
+}, never>;
 export declare const RecentlyMoved: import("styled-components").StyledComponent<"span", any, {
     duration: number;
 }, never>;
@@ -13,9 +20,13 @@ export declare const MoveByOffset: import("styled-components").StyledComponent<"
 }, never>;
 export declare const CrudsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DragIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => import("react").JSX.Element, any, {}, never>;
-export declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Header: import("styled-components").StyledComponent<"div", any, {
+    isDraggable?: boolean | undefined;
+}, 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, {
-    readOnly?: boolean | undefined;
+    isDraggable?: boolean | undefined;
 }, never>;
 export declare const RightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Body: import("styled-components").StyledComponent<"div", any, {

package/dist/StepCard.styles.js

@@ -1,29 +1,51 @@
-import styled, { keyframes } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import Icon from '@synerise/ds-icon';
 var fadeout = keyframes(["from{opacity:1}to{opacity:0;}"]);
-export var Container = styled.div.withConfig({
-  displayName: "StepCardstyles__Container",
+export var DragPlaceholder = styled.div.withConfig({
+  displayName: "StepCardstyles__DragPlaceholder",
   componentId: "sc-45dbps-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;background-color:", ";border-radius:3px;box-shadow:0 4px 12px 0 #2329360a;min-width:594px;"], function (props) {
+})(["opacity:0;pointer-events:none;visibility:hidden;display:none;align-items:center;"]);
+export var DragPlaceholderContent = 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({
+  displayName: "StepCardstyles__DragPlaceholderTag",
+  componentId: "sc-45dbps-2"
+})(["position:absolute;right:24px;top:22px;opacity:0.4;"]);
+export var Content = 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({
+  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({
   displayName: "StepCardstyles__RecentlyMoved",
-  componentId: "sc-45dbps-1"
+  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({
   displayName: "StepCardstyles__CountDownWrapper",
-  componentId: "sc-45dbps-2"
+  componentId: "sc-45dbps-6"
 })(["vertical-align:middle;display:inline-block;width:24px;height:24px;color:inherit;"]);
 export var MoveByOffsetLabel = styled.span.withConfig({
   displayName: "StepCardstyles__MoveByOffsetLabel",
-  componentId: "sc-45dbps-3"
+  componentId: "sc-45dbps-7"
 })([""]);
 export var CountDownSpinner = styled.g.withConfig({
   displayName: "StepCardstyles__CountDownSpinner",
-  componentId: "sc-45dbps-4"
+  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) {
@@ -31,49 +53,59 @@ export var CountDownSpinner = styled.g.withConfig({
 });
 export var MoveByOffset = styled.span.withConfig({
   displayName: "StepCardstyles__MoveByOffset",
-  componentId: "sc-45dbps-5"
+  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({
   displayName: "StepCardstyles__CrudsWrapper",
-  componentId: "sc-45dbps-6"
+  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({
   displayName: "StepCardstyles__DragIcon",
-  componentId: "sc-45dbps-7"
+  componentId: "sc-45dbps-11"
 })(["visibility:hidden;opacity:0;"]);
 export var Header = styled.div.withConfig({
   displayName: "StepCardstyles__Header",
-  componentId: "sc-45dbps-8"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:22px 0;margin:0 24px 0 0;width:100%;max-width:calc(100% - 24px);position:relative;cursor:grab;&:hover{", "{display:none;}", "{opacity:1;visibility:visible;}", "{visibility:visible;opacity:1;}}"], RecentlyMoved, CrudsWrapper, DragIcon);
+  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({
+  displayName: "StepCardstyles__StepCardTitle",
+  componentId: "sc-45dbps-13"
+})(["display:flex;gap:8px;"]);
+export var Middle = styled.div.withConfig({
+  displayName: "StepCardstyles__Middle",
+  componentId: "sc-45dbps-14"
+})(["flex-grow:1;"]);
 export var LeftSide = styled.div.withConfig({
   displayName: "StepCardstyles__LeftSide",
-  componentId: "sc-45dbps-9"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding-left:", ";> *{margin-right:8px;}"], function (_ref) {
-  var readOnly = _ref.readOnly;
-  return readOnly ? '32px' : '0';
+  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({
   displayName: "StepCardstyles__RightSide",
-  componentId: "sc-45dbps-10"
+  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({
   displayName: "StepCardstyles__Body",
-  componentId: "sc-45dbps-11"
+  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({
   displayName: "StepCardstyles__AdditionalFields",
-  componentId: "sc-45dbps-12"
+  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({
   displayName: "StepCardstyles__Footer",
-  componentId: "sc-45dbps-13"
+  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'];
 });

package/dist/StepCard.types.d.ts

@@ -1,4 +1,5 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type { DragHandlePropType } from '@synerise/ds-sortable';
 export type StepCardTexts = {
     matching: string;
     notMatching: string;
@@ -24,12 +25,20 @@ export type StepCardProps = {
     expressionIndex: number;
     expressionCount: number;
     expressionMoved?: boolean;
-    texts?: StepCardTexts;
+    texts?: Partial<StepCardTexts>;
     isHeaderVisible?: boolean;
     isDraggable?: boolean;
     readOnly?: boolean;
     singleStepCondition?: boolean;
     headerRightSide?: ReactNode;
+    dropLabel?: ReactNode;
+    renderHeaderRightSide?: (index: number, options?: {
+        placeholder?: boolean;
+    }) => ReactNode;
     getMoveByLabel?: (moveByOffset: number) => string;
     additionalFields?: JSX.Element;
+    dragHandleProps?: DragHandlePropType;
+    isDragged?: boolean;
+    isDragOverlay?: boolean;
+    dragIndex?: number;
 };

package/dist/hooks/useDefaultTexts.d.ts

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

package/dist/hooks/useDefaultTexts.js

@@ -0,0 +1,52 @@
+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]);
+  return allTexts;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-step-card",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "StepCard UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,12 +34,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^1.1.2",
-    "@synerise/ds-cruds": "^1.0.9",
-    "@synerise/ds-icon": "^1.5.1",
-    "@synerise/ds-logic": "^1.0.9",
-    "@synerise/ds-typography": "^1.0.9",
-    "@synerise/ds-utils": "^1.1.1"
+    "@synerise/ds-alert": "^1.1.4",
+    "@synerise/ds-cruds": "^1.0.10",
+    "@synerise/ds-icon": "^1.5.2",
+    "@synerise/ds-logic": "^1.1.0",
+    "@synerise/ds-typography": "^1.0.10",
+    "@synerise/ds-utils": "^1.2.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -47,5 +47,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "9e9cc54e3690b4d51323f91c81b3b79305984da6"
+  "gitHead": "93bc81d59d20bc8f3bc80c5d56ae7f7c0838380d"
 }