@dxc-technology/halstack-react 0.0.0-9196773 → 0.0.0-933ff75

package/dist/V3Textarea/V3Textarea.js

@@ -0,0 +1,264 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+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 _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _variables = require("../common/variables.js");
+
+var _utils = require("../common/utils.js");
+
+var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+
+var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
+
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
+
+function _templateObject() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  display: inline-block;\n  position: relative;\n  height: auto;\n  width: ", ";\n\n  .MuiTextField-root {\n    width: 100%;\n\n    .MuiFormHelperText-root {\n      font-family: ", ";\n      font-size: ", ";\n      font-style: ", ";\n      font-weight: ", ";\n      letter-spacing: ", ";\n      margin-top: 6px;\n    }\n    .MuiFormLabel-root {\n      font-size: ", ";\n      font-style: ", ";\n      font-weight: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n      padding-left: \"inherit\";\n\n      &.Mui-disabled {\n        color: ", " !important;\n        cursor: not-allowed;\n      }\n\n      &.Mui-focused {\n        color: ", ";\n        &.MuiInputLabel-shrink {\n          transform: \"translate(0, 1.5px) scale(0.75);\";\n        }\n      }\n\n      &.MuiInputLabel-shrink {\n        font-family: ", ";\n        transform: \"translate(0, 1.5px) scale(0.75)\";\n      }\n\n      &.Mui-error {\n        color: ", ";\n      }\n\n      &:not(.MuiInputLabel-shrink) {\n        font-family: ", ";\n        color: ", ";\n        & + div,\n        & + div + p {\n          color: ", ";\n        }\n      }\n\n      &.MuiInputLabel-shrink {\n        & + div::before {\n          border-color: ", ";\n        }\n        & + div + p {\n          color: ", ";\n        }\n      }\n    }\n    .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n      &::before {\n        border-bottom: ", ";\n      }\n\n      &:not(.Mui-error)::before,\n      &:not(&.Mui-focused)::before {\n        border-bottom: ", ";\n      }\n\n      &::after {\n        border-bottom: ", ";\n      }\n\n      .MuiInputBase-inputMultiline {\n        overflow: auto !important;\n\n        ::-webkit-scrollbar {\n          width: 3px;\n        }\n\n        ::-webkit-scrollbar-track {\n          background-color: ", ";\n          border-radius: 3px;\n        }\n\n        ::-webkit-scrollbar-thumb {\n          background-color: ", ";\n          border-radius: 3px;\n        }\n      }\n\n      &.Mui-error {\n        &::before {\n          border-width: ", ";\n          border-color: ", ";\n        }\n        &::after {\n          transform: scaleX(0);\n        }\n      }\n\n      &.Mui-focused {\n        &::after {\n          border-width: calc(", " + 1px);\n          border-color: ", ";\n        }\n        &.Mui-error::after {\n          border-color: ", ";\n        }\n      }\n\n      &.Mui-disabled {\n        cursor: not-allowed;\n\n        &::before {\n          border-bottom: ", ";\n          border-bottom-style: solid;\n        }\n      }\n\n      .MuiInputBase-input {\n        font-family: ", ";\n        font-size: ", ";\n        font-style: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        color: ", ";\n        line-height: ", ";\n        padding-left: \"inherit\";\n        text-overflow: ellipsis;\n\n        &.Mui-disabled {\n          cursor: not-allowed;\n          color: ", ";\n        }\n      }\n\n      &:hover:not(.Mui-disabled):before &:hover:not(.Mui-error):before {\n        border-bottom-color: ", ";\n      }\n    }\n\n    & > p {\n      &.Mui-error {\n        color: ", ";\n      }\n      &.Mui-disabled {\n        color: ", " !important;\n        cursor: not-allowed;\n      }\n    }\n  }\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var V3DxcTextarea = function V3DxcTextarea(_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? " " : _ref$label,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? "" : _ref$name,
+      value = _ref.value,
+      _ref$assistiveText = _ref.assistiveText,
+      assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? "" : _ref$onChange,
+      _ref$onBlur = _ref.onBlur,
+      onBlur = _ref$onBlur === void 0 ? "" : _ref$onBlur,
+      _ref$numRows = _ref.numRows,
+      numRows = _ref$numRows === void 0 ? 4 : _ref$numRows,
+      _ref$invalid = _ref.invalid,
+      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
+      _ref$required = _ref.required,
+      required = _ref$required === void 0 ? false : _ref$required,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+      margin = _ref.margin,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "medium" : _ref$size,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
+
+  var _useState = (0, _react.useState)(""),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      innerValue = _useState2[0],
+      setInnerValue = _useState2[1];
+
+  var colorsTheme = (0, _useTheme["default"])();
+  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
+
+  var handlerTextareaChange = function handlerTextareaChange(event) {
+    if (value === null || value === undefined) {
+      if (typeof onChange === "function") {
+        setInnerValue(event.target.value);
+        onChange(event.target.value);
+      } else {
+        setInnerValue(event.target.value);
+      }
+    } else if (onChange !== "") {
+      if (typeof onChange === "function") {
+        onChange(event.target.value);
+      } else {
+        setInnerValue(event.target.value);
+      }
+    }
+  };
+
+  var handlerTextareaBlur = function handlerTextareaBlur(event) {
+    setInnerValue(event.target.value);
+
+    if (onBlur) {
+      onBlur(event.target.value);
+    }
+  };
+
+  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.V3Textarea
+  }, _react["default"].createElement(TextContainer, {
+    required: required,
+    assistiveText: assistiveText,
+    margin: margin,
+    size: size,
+    backgroundType: backgroundType
+  }, _react["default"].createElement(_TextField["default"], {
+    error: invalid,
+    value: value !== null ? value : innerValue,
+    name: name,
+    multiline: true,
+    disabled: disabled,
+    label: required ? _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_RequiredComponent["default"], null), label) : label,
+    helperText: assistiveText,
+    onChange: handlerTextareaChange,
+    onBlur: onBlur && handlerTextareaBlur || null,
+    rows: numRows,
+    placeholder: placeholder,
+    inputProps: {
+      tabIndex: tabIndex
+    }
+  })));
+};
+
+var sizes = {
+  small: "42px",
+  medium: "240px",
+  large: "480px",
+  fillParent: "100%"
+};
+
+var calculateWidth = function calculateWidth(margin, size) {
+  return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
+};
+
+var TextContainer = _styledComponents["default"].div(_templateObject(), 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] : "";
+}, function (props) {
+  return calculateWidth(props.margin, props.size);
+}, function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.theme.assistiveTextFontSize;
+}, function (props) {
+  return props.theme.assistiveTextFontStyle;
+}, function (props) {
+  return props.theme.assistiveTextFontWeight;
+}, function (props) {
+  return props.theme.assistiveTextLetterSpacing;
+}, function (props) {
+  return props.theme.labelFontSize;
+}, function (props) {
+  return props.theme.labelFontStyle;
+}, function (props) {
+  return props.theme.labelFontWeight;
+}, function (props) {
+  return props.theme.labelLetterSpacing;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
+}, function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
+}, function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.assistiveTextFontColorOnDark : props.theme.assistiveTextFontColor;
+}, function (props) {
+  return props.backgroundType ? props.theme.underlineColorOnDark : props.theme.underlineColor;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
+}, function (props) {
+  return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
+}, function (props) {
+  return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
+}, function (props) {
+  return "calc(".concat(props.theme.underlineThickness, " + 1px) solid ").concat(props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor);
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.scrollBarTrackColorOnDark : props.theme.scrollBarTrackColor;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.scrollBarThumbColorOnDark : props.theme.scrollBarThumbColor;
+}, function (props) {
+  return props.theme.underlineThickness;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
+}, function (props) {
+  return props.theme.underlineThickness;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
+}, function (props) {
+  return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor, " !important");
+}, function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.theme.valueFontSize;
+}, function (props) {
+  return props.theme.valueFontStyle;
+}, function (props) {
+  return props.theme.valueFontWeight;
+}, function (props) {
+  return props.theme.valueLetterSpacing;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
+}, function (props) {
+  return props.theme.valueLineHeight;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
+}, function (props) {
+  return "".concat(props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor, " !important");
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
+});
+
+V3DxcTextarea.propTypes = {
+  label: _propTypes["default"].string,
+  name: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  assistiveText: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  required: _propTypes["default"].bool,
+  invalid: _propTypes["default"].bool,
+  placeholder: _propTypes["default"].string,
+  onChange: _propTypes["default"].func,
+  onBlur: _propTypes["default"].func,
+  numRows: _propTypes["default"].number,
+  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
+  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
+  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
+  tabIndex: _propTypes["default"].number
+};
+var _default = V3DxcTextarea;
+exports["default"] = _default;

package/dist/button/Button.js

@@ -52,7 +52,7 @@ function _templateObject3() {
 }
 
 function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 24px;\n  max-width: 24px;\n  margin-left: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 24px;\n  max-width: 24px;\n  margin-left: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  display: flex;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"]);
 
   _templateObject2 = function _templateObject2() {
     return data;

package/dist/common/variables.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.typeface = exports.responsiveSizes = exports.spaces = exports.componentTokens = exports.globalTokens = void 0;
 
-var _dxc_logo_black = _interopRequireDefault(require("../header/dxc_logo_black.svg"));
+var _Icons = require("../header/Icons");
 
-var _dxc_logo = _interopRequireDefault(require("../footer/dxc_logo.svg"));
+var _Icons2 = _interopRequireDefault(require("../footer/Icons"));
 
 var globalTokens = {
   // Color
@@ -559,7 +559,7 @@ var componentTokens = {
     copyrightFontStyle: globalTokens.type_normal,
     copyrightFontWeight: globalTokens.type_regular,
     copyrightFontColor: globalTokens.hal_white,
-    logo: _dxc_logo["default"],
+    logo: _Icons2["default"],
     logoHeight: "32px",
     logoWidth: "auto",
     socialLinksSize: "24px",
@@ -577,8 +577,8 @@ var componentTokens = {
     hamburguerTextTransform: globalTokens.type_uppercase,
     hamburguerIconColor: globalTokens.hal_black,
     hamburguerHoverColor: globalTokens.mediumGreyBlack,
-    logo: _dxc_logo_black["default"],
-    logoResponsive: _dxc_logo_black["default"],
+    logo: _Icons.dxcLogo,
+    logoResponsive: _Icons.dxcLogo,
     logoHeight: "40px",
     logoWidth: "auto",
     menuBackgroundColor: globalTokens.hal_white,
@@ -1267,41 +1267,6 @@ var componentTokens = {
     badgeRadiusWithNotificationNumber: "10px"
   },
   textarea: {
-    fontFamily: globalTokens.type_sans,
-    assistiveTextFontSize: globalTokens.type_scale_01,
-    assistiveTextFontStyle: globalTokens.type_normal,
-    assistiveTextFontWeight: globalTokens.type_regular,
-    assistiveTextFontColor: globalTokens.black,
-    assistiveTextFontColorOnDark: globalTokens.white,
-    assistiveTextLetterSpacing: "0.03333em",
-    disabledColor: globalTokens.lighterBlack,
-    disabledColorOnDark: "#575757",
-    errorColor: globalTokens.red,
-    errorColorOnDark: globalTokens.hal_red_l_60,
-    scrollBarThumbColor: globalTokens.darkGrey,
-    scrollBarThumbColorOnDark: globalTokens.white,
-    scrollBarTrackColor: globalTokens.lightGrey,
-    scrollBarTrackColorOnDark: "#999999",
-    labelFontSize: globalTokens.type_scale_03,
-    labelFontStyle: globalTokens.type_normal,
-    labelFontWeight: globalTokens.type_regular,
-    labelFontColor: globalTokens.black,
-    labelFontColorOnDark: globalTokens.white,
-    labelLetterSpacing: "0.00938em",
-    valueFontSize: globalTokens.type_scale_03,
-    valueFontStyle: globalTokens.type_normal,
-    valueFontWeight: globalTokens.type_regular,
-    valueFontColor: globalTokens.black,
-    valueFontColorOnDark: globalTokens.white,
-    valueLetterSpacing: globalTokens.type_spacing_normal,
-    valueLineHeight: "1.1875em",
-    underlineColor: globalTokens.black,
-    underlineColorOnDark: globalTokens.white,
-    underlineFocusColor: globalTokens.black,
-    underlineFocusColorOnDark: globalTokens.white,
-    underlineThickness: "1px"
-  },
-  newTextarea: {
     fontFamily: globalTokens.type_sans,
     enabledBorderColor: globalTokens.hal_black,
     enabledBorderColorOnDark: globalTokens.hal_white,
@@ -1459,6 +1424,41 @@ var componentTokens = {
     uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
     uploadedFilesNumberFontWeight: globalTokens.type_bold
   },
+  V3Textarea: {
+    fontFamily: globalTokens.type_sans,
+    assistiveTextFontSize: globalTokens.type_scale_01,
+    assistiveTextFontStyle: globalTokens.type_normal,
+    assistiveTextFontWeight: globalTokens.type_regular,
+    assistiveTextFontColor: globalTokens.black,
+    assistiveTextFontColorOnDark: globalTokens.white,
+    assistiveTextLetterSpacing: "0.03333em",
+    disabledColor: globalTokens.lighterBlack,
+    disabledColorOnDark: "#575757",
+    errorColor: globalTokens.red,
+    errorColorOnDark: globalTokens.hal_red_l_60,
+    scrollBarThumbColor: globalTokens.darkGrey,
+    scrollBarThumbColorOnDark: globalTokens.white,
+    scrollBarTrackColor: globalTokens.lightGrey,
+    scrollBarTrackColorOnDark: "#999999",
+    labelFontSize: globalTokens.type_scale_03,
+    labelFontStyle: globalTokens.type_normal,
+    labelFontWeight: globalTokens.type_regular,
+    labelFontColor: globalTokens.black,
+    labelFontColorOnDark: globalTokens.white,
+    labelLetterSpacing: "0.00938em",
+    valueFontSize: globalTokens.type_scale_03,
+    valueFontStyle: globalTokens.type_normal,
+    valueFontWeight: globalTokens.type_regular,
+    valueFontColor: globalTokens.black,
+    valueFontColorOnDark: globalTokens.white,
+    valueLetterSpacing: globalTokens.type_spacing_normal,
+    valueLineHeight: "1.1875em",
+    underlineColor: globalTokens.black,
+    underlineColorOnDark: globalTokens.white,
+    underlineFocusColor: globalTokens.black,
+    underlineFocusColorOnDark: globalTokens.white,
+    underlineThickness: "1px"
+  },
   wizard: {
     disabledBackgroundColor: globalTokens.lightGrey,
     disabledFontColor: globalTokens.darkGrey,

package/dist/date/Date.js

@@ -41,7 +41,7 @@ var _variables = require("../common/variables.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
-var _DxcDate$propTypes;
+var _V3DxcDate$propTypes;
 
 function _templateObject() {
   var data = (0, _taggedTemplateLiteral2["default"])([""]);
@@ -53,7 +53,7 @@ function _templateObject() {
   return data;
 }
 
-var DxcDate = function DxcDate(_ref) {
+var V3DxcDate = function V3DxcDate(_ref) {
   var value = _ref.value,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? "dd-MM-yyyy" : _ref$format,
@@ -356,7 +356,7 @@ var sizes = {
 
 var StyledDPicker = _styledComponents["default"].div(_templateObject());
 
-DxcDate.propTypes = (_DxcDate$propTypes = {
+V3DxcDate.propTypes = (_V3DxcDate$propTypes = {
   value: _propTypes["default"].string,
   format: _propTypes["default"].string,
   label: _propTypes["default"].string,
@@ -369,11 +369,11 @@ DxcDate.propTypes = (_DxcDate$propTypes = {
   invalid: _propTypes["default"].bool,
   onChange: _propTypes["default"].func,
   onBlur: _propTypes["default"].func
-}, (0, _defineProperty2["default"])(_DxcDate$propTypes, "onChange", _propTypes["default"].func), (0, _defineProperty2["default"])(_DxcDate$propTypes, "size", _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes)))), (0, _defineProperty2["default"])(_DxcDate$propTypes, "margin", _propTypes["default"].oneOfType([_propTypes["default"].shape({
+}, (0, _defineProperty2["default"])(_V3DxcDate$propTypes, "onChange", _propTypes["default"].func), (0, _defineProperty2["default"])(_V3DxcDate$propTypes, "size", _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes)))), (0, _defineProperty2["default"])(_V3DxcDate$propTypes, "margin", _propTypes["default"].oneOfType([_propTypes["default"].shape({
   top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
   bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
   left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
   right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])), (0, _defineProperty2["default"])(_DxcDate$propTypes, "tabIndex", _propTypes["default"].number), _DxcDate$propTypes);
-var _default = DxcDate;
+}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])), (0, _defineProperty2["default"])(_V3DxcDate$propTypes, "tabIndex", _propTypes["default"].number), _V3DxcDate$propTypes);
+var _default = V3DxcDate;
 exports["default"] = _default;

package/dist/file-input/FileInput.js

@@ -58,7 +58,7 @@ function _templateObject10() {
 }
 
 function _templateObject9() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 0.25rem;\n"]);
 
   _templateObject9 = function _templateObject9() {
     return data;
@@ -88,7 +88,7 @@ function _templateObject7() {
 }
 
 function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n\n  input[type=\"file\"] {\n    visibility: hidden;\n    position: absolute;\n    width: 0px;\n    height: 0px;\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 0.25rem;\n\n  input[type=\"file\"] {\n    visibility: hidden;\n    position: absolute;\n    width: 0px;\n    height: 0px;\n  }\n"]);
 
   _templateObject6 = function _templateObject6() {
     return data;

package/dist/footer/Footer.js

@@ -29,9 +29,21 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
 var _BackgroundColorContext = require("../BackgroundColorContext.js");
 
-function _templateObject12() {
+var _Icons = _interopRequireDefault(require("./Icons"));
+
+function _templateObject13() {
   var data = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"]);
 
+  _templateObject13 = function _templateObject13() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject12() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px 10px;\n  color: ", ";\n"]);
+
   _templateObject12 = function _templateObject12() {
     return data;
   };
@@ -40,7 +52,7 @@ function _templateObject12() {
 }
 
 function _templateObject11() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px 10px;\n  color: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    height: ", ";\n    width: ", ";\n    color: ", ";\n  }\n\n  overflow: hidden;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"]);
 
   _templateObject11 = function _templateObject11() {
     return data;
@@ -50,7 +62,7 @@ function _templateObject11() {
 }
 
 function _templateObject10() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    height: ", ";\n    width: ", ";\n    color: ", ";\n  }\n\n  overflow: hidden;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    height: ", ";\n    width: ", ";\n    fill: ", ";\n  }\n"]);
 
   _templateObject10 = function _templateObject10() {
     return data;
@@ -60,7 +72,7 @@ function _templateObject10() {
 }
 
 function _templateObject9() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    height: ", ";\n    width: ", ";\n    fill: ", ";\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    margin-left: ", ";\n  }\n"]);
 
   _templateObject9 = function _templateObject9() {
     return data;
@@ -70,7 +82,7 @@ function _templateObject9() {
 }
 
 function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    margin-left: ", ";\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  width: ", ";\n"]);
 
   _templateObject8 = function _templateObject8() {
     return data;
@@ -156,8 +168,6 @@ var DxcFooter = function DxcFooter(_ref) {
       bottomLinks = _ref$bottomLinks === void 0 ? [] : _ref$bottomLinks,
       _ref$copyright = _ref.copyright,
       copyright = _ref$copyright === void 0 ? "" : _ref$copyright,
-      _ref$logoSrc = _ref.logoSrc,
-      logoSrc = _ref$logoSrc === void 0 ? "default" : _ref$logoSrc,
       children = _ref.children,
       padding = _ref.padding,
       margin = _ref.margin,
@@ -181,6 +191,20 @@ var DxcFooter = function DxcFooter(_ref) {
       setIsResponsivePhone = _useState6[1];
 
   var colorsTheme = (0, _useTheme["default"])();
+  var footerLogo = (0, _react.useMemo)(function () {
+    if (!colorsTheme.footer.logo) {
+      return _Icons["default"];
+    }
+
+    if (typeof colorsTheme.footer.logo === "string") {
+      return _react["default"].createElement(LogoImg, {
+        alt: "Logo",
+        src: colorsTheme.footer.logo
+      });
+    }
+
+    return colorsTheme.footer.logo;
+  }, [colorsTheme.footer.logo]);
 
   var handleResize = function handleResize(refWidth) {
     if (ref.current) {
@@ -236,10 +260,7 @@ var DxcFooter = function DxcFooter(_ref) {
     margin: margin,
     refSize: refSize,
     ref: ref
-  }, _react["default"].createElement(FooterHeader, null, _react["default"].createElement(LogoIcon, {
-    logoSrc: logoSrc,
-    src: logoSrc === "default" ? colorsTheme.footer.logo : logoSrc
-  }), _react["default"].createElement("div", null, socialLink)), isResponsivePhone && _react["default"].createElement("div", null, _react["default"].createElement(FooterFooter, {
+  }, _react["default"].createElement(FooterHeader, null, _react["default"].createElement(LogoContainer, null, footerLogo), _react["default"].createElement("div", null, socialLink)), isResponsivePhone && _react["default"].createElement("div", null, _react["default"].createElement(FooterFooter, {
     className: "footerFooter",
     refSize: refSize
   }, _react["default"].createElement(BottomLinks, {
@@ -321,17 +342,23 @@ var Copyright = _styledComponents["default"].div(_templateObject6(), function (p
   return props.theme.bottomLinksDividerSpacing;
 });
 
-var LogoIcon = _styledComponents["default"].img(_templateObject7(), function (props) {
+var LogoContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
+  return props.theme.logoHeight;
+}, function (props) {
+  return props.theme.logoWidth;
+});
+
+var LogoImg = _styledComponents["default"].img(_templateObject8(), function (props) {
   return props.theme.logoHeight;
 }, function (props) {
   return props.theme.logoWidth;
 });
 
-var SocialAnchor = _styledComponents["default"].a(_templateObject8(), function (props) {
+var SocialAnchor = _styledComponents["default"].a(_templateObject9(), function (props) {
   return props.index === 0 ? "0px" : props.theme.socialLinksGutter;
 });
 
-var SocialIcon = _styledComponents["default"].img(_templateObject9(), function (props) {
+var SocialIcon = _styledComponents["default"].img(_templateObject10(), function (props) {
   return props.theme.socialLinksSize;
 }, function (props) {
   return props.theme.socialLinksSize;
@@ -339,7 +366,7 @@ var SocialIcon = _styledComponents["default"].img(_templateObject9(), function (
   return props.theme.socialLinksColor;
 });
 
-var SocialIconContainer = _styledComponents["default"].div(_templateObject10(), function (props) {
+var SocialIconContainer = _styledComponents["default"].div(_templateObject11(), function (props) {
   return props.theme.socialLinksSize;
 }, function (props) {
   return props.theme.socialLinksSize;
@@ -347,11 +374,11 @@ var SocialIconContainer = _styledComponents["default"].div(_templateObject10(),
   return props.theme.socialLinksColor;
 });
 
-var Point = _styledComponents["default"].span(_templateObject11(), function (props) {
+var Point = _styledComponents["default"].span(_templateObject12(), function (props) {
   return props.theme.bottomLinksFontColor;
 });
 
-var BottomLink = _styledComponents["default"].a(_templateObject12(), function (props) {
+var BottomLink = _styledComponents["default"].a(_templateObject13(), function (props) {
   return props.theme.bottomLinksTextDecoration;
 }, function (props) {
   return props.theme.bottomLinksFontColor;
@@ -366,7 +393,6 @@ var BottomLink = _styledComponents["default"].a(_templateObject12(), function (p
 });
 
 DxcFooter.propTypes = {
-  logoSrc: _propTypes["default"].string,
   socialLinks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     logo: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
     logoSrc: _propTypes["default"].string.isRequired,