@dxc-technology/halstack-react 0.0.0-b1729d7 → 0.0.0-b3de035

package/dist/{new-select → select}/index.d.ts

@@ -50,4 +50,4 @@ type Props = {
   ref?: React.RefObject<HTMLDivElement>;
 };
 
-export default function DxcNewSelect(props: Props): JSX.Element;
+export default function DxcSelect(props: Props): JSX.Element;

package/dist/sidenav/index.d.ts

@@ -0,0 +1,13 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Padding = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  padding?: Space | Padding;
+};
+
+export default function DxcSidenav(props: Props): JSX.Element;

package/dist/slider/index.d.ts

@@ -0,0 +1,29 @@
+type Size = "small" | "medium" | "large" | "fillParent";
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  label?: string;
+  helperText?: string;
+  minValue?: number;
+  maxValue?: number;
+  step?: number;
+  value?: number;
+  showLimitsValues?: boolean;
+  showInput?: boolean;
+  name?: string;
+  onChange?: void;
+  onDragEnd?: void;
+  disabled?: boolean;
+  marks?: boolean;
+  labelFormatCallback?: void;
+  margin?: Space | Margin;
+  size?: Size;
+};
+
+export default function DxcSlider(props: Props): JSX.Element;

package/dist/spinner/index.d.ts

@@ -0,0 +1,17 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  label?: string;
+  value?: number;
+  showValue?: boolean;
+  mode?: "large" | "small" | "overlay";
+  margin?: Space | Margin;
+};
+
+export default function DxcSpinner(props: Props): JSX.Element;

package/dist/switch/index.d.ts

@@ -0,0 +1,24 @@
+type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  checked?: boolean;
+  value?: any;
+  label?: string;
+  labelPosition?: "before" | "after";
+  name?: string,
+  disabled?: boolean;
+  onChange?: void;
+  required?: boolean;
+  margin?: Space | Margin;
+  size?: Size;
+  tabIndex?: number;
+};
+
+export default function DxcSwitch(props: Props): JSX.Element;

package/dist/table/index.d.ts

@@ -0,0 +1,13 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  margin?: Space | Margin;
+};
+
+export default function DxcTable(props: Props): JSX.Element;

package/dist/tabs/index.d.ts

@@ -0,0 +1,19 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  activeTabIndex?: number;
+  tabs?: any;
+  onTabClick?: void;
+  onTabHover?: void;
+  iconPosition?: "top" | "left";
+  margin?: Space | Margin;
+  tabIndex?: number;
+};
+
+export default function DxcTabs(props: Props): JSX.Element;

package/dist/tag/index.d.ts

@@ -0,0 +1,24 @@
+type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  icon?: any;
+  iconSrc?: string;
+  label?: string;
+  linkHref?: string;
+  onClick?: void,
+  iconBgColor?: string;
+  labelPosition?: "before" | "after";
+  newWindow?: boolean;
+  margin?: Space | Margin;
+  size?: Size;
+  tabIndex?: number;
+};
+
+export default function DxcTag(props: Props): JSX.Element;

package/dist/text-input/TextInput.js

