@widergy/energy-ui 3.161.0 → 3.162.1

package/dist/components/UTBanner/utils.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSecondaryLabelColorTheme = exports.getLabelStyles = exports.getLabelColorTheme = exports.getDefaultIconTheme = exports.getDefaultIconSize = exports.getDefaultButtonColorTheme = void 0;
+var _constants = require("./constants");
+/**
+ * Returns the default UTIcon colorTheme and shade for the banner icon based on the
+ * banner's colorTheme and variant. Matches the mobile implementation.
+ * @param {string} colorTheme - Banner color theme.
+ * @param {string} variant - Banner variant ('light' | 'dark').
+ * @returns {{ colorTheme: string, shade: string }}
+ */
+const getDefaultIconTheme = (colorTheme, variant) => {
+  var _COLOR_THEMES$ERROR$C;
+  if (variant === _constants.VARIANTS.DARK) {
+    return colorTheme === _constants.COLOR_THEMES.NEGATIVE ? {
+      colorTheme: 'dark',
+      shade: '05'
+    } : {
+      colorTheme: 'light',
+      shade: '01'
+    };
+  }
+  return (_COLOR_THEMES$ERROR$C = {
+    [_constants.COLOR_THEMES.ERROR]: {
+      colorTheme: 'error',
+      shade: '04'
+    },
+    [_constants.COLOR_THEMES.GRAY]: {
+      colorTheme: 'accent',
+      shade: '04'
+    },
+    [_constants.COLOR_THEMES.INFORMATION]: {
+      colorTheme: 'information',
+      shade: '04'
+    },
+    [_constants.COLOR_THEMES.NEGATIVE]: {
+      colorTheme: 'light',
+      shade: '01'
+    },
+    [_constants.COLOR_THEMES.PRIMARY]: {
+      colorTheme: 'accent',
+      shade: '04'
+    },
+    [_constants.COLOR_THEMES.SUCCESS]: {
+      colorTheme: 'success',
+      shade: '04'
+    },
+    [_constants.COLOR_THEMES.WARNING]: {
+      colorTheme: 'warning',
+      shade: '04'
+    },
+    [_constants.COLOR_THEMES.WHITE]: {
+      colorTheme: 'accent',
+      shade: '04'
+    }
+  }[colorTheme]) !== null && _COLOR_THEMES$ERROR$C !== void 0 ? _COLOR_THEMES$ERROR$C : {
+    colorTheme: 'accent',
+    shade: '04'
+  };
+};
+
+/**
+ * Returns the default icon size in pixels based on the banner size.
+ * @param {string} size - One of SIZES values.
+ * @returns {number}
+ */
+exports.getDefaultIconTheme = getDefaultIconTheme;
+const getDefaultIconSize = size => size === _constants.SIZES.LARGE ? 24 : 20;
+
+/**
+ * Returns the default colorTheme for buttons and the close button based on the
+ * banner variant. Dark variant uses 'negative'; light variant uses standard colors.
+ * @param {string} variant - Banner variant ('light' | 'dark').
+ * @returns {{ button: string, onClose: string, secondaryButton: string }}
+ */
+exports.getDefaultIconSize = getDefaultIconSize;
+const getDefaultButtonColorTheme = variant => {
+  const isDark = variant === _constants.VARIANTS.DARK;
+  return {
+    button: isDark ? 'negative' : 'secondary',
+    onClose: isDark ? 'negative' : 'gray',
+    secondaryButton: isDark ? 'negative' : 'secondary'
+  };
+};
+
+/**
+ * Returns the UTLabel variant and weight for the main text (children) based on
+ * the banner size.
+ * @param {string} size - One of SIZES values.
+ * @returns {{ variant: string, weight: string }}
+ */
+exports.getDefaultButtonColorTheme = getDefaultButtonColorTheme;
+const getLabelStyles = size => {
+  var _SIZES$LARGE$SIZES$ME;
+  return (_SIZES$LARGE$SIZES$ME = {
+    [_constants.SIZES.LARGE]: {
+      titleVariant: 'title3',
+      descriptionVariant: 'body'
+    },
+    [_constants.SIZES.MEDIUM]: {
+      titleVariant: 'subtitle1',
+      descriptionVariant: 'small'
+    },
+    [_constants.SIZES.SMALL]: {
+      titleVariant: 'small',
+      descriptionVariant: 'small'
+    }
+  }[size]) !== null && _SIZES$LARGE$SIZES$ME !== void 0 ? _SIZES$LARGE$SIZES$ME : {
+    titleVariant: 'small',
+    descriptionVariant: 'small'
+  };
+};
+
+/**
+ * Returns the UTLabel colorTheme for the banner's main text content based on the
+ * banner's colorTheme and variant. Negative+light and any dark variant use light
+ * (white) text; all other combinations use dark text.
+ * @param {string} colorTheme - Banner color theme.
+ * @param {string} variant - Banner variant ('light' | 'dark').
+ * @returns {string} UTLabel colorTheme value.
+ */
+exports.getLabelStyles = getLabelStyles;
+const getLabelColorTheme = (colorTheme, variant) => {
+  if (colorTheme === _constants.COLOR_THEMES.NEGATIVE) {
+    return variant === _constants.VARIANTS.LIGHT ? 'light' : 'dark';
+  }
+  return variant === _constants.VARIANTS.LIGHT ? 'dark' : 'light';
+};
+
+/**
+ * Returns the UTLabel colorTheme for the banner's secondary text content based on the
+ * banner's colorTheme and variant. Negative+light and any dark variant use light
+ * (white) text; all other combinations use gray text.
+ * @param {string} colorTheme - Banner color theme.
+ * @param {string} variant - Banner variant ('light' | 'gray').
+ * @returns {string} UTLabel colorTheme value.
+ */
+exports.getLabelColorTheme = getLabelColorTheme;
+const getSecondaryLabelColorTheme = (colorTheme, variant) => {
+  if (colorTheme === _constants.COLOR_THEMES.NEGATIVE) {
+    return variant === _constants.VARIANTS.LIGHT ? 'light' : 'gray';
+  }
+  return variant === _constants.VARIANTS.LIGHT ? 'gray' : 'light';
+};
+exports.getSecondaryLabelColorTheme = getSecondaryLabelColorTheme;

package/dist/components/UTGraph/index.js

@@ -176,7 +176,7 @@ const UTGraph = _ref => {
       crossAxisLeft,
       crossAxisRight
     } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Bars.default, {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Bars.default, {
       crossAxisLeft: crossAxisLeft,
       crossAxisRight: crossAxisRight,
       dataset: dataset,

package/dist/components/UTHeader/index.js

@@ -154,8 +154,9 @@ const UTHeader = _ref => {
       height: BANNER_ICON_SIZE,
       width: BANNER_ICON_SIZE
     },
-    Icon: banner.Icon
-  }, banner.text)));
+    Icon: banner.Icon,
+    title: banner.text
+  })));
 };
 UTHeader.propTypes = {
   actions: (0, _propTypes.arrayOf)(_propTypes.object),

package/dist/components/UTIcon/components/FlagsIcons/flagsComponents/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const flagComponentMap = {
+  AG: () => Promise.resolve().then(() => _interopRequireWildcard(require('./AG'))),
+  AI: () => Promise.resolve().then(() => _interopRequireWildcard(require('./AI'))),
+  AR: () => Promise.resolve().then(() => _interopRequireWildcard(require('./AR'))),
+  AW: () => Promise.resolve().then(() => _interopRequireWildcard(require('./AW'))),
+  BB: () => Promise.resolve().then(() => _interopRequireWildcard(require('./BB'))),
+  BL: () => Promise.resolve().then(() => _interopRequireWildcard(require('./BL'))),
+  BM: () => Promise.resolve().then(() => _interopRequireWildcard(require('./BM'))),
+  BO: () => Promise.resolve().then(() => _interopRequireWildcard(require('./BO'))),
+  BR: () => Promise.resolve().then(() => _interopRequireWildcard(require('./BR'))),
+  BS: () => Promise.resolve().then(() => _interopRequireWildcard(require('./BS'))),
+  BZ: () => Promise.resolve().then(() => _interopRequireWildcard(require('./BZ'))),
+  CA: () => Promise.resolve().then(() => _interopRequireWildcard(require('./CA'))),
+  CL: () => Promise.resolve().then(() => _interopRequireWildcard(require('./CL'))),
+  CO: () => Promise.resolve().then(() => _interopRequireWildcard(require('./CO'))),
+  CR: () => Promise.resolve().then(() => _interopRequireWildcard(require('./CR'))),
+  CU: () => Promise.resolve().then(() => _interopRequireWildcard(require('./CU'))),
+  CW: () => Promise.resolve().then(() => _interopRequireWildcard(require('./CW'))),
+  DM: () => Promise.resolve().then(() => _interopRequireWildcard(require('./DM'))),
+  DO: () => Promise.resolve().then(() => _interopRequireWildcard(require('./DO'))),
+  EC: () => Promise.resolve().then(() => _interopRequireWildcard(require('./EC'))),
+  ES: () => Promise.resolve().then(() => _interopRequireWildcard(require('./ES'))),
+  GD: () => Promise.resolve().then(() => _interopRequireWildcard(require('./GD'))),
+  GF: () => Promise.resolve().then(() => _interopRequireWildcard(require('./GF'))),
+  GL: () => Promise.resolve().then(() => _interopRequireWildcard(require('./GL'))),
+  GP: () => Promise.resolve().then(() => _interopRequireWildcard(require('./GP'))),
+  GT: () => Promise.resolve().then(() => _interopRequireWildcard(require('./GT'))),
+  GY: () => Promise.resolve().then(() => _interopRequireWildcard(require('./GY'))),
+  HN: () => Promise.resolve().then(() => _interopRequireWildcard(require('./HN'))),
+  HT: () => Promise.resolve().then(() => _interopRequireWildcard(require('./HT'))),
+  JM: () => Promise.resolve().then(() => _interopRequireWildcard(require('./JM'))),
+  LC: () => Promise.resolve().then(() => _interopRequireWildcard(require('./LC'))),
+  MF: () => Promise.resolve().then(() => _interopRequireWildcard(require('./MF'))),
+  MQ: () => Promise.resolve().then(() => _interopRequireWildcard(require('./MQ'))),
+  MS: () => Promise.resolve().then(() => _interopRequireWildcard(require('./MS'))),
+  MX: () => Promise.resolve().then(() => _interopRequireWildcard(require('./MX'))),
+  NI: () => Promise.resolve().then(() => _interopRequireWildcard(require('./NI'))),
+  PA: () => Promise.resolve().then(() => _interopRequireWildcard(require('./PA'))),
+  PE: () => Promise.resolve().then(() => _interopRequireWildcard(require('./PE'))),
+  PM: () => Promise.resolve().then(() => _interopRequireWildcard(require('./PM'))),
+  PR: () => Promise.resolve().then(() => _interopRequireWildcard(require('./PR'))),
+  PY: () => Promise.resolve().then(() => _interopRequireWildcard(require('./PY'))),
+  SR: () => Promise.resolve().then(() => _interopRequireWildcard(require('./SR'))),
+  SV: () => Promise.resolve().then(() => _interopRequireWildcard(require('./SV'))),
+  TC: () => Promise.resolve().then(() => _interopRequireWildcard(require('./TC'))),
+  TT: () => Promise.resolve().then(() => _interopRequireWildcard(require('./TT'))),
+  US: () => Promise.resolve().then(() => _interopRequireWildcard(require('./US'))),
+  UY: () => Promise.resolve().then(() => _interopRequireWildcard(require('./UY'))),
+  VC: () => Promise.resolve().then(() => _interopRequireWildcard(require('./VC'))),
+  VE: () => Promise.resolve().then(() => _interopRequireWildcard(require('./VE'))),
+  VG: () => Promise.resolve().then(() => _interopRequireWildcard(require('./VG'))),
+  VI: () => Promise.resolve().then(() => _interopRequireWildcard(require('./VI')))
+};
+var _default = exports.default = flagComponentMap;

package/dist/components/UTIcon/theme.js

@@ -10,8 +10,9 @@ var _componentUtils = require("../../utils/componentUtils");
 var _countries = _interopRequireDefault(require("../../constants/countries"));
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _flagsComponents = _interopRequireDefault(require("./components/FlagsIcons/flagsComponents"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const FLAG_CODES = new Set(_countries.default.map(_ref => {
   let {
     code
@@ -20,8 +21,9 @@ const FLAG_CODES = new Set(_countries.default.map(_ref => {
 }));
 const flagComponentCache = {};
 const getFlagComponent = code => {
-  if (!flagComponentCache[code]) {
-    flagComponentCache[code] = /*#__PURE__*/_react.default.lazy(() => (specifier => new Promise(r => r(specifier)).then(s => _interopRequireWildcard(require(s))))("./components/FlagsIcons/flagsComponents/".concat(code)));
+  if (!(code in flagComponentCache)) {
+    const loader = _flagsComponents.default[code];
+    flagComponentCache[code] = loader ? /*#__PURE__*/_react.default.lazy(loader) : null;
   }
   return flagComponentCache[code];
 };

package/dist/constants/testIds.js

@@ -53,6 +53,7 @@ const ID_CONSTANTS = exports.ID_CONSTANTS = {
   PINNED: 'pinned',
   POPPER: 'popper',
   SEARCH_BUTTON: 'searchButton',
+  SECONDARY_ACTION: 'secondaryAction',
   SEARCH_BUTTON_TOOLTIP: 'searchButtonTooltip',
   SEARCH_FIELD: 'searchField',
   SELECTION_COMPONENT: 'selectionComponent',
@@ -60,6 +61,7 @@ const ID_CONSTANTS = exports.ID_CONSTANTS = {
   SIDEBAR_BUTTON: 'sidebarButton',
   STATUS_MESSAGE: 'statusMessage',
   TABLE: 'table',
+  TERTIARY_ACTION: 'tertiaryAction',
   TABLE_ROW: 'tableRow',
   TITLE: 'title',
   USER_FILTER: 'userFilter',

package/dist/esm/components/UTBanner/README.md

@@ -2,14 +2,47 @@
 
 ### Description
 
-This component displays a banner with information
+Displays a banner with contextual information. Supports multiple color themes, sizes, icon/button placement, and optional close action.
 
 ## Props
 
-| Name       | Type             | Default | Description                                                                 |
-| ---------- | ---------------- | ------- | --------------------------------------------------------------------------- |
-| children   | element          |         | The contents that will be rendered inside the component.                    |
-| classes    | object of string |         | Classes returned by UTBanner's own [theme](./theme.js#L40) `retrieveStyle`. |
-| classNames | object of string |         | Additional classes.                                                         |
-| Icon       | element          |         | Icon to be displayed at the left side of the banner.                        |
-| iconProps  | object           |         | Props to be passed onto the rendered icon.                                  |
+| Name              | Type                                                                              | Default        | Description                                                                 |
+| ----------------- | --------------------------------------------------------------------------------- | -------------- | --------------------------------------------------------------------------- |
+| button            | object (UTButton props)                                                           |                | Primary action button. All UTButton props are accepted.                      |
+| buttonPlacement   | `'horizontal'` \| `'vertical'`                                                    | `'horizontal'` | Alignment between the text group and the buttons group.                      |
+| category          | string                                                                            |                | Optional category label shown above the main text (xsmall, uppercase, gray). |
+| children          | node                                                                              |                | Main text content rendered inside the banner.                                |
+| classes           | object of string                                                                  |                | Classes returned by UTBanner's own [theme](./theme.js) `retrieveStyle`.     |
+| classNames        | object of string                                                                  |                | Additional classes merged with the themed classes.                           |
+| colorTheme        | `'error'` \| `'gray'` \| `'information'` \| `'negative'` \| `'primary'` \| `'success'` \| `'warning'` \| `'white'` | `'gray'` | Color theme that determines the banner background.          |
+| helpText          | string                                                                            |                | Optional secondary text shown below the main content (small, gray).          |
+| Icon              | element type                                                                      |                | Icon component rendered at the start of the banner.                          |
+| iconPlacement     | `'horizontal'` \| `'vertical'`                                                    | `'horizontal'` | Alignment between the icon and the text group.                               |
+| iconProps         | object                                                                            |                | Props passed to the `Icon` component.                                        |
+| onClose           | func                                                                              |                | If provided, renders a close button (gray, small, IconX) at the end.         |
+| secondaryButton   | object (UTButton props)                                                           |                | Secondary action button. Renders as `variant="text"` by default.             |
+| size              | `'small'` \| `'medium'` \| `'large'`                                              | `'medium'`     | Controls padding, gap, and icon size.                                        |
+| variant           | `'light'` \| `'dark'`                                                             | `'light'`      | Light or dark tint of the color theme.                                       |
+
+## Usage examples
+
+```jsx
+// Basic
+<UTBanner>Your account has been updated.</UTBanner>
+
+// With color theme and close
+<UTBanner colorTheme="success" onClose={() => dismiss()}>
+  Your changes were saved successfully.
+</UTBanner>
+
+// With category, helpText and actions
+<UTBanner
+  category="Alert"
+  colorTheme="warning"
+  helpText="Contact support if the issue persists."
+  button={{ children: 'Retry', onClick: handleRetry }}
+  secondaryButton={{ children: 'Dismiss', onClick: handleDismiss }}
+>
+  Something went wrong while loading your data.
+</UTBanner>
+```

package/dist/esm/components/UTBanner/constants.js

@@ -0,0 +1,30 @@
+export const SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+export const COLOR_THEMES = {
+  ERROR: 'error',
+  GRAY: 'gray',
+  INFORMATION: 'information',
+  NEGATIVE: 'negative',
+  PRIMARY: 'primary',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  WHITE: 'white'
+};
+export const VARIANTS = {
+  DARK: 'dark',
+  LIGHT: 'light'
+};
+export const PLACEMENTS = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};
+export const DEFAULT_PROPS = {
+  buttonPlacement: PLACEMENTS.HORIZONTAL,
+  colorTheme: COLOR_THEMES.GRAY,
+  iconPlacement: PLACEMENTS.HORIZONTAL,
+  size: SIZES.MEDIUM,
+  variant: VARIANTS.LIGHT
+};

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

@@ -1,29 +1,133 @@
-import React, { useMemo } from 'react';
-import { object, objectOf, string } from 'prop-types';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { elementType, func, object, objectOf, oneOf, oneOfType, string } from 'prop-types';
+import UTButton from '../UTButton';
+import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
-import { mergeClasses } from '../../utils/classesUtils';
-import WithTheme from '../WithTheme';
+import { capitalize, isUTIcon } from '../../utils/componentUtils';
+import { mergeMultipleClassNames } from '../../utils/classesUtils';
+import { ID_CONSTANTS } from '../../constants/testIds';
 import styles from './styles.module.scss';
-import { retrieveStyle } from './theme';
+import { buttonType } from './types';
+import { getDefaultButtonColorTheme, getDefaultIconSize, getDefaultIconTheme, getLabelColorTheme, getLabelStyles, getSecondaryLabelColorTheme } from './utils';
+import { COLOR_THEMES, DEFAULT_PROPS, PLACEMENTS, SIZES, VARIANTS } from './constants';
 const UTBanner = _ref => {
   let {
-    classes: themeClasses = {},
+    button,
+    buttonPlacement = DEFAULT_PROPS.buttonPlacement,
+    category,
     classNames,
-    children,
+    colorTheme = DEFAULT_PROPS.colorTheme,
+    dataTestId,
+    description,
+    helpText,
+    Icon,
+    iconPlacement = DEFAULT_PROPS.iconPlacement,
     iconProps,
-    Icon
+    onClose,
+    secondaryButton,
+    size = DEFAULT_PROPS.size,
+    title,
+    variant = DEFAULT_PROPS.variant
   } = _ref;
-  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const isVerticalButton = buttonPlacement === PLACEMENTS.VERTICAL;
+  const isVerticalIcon = iconPlacement === PLACEMENTS.VERTICAL;
+  const labelColorTheme = getLabelColorTheme(colorTheme, variant);
+  const secondaryLabelColorTheme = getSecondaryLabelColorTheme(colorTheme, variant);
+  const {
+    titleVariant,
+    descriptionVariant
+  } = getLabelStyles(size);
+  const iconTheme = getDefaultIconTheme(colorTheme, variant);
+  const iconSize = getDefaultIconSize(size);
+  const buttonColorTheme = getDefaultButtonColorTheme(variant);
+  const gapClass = styles["gap".concat(capitalize(size))];
+  const paddingClass = styles["padding".concat(capitalize(size))];
+  const colorClass = styles["".concat(colorTheme).concat(capitalize(variant))];
+  const dynamicClasses = {
+    bannerContainer: [colorClass, paddingClass, gapClass].filter(Boolean).join(' '),
+    contentContainer: [isVerticalButton ? styles.contentVertical : styles.contentHorizontal, gapClass].filter(Boolean).join(' '),
+    iconTextContainer: [isVerticalIcon ? styles.iconVertical : styles.iconHorizontal, !isVerticalButton ? styles.iconFlex : ''].filter(Boolean).join(' '),
+    textContainer: !isVerticalIcon ? styles.textFlex : '',
+    buttonsContainer: isVerticalButton ? styles.buttonsVertical : ''
+  };
+  const normalizedClassNames = classNames ? {
+    ...classNames,
+    bannerContainer: classNames.infoContainer
+  } : undefined;
+  const classes = mergeMultipleClassNames(styles, dynamicClasses, normalizedClassNames);
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles.bannerContainer, " ").concat(classes.infoContainer)
-  }, Icon && /*#__PURE__*/React.createElement(Icon, iconProps), /*#__PURE__*/React.createElement(UTLabel, {
+    className: classes.bannerContainer,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.contentContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.iconTextContainer
+  }, !!Icon && isUTIcon(Icon) ? /*#__PURE__*/React.createElement(UTIcon, _extends({
+    colorTheme: iconTheme.colorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.ICON) : undefined,
+    name: Icon,
+    shade: iconTheme.shade,
+    size: iconSize
+  }, iconProps)) : !!Icon && /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
+    "data-testId": dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.ICON) : undefined
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classes.textContainer
+  }, !!category && /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.uppercase,
+    colorTheme: secondaryLabelColorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".category.").concat(ID_CONSTANTS.LABEL) : undefined,
+    variant: "xsmall",
+    weight: "medium"
+  }, category), !!title && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: labelColorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.TITLE, ".").concat(ID_CONSTANTS.LABEL) : undefined,
+    variant: titleVariant,
+    weight: "medium"
+  }, title), !!description && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: labelColorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.DESCRIPTION, ".").concat(ID_CONSTANTS.LABEL) : undefined,
+    variant: descriptionVariant
+  }, description), !!helpText && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: secondaryLabelColorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.HELP_TEXT, ".").concat(ID_CONSTANTS.LABEL) : undefined,
     variant: "small"
-  }, children));
+  }, helpText))), !!(button || secondaryButton) && /*#__PURE__*/React.createElement("div", {
+    className: classes.buttonsContainer
+  }, !!button && /*#__PURE__*/React.createElement(UTButton, _extends({
+    colorTheme: buttonColorTheme.button
+  }, button, {
+    dataTestId: dataTestId ? "".concat(dataTestId, ".button.").concat(ID_CONSTANTS.SECONDARY_ACTION) : undefined
+  }), button.title), !!secondaryButton && /*#__PURE__*/React.createElement(UTButton, _extends({
+    colorTheme: buttonColorTheme.secondaryButton,
+    variant: "text"
+  }, secondaryButton, {
+    dataTestId: dataTestId ? "".concat(dataTestId, ".secondaryButton.").concat(ID_CONSTANTS.TERTIARY_ACTION) : undefined
+  }), secondaryButton.title))), !!onClose && /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: buttonColorTheme.onClose,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".close") : undefined,
+    Icon: "IconX",
+    onClick: onClose,
+    size: "small",
+    variant: "text"
+  }));
 };
 UTBanner.propTypes = {
-  classes: objectOf(string),
+  button: buttonType,
+  buttonPlacement: oneOf(Object.values(PLACEMENTS)),
+  category: string,
   classNames: objectOf(string),
-  Icon: object,
-  iconProps: object
+  colorTheme: oneOf(Object.values(COLOR_THEMES)),
+  dataTestId: string,
+  description: string,
+  helpText: string,
+  Icon: oneOfType([elementType, string]),
+  iconPlacement: oneOf(Object.values(PLACEMENTS)),
+  iconProps: object,
+  onClose: func,
+  secondaryButton: buttonType,
+  size: oneOf(Object.values(SIZES)),
+  title: string,
+  variant: oneOf(Object.values(VARIANTS))
 };
-export default WithTheme(retrieveStyle)(UTBanner);
+export default UTBanner;