@widergy/energy-ui 3.158.0 → 3.159.0

package/dist/esm/components/UTTabs/index.js

@@ -0,0 +1,119 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { PureComponent, forwardRef } from 'react';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import { object, arrayOf, shape, string, elementType, bool, func, number, oneOfType, node, objectOf } from 'prop-types';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import WithTheme from '../WithTheme';
+import { TEST_IDS } from '../../constants/testIds';
+import { mergeClasses } from '../../utils/classesUtils';
+import TooltipTab from './components/TooltipTab';
+import { DEFAULT_TABS_PROPS, DEFAULT_VARIANT, DEFAULT_TAB_COMPONENT } from './constants';
+import { retrieveClassNamesFromVariants } from './utils';
+import { retrieveStyle } from './theme';
+import badgeStyles from './styles.module.scss';
+const {
+  tabs
+} = TEST_IDS;
+class UTTabs extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "handleChange", (_, value) => this.props.onChange(value));
+  }
+  render() {
+    const {
+      badges,
+      classes: themeClasses,
+      classNames,
+      lastOptionProps,
+      options,
+      tabProps,
+      tabsProps,
+      tabTooltipProps,
+      variant
+    } = this.props;
+    const classes = mergeClasses(themeClasses, classNames);
+    const styles = retrieveClassNamesFromVariants(variant, classes);
+    return /*#__PURE__*/React.createElement(Tabs, _extends({
+      value: this.props.value,
+      onChange: this.handleChange,
+      classes: {
+        root: "".concat(styles.tabsRoot, " ").concat(classes.tabsRoot),
+        flexContainer: classes.flexContainer
+      },
+      TabIndicatorProps: {
+        className: "".concat(styles.indicator, " ").concat(classes.indicator),
+        children: /*#__PURE__*/React.createElement("div", null)
+      }
+    }, tabsProps), options.map((opt, i) => {
+      const tabComponent = opt.tooltip ? /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(TooltipTab, _extends({}, props, {
+        buttonRef: ref,
+        isDisabled: opt.disabled,
+        tooltip: opt.tooltip,
+        tooltipProps: tabTooltipProps
+      }))) : DEFAULT_TAB_COMPONENT;
+      const lastOption = i + 1 === options.length;
+      const lastOptionPropsFinal = lastOption && !!lastOptionProps ? lastOptionProps : {};
+      return /*#__PURE__*/React.createElement(Tab, _extends({
+        classes: {
+          root: "".concat(styles.tabRoot, " ").concat(classes.tabRoot),
+          selected: "".concat(styles.selected, " ").concat(classes.selected),
+          textColorPrimary: "".concat(styles.textColorPrimary, " ").concat(classes.textColorPrimary),
+          wrapper: "".concat(styles.label, " ").concat(classes.label)
+        },
+        key: opt.value,
+        value: opt.value,
+        label: opt.label,
+        disabled: opt.disabled,
+        icon: opt.icon,
+        component: tabComponent,
+        "data-testid": tabProps !== null && tabProps !== void 0 && tabProps.dataTestId ? "".concat(tabProps === null || tabProps === void 0 ? void 0 : tabProps.dataTestId).concat(i) : "".concat(tabs.tab).concat(i)
+      }, tabProps, lastOptionPropsFinal));
+    }), !isEmpty(badges) && badges.map(badge => /*#__PURE__*/React.createElement("div", {
+      className: "".concat(badge.styles, " ").concat(!badge.show && badgeStyles.hiddenBadge)
+    })));
+  }
+}
+UTTabs.defaultProps = {
+  badges: [],
+  classes: {},
+  classNames: {},
+  options: [],
+  variant: DEFAULT_VARIANT,
+  tabsProps: DEFAULT_TABS_PROPS
+};
+UTTabs.propTypes = {
+  badges: arrayOf(shape({
+    show: bool,
+    styles: string
+  })),
+  classes: shape({
+    tabsRoot: string,
+    tabRoot: string,
+    selected: string,
+    indicator: string,
+    textColorPrimary: string,
+    label: string
+  }),
+  classNames: objectOf(string),
+  lastOptionProps: object,
+  onChange: func.isRequired,
+  options: arrayOf(shape({
+    label: string,
+    disabled: bool,
+    icon: oneOfType([node, elementType, string]),
+    tooltip: oneOfType([bool, string])
+  })),
+  variant: string,
+  tabProps: object,
+  tabsProps: shape({
+    variant: string,
+    orientation: string
+  }),
+  tabTooltipProps: object,
+  value: oneOfType([string, number])
+};
+export default WithTheme(retrieveStyle)(UTTabs);

package/dist/esm/components/UTTabs/styles.module.scss

@@ -0,0 +1,3 @@
+.hiddenBadge {
+  visibility: hidden;
+}

package/dist/esm/components/UTTabs/theme.js

@@ -0,0 +1,121 @@
+import { getIn } from 'seamless-immutable';
+import Colors from '../../scss/variables/colors.module.scss';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    baseTabsRoot: {
+      border: getIn(theme, ['UTTabs', 'baseTabsRoot', 'border'], 0),
+      minHeight: getIn(theme, ['UTTabs', 'baseTabsRoot', 'minHeight'], 0),
+      minWidth: getIn(theme, ['UTTabs', 'baseTabsRoot', 'minWidth'], 0)
+    },
+    secondaryTabsRoot: {
+      border: getIn(theme, ['UTTabs', 'secondaryTabsRoot', 'border'], 0),
+      minHeight: getIn(theme, ['UTTabs', 'secondaryTabsRoot', 'minHeight'], 0),
+      minWidth: getIn(theme, ['UTTabs', 'secondaryTabsRoot', 'minWidth'], 0)
+    },
+    baseTabRoot: {
+      flex: getIn(theme, ['UTTabs', 'baseTabRoot', 'flex']),
+      fontFamily: getIn(theme, ['UTTabs', 'baseTabRoot', 'fontFamily']),
+      fontSize: getIn(theme, ['UTTabs', 'baseTabRoot', 'fontSize'], '12px'),
+      fontWeight: getIn(theme, ['UTTabs', 'baseTabRoot', 'fontWeight'], 'normal'),
+      textTransform: getIn(theme, ['UTTabs', 'baseTabRoot', 'textTransform'], 'none'),
+      padding: getIn(theme, ['UTTabs', 'baseTabRoot', 'padding']),
+      maxHeight: getIn(theme, ['UTTabs', 'baseTabRoot', 'maxHeight']),
+      minHeight: getIn(theme, ['UTTabs', 'baseTabRoot', 'minHeight']),
+      maxWidth: getIn(theme, ['UTTabs', 'baseTabRoot', 'maxWidth']),
+      minWidth: getIn(theme, ['UTTabs', 'baseTabRoot', 'minWidth']),
+      width: getIn(theme, ['UTTabs', 'baseTabRoot', 'width']),
+      height: getIn(theme, ['UTTabs', 'baseTabRoot', 'height']),
+      color: getIn(theme, ['UTTabs', 'baseTabRoot', 'color'], Colors.black),
+      backgroundColor: getIn(theme, ['UTTabs', 'baseTabRoot', 'backgroundColor'], 'transparent'),
+      borderRadius: getIn(theme, ['UTTabs', 'baseTabRoot', 'borderRadius'], 0),
+      opacity: getIn(theme, ['UTTabs', 'baseTabRoot', 'opacity']),
+      transition: getIn(theme, ['UTTabs', 'baseTabRoot', 'transition'], "all 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"),
+      willChange: getIn(theme, ['UTTabs', 'baseTabRoot', 'willChange']),
+      '&:hover:not($baseSelected)': {
+        backgroundColor: getIn(theme, ['UTTabs', 'baseTabRoot', '&:hover:not($baseSelected)', 'backgroundColor'], 'transparent'),
+        transition: getIn(theme, ['UTTabs', 'baseTabRoot', '&:hover:not($baseSelected)', 'transition'], 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;')
+      }
+    },
+    secondaryTabRoot: {
+      flex: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'flex']),
+      fontFamily: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'fontFamily']),
+      fontSize: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'fontSize'], '12px'),
+      fontWeight: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'fontWeight'], 'normal'),
+      textTransform: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'textTransform'], 'none'),
+      padding: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'padding']),
+      maxHeight: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'maxHeight']),
+      minHeight: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'minHeight']),
+      maxWidth: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'maxWidth']),
+      minWidth: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'minWidth']),
+      width: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'width']),
+      height: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'height']),
+      color: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'color'], Colors.black),
+      backgroundColor: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'backgroundColor'], 'transparent'),
+      borderRadius: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'borderRadius'], 0),
+      opacity: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'opacity']),
+      transition: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'transition'], "all 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"),
+      willChange: getIn(theme, ['UTTabs', 'secondaryTabRoot', 'willChange']),
+      '&:hover:not($secondarySelected)': {
+        backgroundColor: getIn(theme, ['UTTabs', 'secondaryTabRoot', '&:hover:not($secondarySelected)', 'backgroundColor'], 'transparent'),
+        transition: getIn(theme, ['UTTabs', 'secondaryTabRoot', '&:hover:not($secondarySelected)', 'transition'], 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;')
+      }
+    },
+    baseSelected: {
+      fontWeight: getIn(theme, ['UTTabs', 'baseSelected', 'fontWeight'], 'normal'),
+      color: getIn(theme, ['UTTabs', 'baseSelected', 'color'], Colors.black),
+      backgroundColor: getIn(theme, ['UTTabs', 'baseSelected', 'backgroundColor'], 'transparent')
+    },
+    secondarySelected: {
+      fontWeight: getIn(theme, ['UTTabs', 'secondarySelected', 'fontWeight'], 'normal'),
+      color: getIn(theme, ['UTTabs', 'secondarySelected', 'color'], Colors.black),
+      backgroundColor: getIn(theme, ['UTTabs', 'secondarySelected', 'backgroundColor'], 'transparent')
+    },
+    baseIndicator: {
+      flex: getIn(theme, ['UTTabs', 'baseIndicator', 'flex']),
+      height: getIn(theme, ['UTTabs', 'baseIndicator', 'height'], 3),
+      bottom: getIn(theme, ['UTTabs', 'baseIndicator', 'bottom'], 'initial'),
+      display: getIn(theme, ['UTTabs', 'baseIndicator', 'display'], 'flex'),
+      justifyContent: getIn(theme, ['UTTabs', 'baseIndicator', 'justifyContent'], 'center'),
+      backgroundColor: getIn(theme, ['UTTabs', 'baseIndicator', 'backgroundColor'], 'transparent'),
+      '& > div': {
+        borderRadius: getIn(theme, ['UTTabs', 'baseIndicator', '& > div', 'borderRadius'], 0),
+        maxWidth: getIn(theme, ['UTTabs', 'baseIndicator', '& > div', 'maxWidth'], '100%'),
+        width: getIn(theme, ['UTTabs', 'baseIndicator', '& > div', 'width'], '100%'),
+        backgroundColor: getIn(theme, ['UTTabs', 'baseIndicator', '& > div', 'backgroundColor'], Colors.black)
+      },
+      borderRadius: getIn(theme, ['UTTabs', 'baseIndicator', 'borderRadius'])
+    },
+    secondaryIndicator: {
+      flex: getIn(theme, ['UTTabs', 'secondaryIndicator', 'flex']),
+      height: getIn(theme, ['UTTabs', 'secondaryIndicator', 'height'], 3),
+      bottom: getIn(theme, ['UTTabs', 'secondaryIndicator', 'bottom'], 'initial'),
+      display: getIn(theme, ['UTTabs', 'secondaryIndicator', 'display'], 'flex'),
+      justifyContent: getIn(theme, ['UTTabs', 'secondaryIndicator', 'justifyContent'], 'center'),
+      backgroundColor: getIn(theme, ['UTTabs', 'secondaryIndicator', 'backgroundColor'], 'transparent'),
+      '& > div': {
+        borderRadius: getIn(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'borderRadius'], 0),
+        maxWidth: getIn(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'maxWidth'], '100%'),
+        width: getIn(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'width'], '100%'),
+        backgroundColor: getIn(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'backgroundColor'], Colors.black)
+      },
+      borderRadius: getIn(theme, ['UTTabs', 'secondaryIndicator', 'borderRadius'])
+    },
+    baseTextColorPrimary: {
+      color: getIn(theme, ['UTTabs', 'baseTextColorPrimary', 'color'])
+    },
+    secondaryTextColorPrimary: {
+      color: getIn(theme, ['UTTabs', 'secondaryTextColorPrimary', 'color'])
+    },
+    baseLabel: {
+      fontSize: getIn(theme, ['UTTabs', 'baseLabel', 'fontSize']),
+      fontWeight: getIn(theme, ['UTTabs', 'baseLabel', 'fontWeight'])
+    },
+    secondaryLabel: {
+      fontSize: getIn(theme, ['UTTabs', 'secondaryLabel', 'fontSize']),
+      fontWeight: getIn(theme, ['UTTabs', 'secondaryLabel', 'fontWeight'])
+    }
+  };
+};

package/dist/esm/components/UTTabs/utils.js

@@ -0,0 +1,23 @@
+import { variants } from './constants';
+export const retrieveClassNamesFromVariants = (variant, classes) => {
+  switch (variant) {
+    case variants.SECONDARY:
+      return {
+        tabsRoot: classes.secondaryTabsRoot,
+        tabRoot: classes.secondaryTabRoot,
+        selected: classes.secondarySelected,
+        indicator: classes.secondaryIndicator,
+        textColorPrimary: classes.secondaryTextColorPrimary,
+        label: classes.secondaryLabel
+      };
+    default:
+      return {
+        tabsRoot: classes.baseTabsRoot,
+        tabRoot: classes.baseTabRoot,
+        selected: classes.baseSelected,
+        indicator: classes.baseIndicator,
+        textColorPrimary: classes.baseTextColorPrimary,
+        label: classes.baseLabel
+      };
+  }
+};

package/dist/esm/components/UTTextArea/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTTextArea = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTTextArea.propTypes = {
+  version: string
+};
+export default UTTextArea;

package/dist/esm/components/UTTextArea/versions/V0/constants.js

@@ -0,0 +1,5 @@
+export const tippyProps = {
+  appendTo: () => document.body,
+  interactive: false
+};
+export const LIMIT_WARNING_FACTOR = 0.9;

package/dist/esm/components/UTTextArea/versions/V0/index.js

@@ -0,0 +1,102 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { func, string, bool, shape, objectOf, elementType, object } from 'prop-types';
+import { maxLength } from '@widergy/web-utils/lib/normalize';
+import HelpOutline from '@material-ui/icons/HelpOutline';
+import UTTooltip from '../../../UTTooltip';
+import WithTheme from '../../../WithTheme';
+import UTLabel from '../../../UTLabel';
+import { inputPropTypes, fieldType } from '../../../../types/formTypes';
+import { LIMIT_WARNING_FACTOR, tippyProps } from './constants';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const UTTextArea = _ref => {
+  let {
+    classes,
+    classNames = {},
+    dataTestId,
+    disabled,
+    field,
+    HelpIcon,
+    input,
+    inputProps = {},
+    onBlur,
+    onChange,
+    onFocus,
+    placeholder,
+    title = '',
+    tooltip,
+    value
+  } = _ref;
+  const {
+    container,
+    icon,
+    textarea,
+    label,
+    textAreaContainer,
+    componentWrapper
+  } = classNames;
+  const {
+    character_count_limit: characterCountLimit
+  } = (field === null || field === void 0 ? void 0 : field.configuration) || {};
+  const handleOnChange = _ref2 => {
+    let {
+      target
+    } = _ref2;
+    return onChange(characterCountLimit ? maxLength(characterCountLimit)(target.value) : target.value);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.titleContainer
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(label, " ").concat(styles.label),
+    withMarkdown: true
+  }, title)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.textAreaContainer, " ").concat(textAreaContainer)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.componentWrapper, " ").concat(componentWrapper)
+  }, /*#__PURE__*/React.createElement("textarea", _extends({}, inputProps, {
+    className: "".concat(styles.textarea, " ").concat(textarea, " ").concat(classes.textarea),
+    "data-testid": dataTestId,
+    "data-keyboard": input === null || input === void 0 ? void 0 : input.name,
+    onChange: handleOnChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    value: value,
+    disabled: disabled,
+    placeholder: placeholder
+  })), characterCountLimit && /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.characterCount,
+    colorTheme: value.length === characterCountLimit ? 'error' : value.length >= characterCountLimit * LIMIT_WARNING_FACTOR ? 'warning' : 'dark'
+  }, "".concat(value.length, "/").concat(characterCountLimit))), tooltip && /*#__PURE__*/React.createElement(UTTooltip, {
+    content: tooltip,
+    tippyProps: tippyProps
+  }, /*#__PURE__*/React.createElement("div", null, HelpIcon || /*#__PURE__*/React.createElement(HelpOutline, {
+    className: "".concat(icon, " ").concat(classes.icon)
+  })))));
+};
+UTTextArea.propTypes = {
+  classes: objectOf(string),
+  classNames: shape({
+    container: string,
+    icon: string,
+    label: string,
+    textarea: string,
+    textAreaContainer: string
+  }),
+  dataTestId: string,
+  disabled: bool,
+  field: fieldType,
+  HelpIcon: elementType,
+  input: object,
+  inputProps: inputPropTypes,
+  onBlur: func,
+  onChange: func,
+  onFocus: func,
+  placeholder: string,
+  title: string,
+  tooltip: string,
+  value: string
+};
+export default WithTheme(retrieveStyle)(UTTextArea);

package/dist/esm/components/UTTextArea/versions/V0/styles.module.scss

@@ -0,0 +1,29 @@
+.textarea {
+  box-sizing: border-box;
+  height: 100px;
+  width: 100%;
+}
+
+.titleContainer {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+}
+
+.label {
+  padding-right: 5px;
+}
+
+.textAreaContainer {
+  column-gap: 8px;
+  display: flex;
+  margin: 10px 0;
+}
+
+.componentWrapper {
+  width: 100%;
+}
+
+.characterCount {
+  text-align: right;
+}

package/dist/esm/components/UTTextArea/versions/V0/theme.js

@@ -0,0 +1,40 @@
+import Colors from '../../../../scss/variables/colors.module.scss';
+export const retrieveStyle = _ref => {
+  var _theme$UTTextArea, _theme$UTTextArea2, _theme$UTTextArea3, _theme$UTTextArea4, _theme$Fonts, _theme$UTTextArea5, _theme$UTTextArea6, _theme$UTTextArea7, _theme$UTTextArea8, _theme$UTTextArea9, _theme$UTTextArea0, _theme$UTTextArea1, _theme$UTTextArea10, _theme$UTTextArea11, _theme$UTTextArea12, _theme$UTTextArea13, _theme$UTTextArea14, _theme$UTTextArea15, _theme$UTTextArea16, _theme$UTTextArea17, _theme$UTTextArea18;
+  let {
+    theme
+  } = _ref;
+  return {
+    textarea: {
+      background: theme === null || theme === void 0 || (_theme$UTTextArea = theme.UTTextArea) === null || _theme$UTTextArea === void 0 || (_theme$UTTextArea = _theme$UTTextArea.textarea) === null || _theme$UTTextArea === void 0 ? void 0 : _theme$UTTextArea.background,
+      border: theme === null || theme === void 0 || (_theme$UTTextArea2 = theme.UTTextArea) === null || _theme$UTTextArea2 === void 0 || (_theme$UTTextArea2 = _theme$UTTextArea2.textarea) === null || _theme$UTTextArea2 === void 0 ? void 0 : _theme$UTTextArea2.border,
+      borderRadius: theme === null || theme === void 0 || (_theme$UTTextArea3 = theme.UTTextArea) === null || _theme$UTTextArea3 === void 0 || (_theme$UTTextArea3 = _theme$UTTextArea3.textarea) === null || _theme$UTTextArea3 === void 0 ? void 0 : _theme$UTTextArea3.borderRadius,
+      color: (theme === null || theme === void 0 || (_theme$UTTextArea4 = theme.UTTextArea) === null || _theme$UTTextArea4 === void 0 || (_theme$UTTextArea4 = _theme$UTTextArea4.textarea) === null || _theme$UTTextArea4 === void 0 ? void 0 : _theme$UTTextArea4.color) || Colors.black,
+      fontFamily: theme === null || theme === void 0 || (_theme$Fonts = theme.Fonts) === null || _theme$Fonts === void 0 ? void 0 : _theme$Fonts.fontFamily,
+      fontSize: (theme === null || theme === void 0 || (_theme$UTTextArea5 = theme.UTTextArea) === null || _theme$UTTextArea5 === void 0 || (_theme$UTTextArea5 = _theme$UTTextArea5.textarea) === null || _theme$UTTextArea5 === void 0 ? void 0 : _theme$UTTextArea5.fontSize) || 14,
+      fontWeight: theme === null || theme === void 0 || (_theme$UTTextArea6 = theme.UTTextArea) === null || _theme$UTTextArea6 === void 0 || (_theme$UTTextArea6 = _theme$UTTextArea6.textarea) === null || _theme$UTTextArea6 === void 0 ? void 0 : _theme$UTTextArea6.fontWeight,
+      height: theme === null || theme === void 0 || (_theme$UTTextArea7 = theme.UTTextArea) === null || _theme$UTTextArea7 === void 0 || (_theme$UTTextArea7 = _theme$UTTextArea7.textarea) === null || _theme$UTTextArea7 === void 0 ? void 0 : _theme$UTTextArea7.height,
+      padding: theme === null || theme === void 0 || (_theme$UTTextArea8 = theme.UTTextArea) === null || _theme$UTTextArea8 === void 0 || (_theme$UTTextArea8 = _theme$UTTextArea8.textarea) === null || _theme$UTTextArea8 === void 0 ? void 0 : _theme$UTTextArea8.padding,
+      resize: (theme === null || theme === void 0 || (_theme$UTTextArea9 = theme.UTTextArea) === null || _theme$UTTextArea9 === void 0 || (_theme$UTTextArea9 = _theme$UTTextArea9.textarea) === null || _theme$UTTextArea9 === void 0 ? void 0 : _theme$UTTextArea9.resize) || 'vertical',
+      '&:hover': {
+        background: theme === null || theme === void 0 || (_theme$UTTextArea0 = theme.UTTextArea) === null || _theme$UTTextArea0 === void 0 || (_theme$UTTextArea0 = _theme$UTTextArea0.textarea) === null || _theme$UTTextArea0 === void 0 || (_theme$UTTextArea0 = _theme$UTTextArea0.hover) === null || _theme$UTTextArea0 === void 0 ? void 0 : _theme$UTTextArea0.background,
+        border: theme === null || theme === void 0 || (_theme$UTTextArea1 = theme.UTTextArea) === null || _theme$UTTextArea1 === void 0 || (_theme$UTTextArea1 = _theme$UTTextArea1.textarea) === null || _theme$UTTextArea1 === void 0 || (_theme$UTTextArea1 = _theme$UTTextArea1.hover) === null || _theme$UTTextArea1 === void 0 ? void 0 : _theme$UTTextArea1.border,
+        color: theme === null || theme === void 0 || (_theme$UTTextArea10 = theme.UTTextArea) === null || _theme$UTTextArea10 === void 0 || (_theme$UTTextArea10 = _theme$UTTextArea10.textarea) === null || _theme$UTTextArea10 === void 0 || (_theme$UTTextArea10 = _theme$UTTextArea10.hover) === null || _theme$UTTextArea10 === void 0 ? void 0 : _theme$UTTextArea10.color
+      },
+      '&:focus, &focus-visible': {
+        background: theme === null || theme === void 0 || (_theme$UTTextArea11 = theme.UTTextArea) === null || _theme$UTTextArea11 === void 0 || (_theme$UTTextArea11 = _theme$UTTextArea11.textarea) === null || _theme$UTTextArea11 === void 0 || (_theme$UTTextArea11 = _theme$UTTextArea11.focus) === null || _theme$UTTextArea11 === void 0 ? void 0 : _theme$UTTextArea11.background,
+        border: theme === null || theme === void 0 || (_theme$UTTextArea12 = theme.UTTextArea) === null || _theme$UTTextArea12 === void 0 || (_theme$UTTextArea12 = _theme$UTTextArea12.textarea) === null || _theme$UTTextArea12 === void 0 || (_theme$UTTextArea12 = _theme$UTTextArea12.focus) === null || _theme$UTTextArea12 === void 0 ? void 0 : _theme$UTTextArea12.border,
+        color: theme === null || theme === void 0 || (_theme$UTTextArea13 = theme.UTTextArea) === null || _theme$UTTextArea13 === void 0 || (_theme$UTTextArea13 = _theme$UTTextArea13.textarea) === null || _theme$UTTextArea13 === void 0 || (_theme$UTTextArea13 = _theme$UTTextArea13.focus) === null || _theme$UTTextArea13 === void 0 ? void 0 : _theme$UTTextArea13.color,
+        outline: theme === null || theme === void 0 || (_theme$UTTextArea14 = theme.UTTextArea) === null || _theme$UTTextArea14 === void 0 || (_theme$UTTextArea14 = _theme$UTTextArea14.textarea) === null || _theme$UTTextArea14 === void 0 || (_theme$UTTextArea14 = _theme$UTTextArea14.focus) === null || _theme$UTTextArea14 === void 0 ? void 0 : _theme$UTTextArea14.outline
+      },
+      '&:disabled': {
+        background: theme === null || theme === void 0 || (_theme$UTTextArea15 = theme.UTTextArea) === null || _theme$UTTextArea15 === void 0 || (_theme$UTTextArea15 = _theme$UTTextArea15.textarea) === null || _theme$UTTextArea15 === void 0 || (_theme$UTTextArea15 = _theme$UTTextArea15.disabled) === null || _theme$UTTextArea15 === void 0 ? void 0 : _theme$UTTextArea15.background,
+        border: theme === null || theme === void 0 || (_theme$UTTextArea16 = theme.UTTextArea) === null || _theme$UTTextArea16 === void 0 || (_theme$UTTextArea16 = _theme$UTTextArea16.textarea) === null || _theme$UTTextArea16 === void 0 || (_theme$UTTextArea16 = _theme$UTTextArea16.disabled) === null || _theme$UTTextArea16 === void 0 ? void 0 : _theme$UTTextArea16.border,
+        color: theme === null || theme === void 0 || (_theme$UTTextArea17 = theme.UTTextArea) === null || _theme$UTTextArea17 === void 0 || (_theme$UTTextArea17 = _theme$UTTextArea17.textarea) === null || _theme$UTTextArea17 === void 0 || (_theme$UTTextArea17 = _theme$UTTextArea17.disabled) === null || _theme$UTTextArea17 === void 0 ? void 0 : _theme$UTTextArea17.color
+      }
+    },
+    icon: {
+      color: theme === null || theme === void 0 || (_theme$UTTextArea18 = theme.UTTextArea) === null || _theme$UTTextArea18 === void 0 || (_theme$UTTextArea18 = _theme$UTTextArea18.icon) === null || _theme$UTTextArea18 === void 0 ? void 0 : _theme$UTTextArea18.color
+    }
+  };
+};

package/dist/esm/components/UTTextArea/versions/V1/README.md

@@ -0,0 +1,33 @@
+# UTTextArea
+
+## Description
+
+`UTTextArea` is a multi-line text input component that extends `UTTextInput`. It is pre-configured to handle multiple rows of text and automatically displays the character count.
+
+## Props
+
+`UTTextArea` inherits all the props from `UTTextInput` and predefines some of them for convenience.
+
+| Name               | Type   | Default | Description                                                       |
+| ------------------ | ------ | ------- | ----------------------------------------------------------------- |
+| maxRows            | number | 4       | The number of rows the text area will display.                    |
+| showCharacterCount | bool   | true    | Whether to display the character count. Always `true` by default. |
+| ...                | ...    | ...     | Inherits all other props from `UTTextInput`.                      |
+
+## Usage
+
+### Basic Example
+
+```javascript
+<UTTextArea placeholder="Enter your text here..." />
+```
+
+### Example with Custom Rows
+
+```javascript
+<UTTextArea maxRows={6} placeholder="Enter a longer text here..." />
+```
+
+## Notes
+
+For more detailed information on inherited props, refer to the documentation for `UTTextInput`.

package/dist/esm/components/UTTextArea/versions/V1/index.js

@@ -0,0 +1,11 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { propTypes as TextInputPropTypes } from '../../../UTTextInput/versions/V1';
+import UTTextInput from '../../../UTTextInput';
+const UTTextArea = props => /*#__PURE__*/React.createElement(UTTextInput, _extends({
+  showCharacterCount: true,
+  maxRows: 4,
+  version: "V1"
+}, props));
+UTTextArea.propTypes = TextInputPropTypes;
+export default UTTextArea;

package/dist/esm/components/UTTextInput/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTTextInput = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTTextInput.propTypes = {
+  version: string
+};
+export default UTTextInput;

package/dist/esm/components/UTTextInput/versions/V0/constants.js

@@ -0,0 +1,5 @@
+export const INPUT_TYPES = {
+  PASSWORD: 'password',
+  TEXT: 'text',
+  NUMBER: 'number'
+};