@widergy/energy-ui 3.28.0 → 3.30.0

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

@@ -0,0 +1,37 @@
+# UTCheckbox
+
+## Description
+
+`UTCheckbox` is a customizable checkbox component. It supports various states such as checked, indeterminate, and disabled. Additionally, it includes the option to display a title and supports markdown for advanced formatting.
+
+## Props
+
+| Name          | Type             | Default   | Description                                                                           |
+| ------------- | ---------------- | --------- | ------------------------------------------------------------------------------------- |
+| classNames    | objectOf(string) |           | Additional class names to apply for further styling.                                  |
+| disabled      | bool             | false     | Disables the checkbox, making it unclickable.                                         |
+| indeterminate | bool             | false     | Indicates if the checkbox is in an indeterminate state.                               |
+| isSimple      | bool             | false     | **Deprecated**: Please avoid using this property in future implementations.           |
+| onChange      | func             |           | Function to call when the checkbox state changes.                                     |
+| required      | bool             | false     | Indicates if the checkbox is required.                                                |
+| title         | string           |           | Title to display next to the checkbox. Supports markdown when `withMarkdown` is true. |
+| value         | bool             | false     | Indicates if the checkbox is checked.                                                 |
+| variant       | string           | 'default' | Defines the visual variant of the checkbox.                                           |
+| withMarkdown  | bool             | false     | Enables markdown formatting for the `title` prop.                                     |
+
+## Usage
+
+### Basic Example
+
+```jsx
+import React from 'react';
+import UTCheckbox from './UTCheckbox';
+
+const Example = () => {
+  const [checked, setChecked] = React.useState(false);
+
+  return <UTCheckbox value={checked} title="Check me" onChange={() => setChecked(!checked)} />;
+};
+
+export default Example;
+```

package/dist/components/UTCheckbox/versions/V1/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SPACING = exports.INDETERMINATE_ICON = exports.CHECKED_ICON = exports.BUTTON_VARIANT = void 0;
+const CHECKED_ICON = exports.CHECKED_ICON = 'IconCheck';
+const INDETERMINATE_ICON = exports.INDETERMINATE_ICON = 'IconMinus';
+const SPACING = exports.SPACING = {
+  SMALL: 'small',
+  LARGE: 'large'
+};
+const BUTTON_VARIANT = exports.BUTTON_VARIANT = 'button';

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

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _classesUtils = require("../../../../utils/classesUtils");
+var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
+var _UTIcon = _interopRequireDefault(require("../../../UTIcon"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../../../UTTouchableWithoutFeedback"));
+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 _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; }
+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 UTCheckbox = _ref => {
+  let {
+    classes: theme,
+    classNames,
+    disabled,
+    indeterminate,
+    isSimple = false,
+    onChange,
+    required,
+    title,
+    value,
+    variant = 'default',
+    withMarkdown
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
+  const iconName = (0, _react.useMemo)(() => indeterminate ? _constants.INDETERMINATE_ICON : value ? _constants.CHECKED_ICON : '', [indeterminate, value]);
+  const handlePress = (0, _react.useCallback)(() => {
+    if (!disabled && onChange) {
+      onChange(!value);
+    }
+  }, [disabled, onChange, value]);
+  const shouldHighlightLabel = value && variant === _constants.BUTTON_VARIANT;
+  const touchableProps = {
+    onClick: handlePress,
+    disabled
+  };
+  const RootComponent = variant === _constants.BUTTON_VARIANT ? _UTTouchableWithoutFeedback.default : 'div';
+  const BoxContainerComponent = variant === _constants.BUTTON_VARIANT ? 'div' : _UTTouchableWithoutFeedback.default;
+  const rootComponentProps = variant === _constants.BUTTON_VARIANT ? touchableProps : {};
+  const boxContainerProps = variant === _constants.BUTTON_VARIANT ? {} : touchableProps;
+  return /*#__PURE__*/_react.default.createElement(RootComponent, _extends({
+    className: classes.container
+  }, rootComponentProps), /*#__PURE__*/_react.default.createElement(BoxContainerComponent, _extends({
+    className: classes.boxContainer
+  }, boxContainerProps), isSimple ? /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    name: "IconCheck",
+    shade: "04",
+    colorTheme: "accent",
+    className: value ? undefined : _stylesModule.default.hidden
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.box
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.iconContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    colorTheme: "light",
+    name: iconName,
+    size: 16
+  })))), /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    colorTheme: shouldHighlightLabel ? 'accent' : 'dark',
+    required: required,
+    className: classes.title,
+    withMarkdown: withMarkdown
+  }, title));
+};
+UTCheckbox.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  disabled: _propTypes.bool,
+  indeterminate: _propTypes.bool,
+  /**
+   * @deprecated The "isSimple" prop is deprecated and will be removed in a future release. Please do not use it.
+   */
+  isSimple: _propTypes.bool,
+  onChange: _propTypes.func,
+  required: _propTypes.bool,
+  reversed: _propTypes.bool,
+  spacing: _propTypes.string,
+  title: _propTypes.string,
+  value: _propTypes.bool,
+  variant: _propTypes.string,
+  withMarkdown: _propTypes.bool
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTCheckbox);

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

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

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

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _constants = require("./constants");
+const NORMAL_SPACING = 16;
+const SMALL_SPACING = 8;
+const baseCheckBoxTheme = theme => ({
+  container: {
+    alignItems: 'center',
+    display: 'flex'
+  },
+  iconContainer: {
+    border: "2px solid ".concat(theme.Palette.gray['04']),
+    borderRadius: 5,
+    display: 'flex',
+    height: 20,
+    placeContent: 'center',
+    placeItems: 'center',
+    width: 20
+  },
+  box: {
+    borderRadius: 25,
+    overflow: 'hidden',
+    padding: 6
+  }
+});
+const conditionalStyles = _ref => {
+  let {
+    value,
+    indeterminate,
+    reversed,
+    spacing,
+    variant,
+    theme,
+    disabled
+  } = _ref;
+  const spacingValue = spacing === _constants.SPACING.SMALL ? SMALL_SPACING : NORMAL_SPACING;
+  return {
+    container: {
+      ...(reversed && {
+        flexDirection: 'row-reverse',
+        justifyContent: 'space-between'
+      }),
+      ...(disabled && {
+        opacity: 0.5
+      }),
+      ...(variant === _constants.BUTTON_VARIANT && {
+        borderRadius: '8px',
+        padding: '12px 16px',
+        '&:active': {
+          backgroundColor: theme.Palette.light['04']
+        }
+      })
+    },
+    iconContainer: {
+      ...((value || indeterminate) && {
+        backgroundColor: theme.Palette.accent['04'],
+        borderColor: theme.Palette.accent['04']
+      })
+    },
+    boxContainer: {
+      ...(reversed ? {
+        marginLeft: spacingValue,
+        marginRight: 0
+      } : {
+        marginRight: spacingValue
+      }),
+      ...(variant !== _constants.BUTTON_VARIANT && {
+        '&:active': {
+          '& $box': {
+            backgroundColor: theme.Palette.accent['02'],
+            borderColor: theme.Palette.accent['03'],
+            borderWidth: 1,
+            overflow: 'hidden'
+          }
+        }
+      })
+    },
+    title: variant === _constants.BUTTON_VARIANT && {
+      userSelect: 'none'
+    }
+  };
+};
+const retrieveStyle = _ref2 => {
+  let {
+    value,
+    disabled,
+    indeterminate,
+    reversed,
+    spacing,
+    theme,
+    variant
+  } = _ref2;
+  const baseThemeStyles = baseCheckBoxTheme(theme);
+  const {
+    container,
+    iconContainer,
+    boxContainer,
+    title
+  } = conditionalStyles({
+    value,
+    disabled,
+    indeterminate,
+    reversed,
+    spacing,
+    variant,
+    theme
+  });
+  return {
+    box: baseThemeStyles.box,
+    container: {
+      ...baseThemeStyles.container,
+      ...container
+    },
+    iconContainer: {
+      ...baseThemeStyles.iconContainer,
+      ...iconContainer
+    },
+    boxContainer,
+    title
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTFieldLabel/index.js

@@ -15,13 +15,13 @@ const UTFieldLabel = _ref => {
     children,
     colorTheme,
     required,
-    style,
+    className,
     variant,
     weight,
     withMarkdown
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.label, " ").concat(style)
+    className: "".concat(_stylesModule.default.label, " ").concat(className)
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: colorTheme,
     variant: variant,
@@ -34,6 +34,7 @@ const UTFieldLabel = _ref => {
   }, _constants.REQUIRED_LABEL));
 };
 UTFieldLabel.propTypes = {
+  className: _propTypes.string,
   colorTheme: _propTypes.string,
   required: _propTypes.bool,
   variant: _propTypes.string,

package/dist/components/UTLabel/constants.js

@@ -7,8 +7,6 @@ exports.WEIGHTS = exports.VARIANTS_SIZES = exports.VARIANTS_LINE_HEIGHT = export
 var _react = _interopRequireDefault(require("react"));
 var _Palette = require("../../constants/Palette");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/* eslint-disable react/prop-types */
-
 const VARIANTS = exports.VARIANTS = {
   title1: 'h1',
   title2: 'h2',

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

@@ -6,23 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
+var _constants = require("../../../UTBaseInputField/constants");
 var _utils = require("../../../UTValidation/utils");
 var _inputs = require("../../../../constants/inputs");
 var _UTBaseInputField = _interopRequireDefault(require("../../../UTBaseInputField"));
 var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
 var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
 var _UTValidation = _interopRequireWildcard(require("../../../UTValidation"));
-var _constants = require("./constants");
+var _constants2 = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 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 UTPhoneInput = _ref => {
   let {
+    areaCodeDataTestId,
     areaCodePlaceholder,
     countryCode,
-    areaCodeDataTestId,
-    phoneNumberDataTestId,
     disabled,
     error,
     helpText,
@@ -30,10 +30,10 @@ const UTPhoneInput = _ref => {
     onBlur,
     onChange,
     onFocus,
+    phoneNumberDataTestId,
     placeholder,
     readOnly,
     required,
-    RightIcon,
     title,
     titleVariant,
     translations = {
@@ -45,9 +45,9 @@ const UTPhoneInput = _ref => {
     withAreaCode = true
   } = _ref;
   const [areaCode, setAreaCode] = (0, _react.useState)('');
-  const [phoneNumber, setPhoneNumber] = (0, _react.useState)('');
   const [areaCodeError, setAreaCodeError] = (0, _react.useState)('');
   const [isValidCode, setIsValidCode] = (0, _react.useState)(false);
+  const [phoneNumber, setPhoneNumber] = (0, _react.useState)('');
   (0, _react.useEffect)(() => {
     if (value && withAreaCode) {
       const [code, phone] = value.split('-');
@@ -67,7 +67,7 @@ const UTPhoneInput = _ref => {
         setAreaCodeError(areaCodeWithoutZeroError);
         setIsValidCode(false);
       } else {
-        const code = _constants.AREA_CODES.find(element => element.code === areaCode);
+        const code = _constants2.AREA_CODES.find(element => element.code === areaCode);
         setIsValidCode(!!code);
         setAreaCodeError(!code ? invalidAreaCodeError : '');
       }
@@ -112,7 +112,12 @@ const UTPhoneInput = _ref => {
     onFocus: onFocus,
     placeholder: areaCodePlaceholder,
     readOnly: readOnly,
-    RightIcon: RightIcon,
+    rightAdornments: [{
+      name: _constants.COMPONENT_KEYS.ICON,
+      props: {
+        changeOnError: true
+      }
+    }],
     value: areaCode
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.phoneContainer
@@ -127,8 +132,18 @@ const UTPhoneInput = _ref => {
     onChange: handleChangePhoneNumber,
     onFocus: onFocus,
     placeholder: placeholder,
-    prefix: countryCode,
-    RightIcon: RightIcon,
+    leftAdornments: countryCode && !withAreaCode ? [{
+      name: _constants.COMPONENT_KEYS.PREFIX,
+      props: {
+        text: countryCode
+      }
+    }] : [],
+    rightAdornments: [{
+      name: _constants.COMPONENT_KEYS.ICON,
+      props: {
+        changeOnError: true
+      }
+    }],
     value: phoneNumber
   }))), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: "gray",
@@ -152,7 +167,6 @@ UTPhoneInput.propTypes = {
   placeholder: _propTypes.string,
   readOnly: _propTypes.bool,
   required: _propTypes.bool,
-  RightIcon: _propTypes.elementType,
   title: _propTypes.string,
   titleVariant: _propTypes.string,
   translations: (0, _propTypes.shape)({

package/dist/components/UTSearchField/README.md

@@ -0,0 +1,35 @@
+# UTSearchField
+
+## Description
+
+`UTSearchField` is a customizable search field component. It includes a search icon on the left and an optional clear button on the right when there is text in the input field.
+
+## Props
+
+| Name        | Type   | Default | Description                                                 |
+| ----------- | ------ | ------- | ----------------------------------------------------------- |
+| className   | string |         | CSS class to customize the root element of the input field. |
+| dataTestId  | string |         | Identifier used for testing purposes.                       |
+| disabled    | bool   |         | Disables the input field if set to true.                    |
+| id          | string |         | Unique identifier for the input field.                      |
+| onBlur      | func   |         | Function to call when the input field loses focus.          |
+| onChange    | func   |         | Function to call when the input field value changes.        |
+| onFocus     | func   |         | Function to call when the input field gains focus.          |
+| placeholder | string |         | Placeholder text for the input field.                       |
+| size        | string |         | Size of the input field. One of: `small`, `large`.          |
+| type        | string |         | Type of input (e.g., 'numeric', 'password', 'text' ).       |
+| value       | string | null    | The value of the input field.                               |
+| variant     | string | gray    | Variant of the input field. One of: `white`, `gray`.        |
+
+### Adornments
+
+`UTSearchField` utilizes adornments on both sides of the input field:
+
+- **Left Adornment**: A search icon is always displayed on the left side of the input field.
+- **Right Adornment**: A clear (reset) button is displayed on the right side only when there is a value in the input field.
+
+## Additional Information
+
+- The clear button appears when the input field contains text and clears the input when clicked.
+- The search icon can change its style based on the focus state of the input field.
+- The component is built on top of `UTBaseInputField`, inheriting its flexible adornment handling.

package/dist/components/UTSearchField/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.default = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("../UTBaseInputField/constants");
+var _UTBaseInputField = _interopRequireDefault(require("../UTBaseInputField"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _theme = require("./theme");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const UTSearchField = _ref => {
+  let {
+    classes,
+    className,
+    dataTestId,
+    disabled,
+    id,
+    onBlur,
+    onChange = () => {},
+    onFocus,
+    placeholder,
+    size,
+    type,
+    value = null,
+    variant = 'gray'
+  } = _ref;
+  const clearText = () => {
+    onChange('');
+  };
+  const action = {
+    Icon: 'IconX',
+    onClick: clearText,
+    size: 'small'
+  };
+  const leftAdornments = [{
+    name: _constants.COMPONENT_KEYS.ICON,
+    props: {
+      Icon: 'IconSearch',
+      changeOnFocus: true,
+      shade: '02'
+    }
+  }];
+  const rightAdornments = value ? [{
+    name: _constants.COMPONENT_KEYS.ACTION,
+    props: {
+      action
+    }
+  }] : [];
+  return /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
+    alwaysShowPlaceholder: true,
+    dataTestId: dataTestId,
+    disabled: disabled,
+    id: id,
+    inputSize: size,
+    leftAdornments: leftAdornments,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    placeholder: placeholder,
+    rightAdornments: rightAdornments,
+    classNames: {
+      root: className,
+      input: classes.input
+    },
+    type: type,
+    value: value,
+    variant: variant
+  });
+};
+const propTypes = exports.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  className: _propTypes.string,
+  dataTestId: _propTypes.string,
+  disabled: _propTypes.bool,
+  id: _propTypes.string,
+  onBlur: _propTypes.func,
+  onChange: _propTypes.func,
+  onFocus: _propTypes.func,
+  placeholder: _propTypes.string,
+  size: _propTypes.string,
+  type: _propTypes.string,
+  value: _propTypes.string,
+  variant: _propTypes.string
+};
+UTSearchField.propTypes = propTypes;
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTSearchField);

package/dist/components/UTSearchField/theme.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    input: {
+      '&::placeholder': {
+        color: "".concat(theme.Palette.gray['04'], " !important")
+      }
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

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

@@ -28,7 +28,6 @@
 | 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. |

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.propTypes = exports.default = void 0;
 var _propTypes = require("prop-types");
 var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../../../UTBaseInputField/constants");
 var _utils = require("../../../UTValidation/utils");
 var _inputs = require("../../../../constants/inputs.js");
 var _UTBaseInputField = _interopRequireDefault(require("../../../UTBaseInputField"));
@@ -50,6 +51,51 @@ const UTTextInput = _ref => {
   } = _ref;
   const titleColorTheme = readOnly ? 'gray' : 'dark';
   const validationData = (0, _react.useMemo)(() => validations || error && (0, _utils.formatErrorToValidation)(error), [error, validations]);
+  const leftAdornments = (0, _react.useMemo)(() => {
+    const adornments = [];
+    if (LeftIcon) adornments.push({
+      name: _constants.COMPONENT_KEYS.ICON,
+      props: {
+        Icon: LeftIcon
+      }
+    });
+    if (prefix) adornments.push({
+      name: _constants.COMPONENT_KEYS.PREFIX,
+      props: {
+        text: prefix
+      }
+    });
+    return adornments;
+  }, [LeftIcon, prefix]);
+  const rightAdornments = (0, _react.useMemo)(() => {
+    const adornments = [];
+    if (suffix) adornments.push({
+      name: _constants.COMPONENT_KEYS.SUFFIX,
+      props: {
+        text: suffix
+      }
+    });
+    if (RightIcon || error) adornments.push({
+      name: _constants.COMPONENT_KEYS.ICON,
+      props: {
+        Icon: RightIcon,
+        changeOnError: true
+      }
+    });
+    if (action) adornments.push({
+      name: _constants.COMPONENT_KEYS.ACTION,
+      props: {
+        action
+      }
+    });
+    if (tooltip) adornments.push({
+      name: _constants.COMPONENT_KEYS.TOOLTIP,
+      props: {
+        tooltip
+      }
+    });
+    return adornments;
+  }, [suffix, RightIcon, error, action, tooltip]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.container, " ").concat(classNames.container)
   }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
@@ -57,7 +103,6 @@ const UTTextInput = _ref => {
     variant: _inputs.TITLE_VARIANTS[titleVariant],
     required: required
   }, title), /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
-    action: action,
     alwaysShowPlaceholder: alwaysShowPlaceholder,
     classNames: classNames,
     dataTestId: dataTestId,
@@ -65,19 +110,16 @@ const UTTextInput = _ref => {
     error: error,
     id: id,
     inputSize: inputSize,
-    LeftIcon: LeftIcon,
+    leftAdornments: leftAdornments,
     maxLength: maxLength,
     maxRows: maxRows,
     onBlur: onBlur,
     onChange: onChange,
     onFocus: onFocus,
     placeholder: placeholder,
-    prefix: prefix,
     readOnly: readOnly,
-    RightIcon: RightIcon,
+    rightAdornments: rightAdornments,
     showCharacterCount: showCharacterCount,
-    suffix: suffix,
-    tooltip: tooltip,
     type: type,
     value: value
   }), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {