@dxc-technology/halstack-react 0.0.0-eca8a89 → 0.0.0-ecc45e2

package/typography/Typography.stories.tsx

@@ -0,0 +1,198 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DxcTypography from "./Typography";
+
+export default {
+  title: "Typography",
+  component: DxcTypography,
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Default Typography" theme="light" level={4} />
+      <DxcTypography>Default typography.</DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography font sizes" theme="light" level={4} />
+      <DxcTypography display="block" fontSize="3.75rem">
+        3.75rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="3rem">
+        3rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="2rem">
+        2rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="1.5rem">
+        1.5rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="1.25rem">
+        1.25rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="1rem">
+        1rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="0.875rem">
+        0.875rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="0.75rem">
+        0.75rem.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography letter spacing" theme="light" level={4} />
+      <DxcTypography display="block" letterSpacing="-0.025em">
+        -0.025em.
+      </DxcTypography>
+      <DxcTypography display="block" letterSpacing="-0.0125em">
+        -0.0125em.
+      </DxcTypography>
+      <DxcTypography display="block" letterSpacing="0em">
+        0em.
+      </DxcTypography>
+      <DxcTypography display="block" letterSpacing="0.025em">
+        0.025em.
+      </DxcTypography>
+      <DxcTypography display="block" letterSpacing="0.05em">
+        0.05em.
+      </DxcTypography>
+      <DxcTypography display="block" letterSpacing="0.1em">
+        0.1em.
+      </DxcTypography>{" "}
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography line height" theme="light" level={4} />
+      <DxcTypography display="block" lineHeight="1em">
+        1em.
+      </DxcTypography>
+      <DxcTypography display="block" lineHeight="1.25em">
+        1.25em.
+      </DxcTypography>
+      <DxcTypography display="block" lineHeight="1.365em">
+        1.365em.
+      </DxcTypography>
+      <DxcTypography display="block" lineHeight="1.5em">
+        1.5em.
+      </DxcTypography>
+      <DxcTypography display="block" lineHeight="1.715em">
+        1.715em.
+      </DxcTypography>
+      <DxcTypography display="block" lineHeight="2em">
+        2em.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography font weight" theme="light" level={4} />
+      <DxcTypography display="block" fontWeight="300">
+        300.
+      </DxcTypography>
+      <DxcTypography display="block" fontWeight="400">
+        400.
+      </DxcTypography>
+      <DxcTypography display="block" fontWeight="600">
+        600.
+      </DxcTypography>
+      <DxcTypography display="block" fontWeight="700">
+        700.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography decoration" theme="light" level={4} />
+      <DxcTypography display="block" textDecoration="underline">
+        Underline.
+      </DxcTypography>
+      <DxcTypography display="block" textDecoration="line-through">
+        Line-through.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography font family" theme="light" level={4} />
+      <DxcTypography display="block" fontFamily="Open Sans, sans-serif">
+        Open Sans, sans-serif.
+      </DxcTypography>
+      <DxcTypography display="block" fontFamily="Source Code Pro, monospace">
+        Source Code Pro, monospace.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography font style" theme="light" level={4} />
+      <DxcTypography display="block" fontStyle="italic">
+        Italic.
+      </DxcTypography>
+      <DxcTypography display="block" fontStyle="normal">
+        Normal.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography align" theme="light" level={4} />
+      <DxcTypography display="block" textAlign="left">
+        Left.
+      </DxcTypography>
+      <DxcTypography display="block" textAlign="center">
+        Center.
+      </DxcTypography>
+      <DxcTypography display="block" textAlign="right">
+        Right.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography whitespace" theme="light" level={4} />
+      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
+        <DxcTypography whiteSpace="normal" fontSize="2rem">
+          {"                  "} Normal: A bunch of words you see.
+        </DxcTypography>
+      </div>
+      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
+        <DxcTypography whiteSpace="nowrap" fontSize="2rem">
+          {"                  "}No-wrap: A bunch of words you see.
+        </DxcTypography>
+      </div>
+      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
+        <DxcTypography whiteSpace="pre" fontSize="2rem">
+          {"                  "} pre: A bunch of words you see.
+        </DxcTypography>
+      </div>
+      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
+        <DxcTypography whiteSpace="pre-line" fontSize="2rem">
+          {"                  "}pre-line: A bunch of words you see.
+        </DxcTypography>
+      </div>
+      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
+        <DxcTypography whiteSpace="pre-wrap" fontSize="2rem">
+          {"                  "} pre-wrap: A bunch of words you see.
+        </DxcTypography>
+      </div>
+    </ExampleContainer>{" "}
+    <ExampleContainer>
+      <Title title="Typography display" theme="light" level={4} />
+      <DxcTypography display="block" textAlign="left">
+        Display Block.
+        <DxcTypography>A different text.</DxcTypography>
+      </DxcTypography>
+      <DxcTypography display="inline" textAlign="left">
+        Display Inline.
+        <DxcTypography>A different text.</DxcTypography>
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography text-overflow" theme="light" level={4} />
+      <div style={{ width: "75px" }}>
+        <DxcTypography display="block" textOverflow="clip">
+          Overflow clip.
+        </DxcTypography>
+      </div>
+      <div style={{ width: "75px" }}>
+        <DxcTypography display="block" textOverflow="ellipsis">
+          Overflow ellipsis.
+        </DxcTypography>
+      </div>
+      <div style={{ width: "75px" }}>
+        <DxcTypography display="block" textOverflow="unset">
+          Overflow unset.
+        </DxcTypography>
+      </div>
+    </ExampleContainer>
+  </>
+);

package/typography/types.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+declare type Props = {
+    as?: keyof HTMLElementTagNameMap;
+    display?: "inline" | "block";
+    fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
+    fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem";
+    fontStyle?: "italic" | "normal";
+    fontWeight?: "300" | "400" | "600" | "700";
+    letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em";
+    lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em";
+    textAlign?: "left" | "center" | "right";
+    color?: string;
+    textDecoration?: "none" | "underline" | "line-through";
+    textOverflow?: "clip" | "ellipsis" | "unset";
+    whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
+    children: React.ReactNode;
+};
+export default Props;

package/typography/types.js

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

package/useTheme.js

@@ -11,10 +11,10 @@ var _react = require("react");
 
 var _variables = require("./common/variables.js");
 
-var _ThemeContext = _interopRequireDefault(require("./ThemeContext"));
+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

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

package/wizard/Wizard.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 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"));
@@ -23,17 +23,70 @@ var _variables = require("../common/variables.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _Icons = require("./Icons");
-
 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,
@@ -41,7 +94,7 @@ var DxcWizard = function DxcWizard(_ref) {
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
 
-  var _useState = (0, _react.useState)(currentStep || 0),
+  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];
@@ -63,48 +116,49 @@ var DxcWizard = function DxcWizard(_ref) {
     theme: colorsTheme.wizard
   }, /*#__PURE__*/_react["default"].createElement(StepsContainer, {
     mode: mode,
-    margin: margin
+    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, {
-      tabIndex: tabIndex,
       onClick: function onClick() {
-        return handleStepClick(i);
+        handleStepClick(i);
       },
-      mode: mode,
       disabled: step.disabled,
+      mode: mode,
       first: i === 0,
-      last: i === (steps === null || steps === void 0 ? void 0 : steps.length) - 1
-    }, /*#__PURE__*/_react["default"].createElement(StepHeader, null, /*#__PURE__*/_react["default"].createElement(IconContainer, {
+      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
-    }, (0, _typeof2["default"])(step.icon) === "object" ? step.icon : /*#__PURE__*/_react["default"].createElement(step.icon)) : step.iconSrc ? /*#__PURE__*/_react["default"].createElement(Icon, {
-      src: step.iconSrc
-    }) : /*#__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(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, {
+    }, 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, {
+    }, 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: inline-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\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" : "width: 100%";
+  return props.mode === "vertical" && "height: 500px";
 }, function (props) {
   return props.theme.fontFamily;
 }, function (props) {
@@ -120,16 +174,16 @@ var StepsContainer = _styledComponents["default"].div(_templateObject || (_templ
 });
 
 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" : "";
@@ -139,42 +193,44 @@ var Step = _styledComponents["default"].button(_templateObject3 || (_templateObj
   return props.theme.focusColor;
 });
 
-var StepHeader = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: inline-flex;\n  padding-bottom: 4px;\n"])));
+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  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), function (props) {
-  return props.disabled ? props.theme.disabledCircleWidth : props.current ? props.theme.selectedCircleWidth : props.theme.circleWidth;
+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.disabledCircleHeight : props.current ? props.theme.selectedCircleHeight : props.theme.circleHeight;
+  return props.disabled ? props.theme.disabledStepHeight : props.current ? props.theme.selectedStepHeight : props.theme.stepHeight;
 }, function (props) {
-  return "\n    ".concat(!props.current && !props.disabled ? "border: ".concat(props.theme.circleBorderThickness, " ").concat(props.theme.circleBorderStyle, " ").concat(props.theme.circleBorderColor, ";") : props.current && !props.disabled ? "border: ".concat(props.theme.selectedCircleBorderThickness, " ").concat(props.theme.selectedCircleBorderStyle, " ").concat(props.theme.selectedCircleBorderColor, ";") : props.disabled ? "border: ".concat(props.theme.disabledCircleBorderThickness, " ").concat(props.theme.disabledCircleBorderStyle, " ").concat(props.theme.disabledCircleBorderColor, ";") : "", "\n    background: ").concat(props.disabled ? "".concat(props.theme.disabledBackgroundColor) : props.current ? "".concat(props.theme.stepContainerSelectedBackgroundColor) : "".concat(props.theme.stepContainerBackgroundColor), ";\n  ");
+  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.disabledFontColor, ";") : "color: ".concat(props.current ? props.theme.stepContainerSelectedFontColor : props.theme.stepContainerFontColor, ";");
+  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.circleBorderRadius : props.current ? props.theme.selectedCircleBorderRadius : props.disabled ? props.theme.disabledCircleBorderRadius : "";
+  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.stepContainerIconSize;
+  return props.theme.stepIconSize;
 }, function (props) {
-  return props.theme.stepContainerIconSize;
+  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.stepContainerIconSize;
+  return props.theme.stepIconSize;
 }, function (props) {
-  return props.theme.stepContainerIconSize;
+  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.stepContainerFontSize;
+  return props.theme.stepFontSize;
 }, function (props) {
-  return props.theme.stepContainerFontFamily;
+  return props.theme.stepFontFamily;
 }, function (props) {
-  return props.theme.stepContainerFontStyle;
+  return props.theme.stepFontStyle;
 }, function (props) {
-  return props.theme.stepContainerFontWeight;
+  return props.theme.stepFontWeight;
 }, function (props) {
-  return props.theme.stepContainerLetterSpacing;
+  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"])));
@@ -192,37 +248,35 @@ var Label = _styledComponents["default"].p(_templateObject11 || (_templateObject
 }, function (props) {
   return props.theme.labelFontWeight;
 }, function (props) {
-  return props.theme.labelLetterSpacing;
+  return props.theme.labelFontTracking;
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedLabelFontColor : props.theme.labelFontColor, ";");
+  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.descriptionTextAlign;
+  return props.theme.helperTextTextAlign;
 }, function (props) {
-  return props.theme.descriptionFontFamily;
+  return props.theme.helperTextFontFamily;
 }, function (props) {
-  return props.theme.descriptionFontSize;
+  return props.theme.helperTextFontSize;
 }, function (props) {
-  return props.theme.descriptionFontStyle;
+  return props.theme.helperTextFontStyle;
 }, function (props) {
-  return props.theme.descriptionFontWeight;
+  return props.theme.helperTextFontWeight;
 }, function (props) {
-  return props.theme.descriptionLetterSpacing;
+  return props.theme.helperTextFontTracking;
 }, function (props) {
-  return props.theme.descriptionFontTextTransform;
+  return props.theme.helperTextFontTextTransform;
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedDescriptionFontColor : props.theme.descriptionFontColor, ";");
+  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" : "";
+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;" : "";
+  return props.mode === "vertical" && "margin: 0 18px;";
 }, function (props) {
   return "".concat(props.theme.separatorBorderStyle, " ").concat(props.theme.separatorBorderThickness, " ").concat(props.theme.separatorColor);
 });