@dxc-technology/halstack-react 0.0.0-90f64ff → 0.0.0-910214a

package/toggle-group/ToggleGroup.test.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup"));
+
+var options = [{
+  value: 1,
+  label: "Amazon"
+}, {
+  value: 2,
+  label: "Ebay"
+}, {
+  value: 3,
+  label: "Apple"
+}, {
+  value: 4,
+  label: "Google"
+}];
+describe("Toggle group component tests", function () {
+  test("Toggle group renders with correct labels", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      label: "Toggle group label",
+      helperText: "Toggle group helper text",
+      options: options
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("Toggle group label")).toBeTruthy();
+    expect(getByText("Toggle group helper text")).toBeTruthy();
+    expect(getByText("Amazon")).toBeTruthy();
+    expect(getByText("Ebay")).toBeTruthy();
+    expect(getByText("Apple")).toBeTruthy();
+    expect(getByText("Google")).toBeTruthy();
+  });
+  test("Uncontrolled toggle group calls correct function on change with value", function () {
+    var onChange = jest.fn();
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      onChange: onChange
+    })),
+        getByText = _render2.getByText;
+
+    var option = getByText("Ebay");
+
+    _react2.fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+  test("Controlled toggle group calls correct function on change with value", function () {
+    var onChange = jest.fn();
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      onChange: onChange,
+      value: 1
+    })),
+        getByText = _render3.getByText;
+
+    var option = getByText("Ebay");
+
+    _react2.fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+  test("Function on change is not called when disable", function () {
+    var onChange = jest.fn();
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      onChange: onChange,
+      disabled: true
+    })),
+        getByText = _render4.getByText;
+
+    var option = getByText("Ebay");
+
+    _react2.fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+  test("Uncontrolled multiple toggle group calls correct function on change with value when is multiple", function () {
+    var onChange = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      onChange: onChange,
+      multiple: true
+    })),
+        getAllByRole = _render5.getAllByRole;
+
+    var toggleOptions = getAllByRole("switch");
+
+    _react2.fireEvent.click(toggleOptions[0]);
+
+    expect(onChange).toHaveBeenCalledWith([1]);
+
+    _react2.fireEvent.click(toggleOptions[1]);
+
+    _react2.fireEvent.click(toggleOptions[3]);
+
+    expect(onChange).toHaveBeenCalledWith([1, 2, 4]);
+    expect(toggleOptions[0].getAttribute("aria-checked")).toBe("true");
+    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
+    expect(toggleOptions[3].getAttribute("aria-checked")).toBe("true");
+  });
+  test("Controlled multiple toggle returns always same values", function () {
+    var onChange = jest.fn();
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      onChange: onChange,
+      value: [1],
+      multiple: true
+    })),
+        getByText = _render6.getByText;
+
+    var option = getByText("Ebay");
+
+    _react2.fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledWith([1, 2]);
+    var option2 = getByText("Google");
+
+    _react2.fireEvent.click(option2);
+
+    expect(onChange).toHaveBeenNthCalledWith(2, [1, 4]);
+  });
+  test("Single selection: Renders with correct default value", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      defaultValue: 2
+    })),
+        getAllByRole = _render7.getAllByRole;
+
+    var toggleOptions = getAllByRole("radio");
+    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
+  });
+  test("Multiple selection: Renders with correct default value", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      defaultValue: [2, 4],
+      multiple: true
+    })),
+        getAllByRole = _render8.getAllByRole;
+
+    var toggleOptions = getAllByRole("switch");
+    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
+    expect(toggleOptions[3].getAttribute("aria-checked")).toBe("true");
+  });
+});

package/toggle-group/types.d.ts

@@ -0,0 +1,105 @@
+/// <reference types="react" />
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type OptionCommons = {
+    /**
+     * Number with the option inner value.
+     */
+    value: number;
+};
+declare type OptionIcon = OptionCommons & {
+    /**
+     * String with the option display value.
+     */
+    label?: string;
+    /**
+     * Element used as the icon. Icon and label can't be used at same time.
+     */
+    icon: string | SVG;
+};
+declare type OptionLabel = OptionCommons & {
+    /**
+     * String with the option display value.
+     */
+    label: string;
+    /**
+     * Element used as the icon. Icon and label can't be used at same time.
+     */
+    icon?: string | SVG;
+};
+declare type Option = OptionIcon | OptionLabel;
+declare type CommonProps = {
+    /**
+     * Text to be placed above the component.
+     */
+    label?: string;
+    /**
+     * Helper text to be placed above the component.
+     */
+    helperText?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * An array of objects representing the selectable options.
+     */
+    options: Option[];
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space | Margin;
+    /**
+     * Value of the tabindex.
+     */
+    tabIndex?: number;
+};
+declare type SingleSelectionToggle = CommonProps & {
+    /**
+     * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
+     */
+    multiple?: false;
+    /**
+     * The key of the initially selected value.
+     */
+    defaultValue?: number;
+    /**
+     * The key of the selected value. If the component allows multiple selection, value must be an array.
+     * If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: number;
+    /**
+     * This function will be called every time the selection changes. The number with the key of the selected
+     * value will be passed as a parameter to this function.
+     */
+    onChange?: (optionIndex: number) => void;
+};
+declare type MultipleSelectionToggle = CommonProps & {
+    /**
+     * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
+     */
+    multiple: true;
+    /**
+     * The array of keys with the initially selected values.
+     */
+    defaultValue?: number[];
+    /**
+     * An array with the keys of the selected values.
+     * If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: number[];
+    /**
+     * This function will be called every time the selection changes. An array with the key of
+     * the selected values will be passed as a parameter to this function.
+     */
+    onChange?: (optionIndex: number[]) => void;
+};
+declare type Props = SingleSelectionToggle | MultipleSelectionToggle;
+export default Props;

package/toggle-group/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/useTheme.d.ts

@@ -0,0 +1,2 @@
+declare const useTheme: () => any;
+export default useTheme;

package/{dist/useTheme.js → useTheme.js}

@@ -11,10 +11,10 @@ var _react = require("react");
 
 var _variables = require("./common/variables.js");
 
-var _ThemeContext = _interopRequireDefault(require("./ThemeContext.js"));
+var _HalstackContext = _interopRequireDefault(require("./HalstackContext"));
 
 var useTheme = function useTheme() {
-  var colorsTheme = (0, _react.useContext)(_ThemeContext["default"]);
+  var colorsTheme = (0, _react.useContext)(_HalstackContext["default"]);
   return colorsTheme || _variables.componentTokens;
 };
 

package/useTranslatedLabels.d.ts

@@ -0,0 +1,2 @@
+declare const useTranslatedLabels: () => any;
+export default useTranslatedLabels;

package/useTranslatedLabels.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _variables = require("./common/variables");
+
+var _HalstackContext = require("./HalstackContext");
+
+var useTranslatedLabels = function useTranslatedLabels() {
+  var labels = (0, _react.useContext)(_HalstackContext.HalstackLanguageContext);
+  return labels || _variables.defaultTranslatedComponentLabels;
+};
+
+var _default = useTranslatedLabels;
+exports["default"] = _default;

package/wizard/Wizard.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import WizardPropsType from "./types";
+declare const DxcWizard: ({ mode, defaultCurrentStep, currentStep, onStepClick, steps, margin, tabIndex, }: WizardPropsType) => JSX.Element;
+export default DxcWizard;

package/wizard/Wizard.js

@@ -0,0 +1,292 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _variables = require("../common/variables.js");
+
+var _useTheme = _interopRequireDefault(require("../useTheme"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var icons = {
+  validIcon: /*#__PURE__*/_react["default"].createElement("svg", {
+    id: "check_circle_black_18dp",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    id: "Path_2946",
+    "data-name": "Path 2946",
+    d: "M0,0H18V18H0Z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    id: "Path_2947",
+    "data-name": "Path 2947",
+    d: "M9.986,4a5.986,5.986,0,1,0,5.986,5.986A5.994,5.994,0,0,0,9.986,4Zm-1.5,9.727L5.5,10.734,6.551,9.679l1.938,1.93L13.42,6.679l1.055,1.063Z",
+    transform: "translate(-0.986 -0.986)",
+    fill: "#eafaef",
+    opacity: "0.999"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    id: "Path_2948",
+    "data-name": "Path 2948",
+    d: "M9.493,2a7.493,7.493,0,1,0,7.493,7.493A7.5,7.5,0,0,0,9.493,2Zm0,13.487a5.994,5.994,0,1,1,5.994-5.994A6,6,0,0,1,9.493,15.487Zm3.439-9.306L7.994,11.119,6.054,9.186,5,10.242l3,3,5.994-5.994Z",
+    transform: "translate(-0.493 -0.493)",
+    fill: "#24a148"
+  })),
+  invalidIcon: /*#__PURE__*/_react["default"].createElement("svg", {
+    id: "highlight_off_black_18dp",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    id: "Path_2943",
+    "data-name": "Path 2943",
+    d: "M0,0H18V18H0Z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    id: "Path_2944",
+    "data-name": "Path 2944",
+    d: "M10,4a6,6,0,1,0,6,6A6.01,6.01,0,0,0,10,4Zm3,7.945L11.945,13,10,11.06,8.059,13,7,11.945,8.944,10,7,8.059,8.059,7,10,8.944,11.945,7,13,8.059,11.06,10Z",
+    transform: "translate(-1.002 -1.002)",
+    fill: "#ffe6e9"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    id: "Path_2945",
+    "data-name": "Path 2945",
+    d: "M11.444,6.5,9.5,8.443,7.558,6.5,6.5,7.558,8.443,9.5,6.5,11.444,7.558,12.5,9.5,10.558,11.444,12.5,12.5,11.444,10.558,9.5,12.5,7.558ZM9.5,2A7.5,7.5,0,1,0,17,9.5,7.494,7.494,0,0,0,9.5,2Zm0,13.5a6,6,0,1,1,6-6A6.009,6.009,0,0,1,9.5,15.5Z",
+    transform: "translate(-0.501 -0.501)",
+    fill: "#d0011b"
+  }))
+};
+
+var DxcWizard = function DxcWizard(_ref) {
+  var _ref2;
+
+  var _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "horizontal" : _ref$mode,
+      defaultCurrentStep = _ref.defaultCurrentStep,
+      currentStep = _ref.currentStep,
+      onStepClick = _ref.onStepClick,
+      steps = _ref.steps,
+      margin = _ref.margin,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
+
+  var _useState = (0, _react.useState)((_ref2 = currentStep !== null && currentStep !== void 0 ? currentStep : defaultCurrentStep) !== null && _ref2 !== void 0 ? _ref2 : 0),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      innerCurrent = _useState2[0],
+      setInnerCurrentStep = _useState2[1];
+
+  var renderedCurrent = currentStep == null ? innerCurrent : currentStep;
+  var colorsTheme = (0, _useTheme["default"])();
+
+  var handleStepClick = function handleStepClick(newValue) {
+    if (currentStep == null) {
+      setInnerCurrentStep(newValue);
+    }
+
+    if (onStepClick) {
+      onStepClick(newValue);
+    }
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.wizard
+  }, /*#__PURE__*/_react["default"].createElement(StepsContainer, {
+    mode: mode,
+    margin: margin,
+    role: "group"
+  }, steps === null || steps === void 0 ? void 0 : steps.map(function (step, i) {
+    return /*#__PURE__*/_react["default"].createElement(StepContainer, {
+      key: "step".concat(i),
+      mode: mode,
+      lastStep: i === (steps === null || steps === void 0 ? void 0 : steps.length) - 1
+    }, /*#__PURE__*/_react["default"].createElement(Step, {
+      onClick: function onClick() {
+        handleStepClick(i);
+      },
+      disabled: step.disabled,
+      mode: mode,
+      first: i === 0,
+      last: i === (steps === null || steps === void 0 ? void 0 : steps.length) - 1,
+      "aria-current": renderedCurrent === i ? "step" : "false",
+      tabIndex: tabIndex
+    }, /*#__PURE__*/_react["default"].createElement(StepHeader, {
+      validityIcon: step.valid !== undefined
+    }, /*#__PURE__*/_react["default"].createElement(IconContainer, {
+      current: i === renderedCurrent,
+      visited: i < renderedCurrent,
+      disabled: step.disabled
+    }, step.icon ? /*#__PURE__*/_react["default"].createElement(StepIconContainer, {
+      disabled: step.disabled
+    }, typeof step.icon === "string" ? /*#__PURE__*/_react["default"].createElement(Icon, {
+      src: step.icon
+    }) : step.icon) : /*#__PURE__*/_react["default"].createElement(Number, {
+      disabled: step.disabled,
+      current: i === renderedCurrent
+    }, i + 1)), step.valid !== undefined && (step.valid ? /*#__PURE__*/_react["default"].createElement(ValidityIconContainer, null, icons.validIcon) : /*#__PURE__*/_react["default"].createElement(ValidityIconContainer, null, icons.invalidIcon))), (step.label || step.description) && /*#__PURE__*/_react["default"].createElement(InfoContainer, null, step.label && /*#__PURE__*/_react["default"].createElement(Label, {
+      current: i === renderedCurrent,
+      disabled: step.disabled,
+      visited: i <= innerCurrent
+    }, step.label), step.description && /*#__PURE__*/_react["default"].createElement(Description, {
+      current: i === renderedCurrent,
+      disabled: step.disabled,
+      visited: i <= innerCurrent
+    }, step.description))), i === steps.length - 1 ? "" : /*#__PURE__*/_react["default"].createElement(StepSeparator, {
+      mode: mode
+    }));
+  })));
+};
+
+var StepsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: \"center\";\n  ", ";\n  font-family: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+  return props.mode === "vertical" ? "column" : "row";
+}, function (props) {
+  return props.mode === "vertical" && "height: 500px";
+}, function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
+});
+
+var StepContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  ", "\n  flex-grow: ", ";\n  flex-direction: ", ";\n  ", "\n"])), function (props) {
+  return props.mode === "vertical" ? "" : "align-items: center;";
+}, function (props) {
+  return props.lastStep ? "0" : "1";
+}, function (props) {
+  return props.mode === "vertical" ? "column" : "row";
+}, function (props) {
+  return props.mode === "vertical" ? "width: 100%;" : "";
+});
+
+var Step = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  border: none;\n  background: inherit;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin: ", ";\n\n  padding: 0px;\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n  &:focus {\n    outline: ", " auto 1px;\n  }\n"])), function (props) {
+  return props.first ? props.mode === "vertical" ? "0 0 24px 0" : "0 24px 0 0" : props.last ? props.mode === "vertical" ? "24px 0 0 0" : "0 0 0 24px" : props.mode === "vertical" ? "24px 0" : "0 24px";
+}, function (props) {
+  return props.disabled ? "cursor: not-allowed" : "";
+}, function (props) {
+  return props.disabled ? "" : "cursor: pointer";
+}, function (props) {
+  return props.theme.focusColor;
+});
+
+var StepHeader = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: inline-flex;\n  ", "\n"])), function (props) {
+  return props.validityIcon && "padding-bottom: 4px;";
+});
+
+var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n\n  ", "\n  ", ";\n\n  border-radius: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), function (props) {
+  return props.disabled ? props.theme.disabledStepWidth : props.current ? props.theme.selectedStepWidth : props.theme.stepWidth;
+}, function (props) {
+  return props.disabled ? props.theme.disabledStepHeight : props.current ? props.theme.selectedStepHeight : props.theme.stepHeight;
+}, function (props) {
+  return "\n    ".concat(props.disabled ? "border: ".concat(props.theme.disabledStepBorderThickness, " ").concat(props.theme.disabledStepBorderStyle, " ").concat(props.theme.disabledStepBorderColor, ";") : props.current ? "border: ".concat(props.theme.selectedStepBorderThickness, " ").concat(props.theme.selectedStepBorderStyle, " ").concat(props.theme.selectedStepBorderColor, ";") : props.visited ? "border: ".concat(props.theme.stepBorderThickness, " ").concat(props.theme.stepBorderStyle, " ").concat(props.theme.visitedStepBorderColor, ";") : "border: ".concat(props.theme.stepBorderThickness, " ").concat(props.theme.stepBorderStyle, " ").concat(props.theme.unvisitedStepBorderColor, ";"), "\n    background: ").concat(props.disabled ? "".concat(props.theme.disabledStepBackgroundColor) : props.current ? "".concat(props.theme.selectedStepBackgroundColor) : !props.visited ? "".concat(props.theme.unvisitedStepBackgroundColor) : "".concat(props.theme.visitedStepBackgroundColor), ";\n  ");
+}, function (props) {
+  return props.disabled ? "color: ".concat(props.theme.disabledStepFontColor, ";") : "color: ".concat(props.current ? props.theme.selectedStepFontColor : !props.visited ? props.theme.unvisitedStepFontColor : props.theme.visitedStepFontColor, ";");
+}, function (props) {
+  return !props.current && !props.disabled ? props.theme.stepBorderRadius : props.current ? props.theme.selectedStepBorderRadius : props.disabled ? props.theme.disabledStepBorderRadius : "";
+});
+
+var Icon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n"])), function (props) {
+  return props.theme.stepIconSize;
+}, function (props) {
+  return props.theme.stepIconSize;
+});
+
+var StepIconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  overflow: hidden;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
+  return props.theme.stepIconSize;
+}, function (props) {
+  return props.theme.stepIconSize;
+});
+
+var Number = _styledComponents["default"].p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  opacity: 1;\n  margin: 0px 0px 0px 1px;\n"])), function (props) {
+  return props.theme.stepFontSize;
+}, function (props) {
+  return props.theme.stepFontFamily;
+}, function (props) {
+  return props.theme.stepFontStyle;
+}, function (props) {
+  return props.theme.stepFontWeight;
+}, function (props) {
+  return props.theme.stepFontTracking;
+});
+
+var ValidityIconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 18px;\n  height: 18px;\n  position: absolute;\n  top: 22.5px;\n  left: 22.5px;\n"])));
+
+var InfoContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: 12px;\n"])));
+
+var Label = _styledComponents["default"].p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  text-align: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  ", ";\n  text-transform: ", ";\n  margin: 0;\n"])), function (props) {
+  return props.theme.labelTextAlign;
+}, function (props) {
+  return props.theme.labelFontFamily;
+}, function (props) {
+  return props.theme.labelFontSize;
+}, function (props) {
+  return props.theme.labelFontStyle;
+}, function (props) {
+  return props.theme.labelFontWeight;
+}, function (props) {
+  return props.theme.labelFontTracking;
+}, function (props) {
+  return props.disabled ? "color: ".concat(props.theme.disabledLabelFontColor, ";") : "color: ".concat(!props.visited ? props.theme.unvisitedLabelFontColor : props.current ? props.theme.selectedLabelFontColor : props.theme.visitedLabelFontColor, ";");
+}, function (props) {
+  return props.theme.labelFontTextTransform;
+});
+
+var Description = _styledComponents["default"].p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  text-align: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  text-transform: ", ";\n  ", ";\n  margin: 0;\n"])), function (props) {
+  return props.theme.helperTextTextAlign;
+}, function (props) {
+  return props.theme.helperTextFontFamily;
+}, function (props) {
+  return props.theme.helperTextFontSize;
+}, function (props) {
+  return props.theme.helperTextFontStyle;
+}, function (props) {
+  return props.theme.helperTextFontWeight;
+}, function (props) {
+  return props.theme.helperTextFontTracking;
+}, function (props) {
+  return props.theme.helperTextFontTextTransform;
+}, function (props) {
+  return props.disabled ? "color: ".concat(props.theme.disabledHelperTextFontColor, ";") : "color: ".concat(!props.visited ? props.theme.unvisitedHelperTextFontColor : props.current ? props.theme.selectedHelperTextFontColor : props.theme.visitedHelperTextFontColor, ";");
+});
+
+var StepSeparator = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  ", "\n  border: ", ";\n  opacity: 1;\n  flex-grow: 1;\n"])), function (props) {
+  return props.mode === "horizontal" ? "" : "0";
+}, function (props) {
+  return props.mode === "horizontal" ? "0" : "";
+}, function (props) {
+  return props.mode === "vertical" ? "margin: 0 18px;" : "";
+}, function (props) {
+  return "".concat(props.theme.separatorBorderStyle, " ").concat(props.theme.separatorBorderThickness, " ").concat(props.theme.separatorColor);
+});
+
+var _default = DxcWizard;
+exports["default"] = _default;