@synerise/ds-card 1.3.1 → 1.3.3

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.3.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@1.3.2...@synerise/ds-card@1.3.3) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-card
+
+## [1.3.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@1.3.1...@synerise/ds-card@1.3.2) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-card
+
 ## [1.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@1.3.0...@synerise/ds-card@1.3.1) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-card

package/README.md

@@ -72,9 +72,9 @@ yarn add @synerise/ds-card
 
 | Property                         | Description                                                                                                           | Type                                                                         | Default |
 | -------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------- |
-| background                       | Background of Card container                                                                                          | `white` / `white-shadow` / `grey` / `grey-shadow` / `outline`                | `white` |
+| background                       | Background of Card container                                                                                          | `white` / `white-shadow` / `grey` / `grey-shadow` / `outline`                | `white-shadow` |
 | children                         | Defines if the button casts a shadow when the cursor is hovered over                                                  | React.ReactNode                                                              | -       |
-| renderBadge                      | Custom slot content for badge icon                                                                                    | React.ReactNode?                                                             | -       |
+| renderBadge                      | Custom slot content for badge icon                                                                                    | `() => React.ReactNode`                                                      | -       |
 | className                        | Defines the class name of the container                                                                               | string                                                                       | -       |
 | compactHeader                    | Set as `true`, displays the description next to the header. Set as `false`, displays the description below the header | boolean                                                                      | -       |
 | description                      | Defines the content of the card description (in the header)                                                           | React.ReactNode                                                              | string  |
@@ -89,8 +89,7 @@ yarn add @synerise/ds-card
 | lively                           | Defines if the container casts a shadow when the cursor is hovered over                                               | boolean                                                                      | -       |
 | raised                           | Defines if the container casts a shadow on the background                                                             | boolean                                                                      | -       |
 | style                            | Defines the CSS of the container                                                                                      | React.CSSProperties                                                          | -       |
-| size                             | Defines the width of the container (the container width is set to 100% when this property is not passed).             | `small` (472px) / `medium` (588px) / `large` (966px) / `extraLarge` (1232px) | -       |
-| title                            | Defines the title of the card (in the header)                                                                         | string                                                                       | -       |
+| title                            | Defines the title of the card (in the header)                                                                         | React.ReactNode                                                              | -       |
 | titleTag                         | an optional status tag next to title                                                                                  | ReactElement                                                                 | -       |
 | withHeader                       | Defines if the header is shown                                                                                        | boolean                                                                      | -       |
 | withoutPadding                   | Reset padding of ContentContainer                                                                                     | boolean                                                                      | `false` |
@@ -101,8 +100,8 @@ yarn add @synerise/ds-card
 
 | Property | Description                         | Type                                        | Default   |
 | -------- | ----------------------------------- | ------------------------------------------- | --------- |
-| Icon     | Icon rendered in badge              | React.ReactNode                             | -         |
-| Status   | Defines the color of badge and icon | `success` / `error` / `warning` / `default` | `default` |
+| icon     | Icon rendered in badge              | React.ReactNode                                          | -         |
+| status   | Defines the color of badge and icon | `success` / `checked` / `error` / `warning` / `default` | `default` |
 
 #### CardSummary
 
@@ -120,5 +119,6 @@ Renders a summary in a bulletted list form. Can be assigned to Card.staticConten
 | key                     | Unique key                                                          | `React.Key`            | -       |
 | label                   | Optional label to display                                           | `React.ReactNode`      | -       |
 | value                   | Mandatory value to display                                          | `React.ReactNode`      | -       |
+| valueButton             | Optional action button placed to the right of the value             | `React.ReactNode`      | -       |
 | summaryObjects          | Optional array of react elements, renders in a toggleable container | `React.ReactElement[]` | -       |
-| summaryObjectsDirection | Direction of summary objects layout                                 | `'row'` / `'column'`   | -       |
+| summaryObjectsDirection | Direction of summary objects layout                                 | `'row'` / `'column'`   | `'row'` |

package/dist/Card/Card.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type CardProps } from './Card.types';
+import { default as React } from 'react';
+import { CardProps } from './Card.types';
 declare const Card: ({ children, raised, disabled, className, lively, withHeader, defaultHeaderBackgroundColor, title, description, compactHeader, icon, avatar, renderBadge, iconColor, headerSideChildren, onHeaderClick, withoutPadding, headerBorderBottom, background, hideContent, staticContent, titleTag, showSideChildrenWhenHeaderHidden, ...htmlAttributes }: CardProps) => React.JSX.Element;
 export default Card;

package/dist/Card/Card.js

@@ -1,107 +1,73 @@
-var _excluded = ["children", "raised", "disabled", "className", "lively", "withHeader", "defaultHeaderBackgroundColor", "title", "description", "compactHeader", "icon", "avatar", "renderBadge", "iconColor", "headerSideChildren", "onHeaderClick", "withoutPadding", "headerBorderBottom", "background", "hideContent", "staticContent", "titleTag", "showSideChildrenWhenHeaderHidden"];
-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, { useState } from 'react';
-import AnimateHeight from 'react-animate-height';
-import VisibilitySensor from 'react-visibility-sensor';
-import Icon from '@synerise/ds-icon';
-import { ANIMATION_DURATION } from '../constants';
-import * as S from './Card.styles';
-var Card = function Card(_ref) {
-  var children = _ref.children,
-    raised = _ref.raised,
-    disabled = _ref.disabled,
-    className = _ref.className,
-    lively = _ref.lively,
-    withHeader = _ref.withHeader,
-    defaultHeaderBackgroundColor = _ref.defaultHeaderBackgroundColor,
-    title = _ref.title,
-    description = _ref.description,
-    compactHeader = _ref.compactHeader,
-    icon = _ref.icon,
-    avatar = _ref.avatar,
-    renderBadge = _ref.renderBadge,
-    iconColor = _ref.iconColor,
-    headerSideChildren = _ref.headerSideChildren,
-    onHeaderClick = _ref.onHeaderClick,
-    withoutPadding = _ref.withoutPadding,
-    headerBorderBottom = _ref.headerBorderBottom,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? 'white-shadow' : _ref$background,
-    hideContent = _ref.hideContent,
-    staticContent = _ref.staticContent,
-    titleTag = _ref.titleTag,
-    showSideChildrenWhenHeaderHidden = _ref.showSideChildrenWhenHeaderHidden,
-    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var fatTitle = !description || description && compactHeader;
-  var _useState = useState(false),
-    headerActionsVisible = _useState[0],
-    setHeaderActionsVisible = _useState[1];
-  var renderTitle = function renderTitle() {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import AnimateHeight from "react-animate-height";
+import VisibilitySensor from "react-visibility-sensor";
+import Icon from "@synerise/ds-icon";
+import { ANIMATION_DURATION } from "../constants.js";
+import { Container, Header, IconContainer, HeaderContent, Description, HeaderSideChildren, ChildrenContainer, PaddingWrapper, FooterContainer, TitleWrapper, Title, TitleTag } from "./Card.styles.js";
+const Card = ({
+  children,
+  raised,
+  disabled,
+  className,
+  lively,
+  withHeader,
+  defaultHeaderBackgroundColor,
+  title,
+  description,
+  compactHeader,
+  icon,
+  avatar,
+  renderBadge,
+  iconColor,
+  headerSideChildren,
+  onHeaderClick,
+  withoutPadding,
+  headerBorderBottom,
+  background = "white-shadow",
+  hideContent,
+  staticContent,
+  titleTag,
+  showSideChildrenWhenHeaderHidden,
+  ...htmlAttributes
+}) => {
+  const fatTitle = !description || description && compactHeader;
+  const [headerActionsVisible, setHeaderActionsVisible] = useState(false);
+  const renderTitle = () => {
     if (!title && !titleTag) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(S.TitleWrapper, {
-      "data-testid": "card-title",
-      compact: compactHeader,
-      description: Boolean(description)
-    }, title && /*#__PURE__*/React.createElement(S.Title, {
-      level: 4,
-      fat: !!fatTitle
-    }, title), titleTag && /*#__PURE__*/React.createElement(S.TitleTag, null, titleTag));
+    return /* @__PURE__ */ jsxs(TitleWrapper, { "data-testid": "card-title", compact: compactHeader, description: Boolean(description), children: [
+      title && /* @__PURE__ */ jsx(Title, { level: 4, fat: !!fatTitle, children: title }),
+      titleTag && /* @__PURE__ */ jsx(TitleTag, { children: titleTag })
+    ] });
   };
-  return /*#__PURE__*/React.createElement(S.Container, _extends({
-    raised: raised,
-    disabled: disabled,
-    className: "ds-card " + (className || ''),
-    lively: lively,
-    "data-testid": "card-wrapper",
-    background: background
-    /** Necessary for passing down data-* attributes */
-  }, htmlAttributes), withHeader && /*#__PURE__*/React.createElement(S.Header, {
-    onClick: onHeaderClick,
-    headerBorderBottom: headerBorderBottom,
-    defaultHeaderBackgroundColor: defaultHeaderBackgroundColor
-  }, icon && /*#__PURE__*/React.createElement(S.IconContainer, {
-    description: description,
-    compact: compactHeader
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: icon,
-    color: iconColor
-  })) || avatar || renderBadge && renderBadge(), /*#__PURE__*/React.createElement(S.HeaderContent, {
-    compact: compactHeader,
-    hasIconOrAvatar: Boolean(icon || avatar)
-  }, renderTitle(), description && /*#__PURE__*/React.createElement(S.Description, {
-    "data-testid": "card-description"
-  }, description)), headerSideChildren && /*#__PURE__*/React.createElement(VisibilitySensor, {
-    partialVisibility: true,
-    onChange: setHeaderActionsVisible
-  }, /*#__PURE__*/React.createElement(S.HeaderSideChildren, {
-    onClick: function onClick(event) {
-      return event.stopPropagation();
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      raised,
+      disabled,
+      className: `ds-card ${className || ""}`,
+      lively,
+      "data-testid": "card-wrapper",
+      background,
+      ...htmlAttributes,
+      children: [
+        withHeader && /* @__PURE__ */ jsxs(Header, { onClick: onHeaderClick, headerBorderBottom, defaultHeaderBackgroundColor, children: [
+          icon && /* @__PURE__ */ jsx(IconContainer, { description, compact: compactHeader, children: /* @__PURE__ */ jsx(Icon, { component: icon, color: iconColor }) }) || avatar || renderBadge && renderBadge(),
+          /* @__PURE__ */ jsxs(HeaderContent, { compact: compactHeader, hasIconOrAvatar: Boolean(icon || avatar), children: [
+            renderTitle(),
+            description && /* @__PURE__ */ jsx(Description, { "data-testid": "card-description", children: description })
+          ] }),
+          headerSideChildren && /* @__PURE__ */ jsx(VisibilitySensor, { partialVisibility: true, onChange: setHeaderActionsVisible, children: /* @__PURE__ */ jsx(HeaderSideChildren, { onClick: (event) => event.stopPropagation(), children: headerSideChildren }) })
+        ] }),
+        staticContent && /* @__PURE__ */ jsx(AnimateHeight, { className: "static-content-card-animation", duration: ANIMATION_DURATION, height: hideContent ? "auto" : 0, children: /* @__PURE__ */ jsx(ChildrenContainer, { "data-testid": "card-static-content", children: /* @__PURE__ */ jsx(PaddingWrapper, { withoutPadding, withHeader, children: staticContent }) }) }),
+        /* @__PURE__ */ jsx(AnimateHeight, { className: "card-animation", duration: ANIMATION_DURATION, height: hideContent ? 0 : "auto", children: /* @__PURE__ */ jsx(ChildrenContainer, { "data-testid": "card-content", children: /* @__PURE__ */ jsx(PaddingWrapper, { withoutPadding, withHeader, children }) }) }),
+        showSideChildrenWhenHeaderHidden && /* @__PURE__ */ jsx(AnimateHeight, { className: "card-animation-footer", duration: 0, height: headerSideChildren && !headerActionsVisible ? "auto" : 0, children: /* @__PURE__ */ jsx(FooterContainer, { children: headerSideChildren }) })
+      ]
     }
-  }, headerSideChildren))), staticContent && /*#__PURE__*/React.createElement(AnimateHeight, {
-    className: "static-content-card-animation",
-    duration: ANIMATION_DURATION,
-    height: hideContent ? 'auto' : 0
-  }, /*#__PURE__*/React.createElement(S.ChildrenContainer, {
-    "data-testid": "card-static-content"
-  }, /*#__PURE__*/React.createElement(S.PaddingWrapper, {
-    withoutPadding: withoutPadding,
-    withHeader: withHeader
-  }, staticContent))), /*#__PURE__*/React.createElement(AnimateHeight, {
-    className: "card-animation",
-    duration: ANIMATION_DURATION,
-    height: hideContent ? 0 : 'auto'
-  }, /*#__PURE__*/React.createElement(S.ChildrenContainer, {
-    "data-testid": "card-content"
-  }, /*#__PURE__*/React.createElement(S.PaddingWrapper, {
-    withoutPadding: withoutPadding,
-    withHeader: withHeader
-  }, children))), showSideChildrenWhenHeaderHidden && /*#__PURE__*/React.createElement(AnimateHeight, {
-    className: "card-animation-footer",
-    duration: 0,
-    height: headerSideChildren && !headerActionsVisible ? 'auto' : 0
-  }, /*#__PURE__*/React.createElement(S.FooterContainer, null, headerSideChildren)));
+  );
+};
+export {
+  Card as default
 };
-export default Card;

package/dist/Card/Card.styles.d.ts

@@ -1,37 +1,37 @@
-import type { MouseEventHandler, ReactNode } from 'react';
-import { type Backgrounds } from './Card.types';
-export declare const HeaderSideChildren: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {
+import { MouseEventHandler, ReactNode } from 'react';
+import { Backgrounds } from './Card.types';
+export declare const HeaderSideChildren: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const IconContainer: import('styled-components').StyledComponent<"div", any, {
     compact?: boolean;
     description?: ReactNode;
 }, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
+export declare const Container: import('styled-components').StyledComponent<"div", any, {
     raised?: boolean;
     disabled?: boolean;
     lively?: boolean;
     background: Backgrounds;
 }, never>;
-export declare const Header: import("styled-components").StyledComponent<"div", any, {
+export declare const Header: import('styled-components').StyledComponent<"div", any, {
     onClick?: MouseEventHandler;
     headerBorderBottom?: boolean;
     defaultHeaderBackgroundColor?: boolean;
 }, never>;
-export declare const Title: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => React.JSX.Element, any, {
+export declare const Title: import('styled-components').StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import('@synerise/ds-typography/dist/Title.types').Props) => React.JSX.Element, any, {
     fat: boolean;
 }, never>;
-export declare const TitleWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const TitleWrapper: import('styled-components').StyledComponent<"div", any, {
     compact?: boolean;
     description?: boolean;
 }, never>;
-export declare const TitleTag: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HeaderContent: import("styled-components").StyledComponent<"div", any, {
+export declare const TitleTag: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Description: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const HeaderContent: import('styled-components').StyledComponent<"div", any, {
     compact?: boolean;
     hasIconOrAvatar: boolean;
 }, never>;
-export declare const ChildrenContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PaddingWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const ChildrenContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const PaddingWrapper: import('styled-components').StyledComponent<"div", any, {
     withHeader?: boolean;
     withoutPadding?: boolean;
 }, never>;
-export declare const FooterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FooterContainer: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Card/Card.styles.js

@@ -1,120 +1,92 @@
-import styled, { css } from 'styled-components';
-import { Title as DSTitle } from '@synerise/ds-typography';
-import { CardSummaryWrapper } from '../CardSummary/CardSummary.styles';
-var whiteBg = ['white', 'white-shadow'];
-var greyBg = ['grey', 'grey-shadow'];
-var withBoxShadow = ['white-shadow', 'grey-shadow'];
-var withOutline = ['outline'];
-var backgroundColor = function backgroundColor(props) {
+import styled, { css } from "styled-components";
+import { Title as Title$1 } from "@synerise/ds-typography";
+import { CardSummaryWrapper } from "../CardSummary/CardSummary.styles.js";
+const whiteBg = ["white", "white-shadow"];
+const greyBg = ["grey", "grey-shadow"];
+const withBoxShadow = ["white-shadow", "grey-shadow"];
+const withOutline = ["outline"];
+const backgroundColor = (props) => {
   if (whiteBg.includes(props.background)) {
     return props.theme.palette.white;
   }
   if (greyBg.includes(props.background)) {
-    return props.theme.palette['grey-050'];
+    return props.theme.palette["grey-050"];
   }
   return props.theme.palette.transparent;
 };
-var boxShadow = function boxShadow(props) {
+const boxShadow = (props) => {
   if (withBoxShadow.includes(props.background)) {
-    return "0 4px 12px 0 rgba(35, 41, 54, 0.04)";
+    return `0 4px 12px 0 rgba(35, 41, 54, 0.04)`;
   }
   if (withOutline.includes(props.background)) {
-    return props.theme.palette['grey-200'] + " 0px 0px 0px 1px inset";
+    return `${props.theme.palette["grey-200"]} 0px 0px 0px 1px inset`;
   }
-  return 'none';
+  return "none";
 };
-export var HeaderSideChildren = styled.div.withConfig({
+const HeaderSideChildren = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Cardstyles__HeaderSideChildren",
   componentId: "sc-18exblx-0"
 })(["position:relative;padding-left:24px;"]);
-export var IconContainer = styled.div.withConfig({
+const IconContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Cardstyles__IconContainer",
   componentId: "sc-18exblx-1"
-})(["display:flex;width:24px;height:", ";align-items:center;"], function (props) {
-  return props.description && !props.compact ? '24px' : '32px';
-});
-export var Container = styled.div.withConfig({
+})(["display:flex;width:24px;height:", ";align-items:center;"], (props) => props.description && !props.compact ? "24px" : "32px");
+const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Cardstyles__Container",
   componentId: "sc-18exblx-2"
-})(["background-color:", ";box-shadow:", ";border-radius:", ";display:flex;flex-flow:column;width:100%;.card-animation{> *{transition:opacity 0.3s ease;opacity:0;}&.rah-static--height-auto{> *{opacity:1;}}}", " ", ";", ""], function (props) {
-  return props.background ? backgroundColor(props) : props.theme.palette.transparent;
-}, function (props) {
-  return props.background ? boxShadow(props) : 'none';
-}, function (props) {
-  return props.theme.variable('@border-radius-base');
-}, function (props) {
-  return !!props.raised && css(["box-shadow:", ";"], props.theme.variable('@box-shadow-active'));
-}, function (props) {
-  return !!props.disabled && css(["pointer-events:none;opacity:0.4;", "{opacity:0.16;}", "{opacity:0.4;}"], HeaderSideChildren, IconContainer);
-}, function (props) {
-  return !!props.lively && css(["&:hover{box-shadow:", ";}"], props.theme.variable('@box-shadow-active'));
-});
-export var Header = styled.div.withConfig({
+})(["background-color:", ";box-shadow:", ";border-radius:", ";display:flex;flex-flow:column;width:100%;.card-animation{> *{transition:opacity 0.3s ease;opacity:0;}&.rah-static--height-auto{> *{opacity:1;}}}", " ", ";", ""], (props) => props.background ? backgroundColor(props) : props.theme.palette.transparent, (props) => props.background ? boxShadow(props) : "none", (props) => props.theme.variable("@border-radius-base"), (props) => !!props.raised && css(["box-shadow:", ";"], props.theme.variable("@box-shadow-active")), (props) => !!props.disabled && css(["pointer-events:none;opacity:0.4;", "{opacity:0.16;}", "{opacity:0.4;}"], HeaderSideChildren, IconContainer), (props) => !!props.lively && css(["&:hover{box-shadow:", ";}"], props.theme.variable("@box-shadow-active")));
+const Header = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Cardstyles__Header",
   componentId: "sc-18exblx-3"
-})(["padding:24px 24px 24px 24px;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;position:relative;&:after{position:absolute;bottom:0;left:24px;right:24px;height:1px;content:'';display:", ";background-color:", ";}&:hover{", "}", ""], function (props) {
-  return props.headerBorderBottom ? 'block' : 'none';
-}, function (props) {
-  return props.theme.palette['grey-100'];
-}, function (props) {
-  return !!props.onClick && "cursor:pointer;";
-}, function (props) {
-  return !!props.defaultHeaderBackgroundColor && css(["background-color:", ";"], props.theme.palette.white);
-});
-export var Title = styled(DSTitle).withConfig({
+})(["padding:24px 24px 24px 24px;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;position:relative;&:after{position:absolute;bottom:0;left:24px;right:24px;height:1px;content:'';display:", ";background-color:", ";}&:hover{", "}", ""], (props) => props.headerBorderBottom ? "block" : "none", (props) => props.theme.palette["grey-100"], (props) => !!props.onClick && `cursor:pointer;`, (props) => !!props.defaultHeaderBackgroundColor && css(["background-color:", ";"], props.theme.palette.white));
+const Title = /* @__PURE__ */ styled(Title$1).withConfig({
   displayName: "Cardstyles__Title",
   componentId: "sc-18exblx-4"
-})(["&&{display:flex;align-items:center;min-height:", ";margin:0;line-height:1.4;}"], function (props) {
-  return props.fat ? '32px' : '20px';
-});
-export var TitleWrapper = styled.div.withConfig({
+})(["&&{display:flex;align-items:center;min-height:", ";margin:0;line-height:1.4;}"], (props) => props.fat ? "32px" : "20px");
+const TitleWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Cardstyles__TitleWrapper",
   componentId: "sc-18exblx-5"
-})(["display:flex;flex-direction:row;gap:4px;align-items:center;margin-bottom:", ";"], function (props) {
-  return props.description && !props.compact ? '6px' : '0';
-});
-export var TitleTag = styled.div.withConfig({
+})(["display:flex;flex-direction:row;gap:4px;align-items:center;margin-bottom:", ";"], (props) => props.description && !props.compact ? "6px" : "0");
+const TitleTag = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Cardstyles__TitleTag",
   componentId: "sc-18exblx-6"
 })([""]);
-export var Description = styled.div.withConfig({
+const Description = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Cardstyles__Description",
   componentId: "sc-18exblx-7"
-})(["&&{color:", ";font-size:13px;line-height:1.38;margin:0;}"], function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var HeaderContent = styled.div.withConfig({
+})(["&&{color:", ";font-size:13px;line-height:1.38;margin:0;}"], (props) => props.theme.palette["grey-600"]);
+const HeaderContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Cardstyles__HeaderContent",
   componentId: "sc-18exblx-8"
-})(["max-width:100%;flex:1;display:flex;flex-direction:", ";align-items:", ";margin:0 0 0 ", ";", ""], function (props) {
-  return props.compact ? 'row' : 'column';
-}, function (props) {
-  return props.compact ? 'center' : 'flex-start';
-}, function (props) {
+})(["max-width:100%;flex:1;display:flex;flex-direction:", ";align-items:", ";margin:0 0 0 ", ";", ""], (props) => props.compact ? "row" : "column", (props) => props.compact ? "center" : "flex-start", (props) => {
   if (props.hasIconOrAvatar) {
-    return '24px';
+    return "24px";
   }
-  return '0';
-}, function (props) {
-  return !!props.compact && css(["", "{height:32px;line-height:32px;margin:0;}", "{border-left:1px solid ", ";height:32px;line-height:32px;padding:0 0 0 24px;margin:0 0 0 24px;}"], Title, Description, props.theme.palette['grey-200']);
-});
-export var ChildrenContainer = styled.div.withConfig({
+  return "0";
+}, (props) => !!props.compact && css(["", "{height:32px;line-height:32px;margin:0;}", "{border-left:1px solid ", ";height:32px;line-height:32px;padding:0 0 0 24px;margin:0 0 0 24px;}"], Title, Description, props.theme.palette["grey-200"]));
+const ChildrenContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Cardstyles__ChildrenContainer",
   componentId: "sc-18exblx-9"
 })([""]);
-export var PaddingWrapper = styled.div.withConfig({
+const PaddingWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Cardstyles__PaddingWrapper",
   componentId: "sc-18exblx-10"
-})(["padding:", ";", " ", "{margin:0 48px;}"], function (props) {
-  return props.withoutPadding ? '0' : "24px";
-}, function (props) {
-  return !!props.withHeader && "padding-top: 0;";
-}, CardSummaryWrapper);
-export var FooterContainer = styled.div.withConfig({
+})(["padding:", ";", " ", "{margin:0 48px;}"], (props) => props.withoutPadding ? "0" : `24px`, (props) => !!props.withHeader && `padding-top: 0;`, CardSummaryWrapper);
+const FooterContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Cardstyles__FooterContainer",
   componentId: "sc-18exblx-11"
-})(["padding:24px;display:flex;align-items:center;justify-content:flex-end;background:", ";border-top:solid 1px ", ";"], function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return props.theme.palette['grey-100'];
-});
+})(["padding:24px;display:flex;align-items:center;justify-content:flex-end;background:", ";border-top:solid 1px ", ";"], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-100"]);
+export {
+  ChildrenContainer,
+  Container,
+  Description,
+  FooterContainer,
+  Header,
+  HeaderContent,
+  HeaderSideChildren,
+  IconContainer,
+  PaddingWrapper,
+  Title,
+  TitleTag,
+  TitleWrapper
+};

package/dist/Card/Card.types.d.ts

@@ -1,5 +1,5 @@
-import { type CSSProperties, type ReactNode, type SyntheticEvent } from 'react';
-import { type WithHTMLAttributes } from '@synerise/ds-utils';
+import { CSSProperties, ReactNode, SyntheticEvent } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type Backgrounds = 'white' | 'white-shadow' | 'grey' | 'grey-shadow' | 'outline';
 export type CardProps = WithHTMLAttributes<HTMLDivElement, {
     raised?: boolean;

package/dist/Card/Card.types.js

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

package/dist/CardBadge/CardBadge.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type CardBadgeProps } from './CardBadge.types';
+import { default as React } from 'react';
+import { CardBadgeProps } from './CardBadge.types';
 declare const CardBadge: ({ icon, status, ...props }: CardBadgeProps) => React.JSX.Element;
 export default CardBadge;

package/dist/CardBadge/CardBadge.js

@@ -1,18 +1,11 @@
-var _excluded = ["icon", "status"];
-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 from 'react';
-import Icon from '@synerise/ds-icon';
-import * as S from './CardBadge.styles';
-var CardBadge = function CardBadge(_ref) {
-  var icon = _ref.icon,
-    _ref$status = _ref.status,
-    status = _ref$status === void 0 ? 'default' : _ref$status,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(S.CardBadge, _extends({
-    status: status
-  }, props), /*#__PURE__*/React.createElement(Icon, {
-    component: icon
-  }));
+import { jsx } from "react/jsx-runtime";
+import Icon from "@synerise/ds-icon";
+import { CardBadge as CardBadge$1 } from "./CardBadge.styles.js";
+const CardBadge = ({
+  icon,
+  status = "default",
+  ...props
+}) => /* @__PURE__ */ jsx(CardBadge$1, { status, ...props, children: /* @__PURE__ */ jsx(Icon, { component: icon }) });
+export {
+  CardBadge as default
 };
-export default CardBadge;

package/dist/CardBadge/CardBadge.styles.d.ts

@@ -1,4 +1,4 @@
-import { type BadgeStatus } from './CardBadge.types';
-export declare const CardBadge: import("styled-components").StyledComponent<"div", any, {
+import { BadgeStatus } from './CardBadge.types';
+export declare const CardBadge: import('styled-components').StyledComponent<"div", any, {
     status: BadgeStatus;
 }, never>;

package/dist/CardBadge/CardBadge.styles.js

@@ -1,28 +1,25 @@
-import styled from 'styled-components';
-var background = {
-  success: 'green-600',
-  warning: 'yellow-600',
-  error: 'red-600',
-  "default": 'transparent',
-  checked: 'transparent'
+import styled from "styled-components";
+const background = {
+  success: "green-600",
+  warning: "yellow-600",
+  error: "red-600",
+  default: "transparent",
+  checked: "transparent"
 };
-var color = {
-  success: 'white',
-  warning: 'white',
-  error: 'white',
-  "default": 'grey-400',
-  checked: 'grey-400'
+const color = {
+  success: "white",
+  warning: "white",
+  error: "white",
+  default: "grey-400",
+  checked: "grey-400"
 };
-var boxShadow = function boxShadow(props) {
-  return props.status === 'default' ? props.theme.palette['grey-400'] + " 0px 0px 0px 1.5px inset" : 'none';
+const boxShadow = (props) => {
+  return props.status === "default" ? `${props.theme.palette["grey-400"]} 0px 0px 0px 1.5px inset` : "none";
 };
-export var CardBadge = styled.div.withConfig({
+const CardBadge = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardBadgestyles__CardBadge",
   componentId: "sc-1xcnpyh-0"
-})(["width:24px;height:24px;display:flex;align-items:center;justify-content:center;background-color:", ";box-shadow:", ";border-radius:50%;&&& svg{color:", ";}"], function (props) {
-  return props.theme.palette[background[props.status]];
-}, function (props) {
-  return boxShadow(props);
-}, function (props) {
-  return props.theme.palette[color[props.status]];
-});
+})(["width:24px;height:24px;display:flex;align-items:center;justify-content:center;background-color:", ";box-shadow:", ";border-radius:50%;&&& svg{color:", ";}"], (props) => props.theme.palette[background[props.status]], (props) => boxShadow(props), (props) => props.theme.palette[color[props.status]]);
+export {
+  CardBadge
+};

package/dist/CardBadge/CardBadge.types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { ReactNode } from 'react';
 export type BadgeStatus = 'success' | 'checked' | 'warning' | 'error' | 'default';
 export type CardBadgeProps = {
     icon: ReactNode;

package/dist/CardBadge/CardBadge.types.js

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

package/dist/CardGroup/CardGroup.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type CardGroupProps } from './CardGroup.types';
+import { default as React } from 'react';
+import { CardGroupProps } from './CardGroup.types';
 declare const CardGroup: ({ children, columns, ...htmlAttributes }: CardGroupProps) => React.JSX.Element;
 export default CardGroup;

package/dist/CardGroup/CardGroup.js

@@ -1,14 +1,12 @@
-var _excluded = ["children", "columns"];
-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 from 'react';
-import * as S from './CardGroup.styles';
-var CardGroup = function CardGroup(_ref) {
-  var children = _ref.children,
-    columns = _ref.columns,
-    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(S.Container, _extends({
-    items: columns
-  }, htmlAttributes), children);
+import { jsx } from "react/jsx-runtime";
+import { Container } from "./CardGroup.styles.js";
+const CardGroup = ({
+  children,
+  columns,
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ jsx(Container, { items: columns, ...htmlAttributes, children });
+};
+export {
+  CardGroup as default
 };
-export default CardGroup;

package/dist/CardGroup/CardGroup.styles.d.ts

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

package/dist/CardGroup/CardGroup.styles.js

@@ -1,9 +1,8 @@
-import styled from 'styled-components';
-export var Container = styled.div.withConfig({
+import styled from "styled-components";
+const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardGroupstyles__Container",
   componentId: "sc-qyudjs-0"
-})(["display:grid;grid-column-gap:24px;grid-row-gap:24px;grid-template-columns:", ";width:100%;"], function (props) {
-  return [].concat(new Array(props.items)).map(function () {
-    return '1fr';
-  }).join(' ');
-});
+})(["display:grid;grid-column-gap:24px;grid-row-gap:24px;grid-template-columns:", ";width:100%;"], (props) => [...new Array(props.items)].map(() => "1fr").join(" "));
+export {
+  Container
+};

package/dist/CardGroup/CardGroup.types.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode } from 'react';
-import { type WithHTMLAttributes } from '@synerise/ds-utils';
+import { ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type CardGroupProps = WithHTMLAttributes<HTMLDivElement, {
     children: ReactNode;
     columns: number;

package/dist/CardGroup/CardGroup.types.js

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

package/dist/CardSummary/CardSummary.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import { type CardSummaryProps } from './CardSummary.types';
+import { default as React } from 'react';
+import { CardSummaryProps } from './CardSummary.types';
 export declare const CardSummary: ({ title, items, ...props }: CardSummaryProps) => React.JSX.Element;

package/dist/CardSummary/CardSummary.js

@@ -1,21 +1,20 @@
-var _excluded = ["title", "items"],
-  _excluded2 = ["key"];
-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 from 'react';
-import * as S from './CardSummary.styles';
-import { CardSummaryItem } from './CardSummaryItem';
-export var CardSummary = function CardSummary(_ref) {
-  var title = _ref.title,
-    items = _ref.items,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(S.CardSummaryWrapper, props, title && /*#__PURE__*/React.createElement(S.CardSummaryTitle, {
-    level: 5
-  }, title), /*#__PURE__*/React.createElement(S.CardSummaryList, null, items.map(function (_ref2) {
-    var key = _ref2.key,
-      item = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-    return /*#__PURE__*/React.createElement(CardSummaryItem, _extends({}, item, {
-      key: key
-    }));
-  })));
-};
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import { CardSummaryWrapper, CardSummaryTitle, CardSummaryList } from "./CardSummary.styles.js";
+import { CardSummaryItem } from "./CardSummaryItem.js";
+const CardSummary = ({
+  title,
+  items,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(CardSummaryWrapper, { ...props, children: [
+    title && /* @__PURE__ */ jsx(CardSummaryTitle, { level: 5, children: title }),
+    /* @__PURE__ */ jsx(CardSummaryList, { children: items.map(({
+      key,
+      ...item
+    }) => /* @__PURE__ */ createElement(CardSummaryItem, { ...item, key })) })
+  ] });
+};
+export {
+  CardSummary
+};

package/dist/CardSummary/CardSummary.styles.d.ts

@@ -1,27 +1,27 @@
-import { type SummaryObjectsDirection } from './CardSummary.types';
-export declare const CardSummaryWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardSummaryTitle: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => React.JSX.Element, any, {}, never>;
-export declare const CardSummaryList: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardSummaryItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ValueButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardSummaryItemDetailsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardSummaryItemDetails: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardSummaryItemLabelValueWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const CardSummaryItemLabel: import("styled-components").StyledComponent<({ size, className, children, ellipsis, style, }: {
-    size?: import("@synerise/ds-typography").TextSize;
-    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps;
-    children?: import("react").ReactNode;
+import { SummaryObjectsDirection } from './CardSummary.types';
+export declare const CardSummaryWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const CardSummaryTitle: import('styled-components').StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import('@synerise/ds-typography/dist/Title.types').Props) => React.JSX.Element, any, {}, never>;
+export declare const CardSummaryList: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const CardSummaryItemWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ValueButtonWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const CardSummaryItemDetailsWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const CardSummaryItemDetails: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const CardSummaryItemLabelValueWrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const CardSummaryItemLabel: import('styled-components').StyledComponent<({ size, className, children, ellipsis, style, }: {
+    size?: import('@synerise/ds-typography').TextSize;
+    ellipsis?: import('@synerise/ds-typography/dist/Ellipsis').EllipsisProps;
+    children?: import('react').ReactNode;
     className?: string;
-    style?: import("react").CSSProperties;
+    style?: import('react').CSSProperties;
 }) => React.JSX.Element, any, {}, never>;
-export declare const CardSummaryItemValue: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Icon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@synerise/ds-icon").BaseIconProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {
+export declare const CardSummaryItemValue: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Icon: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<import('@synerise/ds-icon').BaseIconProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, keyof import('@synerise/ds-icon').BaseIconProps> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {
     isOpen: boolean;
 }, never>;
-export declare const CardSummaryItemObjects: import("styled-components").StyledComponent<"div", any, {
+export declare const CardSummaryItemObjects: import('styled-components').StyledComponent<"div", any, {
     direction: SummaryObjectsDirection;
 }, never>;
-export declare const CardSummaryItemObject: import("styled-components").StyledComponent<"div", any, {
+export declare const CardSummaryItemObject: import('styled-components').StyledComponent<"div", any, {
     direction: SummaryObjectsDirection;
 }, never>;

package/dist/CardSummary/CardSummary.styles.js

@@ -1,68 +1,90 @@
-import styled from 'styled-components';
-import DSIcon from '@synerise/ds-icon';
-import { Tag } from '@synerise/ds-tag/dist/Tag.styles';
-import { Text, Title, macro } from '@synerise/ds-typography';
-export var CardSummaryWrapper = styled.div.withConfig({
+import styled from "styled-components";
+import Icon$1 from "@synerise/ds-icon";
+import { Tag } from "@synerise/ds-tag/dist/Tag.styles";
+import { macro, Text, Title } from "@synerise/ds-typography";
+const CardSummaryWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryWrapper",
   componentId: "sc-1yj41os-0"
 })([""]);
-export var CardSummaryTitle = styled(Title).withConfig({
+const CardSummaryTitle = /* @__PURE__ */ styled(Title).withConfig({
   displayName: "CardSummarystyles__CardSummaryTitle",
   componentId: "sc-1yj41os-1"
 })([""]);
-export var CardSummaryList = styled.div.withConfig({
+const CardSummaryList = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryList",
   componentId: "sc-1yj41os-2"
 })([""]);
-export var CardSummaryItemWrapper = styled.div.withConfig({
+const CardSummaryItemWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemWrapper",
   componentId: "sc-1yj41os-3"
 })([""]);
-export var ValueButtonWrapper = styled.div.withConfig({
+const ValueButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSummarystyles__ValueButtonWrapper",
   componentId: "sc-1yj41os-4"
 })(["align-self:flex-start;"]);
-export var CardSummaryItemDetailsWrapper = styled.div.withConfig({
+const CardSummaryItemDetailsWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemDetailsWrapper",
   componentId: "sc-1yj41os-5"
 })(["display:flex;align-items:center;gap:12px;min-height:32px;"]);
-export var CardSummaryItemDetails = styled.div.withConfig({
+const CardSummaryItemDetails = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemDetails",
   componentId: "sc-1yj41os-6"
-})(["&:before{content:'\u2022';}display:flex;gap:12px;align-items:center;"]);
-export var CardSummaryItemLabelValueWrapper = styled.span.withConfig({
+})(["&:before{content:'•';}display:flex;gap:12px;align-items:center;"]);
+const CardSummaryItemLabelValueWrapper = /* @__PURE__ */ styled.span.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemLabelValueWrapper",
   componentId: "sc-1yj41os-7"
 })(["align-self:center;word-break:break-all;display:flex;align-items:center;"]);
-export var CardSummaryItemLabel = styled(Text).withConfig({
+const CardSummaryItemLabel = /* @__PURE__ */ styled(Text).withConfig({
   displayName: "CardSummarystyles__CardSummaryItemLabel",
   componentId: "sc-1yj41os-8"
 })(["line-height:24px;margin-right:4px;"]);
-export var CardSummaryItemValue = styled.span.withConfig({
+const CardSummaryItemValue = /* @__PURE__ */ styled.span.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemValue",
   componentId: "sc-1yj41os-9"
 })(["", " display:flex;align-items:center;gap:4px;"], macro.h200);
-export var IconWrapper = styled.div.withConfig({
+const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSummarystyles__IconWrapper",
   componentId: "sc-1yj41os-10"
 })([""]);
-export var Icon = styled(DSIcon).withConfig({
+const Icon = /* @__PURE__ */ styled(Icon$1).withConfig({
   displayName: "CardSummarystyles__Icon",
   componentId: "sc-1yj41os-11"
-})(["transform:rotate(", "deg);"], function (props) {
-  return props.isOpen ? '180' : '0';
-});
-export var CardSummaryItemObjects = styled.div.withConfig({
+})(["transform:rotate(", "deg);"], (props) => props.isOpen ? "180" : "0");
+const CardSummaryItemObjects = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemObjects",
   componentId: "sc-1yj41os-12"
-})(["--cols:4;--gap:8px;display:flex;margin:8px 0 8px 16px;", ""], function (_ref) {
-  var direction = _ref.direction;
-  return direction === 'column' ? "\n    flex-direction: column;\n    gap: 12px;\n  " : "\n    flex-wrap: wrap;\n    gap: 0 var(--gap);\n  ";
-});
-export var CardSummaryItemObject = styled.div.withConfig({
+})(["--cols:4;--gap:8px;display:flex;margin:8px 0 8px 16px;", ""], ({
+  direction
+}) => direction === "column" ? `
+    flex-direction: column;
+    gap: 12px;
+  ` : `
+    flex-wrap: wrap;
+    gap: 0 var(--gap);
+  `);
+const CardSummaryItemObject = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemObject",
   componentId: "sc-1yj41os-13"
-})(["min-width:0;", "{margin-left:0;}", ""], Tag, function (_ref2) {
-  var direction = _ref2.direction;
-  return direction === 'row' && "\n    flex-basis: calc(\n      100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1)\n    );\n  ";
-});
+})(["min-width:0;", "{margin-left:0;}", ""], Tag, ({
+  direction
+}) => direction === "row" && `
+    flex-basis: calc(
+      100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1)
+    );
+  `);
+export {
+  CardSummaryItemDetails,
+  CardSummaryItemDetailsWrapper,
+  CardSummaryItemLabel,
+  CardSummaryItemLabelValueWrapper,
+  CardSummaryItemObject,
+  CardSummaryItemObjects,
+  CardSummaryItemValue,
+  CardSummaryItemWrapper,
+  CardSummaryList,
+  CardSummaryTitle,
+  CardSummaryWrapper,
+  Icon,
+  IconWrapper,
+  ValueButtonWrapper
+};

package/dist/CardSummary/CardSummary.types.d.ts

@@ -1,5 +1,5 @@
-import type { Key, ReactElement, ReactNode } from 'react';
-import type { WithHTMLAttributes } from '@synerise/ds-utils';
+import { Key, ReactElement, ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type SummaryObjectsDirection = 'row' | 'column';
 export type CardSummaryItemProps = WithHTMLAttributes<HTMLDivElement, {
     key: Key;

package/dist/CardSummary/CardSummary.types.js

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

package/dist/CardSummary/CardSummaryItem.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import { type CardSummaryItemProps } from './CardSummary.types';
+import { default as React } from 'react';
+import { CardSummaryItemProps } from './CardSummary.types';
 export declare const CardSummaryItem: ({ label, value, summaryObjects, summaryObjectsDirection, valueButton, ...rest }: CardSummaryItemProps) => React.JSX.Element;

package/dist/CardSummary/CardSummaryItem.js

@@ -1,42 +1,42 @@
-var _excluded = ["label", "value", "summaryObjects", "summaryObjectsDirection", "valueButton"];
-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, { useState } from 'react';
-import AnimateHeight from 'react-animate-height';
-import { v4 as uuid } from 'uuid';
-import { AngleDownS } from '@synerise/ds-icon';
-import { ANIMATION_DURATION } from '../constants';
-import * as S from './CardSummary.styles';
-export var CardSummaryItem = function CardSummaryItem(_ref) {
-  var label = _ref.label,
-    value = _ref.value,
-    summaryObjects = _ref.summaryObjects,
-    _ref$summaryObjectsDi = _ref.summaryObjectsDirection,
-    summaryObjectsDirection = _ref$summaryObjectsDi === void 0 ? 'row' : _ref$summaryObjectsDi,
-    valueButton = _ref.valueButton,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = useState(false),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var withObjects = !!(summaryObjects != null && summaryObjects.length);
-  var handleClick = function handleClick() {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import AnimateHeight from "react-animate-height";
+import { v4 } from "uuid";
+import { AngleDownS } from "@synerise/ds-icon";
+import { ANIMATION_DURATION } from "../constants.js";
+import { CardSummaryItemWrapper, CardSummaryItemDetailsWrapper, CardSummaryItemDetails, CardSummaryItemLabelValueWrapper, CardSummaryItemLabel, CardSummaryItemValue, ValueButtonWrapper, CardSummaryItemObjects, CardSummaryItemObject, IconWrapper, Icon } from "./CardSummary.styles.js";
+const CardSummaryItem = ({
+  label,
+  value,
+  summaryObjects,
+  summaryObjectsDirection = "row",
+  valueButton,
+  ...rest
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const withObjects = !!summaryObjects?.length;
+  const handleClick = () => {
     setIsOpen(!isOpen);
   };
-  var icon = /*#__PURE__*/React.createElement(S.IconWrapper, null, /*#__PURE__*/React.createElement(S.Icon, {
-    isOpen: isOpen,
-    component: /*#__PURE__*/React.createElement(AngleDownS, null),
-    onClick: handleClick
-  }));
-  return /*#__PURE__*/React.createElement(S.CardSummaryItemWrapper, rest, /*#__PURE__*/React.createElement(S.CardSummaryItemDetailsWrapper, null, /*#__PURE__*/React.createElement(S.CardSummaryItemDetails, null, /*#__PURE__*/React.createElement(S.CardSummaryItemLabelValueWrapper, null, label && /*#__PURE__*/React.createElement(S.CardSummaryItemLabel, {
-    size: "small"
-  }, label, ":"), /*#__PURE__*/React.createElement(S.CardSummaryItemValue, null, value, " ", withObjects && icon))), valueButton && /*#__PURE__*/React.createElement(S.ValueButtonWrapper, null, valueButton)), withObjects && /*#__PURE__*/React.createElement(AnimateHeight, {
-    duration: ANIMATION_DURATION,
-    height: isOpen ? 'auto' : 0
-  }, /*#__PURE__*/React.createElement(S.CardSummaryItemObjects, {
-    direction: summaryObjectsDirection
-  }, summaryObjects == null ? void 0 : summaryObjects.map(function (object) {
-    return /*#__PURE__*/React.createElement(S.CardSummaryItemObject, {
-      direction: summaryObjectsDirection,
-      key: object.key || uuid()
-    }, object);
-  }))));
-};
+  const icon = /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(Icon, { isOpen, component: /* @__PURE__ */ jsx(AngleDownS, {}), onClick: handleClick }) });
+  return /* @__PURE__ */ jsxs(CardSummaryItemWrapper, { ...rest, children: [
+    /* @__PURE__ */ jsxs(CardSummaryItemDetailsWrapper, { children: [
+      /* @__PURE__ */ jsx(CardSummaryItemDetails, { children: /* @__PURE__ */ jsxs(CardSummaryItemLabelValueWrapper, { children: [
+        label && /* @__PURE__ */ jsxs(CardSummaryItemLabel, { size: "small", children: [
+          label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsxs(CardSummaryItemValue, { children: [
+          value,
+          " ",
+          withObjects && icon
+        ] })
+      ] }) }),
+      valueButton && /* @__PURE__ */ jsx(ValueButtonWrapper, { children: valueButton })
+    ] }),
+    withObjects && /* @__PURE__ */ jsx(AnimateHeight, { duration: ANIMATION_DURATION, height: isOpen ? "auto" : 0, children: /* @__PURE__ */ jsx(CardSummaryItemObjects, { direction: summaryObjectsDirection, children: summaryObjects?.map((object) => /* @__PURE__ */ jsx(CardSummaryItemObject, { direction: summaryObjectsDirection, children: object }, object.key || v4())) }) })
+  ] });
+};
+export {
+  CardSummaryItem
+};

package/dist/constants.js

@@ -1 +1,4 @@
-export var ANIMATION_DURATION = 300;
+const ANIMATION_DURATION = 300;
+export {
+  ANIMATION_DURATION
+};

package/dist/index.js

@@ -1,12 +1,19 @@
-import * as MainCardStyles from './Card/Card.styles';
-import * as CardBadgeStyles from './CardBadge/CardBadge.styles';
-import * as CardGroupStyles from './CardGroup/CardGroup.styles';
-export { default } from './Card/Card';
-export { default as CardGroup } from './CardGroup/CardGroup';
-export { default as CardBadge } from './CardBadge/CardBadge';
-export { CardSummary } from './CardSummary/CardSummary';
-export var CardStyles = {
-  Card: MainCardStyles,
-  CardGroup: CardGroupStyles,
-  CardBadge: CardBadgeStyles
-};
+import * as Card_Card_styles from "./Card/Card.styles.js";
+import * as CardBadge_CardBadge_styles from "./CardBadge/CardBadge.styles.js";
+import * as CardGroup_CardGroup_styles from "./CardGroup/CardGroup.styles.js";
+import { default as default2 } from "./Card/Card.js";
+import { default as default3 } from "./CardGroup/CardGroup.js";
+import { default as default4 } from "./CardBadge/CardBadge.js";
+import { CardSummary } from "./CardSummary/CardSummary.js";
+const CardStyles = {
+  Card: Card_Card_styles,
+  CardGroup: CardGroup_CardGroup_styles,
+  CardBadge: CardBadge_CardBadge_styles
+};
+export {
+  default4 as CardBadge,
+  default3 as CardGroup,
+  CardStyles,
+  CardSummary,
+  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-card",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "Card UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,15 +16,15 @@
     "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",
-    "test": "vitest",
-    "test:watch": "pnpm run test -- --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "types": "tsc --noEmit",
     "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
@@ -35,11 +35,11 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-avatar": "^1.3.3",
-    "@synerise/ds-icon": "^1.14.1",
-    "@synerise/ds-tag": "^1.4.16",
-    "@synerise/ds-typography": "^1.1.11",
-    "@synerise/ds-utils": "^1.6.0",
+    "@synerise/ds-avatar": "^1.3.5",
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-tag": "^1.4.18",
+    "@synerise/ds-typography": "^1.1.13",
+    "@synerise/ds-utils": "^1.7.1",
     "react-animate-height": "^2.0.23",
     "react-visibility-sensor": "^5.1.1",
     "uuid": "^8.3.2"
@@ -51,5 +51,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }