@synerise/ds-empty-states 1.0.34 → 1.0.36

package/CHANGELOG.md

@@ -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.0.36](https://github.com/Synerise/synerise-design/compare/@synerise/ds-empty-states@1.0.35...@synerise/ds-empty-states@1.0.36) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-empty-states
+
+## [1.0.35](https://github.com/Synerise/synerise-design/compare/@synerise/ds-empty-states@1.0.34...@synerise/ds-empty-states@1.0.35) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-empty-states
+
 ## [1.0.34](https://github.com/Synerise/synerise-design/compare/@synerise/ds-empty-states@1.0.33...@synerise/ds-empty-states@1.0.34) (2026-02-19)
 
 **Note:** Version bump only for package @synerise/ds-empty-states

package/README.md

@@ -28,13 +28,16 @@ import EmptyStates from '@synerise/ds-empty-states'
 
 ## API
 
-| Property      | Description                        | Type                                    | Default |
-| ------------- | ---------------------------------- | --------------------------------------- | ------- |
-| size          | Changing size on Icon              | 'Xl' / 'L'                              | M       |
-| label         | text of empty states               | string / React.ReactNode                | -       |
-| labelPosition | Defines the position of text       | right / bottom                          | right   |
-| text          | text of Header                     | string / React.ReactNode                | -       |
-| type          | type of icon                       | `Add` / `NoResults` / `SearchNoResults` | -       |
-| button        | render button                      | string / React.ReactNode                | -       |
-| fontSize      | set size of Header                 | string / React.ReactNode                | -       |
-| mode          | prop to set empty states in center | absolute / undefined                    | -       |
+| Property      | Description                                               | Type                                    | Default  |
+| ------------- | --------------------------------------------------------- | --------------------------------------- | -------- |
+| size          | Icon size                                                 | `small` / `medium`                      | `small`  |
+| label         | Secondary label text                                      | string / React.ReactNode                | -        |
+| labelPosition | **@deprecated** — has no effect on rendering              | `right` / `bottom`                      | -        |
+| text          | Header / primary text                                     | string / React.ReactNode                | -        |
+| button        | Action button rendered below label                        | React.ReactNode                         | -        |
+| fontSize      | Header font size (`small` = 14px, `medium` = 18px)        | `small` / `medium`                      | `small`  |
+| customIcon    | Icon element rendered via `@synerise/ds-icon`             | React.ReactElement                      | -        |
+| iconPosition  | Position of icon relative to content                      | `top` / `left` / `right`               | `top`    |
+| textAlign     | Text alignment of the content area                        | `left` / `center` / `right` / `justify` | `center` |
+| mode          | `absolute` positions wrapper at top:50% left:50%          | `absolute`                              | -        |
+| className     | Additional CSS class (merged with `ds-empty-states`)      | string                                  | -        |

package/dist/EmptyStates.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type EmptyStatesProps } from './EmptyStates.types';
+import { default as React } from 'react';
+import { EmptyStatesProps } from './EmptyStates.types';
 declare const EmptyStates: ({ size, label, text, button, fontSize, customIcon, className, mode, iconPosition, textAlign, }: EmptyStatesProps) => React.JSX.Element;
 export default EmptyStates;

package/dist/EmptyStates.js