@@ -126,7 +126,7 @@ function _templateObject9() {
 }
 
 function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  font-size: 1rem;\n  font-family: ", ";\n  border: 1px solid transparent;\n  border-radius: 4px;\n  padding: 3px;\n  margin-left: calc(1rem * 0.25);\n  ", "\n\n  box-shadow: 0 0 0 2px transparent;\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  svg {\n    line-height: 18px;\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  font-size: 1rem;\n  font-family: ", ";\n  border: 1px solid transparent;\n  border-radius: 2px;\n  padding: 3px;\n  margin-left: calc(1rem * 0.25);\n  ", "\n\n  box-shadow: 0 0 0 2px transparent;\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  svg {\n    line-height: 18px;\n  }\n"]);
 
   _templateObject8 = function _templateObject8() {
     return data;
@@ -243,6 +243,8 @@ var patternMatch = function patternMatch(pattern, value) {
 };
 
 var DxcTextInput = _react["default"].forwardRef(function (_ref, ref) {
+  var _action$title;
+
   var _ref$label = _ref.label,
       label = _ref$label === void 0 ? "" : _ref$label,
       _ref$name = _ref.name,
@@ -649,11 +651,11 @@ var DxcTextInput = _react["default"].forwardRef(function (_ref, ref) {
     var noMatchedWords = suggestion.replace(regEx, "");
     return _react["default"].createElement(Suggestion, {
       id: "suggestion-".concat(index),
-      onMouseDown: function onMouseDown() {
-        changeIsActiveSuggestion(true);
+      onMouseDown: function onMouseDown(event) {
+        event.button === 0 && changeIsActiveSuggestion(true);
       },
-      onMouseUp: function onMouseUp() {
-        if (isActiveSuggestion) {
+      onMouseUp: function onMouseUp(event) {
+        if (event.button === 0 && isActiveSuggestion) {
           changeValue(suggestion);
           changeIsActiveSuggestion(false);
           closeSuggestions();
@@ -745,6 +747,7 @@ var DxcTextInput = _react["default"].forwardRef(function (_ref, ref) {
     ref: actionRef,
     disabled: disabled,
     onClick: action.onClick,
+    title: (_action$title = action.title) !== null && _action$title !== void 0 ? _action$title : action.title,
     backgroundType: backgroundType,
     tabIndex: tabIndex
   }, typeof action.icon === "string" ? _react["default"].createElement(ActionIcon, {

package/dist/toggle/index.d.ts

@@ -0,0 +1,21 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  label?: string;
+  helperText?: string;
+  value?: any;
+  onChange?: void;
+  disabled?: boolean,
+  options?: any;
+  multiple?: boolean;
+  margin?: Space | Margin;
+  tabIndex?: number;
+};
+
+export default function DxcToggle(props: Props): JSX.Element;

package/dist/toggle-group/index.d.ts

@@ -0,0 +1,21 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  label?: string;
+  helperText?: string;
+  value?: any;
+  onChange?: void;
+  disabled?: boolean;
+  options?: any;
+  multiple?: boolean;
+  margin?: Space | Margin;
+  tabIndex?: number;
+};
+
+export default function DxcToggleGroup(props: Props): JSX.Element;

package/dist/upload/Upload.js

@@ -41,7 +41,7 @@ function _templateObject() {
   return data;
 }
 
-var V3DxcUpload = function V3DxcUpload(_ref) {
+var DxcUpload = function DxcUpload(_ref) {
   var callbackUpload = _ref.callbackUpload,
       margin = _ref.margin,
       _ref$tabIndex = _ref.tabIndex,
@@ -178,7 +178,7 @@ var V3DxcUpload = function V3DxcUpload(_ref) {
   }));
 };
 
-V3DxcUpload.propTypes = {
+DxcUpload.propTypes = {
   callbackUpload: _propTypes["default"].func,
   margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
     top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
@@ -201,5 +201,5 @@ var DXCUpload = _styledComponents["default"].div(_templateObject(), function (pr
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
 
-var _default = V3DxcUpload;
+var _default = DxcUpload;
 exports["default"] = _default;

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

@@ -19,16 +19,14 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _Button = _interopRequireDefault(require("../../button/Button"));
 
-var _uploadButton = _interopRequireDefault(require("./upload-button.svg"));
-
-var _dragDropIcon = _interopRequireDefault(require("./drag-drop-icon.svg"));
+var _Icons = require("./Icons");
 
 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"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  margin-right: 5px;\n  & svg {\n    fill: ", ";\n  }\n"]);
 
   _templateObject3 = function _templateObject3() {
     return data;
@@ -81,7 +79,7 @@ var DxcButtonsUpload = function DxcButtonsUpload(_ref) {
     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"], {
+  }, _react["default"].createElement(DXCButtonsUpload, null, _react["default"].createElement(DragAndDropLabel, null, _react["default"].createElement(DragAndDropIconContainer, null, _Icons.dragAndDropIcon), "Drag and Drop area"), _react["default"].createElement(_Button["default"], {
     margin: {
       right: "small"
     },
@@ -99,7 +97,7 @@ var DxcButtonsUpload = function DxcButtonsUpload(_ref) {
   }), _react["default"].createElement(_Button["default"], {
     label: "UPLOAD",
     iconPosition: "after",
-    iconSrc: _uploadButton["default"],
+    icon: _Icons.uploadIcon,
     onClick: onUpload
   }))));
 };
@@ -125,14 +123,12 @@ var DragAndDropLabel = _styledComponents["default"].div(_templateObject2(), func
   return props.theme.dragAndDropAreaTextFontColor;
 });
 
-var DragAndDropIcon = _styledComponents["default"].div(_templateObject3(), function (props) {
-  return props.theme.dragAndDropAreaIconColor;
-}, _dragDropIcon["default"], function (props) {
-  return "".concat(props.theme.dragAndDropAreaIconSize, " ").concat(props.theme.dragAndDropAreaIconSize);
-}, function (props) {
+var DragAndDropIconContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
   return props.theme.dragAndDropAreaIconSize;
 }, function (props) {
   return props.theme.dragAndDropAreaIconSize;
+}, function (props) {
+  return props.theme.dragAndDropAreaIconColor;
 });
 
 var _default = DxcButtonsUpload;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dragAndDropIcon = exports.uploadIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var uploadIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#FFFFFF"
+}, _react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}), _react["default"].createElement("path", {
+  d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"
+}));
+
+exports.uploadIcon = uploadIcon;
+
+var dragAndDropIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#666666"
+}, _react["default"].createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0V0z"
+}), _react["default"].createElement("path", {
+  d: "M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"
+}));
+
+exports.dragAndDropIcon = dragAndDropIcon;

package/dist/upload/dragAndDropArea/DragAndDropArea.js

@@ -19,11 +19,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-require("../../common/variables.js");
-
-var _upload_file = _interopRequireDefault(require("./upload_file.svg"));
-
-var _upload_drop = _interopRequireDefault(require("./upload_drop.svg"));
+var _Icons = require("./Icons");
 
 var _Button = _interopRequireDefault(require("../../button/Button"));
 
@@ -42,7 +38,7 @@ function _templateObject11() {
 }
 
 function _templateObject10() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  mask: url(", ") no-repeat center;\n  mask-size: ", ";\n  height: ", ";\n  width: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  & svg {\n    fill: ", ";\n    height: ", ";\n    width: ", ";\n  }\n"]);
 
   _templateObject10 = function _templateObject10() {
     return data;
@@ -102,7 +98,7 @@ function _templateObject5() {
 }
 
 function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  mask: url(", ") no-repeat center;\n  mask-size: ", ";\n  height: ", ";\n  width: ", ";\n  margin-bottom: 20px;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  margin-bottom: 20px;\n  & svg {\n    fill: ", ";\n    height: ", ";\n    width: ", ";\n  }\n"]);
 
   _templateObject4 = function _templateObject4() {
     return data;
@@ -216,7 +212,7 @@ var DxcDragAndDropArea = function DxcDragAndDropArea(_ref) {
     onDragOver: handleDrag,
     onDragLeave: handleDragOut,
     dashed: dashed
-  }, !dragging && !dashed && _react["default"].createElement(DXCDragAndDropArea, null, _react["default"].createElement(DragAndDropContent, null, _react["default"].createElement(DragAndDropIcon, null), _react["default"].createElement(DragAndDropText, null, _react["default"].createElement(DragAndDropTitle, null, text), _react["default"].createElement(DragAndDropDescription, null, description)), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
+  }, !dragging && !dashed && _react["default"].createElement(DXCDragAndDropArea, null, _react["default"].createElement(DragAndDropContent, null, _react["default"].createElement(DragAndDropIcon, null, _Icons.uploadFileIcon), _react["default"].createElement(DragAndDropText, null, _react["default"].createElement(DragAndDropTitle, null, text), _react["default"].createElement(DragAndDropDescription, null, description)), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
     label: "CHOOSE FILES",
     onClick: handleClick,
     tabIndex: tabIndexValue
@@ -228,7 +224,7 @@ var DxcDragAndDropArea = function DxcDragAndDropArea(_ref) {
     style: {
       display: "none"
     }
-  })))), !dragging && dashed && _react["default"].createElement(DragAndDropContentHover, null, _react["default"].createElement(DragAndDropContent, null, _react["default"].createElement(DragAndDropIcon, null), _react["default"].createElement(DragAndDropText, null, _react["default"].createElement(DragAndDropTitle, null, text), _react["default"].createElement(DragAndDropDescription, null, description)), _react["default"].createElement(ButtonChooseFiles, null, _react["default"].createElement(_Button["default"], {
+  })))), !dragging && dashed && _react["default"].createElement(DragAndDropContentHover, null, _react["default"].createElement(DragAndDropContent, null, _react["default"].createElement(DragAndDropIcon, null, _Icons.uploadFileIcon), _react["default"].createElement(DragAndDropText, null, _react["default"].createElement(DragAndDropTitle, null, text), _react["default"].createElement(DragAndDropDescription, null, description)), _react["default"].createElement(ButtonChooseFiles, null, _react["default"].createElement(_Button["default"], {
     theme: "light",
     label: "CHOOSE FILES",
     onClick: handleClick,
@@ -241,7 +237,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, _Icons.dropFileIcon)))));
 };
 
 DxcDragAndDropArea.propTypes = {
@@ -262,9 +258,11 @@ var DXCDragAndDropArea = _styledComponents["default"].div(_templateObject2(), fu
 var DragAndDropContent = _styledComponents["default"].div(_templateObject3());
 
 var DragAndDropIcon = _styledComponents["default"].div(_templateObject4(), function (props) {
+  return props.theme.dragAndDropIconSize;
+}, function (props) {
+  return props.theme.dragAndDropIconSize;
+}, function (props) {
   return props.theme.dragAndDropIconColor;
-}, _upload_file["default"], function (props) {
-  return "".concat(props.theme.dragAndDropIconSize, " ").concat(props.theme.dragAndDropIconSize);
 }, function (props) {
   return props.theme.dragAndDropIconSize;
 }, function (props) {
@@ -304,9 +302,11 @@ var DragAndDropContentHover = _styledComponents["default"].div(_templateObject9(
 });
 
 var DragAndDropIconHover = _styledComponents["default"].div(_templateObject10(), function (props) {
+  return props.theme.dragAndDropDraggingStateIconSize;
+}, function (props) {
+  return props.theme.dragAndDropDraggingStateIconSize;
+}, function (props) {
   return props.theme.dragAndDropDraggingStateIconColor;
-}, _upload_drop["default"], function (props) {
-  return "".concat(props.theme.dragAndDropDraggingStateIconSize, " ").concat(props.theme.dragAndDropDraggingStateIconSize);
 }, function (props) {
   return props.theme.dragAndDropDraggingStateIconSize;
 }, function (props) {

package/dist/upload/dragAndDropArea/Icons.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uploadFileIcon = exports.dropFileIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var dropFileIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "74.5",
+  height: "74.5",
+  viewBox: "0 0 24 24",
+  fill: "#666666"
+}, _react["default"].createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0z"
+}), _react["default"].createElement("path", {
+  d: "M11 5v5.59H7.5l4.5 4.5 4.5-4.5H13V5h-2zm-5 9c0 3.31 2.69 6 6 6s6-2.69 6-6h-2c0 2.21-1.79 4-4 4s-4-1.79-4-4H6z"
+}));
+
+exports.dropFileIcon = dropFileIcon;
+
+var uploadFileIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "43.5",
+  height: "43.5",
+  viewBox: "0 0 24 24"
+}, _react["default"].createElement("path", {
+  d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"
+}), _react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}));
+
+exports.uploadFileIcon = uploadFileIcon;

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

@@ -17,18 +17,22 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _close = _interopRequireDefault(require("./close.svg"));
+var _Icons = require("./Icons");
 
-var _fileIcon = _interopRequireDefault(require("./file-icon.svg"));
+var _useTheme = _interopRequireDefault(require("../../useTheme.js"));
 
-var _videoIcon = _interopRequireDefault(require("./video-icon.svg"));
+function _templateObject8() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  border: none;\n  display: flex;\n  margin-right: 30px;\n  margin-top: 11px;\n  padding: 0px;\n  background: none;\n  &:focus {\n    visibility: visible;\n  }\n  & svg {\n    fill: ", ";\n    height: ", ";\n    width: ", ";\n  }\n"]);
 
-var _audioIcon = _interopRequireDefault(require("./audio-icon.svg"));
+  _templateObject8 = function _templateObject8() {
+    return data;
+  };
 
-var _useTheme = _interopRequireDefault(require("../../useTheme.js"));
+  return data;
+}
 
 function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  mask: url(", ") no-repeat center;\n  mask-size: ", ";\n  height: ", ";\n  width: ", ";\n  border: none;\n  display: flex;\n  margin-right: 30px;\n  margin-top: 11px;\n  &:focus {\n    visibility: visible;\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n"]);
 
   _templateObject7 = function _templateObject7() {
     return data;
@@ -38,7 +42,7 @@ function _templateObject7() {
 }
 
 function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-bottom: 12px;\n"]);
 
   _templateObject6 = function _templateObject6() {
     return data;
@@ -48,7 +52,7 @@ function _templateObject6() {
 }
 
 function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-bottom: 12px;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n"]);
 
   _templateObject5 = function _templateObject5() {
     return data;
@@ -58,7 +62,7 @@ function _templateObject5() {
 }
 
 function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 30px;\n  width: 70px;\n  height: 52px;\n  & svg {\n    width: 70px;\n    height: 52px;\n  }\n"]);
 
   _templateObject4 = function _templateObject4() {
     return data;
@@ -106,7 +110,7 @@ var DxcFileToUpload = function DxcFileToUpload(_ref) {
       onDelete = _ref.onDelete,
       tabIndexValue = _ref.tabIndexValue;
 
-  var icon = type.includes("video") && _videoIcon["default"] || type.includes("audio") && _audioIcon["default"] || _fileIcon["default"];
+  var icon = type.includes("video") && _Icons.videoIcon || type.includes("audio") && _Icons.audioIcon || _Icons.defaultIcon;
 
   var hasImage = image && image.includes("image");
   var colorsTheme = (0, _useTheme["default"])();
@@ -114,13 +118,10 @@ var DxcFileToUpload = function DxcFileToUpload(_ref) {
     theme: colorsTheme.upload
   }, _react["default"].createElement(DXCFileToUpload, null, _react["default"].createElement(FileContent, null, hasImage && _react["default"].createElement(FileImage, {
     src: image
-  }) || _react["default"].createElement(FileImage, {
-    src: icon
-  }), _react["default"].createElement(FileInfo, null, _react["default"].createElement(FileName, null, name), _react["default"].createElement(FileType, null, type)), _react["default"].createElement(DeleteFile, {
-    className: "delete-file",
+  }) || _react["default"].createElement(FileIconContainer, null, icon), _react["default"].createElement(FileInfo, null, _react["default"].createElement(FileName, null, name), _react["default"].createElement(FileType, null, type)), _react["default"].createElement(DeleteFile, {
     onClick: onDelete,
     tabIndex: tabIndexValue
-  }))));
+  }, _Icons.closeIcon))));
 };
 
 DxcFileToUpload.propTypes = {
@@ -144,9 +145,11 @@ var FileContent = _styledComponents["default"].div(_templateObject2());
 
 var FileImage = _styledComponents["default"].img(_templateObject3());
 
-var FileInfo = _styledComponents["default"].div(_templateObject4());
+var FileIconContainer = _styledComponents["default"].div(_templateObject4());
+
+var FileInfo = _styledComponents["default"].div(_templateObject5());
 
-var FileName = _styledComponents["default"].div(_templateObject5(), function (props) {
+var FileName = _styledComponents["default"].div(_templateObject6(), function (props) {
   return props.theme.fileNameFontSize;
 }, function (props) {
   return props.theme.fileNameFontStyle;
@@ -158,7 +161,7 @@ var FileName = _styledComponents["default"].div(_templateObject5(), function (pr
   return props.theme.fileNameFontColor;
 });
 
-var FileType = _styledComponents["default"].div(_templateObject6(), function (props) {
+var FileType = _styledComponents["default"].div(_templateObject7(), function (props) {
   return props.theme.fileTypeFontSize;
 }, function (props) {
   return props.theme.fileTypeFontStyle;
@@ -170,10 +173,12 @@ var FileType = _styledComponents["default"].div(_templateObject6(), function (pr
   return props.theme.fileTypeFontColor;
 });
 
-var DeleteFile = _styledComponents["default"].button(_templateObject7(), function (props) {
+var DeleteFile = _styledComponents["default"].button(_templateObject8(), function (props) {
+  return props.theme.fileDeleteIconSize;
+}, function (props) {
+  return props.theme.fileDeleteIconSize;
+}, function (props) {
   return props.theme.fileDeleteIconColor;
-}, _close["default"], function (props) {
-  return "".concat(props.theme.fileDeleteIconSize, " ").concat(props.theme.fileDeleteIconSize);
 }, function (props) {
   return props.theme.fileDeleteIconSize;
 }, function (props) {