@widergy/energy-ui 3.22.4 → 3.23.0

package/dist/components/UTTextInput/versions/V1/README.md

@@ -0,0 +1,85 @@
+# UTTextInput
+
+## Description
+
+`UTTextInput` is a configurable text input component that supports various customization options such as icons, validation messages, and action buttons. This component is based on Material UI and can be adapted for both single-line inputs and multi-line text areas.
+
+## Props
+
+| Name                  | Type                                                      | Default | Description                                                                                              |
+| --------------------- | --------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
+| action                | object                                                    |         | Configuration for the action button that appears at the end of the input.                                |
+| alwaysShowPlaceholder | bool                                                      | false   | Whether the placeholder should always be displayed, even when the input is focused.                      |
+| blurOnSubmit          | bool                                                      | false   | Whether the input should lose focus after submitting (e.g., after pressing "Enter").                     |
+| classNames            | objectOf(string)                                          |         | Additional classes for customizing the component, independent of Material-UI.                            |
+| disabled              | bool                                                      | false   | Disables the input field.                                                                                |
+| error                 | string                                                    |         | Error message displayed below the input field.                                                           |
+| helpText              | string                                                    |         | Help text displayed below the input field.                                                               |
+| id                    | string                                                    |         | Unique identifier for the input field.                                                                   |
+| inputRef              | oneOfType([func, object])                                 |         | Reference to the input field to access methods like `focus`, `blur`, or `clear`.                         |
+| inputSize             | string                                                    | 'large' | Size of the input field. One of: `small`, `large`.                                                       |
+| maxLength             | number                                                    |         | Maximum number of characters allowed in the input field.                                                 |
+| maxRows               | number                                                    | 1       | Maximum number of rows the text area can display. If greater than 1, the input becomes a text area.      |
+| onBlur                | func                                                      |         | Function called when the input field loses focus.                                                        |
+| onChange              | func                                                      |         | Function called when the input field value changes.                                                      |
+| onFocus               | func                                                      |         | Function called when the input field gains focus.                                                        |
+| onSubmitEditing       | func                                                      |         | Function called when the input field is submitted (e.g., pressing Enter on a keyboard).                  |
+| placeholder           | string                                                    |         | Placeholder text displayed when the input field is empty.                                                |
+| prefix                | string                                                    |         | Text displayed before the entered value in the input field.                                              |
+| readOnly              | bool                                                      | false   | Makes the input field read-only.                                                                         |
+| required              | bool                                                      | false   | Marks the input field as required.                                                                       |
+| returnKeyType         | string                                                    | 'done'  | Determines the return key type on the keyboard (e.g., `done`, `next`).                                   |
+| RightIcon             | elementType                                               |         | Icon displayed on the right side of the input field.                                                     |
+| showCharacterCount    | bool                                                      | false   | Whether the character count should be displayed (if `maxLength` is defined).                             |
+| style                 | shape({ container: object, input: object, root: object }) |         | Style object to customize the input field. Can contain `root`, `container`, `input`, or `action` styles. |
+| suffix                | string                                                    |         | Suffix text to be displayed after the entered value in the input field.                                  |
+| title                 | string                                                    |         | Title displayed above the input field.                                                                   |
+| titleVariant          | string                                                    | 'large' | Variant of the title, can be `small` or `large`.                                                         |
+| tooltip               | string                                                    |         | Tooltip text displayed next to the input field.                                                          |
+| type                  | string                                                    | 'text'  | Type of input field (e.g., 'text', 'password').                                                          |
+| validations           | object                                                    |         | Object containing validation rules to be applied to the input field.                                     |
+| value                 | string                                                    | ''      | Current value of the input field.                                                                        |
+
+### action
+
+The `action` object allows configuring the action button that appears inside the input field, such as a clear or submit icon.
+
+| Name     | Type        | Description                                        |
+| -------- | ----------- | -------------------------------------------------- |
+| icon     | elementType | Icon to be displayed in the action button.         |
+| onClick  | func        | Function called when the action button is clicked. |
+| disabled | bool        | Disables the action button.                        |
+| text     | string      | Text displayed inside the action button, if any.   |
+
+### titleVariant
+
+The value of `titleVariant` must be one of the following:
+
+- "small"
+- "large"
+
+### inputSize
+
+The value of `inputSize` must be one of the following:
+
+- "small"
+- "large"
+
+### type
+
+The value of `type` must be one of the following:
+
+- "text"
+- "password"
+
+### Right Icon
+
+If a `RightIcon` is provided and an error occurs, the `RightIcon` will be replaced by an error icon.
+
+### Structure of Validations
+
+For detailed information about the structure of validations, please refer to the UTValidation component documentation.
+
+### Handling Errors
+
+Errors can be displayed below the text input using either the `error` prop or the `validations` prop.

