@dxc-technology/halstack-react 0.0.0-c291a0c → 0.0.0-c3c521c

package/useTheme.js

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = require("react");
-
-var _variables = require("./common/variables.js");
-
+var _variables = require("./common/variables");
 var _HalstackContext = _interopRequireDefault(require("./HalstackContext"));
-
 var useTheme = function useTheme() {
   var colorsTheme = (0, _react.useContext)(_HalstackContext["default"]);
   return colorsTheme || _variables.componentTokens;
 };
-
-var _default = useTheme;
-exports["default"] = _default;
+var _default = exports["default"] = useTheme;

package/useTranslatedLabels.d.ts

@@ -1,2 +1,85 @@
-declare const useTranslatedLabels: () => any;
+declare const useTranslatedLabels: () => {
+    formFields?: Partial<{
+        optionalLabel: string;
+        requiredSelectionErrorMessage: string;
+        requiredValueErrorMessage: string;
+        formatRequestedErrorMessage: string;
+        lengthErrorMessage: (minLength?: number, maxLength?: number) => string;
+        logoAlternativeText: string;
+    }>;
+    applicationLayout?: Partial<{
+        visibilityToggleTitle: string;
+    }>;
+    alert?: Partial<{
+        infoTitleText: string;
+        successTitleText: string;
+        warningTitleText: string;
+        errorTitleText: string;
+    }>;
+    dateInput?: Partial<{
+        invalidDateErrorMessage: string;
+    }>;
+    dialog?: Partial<{
+        closeIconAriaLabel: string;
+    }>;
+    fileInput?: Partial<{
+        fileSizeGreaterThanErrorMessage: string;
+        fileSizeLessThanErrorMessage: string;
+        multipleButtonLabelDefault: string;
+        singleButtonLabelDefault: string;
+        dropAreaButtonLabelDefault: string;
+        multipleDropAreaLabelDefault: string;
+        singleDropAreaLabelDefault: string;
+        deleteFileActionTitle: string;
+    }>;
+    footer?: Partial<{
+        copyrightText: (year: number) => string;
+    }>;
+    header?: Partial<{
+        closeIcon: string;
+        hamburguerTitle: string;
+    }>;
+    numberInput?: Partial<{
+        valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
+        valueLessThanOrEqualToErrorMessage: (value: number) => string;
+        decrementValueTitle: string;
+        incrementValueTitle: string;
+    }>;
+    paginator?: Partial<{
+        itemsPerPageText: string;
+        minToMaxOfText: (minNumberOfItems: number, maxNumberOfItems: number, totalItems: number) => string;
+        goToPageText: string;
+        pageOfText: (pageNumber: number, totalPagesNumber: number) => string;
+    }>;
+    passwordInput?: Partial<{
+        inputShowPasswordTitle: string;
+        inputHidePasswordTitle: string;
+    }>;
+    quickNav?: Partial<{
+        contentTitle: string;
+    }>;
+    radioGroup?: Partial<{
+        optionalItemLabelDefault: string;
+    }>;
+    select?: Partial<{
+        noMatchesErrorMessage: string;
+        actionClearSelectionTitle: string;
+        actionClearSearchTitle: string;
+    }>;
+    tabs?: Partial<{
+        scrollLeft: string;
+        scrollRight: string;
+    }>;
+    textInput?: Partial<{
+        clearFieldActionTitle: string;
+        searchingMessage: string;
+        fetchingDataErrorMessage: string;
+    }>;
+    calendar?: Partial<{
+        daysShort: string[];
+        months: string[];
+        previousMonthTitle: string;
+        nextMonthTitle: string;
+    }>;
+};
 export default useTranslatedLabels;

package/useTranslatedLabels.js

@@ -4,17 +4,11 @@ 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;
+var _default = exports["default"] = useTranslatedLabels;

package/utils/BaseTypography.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+type TypographyContextProps = {
+    as?: keyof HTMLElementTagNameMap;
+    display?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    fontStyle?: string;
+    fontWeight?: string;
+    letterSpacing?: string;
+    lineHeight?: string;
+    textAlign?: string;
+    color?: string;
+    textDecoration?: string;
+    textOverflow?: string;
+    whiteSpace?: string;
+};
+type BaseTypographyProps = TypographyContextProps & {
+    children: React.ReactNode;
+};
+declare const BaseTypography: ({ as, display, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, color, textDecoration, textOverflow, whiteSpace, children, }: BaseTypographyProps) => JSX.Element;
+export default BaseTypography;

package/utils/BaseTypography.js

