@synerise/ds-information-card 1.6.3 → 1.6.5

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.6.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.6.4...@synerise/ds-information-card@1.6.5) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-information-card
+
+## [1.6.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.6.3...@synerise/ds-information-card@1.6.4) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-information-card
+
 ## [1.6.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.6.2...@synerise/ds-information-card@1.6.3) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-information-card

package/README.md

@@ -29,8 +29,8 @@ import { InformationCardTooltip } from '@synerise/ds-information-card';
     iconColor: 'mars',
     avatarTooltipText: 'Tooltip Text',
   }}
-  triggerProps={{
-    popupPlacement: 'top',
+  popoverProps={{
+    placement: 'top',
   }}
 >
   <button>Element to attach infocard to</button>
@@ -40,9 +40,9 @@ import { InformationCardTooltip } from '@synerise/ds-information-card';
 Generally, components require being capable of rendering this and usually an additional effort is required to get them to support rendering.
 See text's menu item element `packages/components/menu/src/Elements/Item/Text/Text.tsx`.
 
-Note that `title` and `subtitle` are required props. For just a single line of text consider using @synerise/ds-tooltip.
+Note that `title` is a required prop; `subtitle` is optional. For just a single line of text consider using @synerise/ds-tooltip.
 
-### Usage with dropdown and other components relying on `rc-trigger` `getPopupContainer`
+### Usage with dropdown and other components
 
 Some components render elements via portal, in such a case if tthey are listening for global events like click (for e.g. closing the dropdown) - developer using this component is responsible for proper handling of such a clicks. One of ways is making use of `overlayInnerClass` popover's class property to later.
 By default class is `ignore-click-outside` (so looking for `domElement.closest('.ignore-click-outside')` to determine whether handler should be skipped should be fine).
@@ -71,8 +71,8 @@ By default class is `ignore-click-outside` (so looking for `domElement.closest('
 | renderAdditionalDescription | Render prop for displaying additional content above footer                                                                                                                           | `() => ReactNode`                                   | -       |
 | renderBadge                 | Custom render prop for displaying. If set to `null` - badge won't be shown.                                                                                                          | `Function` &#124; `null`                            | -       |
 | renderFooter                | render prop for rendering the bottom part of (by default section with a small text and an optional action button on the right)                                                       | `() => JSX.Element`                                 | -       |
-| subtitle                    | Second line. Required prop. Can be copied.                                                                                                                                           | `string`                                            | -       |
-| title                       | Title of the information-card. Can be copied.                                                                                                                                        | `string`                                            | -       |
+| subtitle                    | Second line. Optional. String values are copyable on click.                                                                                                                          | `ReactNode`                                         | -       |
+| title                       | Title of the information-card. Required. String values are copyable on click.                                                                                                        | `ReactNode`                                         | -       |
 | actionsMenu                 | Config for displaying "quick actions" - a button in footer that reveals a menu with links                                                                                            | `ActionsMenuProps`                                  | -       |
 | propertyListItems           | an array of object properties to list, can also include dividers                                                                                                                     | `InformationCardPropertyListItem[]`                 | -       |
 | summaryItems                | An array of (label + icon + optional tooltip) summary items to display below properties                                                                                              | `InformationCardSummaryItem[]`                      | -       |
@@ -116,5 +116,7 @@ Displays InformationCard as a tooltip with `children` node as trigger
 | Property             | Description                             | Type                                                               | Default |
 | -------------------- | --------------------------------------- | ------------------------------------------------------------------ | ------- |
 | informationCardProps | Props for rendering the InformationCard | `InformationCardProps`                                             | -       |
-| triggerProps         | Trigger props. See rc-trigger           | `Partial<TriggerProps> & { ref?: React.LegacyRef<TriggerHandle> }` | -       |
+| popoverProps         | Floating-ui popover options (see @synerise/ds-popover)  | `Partial<PopoverOptions>`                                          | -       |
+| content              | Custom content (alternative to informationCardProps)    | `ReactNode`                                                        | -       |
+| asChild              | Forward trigger props to first child (Radix-style)      | `boolean`                                                          | -       |
 | children             | trigger element                         | `ReactNode`                                                        | -       |

package/dist/InformationCard.d.ts

@@ -1,15 +1,15 @@
-import React from 'react';
+import { default as React } from 'react';
 declare const InformationCard: React.ForwardRefExoticComponent<{
     actionButton?: boolean | (() => React.ReactNode);
     actionButtonCallback?: () => void;
     actionButtonTooltipText?: string;
-    actionsMenu?: Omit<import("./InformationCardActions/InformationCardActions.types").InformationCardActionsProps, "onHeaderClick" | "maxHeight">;
+    actionsMenu?: Omit<import('./InformationCardActions/InformationCardActions.types').InformationCardActionsProps, "onHeaderClick" | "maxHeight">;
     asTooltip?: boolean;
     avatarTooltipText?: string;
     className?: string;
     copyTooltip?: string;
     copiedTooltip?: string;
-    descriptionConfig?: import("@synerise/ds-subtle-form/dist/Elements/TextArea/TextArea.types").SubtleTextAreaProps | string | null | undefined;
+    descriptionConfig?: import('@synerise/ds-subtle-form/dist/Elements/TextArea/TextArea.types').SubtleTextAreaProps | string | null | undefined;
     renderFooter?: () => JSX.Element;
     footerText?: React.ReactNode | null;
     icon?: React.ReactNode;
@@ -19,7 +19,7 @@ declare const InformationCard: React.ForwardRefExoticComponent<{
     subtitle?: React.ReactNode;
     title: React.ReactNode;
     renderAdditionalDescription?: () => React.ReactNode;
-    propertyListItems?: import(".").InformationCardPropertyListProps["items"];
-    summaryItems?: import("./InformationCardSummary/InformationCardSummary.types").InformationCardSummaryProps["items"];
-} & 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>>;
+    propertyListItems?: import('.').InformationCardPropertyListProps["items"];
+    summaryItems?: import('./InformationCardSummary/InformationCardSummary.types').InformationCardSummaryProps["items"];
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "className" | "icon" | "footerText" | "asTooltip" | "actionButton" | "actionButtonCallback" | "actionButtonTooltipText" | "actionsMenu" | "avatarTooltipText" | "copyTooltip" | "copiedTooltip" | "descriptionConfig" | "renderFooter" | "iconColor" | "notice" | "renderBadge" | "subtitle" | "renderAdditionalDescription" | "propertyListItems" | "summaryItems"> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>;
 export default InformationCard;

package/dist/InformationCard.js

@@ -1,139 +1,86 @@
-var _excluded = ["actionButton", "actionButtonTooltipText", "actionButtonCallback", "actionsMenu", "asTooltip", "avatarTooltipText", "copyTooltip", "copiedTooltip", "renderFooter", "renderBadge", "subtitle", "title", "notice", "footerText", "icon", "iconColor", "descriptionConfig", "className", "renderAdditionalDescription", "propertyListItems", "summaryItems"];
-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, { forwardRef, useEffect, useRef, useState } from 'react';
-import Card from '@synerise/ds-card';
-import { SegmentM } from '@synerise/ds-icon';
-import { FloatingDelayGroup, HOVER_CLOSE_DELAY, HOVER_OPEN_DELAY } from '@synerise/ds-popover';
-import { useResizeObserver } from '@synerise/ds-utils';
-import * as S from './InformationCard.styles';
-import { buildIconBadge } from './InformationCard.utils';
-import { InformationCardActions } from './InformationCardActions/InformationCardActions';
-import { InformationCardDescription } from './InformationCardDescription/InformationCardDescription';
-import { InformationCardFooter } from './InformationCardFooter/InformationCardFooter';
-import { InformationCardPropertyList } from './InformationCardPropertyList/InformationCardPropertyList';
-import { InformationCardSummary } from './InformationCardSummary/InformationCardSummary';
-var InformationCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var actionButton = _ref.actionButton,
-    actionButtonTooltipText = _ref.actionButtonTooltipText,
-    actionButtonCallback = _ref.actionButtonCallback,
-    actionsMenu = _ref.actionsMenu,
-    asTooltip = _ref.asTooltip,
-    avatarTooltipText = _ref.avatarTooltipText,
-    copyTooltip = _ref.copyTooltip,
-    copiedTooltip = _ref.copiedTooltip,
-    renderFooter = _ref.renderFooter,
-    _renderBadge2 = _ref.renderBadge,
-    subtitle = _ref.subtitle,
-    title = _ref.title,
-    notice = _ref.notice,
-    footerText = _ref.footerText,
-    _ref$icon = _ref.icon,
-    iconElement = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(SegmentM, null) : _ref$icon,
-    iconColor = _ref.iconColor,
-    descriptionConfig = _ref.descriptionConfig,
-    className = _ref.className,
-    renderAdditionalDescription = _ref.renderAdditionalDescription,
-    propertyListItems = _ref.propertyListItems,
-    summaryItems = _ref.summaryItems,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = useState(false),
-    isActionsMenuVisible = _useState[0],
-    setIsActionsMenuVisible = _useState[1];
-  var mainSlideRef = useRef(null);
-  var _useResizeObserver = useResizeObserver(mainSlideRef),
-    height = _useResizeObserver.height;
-  var copyableSlot = function copyableSlot(content) {
-    return content && /*#__PURE__*/React.createElement(S.CopyWrapper, {
-      copyable: true
-    }, /*#__PURE__*/React.createElement(S.Flex, {
-      style: {
-        backgroundColor: '',
-        alignItems: 'center',
-        textAlign: 'left'
-      }
-    }, /*#__PURE__*/React.createElement("span", null, content), /*#__PURE__*/React.createElement(S.Copyable, {
-      copyValue: content,
-      texts: {
-        copyTooltip: copyTooltip != null ? copyTooltip : 'Copy to clipboard',
-        copiedTooltip: copiedTooltip != null ? copiedTooltip : 'Copied'
-      }
-    })));
-  };
-  var hasFooter = !!(footerText || actionButton || actionsMenu);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(function () {
-    var _mainSlideRef$current;
-    if (!((_mainSlideRef$current = mainSlideRef.current) != null && _mainSlideRef$current.clientWidth)) {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import Card from "@synerise/ds-card";
+import { SegmentM } from "@synerise/ds-icon";
+import { FloatingDelayGroup, HOVER_CLOSE_DELAY, HOVER_OPEN_DELAY } from "@synerise/ds-popover";
+import { useResizeObserver } from "@synerise/ds-utils";
+import { InfoCardWrapper, InfoCardSlidesWrapper, InfoCardSlide, BottomDivider, CopyWrapper, Flex, Copyable } from "./InformationCard.styles.js";
+import { buildIconBadge } from "./InformationCard.utils.js";
+import { InformationCardActions } from "./InformationCardActions/InformationCardActions.js";
+import { InformationCardDescription } from "./InformationCardDescription/InformationCardDescription.js";
+import { InformationCardFooter } from "./InformationCardFooter/InformationCardFooter.js";
+import { InformationCardPropertyList } from "./InformationCardPropertyList/InformationCardPropertyList.js";
+import { InformationCardSummary } from "./InformationCardSummary/InformationCardSummary.js";
+const InformationCard = forwardRef(({
+  actionButton,
+  actionButtonTooltipText,
+  actionButtonCallback,
+  actionsMenu,
+  asTooltip,
+  avatarTooltipText,
+  copyTooltip,
+  copiedTooltip,
+  renderFooter,
+  renderBadge,
+  subtitle,
+  title,
+  notice,
+  footerText,
+  icon: iconElement = /* @__PURE__ */ jsx(SegmentM, {}),
+  iconColor,
+  descriptionConfig,
+  className,
+  renderAdditionalDescription,
+  propertyListItems,
+  summaryItems,
+  ...props
+}, ref) => {
+  const [isActionsMenuVisible, setIsActionsMenuVisible] = useState(false);
+  const mainSlideRef = useRef(null);
+  const {
+    height
+  } = useResizeObserver(mainSlideRef);
+  const copyableSlot = (content) => content && /* @__PURE__ */ jsx(CopyWrapper, { copyable: true, children: /* @__PURE__ */ jsxs(Flex, { style: {
+    backgroundColor: "",
+    alignItems: "center",
+    textAlign: "left"
+  }, children: [
+    /* @__PURE__ */ jsx("span", { children: content }),
+    /* @__PURE__ */ jsx(Copyable, { copyValue: content, texts: {
+      copyTooltip: copyTooltip ?? "Copy to clipboard",
+      copiedTooltip: copiedTooltip ?? "Copied"
+    } })
+  ] }) });
+  const hasFooter = !!(footerText || actionButton || actionsMenu);
+  useEffect(() => {
+    if (!mainSlideRef.current?.clientWidth) {
       setIsActionsMenuVisible(false);
     }
   });
-  var showBottomDivider = !!(summaryItems && (propertyListItems || descriptionConfig || notice || renderAdditionalDescription));
-  return /*#__PURE__*/React.createElement(FloatingDelayGroup, {
-    delay: {
-      open: HOVER_OPEN_DELAY,
-      close: HOVER_CLOSE_DELAY
-    }
-  }, /*#__PURE__*/React.createElement(S.InfoCardWrapper, _extends({
-    "data-testid": "information-card",
-    "data-popup-container": true,
-    ref: ref,
-    "aria-label": "information card",
-    className: "ds-info-card " + className,
-    asTooltip: asTooltip,
-    isActionsMenuVisible: isActionsMenuVisible,
-    hasActionsMenu: !!actionsMenu,
-    hasFooter: !!(renderFooter || hasFooter)
-  }, props), /*#__PURE__*/React.createElement(S.InfoCardSlidesWrapper, null, /*#__PURE__*/React.createElement(S.InfoCardSlide, {
-    ref: mainSlideRef
-  }, /*#__PURE__*/React.createElement(Card, {
-    background: "white",
-    renderBadge: function renderBadge() {
-      var _renderBadge;
-      return _renderBadge2 !== null && /*#__PURE__*/React.createElement("div", {
-        style: {
-          marginRight: '16px'
-        }
-      }, (_renderBadge = _renderBadge2 == null ? void 0 : _renderBadge2()) != null ? _renderBadge : buildIconBadge({
-        iconElement: iconElement,
-        iconColor: iconColor,
-        avatarTooltipText: avatarTooltipText
-      }));
-    },
-    title: typeof title === 'string' ? copyableSlot(title) : title,
-    description: typeof subtitle === 'string' ? copyableSlot(subtitle) : subtitle,
-    headerSideChildren: undefined,
-    compactHeader: false,
-    withoutPadding: true,
-    lively: false,
-    withHeader: true
-  }, (!!descriptionConfig || notice) && /*#__PURE__*/React.createElement(InformationCardDescription, {
-    extraInformation: notice,
-    descriptionConfig: descriptionConfig
-  }), renderAdditionalDescription && renderAdditionalDescription(), propertyListItems && /*#__PURE__*/React.createElement(InformationCardPropertyList, {
-    items: propertyListItems
-  }), showBottomDivider && /*#__PURE__*/React.createElement(S.BottomDivider, {
-    dashed: true,
-    marginBottom: 8
-  }), summaryItems && /*#__PURE__*/React.createElement(InformationCardSummary, {
-    items: summaryItems
-  }), renderFooter && renderFooter() || hasFooter && /*#__PURE__*/React.createElement(InformationCardFooter, {
-    text: footerText,
-    actionButton: actionButton,
-    actionButtonCallback: actionButtonCallback,
-    actionButtonTooltipText: actionButtonTooltipText,
-    actionsMenuButtonLabel: actionsMenu == null ? void 0 : actionsMenu.buttonLabel,
-    actionsMenuButtonOnClick: actionsMenu ? function () {
-      return setIsActionsMenuVisible(true);
-    } : undefined
-  }))), actionsMenu && /*#__PURE__*/React.createElement(S.InfoCardSlide, {
-    height: height
-  }, /*#__PURE__*/React.createElement(InformationCardActions, _extends({}, actionsMenu, {
-    maxHeight: height,
-    onHeaderClick: function onHeaderClick() {
-      return setIsActionsMenuVisible(false);
-    }
-  }))))));
+  const showBottomDivider = !!(summaryItems && (propertyListItems || descriptionConfig || notice || renderAdditionalDescription));
+  return /* @__PURE__ */ jsx(FloatingDelayGroup, { delay: {
+    open: HOVER_OPEN_DELAY,
+    close: HOVER_CLOSE_DELAY
+  }, children: /* @__PURE__ */ jsx(InfoCardWrapper, { "data-testid": "information-card", "data-popup-container": true, ref, "aria-label": "information card", className: `ds-info-card ${className}`, asTooltip, isActionsMenuVisible, hasActionsMenu: !!actionsMenu, hasFooter: !!(renderFooter || hasFooter), ...props, children: /* @__PURE__ */ jsxs(InfoCardSlidesWrapper, { children: [
+    /* @__PURE__ */ jsx(InfoCardSlide, { ref: mainSlideRef, children: /* @__PURE__ */ jsxs(Card, { background: "white", renderBadge: () => {
+      return renderBadge !== null && /* @__PURE__ */ jsx("div", { style: {
+        marginRight: "16px"
+      }, children: renderBadge?.() ?? buildIconBadge({
+        iconElement,
+        iconColor,
+        avatarTooltipText
+      }) });
+    }, title: typeof title === "string" ? copyableSlot(title) : title, description: typeof subtitle === "string" ? copyableSlot(subtitle) : subtitle, headerSideChildren: void 0, compactHeader: false, withoutPadding: true, lively: false, withHeader: true, children: [
+      (!!descriptionConfig || notice) && /* @__PURE__ */ jsx(InformationCardDescription, { extraInformation: notice, descriptionConfig }),
+      renderAdditionalDescription && renderAdditionalDescription(),
+      propertyListItems && /* @__PURE__ */ jsx(InformationCardPropertyList, { items: propertyListItems }),
+      showBottomDivider && /* @__PURE__ */ jsx(BottomDivider, { dashed: true, marginBottom: 8 }),
+      summaryItems && /* @__PURE__ */ jsx(InformationCardSummary, { items: summaryItems }),
+      renderFooter && renderFooter() || hasFooter && /* @__PURE__ */ jsx(InformationCardFooter, { text: footerText, actionButton, actionButtonCallback, actionButtonTooltipText, actionsMenuButtonLabel: actionsMenu?.buttonLabel, actionsMenuButtonOnClick: actionsMenu ? () => setIsActionsMenuVisible(true) : void 0 })
+    ] }) }),
+    actionsMenu && /* @__PURE__ */ jsx(InfoCardSlide, { height, children: /* @__PURE__ */ jsx(InformationCardActions, { ...actionsMenu, maxHeight: height, onHeaderClick: () => setIsActionsMenuVisible(false) }) })
+  ] }) }) });
 });
-export default InformationCard;
+export {
+  InformationCard as default
+};

package/dist/InformationCard.styles.d.ts

@@ -1,43 +1,43 @@
-export declare const Flex: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Copyable: import("styled-components").StyledComponent<({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, onClick, ...rest }: import("@synerise/ds-copy-icon").CopyIconProps) => React.JSX.Element, any, {}, never>;
-export declare const CopyWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const Flex: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Copyable: import('styled-components').StyledComponent<({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, onClick, ...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>;
-export declare const ActionsMenuItems: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FlexGrow: import("styled-components").StyledComponent<"div", any, {
+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>;
+export declare const ActionsMenuItems: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const FlexGrow: import('styled-components').StyledComponent<"div", any, {
     grow?: number;
 }, never>;
-export declare const ActionButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InfoCardSlidesWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InfoCardSlide: import("styled-components").StyledComponent<"div", any, {
+export declare const ActionButtonContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const InfoCardSlidesWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const InfoCardSlide: import('styled-components').StyledComponent<"div", any, {
     height?: number;
 }, never>;
-export declare const InfoCardWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const InfoCardWrapper: import('styled-components').StyledComponent<"div", any, {
     footerText?: string;
     asTooltip?: boolean;
     hasActionsMenu?: boolean;
     isActionsMenuVisible?: boolean;
     hasFooter?: boolean;
 }, never>;
-export declare const AlertWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const NonEditableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AlertWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const NonEditableWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DescriptionWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 /**
  * This component can be used to style container with popovers/tooltips to disable arrow.
  */
-export declare const HidePopoverArrowWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HidePopoverArrowWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 /**
  * Should be mounted in application where.
  */
-export declare const GlobalCSSHidePopoverArrow: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
-export declare const ExtraInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InformationCardActionsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InformationCardPropertyListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InformationCardPropertyItem: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InformationCardPropertyItemLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const InformationCardPropertyItemValue: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const InformationCardSummaryWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InformationCardSummaryItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const GlobalCSSHidePopoverArrow: import('styled-components').GlobalStyleComponent<{}, import('styled-components').DefaultTheme>;
+export declare const ExtraInfo: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const InformationCardActionsWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const InformationCardPropertyListWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const InformationCardPropertyItem: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const InformationCardPropertyItemLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const InformationCardPropertyItemValue: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const InformationCardSummaryWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const InformationCardSummaryItem: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/InformationCard.styles.js

@@ -1,136 +1,135 @@
-import styled, { createGlobalStyle, css } from 'styled-components';
-import { CardStyles } from '@synerise/ds-card';
-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({
+import styled, { css, createGlobalStyle } from "styled-components";
+import { CardStyles } from "@synerise/ds-card";
+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";
+const INFOCARD_WIDTH = 350;
+const Flex = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InformationCardstyles__Flex",
   componentId: "sc-zxu5qa-0"
 })(["display:flex;"]);
-export var Copyable = styled(CopyIcon).withConfig({
+const Copyable = /* @__PURE__ */ styled(CopyIcon).withConfig({
   displayName: "InformationCardstyles__Copyable",
   componentId: "sc-zxu5qa-1"
 })(["display:flex;align-items:center;height:20px;visibility:hidden;position:relative;margin-left:8px;opacity:0;"]);
-export var CopyWrapper = styled(RowWrapper).withConfig({
+const CopyWrapper = /* @__PURE__ */ styled(RowWrapper).withConfig({
   displayName: "InformationCardstyles__CopyWrapper",
   componentId: "sc-zxu5qa-2"
 })(["&:hover{", "{visibility:visible;opacity:1;}}"], Copyable);
-export var Divider = styled(DSDivider).withConfig({
+const Divider = /* @__PURE__ */ styled(DSDivider).withConfig({
   displayName: "InformationCardstyles__Divider",
   componentId: "sc-zxu5qa-3"
 })(["&&{margin:8px 0;width:100%;}"]);
-export var BottomDivider = styled(DSDivider).withConfig({
+const BottomDivider = /* @__PURE__ */ styled(DSDivider).withConfig({
   displayName: "InformationCardstyles__BottomDivider",
   componentId: "sc-zxu5qa-4"
 })(["&&{margin-left:16px;margin-right:16px;}"]);
-export var FooterWrapper = styled(Flex).withConfig({
+const FooterWrapper = /* @__PURE__ */ styled(Flex).withConfig({
   displayName: "InformationCardstyles__FooterWrapper",
   componentId: "sc-zxu5qa-5"
-})(["background:", ";border-top:solid 1px ", ";padding:8px;"], function (props) {
-  return props.theme.palette['grey-050'];
-}, function (props) {
-  return props.theme.palette['grey-100'];
-});
-export var ActionsMenuItems = styled.div.withConfig({
+})(["background:", ";border-top:solid 1px ", ";padding:8px;"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["grey-100"]);
+const ActionsMenuItems = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InformationCardstyles__ActionsMenuItems",
   componentId: "sc-zxu5qa-6"
 })([""]);
-export var FlexGrow = styled.div.withConfig({
+const FlexGrow = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InformationCardstyles__FlexGrow",
   componentId: "sc-zxu5qa-7"
-})(["flex-grow:", ";"], function (_ref) {
-  var _ref$grow = _ref.grow,
-    grow = _ref$grow === void 0 ? 1 : _ref$grow;
-  return grow;
-});
-export var ActionButtonContainer = styled.div.withConfig({
+})(["flex-grow:", ";"], ({
+  grow = 1
+}) => grow);
+const ActionButtonContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InformationCardstyles__ActionButtonContainer",
   componentId: "sc-zxu5qa-8"
 })([""]);
-export var InfoCardSlidesWrapper = styled.div.withConfig({
+const InfoCardSlidesWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InformationCardstyles__InfoCardSlidesWrapper",
   componentId: "sc-zxu5qa-9"
 })([""]);
-export var InfoCardSlide = styled.div.withConfig({
+const InfoCardSlide = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InformationCardstyles__InfoCardSlide",
   componentId: "sc-zxu5qa-10"
-})(["", ""], function (props) {
-  return props.height && "max-height: " + props.height + "px;";
-});
-export var InfoCardWrapper = styled.div.withConfig({
+})(["", ""], (props) => props.height && `max-height: ${props.height}px;`);
+const InfoCardWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InformationCardstyles__InfoCardWrapper",
   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) {
-  return props.theme.palette['grey-600'];
-}, InfoCardSlidesWrapper, function (props) {
-  return props.hasActionsMenu ? INFOCARD_WIDTH * 2 : INFOCARD_WIDTH;
-}, function (props) {
-  return props.isActionsMenuVisible ? "-" + INFOCARD_WIDTH + "px" : '0';
-}, InfoCardSlide, INFOCARD_WIDTH, function (props) {
-  return props.asTooltip ? 'unset' : '0 16px 32px 0 rgba(35, 41, 54, 0.1)';
-}, CardStyles.Card.Container, function (props) {
-  return !props.hasFooter && css(["padding-bottom:8px;margin-bottom:1px;"]);
-}, 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({
+})(["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;}"], (props) => props.asTooltip ? "0" : "8px", INFOCARD_WIDTH, (props) => props.theme.palette["grey-600"], InfoCardSlidesWrapper, (props) => props.hasActionsMenu ? INFOCARD_WIDTH * 2 : INFOCARD_WIDTH, (props) => props.isActionsMenuVisible ? `-${INFOCARD_WIDTH}px` : "0", InfoCardSlide, INFOCARD_WIDTH, (props) => props.asTooltip ? "unset" : "0 16px 32px 0 rgba(35, 41, 54, 0.1)", CardStyles.Card.Container, (props) => !props.hasFooter && css(["padding-bottom:8px;margin-bottom:1px;"]), 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);
+const AlertWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InformationCardstyles__AlertWrapper",
   componentId: "sc-zxu5qa-12"
 })(["padding-bottom:8px;:empty{display:none;}"]);
-export var NonEditableWrapper = styled.div.withConfig({
+const NonEditableWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InformationCardstyles__NonEditableWrapper",
   componentId: "sc-zxu5qa-13"
 })(["padding-bottom:8px;:empty{display:none;}"]);
-export var DescriptionWrapper = styled.div.withConfig({
+const DescriptionWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InformationCardstyles__DescriptionWrapper",
   componentId: "sc-zxu5qa-14"
 })(["padding:0 16px;"]);
-
-/**
- * This component can be used to style container with popovers/tooltips to disable arrow.
- */
-export var HidePopoverArrowWrapper = styled.div.withConfig({
+const HidePopoverArrowWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InformationCardstyles__HidePopoverArrowWrapper",
   componentId: "sc-zxu5qa-15"
 })([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
-
-/**
- * Should be mounted in application where.
- */
-export var GlobalCSSHidePopoverArrow = createGlobalStyle([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
-export var ExtraInfo = styled.div.withConfig({
+const GlobalCSSHidePopoverArrow = /* @__PURE__ */ createGlobalStyle([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
+const ExtraInfo = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InformationCardstyles__ExtraInfo",
   componentId: "sc-zxu5qa-16"
 })(["margin-bottom:1px;"]);
-export var InformationCardActionsWrapper = styled.div.withConfig({
+const InformationCardActionsWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InformationCardstyles__InformationCardActionsWrapper",
   componentId: "sc-zxu5qa-17"
 })(["padding:8px;"]);
-export var InformationCardPropertyListWrapper = styled.div.withConfig({
+const InformationCardPropertyListWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InformationCardstyles__InformationCardPropertyListWrapper",
   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({
+const InformationCardPropertyItem = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InformationCardstyles__InformationCardPropertyItem",
   componentId: "sc-zxu5qa-19"
 })(["display:flex;align-items:center;flex-wrap:wrap;column-gap:8px;row-gap:6px;"]);
-export var InformationCardPropertyItemLabel = styled.span.withConfig({
+const InformationCardPropertyItemLabel = /* @__PURE__ */ styled.span.withConfig({
   displayName: "InformationCardstyles__InformationCardPropertyItemLabel",
   componentId: "sc-zxu5qa-20"
 })(["", ""], macro.small);
-export var InformationCardPropertyItemValue = styled.span.withConfig({
+const InformationCardPropertyItemValue = /* @__PURE__ */ styled.span.withConfig({
   displayName: "InformationCardstyles__InformationCardPropertyItemValue",
   componentId: "sc-zxu5qa-21"
 })(["", " flex-grow:1;font-weight:500;"], macro.small);
-export var InformationCardSummaryWrapper = styled(Flex).withConfig({
+const InformationCardSummaryWrapper = /* @__PURE__ */ styled(Flex).withConfig({
   displayName: "InformationCardstyles__InformationCardSummaryWrapper",
   componentId: "sc-zxu5qa-22"
 })(["margin:0 16px;padding-bottom:8px;gap:0 4px;flex-wrap:wrap;"]);
-export var InformationCardSummaryItem = styled(Flex).withConfig({
+const InformationCardSummaryItem = /* @__PURE__ */ styled(Flex).withConfig({
   displayName: "InformationCardstyles__InformationCardSummaryItem",
   componentId: "sc-zxu5qa-23"
-})(["font-weight:500;align-items:center;gap:4px;"]);
+})(["font-weight:500;align-items:center;gap:4px;"]);
+export {
+  ActionButtonContainer,
+  ActionsMenuItems,
+  AlertWrapper,
+  BottomDivider,
+  CopyWrapper,
+  Copyable,
+  DescriptionWrapper,
+  Divider,
+  ExtraInfo,
+  Flex,
+  FlexGrow,
+  FooterWrapper,
+  GlobalCSSHidePopoverArrow,
+  HidePopoverArrowWrapper,
+  InfoCardSlide,
+  InfoCardSlidesWrapper,
+  InfoCardWrapper,
+  InformationCardActionsWrapper,
+  InformationCardPropertyItem,
+  InformationCardPropertyItemLabel,
+  InformationCardPropertyItemValue,
+  InformationCardPropertyListWrapper,
+  InformationCardSummaryItem,
+  InformationCardSummaryWrapper,
+  NonEditableWrapper
+};