@synerise/ds-manageable-list 1.7.11 → 1.7.12

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.7.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@1.7.11...@synerise/ds-manageable-list@1.7.12) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-manageable-list
+
 ## [1.7.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@1.7.10...@synerise/ds-manageable-list@1.7.11) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-manageable-list

package/dist/AddBlankItem/AddBlankItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type AddBlankItemProps } from './AddBlankItem.types';
+import { default as React } from 'react';
+import { AddBlankItemProps } from './AddBlankItem.types';
 declare const AddBlankItem: ({ disabled, onItemAdd, addItemLabel, }: AddBlankItemProps) => React.JSX.Element;
 export default AddBlankItem;

package/dist/AddBlankItem/AddBlankItem.js

@@ -1,23 +1,20 @@
-import React from 'react';
-import Button from '@synerise/ds-button';
-import Icon, { Add3S } from '@synerise/ds-icon';
-import * as S from './AddBlankItem.styles';
-var AddBlankItem = function AddBlankItem(_ref) {
-  var disabled = _ref.disabled,
-    onItemAdd = _ref.onItemAdd,
-    addItemLabel = _ref.addItemLabel;
-  return /*#__PURE__*/React.createElement(S.AddContentButtonWrapper, {
-    "data-testid": "add-item-button"
-  }, /*#__PURE__*/React.createElement(S.StyledDivider, {
-    dashed: true,
-    marginTop: 8
-  }), /*#__PURE__*/React.createElement(Button, {
-    type: "ghost-primary",
-    mode: "icon-label",
-    onClick: onItemAdd,
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(Add3S, null)
-  }), addItemLabel));
+import { jsxs, jsx } from "react/jsx-runtime";
+import Button from "@synerise/ds-button";
+import Icon, { Add3S } from "@synerise/ds-icon";
+import { AddContentButtonWrapper, StyledDivider } from "./AddBlankItem.styles.js";
+const AddBlankItem = ({
+  disabled,
+  onItemAdd,
+  addItemLabel
+}) => {
+  return /* @__PURE__ */ jsxs(AddContentButtonWrapper, { "data-testid": "add-item-button", children: [
+    /* @__PURE__ */ jsx(StyledDivider, { dashed: true, marginTop: 8 }),
+    /* @__PURE__ */ jsxs(Button, { type: "ghost-primary", mode: "icon-label", onClick: onItemAdd, disabled, children: [
+      /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Add3S, {}) }),
+      addItemLabel
+    ] })
+  ] });
+};
+export {
+  AddBlankItem as default
 };
-export default AddBlankItem;

package/dist/AddBlankItem/AddBlankItem.styles.d.ts

@@ -1,2 +1,2 @@
-export declare const AddContentButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledDivider: import("styled-components").StyledComponent<(props: import("@synerise/ds-divider").DividerProps) => React.JSX.Element, any, {}, never>;
+export declare const AddContentButtonWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const StyledDivider: import('styled-components').StyledComponent<(props: import('@synerise/ds-divider').DividerProps) => React.JSX.Element, any, {}, never>;

package/dist/AddBlankItem/AddBlankItem.styles.js

@@ -1,10 +1,14 @@
-import styled from 'styled-components';
-import Divider from '@synerise/ds-divider';
-export var AddContentButtonWrapper = styled.div.withConfig({
+import styled from "styled-components";
+import Divider from "@synerise/ds-divider";
+const AddContentButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "AddBlankItemstyles__AddContentButtonWrapper",
   componentId: "sc-1cqa1jm-0"
 })(["display:flex;flex-direction:column;gap:16px;align-items:flex-start;"]);
-export var StyledDivider = styled(Divider).withConfig({
+const StyledDivider = /* @__PURE__ */ styled(Divider).withConfig({
   displayName: "AddBlankItemstyles__StyledDivider",
   componentId: "sc-1cqa1jm-1"
-})(["width:100%;"]);
+})(["width:100%;"]);
+export {
+  AddContentButtonWrapper,
+  StyledDivider
+};