@@ -0,0 +1,94 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var TypographyContext = /*#__PURE__*/_react["default"].createContext(null);
+var BaseTypography = function BaseTypography(_ref) {
+  var as = _ref.as,
+    display = _ref.display,
+    fontFamily = _ref.fontFamily,
+    fontSize = _ref.fontSize,
+    fontStyle = _ref.fontStyle,
+    fontWeight = _ref.fontWeight,
+    letterSpacing = _ref.letterSpacing,
+    lineHeight = _ref.lineHeight,
+    textAlign = _ref.textAlign,
+    color = _ref.color,
+    textDecoration = _ref.textDecoration,
+    textOverflow = _ref.textOverflow,
+    whiteSpace = _ref.whiteSpace,
+    children = _ref.children;
+  var componentContext = (0, _react.useContext)(TypographyContext);
+  var contextValue = (0, _react.useMemo)(function () {
+    var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14;
+    return {
+      as: (_ref2 = as !== null && as !== void 0 ? as : componentContext === null || componentContext === void 0 ? void 0 : componentContext.as) !== null && _ref2 !== void 0 ? _ref2 : "span",
+      display: (_ref3 = display !== null && display !== void 0 ? display : componentContext === null || componentContext === void 0 ? void 0 : componentContext.display) !== null && _ref3 !== void 0 ? _ref3 : "inline",
+      fontFamily: (_ref4 = fontFamily !== null && fontFamily !== void 0 ? fontFamily : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontFamily) !== null && _ref4 !== void 0 ? _ref4 : "Open Sans, sans-serif",
+      fontSize: (_ref5 = fontSize !== null && fontSize !== void 0 ? fontSize : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontSize) !== null && _ref5 !== void 0 ? _ref5 : "1rem",
+      fontStyle: (_ref6 = fontStyle !== null && fontStyle !== void 0 ? fontStyle : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontStyle) !== null && _ref6 !== void 0 ? _ref6 : "normal",
+      fontWeight: (_ref7 = fontWeight !== null && fontWeight !== void 0 ? fontWeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontWeight) !== null && _ref7 !== void 0 ? _ref7 : "400",
+      letterSpacing: (_ref8 = letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : componentContext === null || componentContext === void 0 ? void 0 : componentContext.letterSpacing) !== null && _ref8 !== void 0 ? _ref8 : "0em",
+      lineHeight: (_ref9 = lineHeight !== null && lineHeight !== void 0 ? lineHeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.lineHeight) !== null && _ref9 !== void 0 ? _ref9 : "1.5em",
+      textAlign: (_ref10 = textAlign !== null && textAlign !== void 0 ? textAlign : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textAlign) !== null && _ref10 !== void 0 ? _ref10 : "left",
+      color: (_ref11 = color !== null && color !== void 0 ? color : componentContext === null || componentContext === void 0 ? void 0 : componentContext.color) !== null && _ref11 !== void 0 ? _ref11 : "#000000",
+      textDecoration: (_ref12 = textDecoration !== null && textDecoration !== void 0 ? textDecoration : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textDecoration) !== null && _ref12 !== void 0 ? _ref12 : "none",
+      textOverflow: (_ref13 = textOverflow !== null && textOverflow !== void 0 ? textOverflow : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textOverflow) !== null && _ref13 !== void 0 ? _ref13 : "unset",
+      whiteSpace: (_ref14 = whiteSpace !== null && whiteSpace !== void 0 ? whiteSpace : componentContext === null || componentContext === void 0 ? void 0 : componentContext.whiteSpace) !== null && _ref14 !== void 0 ? _ref14 : "normal"
+    };
+  }, [as, display, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, color, textDecoration, textOverflow, whiteSpace]);
+  return /*#__PURE__*/_react["default"].createElement(TypographyContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react["default"].createElement(StyledTypography, contextValue, children));
+};
+var StyledTypography = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  text-decoration: ", ";\n  text-overflow: ", ";\n  white-space: ", ";\n  overflow: ", ";\n  margin: 0;\n"])), function (_ref15) {
+  var display = _ref15.display;
+  return display;
+}, function (_ref16) {
+  var color = _ref16.color;
+  return color;
+}, function (_ref17) {
+  var fontFamily = _ref17.fontFamily;
+  return fontFamily;
+}, function (_ref18) {
+  var fontSize = _ref18.fontSize;
+  return fontSize;
+}, function (_ref19) {
+  var fontStyle = _ref19.fontStyle;
+  return fontStyle;
+}, function (_ref20) {
+  var fontWeight = _ref20.fontWeight;
+  return fontWeight;
+}, function (_ref21) {
+  var letterSpacing = _ref21.letterSpacing;
+  return letterSpacing;
+}, function (_ref22) {
+  var lineHeight = _ref22.lineHeight;
+  return lineHeight;
+}, function (_ref23) {
+  var textAlign = _ref23.textAlign;
+  return textAlign;
+}, function (_ref24) {
+  var textDecoration = _ref24.textDecoration;
+  return textDecoration;
+}, function (_ref25) {
+  var textOverflow = _ref25.textOverflow;
+  return textOverflow;
+}, function (_ref26) {
+  var whiteSpace = _ref26.whiteSpace;
+  return whiteSpace;
+}, function (_ref27) {
+  var textOverflow = _ref27.textOverflow;
+  return textOverflow !== "unset" ? "hidden" : "visible";
+});
+var _default = exports["default"] = BaseTypography;

package/utils/FocusLock.d.ts

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

@@ -0,0 +1,124 @@
+"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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var not = {
+  negTabIndex: ':not([tabindex^="-"])',
+  disabled: ":not(:disabled)"
+};
+var focusableQuery = ["a[href]".concat(not.negTabIndex), "area[href]".concat(not.negTabIndex), "input:not([type=\"hidden\"])".concat(not.negTabIndex).concat(not.disabled), "select".concat(not.negTabIndex).concat(not.disabled), "textarea".concat(not.negTabIndex).concat(not.disabled), "button".concat(not.negTabIndex).concat(not.disabled), "details > summary:first-of-type".concat(not.negTabIndex), "iframe".concat(not.negTabIndex), "audio[controls]".concat(not.negTabIndex), "video[controls]".concat(not.negTabIndex), "[contenteditable]".concat(not.negTabIndex), "[tabindex]".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 attemptFocus = function attemptFocus(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]");
+  var radixPoppers = document.querySelectorAll("[data-radix-popper-content-wrapper]");
+  return Array.prototype.slice.call(radixPortals).some(function (portal) {
+    return portal.contains(activeElement);
+  }) || Array.prototype.slice.call(radixPoppers).some(function (popper) {
+    return popper.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) focusableElements.some(function (element) {
+      return attemptFocus(element);
+    });
+  }, [focusableElements]);
+  var focusLast = function focusLast() {
+    focusableElements.reverse().some(function (element) {
+      return attemptFocus(element);
+    });
+  };
+  var focusLock = function focusLock(event) {
+    if (event.key === "Tab") 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,
+    style: {
+      outline: "none"
+    }
+  }, children), /*#__PURE__*/_react["default"].createElement("div", {
+    onFocus: focusFirst,
+    tabIndex: 0
+  }));
+};
+var _default = exports["default"] = FocusLock;

package/wizard/Wizard.js

@@ -1,34 +1,21 @@
 "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 _variables = require("../common/variables");
 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; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var icons = {
   validIcon: /*#__PURE__*/_react["default"].createElement("svg", {
     id: "check_circle_black_18dp",
@@ -80,38 +67,31 @@ var icons = {
     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;
-
+    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];
-
+    _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, {
@@ -139,14 +119,9 @@ var DxcWizard = function DxcWizard(_ref) {
       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, {
+    }, 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, {
-      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, {
+    }) : 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
@@ -159,8 +134,7 @@ var DxcWizard = function DxcWizard(_ref) {
     }));
   })));
 };
-
-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) {
+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  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";
@@ -177,18 +151,16 @@ var StepsContainer = _styledComponents["default"].div(_templateObject || (_templ
 }, 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;";
+  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%;" : "";
+  return props.mode === "vertical" && "width: fit-content;";
 });
-
-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) {
+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" : "";
@@ -197,11 +169,9 @@ var Step = _styledComponents["default"].button(_templateObject3 || (_templateObj
 }, 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) {
@@ -213,19 +183,16 @@ var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templ
 }, 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) {
@@ -237,11 +204,8 @@ var Number = _styledComponents["default"].p(_templateObject8 || (_templateObject
 }, 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) {
@@ -259,7 +223,6 @@ var Label = _styledComponents["default"].p(_templateObject11 || (_templateObject
 }, 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) {
@@ -277,16 +240,11 @@ var Description = _styledComponents["default"].p(_templateObject12 || (_template
 }, 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";
+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 === "horizontal" ? "0" : "";
-}, function (props) {
-  return props.mode === "vertical" ? "margin: 0 18px;" : "";
+  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;
+var _default = exports["default"] = DxcWizard;