@synerise/ds-stepper 1.0.40 → 1.0.42

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.0.42](https://github.com/Synerise/synerise-design/compare/@synerise/ds-stepper@1.0.41...@synerise/ds-stepper@1.0.42) (2026-04-01)
+
+**Note:** Version bump only for package @synerise/ds-stepper
+
+## [1.0.41](https://github.com/Synerise/synerise-design/compare/@synerise/ds-stepper@1.0.40...@synerise/ds-stepper@1.0.41) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-stepper
+
 ## [1.0.40](https://github.com/Synerise/synerise-design/compare/@synerise/ds-stepper@1.0.39...@synerise/ds-stepper@1.0.40) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-stepper

package/dist/Step/Step.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type StepProps } from './Step.types';
+import { default as React } from 'react';
+import { StepProps } from './Step.types';
 declare const Step: ({ stepNumber, label, active, done, warning, validated, tooltip, onClick, children, size, orientation, }: StepProps) => React.JSX.Element;
 export default Step;

package/dist/Step/Step.js

@@ -1,31 +1,29 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import AnimateHeight from 'react-animate-height';
-import { theme } from '@synerise/ds-core';
-import Icon, { CheckS, WarningFillS } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import { ORIENTATIONS } from '../Stepper.types';
-import * as S from './Step.styles';
-var Step = function Step(_ref) {
-  var stepNumber = _ref.stepNumber,
-    label = _ref.label,
-    active = _ref.active,
-    done = _ref.done,
-    warning = _ref.warning,
-    validated = _ref.validated,
-    tooltip = _ref.tooltip,
-    onClick = _ref.onClick,
-    children = _ref.children,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'default' : _ref$size,
-    _ref$orientation = _ref.orientation,
-    orientation = _ref$orientation === void 0 ? ORIENTATIONS.HORIZONTAL : _ref$orientation;
-  var _useState = useState(Boolean(active)),
-    wasActive = _useState[0],
-    setWasActive = _useState[1];
-  var handleClick = useCallback(function () {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import AnimateHeight from "react-animate-height";
+import { theme } from "@synerise/ds-core";
+import Icon, { CheckS, WarningFillS } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { ORIENTATIONS } from "../Stepper.types.js";
+import { Step as Step$1, StepWrapper, StepPrefix, StepNumber, StepName, StepLabel, StepContent } from "./Step.styles.js";
+const Step = ({
+  stepNumber,
+  label,
+  active,
+  done,
+  warning,
+  validated,
+  tooltip,
+  onClick,
+  children,
+  size = "default",
+  orientation = ORIENTATIONS.HORIZONTAL
+}) => {
+  const [wasActive, setWasActive] = useState(Boolean(active));
+  const handleClick = useCallback(() => {
     onClick && onClick();
   }, [onClick]);
-  useEffect(function () {
+  useEffect(() => {
     if (!active && wasActive) {
       setWasActive(false);
     }
@@ -33,39 +31,17 @@ var Step = function Step(_ref) {
       setWasActive(true);
     }
   }, [active, wasActive]);
-  return /*#__PURE__*/React.createElement(S.Step, {
-    className: "ds-step",
-    active: Boolean(active),
-    wasActive: wasActive,
-    done: Boolean(done),
-    warning: Boolean(warning),
-    validated: Boolean(validated),
-    hasChildren: Boolean(children),
-    size: size,
-    orientation: orientation,
-    clickable: Boolean(onClick)
-  }, /*#__PURE__*/React.createElement(S.StepWrapper, {
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: ['hover'],
-    title: label
-  }, /*#__PURE__*/React.createElement(S.StepPrefix, {
-    noMargin: !label
-  }, done && !validated ? /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(CheckS, null),
-    color: warning ? theme.palette['yellow-600'] : theme.palette['green-600']
-  }) : /*#__PURE__*/React.createElement(S.StepNumber, null, stepNumber))), /*#__PURE__*/React.createElement(S.StepName, {
-    "data-label": label
-  }, /*#__PURE__*/React.createElement(S.StepLabel, null, label), tooltip && active && /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: ['hover'],
-    title: tooltip
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(WarningFillS, null),
-    color: theme.palette['yellow-600']
-  })))), /*#__PURE__*/React.createElement(S.StepContent, null, /*#__PURE__*/React.createElement(AnimateHeight, {
-    className: "ds-step-content",
-    duration: 200,
-    height: active ? 'auto' : 0
-  }, children)));
+  return /* @__PURE__ */ jsxs(Step$1, { className: "ds-step", active: Boolean(active), wasActive, done: Boolean(done), warning: Boolean(warning), validated: Boolean(validated), hasChildren: Boolean(children), size, orientation, clickable: Boolean(onClick), children: [
+    /* @__PURE__ */ jsxs(StepWrapper, { onClick: handleClick, children: [
+      /* @__PURE__ */ jsx(Tooltip, { trigger: ["hover"], title: label, children: /* @__PURE__ */ jsx(StepPrefix, { noMargin: !label, children: done && !validated ? /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CheckS, {}), color: warning ? theme.palette["yellow-600"] : theme.palette["green-600"] }) : /* @__PURE__ */ jsx(StepNumber, { children: stepNumber }) }) }),
+      /* @__PURE__ */ jsxs(StepName, { "data-label": label, children: [
+        /* @__PURE__ */ jsx(StepLabel, { children: label }),
+        tooltip && active && /* @__PURE__ */ jsx(Tooltip, { trigger: ["hover"], title: tooltip, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(WarningFillS, {}), color: theme.palette["yellow-600"] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(StepContent, { children: /* @__PURE__ */ jsx(AnimateHeight, { className: "ds-step-content", duration: 200, height: active ? "auto" : 0, children }) })
+  ] });
+};
+export {
+  Step as default
 };
-export default Step;

package/dist/Step/Step.styles.d.ts

@@ -1,13 +1,13 @@
-import { type StepperOrientation, type StepperSize } from '../Stepper.types';
-export declare const StepPrefix: import("styled-components").StyledComponent<"div", any, {
+import { StepperOrientation, StepperSize } from '../Stepper.types';
+export declare const StepPrefix: import('styled-components').StyledComponent<"div", any, {
     noMargin: boolean;
 }, never>;
-export declare const StepNumber: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StepName: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StepLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StepWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StepContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Step: import("styled-components").StyledComponent<"div", any, {
+export declare const StepNumber: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const StepName: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const StepLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const StepWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const StepContent: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Step: import('styled-components').StyledComponent<"div", any, {
     active: boolean;
     wasActive: boolean;
     done: boolean;

package/dist/Step/Step.styles.js

@@ -1,43 +1,33 @@
-import styled, { css } from 'styled-components';
-import { ORIENTATIONS } from '../Stepper.types';
-export var StepPrefix = styled.div.withConfig({
+import styled, { css } from "styled-components";
+import { ORIENTATIONS } from "../Stepper.types.js";
+const StepPrefix = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Stepstyles__StepPrefix",
   componentId: "sc-1sayddf-0"
-})(["width:24px;min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;border-width:1px;border-style:solid;border-color:", ";margin-right:", ";text-align:center;transition:border-color 0.2s ease-in-out,margin-right 0.2s ease-in-out;"], function (props) {
-  return props.theme.palette['grey-400'];
-}, function (props) {
-  return props.noMargin ? '0' : '8px';
-});
-export var StepNumber = styled.span.withConfig({
+})(["width:24px;min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;border-width:1px;border-style:solid;border-color:", ";margin-right:", ";text-align:center;transition:border-color 0.2s ease-in-out,margin-right 0.2s ease-in-out;"], (props) => props.theme.palette["grey-400"], (props) => props.noMargin ? "0" : "8px");
+const StepNumber = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Stepstyles__StepNumber",
   componentId: "sc-1sayddf-1"
-})(["font-size:13px;display:inline-flex;text-align:center;width:10px;position:absolute;line-height:24px;justify-content:center;align-items:center;transition:color 0.2s ease-in-out;color:", ";"], function (props) {
-  return props.theme.palette['grey-400'];
-});
-export var StepName = styled.span.withConfig({
+})(["font-size:13px;display:inline-flex;text-align:center;width:10px;position:absolute;line-height:24px;justify-content:center;align-items:center;transition:color 0.2s ease-in-out;color:", ";"], (props) => props.theme.palette["grey-400"]);
+const StepName = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Stepstyles__StepName",
   componentId: "sc-1sayddf-2"
 })(["font-size:13px;line-height:18px;flex-wrap:nowrap;position:relative;display:flex;align-items:center;white-space:nowrap;overflow:hidden;max-width:100%;width:auto;transition:opacity 0.2s ease-in-out;opacity:1;&:before{position:absolute;display:block;font-weight:500;content:attr(data-label);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:calc(100% + 2px);visibility:hidden;}"]);
-export var StepLabel = styled.span.withConfig({
+const StepLabel = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Stepstyles__StepLabel",
   componentId: "sc-1sayddf-3"
-})(["transition:color 0.2s ease-in-out;color:", ";overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis;width:100%;"], function (props) {
-  return props.theme.palette['grey-400'];
-});
-export var StepWrapper = styled.div.withConfig({
+})(["transition:color 0.2s ease-in-out;color:", ";overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis;width:100%;"], (props) => props.theme.palette["grey-400"]);
+const StepWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Stepstyles__StepWrapper",
   componentId: "sc-1sayddf-4"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;"]);
-export var StepContent = styled.div.withConfig({
+const StepContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Stepstyles__StepContent",
   componentId: "sc-1sayddf-5"
-})(["display:flex;padding:0 0 0 20px;transition:padding 0.2s ease-in-out;min-height:16px;position:relative;margin-left:12px;outline:0;&&{border-left:1px solid ", ";}"], function (props) {
-  return props.theme.palette['grey-400'];
-});
-export var Step = styled.div.withConfig({
+})(["display:flex;padding:0 0 0 20px;transition:padding 0.2s ease-in-out;min-height:16px;position:relative;margin-left:12px;outline:0;&&{border-left:1px solid ", ";}"], (props) => props.theme.palette["grey-400"]);
+const Step = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Stepstyles__Step",
   componentId: "sc-1sayddf-6"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;", ";", ";", ";", ";&:last-of-type{", "{border-left:0;}}", "{cursor:", ";}"], function (props) {
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;", ";", ";", ";", ";&:last-of-type{", "{border-left:0;}}", "{cursor:", ";}"], (props) => {
   if (props.wasActive) {
     return css(["", "{transition-delay:0s;}"], StepName);
   }
@@ -45,33 +35,40 @@ export var Step = styled.div.withConfig({
     return css(["", "{transition-delay:0.3s;}"], StepName);
   }
   return false;
-}, function (props) {
-  if (props.size === 'small' && props.orientation === ORIENTATIONS.HORIZONTAL) {
+}, (props) => {
+  if (props.size === "small" && props.orientation === ORIENTATIONS.HORIZONTAL) {
     return css(["", "{margin-right:0;}", "{max-width:0;opacity:0;}"], StepPrefix, StepName);
   }
   return false;
-}, function (props) {
-  if (props.active && props.size === 'small' && props.orientation === ORIENTATIONS.HORIZONTAL) {
+}, (props) => {
+  if (props.active && props.size === "small" && props.orientation === ORIENTATIONS.HORIZONTAL) {
     return css(["", "{margin-right:8px;}", "{max-width:100px;opacity:1;}"], StepPrefix, StepName);
   }
   if (props.active) {
-    return css(["", "{padding:", " 0 ", " 20px;}"], StepContent, props.hasChildren ? '16px' : '0', props.hasChildren ? '16px' : '0');
+    return css(["", "{padding:", " 0 ", " 20px;}"], StepContent, props.hasChildren ? "16px" : "0", props.hasChildren ? "16px" : "0");
   }
   return false;
-}, function (props) {
+}, (props) => {
   if (props.validated) {
-    return css(["", "{border-color:", ";}", "", ",", "", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette['red-600'], StepNumber, StepNumber, StepLabel, StepLabel, props.theme.palette['red-600']);
+    return css(["", "{border-color:", ";}", "", ",", "", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette["red-600"], StepNumber, StepNumber, StepLabel, StepLabel, props.theme.palette["red-600"]);
   }
   if (props.warning) {
-    return css(["", "{border-color:", ";}", "", ",", "", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette['yellow-600'], StepNumber, StepNumber, StepLabel, StepLabel, props.theme.palette['yellow-600']);
+    return css(["", "{border-color:", ";}", "", ",", "", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette["yellow-600"], StepNumber, StepNumber, StepLabel, StepLabel, props.theme.palette["yellow-600"]);
   }
   if (props.done) {
-    return css(["", "{border-color:", ";}", ",", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette['green-600'], StepNumber, StepLabel, props.theme.palette['green-600']);
+    return css(["", "{border-color:", ";}", ",", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette["green-600"], StepNumber, StepLabel, props.theme.palette["green-600"]);
   }
   if (props.active) {
-    return css(["", "{border-color:", ";}", "{color:", ";font-weight:500;}", "{&::before{border-color:", ";color:", ";visibility:visible;}", "{visibility:hidden;}}"], StepPrefix, props.theme.palette['grey-700'], StepNumber, props.theme.palette['grey-700'], StepName, props.theme.palette['grey-700'], props.theme.palette['grey-700'], StepLabel);
+    return css(["", "{border-color:", ";}", "{color:", ";font-weight:500;}", "{&::before{border-color:", ";color:", ";visibility:visible;}", "{visibility:hidden;}}"], StepPrefix, props.theme.palette["grey-700"], StepNumber, props.theme.palette["grey-700"], StepName, props.theme.palette["grey-700"], props.theme.palette["grey-700"], StepLabel);
   }
-  return props.clickable && css(["&:hover{", "{border-color:", ";}", ",", "{color:", ";font-weight:400;}}"], StepPrefix, props.theme.palette['grey-700'], StepNumber, StepLabel, props.theme.palette['grey-700']);
-}, StepContent, StepWrapper, function (props) {
-  return props.clickable ? 'pointer' : 'default';
-});
+  return props.clickable && css(["&:hover{", "{border-color:", ";}", ",", "{color:", ";font-weight:400;}}"], StepPrefix, props.theme.palette["grey-700"], StepNumber, StepLabel, props.theme.palette["grey-700"]);
+}, StepContent, StepWrapper, (props) => props.clickable ? "pointer" : "default");
+export {
+  Step,
+  StepContent,
+  StepLabel,
+  StepName,
+  StepNumber,
+  StepPrefix,
+  StepWrapper
+};

package/dist/Step/Step.types.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode } from 'react';
-import { type StepperOrientation, type StepperSize } from '../Stepper.types';
+import { ReactNode } from 'react';
+import { StepperOrientation, StepperSize } from '../Stepper.types';
 export type StepProps = {
     label: string | ReactNode;
     stepNumber: number;

package/dist/Step/Step.types.js

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

package/dist/Stepper.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { type StepperProps } from './Stepper.types';
+import { default as React } from 'react';
+import { StepperProps } from './Stepper.types';
 declare const Stepper: {
     ({ orientation, style, children, size, }: StepperProps): React.JSX.Element;
-    Step: ({ stepNumber, label, active, done, warning, validated, tooltip, onClick, children, size, orientation, }: import("./Step/Step.types").StepProps) => React.JSX.Element;
+    Step: ({ stepNumber, label, active, done, warning, validated, tooltip, onClick, children, size, orientation, }: import('./Step/Step.types').StepProps) => React.JSX.Element;
 };
 export default Stepper;

package/dist/Stepper.js

@@ -1,26 +1,26 @@
-import React, { Children, cloneElement, isValidElement } from 'react';
-import Step from './Step/Step';
-import * as S from './Stepper.styles';
-import { ORIENTATIONS } from './Stepper.types';
-var Stepper = function Stepper(_ref) {
-  var _ref$orientation = _ref.orientation,
-    orientation = _ref$orientation === void 0 ? ORIENTATIONS.HORIZONTAL : _ref$orientation,
-    style = _ref.style,
-    children = _ref.children,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'default' : _ref$size;
-  return /*#__PURE__*/React.createElement(S.StepperWrapper, {
-    className: "ds-stepper",
-    orientation: orientation,
-    style: style
-  }, children && Children.map(children, function (Child, index) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/isValidElement(Child) ? /*#__PURE__*/cloneElement(Child, {
-      size: size,
-      orientation: orientation
-    }) : Child, orientation === ORIENTATIONS.HORIZONTAL &&
-    // @ts-expect-error Property 'length' does not exist on type 'number'.
-    index < children.length - 1 && /*#__PURE__*/React.createElement(S.StepDivider, null));
-  }));
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Children, isValidElement, cloneElement } from "react";
+import Step from "./Step/Step.js";
+import { StepperWrapper, StepDivider } from "./Stepper.styles.js";
+import { ORIENTATIONS } from "./Stepper.types.js";
+const Stepper = ({
+  orientation = ORIENTATIONS.HORIZONTAL,
+  style,
+  children,
+  size = "default"
+}) => {
+  return /* @__PURE__ */ jsx(StepperWrapper, { className: "ds-stepper", orientation, style, children: children && Children.map(children, (Child, index) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      isValidElement(Child) ? cloneElement(Child, {
+        size,
+        orientation
+      }) : Child,
+      orientation === ORIENTATIONS.HORIZONTAL && // @ts-expect-error Property 'length' does not exist on type 'number'.
+      index < children.length - 1 && /* @__PURE__ */ jsx(StepDivider, {})
+    ] });
+  }) });
 };
 Stepper.Step = Step;
-export default Stepper;
+export {
+  Stepper as default
+};

package/dist/Stepper.styles.d.ts

@@ -1,5 +1,5 @@
-import { type StepperOrientation } from './Stepper.types';
-export declare const StepperWrapper: import("styled-components").StyledComponent<"div", any, {
+import { StepperOrientation } from './Stepper.types';
+export declare const StepperWrapper: import('styled-components').StyledComponent<"div", any, {
     orientation: StepperOrientation;
 }, never>;
-export declare const StepDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepDivider: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Stepper.styles.js

@@ -1,25 +1,15 @@
-import styled from 'styled-components';
-import { Step, StepContent, StepWrapper } from './Step/Step.styles';
-import { ORIENTATIONS } from './Stepper.types';
-export var StepperWrapper = styled.div.withConfig({
+import styled from "styled-components";
+import { Step, StepWrapper, StepContent } from "./Step/Step.styles.js";
+import { ORIENTATIONS } from "./Stepper.types.js";
+const StepperWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Stepperstyles__StepperWrapper",
   componentId: "sc-2yak4n-0"
-})(["display:flex;flex-direction:", ";align-items:", ";justify-content:flex-start;width:auto;", "{align-items:", ";&:first-of-type{margin-top:0;}&:last-of-type{margin-bottom:0;}flex-direction:", ";}", "{margin:", ";}", "{display:", ";}"], function (props) {
-  return props.orientation === ORIENTATIONS.VERTICAL ? 'column' : 'row';
-}, function (props) {
-  return props.orientation === ORIENTATIONS.VERTICAL ? 'flex-start' : 'center';
-}, Step, function (props) {
-  return props.orientation === ORIENTATIONS.VERTICAL ? 'flex-start' : 'center';
-}, function (props) {
-  return props.orientation === ORIENTATIONS.VERTICAL ? 'column' : 'row';
-}, StepWrapper, function (props) {
-  return props.orientation === ORIENTATIONS.VERTICAL ? '8px 0' : '0';
-}, StepContent, function (props) {
-  return props.orientation === ORIENTATIONS.VERTICAL ? 'flex' : 'none';
-});
-export var StepDivider = styled.div.withConfig({
+})(["display:flex;flex-direction:", ";align-items:", ";justify-content:flex-start;width:auto;", "{align-items:", ";&:first-of-type{margin-top:0;}&:last-of-type{margin-bottom:0;}flex-direction:", ";}", "{margin:", ";}", "{display:", ";}"], (props) => props.orientation === ORIENTATIONS.VERTICAL ? "column" : "row", (props) => props.orientation === ORIENTATIONS.VERTICAL ? "flex-start" : "center", Step, (props) => props.orientation === ORIENTATIONS.VERTICAL ? "flex-start" : "center", (props) => props.orientation === ORIENTATIONS.VERTICAL ? "column" : "row", StepWrapper, (props) => props.orientation === ORIENTATIONS.VERTICAL ? "8px 0" : "0", StepContent, (props) => props.orientation === ORIENTATIONS.VERTICAL ? "flex" : "none");
+const StepDivider = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Stepperstyles__StepDivider",
   componentId: "sc-2yak4n-1"
-})(["display:flex;flex:1;margin:0 8px;max-width:48px;min-width:8px;height:24px;position:relative;&:after{position:absolute;top:12px;height:1px;width:100%;content:'';background-color:", ";}"], function (props) {
-  return props.theme.palette['grey-400'];
-});
+})(["display:flex;flex:1;margin:0 8px;max-width:48px;min-width:8px;height:24px;position:relative;&:after{position:absolute;top:12px;height:1px;width:100%;content:'';background-color:", ";}"], (props) => props.theme.palette["grey-400"]);
+export {
+  StepDivider,
+  StepperWrapper
+};

package/dist/Stepper.types.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 export type StepperOrientation = 'vertical' | 'horizontal' | string;
 export type StepperSize = 'small' | 'default' | string;
 export declare const ORIENTATIONS: {

package/dist/Stepper.types.js

@@ -1,4 +1,7 @@
-export var ORIENTATIONS = {
-  VERTICAL: 'vertical',
-  HORIZONTAL: 'horizontal'
-};
+const ORIENTATIONS = {
+  VERTICAL: "vertical",
+  HORIZONTAL: "horizontal"
+};
+export {
+  ORIENTATIONS
+};

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './Stepper';
+import { default as default2 } from "./Stepper.js";
+export {
+  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-stepper",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "description": "Stepper 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,8 +35,8 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-tooltip": "^1.4.9",
+    "@synerise/ds-icon": "^1.15.2",
+    "@synerise/ds-tooltip": "^1.4.11",
     "react-animate-height": "^2.0.23"
   },
   "peerDependencies": {
@@ -44,5 +44,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "c2384982c3533a31eb5e5e0408f8dcecb2b0f399"
 }