@synerise/ds-description 1.3.0 → 1.3.2

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

package/README.md

@@ -19,7 +19,7 @@ yarn add @synerise/ds-description
 import Description, {DescriptionRow} from '@synerise/ds-description';
 
 <Description type='inline'>
-    <DescriptionRow label="Name" value="John Kowalski" prefixEl="Mr" suffix="<Avatar>JK</Avatar>" />
+    <DescriptionRow label="Name" value="John Kowalski" prefixEl="Mr" suffixEl="<Avatar>JK</Avatar>" />
 </Description>
 
 ```
@@ -34,17 +34,18 @@ import Description, {DescriptionRow} from '@synerise/ds-description';
 
 | Property | Description                                                                                                                                                          | Type                        | Default |
 | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ------- |
-| type     | Type of description: `table` - description will looks like vertical table, `inline` - value will aligns to label, `corner` - label and value have space-between them | `table`/ `inline`/ `corner` | `table` |
+| type     | Type of description: `table` - description will looks like vertical table, `inline` - value will aligns to label, `corner` - label and value have space-between them | `table`/ `inline`/ `corner`/ `numbered-list` | `table` |
 | ratio    | Define size of column if type='table'                                                                                                                                | `50-50`/ `25-75`            | `50-50` |
 
 ### DescriptionRow
 
 | Property  | Description                                            | Type                     | Default |
 | --------- | ------------------------------------------------------ | ------------------------ | ------- |
-| label     | Label of description row                               | string                   | -       |
+| label     | Label of description row                               | string / React.ReactNode | -       |
 | labelIcon | Icon visible before row label                          | React.ReactNode          | -       |
 | value     | Value of description row                               | string / React.ReactNode | -       |
 | prefixEl  | Element rendered before value                          | string / React.ReactNode | -       |
 | suffixEl  | Element rendered after value                           | string / React.ReactNode | -       |
 | copyValue | Whether to render copy icon on the end of row          | string                   | -       |
-| starType  | Whether to render star before value, and type of start | `active`, `inactive`     | -       |
+| starType  | Whether to render star before value, and type of star  | `active`, `inactive`     | -       |
+| texts     | Override tooltip strings for copy icon (`copyTooltip`, `copiedTooltip`) | `RowTexts` | - |

package/dist/Description.d.ts

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

package/dist/Description.js

@@ -1,23 +1,20 @@
-import classnames from 'classnames';
-import React from 'react';
-import * as S from './Description.styles';
-var Description = function Description(_ref) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'table' : _ref$type,
-    children = _ref.children,
-    _ref$ratio = _ref.ratio,
-    ratio = _ref$ratio === void 0 ? '50-50' : _ref$ratio;
-  var hasSingleChild = React.useMemo(function () {
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import React from "react";
+import { Description as Description$1 } from "./Description.styles.js";
+const Description = ({
+  type = "table",
+  children,
+  ratio = "50-50"
+}) => {
+  const hasSingleChild = React.useMemo(() => {
     return !Array.isArray(children);
   }, [children]);
-  var className = classnames('ds-description', {
-    'single-row': hasSingleChild
+  const className = classnames("ds-description", {
+    "single-row": hasSingleChild
   });
-  return /*#__PURE__*/React.createElement(S.Description, {
-    type: type,
-    ratio: ratio,
-    className: className,
-    singleRow: hasSingleChild
-  }, children);
+  return /* @__PURE__ */ jsx(Description$1, { type, ratio, className, singleRow: hasSingleChild, children });
+};
+export {
+  Description as default
 };
-export default Description;

package/dist/Description.styles.d.ts

@@ -1,5 +1,5 @@
-import { type DescriptionRatio, type DescriptionType } from './Description.types';
-export declare const Description: import("styled-components").StyledComponent<"div", any, {
+import { DescriptionRatio, DescriptionType } from './Description.types';
+export declare const Description: import('styled-components').StyledComponent<"div", any, {
     type: DescriptionType;
     ratio?: DescriptionRatio;
     singleRow: boolean;

package/dist/Description.styles.js

@@ -1,45 +1,34 @@
-import styled, { css } from 'styled-components';
-import { PrefixWrapper, RowLabel, RowValue, RowWrapper, SuffixWrapper, ValueWrapper } from './Row/DescriptionRow.styles';
-var getColumnsWidth = function getColumnsWidth(ratio) {
-  if (ratio === void 0) {
-    ratio = null;
-  }
-  var mapRatioToWidth = {
-    '25-75': '25% 75%',
-    '50-50': '50% 50%',
-    auto: 'auto auto'
+import styled, { css } from "styled-components";
+import { PrefixWrapper, SuffixWrapper, ValueWrapper, RowLabel, RowWrapper, RowValue } from "./Row/DescriptionRow.styles.js";
+const getColumnsWidth = (ratio = null) => {
+  const mapRatioToWidth = {
+    "25-75": "25% 75%",
+    "50-50": "50% 50%",
+    auto: "auto auto"
   };
-  return ratio !== null && mapRatioToWidth[ratio] ? mapRatioToWidth[ratio] : '1fr auto';
-};
-var tableStyles = function tableStyles(ratio) {
-  return css(["", "{display:grid;grid-column-gap:16px;grid-template-columns:", ";}"], RowWrapper, getColumnsWidth(ratio));
-};
-var inlineStyles = function inlineStyles() {
-  return css(["", "{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;", "{margin-right:8px;}", "{display:-webkit-box;flex:1;overflow-x:visible;}}"], RowWrapper, RowLabel, RowValue);
+  return ratio !== null && mapRatioToWidth[ratio] ? mapRatioToWidth[ratio] : "1fr auto";
 };
-var cornerStyles = function cornerStyles() {
-  return css(["", "{display:flex;align-items:center;justify-content:space-between;}"], RowWrapper);
-};
-export var Description = styled.div.withConfig({
+const tableStyles = (ratio) => css(["", "{display:grid;grid-column-gap:16px;grid-template-columns:", ";}"], RowWrapper, getColumnsWidth(ratio));
+const inlineStyles = () => css(["", "{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;", "{margin-right:8px;}", "{display:-webkit-box;flex:1;overflow-x:visible;}}"], RowWrapper, RowLabel, RowValue);
+const cornerStyles = () => css(["", "{display:flex;align-items:center;justify-content:space-between;}"], RowWrapper);
+const Description = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Descriptionstyles__Description",
   componentId: "sc-1myairu-0"
-})(["display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;", ",", ",", ",", "{padding:", ";}", ""], PrefixWrapper, SuffixWrapper, ValueWrapper, RowLabel, function (props) {
-  return props.singleRow ? '0' : '7px 0';
-}, function (props) {
+})(["display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;", ",", ",", ",", "{padding:", ";}", ""], PrefixWrapper, SuffixWrapper, ValueWrapper, RowLabel, (props) => props.singleRow ? "0" : "7px 0", (props) => {
   switch (props.type) {
-    case 'table':
-      {
-        return tableStyles(props.ratio);
-      }
-    case 'inline':
-      {
-        return inlineStyles();
-      }
-    case 'corner':
-      {
-        return cornerStyles();
-      }
+    case "table": {
+      return tableStyles(props.ratio);
+    }
+    case "inline": {
+      return inlineStyles();
+    }
+    case "corner": {
+      return cornerStyles();
+    }
     default:
       return inlineStyles();
   }
-});
+});
+export {
+  Description
+};

package/dist/Description.types.js

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

package/dist/Row/Copy.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type CopyProps } from './Copy.types';
+import { default as React } from 'react';
+import { CopyProps } from './Copy.types';
 /**
  *  @deprecated it will receive no further updates and will be removed from future DS versions
  */

package/dist/Row/Copy.js

@@ -1,63 +1,49 @@
-import copy from 'copy-to-clipboard';
-import React, { useCallback, useMemo, useState } from 'react';
-import { useIntl } from 'react-intl';
-import Icon, { CopyClipboardM } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from './DescriptionRow.styles';
-/**
- *  @deprecated it will receive no further updates and will be removed from future DS versions
- */
-var Copy = function Copy(_ref) {
-  var copyValue = _ref.copyValue,
-    texts = _ref.texts,
-    className = _ref.className,
-    onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave;
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var textsObj = useMemo(function () {
-    return texts || {
-      copiedTooltip: formatMessage({
-        id: 'DS.DESCRIPTION.COPIED'
-      }),
-      copyTooltip: formatMessage({
-        id: 'DS.DESCRIPTION.COPY-VALUE'
-      })
-    };
+import { jsx } from "react/jsx-runtime";
+import copy from "copy-to-clipboard";
+import { useMemo, useState, useCallback } from "react";
+import { useIntl } from "react-intl";
+import Icon, { CopyClipboardM } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { Copyable } from "./DescriptionRow.styles.js";
+const Copy = ({
+  copyValue,
+  texts,
+  className,
+  onMouseEnter,
+  onMouseLeave
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const textsObj = useMemo(() => texts || {
+    copiedTooltip: formatMessage({
+      id: "DS.DESCRIPTION.COPIED"
+    }),
+    copyTooltip: formatMessage({
+      id: "DS.DESCRIPTION.COPY-VALUE"
+    })
   }, [texts, formatMessage]);
-  var _useState = useState(false),
-    tooltipOpen = _useState[0],
-    setTooltipOpen = _useState[1];
-  var _useState2 = useState(textsObj.copyTooltip),
-    tooltipTitle = _useState2[0],
-    setTooltipTitle = _useState2[1];
-  var handleCopy = useCallback(function () {
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  const [tooltipTitle, setTooltipTitle] = useState(textsObj.copyTooltip);
+  const handleCopy = useCallback(() => {
     if (copyValue && copy(copyValue)) {
       setTooltipTitle(textsObj.copiedTooltip);
       setTooltipOpen(true);
     }
   }, [copyValue, setTooltipTitle, textsObj.copiedTooltip]);
-  var handleMouseEnter = useCallback(function (event) {
+  const handleMouseEnter = useCallback((event) => {
     event.stopPropagation();
     setTooltipTitle(textsObj.copyTooltip);
     setTooltipOpen(true);
     onMouseEnter && onMouseEnter(event);
   }, [setTooltipOpen, textsObj, onMouseEnter]);
-  var handleMouseLeave = useCallback(function (event) {
+  const handleMouseLeave = useCallback((event) => {
     event.stopPropagation();
     setTooltipOpen(false);
     onMouseLeave && onMouseLeave(event);
   }, [setTooltipOpen, onMouseLeave]);
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    title: tooltipTitle,
-    open: tooltipOpen
-  }, /*#__PURE__*/React.createElement(S.Copyable, {
-    className: "ds-description-copy " + className,
-    onClick: handleCopy,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(CopyClipboardM, null)
-  })));
+  return /* @__PURE__ */ jsx(Tooltip, { title: tooltipTitle, open: tooltipOpen, children: /* @__PURE__ */ jsx(Copyable, { className: `ds-description-copy ${className}`, onClick: handleCopy, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CopyClipboardM, {}) }) }) });
+};
+export {
+  Copy as default
 };
-export default Copy;

package/dist/Row/Copy.types.d.ts

@@ -1,5 +1,5 @@
-import type { WithHTMLAttributes } from '@synerise/ds-utils';
-import type { RowTexts } from './DescriptionRow.types';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+import { RowTexts } from './DescriptionRow.types';
 export type CopyProps = WithHTMLAttributes<HTMLDivElement, {
     copyValue: string;
     texts?: RowTexts;

package/dist/Row/Copy.types.js

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

package/dist/Row/DescriptionRow.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type DescriptionRowProps } from './DescriptionRow.types';
+import { default as React } from 'react';
+import { DescriptionRowProps } from './DescriptionRow.types';
 declare const DescriptionRow: React.FC<DescriptionRowProps>;
 export default DescriptionRow;

package/dist/Row/DescriptionRow.js

@@ -1,34 +1,30 @@
-import React from 'react';
-import * as S from './DescriptionRow.styles';
-import Star from './Star';
-var DescriptionRow = function DescriptionRow(_ref) {
-  var label = _ref.label,
-    labelIcon = _ref.labelIcon,
-    value = _ref.value,
-    prefixEl = _ref.prefixEl,
-    suffixEl = _ref.suffixEl,
-    copyValue = _ref.copyValue,
-    starType = _ref.starType,
-    texts = _ref.texts;
-  return /*#__PURE__*/React.createElement(S.RowWrapper, {
-    copyable: Boolean(copyValue)
-  }, label && /*#__PURE__*/React.createElement(S.RowLabel, {
-    className: "ds-description-label"
-  }, labelIcon, /*#__PURE__*/React.createElement(S.Label, {
-    title: typeof label === 'string' ? label : undefined
-  }, label)), /*#__PURE__*/React.createElement(S.RowValue, null, starType !== undefined && /*#__PURE__*/React.createElement(Star, {
-    starType: starType,
-    hasPrefixEl: Boolean(prefixEl)
-  }), prefixEl && /*#__PURE__*/React.createElement(S.PrefixWrapper, {
-    className: "ds-description-prefix"
-  }, prefixEl), value && /*#__PURE__*/React.createElement(S.ValueWrapper, {
-    className: "ds-description-value",
-    title: typeof value === 'string' ? value : undefined
-  }, value), suffixEl && /*#__PURE__*/React.createElement(S.SuffixWrapper, {
-    className: "ds-description-suffix"
-  }, suffixEl), typeof copyValue === 'string' && /*#__PURE__*/React.createElement(S.StyledCopyIcon, {
-    copyValue: copyValue,
-    texts: texts
-  })));
+import { jsxs, jsx } from "react/jsx-runtime";
+import { RowWrapper, RowLabel, Label, RowValue, PrefixWrapper, ValueWrapper, SuffixWrapper, StyledCopyIcon } from "./DescriptionRow.styles.js";
+import Star from "./Star.js";
+const DescriptionRow = ({
+  label,
+  labelIcon,
+  value,
+  prefixEl,
+  suffixEl,
+  copyValue,
+  starType,
+  texts
+}) => {
+  return /* @__PURE__ */ jsxs(RowWrapper, { copyable: Boolean(copyValue), children: [
+    label && /* @__PURE__ */ jsxs(RowLabel, { className: "ds-description-label", children: [
+      labelIcon,
+      /* @__PURE__ */ jsx(Label, { title: typeof label === "string" ? label : void 0, children: label })
+    ] }),
+    /* @__PURE__ */ jsxs(RowValue, { children: [
+      starType !== void 0 && /* @__PURE__ */ jsx(Star, { starType, hasPrefixEl: Boolean(prefixEl) }),
+      prefixEl && /* @__PURE__ */ jsx(PrefixWrapper, { className: "ds-description-prefix", children: prefixEl }),
+      value && /* @__PURE__ */ jsx(ValueWrapper, { className: "ds-description-value", title: typeof value === "string" ? value : void 0, children: value }),
+      suffixEl && /* @__PURE__ */ jsx(SuffixWrapper, { className: "ds-description-suffix", children: suffixEl }),
+      typeof copyValue === "string" && /* @__PURE__ */ jsx(StyledCopyIcon, { copyValue, texts })
+    ] })
+  ] });
+};
+export {
+  DescriptionRow as default
 };
-export default DescriptionRow;

package/dist/Row/DescriptionRow.styles.d.ts

@@ -1,14 +1,14 @@
-export declare const RowLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Label: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const RowValue: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Copyable: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledCopyIcon: 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 RowWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const RowLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const Label: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const RowValue: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Copyable: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const StyledCopyIcon: 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 RowWrapper: import('styled-components').StyledComponent<"div", any, {
     copyable: boolean;
 }, never>;
-export declare const PrefixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ValueWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StarWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const PrefixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const SuffixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ValueWrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const StarWrapper: import('styled-components').StyledComponent<"div", any, {
     hasPrefixEl: boolean;
 }, never>;

package/dist/Row/DescriptionRow.styles.js

@@ -1,65 +1,57 @@
-import styled, { css } from 'styled-components';
-import CopyIcon from '@synerise/ds-copy-icon';
-import { IconContainer } from '@synerise/ds-icon';
-export var RowLabel = styled.span.withConfig({
+import styled, { css } from "styled-components";
+import CopyIcon from "@synerise/ds-copy-icon";
+import { IconContainer } from "@synerise/ds-icon";
+const RowLabel = /* @__PURE__ */ styled.span.withConfig({
   displayName: "DescriptionRowstyles__RowLabel",
   componentId: "sc-dj6vdq-0"
-})(["display:flex;font-size:13px;line-height:1.38;color:", ";font-weight:normal;flex-direction:row;align-items:center;justify-content:flex-start;overflow-x:hidden;", "{margin-right:4px;svg{color:", ";fill:", ";}}"], function (props) {
-  return props.theme.palette['grey-600'];
-}, IconContainer, function (props) {
-  return props.theme.palette['grey-600'];
-}, function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var Label = styled.span.withConfig({
+})(["display:flex;font-size:13px;line-height:1.38;color:", ";font-weight:normal;flex-direction:row;align-items:center;justify-content:flex-start;overflow-x:hidden;", "{margin-right:4px;svg{color:", ";fill:", ";}}"], (props) => props.theme.palette["grey-600"], IconContainer, (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-600"]);
+const Label = /* @__PURE__ */ styled.span.withConfig({
   displayName: "DescriptionRowstyles__Label",
   componentId: "sc-dj6vdq-1"
 })(["width:100%;text-overflow:ellipsis;white-space:nowrap;display:inline;overflow-x:hidden;"]);
-export var RowValue = styled.div.withConfig({
+const RowValue = /* @__PURE__ */ styled.div.withConfig({
   displayName: "DescriptionRowstyles__RowValue",
   componentId: "sc-dj6vdq-2"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;font-size:13px;line-height:1.38;color:", ";font-weight:500;overflow-x:hidden;.ds-status{margin:0;}"], function (props) {
-  return props.theme.palette['grey-800'];
-});
-export var Copyable = styled.div.withConfig({
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;font-size:13px;line-height:1.38;color:", ";font-weight:500;overflow-x:hidden;.ds-status{margin:0;}"], (props) => props.theme.palette["grey-800"]);
+const Copyable = /* @__PURE__ */ styled.div.withConfig({
   displayName: "DescriptionRowstyles__Copyable",
   componentId: "sc-dj6vdq-3"
-})(["visibility:hidden;position:relative;opacity:0;margin-left:8px;svg{color:", ";fill:", ";}&:hover{svg{color:", ";fill:", ";}}"], function (props) {
-  return props.theme.palette['grey-600'];
-}, function (props) {
-  return props.theme.palette['grey-600'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
-});
-export var StyledCopyIcon = styled(CopyIcon).withConfig({
+})(["visibility:hidden;position:relative;opacity:0;margin-left:8px;svg{color:", ";fill:", ";}&:hover{svg{color:", ";fill:", ";}}"], (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-600"]);
+const StyledCopyIcon = /* @__PURE__ */ styled(CopyIcon).withConfig({
   displayName: "DescriptionRowstyles__StyledCopyIcon",
   componentId: "sc-dj6vdq-4"
 })(["visibility:hidden;position:relative;margin-left:8px;opacity:0;"]);
-export var RowWrapper = styled.div.withConfig({
+const RowWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "DescriptionRowstyles__RowWrapper",
   componentId: "sc-dj6vdq-5"
-})(["width:100%;", "{", "}&:hover{", "{visibility:visible;opacity:1;}}&:hover{", "{visibility:visible;opacity:1;}}a,[href]{color:inherit;text-decoration:none;cursor:pointer;&:hover{color:", ";}}"], Copyable, function (props) {
+})(["width:100%;", "{", "}&:hover{", "{visibility:visible;opacity:1;}}&:hover{", "{visibility:visible;opacity:1;}}a,[href]{color:inherit;text-decoration:none;cursor:pointer;&:hover{color:", ";}}"], Copyable, (props) => {
   return props.copyable && css(["cursor:pointer;"]);
-}, Copyable, StyledCopyIcon, function (props) {
-  return props.theme.palette['blue-600'];
-});
-export var PrefixWrapper = styled.div.withConfig({
+}, Copyable, StyledCopyIcon, (props) => props.theme.palette["blue-600"]);
+const PrefixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "DescriptionRowstyles__PrefixWrapper",
   componentId: "sc-dj6vdq-6"
 })(["margin-right:8px;"]);
-export var SuffixWrapper = styled.div.withConfig({
+const SuffixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "DescriptionRowstyles__SuffixWrapper",
   componentId: "sc-dj6vdq-7"
 })(["margin-left:8px;.ds-button{margin-left:16px;}"]);
-export var ValueWrapper = styled.span.withConfig({
+const ValueWrapper = /* @__PURE__ */ styled.span.withConfig({
   displayName: "DescriptionRowstyles__ValueWrapper",
   componentId: "sc-dj6vdq-8"
 })(["white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;width:100%;"]);
-export var StarWrapper = styled.div.withConfig({
+const StarWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "DescriptionRowstyles__StarWrapper",
   componentId: "sc-dj6vdq-9"
-})(["margin-right:", ";"], function (props) {
-  return props.hasPrefixEl ? '16px' : '8px';
-});
+})(["margin-right:", ";"], (props) => props.hasPrefixEl ? "16px" : "8px");
+export {
+  Copyable,
+  Label,
+  PrefixWrapper,
+  RowLabel,
+  RowValue,
+  RowWrapper,
+  StarWrapper,
+  StyledCopyIcon,
+  SuffixWrapper,
+  ValueWrapper
+};

package/dist/Row/DescriptionRow.types.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { default as React } from 'react';
 export interface DescriptionRowProps {
     label?: string | React.ReactNode;
     labelIcon?: React.ReactNode;

package/dist/Row/DescriptionRow.types.js

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

package/dist/Row/Star.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type StarProps } from './Star.types';
+import { default as React } from 'react';
+import { StarProps } from './Star.types';
 declare const Star: React.FC<StarProps>;
 export default Star;

package/dist/Row/Star.js

@@ -1,22 +1,11 @@
-import React from 'react';
-import { theme } from '@synerise/ds-core';
-import Icon, { StarFillM, StarM } from '@synerise/ds-icon';
-import * as S from './DescriptionRow.styles';
-var Star = function Star(_ref) {
-  var starType = _ref.starType,
-    hasPrefixEl = _ref.hasPrefixEl;
-  return starType === 'active' ? /*#__PURE__*/React.createElement(S.StarWrapper, {
-    className: "ds-description-star",
-    hasPrefixEl: hasPrefixEl
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(StarFillM, null),
-    color: theme.palette['yellow-600']
-  })) : /*#__PURE__*/React.createElement(S.StarWrapper, {
-    className: "ds-description-star",
-    hasPrefixEl: hasPrefixEl
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(StarM, null),
-    color: theme.palette['grey-300']
-  }));
+import { jsx } from "react/jsx-runtime";
+import { theme } from "@synerise/ds-core";
+import Icon, { StarFillM, StarM } from "@synerise/ds-icon";
+import { StarWrapper } from "./DescriptionRow.styles.js";
+const Star = ({
+  starType,
+  hasPrefixEl
+}) => starType === "active" ? /* @__PURE__ */ jsx(StarWrapper, { className: "ds-description-star", hasPrefixEl, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(StarFillM, {}), color: theme.palette["yellow-600"] }) }) : /* @__PURE__ */ jsx(StarWrapper, { className: "ds-description-star", hasPrefixEl, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(StarM, {}), color: theme.palette["grey-300"] }) });
+export {
+  Star as default
 };
-export default Star;

package/dist/Row/Star.types.js

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

package/dist/index.js

@@ -1,3 +1,8 @@
-export { default } from './Description';
-export { default as DescriptionRow } from './Row/DescriptionRow';
-export { default as DescriptionCopyable } from './Row/Copy';
+import { default as default2 } from "./Description.js";
+import { default as default3 } from "./Row/DescriptionRow.js";
+import { default as default4 } from "./Row/Copy.js";
+export {
+  default4 as DescriptionCopyable,
+  default3 as DescriptionRow,
+  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-description",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Description 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,10 +35,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-copy-icon": "^1.2.0",
-    "@synerise/ds-icon": "^1.14.1",
-    "@synerise/ds-tooltip": "^1.4.8",
-    "@synerise/ds-utils": "^1.6.0",
+    "@synerise/ds-copy-icon": "^1.2.2",
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-tooltip": "^1.4.10",
+    "@synerise/ds-utils": "^1.7.1",
     "classnames": "^2.5.1"
   },
   "devDependencies": {
@@ -51,5 +51,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }