@synerise/ds-information-card 1.3.1 → 1.3.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.3.1...@synerise/ds-information-card@1.3.2) (2025-11-28)
+
+
+### Bug Fixes
+
+* **information-card:** styles 4 components within property list ([0155693](https://github.com/Synerise/synerise-design/commit/01556934649db5aefdc3525fea6862e26b8853a4))
+
+
+
+
+
 ## [1.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.3.0...@synerise/ds-information-card@1.3.1) (2025-11-13)
 
 **Note:** Version bump only for package @synerise/ds-information-card

package/dist/InformationCard.d.ts

@@ -22,5 +22,5 @@ declare const InformationCard: React.ForwardRefExoticComponent<{
     renderAdditionalDescription?: () => React.ReactNode;
     propertyListItems?: import(".").InformationCardPropertyListProps["items"];
     summaryItems?: import("./InformationCardSummary/InformationCardSummary.types").InformationCardSummaryProps["items"];
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "className" | "actionButton" | "actionButtonCallback" | "actionButtonTooltipText" | "actionsMenu" | "asTooltip" | "avatarTooltipText" | "copyTooltip" | "copiedTooltip" | "descriptionConfig" | "renderFooter" | "footerText" | "icon" | "iconColor" | "notice" | "renderBadge" | "subtitle" | "renderAdditionalDescription" | "propertyListItems" | "summaryItems"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "className" | "icon" | "actionButton" | "actionButtonCallback" | "actionButtonTooltipText" | "actionsMenu" | "asTooltip" | "avatarTooltipText" | "copyTooltip" | "copiedTooltip" | "descriptionConfig" | "renderFooter" | "footerText" | "iconColor" | "notice" | "renderBadge" | "subtitle" | "renderAdditionalDescription" | "propertyListItems" | "summaryItems"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>;
 export default InformationCard;

package/dist/InformationCard.js

@@ -4,7 +4,6 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import "rc-trigger/assets/index.css";
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import Card from '@synerise/ds-card';
-import { RowWrapper } from '@synerise/ds-description/dist/Row/DescriptionRow.styles';
 import { SegmentM } from '@synerise/ds-icon';
 import { useResizeObserver } from '@synerise/ds-utils';
 import * as S from './InformationCard.styles';
@@ -45,7 +44,7 @@ var InformationCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _useResizeObserver = useResizeObserver(mainSlideRef),
     height = _useResizeObserver.height;
   var copyableSlot = function copyableSlot(content) {
-    return content && /*#__PURE__*/React.createElement(RowWrapper, {
+    return content && /*#__PURE__*/React.createElement(S.CopyWrapper, {
       copyable: true
     }, /*#__PURE__*/React.createElement(S.Flex, {
       style: {

package/dist/InformationCard.styles.d.ts

@@ -1,5 +1,8 @@
 export declare const Flex: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Copyable: import("styled-components").StyledComponent<({ copyValue, texts, className, onMouseEnter, onMouseLeave, }: import("@synerise/ds-description/dist/Row/Copy.types").CopyProps) => React.JSX.Element, any, {}, never>;
+export declare const Copyable: import("styled-components").StyledComponent<({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, ...rest }: import("@synerise/ds-copy-icon").CopyIconProps) => React.JSX.Element, any, {}, never>;
+export declare const CopyWrapper: import("styled-components").StyledComponent<"div", any, {
+    copyable: boolean;
+}, never>;
 export declare const Divider: import("styled-components").StyledComponent<(props: import("@synerise/ds-divider").DividerProps) => React.JSX.Element, any, {}, never>;
 export declare const BottomDivider: import("styled-components").StyledComponent<(props: import("@synerise/ds-divider").DividerProps) => React.JSX.Element, any, {}, never>;
 export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/InformationCard.styles.js

@@ -1,28 +1,35 @@
 import styled, { createGlobalStyle, css } from 'styled-components';
 import { CardStyles } from '@synerise/ds-card';
-import { DescriptionCopyable } from '@synerise/ds-description';
+import CopyIcon from '@synerise/ds-copy-icon';
+import { RowWrapper } from '@synerise/ds-description/dist/Row/DescriptionRow.styles';
 import DSDivider from '@synerise/ds-divider';
+import { Container } from '@synerise/ds-skeleton/dist/Skeleton.styles';
+import { StatusTag } from '@synerise/ds-status/dist/Status.styles';
 import { macro } from '@synerise/ds-typography';
 var INFOCARD_WIDTH = 350;
 export var Flex = styled.div.withConfig({
   displayName: "InformationCardstyles__Flex",
   componentId: "sc-zxu5qa-0"
 })(["display:flex;"]);
-export var Copyable = styled(DescriptionCopyable).withConfig({
+export var Copyable = styled(CopyIcon).withConfig({
   displayName: "InformationCardstyles__Copyable",
   componentId: "sc-zxu5qa-1"
-})(["display:flex;align-items:center;height:20px;"]);
+})(["display:flex;align-items:center;height:20px;visibility:hidden;position:relative;margin-left:8px;opacity:0;"]);
+export var CopyWrapper = styled(RowWrapper).withConfig({
+  displayName: "InformationCardstyles__CopyWrapper",
+  componentId: "sc-zxu5qa-2"
+})(["&:hover{", "{visibility:visible;opacity:1;}}"], Copyable);
 export var Divider = styled(DSDivider).withConfig({
   displayName: "InformationCardstyles__Divider",
-  componentId: "sc-zxu5qa-2"
+  componentId: "sc-zxu5qa-3"
 })(["&&{margin:8px 0;width:100%;}"]);
 export var BottomDivider = styled(DSDivider).withConfig({
   displayName: "InformationCardstyles__BottomDivider",
-  componentId: "sc-zxu5qa-3"
+  componentId: "sc-zxu5qa-4"
 })(["&&{margin-left:16px;margin-right:16px;}"]);
 export var FooterWrapper = styled(Flex).withConfig({
   displayName: "InformationCardstyles__FooterWrapper",
-  componentId: "sc-zxu5qa-4"
+  componentId: "sc-zxu5qa-5"
 })(["background:", ";border-top:solid 1px ", ";padding:8px;"], function (props) {
   return props.theme.palette['grey-050'];
 }, function (props) {
@@ -30,11 +37,11 @@ export var FooterWrapper = styled(Flex).withConfig({
 });
 export var ActionsMenuItems = styled.div.withConfig({
   displayName: "InformationCardstyles__ActionsMenuItems",
-  componentId: "sc-zxu5qa-5"
+  componentId: "sc-zxu5qa-6"
 })([""]);
 export var FlexGrow = styled.div.withConfig({
   displayName: "InformationCardstyles__FlexGrow",
-  componentId: "sc-zxu5qa-6"
+  componentId: "sc-zxu5qa-7"
 })(["flex-grow:", ";"], function (_ref) {
   var _ref$grow = _ref.grow,
     grow = _ref$grow === void 0 ? 1 : _ref$grow;
@@ -42,21 +49,21 @@ export var FlexGrow = styled.div.withConfig({
 });
 export var ActionButtonContainer = styled.div.withConfig({
   displayName: "InformationCardstyles__ActionButtonContainer",
-  componentId: "sc-zxu5qa-7"
+  componentId: "sc-zxu5qa-8"
 })([""]);
 export var InfoCardSlidesWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__InfoCardSlidesWrapper",
-  componentId: "sc-zxu5qa-8"
+  componentId: "sc-zxu5qa-9"
 })([""]);
 export var InfoCardSlide = styled.div.withConfig({
   displayName: "InformationCardstyles__InfoCardSlide",
-  componentId: "sc-zxu5qa-9"
+  componentId: "sc-zxu5qa-10"
 })(["", ""], function (props) {
   return props.height && "max-height: " + props.height + "px;";
 });
 export var InfoCardWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__InfoCardWrapper",
-  componentId: "sc-zxu5qa-10"
+  componentId: "sc-zxu5qa-11"
 })(["margin-left:", ";width:", "px;overflow:hidden;color:", ";text-align:left;font-size:13px;", "{width:", "px;display:flex;transition:left 0.3s;position:relative;left:", ";}", "{width:", "px;height:min-content;}overflow-wrap:anywhere;background-color:white;border-radius:3px;box-shadow:", ";", "{font-weight:400;gap:16px;", "}", "{padding-top:0;display:flex;flex-direction:column;gap:8px;}", "{padding:16px 16px 1px 16px;margin-bottom:0;}", "{align-self:center;margin-left:10px;margin-right:10px;}", "{margin:0;gap:2px;}", "{margin:0;}", "", "{margin-bottom:0;font-size:14px;}", "", "{font-size:11px;}.ds-button{background:transparent;}.btn-focus,.btn-focus:hover{box-shadow:unset;}"], function (props) {
   return props.asTooltip ? '0' : '8px';
 }, INFOCARD_WIDTH, function (props) {
@@ -72,15 +79,15 @@ export var InfoCardWrapper = styled.div.withConfig({
 }, CardStyles.Card.PaddingWrapper, CardStyles.Card.Header, CardStyles.Card.IconContainer, CardStyles.Card.HeaderContent, CardStyles.Card.TitleWrapper, CardStyles.Card.Title, CardStyles.Card.Title, CardStyles.Card.Description, CardStyles.Card.Description);
 export var AlertWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__AlertWrapper",
-  componentId: "sc-zxu5qa-11"
+  componentId: "sc-zxu5qa-12"
 })(["padding-bottom:8px;:empty{display:none;}"]);
 export var NonEditableWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__NonEditableWrapper",
-  componentId: "sc-zxu5qa-12"
+  componentId: "sc-zxu5qa-13"
 })(["padding-bottom:8px;:empty{display:none;}"]);
 export var DescriptionWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__DescriptionWrapper",
-  componentId: "sc-zxu5qa-13"
+  componentId: "sc-zxu5qa-14"
 })(["padding:0 16px;"]);
 
 /**
@@ -88,7 +95,7 @@ export var DescriptionWrapper = styled.div.withConfig({
  */
 export var HidePopoverArrowWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__HidePopoverArrowWrapper",
-  componentId: "sc-zxu5qa-14"
+  componentId: "sc-zxu5qa-15"
 })([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
 
 /**
@@ -97,33 +104,33 @@ export var HidePopoverArrowWrapper = styled.div.withConfig({
 export var GlobalCSSHidePopoverArrow = createGlobalStyle([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
 export var ExtraInfo = styled.div.withConfig({
   displayName: "InformationCardstyles__ExtraInfo",
-  componentId: "sc-zxu5qa-15"
+  componentId: "sc-zxu5qa-16"
 })(["margin-bottom:1px;"]);
 export var InformationCardActionsWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__InformationCardActionsWrapper",
-  componentId: "sc-zxu5qa-16"
+  componentId: "sc-zxu5qa-17"
 })(["padding:8px;"]);
 export var InformationCardPropertyListWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__InformationCardPropertyListWrapper",
-  componentId: "sc-zxu5qa-17"
-})(["display:flex;flex-direction:column;padding:0 16px 8px;gap:8px;"]);
+  componentId: "sc-zxu5qa-18"
+})(["display:flex;flex-direction:column;padding:0 16px 8px;gap:8px;", "{padding:0;}", "{margin:0;}"], Container, StatusTag);
 export var InformationCardPropertyItem = styled.div.withConfig({
   displayName: "InformationCardstyles__InformationCardPropertyItem",
-  componentId: "sc-zxu5qa-18"
+  componentId: "sc-zxu5qa-19"
 })(["display:flex;align-items:center;flex-wrap:wrap;column-gap:8px;row-gap:6px;"]);
 export var InformationCardPropertyItemLabel = styled.span.withConfig({
   displayName: "InformationCardstyles__InformationCardPropertyItemLabel",
-  componentId: "sc-zxu5qa-19"
+  componentId: "sc-zxu5qa-20"
 })(["", ""], macro.small);
 export var InformationCardPropertyItemValue = styled.span.withConfig({
   displayName: "InformationCardstyles__InformationCardPropertyItemValue",
-  componentId: "sc-zxu5qa-20"
-})(["", " font-weight:500;"], macro.small);
+  componentId: "sc-zxu5qa-21"
+})(["", " flex-grow:1;font-weight:500;"], macro.small);
 export var InformationCardSummaryWrapper = styled(Flex).withConfig({
   displayName: "InformationCardstyles__InformationCardSummaryWrapper",
-  componentId: "sc-zxu5qa-21"
+  componentId: "sc-zxu5qa-22"
 })(["margin:0 16px;padding-bottom:8px;gap:0 4px;flex-wrap:wrap;"]);
 export var InformationCardSummaryItem = styled(Flex).withConfig({
   displayName: "InformationCardstyles__InformationCardSummaryItem",
-  componentId: "sc-zxu5qa-22"
+  componentId: "sc-zxu5qa-23"
 })(["font-weight:500;align-items:center;gap:4px;"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-information-card",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "InformationCard UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,20 +36,21 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^1.1.25",
-    "@synerise/ds-avatar": "^1.1.0",
-    "@synerise/ds-badge": "^1.0.25",
-    "@synerise/ds-button": "^1.5.0",
-    "@synerise/ds-card": "^1.2.16",
-    "@synerise/ds-description": "^1.1.13",
-    "@synerise/ds-divider": "^1.2.1",
-    "@synerise/ds-dropdown": "^1.1.1",
-    "@synerise/ds-icon": "^1.8.0",
-    "@synerise/ds-menu": "^1.2.0",
-    "@synerise/ds-scrollbar": "^1.2.0",
-    "@synerise/ds-subtle-form": "^1.1.36",
-    "@synerise/ds-tooltip": "^1.3.0",
-    "@synerise/ds-typography": "^1.0.23",
+    "@synerise/ds-alert": "^1.1.26",
+    "@synerise/ds-avatar": "^1.1.1",
+    "@synerise/ds-badge": "^1.0.26",
+    "@synerise/ds-button": "^1.5.1",
+    "@synerise/ds-card": "^1.2.17",
+    "@synerise/ds-copy-icon": "^1.0.1",
+    "@synerise/ds-description": "^1.1.14",
+    "@synerise/ds-divider": "^1.2.2",
+    "@synerise/ds-dropdown": "^1.1.2",
+    "@synerise/ds-icon": "^1.9.0",
+    "@synerise/ds-menu": "^1.2.1",
+    "@synerise/ds-scrollbar": "^1.2.1",
+    "@synerise/ds-subtle-form": "^1.1.37",
+    "@synerise/ds-tooltip": "^1.3.1",
+    "@synerise/ds-typography": "^1.0.24",
     "@synerise/ds-utils": "^1.5.0",
     "rc-trigger": "^5.3.4"
   },
@@ -59,5 +60,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "085189e79075b23a8fb86ce9b7d930f6ac7b3d23"
+  "gitHead": "d5bd7fbc9d840ac30e2b79b36c451b486e178445"
 }