@dxc-technology/halstack-react 0.0.0-6083a54 → 0.0.0-618c6e0

package/useTranslatedLabels.js

@@ -1,20 +0,0 @@
-"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/utils/FocusLock.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-/**
- * Traps the focus inside the children of the component. It will focus the first focusable element when the component is mounted.
- * When the focus is on the last focusable element and the user tries to focus the next element, it will focus the first element.
- * When the focus is on the first focusable element and the user tries to focus the previous element, it will focus the last element.
- * The focus can't be moved outside the children unless the children are removed from the DOM (for example, a Dialog, a Modal, etc).
- * @param children: React.ReactNode
- * @returns
- */
-declare const FocusLock: ({ children }: {
-    children: React.ReactNode;
-}) => JSX.Element;
-export default FocusLock;

package/utils/FocusLock.js

@@ -1,139 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-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 || _typeof(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 not = {
-  inert: ":not([inert]):not([inert] *)",
-  negTabIndex: ':not([tabindex^="-"])',
-  disabled: ":not(:disabled):not([aria-disabled='true'])"
-};
-var focusableQuery = ["a[href]".concat(not.inert).concat(not.negTabIndex), "area[href]".concat(not.inert).concat(not.negTabIndex), "input:not([type=\"hidden\"])".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "select".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "textarea".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "button".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "details".concat(not.inert, " > summary:first-of-type").concat(not.negTabIndex), "iframe".concat(not.inert).concat(not.negTabIndex), "audio[controls]".concat(not.inert).concat(not.negTabIndex), "video[controls]".concat(not.inert).concat(not.negTabIndex), "[contenteditable]".concat(not.inert).concat(not.negTabIndex), "[tabindex]".concat(not.inert).concat(not.negTabIndex).concat(not.disabled)].join(",");
-
-var getFocusableElements = function getFocusableElements(container) {
-  return Array.prototype.slice.call(container.querySelectorAll(focusableQuery)).filter(function (element) {
-    return element.getAttribute("aria-hidden") !== "true" && window.getComputedStyle(element).display !== "none" && window.getComputedStyle(element).visibility !== "hidden";
-  });
-};
-/**
- * This function will try to focus the element and return true if it was able to receive the focus.
- * Even if the element is focusable (passes any of the conditions of our selector), there is the possibility
- * that the element may not be focusable at all.
- * @param element: HTMLElement
- * @returns
- */
-
-
-var attempFocus = function attempFocus(element) {
-  element === null || element === void 0 ? void 0 : element.focus();
-  return document.activeElement === element;
-};
-/**
- * @param element: HTMLElement
- * @returns boolean: true if element is contained inside a Radix Portal, false otherwise. 
- */
-
-
-var radixPortalContains = function radixPortalContains(activeElement) {
-  var radixPortals = document.querySelectorAll("[data-radix-portal]");
-  return Array.prototype.slice.call(radixPortals).some(function (portal) {
-    return portal.contains(activeElement);
-  });
-};
-/**
- * Custom hook that returns an array of focusable elements inside a container.
- * @param ref: React.MutableRefObject<HTMLDivElement>
- * @returns
- */
-
-
-var useFocusableElements = function useFocusableElements(ref) {
-  var _useState = (0, _react.useState)(),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      focusableElements = _useState2[0],
-      setFocusableElements = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    if (ref.current != null) {
-      setFocusableElements(getFocusableElements(ref.current));
-      var observer = new MutationObserver(function () {
-        setFocusableElements(getFocusableElements(ref.current));
-      });
-      observer.observe(ref.current, {
-        childList: true,
-        subtree: true,
-        attributes: true
-      });
-      return function () {
-        observer.disconnect();
-      };
-    }
-  }, []);
-  return focusableElements;
-};
-/**
- * Traps the focus inside the children of the component. It will focus the first focusable element when the component is mounted.
- * When the focus is on the last focusable element and the user tries to focus the next element, it will focus the first element.
- * When the focus is on the first focusable element and the user tries to focus the previous element, it will focus the last element.
- * The focus can't be moved outside the children unless the children are removed from the DOM (for example, a Dialog, a Modal, etc).
- * @param children: React.ReactNode
- * @returns
- */
-
-
-var FocusLock = function FocusLock(_ref) {
-  var children = _ref.children;
-  var childrenContainerRef = (0, _react.useRef)();
-  var focusableElements = useFocusableElements(childrenContainerRef);
-  var focusFirst = (0, _react.useCallback)(function () {
-    var _childrenContainerRef;
-
-    if ((focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) (_childrenContainerRef = childrenContainerRef.current) === null || _childrenContainerRef === void 0 ? void 0 : _childrenContainerRef.focus();else if ((focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) > 0) for (var i = 0; i < focusableElements.length; i++) {
-      if (attempFocus(focusableElements[i])) return;
-    }
-  }, [focusableElements]);
-
-  var focusLast = function focusLast() {
-    for (var i = focusableElements.length - 1; i >= 0; i--) {
-      if (attempFocus(focusableElements[i])) return;
-    }
-  };
-
-  var focusLock = function focusLock(event) {
-    if (event.key === "Tab") focusableElements.length === 0 && event.preventDefault();else if (event.key === "Tab" && event.key === "Shift") focusableElements.length === 0 && event.preventDefault();
-  };
-
-  (0, _react.useEffect)(function () {
-    var _childrenContainerRef2;
-
-    if (!((_childrenContainerRef2 = childrenContainerRef.current) !== null && _childrenContainerRef2 !== void 0 && _childrenContainerRef2.contains(document.activeElement)) && !radixPortalContains(document.activeElement)) focusFirst();
-  }, [focusFirst]);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-    onFocus: focusLast,
-    tabIndex: 0
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    onKeyDown: focusLock,
-    ref: childrenContainerRef,
-    tabIndex: (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0 ? 0 : -1
-  }, children), /*#__PURE__*/_react["default"].createElement("div", {
-    onFocus: focusFirst,
-    tabIndex: 0
-  }));
-};
-
-var _default = FocusLock;
-exports["default"] = _default;

package/wizard/Wizard.d.ts

@@ -1,4 +0,0 @@
-/// <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

@@ -1,285 +0,0 @@
-"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, null, typeof step.icon === "string" ? /*#__PURE__*/_react["default"].createElement(Icon, {
-      src: step.icon
-    }) : step.icon) : /*#__PURE__*/_react["default"].createElement(Number, null, 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: fit-content;";
-});
-
-var Step = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  border-radius: 0.25rem;\n  background: inherit;\n  margin: ", ";\n\n  padding: 0px;\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n  &:focus {\n    outline: 2px solid ", ";\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  ", ";\n  ", "\n  border: ", ";\n  opacity: 1;\n  flex-grow: 1;\n"])), function (props) {
-  return props.mode === "horizontal" ? "height: 0;" : "width: 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;