package/dist/AddBlankItem/AddBlankItem.types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { ReactNode } from 'react';
 export type AddBlankItemProps = {
     onItemAdd: () => void;
     addItemLabel: ReactNode;

package/dist/AddBlankItem/AddBlankItem.types.js

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

package/dist/AddItem/AddItem.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { type AddItemProps } from './AddItem.types';
+import { default as React } from 'react';
+import { AddItemProps } from './AddItem.types';
 declare const AddItem: (({ disabled, onItemAdd, addItemLabel, }: AddItemProps) => React.JSX.Element) & {
-    AddContentButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+    AddContentButtonWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 };
 export default AddItem;

package/dist/AddItem/AddItem.js

@@ -1,20 +1,16 @@
-import React from 'react';
-import Button from '@synerise/ds-button';
-import * as S from './AddItem.styles';
-var AddItemComponent = function AddItemComponent(_ref) {
-  var disabled = _ref.disabled,
-    onItemAdd = _ref.onItemAdd,
-    addItemLabel = _ref.addItemLabel;
-  return /*#__PURE__*/React.createElement(S.AddContentButtonWrapper, {
-    "data-testid": "add-item-button"
-  }, /*#__PURE__*/React.createElement(Button.Creator, {
-    onClick: onItemAdd,
-    block: true,
-    label: addItemLabel,
-    disabled: disabled
-  }));
+import { jsx } from "react/jsx-runtime";
+import Button from "@synerise/ds-button";
+import { AddContentButtonWrapper } from "./AddItem.styles.js";
+const AddItemComponent = ({
+  disabled,
+  onItemAdd,
+  addItemLabel
+}) => {
+  return /* @__PURE__ */ jsx(AddContentButtonWrapper, { "data-testid": "add-item-button", children: /* @__PURE__ */ jsx(Button.Creator, { onClick: onItemAdd, block: true, label: addItemLabel, disabled }) });
 };
-var AddItem = Object.assign(AddItemComponent, {
-  AddContentButtonWrapper: S.AddContentButtonWrapper
+const AddItem = Object.assign(AddItemComponent, {
+  AddContentButtonWrapper
 });
-export default AddItem;
+export {
+  AddItem as default
+};

package/dist/AddItem/AddItem.styles.d.ts

@@ -1 +1 @@
-export declare const AddContentButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AddContentButtonWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/AddItem/AddItem.styles.js

@@ -1,5 +1,8 @@
-import styled from 'styled-components';
-export var AddContentButtonWrapper = styled.div.withConfig({
+import styled from "styled-components";
+const AddContentButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "AddItemstyles__AddContentButtonWrapper",
   componentId: "sc-5vjj4u-0"
-})(["display:flex;width:100%;"]);
+})(["display:flex;width:100%;"]);
+export {
+  AddContentButtonWrapper
+};

package/dist/AddItem/AddItem.types.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { default as React } from 'react';
 export type AddItemProps = {
     onItemAdd: () => void;
     addItemLabel: string | React.ReactNode;

package/dist/AddItem/AddItem.types.js

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

package/dist/AddItemWithName/AddItemWithName.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type Props } from './AddItemWithName.types';
+import { default as React } from 'react';
+import { Props } from './AddItemWithName.types';
 declare const AddItemWithName: ({ onItemAdd, addItemLabel, disabled, placeholder, }: Props) => React.JSX.Element;
 export default AddItemWithName;

package/dist/AddItemWithName/AddItemWithName.js

@@ -1,56 +1,43 @@
-import React, { useCallback, useState } from 'react';
-import Button from '@synerise/ds-button';
-import Icon, { Add3M } from '@synerise/ds-icon';
-import { Input } from '@synerise/ds-input';
-import * as S from './AddItemWithName.styles';
-var DEFAULT_NAME = '';
-var AddItemWithName = function AddItemWithName(_ref) {
-  var onItemAdd = _ref.onItemAdd,
-    addItemLabel = _ref.addItemLabel,
-    disabled = _ref.disabled,
-    placeholder = _ref.placeholder;
-  var _useState = useState(false),
-    active = _useState[0],
-    setActive = _useState[1];
-  var _useState2 = useState(DEFAULT_NAME),
-    name = _useState2[0],
-    setName = _useState2[1];
-  var handleClickOutside = useCallback(function () {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import Button from "@synerise/ds-button";
+import Icon, { Add3M } from "@synerise/ds-icon";
+import { Input } from "@synerise/ds-input";
+import { AddItemLayout } from "./AddItemWithName.styles.js";
+const DEFAULT_NAME = "";
+const AddItemWithName = ({
+  onItemAdd,
+  addItemLabel,
+  disabled,
+  placeholder
+}) => {
+  const [active, setActive] = useState(false);
+  const [name, setName] = useState(DEFAULT_NAME);
+  const handleClickOutside = useCallback(() => {
     setActive(false);
     setName(DEFAULT_NAME);
   }, []);
-  var handleNameChange = useCallback(function (event) {
+  const handleNameChange = useCallback((event) => {
     setName(event.target.value);
   }, []);
-  var toggleInput = useCallback(function () {
+  const toggleInput = useCallback(() => {
     setActive(!active);
     setName(DEFAULT_NAME);
   }, [active]);
-  var createItem = useCallback(function () {
+  const createItem = useCallback(() => {
     onItemAdd && onItemAdd({
-      name: name
+      name
     });
     toggleInput();
   }, [name, onItemAdd, toggleInput]);
-  return /*#__PURE__*/React.createElement(S.AddItemLayout, {
-    "data-testid": "add-item-with-name-button"
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "ghost-primary",
-    mode: "icon-label",
-    onClick: toggleInput,
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(Add3M, null),
-    size: 24
-  }), addItemLabel), active && /*#__PURE__*/React.createElement(Input, {
-    resetMargin: true,
-    autoFocus: true,
-    value: name,
-    onBlur: handleClickOutside,
-    onChange: handleNameChange,
-    onPressEnter: createItem,
-    "data-testid": "add-item-input",
-    placeholder: placeholder
-  }));
+  return /* @__PURE__ */ jsxs(AddItemLayout, { "data-testid": "add-item-with-name-button", children: [
+    /* @__PURE__ */ jsxs(Button, { type: "ghost-primary", mode: "icon-label", onClick: toggleInput, disabled, children: [
+      /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Add3M, {}), size: 24 }),
+      addItemLabel
+    ] }),
+    active && /* @__PURE__ */ jsx(Input, { resetMargin: true, autoFocus: true, value: name, onBlur: handleClickOutside, onChange: handleNameChange, onPressEnter: createItem, "data-testid": "add-item-input", placeholder })
+  ] });
+};
+export {
+  AddItemWithName as default
 };
-export default AddItemWithName;

package/dist/AddItemWithName/AddItemWithName.styles.d.ts

@@ -1,2 +1,2 @@
-export declare const AddItemLayout: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AddItemLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const AddItemLayout: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const AddItemLabel: import('styled-components').StyledComponent<"span", any, {}, never>;

package/dist/AddItemWithName/AddItemWithName.styles.js

@@ -1,10 +1,14 @@
-import styled from 'styled-components';
-import { InputWrapper } from '@synerise/ds-input/dist/Input.styles';
-export var AddItemLayout = styled.div.withConfig({
+import styled from "styled-components";
+import { InputWrapper } from "@synerise/ds-input/dist/Input.styles";
+const AddItemLayout = /* @__PURE__ */ styled.div.withConfig({
   displayName: "AddItemWithNamestyles__AddItemLayout",
   componentId: "sc-8u2fy8-0"
 })(["display:inline;flex-direction:column;align-items:stretch;justify-content:center;width:100%;padding:4px 12px;margin-bottom:8px;", "{margin-top:8px;}"], InputWrapper);
-export var AddItemLabel = styled.span.withConfig({
+const AddItemLabel = /* @__PURE__ */ styled.span.withConfig({
   displayName: "AddItemWithNamestyles__AddItemLabel",
   componentId: "sc-8u2fy8-1"
-})(["margin-left:12px;"]);
+})(["margin-left:12px;"]);
+export {
+  AddItemLabel,
+  AddItemLayout
+};

package/dist/AddItemWithName/AddItemWithName.types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { ReactNode } from 'react';
 export type Props = {
     onItemAdd?: (addParams: {
         name: string;

package/dist/AddItemWithName/AddItemWithName.types.js

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

package/dist/Item/BlankItem/BlankItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type BlankItemProps } from './BlankItem.types';
+import { default as React } from 'react';
+import { BlankItemProps } from './BlankItem.types';
 declare const BlankItem: <T extends object>({ onRemove, onDuplicate, draggable, renderItem, item, texts, rowGap, isDragPlaceholder, isDragOverlay, dragHandleProps, ...rest }: BlankItemProps<T>) => React.JSX.Element;
 export default BlankItem;

package/dist/Item/BlankItem/BlankItem.js

@@ -1,70 +1,52 @@
-var _excluded = ["onRemove", "onDuplicate", "draggable", "renderItem", "item", "texts", "rowGap", "isDragPlaceholder", "isDragOverlay", "dragHandleProps"];
-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); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useCallback } from 'react';
-import { useTheme } from '@synerise/ds-core';
-import Icon, { CloseS, DragHandleM, DuplicateS } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import { useTexts } from '../../hooks/useTexts';
-import * as S from './BlankItem.styles';
-var BlankItem = function BlankItem(_ref) {
-  var onRemove = _ref.onRemove,
-    onDuplicate = _ref.onDuplicate,
-    draggable = _ref.draggable,
-    renderItem = _ref.renderItem,
-    item = _ref.item,
-    texts = _ref.texts,
-    _ref$rowGap = _ref.rowGap,
-    rowGap = _ref$rowGap === void 0 ? 16 : _ref$rowGap,
-    isDragPlaceholder = _ref.isDragPlaceholder,
-    isDragOverlay = _ref.isDragOverlay,
-    dragHandleProps = _ref.dragHandleProps,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var theme = useTheme();
-  var allTexts = useTexts(texts);
-  var handleRemove = useCallback(function (event) {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { DragHandleM, DuplicateS, CloseS } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { useTexts } from "../../hooks/useTexts.js";
+import { BlankItemWrapper, DragHandle, BlankItemContent, BlankItemActions } from "./BlankItem.styles.js";
+const BlankItem = ({
+  onRemove,
+  onDuplicate,
+  draggable,
+  renderItem,
+  item,
+  texts,
+  rowGap = 16,
+  isDragPlaceholder,
+  isDragOverlay,
+  dragHandleProps,
+  ...rest
+}) => {
+  const theme = useTheme();
+  const allTexts = useTexts(texts);
+  const handleRemove = useCallback((event) => {
     event.stopPropagation();
-    var id = item.id;
+    const {
+      id
+    } = item;
     onRemove && onRemove({
-      id: id
+      id
     });
   }, [item, onRemove]);
-  var handleDuplicate = useCallback(function (event) {
+  const handleDuplicate = useCallback((event) => {
     event.stopPropagation();
-    var id = item.id;
+    const {
+      id
+    } = item;
     onDuplicate && onDuplicate({
-      id: id
+      id
     });
   }, [item, onDuplicate]);
-  return /*#__PURE__*/React.createElement(S.BlankItemWrapper, _extends({
-    isDragPlaceholder: isDragPlaceholder,
-    isDragOverlay: isDragOverlay,
-    key: item.id,
-    "data-testid": "manageable-list-blank-item",
-    rowGap: rowGap
-  }, rest), (draggable || isDragOverlay) && /*#__PURE__*/React.createElement(S.DragHandle, dragHandleProps, /*#__PURE__*/React.createElement(Icon, {
-    size: 24,
-    component: /*#__PURE__*/React.createElement(DragHandleM, {
-      color: "currentColor"
-    })
-  })), /*#__PURE__*/React.createElement(S.BlankItemContent, null, renderItem(item)), (onRemove || onDuplicate) && /*#__PURE__*/React.createElement(S.BlankItemActions, null, onDuplicate && /*#__PURE__*/React.createElement(Tooltip, {
-    type: "default",
-    trigger: "hover",
-    title: allTexts.itemActionDuplicateTooltip
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(DuplicateS, null),
-    color: theme.palette['grey-600'],
-    size: 24,
-    onClick: handleDuplicate
-  })), onRemove && /*#__PURE__*/React.createElement(Tooltip, {
-    type: "default",
-    trigger: "hover",
-    title: allTexts.itemActionDeleteTooltip
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(CloseS, null),
-    size: 24,
-    color: theme.palette['red-600'],
-    onClick: handleRemove
-  }))));
+  return /* @__PURE__ */ jsxs(BlankItemWrapper, { isDragPlaceholder, isDragOverlay, "data-testid": "manageable-list-blank-item", rowGap, ...rest, children: [
+    (draggable || isDragOverlay) && /* @__PURE__ */ jsx(DragHandle, { ...dragHandleProps, children: /* @__PURE__ */ jsx(Icon, { size: 24, component: /* @__PURE__ */ jsx(DragHandleM, { color: "currentColor" }) }) }),
+    /* @__PURE__ */ jsx(BlankItemContent, { children: renderItem(item) }),
+    (onRemove || onDuplicate) && /* @__PURE__ */ jsxs(BlankItemActions, { children: [
+      onDuplicate && /* @__PURE__ */ jsx(Tooltip, { type: "default", trigger: "hover", title: allTexts.itemActionDuplicateTooltip, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(DuplicateS, {}), color: theme.palette["grey-600"], size: 24, onClick: handleDuplicate }) }),
+      onRemove && /* @__PURE__ */ jsx(Tooltip, { type: "default", trigger: "hover", title: allTexts.itemActionDeleteTooltip, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseS, {}), size: 24, color: theme.palette["red-600"], onClick: handleRemove }) })
+    ] })
+  ] }, item.id);
+};
+export {
+  BlankItem as default
 };
-export default BlankItem;

package/dist/Item/BlankItem/BlankItem.styles.d.ts

@@ -1,8 +1,8 @@
-export declare const BlankItemActions: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DragHandle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BlankItemWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const BlankItemActions: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DragHandle: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const BlankItemWrapper: import('styled-components').StyledComponent<"div", any, {
     rowGap: number;
     isDragPlaceholder?: boolean;
     isDragOverlay?: boolean;
 }, never>;
-export declare const BlankItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BlankItemContent: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Item/BlankItem/BlankItem.styles.js

@@ -1,29 +1,34 @@
-import styled from 'styled-components';
-export var BlankItemActions = styled.div.withConfig({
+import styled from "styled-components";
+const BlankItemActions = /* @__PURE__ */ styled.div.withConfig({
   displayName: "BlankItemstyles__BlankItemActions",
   componentId: "sc-19vgbbk-0"
-})(["opacity:0;flex:0 1 auto;transition:opacity 0.2s;svg:hover{fill:", ";}"], function (props) {
-  return props.theme.palette['blue-600'];
-});
-export var DragHandle = styled.div.withConfig({
+})(["opacity:0;flex:0 1 auto;transition:opacity 0.2s;svg:hover{fill:", ";}"], (props) => props.theme.palette["blue-600"]);
+const DragHandle = /* @__PURE__ */ styled.div.withConfig({
   displayName: "BlankItemstyles__DragHandle",
   componentId: "sc-19vgbbk-1"
-})(["flex:0 1 auto;cursor:grab;svg{fill:", ";}&:hover{svg{fill:", ";}}"], function (props) {
-  return props.theme.palette['grey-400'];
-}, function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var BlankItemWrapper = styled.div.withConfig({
+})(["flex:0 1 auto;cursor:grab;svg{fill:", ";}&:hover{svg{fill:", ";}}"], (props) => props.theme.palette["grey-400"], (props) => props.theme.palette["grey-600"]);
+const BlankItemWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "BlankItemstyles__BlankItemWrapper",
   componentId: "sc-19vgbbk-2"
-})(["", " ", " display:flex;align-items:center;justify-content:space-between;margin-bottom:", "px;&:hover{", "{opacity:1;}}"], function (props) {
-  return props.isDragPlaceholder && "  \n    background: " + props.theme.palette['blue-050'] + ";\n    border: 1px dashed " + props.theme.palette['blue-300'] + ";\n    border-radius: 3px;\n    " + BlankItemContent + ", " + BlankItemActions + ", " + DragHandle + " {\n      visibility: hidden;\n      opacity: 0;\n    }\n  ";
-}, function (props) {
-  return props.isDragOverlay && "\n    box-shadow: 0px 16px 32px 0px " + props.theme.palette['grey-200'] + ";\n    background: " + props.theme.palette.white + ";\n    ";
-}, function (props) {
-  return props.rowGap;
-}, BlankItemActions);
-export var BlankItemContent = styled.div.withConfig({
+})(["", " ", " display:flex;align-items:center;justify-content:space-between;margin-bottom:", "px;&:hover{", "{opacity:1;}}"], (props) => props.isDragPlaceholder && `  
+    background: ${props.theme.palette["blue-050"]};
+    border: 1px dashed ${props.theme.palette["blue-300"]};
+    border-radius: 3px;
+    ${BlankItemContent}, ${BlankItemActions}, ${DragHandle} {
+      visibility: hidden;
+      opacity: 0;
+    }
+  `, (props) => props.isDragOverlay && `
+    box-shadow: 0px 16px 32px 0px ${props.theme.palette["grey-200"]};
+    background: ${props.theme.palette.white};
+    `, (props) => props.rowGap, BlankItemActions);
+const BlankItemContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "BlankItemstyles__BlankItemContent",
   componentId: "sc-19vgbbk-3"
-})(["flex:1 1 auto;"]);
+})(["flex:1 1 auto;"]);
+export {
+  BlankItemActions,
+  BlankItemContent,
+  BlankItemWrapper,
+  DragHandle
+};

package/dist/Item/BlankItem/BlankItem.types.d.ts

@@ -1,6 +1,6 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import type { WithHTMLAttributes } from '@synerise/ds-utils';
-import type { ItemProps, Texts } from '../../ManageableList.types';
+import { HTMLAttributes, ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+import { ItemProps, Texts } from '../../ManageableList.types';
 export type BlankItemBaseProps<T extends object> = Pick<ItemProps<T>, 'id' | 'name'>;
 export type BaseBlankItemProps<T extends object> = {
     texts?: Partial<Texts>;

package/dist/Item/BlankItem/BlankItem.types.js

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