@@ -1,40 +1,32 @@
-var _mapSizeToPx;
-import React from 'react';
-import Icon from '@synerise/ds-icon';
-import * as S from './EmptyStates.styles';
-import { EmptyStatesSize } from './EmptyStates.types';
-var mapSizeToPx = (_mapSizeToPx = {}, _mapSizeToPx[EmptyStatesSize.SMALL] = 48, _mapSizeToPx[EmptyStatesSize.MEDIUM] = 96, _mapSizeToPx);
-var EmptyStates = function EmptyStates(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? EmptyStatesSize.SMALL : _ref$size,
-    label = _ref.label,
-    text = _ref.text,
-    button = _ref.button,
-    fontSize = _ref.fontSize,
-    customIcon = _ref.customIcon,
-    className = _ref.className,
-    mode = _ref.mode,
-    _ref$iconPosition = _ref.iconPosition,
-    iconPosition = _ref$iconPosition === void 0 ? 'top' : _ref$iconPosition,
-    _ref$textAlign = _ref.textAlign,
-    textAlign = _ref$textAlign === void 0 ? 'center' : _ref$textAlign;
-  return /*#__PURE__*/React.createElement(S.EmptyStatesWrapper, {
-    iconPosition: iconPosition,
-    mode: mode,
-    className: "ds-empty-states " + className
-  }, customIcon && /*#__PURE__*/React.createElement(S.EmptyStatesIconContainer, null, /*#__PURE__*/React.createElement(Icon, {
-    "data-testid": "empty-states-custom-icon",
-    component: customIcon,
-    size: mapSizeToPx[size]
-  })), /*#__PURE__*/React.createElement(S.EmptyStatesContent, {
-    textAlign: textAlign
-  }, text && /*#__PURE__*/React.createElement(S.HeaderWrapper, {
-    hasIcon: Boolean(customIcon),
-    "data-testid": "empty-states-header",
-    size: size,
-    fontSize: fontSize
-  }, text), label && /*#__PURE__*/React.createElement(S.TextWrapper, {
-    "data-testid": "empty-states-label"
-  }, label), button && /*#__PURE__*/React.createElement(S.ButtonWrapper, null, button)));
+import { jsxs, jsx } from "react/jsx-runtime";
+import Icon from "@synerise/ds-icon";
+import { EmptyStatesWrapper, EmptyStatesIconContainer, EmptyStatesContent, HeaderWrapper, TextWrapper, ButtonWrapper } from "./EmptyStates.styles.js";
+import { EmptyStatesSize } from "./EmptyStates.types.js";
+const mapSizeToPx = {
+  [EmptyStatesSize.SMALL]: 48,
+  [EmptyStatesSize.MEDIUM]: 96
+};
+const EmptyStates = ({
+  size = EmptyStatesSize.SMALL,
+  label,
+  text,
+  button,
+  fontSize,
+  customIcon,
+  className,
+  mode,
+  iconPosition = "top",
+  textAlign = "center"
+}) => {
+  return /* @__PURE__ */ jsxs(EmptyStatesWrapper, { iconPosition, mode, className: `ds-empty-states ${className}`, children: [
+    customIcon && /* @__PURE__ */ jsx(EmptyStatesIconContainer, { children: /* @__PURE__ */ jsx(Icon, { "data-testid": "empty-states-custom-icon", component: customIcon, size: mapSizeToPx[size] }) }),
+    /* @__PURE__ */ jsxs(EmptyStatesContent, { textAlign, children: [
+      text && /* @__PURE__ */ jsx(HeaderWrapper, { hasIcon: Boolean(customIcon), "data-testid": "empty-states-header", size, fontSize, children: text }),
+      label && /* @__PURE__ */ jsx(TextWrapper, { "data-testid": "empty-states-label", children: label }),
+      button && /* @__PURE__ */ jsx(ButtonWrapper, { children: button })
+    ] })
+  ] });
+};
+export {
+  EmptyStates as default
 };
-export default EmptyStates;

package/dist/EmptyStates.styles.d.ts

@@ -1,16 +1,16 @@
 import { EmptyStatesSize } from './EmptyStates.types';
-export declare const EmptyStatesIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HeaderWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const EmptyStatesIconContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const TextWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const HeaderWrapper: import('styled-components').StyledComponent<"div", any, {
     fontSize?: EmptyStatesSize;
     size?: EmptyStatesSize;
     hasIcon?: boolean;
 }, never>;
-export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EmptyStatesWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const ButtonWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const EmptyStatesWrapper: import('styled-components').StyledComponent<"div", any, {
     iconPosition: "top" | "left" | "right";
     mode?: "absolute";
 }, never>;
-export declare const EmptyStatesContent: import("styled-components").StyledComponent<"div", any, {
+export declare const EmptyStatesContent: import('styled-components').StyledComponent<"div", any, {
     textAlign: "left" | "right" | "center" | "justify";
 }, never>;

package/dist/EmptyStates.styles.js

@@ -1,57 +1,49 @@
-import styled, { css } from 'styled-components';
-import { EmptyStatesSize, FontSize } from './EmptyStates.types';
-var FONT_SIZE_DEFAULT = 14;
-var getFlexStyle = function getFlexStyle(iconPosition) {
-  return iconPosition === 'top' ? css(["flex-direction:", ";align-items:center;"], mapIconPosition[iconPosition]) : css(["flex-direction:", ";gap:16px;align-items:flex-start;"], mapIconPosition[iconPosition]);
+import styled, { css } from "styled-components";
+import { EmptyStatesSize, FontSize } from "./EmptyStates.types.js";
+const FONT_SIZE_DEFAULT = 14;
+const getFlexStyle = (iconPosition) => {
+  return iconPosition === "top" ? css(["flex-direction:", ";align-items:center;"], mapIconPosition[iconPosition]) : css(["flex-direction:", ";gap:16px;align-items:flex-start;"], mapIconPosition[iconPosition]);
 };
-var mapIconPosition = {
-  right: 'row-reverse',
-  top: 'column',
-  left: 'row'
+const mapIconPosition = {
+  right: "row-reverse",
+  top: "column",
+  left: "row"
 };
-var mapTextAlign = {
-  right: 'flex-end',
-  left: 'flex-start',
-  center: 'center',
-  justify: 'center'
+const mapTextAlign = {
+  right: "flex-end",
+  left: "flex-start",
+  center: "center",
+  justify: "center"
 };
-export var EmptyStatesIconContainer = styled.div.withConfig({
+const EmptyStatesIconContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EmptyStatesstyles__EmptyStatesIconContainer",
   componentId: "sc-7sb4gr-0"
 })([""]);
-export var TextWrapper = styled.div.withConfig({
+const TextWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EmptyStatesstyles__TextWrapper",
   componentId: "sc-7sb4gr-1"
 })(["display:flex;line-height:16px;max-width:440px;word-wrap:break-word;padding-bottom:8px;"]);
-export var HeaderWrapper = styled.div.withConfig({
+const HeaderWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EmptyStatesstyles__HeaderWrapper",
   componentId: "sc-7sb4gr-2"
-})(["display:flex;line-height:16px;margin-top:", ";color:", ";font-size:", "px;font-weight:500;padding-bottom:", ";"], function (props) {
-  return props.hasIcon && props.size === EmptyStatesSize.SMALL ? '12px' : '';
-}, function (props) {
-  return props.theme.palette['grey-800'];
-}, function (props) {
-  return props.fontSize ? FontSize[props.fontSize] : FONT_SIZE_DEFAULT;
-}, function (props) {
-  return props.fontSize === EmptyStatesSize.SMALL ? '12px' : '18px';
-});
-export var ButtonWrapper = styled.div.withConfig({
+})(["display:flex;line-height:16px;margin-top:", ";color:", ";font-size:", "px;font-weight:500;padding-bottom:", ";"], (props) => props.hasIcon && props.size === EmptyStatesSize.SMALL ? "12px" : "", (props) => props.theme.palette["grey-800"], (props) => props.fontSize ? FontSize[props.fontSize] : FONT_SIZE_DEFAULT, (props) => props.fontSize === EmptyStatesSize.SMALL ? "12px" : "18px");
+const ButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EmptyStatesstyles__ButtonWrapper",
   componentId: "sc-7sb4gr-3"
 })(["padding-top:12px;display:flex;"]);
-export var EmptyStatesWrapper = styled.div.withConfig({
+const EmptyStatesWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EmptyStatesstyles__EmptyStatesWrapper",
   componentId: "sc-7sb4gr-4"
-})(["display:flex;", " ", ";"], function (props) {
-  return getFlexStyle(props.iconPosition);
-}, function (props) {
-  return props.mode === 'absolute' && css(["position:absolute;top:50%;left:50%;"]);
-});
-export var EmptyStatesContent = styled.div.withConfig({
+})(["display:flex;", " ", ";"], (props) => getFlexStyle(props.iconPosition), (props) => props.mode === "absolute" && css(["position:absolute;top:50%;left:50%;"]));
+const EmptyStatesContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EmptyStatesstyles__EmptyStatesContent",
   componentId: "sc-7sb4gr-5"
-})(["display:flex;flex-direction:column;text-align:", ";> *{justify-content:", ";}"], function (props) {
-  return props.textAlign;
-}, function (props) {
-  return mapTextAlign[props.textAlign];
-});
+})(["display:flex;flex-direction:column;text-align:", ";> *{justify-content:", ";}"], (props) => props.textAlign, (props) => mapTextAlign[props.textAlign]);
+export {
+  ButtonWrapper,
+  EmptyStatesContent,
+  EmptyStatesIconContainer,
+  EmptyStatesWrapper,
+  HeaderWrapper,
+  TextWrapper
+};