package/dist/components/UTTextInput/versions/V1/components/ActionAdornment/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../../../../../UTButton"));
+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 ActionAdornment = _ref => {
+  let {
+    action = {},
+    disabled,
+    classNames
+  } = _ref;
+  if (!action) return null;
+  return /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    disabled: disabled,
+    classNames: classNames,
+    variant: "text",
+    size: "small"
+  }, action), action.text);
+};
+ActionAdornment.propTypes = {
+  action: _propTypes.object,
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  disabled: _propTypes.bool
+};
+var _default = exports.default = ActionAdornment;

package/dist/components/UTTextInput/versions/V1/components/IconAdornment/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ICON_SIZE = exports.ERROR_ICON = void 0;
+const ERROR_ICON = exports.ERROR_ICON = 'IconAlertCircle';
+const ICON_SIZE = exports.ICON_SIZE = 20;

package/dist/components/UTTextInput/versions/V1/components/IconAdornment/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTIcon = _interopRequireDefault(require("../../../../../UTIcon"));
+var _componentUtils = require("../../../../../../utils/componentUtils");
+var _constants = require("./constants");
+var _utils = require("./utils");
+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 IconAdornment = _ref => {
+  let {
+    changeOnError = false,
+    changeOnFocus = false,
+    colorTheme,
+    error,
+    focused,
+    Icon,
+    inputStyle,
+    shade
+  } = _ref;
+  const IconToRender = error && changeOnError ? _constants.ERROR_ICON : Icon;
+  if (!IconToRender) return null;
+  return (0, _componentUtils.isUTIcon)(IconToRender) ? /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
+    name: IconToRender,
+    size: _constants.ICON_SIZE
+  }, (0, _utils.getIconColorProps)(changeOnError, changeOnFocus, colorTheme, error, focused, shade))) : /*#__PURE__*/_react.default.createElement(Icon, {
+    size: _constants.ICON_SIZE,
+    fill: inputStyle.root.color
+  });
+};
+IconAdornment.propTypes = {
+  changeOnError: _propTypes.bool,
+  changeOnFocus: _propTypes.bool,
+  colorTheme: _propTypes.string,
+  error: (0, _propTypes.oneOfType)([_propTypes.bool, _propTypes.string]),
+  focused: _propTypes.bool,
+  Icon: _propTypes.elementType,
+  inputStyle: (0, _propTypes.shape)({
+    root: _propTypes.object
+  }),
+  shade: _propTypes.string
+};
+var _default = exports.default = IconAdornment;

package/dist/components/UTTextInput/versions/V1/components/IconAdornment/utils.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getIconColorProps = void 0;
+const getIconColorProps = (changeOnError, changeOnFocus, colorTheme, error, focused, shade) => changeOnError && error ? {
+  colorTheme: 'error',
+  shade: '04'
+} : changeOnFocus && focused ? {
+  colorTheme: 'accent',
+  shade: '04'
+} : {
+  colorTheme: colorTheme || 'gray',
+  shade
+};
+exports.getIconColorProps = getIconColorProps;

package/dist/components/UTTextInput/versions/V1/components/PrefixAdornment/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PrefixAdornment = _ref => {
+  let {
+    text
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    variant: "small",
+    weight: "medium"
+  }, text);
+};
+PrefixAdornment.propTypes = {
+  text: _propTypes.string
+};
+var _default = exports.default = PrefixAdornment;

package/dist/components/UTTextInput/versions/V1/components/SuffixAdornment/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SuffixAdornment = _ref => {
+  let {
+    text
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray"
+  }, text);
+};
+SuffixAdornment.propTypes = {
+  text: _propTypes.string
+};
+var _default = exports.default = SuffixAdornment;

package/dist/components/UTTextInput/versions/V1/components/TooltipAdornment/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTTooltip = _interopRequireDefault(require("../../../../../UTTooltip"));
+var _UTIcon = _interopRequireDefault(require("../../../../../UTIcon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TooltipAdornment = _ref => {
+  let {
+    tooltip
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    content: tooltip
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    name: "IconInfoCircle",
+    colorTheme: "gray"
+  })));
+};
+TooltipAdornment.propTypes = {
+  tooltip: _propTypes.string
+};
+var _default = exports.default = TooltipAdornment;

package/dist/components/UTTextInput/versions/V1/index.js

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.default = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _utils = require("../../../UTValidation/utils");
+var _classesUtils = require("../../../../utils/classesUtils");
+var _UTValidation = _interopRequireWildcard(require("../../../UTValidation"));
+var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _theme = require("./theme");
+var _ActionAdornment = _interopRequireDefault(require("./components/ActionAdornment"));
+var _IconAdornment = _interopRequireDefault(require("./components/IconAdornment"));
+var _PrefixAdornment = _interopRequireDefault(require("./components/PrefixAdornment"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _SuffixAdornment = _interopRequireDefault(require("./components/SuffixAdornment"));
+var _TooltipAdornment = _interopRequireDefault(require("./components/TooltipAdornment"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const UTTextInput = _ref => {
+  let {
+    action,
+    alwaysShowPlaceholder,
+    classes: theme,
+    classNames = {},
+    disabled,
+    error,
+    helpText,
+    id,
+    LeftIcon,
+    maxLength,
+    maxRows = 1,
+    onBlur,
+    onChange = () => {},
+    onFocus,
+    placeholder,
+    prefix,
+    readOnly,
+    required,
+    RightIcon,
+    showCharacterCount,
+    suffix,
+    title,
+    titleVariant = 'large',
+    tooltip,
+    type,
+    validations,
+    value = null
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const handleFocus = event => {
+    setFocused(true);
+    onFocus === null || onFocus === void 0 || onFocus(event);
+  };
+  const handleBlur = event => {
+    setFocused(false);
+    onBlur === null || onBlur === void 0 || onBlur(event);
+  };
+  const handleChange = event => {
+    onChange === null || onChange === void 0 || onChange(event.target.value);
+  };
+  const titleColorTheme = readOnly ? 'gray' : 'dark';
+  const titleComponentVariant = titleVariant === 'small' ? 'small' : 'body';
+  const shouldShowPlaceholder = alwaysShowPlaceholder || focused;
+  const validationData = (0, _react.useMemo)(() => validations || error && (0, _utils.formatErrorToValidation)(error), [error, validations]);
+  const multiline = maxRows > 1;
+  const hasStartAdornments = LeftIcon || prefix;
+  const hasCharactersCount = showCharacterCount && maxLength && !disabled && !readOnly;
+  const hasEndAdornments = suffix || RightIcon || action || tooltip || error;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
+  }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    colorTheme: titleColorTheme,
+    variant: titleComponentVariant,
+    required: required
+  }, title), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    margin: "none",
+    autoComplete: "new-password" // in the new MUI's version, the autocomplete='off' doesn't work for Chrome, please use this instead
+    ,
+    disabled: disabled || readOnly,
+    error: error,
+    id: id,
+    maxRows: maxRows,
+    minRows: maxRows,
+    multiline: multiline,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    placeholder: shouldShowPlaceholder ? placeholder : '',
+    type: type,
+    value: value,
+    variant: "outlined",
+    InputProps: {
+      inputProps: {
+        maxLength
+      },
+      classes: {
+        notchedOutline: "".concat(classes.inputContainer, " ").concat(focused && classes.focusedInputContainer),
+        adornedStart: _stylesModule.default.elementsContainer,
+        adornedEnd: _stylesModule.default.elementsContainer,
+        input: classes.input,
+        root: classes.root
+      },
+      startAdornment: hasStartAdornments ? /*#__PURE__*/_react.default.createElement("div", {
+        className: _stylesModule.default.adornmentsContainer
+      }, LeftIcon && /*#__PURE__*/_react.default.createElement(_IconAdornment.default, {
+        Icon: LeftIcon
+      }), prefix && /*#__PURE__*/_react.default.createElement(_PrefixAdornment.default, {
+        text: prefix
+      })) : hasCharactersCount && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+        className: classes.charactersCount,
+        colorTheme: "gray",
+        variant: "small"
+      }, (value === null || value === void 0 ? void 0 : value.length) || 0, "/", maxLength),
+      endAdornment: hasEndAdornments && /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_stylesModule.default.adornmentsContainer, " ").concat(multiline && _stylesModule.default.multilineAdornmentsContainer)
+      }, suffix && /*#__PURE__*/_react.default.createElement(_SuffixAdornment.default, {
+        text: suffix
+      }), RightIcon && /*#__PURE__*/_react.default.createElement(_IconAdornment.default, {
+        changeOnError: true,
+        error: error,
+        Icon: RightIcon
+      }), action && /*#__PURE__*/_react.default.createElement(_ActionAdornment.default, {
+        action: action,
+        classNames: {
+          root: _stylesModule.default.actionButton
+        },
+        disabled: disabled && !readOnly
+      }), tooltip && /*#__PURE__*/_react.default.createElement(_TooltipAdornment.default, {
+        tooltip: tooltip
+      }))
+    }
+  }), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    variant: "small"
+  }, helpText), validationData && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+    validationData: validationData
+  }));
+};
+const propTypes = exports.propTypes = {
+  action: _propTypes.elementType,
+  alwaysShowPlaceholder: _propTypes.bool,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  disabled: _propTypes.bool,
+  error: _propTypes.bool,
+  helpText: _propTypes.string,
+  id: _propTypes.string,
+  LeftIcon: _propTypes.elementType,
+  maxLength: _propTypes.number,
+  maxRows: _propTypes.number,
+  onBlur: _propTypes.func,
+  onChange: _propTypes.func,
+  onFocus: _propTypes.func,
+  placeholder: _propTypes.string,
+  prefix: _propTypes.string,
+  readOnly: _propTypes.bool,
+  required: _propTypes.bool,
+  RightIcon: _propTypes.elementType,
+  showCharacterCount: _propTypes.bool,
+  suffix: _propTypes.string,
+  title: _propTypes.string,
+  titleVariant: _propTypes.string,
+  tooltip: _propTypes.string,
+  type: _propTypes.string,
+  validations: _UTValidation.validationDataProptypes,
+  value: _propTypes.string
+};
+UTTextInput.propTypes = propTypes;
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTTextInput);

package/dist/components/UTTextInput/versions/V1/styles.module.scss

@@ -0,0 +1,29 @@
+.actionButton {
+  margin: -4px !important;
+}
+
+.adornmentsContainer {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  grid-gap: 16px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+}
+
+.elementsContainer {
+  grid-gap: 16px;
+}
+
+.multilineAdornmentsContainer {
+  place-self: start;
+}
+
+.startAdornments {
+  display: flex;
+  flex-direction: column;
+}

package/dist/components/UTTextInput/versions/V1/theme.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _theme = require("../../../UTLabel/theme");
+const charactersCountRowHeight = 20;
+const PADDING = {
+  HORIZONTAL: 16,
+  VERTICAL: 12
+};
+const SMALL_PADDING = {
+  HORIZONTAL: 12,
+  VERTICAL: 8
+};
+const GRID_GAP = 16;
+const retrieveStyle = _ref => {
+  let {
+    theme,
+    inputSize,
+    error,
+    disabled: receivedDisabled,
+    readOnly,
+    showCharacterCount,
+    maxLength
+  } = _ref;
+  const disabled = receivedDisabled && !readOnly;
+  const verticalPadding = "".concat(inputSize === 'small' ? SMALL_PADDING.VERTICAL : PADDING.VERTICAL, "px");
+  const multilineVerticalPadding = "".concat((inputSize === 'small' ? SMALL_PADDING.VERTICAL : PADDING.VERTICAL) + GRID_GAP + charactersCountRowHeight, "px");
+  const horizontalPadding = "".concat(inputSize === 'small' ? SMALL_PADDING.HORIZONTAL : PADDING.HORIZONTAL, "px");
+  const hasCharactersCount = showCharacterCount && maxLength && !disabled && !readOnly;
+  return {
+    charactersCount: {
+      position: 'absolute',
+      bottom: verticalPadding
+    },
+    root: {
+      backgroundColor: theme.Palette.light['01'],
+      paddingBottom: hasCharactersCount ? multilineVerticalPadding : verticalPadding,
+      paddingLeft: horizontalPadding,
+      paddingRight: horizontalPadding,
+      paddingTop: verticalPadding,
+      ...(readOnly && {
+        backgroundColor: 'transparent',
+        paddingLeft: 0,
+        paddingRight: 0
+      }),
+      ...(disabled && {
+        backgroundColor: theme.Palette.light['03']
+      })
+    },
+    inputContainer: {
+      borderColor: "".concat(theme.Palette.light['05'], " !important"),
+      borderRadius: '4px',
+      borderWidth: '1px',
+      ...(error && {
+        borderColor: "".concat(theme.Palette.error['04'], " !important")
+      }),
+      ...(readOnly && {
+        borderColor: 'transparent !important'
+      }),
+      ...(disabled && {
+        borderColor: 'transparent !important'
+      })
+    },
+    focusedInputContainer: {
+      ...(!error && {
+        borderColor: "".concat(theme.Palette.accent['04'], " !important"),
+        borderWidth: '2px'
+      })
+    },
+    input: {
+      ...(0, _theme.getFontStyles)({
+        theme,
+        variant: 'body',
+        weight: 'regular'
+      }),
+      caretColor: theme.Palette.accent['04'],
+      color: theme.Palette.dark['05'],
+      minHeight: '22px',
+      overflow: 'hidden',
+      padding: 0,
+      textOverflow: 'ellipsis',
+      '&::placeholder': {
+        color: theme.Palette.gray['02']
+      },
+      '&::selection': {
+        backgroundColor: theme.Palette.accent['02']
+      }
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTValidation/README.md

@@ -0,0 +1,68 @@
+# UTValidation
+
+## Description
+
+`UTValidation` is a component designed to display input validation messages in a structured and customizable way. It supports various statuses such as `success`, `error`, and `default`, and can include optional icons for each validation message.
+
+## Props
+
+| Name           | Type   | Default | Description                                                                                  |
+| -------------- | ------ | ------- | -------------------------------------------------------------------------------------------- |
+| className      | string |         | Custom CSS class to apply to the root of the component.                                      |
+| validationData | array  | []      | Array of validation data objects to display messages, each with a status and optional icons. |
+
+### validationData
+
+The `validationData` prop is an array of objects, each representing a group of validation messages. Each object can optionally have a `title` and must have a `status` and an `items` array. The `items` array contains objects, each with `text`, `status`, and an optional `withIcon` property.
+
+#### Structure of validationData
+
+- **title** (optional): A string representing the title of the validation group.
+- **status** (optional): A string indicating the status of the validation group. Defaults to `default`. Possible values are `success`, `error`, and `default`.
+- **items** (required): An array of objects, each representing an individual validation item.
+  - **text** (required): A string containing the validation message.
+  - **status** (optional): A string indicating the status of the validation item. Defaults to `default`. Possible values are `success`, `error`, and `default`.
+  - **withIcon** (optional): A boolean indicating whether to display an icon next to the validation message. Defaults to `true`.
+
+### Example
+
+```javascript
+const validationData = [
+  {
+    items: [
+      {
+        status: 'success',
+        text: 'Must be at least 8 characters long.',
+        withIcon: true // Optional, defaults to true
+      }
+    ]
+  },
+  {
+    title: 'Must meet at least 2 of the following conditions:',
+    status: 'error',
+    items: [
+      {
+        text: 'At least 1 lowercase letter.' // Defaults to "default" and "withIcon" to true
+      },
+      {
+        text: 'At least 1 uppercase letter.' // Defaults to "default" and "withIcon" to true
+      },
+      {
+        status: 'success',
+        text: 'At least 1 number.',
+        withIcon: false // Will not display an icon
+      }
+    ]
+  }
+];
+```
+
+## Statuses
+
+The `status` prop can be one of these values:
+
+- `success`
+- `error`
+- `default`
+
+If `status` is not provided, it defaults to `default`.

package/dist/components/UTValidation/constants.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.STATUS_COLOR_MAPPER = exports.STATUSES_WITH_ICON = exports.STATUSES = exports.ICON_STATUS_COLOR_MAPPER = exports.ICON_SIZE = exports.ICON_MAPPER = void 0;
+const STATUSES = exports.STATUSES = {
+  success: 'success',
+  error: 'error',
+  default: 'default'
+};
+const ICON_STATUS_COLOR_MAPPER = exports.ICON_STATUS_COLOR_MAPPER = {
+  [STATUSES.success]: 'success',
+  [STATUSES.error]: 'error',
+  [STATUSES.default]: 'light'
+};
+const STATUS_COLOR_MAPPER = exports.STATUS_COLOR_MAPPER = {
+  [STATUSES.success]: 'success',
+  [STATUSES.error]: 'error',
+  [STATUSES.default]: 'gray'
+};
+const ICON_MAPPER = exports.ICON_MAPPER = {
+  [STATUSES.success]: 'IconCheck',
+  [STATUSES.error]: 'IconX'
+};
+const STATUSES_WITH_ICON = exports.STATUSES_WITH_ICON = [STATUSES.success, STATUSES.error];
+const ICON_SIZE = exports.ICON_SIZE = 15;