@dxc-technology/halstack-react 0.0.0-b821bfb → 0.0.0-ba408d4

package/accordion-group/AccordionGroup.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -33,20 +33,18 @@ var _variables = require("../common/variables.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  cursor: ", ";\n\n  & > :not(div:last-child) {\n    & > div:first-child {\n      border-radius: 0;\n      border-bottom: ", ";\n      border-color: ", ";\n\n      & > .Mui-expanded {\n        border-radius: 0;\n      }\n\n      & > .MuiButtonBase-root {\n        border-radius: 0;\n      }\n    }\n  }\n\n  & > div:first-child {\n    & > div:first-child {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      border-top-left-radius: ", ";\n      border-top-right-radius: ", ";\n      border-bottom: ", ";\n      border-color: ", ";\n\n      & > .Mui-expanded {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        border-top-left-radius: ", ";\n        border-top-right-radius: ", ";\n      }\n\n      & > .MuiButtonBase-root {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        border-top-left-radius: ", ";\n        border-top-right-radius: ", ";\n      }\n    }\n  }\n\n  & > div:last-child {\n    & > div:first-child {\n      border-bottom-left-radius: ", ";\n      border-bottom-right-radius: ", ";\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      & > .Mui-expanded {\n        border-bottom-left-radius: ", ";\n        border-bottom-right-radius: ", ";\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n      }\n\n      & > .MuiButtonBase-root {\n        border-bottom-left-radius: ", ";\n        border-bottom-right-radius: ", ";\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n      }\n    }\n  }\n"]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+var _excluded = ["margin"];
+
+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 || _typeof3(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 Accordion = function Accordion(_ref) {
   var margin = _ref.margin,
-      childProps = (0, _objectWithoutProperties2["default"])(_ref, ["margin"]);
-  return _react["default"].createElement(_Accordion["default"], childProps, childProps.children);
+      childProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], childProps, childProps.children);
 };
 
 var DxcAccordionGroup = function DxcAccordionGroup(_ref2) {
@@ -80,15 +78,15 @@ var DxcAccordionGroup = function DxcAccordionGroup(_ref2) {
   (0, _react.useEffect)(function () {
     setInnerIsExpanded(indexActive);
   }, [indexActive]);
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.accordion
-  }, _react["default"].createElement(AccordionGroupContainer, {
+  }, /*#__PURE__*/_react["default"].createElement(AccordionGroupContainer, {
     margin: margin,
     disabled: disabled
   }, (Array.isArray(children) ? children : [children]).filter(function (el) {
     return el.type === Accordion;
   }).map(function (el, index) {
-    return _react["default"].cloneElement(el, {
+    return /*#__PURE__*/_react["default"].cloneElement(el, {
       onChange: function onChange() {
         handlerActiveChange(index);
       },
@@ -102,7 +100,7 @@ var calculateWidth = function calculateWidth(margin) {
   return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
 };
 
-var AccordionGroupContainer = _styledComponents["default"].div(_templateObject(), function (props) {
+var AccordionGroupContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  cursor: ", ";\n\n  & > :not(div:last-child) {\n    & > div:first-child {\n      border-radius: 0;\n      border-bottom: ", ";\n      border-color: ", ";\n\n      & > .Mui-expanded {\n        border-radius: 0;\n      }\n\n      & > .MuiButtonBase-root {\n        border-radius: 0;\n      }\n    }\n  }\n\n  & > div:first-child {\n    & > div:first-child {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      border-top-left-radius: ", ";\n      border-top-right-radius: ", ";\n      border-bottom: ", ";\n      border-color: ", ";\n\n      & > .Mui-expanded {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        border-top-left-radius: ", ";\n        border-top-right-radius: ", ";\n      }\n\n      & > .MuiButtonBase-root {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        border-top-left-radius: ", ";\n        border-top-right-radius: ", ";\n      }\n    }\n  }\n\n  & > div:last-child {\n    & > div:first-child {\n      border-bottom-left-radius: ", ";\n      border-bottom-right-radius: ", ";\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      & > .Mui-expanded {\n        border-bottom-left-radius: ", ";\n        border-bottom-right-radius: ", ";\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n      }\n\n      & > .MuiButtonBase-root {\n        border-bottom-left-radius: ", ";\n        border-bottom-right-radius: ", ";\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n      }\n    }\n  }\n"])), function (props) {
   return calculateWidth(props.margin);
 }, function (_ref3) {
   var margin = _ref3.margin;

package/alert/Alert.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -29,165 +29,71 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
 var _BackgroundColorContext = require("../BackgroundColorContext.js");
 
-function _templateObject10() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  box-shadow: 0 0 0 2px transparent;\n  padding: 3px;\n  margin-left: 12px;\n  background-color: transparent;\n  color: #000000;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"]);
-
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1 1 auto;\n  padding: ", ";\n  overflow-y: auto;\n"]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  flex-grow: 1;\n  align-items: center;\n  overflow: hidden;\n"]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  margin-right: 12px;\n  padding-right: ", ";\n  padding-left: ", ";\n\n  color: ", ";\n\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: 8px;\n  padding-right: ", ";\n  padding-left: ", ";\n  flex-grow: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 8px;\n  padding-right: ", ";\n  padding-left: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  text-transform: ", ";\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  height: calc(48px - calc(", " * 2));\n  align-items: center;\n  width: 100%;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  display: ", ";\n  overflow: hidden;\n  box-sizing: border-box;\n\n  background-color: ", ";\n\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n\n  padding-left: 12px;\n  padding-right: 12px;\n  justify-content: ", ";\n  align-items: ", ";\n  max-width: ", ";\n  width: ", ";\n  z-index: ", ";\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  position: ", ";\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  width: ", ";\n  height: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  top: ", ";\n  left: ", ";\n  position: ", ";\n  display: ", ";\n  z-index: ", ";\n"]);
-
-  _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 || _typeof3(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 alertIcons = {
-  close: _react["default"].createElement("svg", {
+  close: /*#__PURE__*/_react["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
     height: "20",
     viewBox: "0 0 24 24",
     fill: "currentColor"
-  }, _react["default"].createElement("path", {
+  }, /*#__PURE__*/_react["default"].createElement("path", {
     d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-  }), _react["default"].createElement("path", {
+  }), /*#__PURE__*/_react["default"].createElement("path", {
     d: "M0 0h24v24H0z",
     fill: "none"
   })),
-  info: _react["default"].createElement("svg", {
+  info: /*#__PURE__*/_react["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "23",
     height: "23",
     viewBox: "0 0 24 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: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
   })),
-  success: _react["default"].createElement("svg", {
+  success: /*#__PURE__*/_react["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "23",
     height: "23",
     viewBox: "0 0 24 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: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
   })),
-  warning: _react["default"].createElement("svg", {
+  warning: /*#__PURE__*/_react["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "23",
     height: "23",
     viewBox: "0 0 24 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: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
   })),
-  error: _react["default"].createElement("svg", {
+  error: /*#__PURE__*/_react["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "23",
     height: "23",
     viewBox: "0 0 24 24",
     fill: "currentColor"
-  }, _react["default"].createElement("path", {
+  }, /*#__PURE__*/_react["default"].createElement("path", {
     d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",
     fill: "currentColor"
-  }), _react["default"].createElement("path", {
+  }), /*#__PURE__*/_react["default"].createElement("path", {
     d: "M0 0h24v24H0z",
     fill: "none"
   }))
@@ -212,26 +118,26 @@ var DxcAlert = function DxcAlert(_ref) {
     return type === "info" ? "information" : type === "confirm" ? "success" : type === "warning" ? "warning" : "error";
   };
 
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.alert
-  }, _react["default"].createElement(AlertModal, {
+  }, /*#__PURE__*/_react["default"].createElement(AlertModal, {
     mode: mode
-  }, mode === "modal" && _react["default"].createElement(OverlayContainer, {
+  }, mode === "modal" && /*#__PURE__*/_react["default"].createElement(OverlayContainer, {
     mode: mode,
     onClick: onClose
-  }), _react["default"].createElement(AlertContainer, {
+  }), /*#__PURE__*/_react["default"].createElement(AlertContainer, {
     mode: mode,
     type: type,
     margin: margin,
     size: size
-  }, _react["default"].createElement(AlertInfo, null, _react["default"].createElement(AlertIcon, {
+  }, /*#__PURE__*/_react["default"].createElement(AlertInfo, null, /*#__PURE__*/_react["default"].createElement(AlertIcon, {
     type: type
-  }, type === "info" && alertIcons.info || type === "confirm" && alertIcons.success || type === "warning" && alertIcons.warning || type === "error" && alertIcons.error), _react["default"].createElement(AlertText, null, _react["default"].createElement(AlertTitle, {
+  }, type === "info" && alertIcons.info || type === "confirm" && alertIcons.success || type === "warning" && alertIcons.warning || type === "error" && alertIcons.error), /*#__PURE__*/_react["default"].createElement(AlertText, null, /*#__PURE__*/_react["default"].createElement(AlertTitle, {
     type: type
-  }, getTypeText(type)), inlineText && inlineText !== "" && "-", _react["default"].createElement(AlertInlineText, null, inlineText)), onClose && _react["default"].createElement(AlertCloseAction, {
+  }, getTypeText(type)), inlineText && inlineText !== "" && "-", /*#__PURE__*/_react["default"].createElement(AlertInlineText, null, inlineText)), onClose && /*#__PURE__*/_react["default"].createElement(AlertCloseAction, {
     onClick: onClose,
     tabIndex: tabIndex
-  }, alertIcons.close)), children && _react["default"].createElement(AlertContent, null, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+  }, alertIcons.close)), children && /*#__PURE__*/_react["default"].createElement(AlertContent, null, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
     color: type === "info" && colorsTheme.alert.infoBackgroundColor || type === "confirm" && colorsTheme.alert.successBackgroundColor || type === "warning" && colorsTheme.alert.warningBackgroundColor || type === "error" && colorsTheme.alert.errorBackgroundColor
   }, children)))));
 };
@@ -248,7 +154,7 @@ var calculateWidth = function calculateWidth(margin, size) {
   return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
 };
 
-var AlertModal = _styledComponents["default"].div(_templateObject(), function (props) {
+var AlertModal = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  width: ", ";\n  height: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  top: ", ";\n  left: ", ";\n  position: ", ";\n  display: ", ";\n  z-index: ", ";\n"])), function (props) {
   return props.theme.fontSizeBase;
 }, function (props) {
   return props.mode === "modal" ? "100%" : "";
@@ -270,7 +176,7 @@ var AlertModal = _styledComponents["default"].div(_templateObject(), function (p
   return props.mode === "modal" ? "1200" : "";
 });
 
-var OverlayContainer = _styledComponents["default"].div(_templateObject2(), function (props) {
+var OverlayContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  position: ", ";\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n"])), function (props) {
   return props.mode === "modal" ? "".concat(props.theme.overlayColor) : "transparent";
 }, function (props) {
   return props.mode === "modal" ? "fixed" : "";
@@ -284,7 +190,7 @@ var OverlayContainer = _styledComponents["default"].div(_templateObject2(), func
   return props.mode === "modal" ? "0" : "";
 });
 
-var AlertContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
+var AlertContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  display: ", ";\n  overflow: hidden;\n  box-sizing: border-box;\n\n  background-color: ", ";\n\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n\n  padding-left: 12px;\n  padding-right: 12px;\n  justify-content: ", ";\n  align-items: ", ";\n  max-width: ", ";\n  width: ", ";\n  z-index: ", ";\n"])), function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -318,11 +224,11 @@ var AlertContainer = _styledComponents["default"].div(_templateObject3(), functi
   return props.mode === "modal" ? "1300" : "";
 });
 
-var AlertInfo = _styledComponents["default"].div(_templateObject4(), function (props) {
+var AlertInfo = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  height: calc(48px - calc(", " * 2));\n  align-items: center;\n  width: 100%;\n"])), function (props) {
   return props.theme.borderThickness;
 });
 
-var AlertTitle = _styledComponents["default"].div(_templateObject5(), function (props) {
+var AlertTitle = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 8px;\n  padding-right: ", ";\n  padding-left: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  text-transform: ", ";\n"])), function (props) {
   return props.theme.titlePaddingRight;
 }, function (props) {
   return props.theme.titlePaddingLeft;
@@ -340,7 +246,7 @@ var AlertTitle = _styledComponents["default"].div(_templateObject5(), function (
   return props.theme.titleTextTransform;
 });
 
-var AlertInlineText = _styledComponents["default"].div(_templateObject6(), function (props) {
+var AlertInlineText = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: 8px;\n  padding-right: ", ";\n  padding-left: ", ";\n  flex-grow: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n"])), function (props) {
   return props.theme.inlineTextPaddingRight;
 }, function (props) {
   return props.theme.inlineTextPaddingLeft;
@@ -356,7 +262,7 @@ var AlertInlineText = _styledComponents["default"].div(_templateObject6(), funct
   return props.theme.inlineTextFontColor;
 });
 
-var AlertIcon = _styledComponents["default"].span(_templateObject7(), function (props) {
+var AlertIcon = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  margin-right: 12px;\n  padding-right: ", ";\n  padding-left: ", ";\n\n  color: ", ";\n\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
   return props.theme.iconPaddingRight;
 }, function (props) {
   return props.theme.iconPaddingLeft;
@@ -368,13 +274,13 @@ var AlertIcon = _styledComponents["default"].span(_templateObject7(), function (
   return props.theme.iconSize;
 });
 
-var AlertText = _styledComponents["default"].div(_templateObject8());
+var AlertText = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  flex-grow: 1;\n  align-items: center;\n  overflow: hidden;\n"])));
 
-var AlertContent = _styledComponents["default"].div(_templateObject9(), function (props) {
+var AlertContent = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1 1 auto;\n  padding: ", ";\n  overflow-y: auto;\n"])), function (props) {
   return "".concat(props.theme.contentPaddingTop, " ").concat(props.theme.contentPaddingRight, " ").concat(props.theme.contentPaddingBottom, " ").concat(props.theme.contentPaddingLeft);
 });
 
-var AlertCloseAction = _styledComponents["default"].button(_templateObject10(), function (props) {
+var AlertCloseAction = _styledComponents["default"].button(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  box-shadow: 0 0 0 2px transparent;\n  padding: 3px;\n  margin-left: 12px;\n  background-color: transparent;\n  color: #000000;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
   return props.theme.hoverActionBackgroundColor;
 }, function (props) {
   return props.theme.focusActionBorderColor;

package/badge/Badge.js

@@ -1,9 +1,9 @@
 "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
 });
@@ -17,27 +17,23 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  letter-spacing: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  display: flex;\n  padding-bottom: 1px;\n  padding-right: 1px;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n  align-items: center;\n  line-height: 1;\n  align-content: center;\n  flex-direction: row;\n  justify-content: center;\n"]);
+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 DxcBadge = function DxcBadge(_ref) {
   var notificationText = _ref.notificationText;
   var colorsTheme = (0, _useTheme["default"])();
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.tabs
-  }, _react["default"].createElement(StyledDxcBadge, {
+  }, /*#__PURE__*/_react["default"].createElement(StyledDxcBadge, {
     notificationText: notificationText
-  }, _react["default"].createElement("span", null, notificationText)));
+  }, /*#__PURE__*/_react["default"].createElement("span", null, notificationText)));
 };
 
-var StyledDxcBadge = _styledComponents["default"].div(_templateObject(), function (props) {
+var StyledDxcBadge = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  letter-spacing: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  display: flex;\n  padding-bottom: 1px;\n  padding-right: 1px;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n  align-items: center;\n  line-height: 1;\n  align-content: center;\n  flex-direction: row;\n  justify-content: center;\n"])), function (props) {
   return props.theme.badgeBackgroundColor;
 }, function (props) {
   return props.theme.badgeFontFamily;

package/box/Box.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -29,15 +29,11 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
 var _BackgroundColorContext = require("../BackgroundColorContext.js");
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  letter-spacing: ", ";\n  overflow: hidden;\n  width: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"]);
+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 || _typeof3(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 DxcBox = function DxcBox(_ref) {
   var shadowDepth = _ref.shadowDepth,
@@ -49,15 +45,15 @@ var DxcBox = function DxcBox(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "fitContent" : _ref$size;
   var colorsTheme = (0, _useTheme["default"])();
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.box
-  }, _react["default"].createElement(StyledDxcBox, {
+  }, /*#__PURE__*/_react["default"].createElement(StyledDxcBox, {
     shadowDepth: shadowDepth,
     display: display,
     margin: margin,
     padding: padding,
     size: size
-  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+  }, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
     color: colorsTheme.box.backgroundColor
   }, children)));
 };
@@ -78,7 +74,7 @@ var calculateWidth = function calculateWidth(margin, size, padding) {
   return sizes[size];
 };
 
-var StyledDxcBox = _styledComponents["default"].div(_templateObject(), function (_ref2) {
+var StyledDxcBox = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  letter-spacing: ", ";\n  overflow: hidden;\n  width: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"])), function (_ref2) {
   var display = _ref2.display;
   return display;
 }, function (props) {

package/button/Button.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import ButtonPropsType from "./types";
+declare const DxcButton: ({ label, mode, disabled, iconPosition, type, iconSrc, icon, onClick, margin, size, tabIndex, }: ButtonPropsType) => JSX.Element;
+export default DxcButton;