@synerise/ds-progress-bar 1.1.40 → 1.2.1

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.2.0...@synerise/ds-progress-bar@1.2.1) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-progress-bar
+
+# [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.1.40...@synerise/ds-progress-bar@1.2.0) (2026-03-20)
+
+### Features
+
+- **progress-bar:** tooltips in multivalue progress bar ([e37f829](https://github.com/Synerise/synerise-design/commit/e37f829fee9c194abf2312349b563e4a55f78cad))
+
 ## [1.1.40](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.1.39...@synerise/ds-progress-bar@1.1.40) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-progress-bar

package/README.md

@@ -15,14 +15,15 @@ Progress-Bar UI Component
 
 | Property    | Description                                  | Type    | Default |
 | ----------- | -------------------------------------------- | ------- | ------- |
-| steps       | Number of steps in progress bar              | number  | -       |
-| description | Text of description under progress bar       | string  | -       |
-| percent     | Value of progress bar, also visible in label | number  | -       |
-| thin        | Displays a thinner line                      | boolean | `false` |
-| label       | Optional label above progress bar            | string  | -       |
-| customColor | Bar color                                    | string  | -       |
-| width       | CSS width property of progress-bar           | string  | -       |
-| inline      | set percent value next to progress bar       | boolean | `false` |
+| steps           | Number of steps in progress bar                              | number        | `1`      |
+| description     | Text of description under progress bar                       | ReactNode     | -        |
+| percent         | Value of progress bar, also visible in label                 | number        | `50`     |
+| thin            | Displays a thinner line                                      | boolean       | `false`  |
+| label           | Optional label above progress bar                            | ReactNode     | -        |
+| customColor     | Bar color                                                    | string        | `''`     |
+| width           | CSS width of each segment tile                               | string        | `'100%'` |
+| inline          | set percent value next to progress bar                       | boolean       | `false`  |
+| containerStyles | Container inline styles (**@deprecated** — use `style` prop) | CSSProperties | -        |
 
 ### ProgressTiles
 
@@ -42,7 +43,9 @@ Progress-Bar UI Component
 
 ### ProgressValue
 
-| Property | Description                      | Type   | Default |
-| -------- | -------------------------------- | ------ | ------- |
-| percent  | Value to display (length of bar) | number | -       |
-| color    | Bar color                        | string | -       |
+| Property     | Description                              | Type         | Default     |
+| ------------ | ---------------------------------------- | ------------ | ----------- |
+| percent      | Value to display (length of bar)         | number       | -           |
+| color        | Bar color                                | string       | -           |
+| tooltip      | Tooltip content shown on hover           | ReactNode    | `undefined` |
+| tooltipProps | Additional props passed to the Tooltip   | TooltipProps | `undefined` |

package/dist/Multivalue/MultiValue.styles.d.ts

@@ -1,7 +1,7 @@
-export declare const Multivalue: import("styled-components").StyledComponent<"div", any, {
+export declare const Multivalue: import('styled-components').StyledComponent<"div", any, {
     color: string;
     percent: number;
 }, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
+export declare const Container: import('styled-components').StyledComponent<"div", any, {
     stackedBars: boolean;
 }, never>;

package/dist/Multivalue/MultiValue.styles.js

@@ -1,15 +1,13 @@
-import styled, { css } from 'styled-components';
-export var Multivalue = styled.div.withConfig({
+import styled, { css } from "styled-components";
+const Multivalue = /* @__PURE__ */ styled.div.withConfig({
   displayName: "MultiValuestyles__Multivalue",
   componentId: "sc-145qx7z-0"
-})(["background:", ";width:", "%;height:6px;border-radius:6px;overflow:hidden;margin-top:-6px;"], function (props) {
-  return props.color;
-}, function (props) {
-  return props.percent;
-});
-export var Container = styled.div.withConfig({
+})(["background:", ";width:", "%;height:6px;border-radius:6px;overflow:hidden;margin-top:-6px;"], (props) => props.color, (props) => props.percent);
+const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "MultiValuestyles__Container",
   componentId: "sc-145qx7z-1"
-})(["position:relative;height:16px;width:100%;padding-top:11px;", ""], function (props) {
-  return props.stackedBars ? css(["", ":not(:first-child){border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:2px solid white;}"], Multivalue) : css(["justify-content:flex-start;display:flex;gap:2px;", "{border-radius:0;&:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px;}&:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px;}}"], Multivalue);
-});
+})(["position:relative;height:16px;width:100%;padding-top:11px;", ""], (props) => props.stackedBars ? css(["", ":not(:first-child){border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:2px solid white;}"], Multivalue) : css(["justify-content:flex-start;display:flex;gap:2px;", "{border-radius:0;&:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px;}&:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px;}}"], Multivalue));
+export {
+  Container,
+  Multivalue
+};

package/dist/Multivalue/Multivalue.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type MultivalueProps } from './Multivalue.types';
+import { default as React } from 'react';
+import { MultivalueProps } from './Multivalue.types';
 declare const Multivalue: ({ values, stackedBars, ...htmlAttributes }: MultivalueProps) => React.JSX.Element;
 export default Multivalue;

