@dxc-technology/halstack-react 0.0.0-228c4cf → 0.0.0-2509c58

package/{dist/common → common}/variables.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.typeface = exports.responsiveSizes = exports.spaces = exports.componentTokens = exports.globalTokens = void 0;
+exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.componentTokens = void 0;
 
 var _Icons = require("../header/Icons");
 
@@ -507,7 +507,7 @@ var componentTokens = {
     disabledDropLabelFontColor: globalTokens.hal_grey_l_60,
     focusDropBorderColor: globalTokens.hal_blue_l_50,
     disabledDropBorderColor: globalTokens.hal_grey_l_60,
-    focusDropBackgroundColor: globalTokens.color_blue_50,
+    dragoverDropBackgroundColor: globalTokens.color_blue_50,
     hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
     activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
     errorFileItemBorderColor: globalTokens.hal_red_s_41,
@@ -717,6 +717,8 @@ var componentTokens = {
     errorBorderColorOnDark: globalTokens.hal_red_l_60,
     hoverErrorBorderColor: globalTokens.color_red_600,
     hoverErrorBorderColorOnDark: "#fe677b",
+    inputMarginTop: globalTokens.spacing_02,
+    inputMarginBottom: globalTokens.spacing_02,
     errorMessageColor: globalTokens.hal_red_s_41,
     errorMessageColorOnDark: globalTokens.hal_red_l_60,
     errorIconColor: globalTokens.hal_red_s_41,
@@ -746,7 +748,7 @@ var componentTokens = {
     disabledSuffixColor: globalTokens.hal_grey_l_75,
     disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
     disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
-    placeholderFontColor: "#808080",
+    placeholderFontColor: "#000000b3",
     placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
     disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
     disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -777,15 +779,20 @@ var componentTokens = {
     focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
     activeActionBackgroundColor: globalTokens.hal_grey_l_80,
     activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
+    listDialogBackgroundColor: globalTokens.hal_white,
+    listDialogBorderColor: globalTokens.hal_grey_l_75,
+    listOptionDividerColor: globalTokens.hal_grey_l_90,
     listOptionFontColor: globalTokens.hal_black,
-    listOptionFontSize: globalTokens.type_scale_03,
+    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,
+    errorListDialogFontColor: globalTokens.hal_black,
+    errorListDialogBackgroundColor: globalTokens.color_red_50,
+    errorListDialogBorderColor: globalTokens.hal_red_s_41,
     hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
-    activeListOptionBackgroundColor: globalTokens.hal_grey_l_80
+    activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
+    focusListOptionBorderColor: globalTokens.hal_blue_l_50
   },
   link: {
     fontColor: globalTokens.hal_blue_s_35,
@@ -882,14 +889,17 @@ var componentTokens = {
     errorInputBorderColor: globalTokens.hal_red_s_41,
     hoverInputErrorBorderColor: globalTokens.color_red_600,
     disabledInputBorderColor: globalTokens.hal_grey_l_60,
-    errorColor: globalTokens.hal_red_s_41,
+    disabledInputBackgroundColor: globalTokens.hal_grey_l_95,
+    inputMarginTop: globalTokens.spacing_02,
+    inputMarginBottom: globalTokens.spacing_02,
+    errorMessageColor: globalTokens.hal_red_s_41,
+    errorIconColor: 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,
@@ -901,58 +911,41 @@ var componentTokens = {
     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
+    listOptionFontColor: globalTokens.hal_black,
+    listOptionFontSize: globalTokens.type_scale_02,
+    listOptionFontStyle: globalTokens.type_normal,
+    listOptionFontWeight: globalTokens.type_regular,
+    listOptionIconColor: globalTokens.hal_black,
+    listOptionDividerColor: globalTokens.hal_grey_l_90,
+    listGroupLabelFontWeight: globalTokens.type_semibold,
+    focusListOptionBorderColor: globalTokens.hal_blue_l_50,
     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,
+    listDialogBackgroundColor: globalTokens.hal_white,
+    listDialogBorderColor: globalTokens.hal_grey_l_75,
+    selectedListOptionBackgroundColor: globalTokens.hal_blue_l_95,
+    selectedHoverListOptionBackgroundColor: globalTokens.color_blue_200,
+    selectedActiveListOptionBackgroundColor: globalTokens.hal_blue_l_80,
+    selectedListOptionIconColor: globalTokens.hal_blue_d_20,
+    unselectedHoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
+    unselectedActiveListOptionBackgroundColor: globalTokens.hal_grey_l_90,
     selectionIndicatorFontColor: globalTokens.hal_black,
-    // new
-    selectionIndicatorFontSize: "11px",
-    // new
+    selectionIndicatorFontSize: globalTokens.type_scale_01,
     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
-
+    activeSelectionIndicatorActionIconColor: globalTokens.hal_black
   },
   V3Select: {
     fontFamily: globalTokens.type_sans,
@@ -1287,6 +1280,8 @@ var componentTokens = {
     errorBorderColorOnDark: globalTokens.hal_red_l_60,
     hoverErrorBorderColor: globalTokens.color_red_600,
     hoverErrorBorderColorOnDark: "#fe677b",
+    inputMarginTop: globalTokens.spacing_02,
+    inputMarginBottom: globalTokens.spacing_02,
     errorMessageColor: globalTokens.hal_red_s_41,
     errorMessageColorOnDark: globalTokens.hal_red_l_60,
     labelFontColor: globalTokens.hal_black,
@@ -1306,7 +1301,7 @@ var componentTokens = {
     helperTextLineHeight: globalTokens.type_leading_normal,
     disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
     disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
-    placeholderFontColor: "#808080",
+    placeholderFontColor: "#000000b3",
     placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
     disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
     disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,

package/{dist/date → date}/Date.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -41,19 +41,13 @@ var _variables = require("../common/variables.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
-var _V3DxcDate$propTypes;
+var _templateObject, _DxcDate$propTypes;
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])([""]);
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var 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,
@@ -142,16 +136,16 @@ var V3DxcDate = function V3DxcDate(_ref) {
   };
 
   var calendarSVG = function calendarSVG() {
-    return _react["default"].createElement("svg", {
+    return /*#__PURE__*/_react["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       height: "24",
       viewBox: "0 0 24 24",
       width: "24",
       fill: "currentColor"
-    }, _react["default"].createElement("path", {
+    }, /*#__PURE__*/_react["default"].createElement("path", {
       "data-testid": "calendarIcon",
       d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
-    }), _react["default"].createElement("path", {
+    }), /*#__PURE__*/_react["default"].createElement("path", {
       d: "M0 0h24v24H0z",
       fill: "none"
     }));
@@ -295,15 +289,15 @@ var V3DxcDate = function V3DxcDate(_ref) {
       }
     }
   });
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme
-  }, _react["default"].createElement(_core.MuiThemeProvider, {
+  }, /*#__PURE__*/_react["default"].createElement(_core.MuiThemeProvider, {
     theme: dateTheme
-  }, _react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
+  }, /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
     utils: _dateFns["default"]
-  }, _react["default"].createElement(StyledDPicker, {
+  }, /*#__PURE__*/_react["default"].createElement(StyledDPicker, {
     margin: margin
-  }, _react["default"].createElement(_InputText["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_InputText["default"], {
     label: label,
     name: name,
     suffixIcon: calendarSVG,
@@ -319,7 +313,7 @@ var V3DxcDate = function V3DxcDate(_ref) {
     onChange: onChangeInput,
     onBlur: onBlur && handlerInputBlur || null,
     tabIndex: tabIndex
-  }), _react["default"].createElement(_Popover["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
     open: isOpen,
     anchorEl: anchorEl,
     anchorOrigin: {
@@ -335,9 +329,9 @@ var V3DxcDate = function V3DxcDate(_ref) {
         marginTop: "10px"
       }
     }
-  }, _react["default"].createElement(_ClickAwayListener["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_ClickAwayListener["default"], {
     onClickAway: handlerPickerClose
-  }, _react["default"].createElement(_core.Paper, null, _react["default"].createElement(_pickers.DatePicker, {
+  }, /*#__PURE__*/_react["default"].createElement(_core.Paper, null, /*#__PURE__*/_react["default"].createElement(_pickers.DatePicker, {
     variant: "static",
     value: getValueForPicker(),
     onChange: function onChange(date) {
@@ -354,9 +348,9 @@ var sizes = {
   fillParent: "100%"
 };
 
-var StyledDPicker = _styledComponents["default"].div(_templateObject());
+var StyledDPicker = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
 
-V3DxcDate.propTypes = (_V3DxcDate$propTypes = {
+DxcDate.propTypes = (_DxcDate$propTypes = {
   value: _propTypes["default"].string,
   format: _propTypes["default"].string,
   label: _propTypes["default"].string,
@@ -369,11 +363,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/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/date-input/DateInput.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import DateInputPropsType from "./types";
+declare const DxcDateInput: React.ForwardRefExoticComponent<DateInputPropsType & React.RefAttributes<HTMLDivElement>>;
+export default DxcDateInput;

package/{dist/date-input → date-input}/DateInput.js

@@ -1,16 +1,14 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -31,25 +29,17 @@ var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _variables = require("../common/variables.js");
-
 var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
 var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])([""]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-  return data;
-}
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
+var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _ref$label = _ref.label,
       label = _ref$label === void 0 ? "" : _ref$label,
       _ref$name = _ref.name,
@@ -112,7 +102,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange({
       value: newValue,
       error: null,
-      date: newDate && newDate.toJSON() ? newDate : null
+      date: newDate !== null && newDate !== void 0 && newDate.toJSON() ? newDate : null
     });
   };
 
@@ -125,7 +115,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange({
       value: newValue,
       error: inputError || invalidDateMessage,
-      date: momentDate.isValid() ? momentDate._d : null
+      date: momentDate.isValid() ? momentDate.toDate() : null
     });
   };
 
@@ -137,7 +127,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
     onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: value,
       error: inputError || invalidDateMessage,
-      date: momentDate.isValid() ? momentDate._d : null
+      date: momentDate.isValid() ? momentDate.toDate() : null
     });
   };
 
@@ -158,16 +148,16 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
 
   var calendarAction = {
     onClick: openCalendar,
-    icon: _react["default"].createElement("svg", {
+    icon: /*#__PURE__*/_react["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       height: "24",
       viewBox: "0 0 24 24",
       width: "24",
       fill: "currentColor"
-    }, _react["default"].createElement("path", {
+    }, /*#__PURE__*/_react["default"].createElement("path", {
       d: "M0 0h24v24H0z",
       fill: "none"
-    }), _react["default"].createElement("path", {
+    }), /*#__PURE__*/_react["default"].createElement("path", {
       d: "M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"
     }))
   };
@@ -308,13 +298,13 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
       }
     }
   });
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme
-  }, _react["default"].createElement(_core.MuiThemeProvider, {
+  }, /*#__PURE__*/_react["default"].createElement(_core.MuiThemeProvider, {
     theme: dateTheme
-  }, _react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
+  }, /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
     utils: _dateFns["default"]
-  }, _react["default"].createElement(StyledDPicker, null, _react["default"].createElement(_TextInput["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(StyledDPicker, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
     label: label,
     name: name,
     value: value !== null && value !== void 0 ? value : innerValue,
@@ -332,7 +322,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
     size: size,
     tabIndex: tabIndex,
     ref: ref
-  }), _react["default"].createElement(_Popover["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
     onKeyDown: handleCalendarOnKeyDown,
     open: isOpen,
     anchorEl: anchorEl,
@@ -349,12 +339,12 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
         marginTop: "10px"
       }
     }
-  }, _react["default"].createElement(_ClickAwayListener["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_ClickAwayListener["default"], {
     onClickAway: closeCalendar
-  }, _react["default"].createElement(_core.Paper, {
+  }, /*#__PURE__*/_react["default"].createElement(_core.Paper, {
     role: "dialog",
     "aria-modal": "true"
-  }, _react["default"].createElement(_pickers.DatePicker, {
+  }, /*#__PURE__*/_react["default"].createElement(_pickers.DatePicker, {
     variant: "static",
     value: getValueForPicker(),
     onChange: function onChange(date) {
@@ -365,36 +355,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
   }))))))));
 });
 
-var sizes = {
-  medium: "360px",
-  large: "480px",
-  fillParent: "100%"
-};
-
-var StyledDPicker = _styledComponents["default"].div(_templateObject());
-
-DxcDateInput.propTypes = {
-  label: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  format: _propTypes["default"].string,
-  helperText: _propTypes["default"].string,
-  placeholder: _propTypes["default"].bool,
-  clearable: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  optional: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  onBlur: _propTypes["default"].func,
-  error: _propTypes["default"].string,
-  autocomplete: _propTypes["default"].string,
-  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  tabIndex: _propTypes["default"].number
-};
+var StyledDPicker = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
+
 var _default = DxcDateInput;
 exports["default"] = _default;

package/date-input/types.d.ts

@@ -0,0 +1,100 @@
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type Props = {
+    /**
+     * Text to be placed above the date.
+     */
+    label?: string;
+    /**
+     * Name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: string;
+    /**
+     * The format in which the date value will be displayed. User must use this format when editing the value or it will be considered as an invalid date.
+     */
+    format?: string;
+    /**
+     * Helper text to be placed above the date.
+     */
+    helperText?: string;
+    /**
+     * If true, the date format will appear as placeholder in the field.
+     */
+    placeholder?: boolean;
+    /**
+     * If true, the date input will have an action to clear the entered value.
+     */
+    clearable?: boolean;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the date will be optional, showing '(Optional)'
+     * next to the label. Otherwise, the field will be considered required and an error will be
+     * passed as a parameter to the OnBlur and onChange functions when it has
+     * not been filled.
+     */
+    optional?: boolean;
+    /**
+     * This function will be called when the user types within the input
+     * element of the component. An object including the string value, the
+     * error and the date value will be passed to this function.
+     * If the string value is a valid date, error will
+     * be null. Also, if the string value is not a valid date, date will be null.
+     */
+    onChange?: (val: {
+        value: string;
+        error: string | null;
+        date: Date | null;
+    }) => void;
+    /**
+     * This function will be called when the input element loses the focus.
+     * An object including the string value, the error and the date value
+     * will be passed to this function. If the string value is a valid date, error will
+     * be null. Also, if the string value is not a valid date, date will be null.
+     */
+    onBlur?: (val: {
+        value: string;
+        error: string | null;
+        date: Date | null;
+    }) => void;
+    /**
+     * If it is defined, the component will change its appearance, showing
+     * the error below the date input component. If it is not defined, the error
+     * messages will be managed internally, but never displayed on its own.
+     */
+    error?: string;
+    /**
+     * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
+     * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
+     */
+    autocomplete?: string;
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space | Margin;
+    /**
+     * Size of the component.
+     */
+    size?: "medium" | "large" | "fillParent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+/**
+ * Reference to the component.
+ */
+export declare type RefType = HTMLDivElement;
+export default Props;

package/date-input/types.js

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

package/dialog/Dialog.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import DialogPropsType from "./types";
+declare const DxcDialog: ({ isCloseVisible, onCloseClick, children, overlay, onBackgroundClick, padding, tabIndex, }: DialogPropsType) => JSX.Element;
+export default DxcDialog;