@widergy/energy-ui 3.38.0 → 3.39.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.39.0](https://github.com/widergy/energy-ui/compare/v3.38.1...v3.39.0) (2024-11-05)
+
+
+### Features
+
+* [EVE-4330] UTStatusMessage ([#523](https://github.com/widergy/energy-ui/issues/523)) ([cdd5fd6](https://github.com/widergy/energy-ui/commit/cdd5fd61889a07ad30861607023f6a590bec6590))
+
+## [3.38.1](https://github.com/widergy/energy-ui/compare/v3.38.0...v3.38.1) (2024-11-05)
+
+
+### Bug Fixes
+
+* [EVE-4327] UTRating v1 ([#522](https://github.com/widergy/energy-ui/issues/522)) ([0fce183](https://github.com/widergy/energy-ui/commit/0fce1839be7c7b18901f73214526ec96052df302))
+
 # [3.38.0](https://github.com/widergy/energy-ui/compare/v3.37.2...v3.38.0) (2024-11-04)
 
 

package/dist/components/Loading/index.js

@@ -16,13 +16,13 @@ var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Loading = _ref => {
   let {
-    text,
+    classes,
     className,
-    thickness,
     size,
-    classes,
+    text = _constants.DEFAULT_LOADING_TEXT,
+    textClassName,
     theme,
-    textClassName
+    thickness
   } = _ref;
   const defaultSize = (0, _seamlessImmutable.getIn)(theme, ['Loading', 'base', 'size'], 85);
   const defaultThickness = (0, _seamlessImmutable.getIn)(theme, ['Loading', 'base', 'thickness'], 1.5);
@@ -34,15 +34,15 @@ const Loading = _ref => {
     thickness: thickness || defaultThickness
   }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: "".concat(_stylesModule.default.text, " ").concat(classes.text, " ").concat(textClassName)
-  }, text || _constants.DEFAULT_LOADING_TEXT));
+  }, text));
 };
 Loading.propTypes = {
-  text: _propTypes.string,
-  size: _propTypes.number,
-  thickness: _propTypes.number,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
-  theme: _propTypes.object,
   className: _propTypes.string,
-  textClassName: _propTypes.string
+  size: _propTypes.number,
+  text: _propTypes.string,
+  textClassName: _propTypes.string,
+  theme: _propTypes.object,
+  thickness: _propTypes.number
 };
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(Loading);

package/dist/components/UTRating/index.js

@@ -4,102 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _array = require("@widergy/web-utils/lib/array");
-var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
-var _formTypes = require("../../types/formTypes");
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _classesUtils = require("../../utils/classesUtils");
-var _theme = require("./theme");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-var _Circle = _interopRequireDefault(require("./components/Circle"));
-var _Faces = _interopRequireDefault(require("./components/Faces"));
-var _Star = _interopRequireDefault(require("./components/Star"));
-var _constants = require("./constants");
+var _V = _interopRequireDefault(require("./versions/V0"));
+var _V2 = _interopRequireDefault(require("./versions/V1"));
 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 UTRatingContainer = _ref => {
+const UTRating = _ref => {
   let {
-    classes: theme,
-    classNames,
-    field = {},
-    onChange,
-    options,
-    titleProps,
-    withUpperTitle
+    version = 'V0',
+    ...props
   } = _ref;
-  const [selectedOptions, setSelectedOptions] = (0, _react.useState)([]);
-  const [hoveredOptions, setHoveredOptions] = (0, _react.useState)([]);
-  const [temporalSelected, setTemporalSelected] = (0, _react.useState)([]);
-  const classes = (0, _classesUtils.mergeClasses)(theme, classNames);
-  const {
-    ignore_title: ignoreTitle,
-    variant,
-    star_color: starColor,
-    text_variant: textVariant
-  } = field.configuration || {};
-  const shouldShowUpperTitle = ignoreTitle && withUpperTitle;
-  const handleClick = (order, value) => {
-    setSelectedOptions((0, _array.autocompleteWithNumbers)(1, order));
-    if ((0, _array.isEmpty)(selectedOptions)) setTemporalSelected((0, _array.autocompleteWithNumbers)(1, order));
-    onChange(value.toString());
-  };
-  const handleHover = value => {
-    setHoveredOptions((0, _array.autocompleteWithNumbers)(1, value));
-    setSelectedOptions([]);
-  };
-  const handleMouseLeave = () => {
-    setHoveredOptions([]);
-    setSelectedOptions(temporalSelected);
-  };
-  const handleMapOptions = option => {
-    const defaultProps = {
-      onClick: handleClick,
-      value: option.value,
-      order: option.order,
-      isFirst: options[0].order === option.order,
-      isLast: options[options.length - 1].order === option.order,
-      textVariant,
-      name: option.name,
-      classes,
-      color: starColor || _colorsModule.default.ratingStarSelected
-    };
-    return variant === _constants.RATING_VARIANTS.CIRCULAR ? /*#__PURE__*/_react.default.createElement(_Circle.default, _extends({
-      key: option.value,
-      selected: selectedOptions[selectedOptions.length - 1] === option.order
-    }, defaultProps)) : variant === _constants.RATING_VARIANTS.FACES ? /*#__PURE__*/_react.default.createElement(_Faces.default, _extends({
-      key: option.value,
-      selected: selectedOptions[selectedOptions.length - 1] === option.order
-    }, defaultProps)) : /*#__PURE__*/_react.default.createElement(_Star.default, _extends({
-      key: option.value,
-      hovered: hoveredOptions.includes(option.order),
-      selected: selectedOptions.includes(option.order),
-      onMouseLeave: handleMouseLeave,
-      onHover: handleHover
-    }, defaultProps));
-  };
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
-    className: "".concat(classes.title)
-  }, titleProps, {
-    withMarkdown: true
-  }), field.title), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
-  }, options.map(handleMapOptions)));
+  const Component = {
+    V0: _V.default,
+    V1: _V2.default
+  }[version];
+  return /*#__PURE__*/_react.default.createElement(Component, props);
 };
-UTRatingContainer.propTypes = {
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  classNames: (0, _propTypes.objectOf)(_propTypes.string),
-  field: _formTypes.fieldType,
-  onChange: _propTypes.func,
-  options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    order: _propTypes.number,
-    value: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string])
-  })),
-  titleProps: _propTypes.object,
-  withUpperTitle: _propTypes.bool
+UTRating.propTypes = {
+  version: _propTypes.string
 };
-var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTRatingContainer);
+var _default = exports.default = UTRating;

package/dist/components/UTRating/{components → versions/V0/components}/Circle/index.js

@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 var _propTypes = require("prop-types");
-var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
 var _constants = require("../../constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/UTRating/{components → versions/V0/components}/Circle/styles.module.scss

@@ -1,7 +1,7 @@
-@use '../../../../scss/variables/colors.module.scss' as *;
-@use '../../../../scss/variables/fontSizes.module.scss' as *;
-@use '../../../../scss/variables/sizes.module.scss' as *;
-@use '../../../../scss/variables/mediaQueries.module.scss' as *;
+@use '../../../../../../scss/variables/colors.module.scss' as *;
+@use '../../../../../../scss/variables/fontSizes.module.scss' as *;
+@use '../../../../../../scss/variables/sizes.module.scss' as *;
+@use '../../../../../../scss/variables/mediaQueries.module.scss' as *;
 
 .icon {
   height: $rating-circle-icon-size;

package/dist/components/UTRating/{components → versions/V0/components}/Faces/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
-var _UTButton = _interopRequireDefault(require("../../../UTButton"));
-var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTButton = _interopRequireDefault(require("../../../../../UTButton"));
+var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
 var _constants = require("../../constants");
 var _constants2 = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));

package/dist/components/UTRating/{components → versions/V0/components}/Faces/styles.module.scss

@@ -1,6 +1,6 @@
-@use '../../../../scss/variables/colors.module.scss' as *;
-@use '../../../../scss/variables/sizes.module.scss' as *;
-@use '../../../../scss/variables/mediaQueries.module.scss' as *;
+@use '../../../../../../scss/variables/colors.module.scss' as *;
+@use '../../../../../../scss/variables/sizes.module.scss' as *;
+@use '../../../../../../scss/variables/mediaQueries.module.scss' as *;
 
 .container {
   align-items: center;
@@ -12,7 +12,7 @@
 .first {
   flex-direction: row-reverse;
 
-  @media #{$mobile} {
+/*   @media #{$mobile} {
     position: relative;
 
     .text {
@@ -21,7 +21,7 @@
       top: 40px;
       white-space: nowrap;
     }
-  }
+  } */
 }
 
 .last {

package/dist/components/UTRating/{components → versions/V0/components}/Star/index.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _StarRate = _interopRequireDefault(require("@material-ui/icons/StarRate"));
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
 var _constants = require("../../constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/UTRating/{components → versions/V0/components}/Star/styles.module.scss

@@ -1,6 +1,6 @@
-@use '../../../../scss/variables/colors.module.scss' as *;
-@use '../../../../scss/variables/fontSizes.module.scss' as *;
-@use '../../../../scss/variables/mediaQueries.module.scss' as *;
+@use '../../../../../../scss/variables/colors.module.scss' as *;
+@use '../../../../../../scss/variables/fontSizes.module.scss' as *;
+@use '../../../../../../scss/variables/mediaQueries.module.scss' as *;
 
 .container {
   align-items: center;

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

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _array = require("@widergy/web-utils/lib/array");
+var _colorsModule = _interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));
+var _formTypes = require("../../../../types/formTypes");
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _classesUtils = require("../../../../utils/classesUtils");
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _Circle = _interopRequireDefault(require("./components/Circle"));
+var _Faces = _interopRequireDefault(require("./components/Faces"));
+var _Star = _interopRequireDefault(require("./components/Star"));
+var _constants = require("./constants");
+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 UTRatingContainer = _ref => {
+  let {
+    classes: theme,
+    classNames,
+    field = {},
+    onChange,
+    options,
+    titleProps,
+    withUpperTitle
+  } = _ref;
+  const [selectedOptions, setSelectedOptions] = (0, _react.useState)([]);
+  const [hoveredOptions, setHoveredOptions] = (0, _react.useState)([]);
+  const [temporalSelected, setTemporalSelected] = (0, _react.useState)([]);
+  const classes = (0, _classesUtils.mergeClasses)(theme, classNames);
+  const {
+    ignore_title: ignoreTitle,
+    variant,
+    star_color: starColor,
+    text_variant: textVariant
+  } = field.configuration || {};
+  const shouldShowUpperTitle = ignoreTitle && withUpperTitle;
+  const handleClick = (order, value) => {
+    setSelectedOptions((0, _array.autocompleteWithNumbers)(1, order));
+    if ((0, _array.isEmpty)(selectedOptions)) setTemporalSelected((0, _array.autocompleteWithNumbers)(1, order));
+    onChange(value.toString());
+  };
+  const handleHover = value => {
+    setHoveredOptions((0, _array.autocompleteWithNumbers)(1, value));
+    setSelectedOptions([]);
+  };
+  const handleMouseLeave = () => {
+    setHoveredOptions([]);
+    setSelectedOptions(temporalSelected);
+  };
+  const handleMapOptions = option => {
+    const defaultProps = {
+      onClick: handleClick,
+      value: option.value,
+      order: option.order,
+      isFirst: options[0].order === option.order,
+      isLast: options[options.length - 1].order === option.order,
+      textVariant,
+      name: option.name,
+      classes,
+      color: starColor || _colorsModule.default.ratingStarSelected
+    };
+    return variant === _constants.RATING_VARIANTS.CIRCULAR ? /*#__PURE__*/_react.default.createElement(_Circle.default, _extends({
+      key: option.value,
+      selected: selectedOptions[selectedOptions.length - 1] === option.order
+    }, defaultProps)) : variant === _constants.RATING_VARIANTS.FACES ? /*#__PURE__*/_react.default.createElement(_Faces.default, _extends({
+      key: option.value,
+      selected: selectedOptions[selectedOptions.length - 1] === option.order
+    }, defaultProps)) : /*#__PURE__*/_react.default.createElement(_Star.default, _extends({
+      key: option.value,
+      hovered: hoveredOptions.includes(option.order),
+      selected: selectedOptions.includes(option.order),
+      onMouseLeave: handleMouseLeave,
+      onHover: handleHover
+    }, defaultProps));
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    className: "".concat(classes.title)
+  }, titleProps, {
+    withMarkdown: true
+  }), field.title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
+  }, options.map(handleMapOptions)));
+};
+UTRatingContainer.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  field: _formTypes.fieldType,
+  onChange: _propTypes.func,
+  options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    order: _propTypes.number,
+    value: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string])
+  })),
+  titleProps: _propTypes.object,
+  withUpperTitle: _propTypes.bool
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTRatingContainer);

package/dist/components/UTRating/{styles.module.scss → versions/V0/styles.module.scss}

@@ -1,4 +1,4 @@
-@use '../../scss/variables/mediaQueries.module.scss' as *;
+@use '../../../../scss/variables/mediaQueries.module.scss' as *;
 
 .container {
   display: flex;

package/dist/components/UTRating/{theme.js → versions/V0/theme.js}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 var _seamlessImmutable = require("seamless-immutable");
-var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
+var _colorsModule = _interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const retrieveStyle = _ref => {
   let {

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

@@ -0,0 +1,44 @@
+# UTRating
+
+## Description
+
+`UTRating` is a configurable rating input component that enables users to easily provide feedback through visual indicators.
+
+## Props
+
+| Name                | Type      | Default | Description                                                                                               |
+| ------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------  |
+| classNames          | object    |         | Custom CSS class names for styling the component.                                                         |
+| dataTestId          | string    |         | Unique identifier for testing purposes.                                                                   |
+| disabled            | bool      | false   | Indicates whether the input is disabled and cannot be interacted with.                                    |
+| error               | string    |         | Error message to display when validation fails or an issue occurs.                                        |
+| helpTextEnd         | string    |         | Additional help text displayed at the end of the input for user guidance.                                 |
+| helpTextStart       | string    |         | Additional help text displayed at the beginning of the input for user guidance.                           |
+| onChange            | func      |         | Callback function invoked when the input value changes.                                                   |
+| options             | array     |         | Array of options available for selection.                                                                 |
+| required            | bool      | false   | Indicates whether the input is mandatory for form submission.                                             |
+| title               | string    |         | Title for the input, providing context to the user.                                                       |
+| validations         | array     |         | Array of validation rules to be applied to the input value.                                               |
+| value               | string    |         | The current value of the input.                                                                           |
+| variant             | string    | `star`  | Defines the visual style component.                                                                       |
+
+
+### options
+
+`options` is an array of objects with a `value` and a `name` key. The values should be in the range of 0-10, except for the `faces` variant. In desktop view, all options are displayed in one row; in responsive view, they are broken into 2 rows if there are more than 5 options.
+
+### variant
+
+The value of `variant` must be one of the following:
+
+- `faces`: the options are represented as face icons. Option values should exclusively be between 1 and 5, values outside this range are not supported.
+- `star`: the options are represented as star icons.
+- `text`: the options are represented as the option's `text`.
+
+### 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/UTRating/versions/V1/components/Option/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("../../constants");
+var _UTButton = _interopRequireDefault(require("../../../../../UTButton"));
+var _WithTheme = _interopRequireDefault(require("../../../../../WithTheme"));
+var _utils = require("./utils");
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Option = _ref => {
+  let {
+    classes,
+    disabled,
+    error,
+    isSelected,
+    name,
+    onChange,
+    value,
+    variant,
+    wrapperStyle
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: wrapperStyle
+  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      root: "".concat(_stylesModule.default.option, " ").concat(error ? classes.error : ''),
+      text: _stylesModule.default.text
+    },
+    colorTheme: isSelected ? 'primary' : 'secondary',
+    disabled: disabled,
+    Icon: (0, _utils.getIcon)(variant, value, isSelected),
+    onClick: () => onChange(value),
+    variant: (0, _utils.getVariant)(variant, isSelected)
+  }, _constants.RATING_VARIANTS.TEXT === variant ? name : null));
+};
+Option.propTypes = {
+  classes: _propTypes.object,
+  disabled: _propTypes.bool,
+  error: _propTypes.string,
+  isSelected: _propTypes.bool,
+  name: _propTypes.string,
+  onChange: _propTypes.func,
+  value: _propTypes.string,
+  variant: _propTypes.string,
+  wrapperStyle: _propTypes.object
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(Option);

package/dist/components/UTRating/versions/V1/components/Option/styles.module.scss

@@ -0,0 +1,10 @@
+.option {
+  border-width: 2px !important;
+  flex-grow: 1;
+  height: 48px;
+  min-width: 48px !important;
+}
+
+.text {
+  font-size: 1.125rem !important
+}

package/dist/components/UTRating/versions/V1/components/Option/theme.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    error: {
+      borderColor: "".concat(theme.Palette.error['05'], " !important")
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTRating/versions/V1/components/Option/utils.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVariant = exports.getIcon = void 0;
+var _constants = require("../../constants");
+const getIcon = (variant, value, isSelected) => ({
+  [_constants.RATING_VARIANTS.TEXT]: null,
+  [_constants.RATING_VARIANTS.FACES]: {
+    1: 'IconMoodSad',
+    2: 'IconMoodConfuzed',
+    3: 'IconMoodEmpty',
+    4: 'IconMoodSmile',
+    5: 'IconMoodHappy'
+  }[value],
+  [_constants.RATING_VARIANTS.STAR]: isSelected ? 'IconStarFilled' : 'IconStar'
+})[variant];
+exports.getIcon = getIcon;
+const getVariant = (variant, isSelected) => !isSelected || variant === _constants.RATING_VARIANTS.STAR ? 'shadow' : 'outlined';
+exports.getVariant = getVariant;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RATING_VARIANTS = void 0;
+const RATING_VARIANTS = exports.RATING_VARIANTS = {
+  FACES: 'faces',
+  STAR: 'star',
+  TEXT: 'text'
+};

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

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
+var _utils = require("../../../UTValidation/utils");
+var _UTValidation = _interopRequireDefault(require("../../../UTValidation"));
+var _useScreenSize = require("../../../../utils/useScreenSize");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _Option = _interopRequireDefault(require("./components/Option"));
+var _constants = require("./constants");
+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 UTRating = _ref => {
+  let {
+    classNames = {},
+    dataTestId,
+    disabled,
+    error,
+    helpTextEnd,
+    helpTextStart,
+    onChange,
+    options = [],
+    required,
+    title,
+    validations,
+    value,
+    variant = _constants.RATING_VARIANTS.STAR
+  } = _ref;
+  const {
+    isMobileOrTablet
+  } = (0, _useScreenSize.useScreenSize)();
+  const validationData = (0, _react.useMemo)(() => validations || error && (0, _utils.formatErrorToValidation)(error), [error, validations]);
+  const valueIndex = options.map(_ref2 => {
+    let {
+      value: optionValue
+    } = _ref2;
+    return optionValue;
+  }).indexOf(value);
+  const isSelected = index => valueIndex !== -1 && variant === _constants.RATING_VARIANTS.STAR ? index <= valueIndex : index === valueIndex;
+  const wrapperStyle = {
+    boxSizing: 'border-box',
+    display: 'flex',
+    flex: isMobileOrTablet && options.length > 5 ? "0 0 calc(".concat(100 / Math.ceil(options.length / 2), "% - 4px)") : '1 '
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(classNames.container),
+    "data-testid": dataTestId
+  }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    colorTheme: "dark",
+    required: required
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.optionsContainer, " ").concat(classNames.optionsContainer, " ").concat(isMobileOrTablet ? _stylesModule.default.responsive : '')
+  }, options.map((option, index) => /*#__PURE__*/_react.default.createElement(_Option.default, _extends({}, option, {
+    disabled: disabled,
+    error: error,
+    isSelected: isSelected(index),
+    key: option.value,
+    onChange: onChange,
+    variant: variant,
+    wrapperStyle: wrapperStyle
+  })))), helpTextStart && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.helpTextContainer, " ").concat(classNames.helpTextContainer)
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    variant: "small"
+  }, helpTextStart), helpTextEnd && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    variant: "small"
+  }, helpTextEnd)), validationData && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+    validationData: validationData
+  }));
+};
+UTRating.propTypes = {
+  classNames: _propTypes.object,
+  dataTestId: _propTypes.string,
+  disabled: _propTypes.bool,
+  error: _propTypes.string,
+  helpTextEnd: _propTypes.string,
+  helpTextStart: _propTypes.string,
+  onChange: _propTypes.func,
+  options: _propTypes.array,
+  required: _propTypes.bool,
+  title: _propTypes.string,
+  validations: _propTypes.array,
+  value: _propTypes.string,
+  variant: _propTypes.string
+};
+var _default = exports.default = UTRating;

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

@@ -0,0 +1,24 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+  width: 100%;
+}
+
+.optionsContainer {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 4px;
+  width: 100%;
+}
+
+.helpTextContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.responsive {
+  flex-wrap: wrap;
+  justify-content: center;
+}

package/dist/components/UTStatusMessage/README.md

@@ -0,0 +1,46 @@
+# UTStatusMessage
+
+The purpose of this component, as its name indicates, is to communicate a message about the status of the view or component in which it is contextually situated.
+
+## Props
+
+| Name                  | Type      | Default | Description                                                                                               |
+| --------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------  |
+| children              | element   |         | The content to be rendered inside the component.                                                          |
+| classes               | object    |         | Custom CSS classes for styling the component.                                                             |
+| colorTheme            | string    | default | Defines the color theme for the component.                                                                |
+| description           | string    |         | Description text providing additional context or information.                                             |
+| descriptionProps      | object    |         | Props to be applied to the description UTLabel.                                                           |
+| helpText              | string    |         | Help text displayed to guide the user.                                                                    |
+| helpTextProps         | object    |         | Props to be applied to the help text UTLabel.                                                             |
+| icon                  | string    |         | Icon to be displayed in the header.                                                                       |
+| iconProps             | object    |         | Props to be applied to the UTIcon                                                                         |
+| image                 | string    |         | URL of an image to be displayed in the header, replacing the icon.                                        |
+| loading               | bool      | false   | Indicates whether the component is in a loading state. Replaces the header.                               |
+| primaryAction         | func      |         | Callback function for the primary action.                                                                 |
+| primaryActionProps    | object    |         | Props to be applied to the primary action UTButton.                                                       |
+| primaryActionText     | string    |         | Text for the primary action UTButton.                                                                     |
+| secondaryAction       | func      |         | Callback function for the secondary action.                                                               |
+| secondaryActionProps  | object    |         | Props to be applied to the secondary action UTButton.                                                     |
+| secondaryActionText   | string    |         | Text for the secondary action UTButton.                                                                   |
+| showHeader            | bool      | true    | Indicates whether to display the header section of the component.                                         |
+| title                 | string    |         | Title for the component, providing context to the user.                                                   |
+| titleProps            | object    |         | Props to be applied to the title  UTLabel.                                                                |
+
+### colorTheme
+
+The value of `colorTheme` must be one of the following:
+
+- `accent`
+- `default`
+- `error`
+- `gradient`
+- `gray`
+- `identity1`
+- `identity2`
+- `identity3`
+- `identity4`
+- `info`
+- `negative`
+- `success`
+- `warning`

package/dist/components/UTStatusMessage/constants.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ICON_COLOR_THEMES = exports.COLOR_THEMES = void 0;
+const COLOR_THEMES = exports.COLOR_THEMES = {
+  ACCENT: 'accent',
+  DEFAULT: 'default',
+  ERROR: 'error',
+  GRADIENT: 'gradient',
+  GRAY: 'gray',
+  IDENTITY_1: 'identity1',
+  IDENTITY_2: 'identity2',
+  IDENTITY_3: 'identity3',
+  IDENTITY_4: 'identity4',
+  INFO: 'info',
+  NEGATIVE: 'negative',
+  SUCCESS: 'success',
+  WARNING: 'warning'
+};
+const ICON_COLOR_THEMES = exports.ICON_COLOR_THEMES = {
+  [COLOR_THEMES.ACCENT]: 'accent',
+  [COLOR_THEMES.DEFAULT]: 'dark',
+  [COLOR_THEMES.ERROR]: 'error',
+  [COLOR_THEMES.GRADIENT]: 'light',
+  [COLOR_THEMES.GRAY]: 'gray',
+  [COLOR_THEMES.IDENTITY_1]: 'light',
+  [COLOR_THEMES.IDENTITY_2]: 'light',
+  [COLOR_THEMES.IDENTITY_3]: 'light',
+  [COLOR_THEMES.IDENTITY_4]: 'light',
+  [COLOR_THEMES.INFO]: 'information',
+  [COLOR_THEMES.NEGATIVE]: 'dark',
+  [COLOR_THEMES.SUCCESS]: 'success',
+  [COLOR_THEMES.WARNING]: 'warning'
+};

package/dist/components/UTStatusMessage/index.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireDefault(require("react"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTLoading = _interopRequireDefault(require("../UTLoading"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+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 UTStatusMessage = _ref => {
+  let {
+    children,
+    classes,
+    colorTheme = _constants.COLOR_THEMES.DEFAULT,
+    description,
+    descriptionProps,
+    helpText,
+    helpTextProps,
+    icon = 'IconInfoCircle',
+    iconProps = {},
+    image,
+    loading,
+    primaryAction,
+    primaryActionProps,
+    primaryActionText,
+    secondaryAction,
+    secondaryActionProps,
+    secondaryActionText,
+    showHeader = true,
+    title,
+    titleProps
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
+  }, loading ? /*#__PURE__*/_react.default.createElement(_UTLoading.default, {
+    loading: true,
+    text: null
+  }) : showHeader ? /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.banner
+  }, image ? /*#__PURE__*/_react.default.createElement("img", {
+    src: image,
+    className: "".concat(_stylesModule.default.image, " ").concat(classes.image),
+    alt: ""
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.iconContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
+    name: icon,
+    colorTheme: _constants.ICON_COLOR_THEMES[colorTheme]
+  }, iconProps)))) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.content, " ").concat(classes.content)
+  }, (title || description || helpText) && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.section
+  }, title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    className: _stylesModule.default.label,
+    variant: "title3",
+    weight: "medium"
+  }, titleProps), title), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    className: _stylesModule.default.label,
+    colorTheme: "gray",
+    variant: "body"
+  }, descriptionProps), description), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    className: _stylesModule.default.label,
+    colorTheme: "gray",
+    variant: "small"
+  }, helpTextProps), helpText)), children, (primaryAction || secondaryAction) && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.section
+  }, primaryAction && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    onClick: primaryAction
+  }, primaryActionProps), primaryActionText), secondaryAction && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    onClick: secondaryAction,
+    variant: "text"
+  }, secondaryActionProps), secondaryActionText))));
+};
+UTStatusMessage.propTypes = {
+  children: _propTypes.element,
+  classes: _propTypes.object,
+  colorTheme: _propTypes.string,
+  description: _propTypes.string,
+  descriptionProps: _propTypes.object,
+  helpText: _propTypes.string,
+  helpTextProps: _propTypes.object,
+  icon: _propTypes.string,
+  iconProps: _propTypes.object,
+  image: _propTypes.string,
+  loading: _propTypes.bool,
+  primaryAction: _propTypes.func,
+  primaryActionProps: _propTypes.object,
+  primaryActionText: _propTypes.string,
+  secondaryAction: _propTypes.func,
+  secondaryActionProps: _propTypes.object,
+  secondaryActionText: _propTypes.string,
+  showHeader: _propTypes.bool,
+  title: _propTypes.string,
+  titleProps: _propTypes.object
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTStatusMessage);

package/dist/components/UTStatusMessage/styles.module.scss

@@ -0,0 +1,37 @@
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  grid-gap: 24px;
+  justify-content: center;
+  width: 100%;
+}
+
+.content {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  grid-gap: 24px;
+  justify-content: center;
+  max-width: 500px;
+  width: 100%;
+}
+
+.section {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+  justify-content: center;
+}
+
+.label {
+  text-align: center;
+}
+
+.image {
+  height: 200px;
+  width: 200px;
+}

package/dist/components/UTStatusMessage/theme.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _constants = require("./constants");
+const getIconBackgroundColor = (colorTheme, theme) => {
+  var _theme$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4, _theme$Palette5, _theme$Palette6, _theme$Palette7, _theme$Palette8, _theme$Palette9, _theme$Palette10, _theme$Palette11, _theme$Palette12;
+  return {
+    [_constants.COLOR_THEMES.ACCENT]: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.accent['01'],
+    [_constants.COLOR_THEMES.DEFAULT]: (_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2.light['03'],
+    [_constants.COLOR_THEMES.ERROR]: (_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.error['01'],
+    [_constants.COLOR_THEMES.GRADIENT]: 'light',
+    [_constants.COLOR_THEMES.GRAY]: (_theme$Palette4 = theme.Palette) === null || _theme$Palette4 === void 0 ? void 0 : _theme$Palette4.light['03'],
+    [_constants.COLOR_THEMES.IDENTITY_1]: (_theme$Palette5 = theme.Palette) === null || _theme$Palette5 === void 0 || (_theme$Palette5 = _theme$Palette5.identitySolid) === null || _theme$Palette5 === void 0 ? void 0 : _theme$Palette5['01'],
+    [_constants.COLOR_THEMES.IDENTITY_2]: (_theme$Palette6 = theme.Palette) === null || _theme$Palette6 === void 0 || (_theme$Palette6 = _theme$Palette6.identitySolid) === null || _theme$Palette6 === void 0 ? void 0 : _theme$Palette6['02'],
+    [_constants.COLOR_THEMES.IDENTITY_3]: (_theme$Palette7 = theme.Palette) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.identitySolid) === null || _theme$Palette7 === void 0 ? void 0 : _theme$Palette7['03'],
+    [_constants.COLOR_THEMES.IDENTITY_4]: (_theme$Palette8 = theme.Palette) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.identitySolid) === null || _theme$Palette8 === void 0 ? void 0 : _theme$Palette8['04'],
+    [_constants.COLOR_THEMES.INFO]: (_theme$Palette9 = theme.Palette) === null || _theme$Palette9 === void 0 ? void 0 : _theme$Palette9.information['01'],
+    [_constants.COLOR_THEMES.NEGATIVE]: (_theme$Palette10 = theme.Palette) === null || _theme$Palette10 === void 0 ? void 0 : _theme$Palette10.light['01'],
+    [_constants.COLOR_THEMES.SUCCESS]: (_theme$Palette11 = theme.Palette) === null || _theme$Palette11 === void 0 ? void 0 : _theme$Palette11.success['01'],
+    [_constants.COLOR_THEMES.WARNING]: (_theme$Palette12 = theme.Palette) === null || _theme$Palette12 === void 0 ? void 0 : _theme$Palette12.warning['01']
+  }[colorTheme];
+};
+const getBannerBackgroundColor = (colorTheme, theme) => {
+  var _theme$Palette13, _theme$Palette14, _theme$Palette15, _theme$Palette16, _theme$Palette17, _theme$Palette18, _theme$Palette19, _theme$Palette20, _theme$Palette21, _theme$Palette22, _theme$Palette23, _theme$Palette24;
+  return {
+    [_constants.COLOR_THEMES.ACCENT]: (_theme$Palette13 = theme.Palette) === null || _theme$Palette13 === void 0 ? void 0 : _theme$Palette13.accent['03'],
+    [_constants.COLOR_THEMES.DEFAULT]: (_theme$Palette14 = theme.Palette) === null || _theme$Palette14 === void 0 ? void 0 : _theme$Palette14.gray['05'],
+    [_constants.COLOR_THEMES.ERROR]: (_theme$Palette15 = theme.Palette) === null || _theme$Palette15 === void 0 ? void 0 : _theme$Palette15.error['03'],
+    [_constants.COLOR_THEMES.GRADIENT]: null,
+    [_constants.COLOR_THEMES.GRAY]: (_theme$Palette16 = theme.Palette) === null || _theme$Palette16 === void 0 ? void 0 : _theme$Palette16.gray['03'],
+    [_constants.COLOR_THEMES.IDENTITY_1]: (_theme$Palette17 = theme.Palette) === null || _theme$Palette17 === void 0 || (_theme$Palette17 = _theme$Palette17.identitySolid) === null || _theme$Palette17 === void 0 ? void 0 : _theme$Palette17['01'],
+    [_constants.COLOR_THEMES.IDENTITY_2]: (_theme$Palette18 = theme.Palette) === null || _theme$Palette18 === void 0 || (_theme$Palette18 = _theme$Palette18.identitySolid) === null || _theme$Palette18 === void 0 ? void 0 : _theme$Palette18['02'],
+    [_constants.COLOR_THEMES.IDENTITY_3]: (_theme$Palette19 = theme.Palette) === null || _theme$Palette19 === void 0 || (_theme$Palette19 = _theme$Palette19.identitySolid) === null || _theme$Palette19 === void 0 ? void 0 : _theme$Palette19['03'],
+    [_constants.COLOR_THEMES.IDENTITY_4]: (_theme$Palette20 = theme.Palette) === null || _theme$Palette20 === void 0 || (_theme$Palette20 = _theme$Palette20.identitySolid) === null || _theme$Palette20 === void 0 ? void 0 : _theme$Palette20['04'],
+    [_constants.COLOR_THEMES.INFO]: (_theme$Palette21 = theme.Palette) === null || _theme$Palette21 === void 0 ? void 0 : _theme$Palette21.information['03'],
+    [_constants.COLOR_THEMES.NEGATIVE]: (_theme$Palette22 = theme.Palette) === null || _theme$Palette22 === void 0 ? void 0 : _theme$Palette22.light['01'],
+    [_constants.COLOR_THEMES.SUCCESS]: (_theme$Palette23 = theme.Palette) === null || _theme$Palette23 === void 0 ? void 0 : _theme$Palette23.success['03'],
+    [_constants.COLOR_THEMES.WARNING]: (_theme$Palette24 = theme.Palette) === null || _theme$Palette24 === void 0 ? void 0 : _theme$Palette24.warning['03']
+  }[colorTheme];
+};
+const retrieveStyle = _ref => {
+  var _theme$Palette25, _theme$Palette26;
+  let {
+    showBanner = true,
+    theme,
+    colorTheme = _constants.COLOR_THEMES.DEFAULT
+  } = _ref;
+  const gradient = "linear-gradient(45deg, ".concat((_theme$Palette25 = theme.Palette) === null || _theme$Palette25 === void 0 || (_theme$Palette25 = _theme$Palette25.identityGradient) === null || _theme$Palette25 === void 0 ? void 0 : _theme$Palette25['01'], " 0%, ").concat((_theme$Palette26 = theme.Palette) === null || _theme$Palette26 === void 0 || (_theme$Palette26 = _theme$Palette26.identityGradient) === null || _theme$Palette26 === void 0 ? void 0 : _theme$Palette26['02'], " 100%);");
+  return {
+    iconContainer: {
+      alignItems: 'center',
+      background: colorTheme === _constants.COLOR_THEMES.GRADIENT && !showBanner ? gradient : '',
+      backgroundColor: getIconBackgroundColor(colorTheme, theme),
+      borderRadius: 100,
+      display: 'flex',
+      height: 56,
+      justifyContent: 'center',
+      width: 56
+    },
+    banner: {
+      alignItems: 'center',
+      background: colorTheme === _constants.COLOR_THEMES.GRADIENT && showBanner ? gradient : '',
+      backgroundColor: showBanner ? getBannerBackgroundColor(colorTheme, theme) : 'transparent',
+      display: 'flex',
+      justifyContent: 'center',
+      padding: '12px 0',
+      width: '100%'
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/index.js

@@ -321,6 +321,12 @@ Object.defineProperty(exports, "UTStatus", {
     return _UTStatus.default;
   }
 });
+Object.defineProperty(exports, "UTStatusMessage", {
+  enumerable: true,
+  get: function () {
+    return _UTStatusMessage.default;
+  }
+});
 Object.defineProperty(exports, "UTSwitch", {
   enumerable: true,
   get: function () {
@@ -477,6 +483,7 @@ var _UTSelectableCard = _interopRequireDefault(require("./components/UTSelectabl
 var _UTSidebar = _interopRequireDefault(require("./components/UTSidebar"));
 var _UTSkeleton = _interopRequireDefault(require("./components/UTSkeleton"));
 var _UTStatus = _interopRequireDefault(require("./components/UTStatus"));
+var _UTStatusMessage = _interopRequireDefault(require("./components/UTStatusMessage"));
 var _UTSwitch = _interopRequireDefault(require("./components/UTSwitch"));
 var _UTTable = _interopRequireDefault(require("./components/UTTable"));
 var _UTTabs = _interopRequireDefault(require("./components/UTTabs"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.38.0",
+  "version": "3.39.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",