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

package/dist/tabs/Tabs.stories.js

@@ -1,130 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
-
-var _addonActions = require("@storybook/addon-actions");
-
-var _addonKnobs = require("@storybook/addon-knobs");
-
-var _readme = _interopRequireDefault(require("./readme.md"));
-
-var _Tabs = _interopRequireDefault(require("./Tabs"));
-
-var _Tab = _interopRequireDefault(require("./tab/Tab"));
-
-var _amazon = _interopRequireDefault(require("../../.storybook/public/amazon.svg"));
-
-var _ebay = _interopRequireDefault(require("../../.storybook/public/ebay.svg"));
-
-var _apple = _interopRequireDefault(require("../../.storybook/public/apple.svg"));
-
-var onChange = (0, _addonActions.action)("onChange");
-
-onChange.toString = function () {
-  return "onChangeHandler";
-};
-
-(0, _react2.storiesOf)("Form Components|Tabs", module).add("Types", function () {
-  return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Tabs["default"], {
-    activeTabIndex: 0,
-    activeTabIndexChange: onChange,
-    mode: "underlined"
-  }, _react["default"].createElement(_Tab["default"], {
-    label: "Tab ONE",
-    iconSrc: "",
-    disabled: false
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
-    label: "Tab TWO",
-    iconSrc: "",
-    disabled: false
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
-    label: "Tab THREE",
-    iconSrc: "",
-    disabled: false
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")))), _react["default"].createElement("div", null, _react["default"].createElement(_Tabs["default"], {
-    activeTabIndex: 0,
-    activeTabIndexChange: onChange,
-    mode: "filled"
-  }, _react["default"].createElement(_Tab["default"], {
-    label: "Label 1",
-    iconSrc: _amazon["default"],
-    disabled: false
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
-    label: "Label 2",
-    iconSrc: _ebay["default"],
-    disabled: false
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
-    label: "Label 3",
-    iconSrc: _apple["default"],
-    disabled: true
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")))));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {
-    mode: (0, _addonKnobs.select)("mode", {
-      filled: "filled",
-      underlined: "underlined"
-    }, "filled"),
-    theme: (0, _addonKnobs.select)("theme", {
-      light: "light",
-      dark: "dark"
-    }, "light"),
-    activeTabIndex: (0, _addonKnobs.number)("Tab Active", 0)
-  };
-};
-
-var knobTab1Props = function knobTab1Props() {
-  return {
-    label: (0, _addonKnobs.text)("First Tab Label", "Tab 1"),
-    disabled: (0, _addonKnobs["boolean"])("First Tab Disabled", false)
-  };
-};
-
-var knobTab2Props = function knobTab2Props() {
-  return {
-    label: (0, _addonKnobs.text)("Second Tab Label", "Tab 2"),
-    disabled: (0, _addonKnobs["boolean"])("Second Tab Disabled", false)
-  };
-};
-
-var knobTab3Props = function knobTab3Props() {
-  return {
-    label: (0, _addonKnobs.text)("Third Tab Label", "Tab 3"),
-    disabled: (0, _addonKnobs["boolean"])("Third Tab Disabled", false)
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Tabs", module).add("Knobs example", function () {
-  var props = knobProps();
-  var tab1Props = knobTab1Props();
-  var tab2Props = knobTab2Props();
-  var tab3Props = knobTab3Props();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, _react["default"].createElement(_Tabs["default"], (0, _extends2["default"])({}, props, {
-    activeTabIndexChange: onChange
-  }), _react["default"].createElement(_Tab["default"], (0, _extends2["default"])({}, tab1Props, {
-    iconSrc: _amazon["default"]
-  }), "Content ONE"), _react["default"].createElement(_Tab["default"], (0, _extends2["default"])({}, tab2Props, {
-    iconSrc: _ebay["default"]
-  }), "Content TWO"), _react["default"].createElement(_Tab["default"], (0, _extends2["default"])({}, tab3Props, {
-    iconSrc: _apple["default"]
-  }), "Content THREE")));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/dist/tabs/readme.md

@@ -1,78 +0,0 @@
-# DXC Tabs Component
-
-## Tab Group Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>mode: 'filled' | 'underlined'</td>
-        <td><code>'filled'</code></td>
-        <td>Uses one of the available component modes.</td>
-    </tr>
-    <tr>
-        <td>theme: 'light' | 'dark'</td>
-        <td><code>'light'</code></td>
-        <td>Uses one of the available component themes.</td>
-    </tr>
-    <tr>
-        <td>showDotIndicator: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, a dot indicator will be shown in the active tab.</td>
-    </tr>
-    <tr>
-        <td>disableRipple: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the ripple effect will be disabled.</td>
-    </tr>
-    <tr>
-        <td>activeTabIndex: number</td>
-        <td><code>0</code></td>
-        <td>The index of the active tab.</td>
-    </tr>
-    <tr>
-        <td>activeTabIndexChange: function</td>
-        <td></td>
-        <td>This function will be called when the user clicks on a tab. The index of the clicked tab will be passed as a parameter.</td>
-    </tr>
-    <tr>
-        <td>stepper: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the component should be rendered as a Stepper component.</td>
-    </tr>
-    <tr>
-        <td>orientation: 'horizontal' | 'vertical'</td>
-        <td><code>'horizontal'</code></td>
-        <td>Only if stepper, this parameter shows the stepper orientation.</td>
-    </tr>
-
-</table>
-
-## Tab Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>label: string</td>
-        <td></td>
-        <td>Text to be placed within the tab.</td>
-    </tr>
-    <tr>
-        <td>iconSrc: string</td>
-        <td></td>
-        <td>The path of an icon to be placed within the tab.</td>
-    </tr>
-    <tr>
-        <td>disabled: boolean</td>
-        <td><code>false</code></td>
-        <td>Whether the tab is disabled.</td>
-    </tr>
-</table>
-

package/dist/tabs-for-sections/TabsForSections.js

@@ -1,107 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _reactUseScrollspy = _interopRequireDefault(require("react-use-scrollspy"));
-
-var _Tabs = _interopRequireDefault(require("../tabs/Tabs"));
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 10;\n  ", "\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var TABS_HEIGHT = 54;
-
-var DxcTabsForSections = function DxcTabsForSections(_ref) {
-  var _ref$tabsMode = _ref.tabsMode,
-      tabsMode = _ref$tabsMode === void 0 ? "filled" : _ref$tabsMode,
-      _ref$tabsTheme = _ref.tabsTheme,
-      tabsTheme = _ref$tabsTheme === void 0 ? "light" : _ref$tabsTheme,
-      _ref$disableTabsRippl = _ref.disableTabsRipple,
-      disableTabsRipple = _ref$disableTabsRippl === void 0 ? false : _ref$disableTabsRippl,
-      _ref$sections = _ref.sections,
-      sections = _ref$sections === void 0 ? [] : _ref$sections,
-      _ref$stickAtPx = _ref.stickAtPx,
-      stickAtPx = _ref$stickAtPx === void 0 ? 0 : _ref$stickAtPx;
-  var tabs = sections.map(function (section) {
-    return {
-      label: section.tabLabel
-    };
-  });
-  var refs = sections.map(function () {
-    return _react["default"].createRef();
-  });
-  var activeTab = (0, _reactUseScrollspy["default"])({
-    sectionElementRefs: refs,
-    offsetPx: -stickAtPx - TABS_HEIGHT
-  });
-
-  var onTabClick = function onTabClick(tabId) {
-    var topOfElement = refs[tabId].current.offsetTop - stickAtPx - TABS_HEIGHT + 5;
-    window.scroll({
-      top: topOfElement,
-      behavior: "smooth"
-    });
-  };
-
-  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(StyledTabs, {
-    stickAtPx: stickAtPx
-  }, _react["default"].createElement(_Tabs["default"], {
-    mode: tabsMode,
-    brightness: tabsTheme,
-    disableRipple: disableTabsRipple,
-    tabs: tabs,
-    activeTabIndex: activeTab,
-    onTabClick: onTabClick
-  })), sections.map(function (section, i) {
-    return _react["default"].createElement("div", {
-      key: "section".concat(i),
-      ref: refs[i]
-    }, _react["default"].createElement(section.section, null));
-  }));
-};
-
-DxcTabsForSections.propTypes = {
-  tabsMode: _Tabs["default"].propTypes.mode,
-  tabsTheme: _Tabs["default"].propTypes.theme,
-  disableTabsRipple: _Tabs["default"].propTypes.disableRipple,
-  stickAtPx: _propTypes["default"].number,
-  sections: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    tabLabel: _propTypes["default"].string,
-    section: _propTypes["default"].func
-  }))
-};
-DxcTabsForSections.defaultProps = {
-  tabsMode: _Tabs["default"].defaultProps.mode,
-  tabsTheme: _Tabs["default"].defaultProps.theme,
-  disableTabsRipple: _Tabs["default"].defaultProps.disableRipple,
-  stickAtPx: 0,
-  sections: []
-};
-
-var StyledTabs = _styledComponents["default"].div(_templateObject(), function (_ref2) {
-  var stickAtPx = _ref2.stickAtPx;
-  return stickAtPx && "\n    position: sticky;\n    top: ".concat(stickAtPx, "px;\n  ");
-});
-
-var _default = DxcTabsForSections;
-exports["default"] = _default;

package/dist/tabs-for-sections/readme.md

@@ -1,78 +0,0 @@
-# DXC Tabs Component
-
-## Tab Group Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>mode: 'filled' | 'underlined'</td>
-        <td><code>'filled'</code></td>
-        <td>Uses one of the available component modes.</td>
-    </tr>
-    <tr>
-        <td>theme: 'light' | 'dark'</td>
-        <td><code>'light'</code></td>
-        <td>Uses one of the available component themes.</td>
-    </tr>
-    <tr>
-        <td>showDotIndicator: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, a dot indicator will be shown in the active tab.</td>
-    </tr>
-    <tr>
-        <td>disableRipple: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the ripple effect will be disabled.</td>
-    </tr>
-    <tr>
-        <td>activeTabIndex: number</td>
-        <td><code>0</code></td>
-        <td>The index of the active tab.</td>
-    </tr>
-    <tr>
-        <td>activeTabIndexChange: function</td>
-        <td></td>
-        <td>This function will be called when the user clicks on a tab. The index of the clicked tab will be passed as a parameter.</td>
-    </tr>
-    <tr>
-        <td>stepper: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the component should be rendered as a Stepper component.</td>
-    </tr>
-    <tr>
-        <td>orientation: 'horizontal' | 'vertical'</td>
-        <td><code>'horizontal'</code></td>
-        <td>Only if stepper, this parameter shows the stepper orientation.</td>
-    </tr>
-
-</table>
-
-## Tab Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>label: string</td>
-        <td></td>
-        <td>Text to be placed within the tab.</td>
-    </tr>
-    <tr>
-        <td>iconSrc: string</td>
-        <td></td>
-        <td>The path of an icon to be placed within the tab.</td>
-    </tr>
-    <tr>
-        <td>disabled: boolean</td>
-        <td><code>false</code></td>
-        <td>Whether the tab is disabled.</td>
-    </tr>
-</table>
-

package/dist/textarea/Textarea.js

@@ -1,227 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-require("../common/OpenSans.css");
-
-var _variables = require("../common/variables.js");
-
-var _utils = require("../common/utils.js");
-
-var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
-
-var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  display: inline-block;\n  position: relative;\n  height: auto;\n  width: ", ";\n  .MuiTextField-root {\n    width: 100%;\n    font-family: \"Open Sans\", sans-serif;\n    .MuiFormHelperText-root {\n      font-family: \"Open Sans\", sans-serif;\n      margin-top: 6px;\n    }\n    .MuiFormLabel-root {\n      font-size: 16px;\n      color: ", ";\n      &.Mui-disabled {\n        opacity: ", ";\n        cursor: not-allowed;\n      }\n      padding-left: \"inherit\";\n      &.Mui-focused {\n        color: ", ";\n        &.MuiInputLabel-shrink {\n          transform: \"translate(0, 1.5px) scale(0.75);\";\n        }\n      }\n      &.MuiInputLabel-shrink {\n        font-family: \"Open Sans\", sans-serif;\n        transform: \"translate(0, 1.5px) scale(0.75)\";\n      }\n      &.Mui-error {\n        color: ", ";\n      }\n\n      &:not(.MuiInputLabel-shrink) {\n        font-family: \"Open Sans\", sans-serif;\n        color: ", ";\n        & + div,\n        & + div + p {\n          color: ", ";\n        }\n      }\n\n      &.MuiInputLabel-shrink {\n        & + div::before {\n          border-color: ", ";\n        }\n        & + div + p {\n          color: ", ";\n        }\n      }\n    }\n    .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n      font-family: \"Open Sans\", sans-serif;\n      &::before {\n        border-bottom: ", ";\n      }\n      &:not(.Mui-error)::before,\n      &:not(&.Mui-focused)::before {\n        border-bottom: ", ";\n      }\n      &::after {\n        border-bottom: ", ";\n      }\n\n      .MuiInputBase-inputMultiline {\n        overflow: auto !important;\n\n        ::-webkit-scrollbar {\n          width: 3px;\n        }\n\n        ::-webkit-scrollbar-track {\n          background-color: ", ";\n          border-radius: 3px;\n        }\n\n        ::-webkit-scrollbar-thumb {\n          background-color: ", ";\n          border-radius: 3px;\n        }\n      }\n\n      &.Mui-error {\n        &::before {\n          border-width: 1px;\n          border-color: ", ";\n        }\n        &::after {\n          transform: scaleX(0);\n        }\n      }\n\n      &.Mui-focused {\n        &::after {\n          border-width: 2px;\n          border-color: ", ";\n          transform: scaleX(1);\n        }\n\n        &.Mui-error::after {\n          border-color: ", ";\n        }\n      }\n\n      &.Mui-disabled {\n        color: ", ";\n        opacity: ", ";\n        cursor: not-allowed;\n\n        &::before {\n          border-bottom: ", ";\n          border-bottom-style: solid;\n        }\n      }\n      .MuiInputBase-input {\n        padding-left: \"inherit\";\n        color: ", ";\n        text-overflow: ellipsis;\n        &.Mui-disabled {\n          cursor: not-allowed;\n        }\n      }\n\n      &:hover:not(.Mui-disabled):before &:hover:not(.Mui-error):before {\n        border-bottom: ", ";\n      }\n    }\n\n    & > p {\n      &.Mui-error {\n        color: ", ";\n      }\n      &.Mui-disabled {\n        opacity: ", ";\n        cursor: not-allowed;\n      }\n    }\n  }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var DxcTextarea = function DxcTextarea(_ref) {
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? " " : _ref$label,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? "" : _ref$name,
-      value = _ref.value,
-      _ref$assistiveText = _ref.assistiveText,
-      assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? "" : _ref$onChange,
-      _ref$onBlur = _ref.onBlur,
-      onBlur = _ref$onBlur === void 0 ? "" : _ref$onBlur,
-      _ref$numRows = _ref.numRows,
-      numRows = _ref$numRows === void 0 ? 4 : _ref$numRows,
-      _ref$invalid = _ref.invalid,
-      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-      _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required,
-      _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
-      margin = _ref.margin,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "medium" : _ref$size;
-
-  var _useState = (0, _react.useState)(""),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      innerValue = _useState2[0],
-      setInnerValue = _useState2[1];
-
-  var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
-  var colorsTheme = (0, _react.useMemo)(function () {
-    return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
-  }, [customTheme]);
-
-  var handlerTextareaChange = function handlerTextareaChange(event) {
-    if (value === null || value === undefined) {
-      if (typeof onChange === "function") {
-        setInnerValue(event.target.value);
-        onChange(event.target.value);
-      } else {
-        setInnerValue(event.target.value);
-      }
-    } else if (onChange !== "") {
-      if (typeof onChange === "function") {
-        onChange(event.target.value);
-      } else {
-        setInnerValue(event.target.value);
-      }
-    }
-  };
-
-  var handlerTextareaBlur = function handlerTextareaBlur(event) {
-    setInnerValue(event.target.value);
-
-    if (onBlur) {
-      onBlur(event.target.value);
-    }
-  };
-
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.textarea
-  }, _react["default"].createElement(TextContainer, {
-    required: required,
-    assistiveText: assistiveText,
-    margin: margin,
-    size: size
-  }, _react["default"].createElement(_TextField["default"], {
-    error: invalid,
-    value: value !== null ? value : innerValue,
-    name: name,
-    multiline: true,
-    disabled: disabled,
-    label: required ? _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_RequiredComponent["default"], null), label) : label,
-    helperText: assistiveText,
-    onChange: handlerTextareaChange,
-    onBlur: onBlur && handlerTextareaBlur || null,
-    rows: numRows,
-    placeholder: placeholder
-  })));
-};
-
-var sizes = {
-  small: "42px",
-  medium: "240px",
-  large: "480px",
-  fillParent: "100%"
-};
-
-var calculateWidth = function calculateWidth(margin, size) {
-  if (size === "fillParent") {
-    return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
-  }
-
-  return sizes[size];
-};
-
-var TextContainer = _styledComponents["default"].div(_templateObject(), 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] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
-}, function (props) {
-  return calculateWidth(props.margin, props.size);
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return props.theme.disabled;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return props.theme.error;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return "1px solid ".concat(props.theme.fontColor);
-}, function (props) {
-  return "1px solid ".concat(props.theme.fontColor);
-}, function (props) {
-  return "2px solid ".concat(props.theme.fontColor);
-}, function (props) {
-  return props.theme.scrollBarTrackColor;
-}, function (props) {
-  return props.theme.scrollBarThumbColor;
-}, function (props) {
-  return props.theme.error;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return props.theme.error;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return props.theme.disabled;
-}, function (props) {
-  return "1px solid ".concat(props.theme.fontColor);
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return "".concat(props.theme.error, " !important");
-}, function (props) {
-  return props.theme.disabled;
-});
-
-DxcTextarea.propTypes = {
-  label: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  assistiveText: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  required: _propTypes["default"].bool,
-  invalid: _propTypes["default"].bool,
-  placeholder: _propTypes["default"].string,
-  onChange: _propTypes["default"].func,
-  onBlur: _propTypes["default"].func,
-  numRows: _propTypes["default"].number,
-  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)))])
-};
-var _default = DxcTextarea;
-exports["default"] = _default;