package/dist/Multivalue/Multivalue.js

@@ -1,9 +1,8 @@
-var _excluded = ["values", "stackedBars"];
-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, { useMemo } from 'react';
-import * as S from './MultiValue.styles';
-var normalizePercent = function normalizePercent(value) {
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Tooltip from "@synerise/ds-tooltip";
+import { Container, Multivalue as Multivalue$1 } from "./MultiValue.styles.js";
+const normalizePercent = (value) => {
   if (value < 0) {
     return 0;
   }
@@ -12,24 +11,16 @@ var normalizePercent = function normalizePercent(value) {
   }
   return value;
 };
-var Multivalue = function Multivalue(_ref) {
-  var values = _ref.values,
-    _ref$stackedBars = _ref.stackedBars,
-    stackedBars = _ref$stackedBars === void 0 ? true : _ref$stackedBars,
-    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var finalValues = useMemo(function () {
-    return stackedBars ? values.sort(function (a, b) {
-      return b.percent - a.percent;
-    }) : values;
-  }, [stackedBars, values]);
-  return /*#__PURE__*/React.createElement(S.Container, _extends({
-    stackedBars: stackedBars
-  }, htmlAttributes), finalValues.map(function (val, index) {
-    return /*#__PURE__*/React.createElement(S.Multivalue, {
-      key: val.color + "-" + val.percent + "-" + index,
-      color: val.color,
-      percent: normalizePercent(val.percent)
-    });
-  }));
+const Multivalue = ({
+  values,
+  stackedBars = true,
+  ...htmlAttributes
+}) => {
+  const finalValues = useMemo(() => stackedBars ? values.sort((a, b) => {
+    return b.percent - a.percent;
+  }) : values, [stackedBars, values]);
+  return /* @__PURE__ */ jsx(Container, { stackedBars, ...htmlAttributes, children: finalValues.map((val, index) => /* @__PURE__ */ jsx(Tooltip, { title: val.tooltip, ...val?.tooltipProps, children: /* @__PURE__ */ jsx(Multivalue$1, { color: val.color, percent: normalizePercent(val.percent) }, `${val.color}-${val.percent}-${index}`) })) });
+};
+export {
+  Multivalue as default
 };
-export default Multivalue;

package/dist/Multivalue/Multivalue.types.d.ts

@@ -1,4 +1,6 @@
-import { type WithHTMLAttributes } from '@synerise/ds-utils';
+import { ReactNode } from 'react';
+import { TooltipProps } from '@synerise/ds-tooltip';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type MultivalueProps = WithHTMLAttributes<HTMLDivElement, {
     values: ProgressValue[];
     stackedBars?: boolean;
@@ -6,4 +8,6 @@ export type MultivalueProps = WithHTMLAttributes<HTMLDivElement, {
 export type ProgressValue = {
     percent: number;
     color: string;
+    tooltip?: ReactNode;
+    tooltipProps?: TooltipProps;
 };

package/dist/Multivalue/Multivalue.types.js

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

package/dist/ProgressBar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type ProgressProps } from './ProgressBar.types';
+import { default as React } from 'react';
+import { ProgressProps } from './ProgressBar.types';
 declare const ProgressBar: ({ description, label, steps, width, customColor, percent, className, thin, containerStyles, inline, ...rest }: ProgressProps) => React.JSX.Element;
 export default ProgressBar;

package/dist/ProgressBar.js

@@ -1,63 +1,41 @@
-var _excluded = ["description", "label", "steps", "width", "customColor", "percent", "className", "thin", "containerStyles", "inline"];
-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, { useMemo } from 'react';
-import { v4 as uuid } from 'uuid';
-import * as S from './ProgressBar.styles';
-var MAX_PERCENT = 100;
-var ProgressBar = function ProgressBar(_ref) {
-  var _ref$description = _ref.description,
-    description = _ref$description === void 0 ? '' : _ref$description,
-    label = _ref.label,
-    _ref$steps = _ref.steps,
-    steps = _ref$steps === void 0 ? 1 : _ref$steps,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '100%' : _ref$width,
-    _ref$customColor = _ref.customColor,
-    customColor = _ref$customColor === void 0 ? '' : _ref$customColor,
-    _ref$percent = _ref.percent,
-    percent = _ref$percent === void 0 ? 50 : _ref$percent,
-    className = _ref.className,
-    _ref$thin = _ref.thin,
-    thin = _ref$thin === void 0 ? false : _ref$thin,
-    containerStyles = _ref.containerStyles,
-    _ref$inline = _ref.inline,
-    inline = _ref$inline === void 0 ? false : _ref$inline,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var tiles = useMemo(function () {
-    return Array.from({
-      length: steps
-    }, function () {
-      return {
-        id: uuid()
-      };
-    });
-  }, [steps]);
-  var tileWidthRatio = MAX_PERCENT / steps;
-  var currentProgress = percent / tileWidthRatio;
-  var tileWidths = Array(Math.floor(currentProgress)).fill(1);
-  var lastTileWidth = currentProgress % 1;
-  var tilesWidthRatios = [].concat(tileWidths, [lastTileWidth]);
-  return /*#__PURE__*/React.createElement(S.Container, _extends({
-    className: (className || '') + " progress-bar-container",
-    "data-testid": "progress-bar-container",
-    $steps: steps,
-    $inline: inline
-  }, rest), label && !inline && /*#__PURE__*/React.createElement(S.LabelWrapper, null, label && /*#__PURE__*/React.createElement(S.Label, {
-    "data-testid": "progress-bar-label"
-  }, label), /*#__PURE__*/React.createElement(S.Percent, {
-    "data-testid": "progress-bar-max-percent"
-  }, percent + "%")), /*#__PURE__*/React.createElement(S.ProgressOuter, null, tiles.map(function (tile, i) {
-    return /*#__PURE__*/React.createElement(S.ProgressWrapper, {
-      $thin: thin,
-      key: "key-" + tile.id,
-      $width: width
-    }, /*#__PURE__*/React.createElement(S.ProgressBar, {
-      customColor: customColor,
-      $width: (tilesWidthRatios[i] || 0) * MAX_PERCENT + "%"
-    }));
-  })), inline && /*#__PURE__*/React.createElement(S.PercentWrapper, null, label || percent + "%"), description && !inline && /*#__PURE__*/React.createElement(S.ProgressBarDescription, {
-    "data-testid": "progress-bar-description"
-  }, description));
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { v4 } from "uuid";
+import { Container, LabelWrapper, Label, Percent, ProgressOuter, ProgressWrapper, ProgressBar as ProgressBar$1, PercentWrapper, ProgressBarDescription } from "./ProgressBar.styles.js";
+const MAX_PERCENT = 100;
+const ProgressBar = ({
+  description = "",
+  label,
+  steps = 1,
+  width = "100%",
+  customColor = "",
+  percent = 50,
+  className,
+  thin = false,
+  containerStyles,
+  inline = false,
+  ...rest
+}) => {
+  const tiles = useMemo(() => Array.from({
+    length: steps
+  }, () => ({
+    id: v4()
+  })), [steps]);
+  const tileWidthRatio = MAX_PERCENT / steps;
+  const currentProgress = percent / tileWidthRatio;
+  const tileWidths = Array(Math.floor(currentProgress)).fill(1);
+  const lastTileWidth = currentProgress % 1;
+  const tilesWidthRatios = [...tileWidths, lastTileWidth];
+  return /* @__PURE__ */ jsxs(Container, { className: `${className || ""} progress-bar-container`, "data-testid": "progress-bar-container", $steps: steps, $inline: inline, ...rest, children: [
+    label && !inline && /* @__PURE__ */ jsxs(LabelWrapper, { children: [
+      label && /* @__PURE__ */ jsx(Label, { "data-testid": "progress-bar-label", children: label }),
+      /* @__PURE__ */ jsx(Percent, { "data-testid": "progress-bar-max-percent", children: `${percent}%` })
+    ] }),
+    /* @__PURE__ */ jsx(ProgressOuter, { children: tiles.map((tile, i) => /* @__PURE__ */ jsx(ProgressWrapper, { $thin: thin, $width: width, children: /* @__PURE__ */ jsx(ProgressBar$1, { customColor, $width: `${(tilesWidthRatios[i] || 0) * MAX_PERCENT}%` }) }, `key-${tile.id}`)) }),
+    inline && /* @__PURE__ */ jsx(PercentWrapper, { children: label || `${percent}%` }),
+    description && !inline && /* @__PURE__ */ jsx(ProgressBarDescription, { "data-testid": "progress-bar-description", children: description })
+  ] });
+};
+export {
+  ProgressBar as default
 };
-export default ProgressBar;

package/dist/ProgressBar.styles.d.ts

@@ -1,18 +1,18 @@
-export declare const LabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Label: import("styled-components").StyledComponent<({ id, label, tooltip, tooltipConfig, children, ...htmlAttributes }: import("@synerise/ds-form-field").FormFieldLabelProps) => React.JSX.Element, any, {}, never>;
-export declare const ProgressWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const LabelWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Label: import('styled-components').StyledComponent<({ id, label, tooltip, tooltipConfig, children, ...htmlAttributes }: import('@synerise/ds-form-field').FormFieldLabelProps) => React.JSX.Element, any, {}, never>;
+export declare const ProgressWrapper: import('styled-components').StyledComponent<"div", any, {
     $width: string;
     $thin: boolean;
 }, never>;
-export declare const ProgressOuter: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Percent: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const ProgressBarDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const ProgressBar: import("styled-components").StyledComponent<"div", any, {
+export declare const ProgressOuter: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Percent: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const ProgressBarDescription: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const ProgressBar: import('styled-components').StyledComponent<"div", any, {
     customColor: string;
     $width: string;
 }, never>;
-export declare const PercentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
+export declare const PercentWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Container: import('styled-components').StyledComponent<"div", any, {
     $steps?: number;
     $inline?: boolean;
 }, never>;

package/dist/ProgressBar.styles.js

@@ -1,54 +1,49 @@
-import styled, { css } from 'styled-components';
-import { FormFieldLabel } from '@synerise/ds-form-field';
-export var LabelWrapper = styled.div.withConfig({
+import styled, { css } from "styled-components";
+import { FormFieldLabel } from "@synerise/ds-form-field";
+const LabelWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ProgressBarstyles__LabelWrapper",
   componentId: "sc-1gqovic-0"
 })(["display:flex;align-items:center;margin-bottom:8px;"]);
-export var Label = styled(FormFieldLabel).withConfig({
+const Label = /* @__PURE__ */ styled(FormFieldLabel).withConfig({
   displayName: "ProgressBarstyles__Label",
   componentId: "sc-1gqovic-1"
 })(["&&&{margin:0 8px 0 0;align-items:center;}"]);
-export var ProgressWrapper = styled.div.withConfig({
+const ProgressWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ProgressBarstyles__ProgressWrapper",
   componentId: "sc-1gqovic-2"
-})(["position:relative;margin-right:2px;width:", ";height:", ";background:", ";"], function (props) {
-  return props.$width;
-}, function (props) {
-  return props.$thin ? '4px' : '6px';
-}, function (props) {
-  return props.theme.palette['grey-200'];
-});
-export var ProgressOuter = styled.div.withConfig({
+})(["position:relative;margin-right:2px;width:", ";height:", ";background:", ";"], (props) => props.$width, (props) => props.$thin ? "4px" : "6px", (props) => props.theme.palette["grey-200"]);
+const ProgressOuter = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ProgressBarstyles__ProgressOuter",
   componentId: "sc-1gqovic-3"
 })(["display:flex;align-items:center;min-width:0;flex:1 1 auto;"]);
-export var Percent = styled.span.withConfig({
+const Percent = /* @__PURE__ */ styled.span.withConfig({
   displayName: "ProgressBarstyles__Percent",
   componentId: "sc-1gqovic-4"
 })([""]);
-export var ProgressBarDescription = styled.span.withConfig({
+const ProgressBarDescription = /* @__PURE__ */ styled.span.withConfig({
   displayName: "ProgressBarstyles__ProgressBarDescription",
   componentId: "sc-1gqovic-5"
 })(["margin-top:8px;"]);
-export var ProgressBar = styled.div.withConfig({
+const ProgressBar = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ProgressBarstyles__ProgressBar",
   componentId: "sc-1gqovic-6"
-})(["position:absolute;height:100%;width:", ";background-color:", ";"], function (props) {
-  return props.$width;
-}, function (props) {
-  return props.customColor ? props.customColor : props.theme.palette['green-500'];
-});
-export var PercentWrapper = styled.div.withConfig({
+})(["position:absolute;height:100%;width:", ";background-color:", ";"], (props) => props.$width, (props) => props.customColor ? props.customColor : props.theme.palette["green-500"]);
+const PercentWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ProgressBarstyles__PercentWrapper",
   componentId: "sc-1gqovic-7"
-})(["margin-left:8px;color:", ";font-weight:400;"], function (props) {
-  return props.theme.palette['grey-800'];
-});
-export var Container = styled.div.withConfig({
+})(["margin-left:8px;color:", ";font-weight:400;"], (props) => props.theme.palette["grey-800"]);
+const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ProgressBarstyles__Container",
   componentId: "sc-1gqovic-8"
-})(["width:100%;display:flex;justify-content:center;flex-direction:", ";", ":last-of-type{border-radius:3px;", ":last-of-type{border-radius:3px;}}", ""], function (props) {
-  return props.$inline ? 'row' : 'column';
-}, ProgressWrapper, ProgressBar, function (props) {
-  return props.$steps !== 1 && css(["", ":first-of-type{border-radius:3px 0 0 3px;", ":first-of-type{border-radius:3px 0 0 3px;}}", ":last-of-type{border-radius:0 3px 3px 0;", ":last-of-type{border-radius:0 3px 3px 0;}}"], ProgressWrapper, ProgressBar, ProgressWrapper, ProgressBar);
-});
+})(["width:100%;display:flex;justify-content:center;flex-direction:", ";", ":last-of-type{border-radius:3px;", ":last-of-type{border-radius:3px;}}", ""], (props) => props.$inline ? "row" : "column", ProgressWrapper, ProgressBar, (props) => props.$steps !== 1 && css(["", ":first-of-type{border-radius:3px 0 0 3px;", ":first-of-type{border-radius:3px 0 0 3px;}}", ":last-of-type{border-radius:0 3px 3px 0;", ":last-of-type{border-radius:0 3px 3px 0;}}"], ProgressWrapper, ProgressBar, ProgressWrapper, ProgressBar));
+export {
+  Container,
+  Label,
+  LabelWrapper,
+  Percent,
+  PercentWrapper,
+  ProgressBar,
+  ProgressBarDescription,
+  ProgressOuter,
+  ProgressWrapper
+};

package/dist/ProgressBar.types.d.ts

@@ -1,5 +1,5 @@
-import type { CSSProperties, ReactNode } from 'react';
-import { type WithHTMLAttributes } from '@synerise/ds-utils';
+import { CSSProperties, ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type ProgressProps = WithHTMLAttributes<HTMLDivElement, {
     label?: ReactNode;
     steps?: number;

package/dist/ProgressBar.types.js

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

package/dist/ProgressTiles/ProgressTiles.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type ProgressTilesProps } from './ProgressTiles.types';
+import { default as React } from 'react';
+import { ProgressTilesProps } from './ProgressTiles.types';
 export declare const ProgressTiles: ({ colors, label, tileWidth, percent, ...rest }: ProgressTilesProps) => React.JSX.Element;
 export default ProgressTiles;

package/dist/ProgressTiles/ProgressTiles.js

@@ -1,39 +1,33 @@
-var _excluded = ["colors", "label", "tileWidth", "percent"];
-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, { useCallback } from 'react';
-import * as S from './ProgressTiles.styles';
-var MAX_PERCENT = 100;
-export var ProgressTiles = function ProgressTiles(_ref) {
-  var colors = _ref.colors,
-    label = _ref.label,
-    tileWidth = _ref.tileWidth,
-    percent = _ref.percent,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var getTilesConfig = useCallback(function () {
-    var TILES_COUNT = colors.length;
-    var tileWidthRatio = MAX_PERCENT / TILES_COUNT;
-    var currentProgress = percent / tileWidthRatio;
-    var tileWidths = Array(Math.floor(currentProgress)).fill(1);
-    var lastTileWidth = currentProgress % 1;
-    var tilesWidthRatios = [].concat(tileWidths, [lastTileWidth]);
-    return colors.map(function (color, i) {
-      return {
-        key: i,
-        color: color,
-        width: (tilesWidthRatios[i] || 0) * MAX_PERCENT + "%"
-      };
-    });
-  }, [colors, percent]);
-  return /*#__PURE__*/React.createElement(S.TilesWrapper, rest, label && /*#__PURE__*/React.createElement(S.Label, null, label), /*#__PURE__*/React.createElement("div", {
-    className: "progress-bar-wrapper"
-  }, getTilesConfig().map(function (tile) {
-    return /*#__PURE__*/React.createElement(S.TileContainer, {
-      key: "key-" + tile.key,
-      width: tileWidth
-    }, /*#__PURE__*/React.createElement(S.TileProgress, {
-      color: tile.color,
-      width: tile.width
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { TilesWrapper, Label, TileContainer, TileProgress } from "./ProgressTiles.styles.js";
+const MAX_PERCENT = 100;
+const ProgressTiles = ({
+  colors,
+  label,
+  tileWidth,
+  percent,
+  ...rest
+}) => {
+  const getTilesConfig = useCallback(() => {
+    const TILES_COUNT = colors.length;
+    const tileWidthRatio = MAX_PERCENT / TILES_COUNT;
+    const currentProgress = percent / tileWidthRatio;
+    const tileWidths = Array(Math.floor(currentProgress)).fill(1);
+    const lastTileWidth = currentProgress % 1;
+    const tilesWidthRatios = [...tileWidths, lastTileWidth];
+    return colors.map((color, i) => ({
+      key: i,
+      color,
+      width: `${(tilesWidthRatios[i] || 0) * MAX_PERCENT}%`
     }));
-  })));
+  }, [colors, percent]);
+  return /* @__PURE__ */ jsxs(TilesWrapper, { ...rest, children: [
+    label && /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsx("div", { className: "progress-bar-wrapper", children: getTilesConfig().map((tile) => /* @__PURE__ */ jsx(TileContainer, { width: tileWidth, children: /* @__PURE__ */ jsx(TileProgress, { color: tile.color, width: tile.width }) }, `key-${tile.key}`)) })
+  ] });
+};
+export {
+  ProgressTiles,
+  ProgressTiles as default
 };
-export default ProgressTiles;

package/dist/ProgressTiles/ProgressTiles.styles.d.ts

@@ -1,9 +1,9 @@
-export declare const TileContainer: import("styled-components").StyledComponent<"div", any, {
+export declare const TileContainer: import('styled-components').StyledComponent<"div", any, {
     width: string;
 }, never>;
-export declare const TileProgress: import("styled-components").StyledComponent<"div", any, {
+export declare const TileProgress: import('styled-components').StyledComponent<"div", any, {
     color: string;
     width: string;
 }, never>;
-export declare const Label: import("styled-components").StyledComponent<({ id, label, tooltip, tooltipConfig, children, ...htmlAttributes }: import("@synerise/ds-form-field").FormFieldLabelProps) => React.JSX.Element, any, {}, never>;
-export declare const TilesWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Label: import('styled-components').StyledComponent<({ id, label, tooltip, tooltipConfig, children, ...htmlAttributes }: import('@synerise/ds-form-field').FormFieldLabelProps) => React.JSX.Element, any, {}, never>;
+export declare const TilesWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/ProgressTiles/ProgressTiles.styles.js

@@ -1,26 +1,24 @@
-import styled from 'styled-components';
-import { FormFieldLabel } from '@synerise/ds-form-field';
-export var TileContainer = styled.div.withConfig({
+import styled from "styled-components";
+import { FormFieldLabel } from "@synerise/ds-form-field";
+const TileContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ProgressTilesstyles__TileContainer",
   componentId: "sc-sod9jl-0"
-})(["position:relative;margin-right:2px;width:", ";height:6px;background:", ";"], function (props) {
-  return props.width;
-}, function (props) {
-  return props.theme.palette['grey-200'];
-});
-export var TileProgress = styled.div.withConfig({
+})(["position:relative;margin-right:2px;width:", ";height:6px;background:", ";"], (props) => props.width, (props) => props.theme.palette["grey-200"]);
+const TileProgress = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ProgressTilesstyles__TileProgress",
   componentId: "sc-sod9jl-1"
-})(["position:absolute;height:100%;width:", ";background-color:", ";"], function (props) {
-  return props.width;
-}, function (props) {
-  return props.color;
-});
-export var Label = styled(FormFieldLabel).withConfig({
+})(["position:absolute;height:100%;width:", ";background-color:", ";"], (props) => props.width, (props) => props.color);
+const Label = /* @__PURE__ */ styled(FormFieldLabel).withConfig({
   displayName: "ProgressTilesstyles__Label",
   componentId: "sc-sod9jl-2"
 })(["margin-bottom:12px;cursor:pointer;"]);
-export var TilesWrapper = styled.div.withConfig({
+const TilesWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ProgressTilesstyles__TilesWrapper",
   componentId: "sc-sod9jl-3"
-})(["width:100%;display:flex;justify-content:center;flex-direction:column;.progress-bar-wrapper{display:flex;}", ":first-of-type{border-radius:3px 0 0 3px;", ":first-of-type{border-radius:3px 0 0 3px;}}", ":last-of-type{border-radius:0 3px 3px 0;", ":last-of-type{border-radius:0 3px 3px 0;}}"], TileContainer, TileProgress, TileContainer, TileProgress);
+})(["width:100%;display:flex;justify-content:center;flex-direction:column;.progress-bar-wrapper{display:flex;}", ":first-of-type{border-radius:3px 0 0 3px;", ":first-of-type{border-radius:3px 0 0 3px;}}", ":last-of-type{border-radius:0 3px 3px 0;", ":last-of-type{border-radius:0 3px 3px 0;}}"], TileContainer, TileProgress, TileContainer, TileProgress);
+export {
+  Label,
+  TileContainer,
+  TileProgress,
+  TilesWrapper
+};

package/dist/ProgressTiles/ProgressTiles.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 ProgressTilesProps = WithHTMLAttributes<HTMLDivElement, {
     tileWidth: string;
     colors: string[];

package/dist/ProgressTiles/ProgressTiles.types.js

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

package/dist/index.js

@@ -1,3 +1,8 @@
-export { default } from './ProgressBar';
-export { default as Multivalue } from './Multivalue/Multivalue';
-export { default as ProgressTiles } from './ProgressTiles/ProgressTiles';
+import { default as default2 } from "./ProgressBar.js";
+import { default as default3 } from "./Multivalue/Multivalue.js";
+import { ProgressTiles } from "./ProgressTiles/ProgressTiles.js";
+export {
+  default3 as Multivalue,
+  ProgressTiles,
+  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-progress-bar",
-  "version": "1.1.40",
+  "version": "1.2.1",
   "description": "Progress-Bar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,13 +35,15 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-form-field": "^1.3.8",
-    "@synerise/ds-utils": "^1.6.0"
+    "@synerise/ds-form-field": "^1.3.10",
+    "@synerise/ds-tooltip": "^1.4.10",
+    "@synerise/ds-utils": "^1.7.1",
+    "uuid": "^8.3.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }