@dxc-technology/halstack-react 0.0.0-3466161 → 0.0.0-34d2259

package/dist/tag/Tag.js

@@ -30,7 +30,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 var _Box = _interopRequireDefault(require("../box/Box"));
 
 function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 0px 30px;\n  text-transform: ", ";\n  letter-spacing: 0.025em;\n  flex-grow: 1;\n  text-align: center;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  flex-grow: 1;\n  text-align: center;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n"]);
 
   _templateObject8 = function _templateObject8() {
     return data;
@@ -40,7 +40,7 @@ function _templateObject8() {
 }
 
 function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  background: ", ";\n  width: ", ";\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n  height: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  background: ", ";\n  width: ", ";\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n"]);
 
   _templateObject7 = function _templateObject7() {
     return data;
@@ -50,7 +50,7 @@ function _templateObject7() {
 }
 
 function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: 43px;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  img,\n  svg {\n    height: ", ";\n    width: ", ";\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n\n  img,\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"]);
 
   _templateObject6 = function _templateObject6() {
     return data;
@@ -60,7 +60,7 @@ function _templateObject6() {
 }
 
 function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 10px 12px;\n  height: ", ";\n  width: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n"]);
 
   _templateObject5 = function _templateObject5() {
     return data;
@@ -70,7 +70,7 @@ function _templateObject5() {
 }
 
 function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  outline: 0;\n  font-family: inherit;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background: none;\n  border-radius: 4px;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-family: inherit;\n\n  :focus {\n    outline: 2px solid ", ";\n  }\n"]);
 
   _templateObject4 = function _templateObject4() {
     return data;
@@ -80,7 +80,7 @@ function _templateObject4() {
 }
 
 function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: none;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: none;\n  border-radius: 4px;\n\n  :focus {\n    outline: 2px solid ", ";\n    outline-offset: 0px;\n  }\n"]);
 
   _templateObject3 = function _templateObject3() {
     return data;
@@ -100,7 +100,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-style: ", ";\n  display: inline-flex;\n  cursor: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  cursor: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -117,7 +117,7 @@ var DxcTag = function DxcTag(_ref) {
       linkHref = _ref.linkHref,
       onClick = _ref.onClick,
       _ref$iconBgColor = _ref.iconBgColor,
-      iconBgColor = _ref$iconBgColor === void 0 ? "#6f2c91" : _ref$iconBgColor,
+      iconBgColor = _ref$iconBgColor === void 0 ? "#5f249f" : _ref$iconBgColor,
       _ref$labelPosition = _ref.labelPosition,
       labelPosition = _ref$labelPosition === void 0 ? "after" : _ref$labelPosition,
       _ref$newWindow = _ref.newWindow,
@@ -125,7 +125,7 @@ var DxcTag = function DxcTag(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "fitContent" : _ref$size,
       _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 1 : _ref$tabIndex;
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
   var colorsTheme = (0, _useTheme["default"])();
 
   var _useState = (0, _react.useState)(false),
@@ -134,9 +134,7 @@ var DxcTag = function DxcTag(_ref) {
       changeIsHovered = _useState2[1];
 
   var clickHandler = function clickHandler() {
-    if (onClick) {
-      onClick();
-    }
+    onClick && onClick();
   };
 
   var tagContent = _react["default"].createElement(_Box["default"], {
@@ -144,7 +142,6 @@ var DxcTag = function DxcTag(_ref) {
     shadowDepth: isHovered && (onClick || linkHref) && 2 || 1
   }, _react["default"].createElement(TagContent, {
     labelPosition: labelPosition,
-    margin: margin,
     size: size
   }, _react["default"].createElement(IconContainer, {
     iconBgColor: iconBgColor
@@ -185,9 +182,7 @@ var calculateWidth = function calculateWidth(size) {
   return sizes[size];
 };
 
-var StyledDxcTag = _styledComponents["default"].div(_templateObject(), function (props) {
-  return props.theme.fontStyle;
-}, function (_ref2) {
+var StyledDxcTag = _styledComponents["default"].div(_templateObject(), function (_ref2) {
   var hasAction = _ref2.hasAction;
   return hasAction && "pointer" || "unset";
 }, function (_ref3) {
@@ -216,20 +211,24 @@ var TagContent = _styledComponents["default"].div(_templateObject2(), function (
   return props.theme.height;
 });
 
-var StyledLink = _styledComponents["default"].a(_templateObject3());
+var StyledLink = _styledComponents["default"].a(_templateObject3(), function (props) {
+  return props.theme.focusColor;
+});
 
-var StyledButton = _styledComponents["default"].button(_templateObject4());
+var StyledButton = _styledComponents["default"].button(_templateObject4(), function (props) {
+  return props.theme.focusColor;
+});
 
 var TagIcon = _styledComponents["default"].img(_templateObject5(), function (props) {
-  return props.theme.iconHeight;
-}, function (props) {
   return props.theme.iconWidth;
+}, function (props) {
+  return props.theme.iconHeight;
 });
 
 var TagIconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
-  return props.theme.iconHeight;
-}, function (props) {
   return props.theme.iconWidth;
+}, function (props) {
+  return props.theme.iconHeight;
 });
 
 var IconContainer = _styledComponents["default"].div(_templateObject7(), function (_ref9) {
@@ -239,12 +238,26 @@ var IconContainer = _styledComponents["default"].div(_templateObject7(), functio
   return props.theme.iconSectionWidth;
 }, function (props) {
   return props.theme.iconColor;
-}, function (props) {
-  return props.theme.height;
 });
 
 var TagLabel = _styledComponents["default"].div(_templateObject8(), function (props) {
-  return props.theme.fontTextTransform;
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.theme.fontSize;
+}, function (props) {
+  return props.theme.fontStyle;
+}, function (props) {
+  return props.theme.fontWeight;
+}, function (props) {
+  return props.theme.fontColor;
+}, function (props) {
+  return props.theme.labelPaddingTop;
+}, function (props) {
+  return props.theme.labelPaddingBottom;
+}, function (props) {
+  return props.theme.labelPaddingLeft;
+}, function (props) {
+  return props.theme.labelPaddingRight;
 });
 
 DxcTag.propTypes = {
@@ -265,16 +278,5 @@ DxcTag.propTypes = {
   }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
   tabIndex: _propTypes["default"].number
 };
-DxcTag.defaultProps = {
-  icon: null,
-  iconSrc: null,
-  label: null,
-  margin: null,
-  linkHref: null,
-  onClick: null,
-  iconBgColor: "#6f2c91",
-  labelPosition: "after",
-  newWindow: false
-};
 var _default = DxcTag;
 exports["default"] = _default;

package/dist/textarea/Textarea.js

@@ -36,7 +36,7 @@ var _RequiredComponent = _interopRequireDefault(require("../common/RequiredCompo
 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      &:not(.Mui-error)::before,\n      &:not(&.Mui-focused)::before {\n        border-bottom: ", ";\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: 1px;\n          border-color: ", ";\n        }\n        &::after {\n          transform: scaleX(0);\n        }\n      }\n\n      &.Mui-focused {\n        &::after {\n          border-width: 2px;\n          border-color: ", ";\n          transform: scaleX(1);\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: ", ";\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"]);
+  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;
@@ -156,7 +156,7 @@ var TextContainer = _styledComponents["default"].div(_templateObject(), function
 }, function (props) {
   return calculateWidth(props.margin, props.size);
 }, function (props) {
-  return props.theme.assistiveTextFontFamily;
+  return props.theme.fontFamily;
 }, function (props) {
   return props.theme.assistiveTextFontSize;
 }, function (props) {
@@ -176,63 +176,67 @@ var TextContainer = _styledComponents["default"].div(_templateObject(), function
 }, function (props) {
   return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
+  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.labelFontFamily;
+  return props.theme.fontFamily;
 }, function (props) {
   return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
 }, function (props) {
-  return props.theme.labelFontFamily;
+  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.labelFontColorOnDark : props.theme.labelFontColor;
+  return props.backgroundType ? props.theme.underlineColorOnDark : props.theme.underlineColor;
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.assistiveTextFontColorOnDark : props.theme.assistiveTextFontColor;
+  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
 }, function (props) {
-  return "1px solid ".concat(props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor);
+  return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
 }, function (props) {
-  return "1px solid ".concat(props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor);
+  return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
 }, function (props) {
-  return "2px solid ".concat(props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor);
+  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.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
+  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 "1px solid ".concat(props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor, " !important");
+  return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor, " !important");
 }, function (props) {
-  return props.theme.customContentFontFamily;
+  return props.theme.fontFamily;
 }, function (props) {
-  return props.theme.customContentFontSize;
+  return props.theme.valueFontSize;
 }, function (props) {
-  return props.theme.customContentFontStyle;
+  return props.theme.valueFontStyle;
 }, function (props) {
-  return props.theme.customContentFontWeight;
+  return props.theme.valueFontWeight;
 }, function (props) {
-  return props.theme.customContentLetterSpacing;
+  return props.theme.valueLetterSpacing;
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.customContentFontColorOnDark : props.theme.customContentFontColor;
+  return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
 }, function (props) {
-  return props.theme.customContentLineHeight;
+  return props.theme.valueLineHeight;
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
+  return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
+  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.disabledFontColorOnDark : props.theme.disabledFontColor;
+  return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
 });
 
 DxcTextarea.propTypes = {

package/dist/toggle-group/ToggleGroup.js

@@ -27,18 +27,8 @@ var _variables = require("../common/variables.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  overflow: hidden;\n  display: flex;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
 function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  overflow: hidden;\n  display: flex;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"]);
 
   _templateObject5 = function _templateObject5() {
     return data;
@@ -48,7 +38,7 @@ function _templateObject5() {
 }
 
 function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  letter-spacing: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n"]);
 
   _templateObject4 = function _templateObject4() {
     return data;
@@ -58,7 +48,7 @@ function _templateObject4() {
 }
 
 function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  ", "\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"]);
 
   _templateObject3 = function _templateObject3() {
     return data;
@@ -68,7 +58,7 @@ function _templateObject3() {
 }
 
 function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  ", "\n"]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -78,7 +68,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  display: flex;\n  flex-direction: column;\n  opacity: 1;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  display: flex;\n  flex-direction: row;\n  opacity: 1;\n  min-height: 40px;\n"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -123,27 +113,25 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
         }
 
         setSelectedValue(newSelectedOptions);
-      } else {
-        setSelectedValue(selectedOption === selectedValue ? null : selectedOption);
-      }
+      } else setSelectedValue(selectedOption === selectedValue ? null : selectedOption);
     } else if (multiple) {
       newSelectedOptions = value.map(function (v) {
         return v;
       });
-      newSelectedOptions.push(selectedOption);
-    }
 
-    if (typeof onChange === "function") {
-      onChange(multiple ? newSelectedOptions : selectedOption);
+      if (newSelectedOptions.includes(selectedOption)) {
+        var _index = newSelectedOptions.indexOf(selectedOption);
+
+        newSelectedOptions.splice(_index, 1);
+      } else newSelectedOptions.push(selectedOption);
     }
+
+    typeof onChange === "function" && onChange(multiple ? newSelectedOptions : selectedOption);
   };
 
   var handleKeyPress = function handleKeyPress(event, optionValue) {
     event.preventDefault();
-
-    if (!disabled && (event.nativeEvent.code === "Enter" || event.nativeEvent.code === "Space")) {
-      handleToggleChange(optionValue);
-    }
+    if (!disabled && (event.nativeEvent.code === "Enter" || event.nativeEvent.code === "Space")) handleToggleChange(optionValue);
   };
 
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
@@ -151,7 +139,7 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
   }, _react["default"].createElement(ToggleGroup, {
     margin: margin,
     disabled: disabled
-  }, _react["default"].createElement(ToggleGroupContainer, null, options.map(function (option, i) {
+  }, options.map(function (option, i) {
     return _react["default"].createElement(ToggleContainer, {
       selected: multiple ? value ? value.includes(option.value) : selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
       tabIndex: !disabled ? tabIndex : -1,
@@ -171,7 +159,7 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
     }) : _react["default"].createElement(LabelContainer, {
       disabled: disabled
     }, option.label));
-  }))));
+  })));
 };
 
 var ToggleGroup = _styledComponents["default"].div(_templateObject(), function (props) {
@@ -186,13 +174,11 @@ var ToggleGroup = _styledComponents["default"].div(_templateObject(), function (
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
 
-var ToggleGroupContainer = _styledComponents["default"].div(_templateObject2());
-
-var ToggleContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
-  return "\n    background-color: ".concat(props.selected ? props.disabled ? props.theme.disabledSelectedBackgroundColor : props.theme.selectedBackgroundColor : props.disabled ? props.theme.disabledUnselectedBackgroundColor : props.theme.unselectedBackgroundColor, ";\n    &:focus {\n      outline: ").concat(props.theme.focusColor, " auto 1px;\n    }\n    border-radius: ").concat(props.isFirst ? "4px 0 0 4px" : props.isLast ? "0 4px 4px 0" : "0", ";\n    color: ").concat(props.selected ? props.theme.selectedFontColor : props.theme.unselectedFontColor, ";\n    padding: ").concat(props.isIcon ? "".concat(props.theme.iconPaddingTop, " ").concat(props.theme.iconPaddingRight, " ").concat(props.theme.iconPaddingBottom, " ").concat(props.theme.iconPaddingLeft) : "".concat(props.theme.labelPaddingTop, " ").concat(props.theme.labelPaddingRight, " ").concat(props.theme.labelPaddingBottom, " ").concat(props.theme.labelPaddingLeft), ";\n    ").concat(!props.disabled ? "&:hover {\n          background-color: ".concat(props.selected ? props.theme.selectedBackgroundHoverColor : props.theme.unselectedBackgroundHoverColor, ";\n          color: ").concat(props.selected ? props.theme.selectedHoverFontColor : props.theme.unselectedHoverFontColor, " !important;\n        }\n        cursor: pointer;") : "color: ".concat(props.selected ? props.theme.disabledSelectedFontColor : props.theme.disabledUnselectedFontColor, " !important;\n        cursor: not-allowed;"), "\n  ");
+var ToggleContainer = _styledComponents["default"].div(_templateObject2(), function (props) {
+  return "\n    background-color: ".concat(props.selected ? props.disabled ? props.theme.selectedDisabledBackgroundColor : props.theme.selectedBackgroundColor : props.disabled ? props.theme.unselectedDisabledBackgroundColor : props.theme.unselectedBackgroundColor, ";\n    border-radius: ").concat(props.isFirst ? "4px 0 0 4px" : props.isLast ? "0 4px 4px 0" : "0", ";\n    color: ").concat(props.selected ? props.theme.selectedFontColor : props.theme.unselectedFontColor, ";\n    padding: ").concat(props.isIcon ? "".concat(props.theme.iconPaddingTop, " ").concat(props.theme.iconPaddingRight, " ").concat(props.theme.iconPaddingBottom, " ").concat(props.theme.iconPaddingLeft) : "".concat(props.theme.labelPaddingTop, " ").concat(props.theme.labelPaddingRight, " ").concat(props.theme.labelPaddingBottom, " ").concat(props.theme.labelPaddingLeft), ";\n    \n    ").concat(!props.disabled ? ":hover {\n          background-color: ".concat(props.selected ? props.theme.selectedHoverBackgroundColor : props.theme.unselectedHoverBackgroundColor, ";\n        }\n        :active {\n          background-color: ").concat(props.selected ? props.theme.selectedActiveBackgroundColor : props.theme.unselectedActiveBackgroundColor, ";\n          color: #ffffff;\n        }        \n        :focus {\n          outline: ").concat(props.theme.focusColor, " solid 2px;\n          outline-offset: -2px;\n        }\n        cursor: pointer;") : "color: ".concat(props.selected ? props.theme.selectedDisabledFontColor : props.theme.unselectedDisabledFontColor, " !important;\n        cursor: not-allowed;"), "\n  ");
 });
 
-var LabelContainer = _styledComponents["default"].span(_templateObject4(), function (props) {
+var LabelContainer = _styledComponents["default"].span(_templateObject3(), function (props) {
   return props.theme.fontFamily;
 }, function (props) {
   return props.theme.fontSize;
@@ -200,22 +186,18 @@ var LabelContainer = _styledComponents["default"].span(_templateObject4(), funct
   return props.theme.fontStyle;
 }, function (props) {
   return props.theme.fontWeight;
-}, function (props) {
-  return props.theme.fontTextTransform;
-}, function (props) {
-  return props.theme.fontLetterSpacing;
 });
 
-var Icon = _styledComponents["default"].img(_templateObject5(), function (props) {
-  return props.theme.iconHeight;
+var Icon = _styledComponents["default"].img(_templateObject4(), function (props) {
+  return props.theme.iconSize;
 }, function (props) {
-  return props.theme.iconWidth;
+  return props.theme.iconSize;
 });
 
-var IconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
-  return props.theme.iconHeight;
+var IconContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
+  return props.theme.iconSize;
 }, function (props) {
-  return props.theme.iconWidth;
+  return props.theme.iconSize;
 });
 
 DxcToggleGroup.propTypes = {

package/dist/upload/buttons-upload/ButtonsUpload.js

@@ -25,6 +25,8 @@ var _dragDropIcon = _interopRequireDefault(require("./drag-drop-icon.svg"));
 
 var _useTheme = _interopRequireDefault(require("../../useTheme.js"));
 
+var _BackgroundColorContext = require("../../BackgroundColorContext.js");
+
 function _templateObject3() {
   var data = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  mask: url(", ") no-repeat center;\n  mask-size: ", ";\n  height: ", ";\n  width: ", ";\n  margin-right: 5px;\n"]);
 
@@ -77,6 +79,8 @@ var DxcButtonsUpload = function DxcButtonsUpload(_ref) {
 
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.upload
+  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.upload.backgroundColor
   }, _react["default"].createElement(DXCButtonsUpload, null, _react["default"].createElement(DragAndDropLabel, null, _react["default"].createElement(DragAndDropIcon, null), "Drag and Drop area"), _react["default"].createElement(_Button["default"], {
     margin: {
       right: "small"
@@ -97,7 +101,7 @@ var DxcButtonsUpload = function DxcButtonsUpload(_ref) {
     iconPosition: "after",
     iconSrc: _uploadButton["default"],
     onClick: onUpload
-  })));
+  }))));
 };
 
 DxcButtonsUpload.propTypes = {
@@ -124,11 +128,11 @@ var DragAndDropLabel = _styledComponents["default"].div(_templateObject2(), func
 var DragAndDropIcon = _styledComponents["default"].div(_templateObject3(), function (props) {
   return props.theme.dragAndDropAreaIconColor;
 }, _dragDropIcon["default"], function (props) {
-  return "".concat(props.theme.dragAndDropAreaIconWidth, " ").concat(props.theme.dragAndDropAreaIconHeight);
+  return "".concat(props.theme.dragAndDropAreaIconSize, " ").concat(props.theme.dragAndDropAreaIconSize);
 }, function (props) {
-  return props.theme.dragAndDropAreaIconHeight;
+  return props.theme.dragAndDropAreaIconSize;
 }, function (props) {
-  return props.theme.dragAndDropAreaIconWidth;
+  return props.theme.dragAndDropAreaIconSize;
 });
 
 var _default = DxcButtonsUpload;

package/dist/upload/dragAndDropArea/DragAndDropArea.js

@@ -29,6 +29,8 @@ var _Button = _interopRequireDefault(require("../../button/Button"));
 
 var _useTheme = _interopRequireDefault(require("../../useTheme.js"));
 
+var _BackgroundColorContext = require("../../BackgroundColorContext.js");
+
 function _templateObject11() {
   var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-bottom: 10px;\n"]);
 
@@ -206,6 +208,8 @@ var DxcDragAndDropArea = function DxcDragAndDropArea(_ref) {
 
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.upload
+  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.upload.backgroundColor
   }, _react["default"].createElement(DXCDragAndDrop, {
     onDrop: handleDrop,
     onDragEnter: handleDragIn,
@@ -237,7 +241,7 @@ var DxcDragAndDropArea = function DxcDragAndDropArea(_ref) {
     style: {
       display: "none"
     }
-  })))), dragging && _react["default"].createElement(DragAndDropContentHover, null, _react["default"].createElement(DragAndDropTextHover, null, textHover), _react["default"].createElement(DragAndDropIconHover, null))));
+  })))), dragging && _react["default"].createElement(DragAndDropContentHover, null, _react["default"].createElement(DragAndDropTextHover, null, textHover), _react["default"].createElement(DragAndDropIconHover, null)))));
 };
 
 DxcDragAndDropArea.propTypes = {
@@ -260,11 +264,11 @@ var DragAndDropContent = _styledComponents["default"].div(_templateObject3());
 var DragAndDropIcon = _styledComponents["default"].div(_templateObject4(), function (props) {
   return props.theme.dragAndDropIconColor;
 }, _upload_file["default"], function (props) {
-  return "".concat(props.theme.dragAndDropIconWidth, " ").concat(props.theme.dragAndDropIconHeight);
+  return "".concat(props.theme.dragAndDropIconSize, " ").concat(props.theme.dragAndDropIconSize);
 }, function (props) {
-  return props.theme.dragAndDropIconHeight;
+  return props.theme.dragAndDropIconSize;
 }, function (props) {
-  return props.theme.dragAndDropIconWidth;
+  return props.theme.dragAndDropIconSize;
 });
 
 var DragAndDropText = _styledComponents["default"].div(_templateObject5());
@@ -288,25 +292,25 @@ var DragAndDropDescription = _styledComponents["default"].div(_templateObject7()
 }, function (props) {
   return props.theme.dragAndDropDescriptionFontWeight;
 }, function (props) {
-  return props.theme.dragAndDropTextDescriptionFontTextTransform;
+  return props.theme.dragAndDropDescriptionFontTextTransform;
 }, function (props) {
-  return props.theme.dragAndDropTextDescriptionFontColor;
+  return props.theme.dragAndDropDescriptionFontColor;
 });
 
 var ButtonChooseFiles = _styledComponents["default"].div(_templateObject8());
 
 var DragAndDropContentHover = _styledComponents["default"].div(_templateObject9(), function (props) {
-  return props.theme.draggingAreaBackgroundColor;
+  return props.theme.draggingStateBackgroundColor;
 });
 
 var DragAndDropIconHover = _styledComponents["default"].div(_templateObject10(), function (props) {
   return props.theme.dragAndDropDraggingStateIconColor;
 }, _upload_drop["default"], function (props) {
-  return "".concat(props.theme.dragAndDropDraggingStateIconWidth, " ").concat(props.theme.dragAndDropDraggingStateIconHeight);
+  return "".concat(props.theme.dragAndDropDraggingStateIconSize, " ").concat(props.theme.dragAndDropDraggingStateIconSize);
 }, function (props) {
-  return props.theme.dragAndDropDraggingStateIconHeight;
+  return props.theme.dragAndDropDraggingStateIconSize;
 }, function (props) {
-  return props.theme.dragAndDropDraggingStateIconWidth;
+  return props.theme.dragAndDropDraggingStateIconSize;
 });
 
 var DragAndDropTextHover = _styledComponents["default"].div(_templateObject11(), function (props) {
@@ -316,9 +320,9 @@ var DragAndDropTextHover = _styledComponents["default"].div(_templateObject11(),
 }, function (props) {
   return props.theme.dragAndDropDraggingStateFontWeight;
 }, function (props) {
-  return props.theme.dragAndDropTextDraggingStateFontTextTransform;
+  return props.theme.dragAndDropDraggingStateFontTextTransform;
 }, function (props) {
-  return props.theme.dragAndDropTextDraggingStateFontColor;
+  return props.theme.dragAndDropDraggingStateFontColor;
 });
 
 var _default = DxcDragAndDropArea;

package/dist/upload/file-upload/FileToUpload.js

@@ -137,7 +137,7 @@ var DXCFileToUpload = _styledComponents["default"].div(_templateObject(), functi
 }, function (props) {
   return props.theme.fileUnderlineColor;
 }, function (props) {
-  return props.theme.fileHoverColor;
+  return props.theme.hoverFileColor;
 });
 
 var FileContent = _styledComponents["default"].div(_templateObject2());
@@ -173,11 +173,11 @@ var FileType = _styledComponents["default"].div(_templateObject6(), function (pr
 var DeleteFile = _styledComponents["default"].button(_templateObject7(), function (props) {
   return props.theme.fileDeleteIconColor;
 }, _close["default"], function (props) {
-  return "".concat(props.theme.fileDeleteIconWidth, " ").concat(props.theme.fileDeleteIconHeight);
+  return "".concat(props.theme.fileDeleteIconSize, " ").concat(props.theme.fileDeleteIconSize);
 }, function (props) {
-  return props.theme.fileDeleteIconHeight;
+  return props.theme.fileDeleteIconSize;
 }, function (props) {
-  return props.theme.fileDeleteIconWidth;
+  return props.theme.fileDeleteIconSize;
 });
 
 var _default = DxcFileToUpload;