package/dist/EmptyStates.types.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement, type ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 export type EmptyStatesProps = {
     size?: EmptyStatesSize;
     fontSize?: EmptyStatesSize;

package/dist/EmptyStates.types.js

@@ -1,8 +1,30 @@
-var _IconSize, _FontSize;
-export var EmptyStatesSize = /*#__PURE__*/function (EmptyStatesSize) {
-  EmptyStatesSize["SMALL"] = "small";
-  EmptyStatesSize["MEDIUM"] = "medium";
-  return EmptyStatesSize;
-}({});
-export var IconSize = (_IconSize = {}, _IconSize[EmptyStatesSize.SMALL] = 48, _IconSize[EmptyStatesSize.MEDIUM] = 96, _IconSize);
-export var FontSize = (_FontSize = {}, _FontSize[EmptyStatesSize.SMALL] = 14, _FontSize[EmptyStatesSize.MEDIUM] = 18, _FontSize);
+var EmptyStatesSize = /* @__PURE__ */ ((EmptyStatesSize2) => {
+  EmptyStatesSize2["SMALL"] = "small";
+  EmptyStatesSize2["MEDIUM"] = "medium";
+  return EmptyStatesSize2;
+})(EmptyStatesSize || {});
+const IconSize = {
+  [
+    "small"
+    /* SMALL */
+  ]: 48,
+  [
+    "medium"
+    /* MEDIUM */
+  ]: 96
+};
+const FontSize = {
+  [
+    "small"
+    /* SMALL */
+  ]: 14,
+  [
+    "medium"
+    /* MEDIUM */
+  ]: 18
+};
+export {
+  EmptyStatesSize,
+  FontSize,
+  IconSize
+};

package/dist/index.js

@@ -1,2 +1,8 @@
-export { default } from './EmptyStates';
-export * from './EmptyStates.types';
+import { default as default2 } from "./EmptyStates.js";
+import { EmptyStatesSize, FontSize, IconSize } from "./EmptyStates.types.js";
+export {
+  EmptyStatesSize,
+  FontSize,
+  IconSize,
+  default2 as default
+};

package/dist/modules.d.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-empty-states",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "description": "EmptyStates 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,12 +35,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.14.1"
+    "@synerise/ds-icon": "^1.15.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "b3d1312cbfbe69aba1cb5667b54be7f76938156c"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }