@dxc-technology/halstack-react 0.0.0-e628009 → 0.0.0-e961efe

package/dist/box/index.d.ts

@@ -0,0 +1,25 @@
+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 Padding = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+
+type Props = {
+  shadowDepth?: 0 | 1 | 2;
+  margin?: Space | Margin;
+  padging?: Space | Padding;
+  display: string;
+  size: Size;
+};
+
+export default function DxcBox(props: Props): JSX.Element;

package/dist/button/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 = {
+  label?: string;
+  mode?: "primary" | "secondary" | "text";
+  disabled?: boolean;
+  iconPosition?: "before" | "after";
+  type?: "button" | "reset" | "submit";
+  iconSrc?: string;
+  icon?: any;
+  onClick?: void;
+  margin?: Space | Margin;
+  size?: Size;
+  tabIndex?: number;
+};
+
+export default function DxcButton(props: Props): JSX.Element;

package/dist/card/index.d.ts

@@ -0,0 +1,22 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  imageSrc?: string;
+  margin?: Space | Margin;
+  contentPadding?: any;
+  linkHref?: string;
+  onClick?: void;
+  imageBgColor?: string;
+  imagePadding?: any;
+  imagePosition?: "before" | "after";
+  outlined?: boolean; 
+  imageCover?: boolean;
+};
+
+export default function DxcCard(props: Props): JSX.Element;

package/dist/checkbox/Checkbox.js

@@ -46,7 +46,7 @@ function _templateObject3() {
 }
 
 function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  width: ", ";\n  display: inline-flex;\n  align-items: center;\n  cursor: ", ";\n  position: relative;\n  flex-direction: ", ";\n  .MuiCheckbox-colorSecondary {\n    .MuiIconButton-label {\n      & > .MuiSvgIcon-root {\n        color: ", ";\n      }\n    }\n    &.Mui-disabled {\n      .MuiIconButton-label {\n        & > .MuiSvgIcon-root {\n          color: ", ";\n          opacity: 0.34;\n        }\n      }\n    }\n    &.Mui-checked {\n      .MuiIconButton-label {\n        & > .MuiSvgIcon-root {\n          color: ", ";\n        }\n      }\n\n      &:hover {\n        background-color: transparent;\n        .MuiIconButton-label {\n          & > .MuiSvgIcon-root {\n            background-color: transparent;\n            color: ", ";\n          }\n        }\n      }\n    }\n    .MuiIconButton-label {\n      & > .MuiSvgIcon-root {\n        width: 24px;\n        height: 24px;\n      }\n    }\n  }\n\n  .MuiIconButton-colorSecondary {\n    &:hover {\n      background-color: transparent;\n    }\n  }\n  .MuiButtonBase-root {\n    &:hover {\n      .MuiIconButton-label {\n        & > .MuiSvgIcon-root {\n          color: ", ";\n        }\n      }\n    }\n\n    &.Mui-focusVisible {\n      .MuiIconButton-label {\n        box-shadow: 0 0 0 2px\n          ", ";\n      }\n    }\n    z-index: 1;\n    margin: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    padding: 0px;\n    left: ", ";\n    right: ", ";\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  width: ", ";\n  display: inline-flex;\n  align-items: center;\n  cursor: ", ";\n  position: relative;\n  flex-direction: ", ";\n  .MuiCheckbox-colorSecondary {\n    .MuiIconButton-label {\n      & > .MuiSvgIcon-root {\n        color: ", ";\n      }\n    }\n    &.Mui-disabled {\n      .MuiIconButton-label {\n        & > .MuiSvgIcon-root {\n          color: ", ";\n          opacity: 0.34;\n        }\n      }\n    }\n    &.Mui-checked {\n      .MuiIconButton-label {\n        & > .MuiSvgIcon-root {\n          color: ", ";\n        }\n      }\n\n      &:hover {\n        background-color: transparent;\n        .MuiIconButton-label {\n          & > .MuiSvgIcon-root {\n            background-color: transparent;\n            color: ", ";\n          }\n        }\n      }\n    }\n    .MuiIconButton-label {\n      & > .MuiSvgIcon-root {\n        width: 24px;\n        height: 24px;\n      }\n    }\n  }\n\n  .MuiIconButton-colorSecondary {\n    &:hover {\n      background-color: transparent;\n    }\n  }\n  .MuiButtonBase-root {\n    &:hover {\n      .MuiIconButton-label {\n        & > .MuiSvgIcon-root {\n          color: ", ";\n        }\n      }\n    }\n\n    &.Mui-focusVisible {\n      .MuiIconButton-label {\n        box-shadow: 0 0 0 2px\n          ", ";\n      }\n    }\n    z-index: 1;\n    margin-left: ", ";\n    margin-right: ", ";\n    padding: 0px;\n    left: ", ";\n    right: ", ";\n  }\n"]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -122,6 +122,7 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
   }, _react["default"].createElement(CheckboxContainer, {
     id: name,
     brightness: _variables.componentTokens,
+    label: label,
     labelPosition: labelPosition,
     disabled: disabled,
     margin: margin,
@@ -255,11 +256,9 @@ var CheckboxContainer = _styledComponents["default"].span(_templateObject2(), fu
 }, function (props) {
   return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
 }, function (props) {
-  return props.theme.checkLabelSpacing;
+  return props.labelPosition === "before" && props.label ? props.theme.checkLabelSpacing : "0";
 }, function (props) {
-  return props.labelPosition === "after" ? "0px" : "";
-}, function (props) {
-  return props.labelPosition === "before" ? "0px" : "";
+  return props.labelPosition === "after" && props.label ? props.theme.checkLabelSpacing : "0";
 }, function (props) {
   return props.labelPosition === "before" ? "unset" : "1px";
 }, function (props) {

package/dist/checkbox/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 DxcCheckbox(props: Props): JSX.Element;

package/dist/chip/index.d.ts

@@ -0,0 +1,22 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  label?: string;
+  suffixIcon?: any;
+  preffixIcon?: any;
+  suffixIconSrc?: string;
+  onClickSuffix?: void;
+  prefixIconSrc?: string;
+  onClickPrefix?: void;
+  disabled?: boolean;
+  margin?: Space | Margin;
+  tabIndex?: number;
+};
+
+export default function DxcChip(props: Props): JSX.Element;

package/dist/common/variables.js

@@ -40,6 +40,7 @@ var globalTokens = {
   hal_blue_l_45: "#0086e6",
   hal_blue_s_35: "#0067b3",
   hal_blue_d_20: "#003c66",
+  color_blue_200: "#cceaff",
   color_blue_500: "#33AAFF",
   color_blue_50: "#f5fbff",
   hal_red_l_95: "#ffe6e9",
@@ -50,6 +51,7 @@ var globalTokens = {
   hal_red_d_20: "#65010e",
   color_red_700: "#ffccd3",
   color_red_50: "#FFF5F6",
+  color_red_600: "#fe0123",
   hal_green_l_95: "#eafaef",
   hal_green_l_80: "#acecbe",
   hal_green_s_39: "#24a148",
@@ -539,7 +541,11 @@ var componentTokens = {
     dropBorderRadius: globalTokens.border_radius_large,
     fileItemBorderThickness: globalTokens.border_width_1,
     fileItemBorderStyle: globalTokens.border_solid,
-    fileItemBorderRadius: globalTokens.border_radius_medium
+    fileItemBorderRadius: globalTokens.border_radius_medium,
+    hoverDeleteFileItemBackgroundColor: globalTokens.hal_grey_l_95,
+    activeDeleteFileItemBackgroundColor: globalTokens.hal_grey_l_80,
+    errorHoverDeleteFileItemBackgroundColor: globalTokens.hal_red_l_95,
+    errorActiveDeleteFileItemBackgroundColor: globalTokens.hal_red_s_41
   },
   footer: {
     height: "124px",
@@ -595,7 +601,9 @@ var componentTokens = {
     paddingLeft: "24px",
     underlinedColor: globalTokens.hal_black,
     underlinedThickness: "2px",
-    underlinedStyle: "solid"
+    underlinedStyle: "solid",
+    contentColor: globalTokens.hal_black,
+    contentColorOnDark: globalTokens.hal_white
   },
   heading: {
     level1FontColor: globalTokens.inherit,
@@ -707,7 +715,7 @@ var componentTokens = {
     disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
     errorBorderColor: globalTokens.hal_red_s_41,
     errorBorderColorOnDark: globalTokens.hal_red_l_60,
-    hoverErrorBorderColor: "#fe0123",
+    hoverErrorBorderColor: globalTokens.color_red_600,
     hoverErrorBorderColorOnDark: "#fe677b",
     errorMessageColor: globalTokens.hal_red_s_41,
     errorMessageColorOnDark: globalTokens.hal_red_l_60,
@@ -866,6 +874,87 @@ var componentTokens = {
     fontWeight: globalTokens.type_regular
   },
   select: {
+    fontFamily: globalTokens.type_sans,
+    disabledColor: globalTokens.hal_grey_l_60,
+    enabledInputBorderColor: globalTokens.hal_black,
+    hoverInputBorderColor: globalTokens.hal_purple_l_65,
+    focusInputBorderColor: globalTokens.hal_blue_l_50,
+    errorInputBorderColor: globalTokens.hal_red_s_41,
+    hoverInputErrorBorderColor: globalTokens.color_red_600,
+    disabledInputBorderColor: globalTokens.hal_grey_l_60,
+    errorColor: globalTokens.hal_red_s_41,
+    labelFontColor: globalTokens.hal_black,
+    labelFontSize: globalTokens.type_scale_02,
+    labelFontStyle: globalTokens.type_normal,
+    labelFontWeight: globalTokens.type_semibold,
+    labelLineHeight: globalTokens.type_leading_loose_01,
+    optionalLabelFontWeight: globalTokens.type_regular,
+    // new
+    helperTextFontColor: globalTokens.hal_black,
+    helperTextFontSize: globalTokens.type_scale_01,
+    helperTextFontStyle: globalTokens.type_normal,
+    helperTextFontWeight: globalTokens.type_regular,
+    helperTextLineHeight: globalTokens.type_leading_normal,
+    placeholderFontColor: "#000000b3",
+    valueFontColor: globalTokens.hal_black,
+    valueFontSize: globalTokens.type_scale_03,
+    valueFontStyle: globalTokens.type_normal,
+    valueFontWeight: globalTokens.type_regular,
+    actionIconColor: globalTokens.hal_black,
+    // new
+    hoverActionIconColor: globalTokens.hal_black,
+    activeActionIconColor: globalTokens.hal_black,
+    actionBackgroundColor: globalTokens.transparent,
+    hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
+    activeActionBackgroundColor: globalTokens.hal_grey_l_80,
+    disabledActionBackgroundColor: globalTokens.transparent,
+    errorMessageFontSize: globalTokens.type_scale_01,
+    errorMessagetFontStyle: globalTokens.type_normal,
+    errorMessageFontWeight: globalTokens.type_regular,
+    errorMessagetLineHeight: globalTokens.type_leading_normal,
+    listItemFontColor: globalTokens.hal_black,
+    listItemFontSize: globalTokens.type_scale_02,
+    listItemFontStyle: globalTokens.type_normal,
+    listItemFontWeight: globalTokens.type_regular,
+    listItemIconColor: globalTokens.hal_black,
+    listGroupItemFontWeight: globalTokens.type_semibold,
+    listItemDividerColor: globalTokens.hal_grey_l_90,
+    focusListItemBorderColor: globalTokens.hal_blue_l_50,
+    // new
+    systemMessageFontColor: globalTokens.hal_grey_s_40,
+    // new
+    collapseIndicatorColor: globalTokens.hal_black,
+    itemListBackgroundColor: globalTokens.hal_white,
+    // new
+    itemListBorderColor: globalTokens.hal_grey_l_75,
+    // new
+    selectedListItemBackgroundColor: globalTokens.hal_blue_l_95,
+    selectedHoverListItemBackgroundColor: globalTokens.color_blue_200,
+    selectedActiveListItemBackgroundColor: globalTokens.hal_blue_l_80,
+    selectedListItemIconColor: globalTokens.hal_blue_d_20,
+    unselectedHoverListItemBackgroundColor: globalTokens.hal_grey_l_95,
+    unselectedActiveListItemBackgroundColor: globalTokens.hal_grey_l_90,
+    selectionIndicatorFontColor: globalTokens.hal_black,
+    // new
+    selectionIndicatorFontSize: "11px",
+    // new
+    selectionIndicatorFontStyle: globalTokens.type_regular,
+    // new
+    selectionIndicatorFontWeight: globalTokens.type_normal,
+    // new
+    selectionIndicatorBorderColor: globalTokens.hal_grey_l_75,
+    selectionIndicatorBackgroundColor: globalTokens.color_grey_50,
+    enabledSelectionIndicatorActionBackgroundColor: globalTokens.transparent,
+    enabledSelectionIndicatorActionIconColor: globalTokens.hal_black,
+    // new
+    hoverSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_95,
+    hoverSelectionIndicatorActionIconColor: globalTokens.hal_black,
+    // new
+    activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
+    activeSelectionIndicatorActionIconColor: globalTokens.hal_black // new
+
+  },
+  V3Select: {
     fontFamily: globalTokens.type_sans,
     assistiveTextFontColor: globalTokens.hal_black,
     assistiveTextFontColorOnDark: globalTokens.hal_white,
@@ -924,90 +1013,6 @@ var componentTokens = {
     focusColor: globalTokens.hal_blue_l_50,
     focusColorOnDark: globalTokens.hal_blue_l_50
   },
-  newSelect: {
-    fontFamily: globalTokens.type_sans,
-    enabledBorderColor: globalTokens.hal_black,
-    enabledBorderColorOnDark: globalTokens.hal_white,
-    hoverBorderColor: globalTokens.hal_purple_l_65,
-    hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
-    focusBorderColor: globalTokens.hal_blue_l_50,
-    focusBorderColorOnDark: globalTokens.hal_blue_l_50,
-    disabledBorderColor: globalTokens.hal_grey_l_60,
-    disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
-    disabledContainerFillColor: globalTokens.hal_grey_l_95,
-    disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
-    errorBorderColor: globalTokens.hal_red_s_41,
-    errorBorderColorOnDark: globalTokens.hal_red_l_60,
-    hoverErrorBorderColor: "#fe0123",
-    hoverErrorBorderColorOnDark: "#fe677b",
-    errorMessageColor: globalTokens.hal_red_s_41,
-    errorMessageColorOnDark: globalTokens.hal_red_l_60,
-    errorIconColor: globalTokens.hal_red_s_41,
-    errorIconColorOnDark: globalTokens.hal_red_l_60,
-    labelFontColor: globalTokens.hal_black,
-    labelFontColorOnDark: globalTokens.hal_white,
-    labelFontSize: globalTokens.type_scale_02,
-    labelFontStyle: globalTokens.type_normal,
-    labelFontWeight: globalTokens.type_semibold,
-    disabledLabelFontColor: globalTokens.hal_grey_l_60,
-    disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
-    optionalLabelFontWeight: globalTokens.type_regular,
-    helperTextFontColor: globalTokens.hal_black,
-    helperTextFontColorOnDark: globalTokens.hal_white,
-    helperTextFontSize: globalTokens.type_scale_01,
-    helperTextFontStyle: globalTokens.type_normal,
-    helperTextFontWeight: globalTokens.type_regular,
-    disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
-    disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
-    placeholderFontColor: "#808080",
-    placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
-    disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
-    disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
-    valueFontColor: globalTokens.hal_black,
-    valueFontColorOnDark: globalTokens.hal_white,
-    valueFontSize: globalTokens.type_scale_03,
-    valueFontStyle: globalTokens.type_normal,
-    valueFontWeight: globalTokens.type_regular,
-    disabledValueFontColor: globalTokens.hal_grey_l_60,
-    disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
-    actionIconColor: globalTokens.hal_black,
-    actionIconColorOnDark: globalTokens.hal_white,
-    disabledActionIconColor: globalTokens.hal_grey_l_60,
-    disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
-    hoverActionIconColor: globalTokens.hal_black,
-    hoverActionIconColorOnDark: globalTokens.hal_white,
-    focusActionIconColor: globalTokens.hal_black,
-    focusActionIconColorOnDark: globalTokens.hal_white,
-    activeActionIconColor: globalTokens.hal_black,
-    activeActionIconColorOnDark: globalTokens.hal_black,
-    actionBackgroundColor: globalTokens.transparent,
-    actionBackgroundColorOnDark: globalTokens.transparent,
-    disabledActionBackgroundColor: globalTokens.transparent,
-    disabledActionBackgroundColorOnDark: globalTokens.transparent,
-    hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
-    hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
-    focusActionBorderColor: globalTokens.hal_blue_l_50,
-    focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
-    activeActionBackgroundColor: globalTokens.hal_grey_l_80,
-    activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
-    listOptionFontColor: globalTokens.hal_black,
-    listOptionFontSize: globalTokens.type_scale_02,
-    listOptionFontStyle: globalTokens.type_normal,
-    listOptionFontWeight: globalTokens.type_regular,
-    systemMessageFontColor: globalTokens.hal_grey_s_40,
-    errorMessageBorderColor: globalTokens.hal_red_s_41,
-    errorMessageBackgroundColor: globalTokens.hal_red_l_95,
-    hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
-    activeListOptionBackgroundColor: globalTokens.hal_grey_l_90,
-    // NUEVO
-    arrowColor: globalTokens.hal_black,
-    arrowColorOnDark: globalTokens.hal_white,
-    disabledArrowColor: globalTokens.hal_grey_l_60,
-    disabledArrowColorOnDark: globalTokens.hal_grey_l_60,
-    enabledListBorderColor: globalTokens.hal_grey_l_80,
-    listOptionBorderBottomColor: globalTokens.hal_grey_l_90,
-    selectedListOptionBackgroundColor: globalTokens.hal_grey_l_90
-  },
   sidenav: {
     backgroundColor: globalTokens.hal_grey_l_95,
     arrowContainerColor: globalTokens.hal_grey_l_90,
@@ -1280,7 +1285,7 @@ var componentTokens = {
     disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
     errorBorderColor: globalTokens.hal_red_s_41,
     errorBorderColorOnDark: globalTokens.hal_red_l_60,
-    hoverErrorBorderColor: "#fe0123",
+    hoverErrorBorderColor: globalTokens.color_red_600,
     hoverErrorBorderColorOnDark: "#fe677b",
     errorMessageColor: globalTokens.hal_red_s_41,
     errorMessageColorOnDark: globalTokens.hal_red_l_60,
@@ -1313,6 +1318,41 @@ var componentTokens = {
     disabledValueFontColor: globalTokens.hal_grey_l_60,
     disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
   },
+  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"
+  },
   toggleGroup: {
     containerBackgroundColor: globalTokens.color_grey_50,
     containerBorderColor: globalTokens.hal_grey_l_60,
@@ -1424,41 +1464,6 @@ 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 _V3DxcDate$propTypes;
+var _DxcDate$propTypes;
 
 function _templateObject() {
   var data = (0, _taggedTemplateLiteral2["default"])([""]);
@@ -53,7 +53,7 @@ function _templateObject() {
   return data;
 }
 
-var V3DxcDate = function V3DxcDate(_ref) {
+var DxcDate = function DxcDate(_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());
 
-V3DxcDate.propTypes = (_V3DxcDate$propTypes = {
+DxcDate.propTypes = (_DxcDate$propTypes = {
   value: _propTypes["default"].string,
   format: _propTypes["default"].string,
   label: _propTypes["default"].string,
@@ -369,11 +369,11 @@ V3DxcDate.propTypes = (_V3DxcDate$propTypes = {
   invalid: _propTypes["default"].bool,
   onChange: _propTypes["default"].func,
   onBlur: _propTypes["default"].func
-}, (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({
+}, (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({
   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"])(_V3DxcDate$propTypes, "tabIndex", _propTypes["default"].number), _V3DxcDate$propTypes);
-var _default = V3DxcDate;
+}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])), (0, _defineProperty2["default"])(_DxcDate$propTypes, "tabIndex", _propTypes["default"].number), _DxcDate$propTypes);
+var _default = DxcDate;
 exports["default"] = _default;

package/dist/date/index.d.ts

@@ -0,0 +1,27 @@
+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 = {
+  value?: string;
+  format?: string;
+  label?: string;
+  name?: string,
+  disabled?: boolean;
+  required?: boolean;
+  assistiveText?: string;
+  invalid?: boolean;
+  onChange?: void;
+  placeholder?: string;
+  onBlur?: void;
+  margin?: Space | Margin;
+  size?: Size;
+  tabIndex?: number;
+};
+
+export default function DxcDate(props: Props): JSX.Element;

package/dist/dialog/index.d.ts

@@ -0,0 +1,18 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Padding = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  isCloseVisible?: boolean;
+  onCloseClick?: void;
+  overlay?: boolean;
+  onBackgroundClick?: void;
+  padding?: Padding,
+  tabIndex?: number;
+};
+
+export default function DxcDialog(props: Props): JSX.Element;

package/dist/dropdown/index.d.ts

@@ -0,0 +1,26 @@
+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 = {
+  options?: any;
+  optionsIconPosition?: "before" | "after";
+  icon?: any;
+  iconSrc?: string;
+  iconPosition?: "before" | "after";
+  label?: string;
+  disabled?: boolean;
+  caretHidden?: boolean;
+  onSelectOption?: void;
+  expandOnHover?: boolean;
+  margin?: Space | Margin;
+  size?: Size;
+  tabIndex?: number;
+};
+
+export default function DxcDropdown(props: Props): JSX.Element;

package/dist/file-input/FileItem.js

@@ -30,7 +30,7 @@ function _templateObject10() {
 }
 
 function _templateObject9() {
-  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  margin-left: 4px;\n  background-color: transparent;\n  padding: 3px;\n  cursor: pointer;\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: 4px;\n  margin-left: 4px;\n  background-color: transparent;\n  padding: 3px;\n  cursor: pointer;\n  svg {\n    line-height: 18px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"]);
 
   _templateObject9 = function _templateObject9() {
     return data;
@@ -194,6 +194,7 @@ var FileItem = function FileItem(_ref) {
   }, name), error && _react["default"].createElement(ErrorIcon, {
     "aria-label": "Error"
   }, errorIcon), _react["default"].createElement(DeleteIcon, {
+    error: error,
     onClick: function onClick() {
       return onDelete(name);
     },
@@ -251,6 +252,12 @@ var ErrorIcon = _styledComponents["default"].span(_templateObject8());
 
 var DeleteIcon = _styledComponents["default"].button(_templateObject9(), function (props) {
   return props.theme.fontFamily;
+}, function (props) {
+  return props.error ? props.theme.errorHoverDeleteFileItemBackgroundColor : props.theme.hoverDeleteFileItemBackgroundColor;
+}, function (props) {
+  return props.error ? props.theme.errorHoverDeleteFileItemBackgroundColor : props.theme.hoverDeleteFileItemBackgroundColor;
+}, function (props) {
+  return props.error ? props.theme.errorActiveDeleteFileItemBackgroundColor : props.theme.activeDeleteFileItemBackgroundColor;
 });
 
 var ErrorMessage = _styledComponents["default"].span(_templateObject10(), function (props) {

package/dist/file-input/index.d.ts

@@ -78,4 +78,4 @@ type Props = {
   tabIndex?: number;
 };
 
-export default function DxcTextInput(props: Props): JSX.Element;
+export default function DxcFileInput(props: Props): JSX.Element;

package/dist/footer/index.d.ts

@@ -0,0 +1,25 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+type Padding = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  socialLinks?: any;
+  bottomLinks?: any;
+  copyright?: string;
+  padding?: Space | Padding;
+  margin?: Space | Margin;
+  tabIndex?: number;
+  
+};
+
+export default function DxcFooter(props: Props): JSX.Element;