@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/components/UTTextArea/UTTextArea.stories.js

@@ -0,0 +1,342 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.V0Legado = exports.V0ConTooltip = exports.SoloLectura = exports.Requerido = exports.Playground = exports.Pequeno = exports.MasFilas = exports.Deshabilitado = exports.Default = exports.ConTitulo = exports.ConTextoDeAyuda = exports.ConLimiteDeCaracteres = exports.ConError = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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); }
+var _default = exports.default = {
+  title: 'Energy-UI/UTTextArea',
+  component: _.default,
+  args: {
+    version: 'V1',
+    placeholder: 'Escribí tu texto aquí...'
+  },
+  argTypes: {
+    version: {
+      control: 'select',
+      description: 'Versión del componente. V1 extiende UTTextInput con soporte para design tokens.',
+      options: ['V0', 'V1'],
+      table: {
+        defaultValue: {
+          summary: 'V0'
+        },
+        type: {
+          summary: "'V0' | 'V1'"
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Texto del label que aparece sobre el campo. (solo V1)',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Texto de placeholder que se muestra cuando el campo está vacío.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    value: {
+      control: 'text',
+      description: 'Valor actual del campo de texto.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'Callback que se ejecuta al cambiar el valor del campo.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'func'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Si es `true`, el campo está deshabilitado y no acepta interacciones.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Si es `true`, el campo muestra el valor pero no permite editarlo.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    required: {
+      control: 'boolean',
+      description: 'Si es `true`, muestra un indicador `*` junto al label. (solo V1)',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    error: {
+      control: 'text',
+      description: 'Mensaje de error. Si se pasa un string, se muestra como validación debajo del campo. (solo V1)',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string | bool'
+        }
+      }
+    },
+    helpText: {
+      control: 'text',
+      description: 'Texto de ayuda que se muestra debajo del campo en color gris. (solo V1)',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    maxLength: {
+      control: 'number',
+      description: 'Límite máximo de caracteres. En V1 habilita el contador de caracteres automáticamente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    maxRows: {
+      control: 'number',
+      description: 'Cantidad máxima de filas visibles antes de activar el scroll.',
+      table: {
+        defaultValue: {
+          summary: '4'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    inputSize: {
+      control: 'select',
+      description: 'Tamaño del campo de texto. Afecta el padding interno. (solo V1)',
+      options: ['medium', 'small'],
+      table: {
+        defaultValue: {
+          summary: 'medium'
+        },
+        type: {
+          summary: "'medium' | 'small'"
+        }
+      }
+    },
+    titleVariant: {
+      control: 'select',
+      description: 'Tamaño del label del campo. (solo V1)',
+      options: ['large', 'small'],
+      table: {
+        defaultValue: {
+          summary: 'large'
+        },
+        type: {
+          summary: "'large' | 'small'"
+        }
+      }
+    },
+    tooltip: {
+      control: 'text',
+      description: 'Texto del tooltip que aparece al hacer hover sobre el ícono de ayuda. (V0)',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'UTTextArea es un campo de texto multilínea. La versión V1 extiende UTTextInput con `showCharacterCount=true` y `maxRows=4` por defecto. La versión V0 es la implementación legada con estilos propios.'
+      }
+    }
+  }
+};
+const StatefulTextArea = args => {
+  var _args$value;
+  const [value, setValue] = (0, _react.useState)((_args$value = args.value) !== null && _args$value !== void 0 ? _args$value : '');
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+    value: value,
+    onChange: setValue
+  }));
+};
+const Playground = exports.Playground = {
+  render: args => /*#__PURE__*/_react.default.createElement(StatefulTextArea, args),
+  args: {
+    title: 'Descripción',
+    placeholder: 'Escribí tu texto aquí...',
+    maxLength: 200,
+    maxRows: 4,
+    version: 'V1'
+  },
+  name: 'Playground'
+};
+const Default = exports.Default = {
+  args: {
+    placeholder: 'Escribí tu texto aquí...',
+    version: 'V1'
+  }
+};
+const ConTitulo = exports.ConTitulo = {
+  args: {
+    title: 'Motivo de contacto',
+    placeholder: 'Describí tu consulta...',
+    version: 'V1'
+  },
+  name: 'Con título'
+};
+const Requerido = exports.Requerido = {
+  args: {
+    title: 'Motivo de contacto',
+    placeholder: 'Este campo es obligatorio',
+    required: true,
+    version: 'V1'
+  }
+};
+const ConError = exports.ConError = {
+  args: {
+    title: 'Descripción',
+    placeholder: 'Escribí tu texto aquí...',
+    value: 'Texto con error',
+    error: 'El texto ingresado no cumple con el formato requerido.',
+    version: 'V1'
+  },
+  name: 'Con error'
+};
+const Deshabilitado = exports.Deshabilitado = {
+  args: {
+    title: 'Descripción',
+    placeholder: 'Campo deshabilitado',
+    disabled: true,
+    version: 'V1'
+  }
+};
+const SoloLectura = exports.SoloLectura = {
+  args: {
+    title: 'Observaciones',
+    value: 'Este es un texto de solo lectura que no puede ser editado por el usuario, solo visualizado.',
+    readOnly: true,
+    version: 'V1'
+  },
+  name: 'Solo lectura'
+};
+const ConTextoDeAyuda = exports.ConTextoDeAyuda = {
+  args: {
+    title: 'Descripción',
+    placeholder: 'Escribí una breve descripción...',
+    helpText: 'Máximo 500 caracteres. No incluyas datos personales.',
+    version: 'V1'
+  },
+  name: 'Con texto de ayuda'
+};
+const ConLimiteDeCaracteres = exports.ConLimiteDeCaracteres = {
+  render: args => /*#__PURE__*/_react.default.createElement(StatefulTextArea, args),
+  args: {
+    title: 'Descripción',
+    placeholder: 'Escribí tu texto aquí...',
+    maxLength: 100,
+    maxRows: 4,
+    version: 'V1'
+  },
+  name: 'Con límite de caracteres'
+};
+const Pequeno = exports.Pequeno = {
+  args: {
+    title: 'Comentario',
+    placeholder: 'Comentario corto...',
+    inputSize: 'small',
+    titleVariant: 'small',
+    maxLength: 80,
+    version: 'V1'
+  },
+  name: 'Pequeño'
+};
+const MasFilas = exports.MasFilas = {
+  render: args => /*#__PURE__*/_react.default.createElement(StatefulTextArea, args),
+  args: {
+    title: 'Descripción extendida',
+    placeholder: 'El área crece hasta 8 filas...',
+    maxRows: 8,
+    maxLength: 500,
+    version: 'V1'
+  },
+  name: 'Más filas (maxRows=8)'
+};
+const V0Legado = exports.V0Legado = {
+  args: {
+    title: 'Descripción',
+    placeholder: 'Versión legada V0...',
+    version: 'V0',
+    value: '',
+    onChange: () => {}
+  },
+  name: 'V0 (legado)'
+};
+const V0ConTooltip = exports.V0ConTooltip = {
+  args: {
+    title: 'Observaciones',
+    placeholder: 'Escribí tus observaciones...',
+    tooltip: 'Este campo se usa para registrar observaciones adicionales sobre el caso.',
+    version: 'V0',
+    value: '',
+    onChange: () => {}
+  },
+  name: 'V0 con tooltip'
+};

package/dist/components/UTTextArea/index.js

@@ -1 +1,26 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_V=_interopRequireDefault(require("./versions/V0")),_V2=_interopRequireDefault(require("./versions/V1"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const UTTextArea=_ref=>{let{version:version="V0",...props}=_ref;const Component={V0:_V.default,V1:_V2.default}[version];return _react.default.createElement(Component,props)};UTTextArea.propTypes={version:_propTypes.string};var _default=exports.default=UTTextArea;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _V = _interopRequireDefault(require("./versions/V0"));
+var _V2 = _interopRequireDefault(require("./versions/V1"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const UTTextArea = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0: _V.default,
+    V1: _V2.default
+  }[version];
+  return /*#__PURE__*/_react.default.createElement(Component, props);
+};
+UTTextArea.propTypes = {
+  version: _propTypes.string
+};
+var _default = exports.default = UTTextArea;

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

@@ -1 +1,11 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.tippyProps=exports.LIMIT_WARNING_FACTOR=void 0;const tippyProps=exports.tippyProps={appendTo:()=>document.body,interactive:!1},LIMIT_WARNING_FACTOR=exports.LIMIT_WARNING_FACTOR=.9;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tippyProps = exports.LIMIT_WARNING_FACTOR = void 0;
+const tippyProps = exports.tippyProps = {
+  appendTo: () => document.body,
+  interactive: false
+};
+const LIMIT_WARNING_FACTOR = exports.LIMIT_WARNING_FACTOR = 0.9;

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

@@ -1 +1,109 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_normalize=require("@widergy/web-utils/lib/normalize"),_HelpOutline=_interopRequireDefault(require("@material-ui/icons/HelpOutline")),_UTTooltip=_interopRequireDefault(require("../../../UTTooltip")),_WithTheme=_interopRequireDefault(require("../../../WithTheme")),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_formTypes=require("../../../../types/formTypes"),_constants=require("./constants"),_theme=require("./theme"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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)}const UTTextArea=_ref=>{let{classes:classes,classNames:classNames={},dataTestId:dataTestId,disabled:disabled,field:field,HelpIcon:HelpIcon,input:input,inputProps:inputProps={},onBlur:onBlur,onChange:onChange,onFocus:onFocus,placeholder:placeholder,title:title="",tooltip:tooltip,value:value}=_ref;const{container:container,icon:icon,textarea:textarea,label:label,textAreaContainer:textAreaContainer,componentWrapper:componentWrapper}=classNames,{character_count_limit:characterCountLimit}=(null==field?void 0:field.configuration)||{};return _react.default.createElement("div",{className:container},_react.default.createElement("div",{className:_stylesModule.default.titleContainer},_react.default.createElement(_UTLabel.default,{className:"".concat(label," ").concat(_stylesModule.default.label),withMarkdown:!0},title)),_react.default.createElement("div",{className:"".concat(_stylesModule.default.textAreaContainer," ").concat(textAreaContainer)},_react.default.createElement("div",{className:"".concat(_stylesModule.default.componentWrapper," ").concat(componentWrapper)},_react.default.createElement("textarea",_extends({},inputProps,{className:"".concat(_stylesModule.default.textarea," ").concat(textarea," ").concat(classes.textarea),"data-testid":dataTestId,"data-keyboard":null==input?void 0:input.name,onChange:_ref2=>{let{target:target}=_ref2;return onChange(characterCountLimit?(0,_normalize.maxLength)(characterCountLimit)(target.value):target.value)},onBlur:onBlur,onFocus:onFocus,value:value,disabled:disabled,placeholder:placeholder})),characterCountLimit&&_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.characterCount,colorTheme:value.length===characterCountLimit?"error":value.length>=characterCountLimit*_constants.LIMIT_WARNING_FACTOR?"warning":"dark"},"".concat(value.length,"/").concat(characterCountLimit))),tooltip&&_react.default.createElement(_UTTooltip.default,{content:tooltip,tippyProps:_constants.tippyProps},_react.default.createElement("div",null,HelpIcon||_react.default.createElement(_HelpOutline.default,{className:"".concat(icon," ").concat(classes.icon)})))))};UTTextArea.propTypes={classes:(0,_propTypes.objectOf)(_propTypes.string),classNames:(0,_propTypes.shape)({container:_propTypes.string,icon:_propTypes.string,label:_propTypes.string,textarea:_propTypes.string,textAreaContainer:_propTypes.string}),dataTestId:_propTypes.string,disabled:_propTypes.bool,field:_formTypes.fieldType,HelpIcon:_propTypes.elementType,input:_propTypes.object,inputProps:_formTypes.inputPropTypes,onBlur:_propTypes.func,onChange:_propTypes.func,onFocus:_propTypes.func,placeholder:_propTypes.string,title:_propTypes.string,tooltip:_propTypes.string,value:_propTypes.string};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTTextArea);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _normalize = require("@widergy/web-utils/lib/normalize");
+var _HelpOutline = _interopRequireDefault(require("@material-ui/icons/HelpOutline"));
+var _UTTooltip = _interopRequireDefault(require("../../../UTTooltip"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _formTypes = require("../../../../types/formTypes");
+var _constants = require("./constants");
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+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 ? (0, _normalize.maxLength)(characterCountLimit)(target.value) : target.value);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titleContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: "".concat(label, " ").concat(_stylesModule.default.label),
+    withMarkdown: true
+  }, title)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.textAreaContainer, " ").concat(textAreaContainer)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.componentWrapper, " ").concat(componentWrapper)
+  }, /*#__PURE__*/_react.default.createElement("textarea", _extends({}, inputProps, {
+    className: "".concat(_stylesModule.default.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.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.characterCount,
+    colorTheme: value.length === characterCountLimit ? 'error' : value.length >= characterCountLimit * _constants.LIMIT_WARNING_FACTOR ? 'warning' : 'dark'
+  }, "".concat(value.length, "/").concat(characterCountLimit))), tooltip && /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    content: tooltip,
+    tippyProps: _constants.tippyProps
+  }, /*#__PURE__*/_react.default.createElement("div", null, HelpIcon || /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
+    className: "".concat(icon, " ").concat(classes.icon)
+  })))));
+};
+UTTextArea.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.shape)({
+    container: _propTypes.string,
+    icon: _propTypes.string,
+    label: _propTypes.string,
+    textarea: _propTypes.string,
+    textAreaContainer: _propTypes.string
+  }),
+  dataTestId: _propTypes.string,
+  disabled: _propTypes.bool,
+  field: _formTypes.fieldType,
+  HelpIcon: _propTypes.elementType,
+  input: _propTypes.object,
+  inputProps: _formTypes.inputPropTypes,
+  onBlur: _propTypes.func,
+  onChange: _propTypes.func,
+  onFocus: _propTypes.func,
+  placeholder: _propTypes.string,
+  title: _propTypes.string,
+  tooltip: _propTypes.string,
+  value: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTTextArea);

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

@@ -1 +1,48 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _colorsModule=_interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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:theme}=_ref;return{textarea:{background:null==theme||null===(_theme$UTTextArea=theme.UTTextArea)||void 0===_theme$UTTextArea||null===(_theme$UTTextArea=_theme$UTTextArea.textarea)||void 0===_theme$UTTextArea?void 0:_theme$UTTextArea.background,border:null==theme||null===(_theme$UTTextArea2=theme.UTTextArea)||void 0===_theme$UTTextArea2||null===(_theme$UTTextArea2=_theme$UTTextArea2.textarea)||void 0===_theme$UTTextArea2?void 0:_theme$UTTextArea2.border,borderRadius:null==theme||null===(_theme$UTTextArea3=theme.UTTextArea)||void 0===_theme$UTTextArea3||null===(_theme$UTTextArea3=_theme$UTTextArea3.textarea)||void 0===_theme$UTTextArea3?void 0:_theme$UTTextArea3.borderRadius,color:(null==theme||null===(_theme$UTTextArea4=theme.UTTextArea)||void 0===_theme$UTTextArea4||null===(_theme$UTTextArea4=_theme$UTTextArea4.textarea)||void 0===_theme$UTTextArea4?void 0:_theme$UTTextArea4.color)||_colorsModule.default.black,fontFamily:null==theme||null===(_theme$Fonts=theme.Fonts)||void 0===_theme$Fonts?void 0:_theme$Fonts.fontFamily,fontSize:(null==theme||null===(_theme$UTTextArea5=theme.UTTextArea)||void 0===_theme$UTTextArea5||null===(_theme$UTTextArea5=_theme$UTTextArea5.textarea)||void 0===_theme$UTTextArea5?void 0:_theme$UTTextArea5.fontSize)||14,fontWeight:null==theme||null===(_theme$UTTextArea6=theme.UTTextArea)||void 0===_theme$UTTextArea6||null===(_theme$UTTextArea6=_theme$UTTextArea6.textarea)||void 0===_theme$UTTextArea6?void 0:_theme$UTTextArea6.fontWeight,height:null==theme||null===(_theme$UTTextArea7=theme.UTTextArea)||void 0===_theme$UTTextArea7||null===(_theme$UTTextArea7=_theme$UTTextArea7.textarea)||void 0===_theme$UTTextArea7?void 0:_theme$UTTextArea7.height,padding:null==theme||null===(_theme$UTTextArea8=theme.UTTextArea)||void 0===_theme$UTTextArea8||null===(_theme$UTTextArea8=_theme$UTTextArea8.textarea)||void 0===_theme$UTTextArea8?void 0:_theme$UTTextArea8.padding,resize:(null==theme||null===(_theme$UTTextArea9=theme.UTTextArea)||void 0===_theme$UTTextArea9||null===(_theme$UTTextArea9=_theme$UTTextArea9.textarea)||void 0===_theme$UTTextArea9?void 0:_theme$UTTextArea9.resize)||"vertical","&:hover":{background:null==theme||null===(_theme$UTTextArea0=theme.UTTextArea)||void 0===_theme$UTTextArea0||null===(_theme$UTTextArea0=_theme$UTTextArea0.textarea)||void 0===_theme$UTTextArea0||null===(_theme$UTTextArea0=_theme$UTTextArea0.hover)||void 0===_theme$UTTextArea0?void 0:_theme$UTTextArea0.background,border:null==theme||null===(_theme$UTTextArea1=theme.UTTextArea)||void 0===_theme$UTTextArea1||null===(_theme$UTTextArea1=_theme$UTTextArea1.textarea)||void 0===_theme$UTTextArea1||null===(_theme$UTTextArea1=_theme$UTTextArea1.hover)||void 0===_theme$UTTextArea1?void 0:_theme$UTTextArea1.border,color:null==theme||null===(_theme$UTTextArea10=theme.UTTextArea)||void 0===_theme$UTTextArea10||null===(_theme$UTTextArea10=_theme$UTTextArea10.textarea)||void 0===_theme$UTTextArea10||null===(_theme$UTTextArea10=_theme$UTTextArea10.hover)||void 0===_theme$UTTextArea10?void 0:_theme$UTTextArea10.color},"&:focus, &focus-visible":{background:null==theme||null===(_theme$UTTextArea11=theme.UTTextArea)||void 0===_theme$UTTextArea11||null===(_theme$UTTextArea11=_theme$UTTextArea11.textarea)||void 0===_theme$UTTextArea11||null===(_theme$UTTextArea11=_theme$UTTextArea11.focus)||void 0===_theme$UTTextArea11?void 0:_theme$UTTextArea11.background,border:null==theme||null===(_theme$UTTextArea12=theme.UTTextArea)||void 0===_theme$UTTextArea12||null===(_theme$UTTextArea12=_theme$UTTextArea12.textarea)||void 0===_theme$UTTextArea12||null===(_theme$UTTextArea12=_theme$UTTextArea12.focus)||void 0===_theme$UTTextArea12?void 0:_theme$UTTextArea12.border,color:null==theme||null===(_theme$UTTextArea13=theme.UTTextArea)||void 0===_theme$UTTextArea13||null===(_theme$UTTextArea13=_theme$UTTextArea13.textarea)||void 0===_theme$UTTextArea13||null===(_theme$UTTextArea13=_theme$UTTextArea13.focus)||void 0===_theme$UTTextArea13?void 0:_theme$UTTextArea13.color,outline:null==theme||null===(_theme$UTTextArea14=theme.UTTextArea)||void 0===_theme$UTTextArea14||null===(_theme$UTTextArea14=_theme$UTTextArea14.textarea)||void 0===_theme$UTTextArea14||null===(_theme$UTTextArea14=_theme$UTTextArea14.focus)||void 0===_theme$UTTextArea14?void 0:_theme$UTTextArea14.outline},"&:disabled":{background:null==theme||null===(_theme$UTTextArea15=theme.UTTextArea)||void 0===_theme$UTTextArea15||null===(_theme$UTTextArea15=_theme$UTTextArea15.textarea)||void 0===_theme$UTTextArea15||null===(_theme$UTTextArea15=_theme$UTTextArea15.disabled)||void 0===_theme$UTTextArea15?void 0:_theme$UTTextArea15.background,border:null==theme||null===(_theme$UTTextArea16=theme.UTTextArea)||void 0===_theme$UTTextArea16||null===(_theme$UTTextArea16=_theme$UTTextArea16.textarea)||void 0===_theme$UTTextArea16||null===(_theme$UTTextArea16=_theme$UTTextArea16.disabled)||void 0===_theme$UTTextArea16?void 0:_theme$UTTextArea16.border,color:null==theme||null===(_theme$UTTextArea17=theme.UTTextArea)||void 0===_theme$UTTextArea17||null===(_theme$UTTextArea17=_theme$UTTextArea17.textarea)||void 0===_theme$UTTextArea17||null===(_theme$UTTextArea17=_theme$UTTextArea17.disabled)||void 0===_theme$UTTextArea17?void 0:_theme$UTTextArea17.color}},icon:{color:null==theme||null===(_theme$UTTextArea18=theme.UTTextArea)||void 0===_theme$UTTextArea18||null===(_theme$UTTextArea18=_theme$UTTextArea18.icon)||void 0===_theme$UTTextArea18?void 0:_theme$UTTextArea18.color}}};exports.retrieveStyle=retrieveStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _colorsModule = _interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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) || _colorsModule.default.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
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/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/components/UTTextArea/versions/V1/index.js

@@ -1 +1,18 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_V=require("../../../UTTextInput/versions/V1"),_UTTextInput=_interopRequireDefault(require("../../../UTTextInput"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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)}const UTTextArea=props=>_react.default.createElement(_UTTextInput.default,_extends({showCharacterCount:!0,maxRows:4,version:"V1"},props));UTTextArea.propTypes=_V.propTypes;var _default=exports.default=UTTextArea;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _V = require("../../../UTTextInput/versions/V1");
+var _UTTextInput = _interopRequireDefault(require("../../../UTTextInput"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const UTTextArea = props => /*#__PURE__*/_react.default.createElement(_UTTextInput.default, _extends({
+  showCharacterCount: true,
+  maxRows: 4,
+  version: "V1"
+}, props));
+UTTextArea.propTypes = _V.propTypes;
+var _default = exports.default = UTTextArea;