@widergy/energy-ui 3.161.0 → 3.162.1

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

@@ -0,0 +1,157 @@
+/* eslint-disable no-alert */
+import UTBanner from '..';
+import { COLOR_THEMES, PLACEMENTS, SIZES, VARIANTS } from '../constants';
+export default {
+  args: {
+    buttonPlacement: PLACEMENTS.HORIZONTAL,
+    colorTheme: COLOR_THEMES.GRAY,
+    iconPlacement: PLACEMENTS.HORIZONTAL,
+    size: SIZES.MEDIUM,
+    title: 'Your account information has been updated successfully.',
+    variant: VARIANTS.LIGHT
+  },
+  argTypes: {
+    button: {
+      control: 'object',
+      description: 'Primary action button. Accepts all UTButton props.',
+      table: {
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    buttonPlacement: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(PLACEMENTS)
+    },
+    category: {
+      control: 'text',
+      description: 'Optional category label shown above the title (xsmall, uppercase, gray).'
+    },
+    colorTheme: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(COLOR_THEMES)
+    },
+    description: {
+      control: 'text',
+      description: 'Optional body text shown below the title (small).'
+    },
+    helpText: {
+      control: 'text',
+      description: 'Optional secondary text shown below the description (small, gray).'
+    },
+    iconPlacement: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(PLACEMENTS)
+    },
+    Icon: {
+      control: 'text',
+      description: 'Nombre del ícono (string) o componente React. Ej: "IconAlertCircle".'
+    },
+    iconProps: {
+      control: false
+    },
+    onClose: {
+      control: false
+    },
+    secondaryButton: {
+      control: 'object',
+      description: 'Secondary action button. Renders as variant="text" by default.'
+    },
+    size: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(SIZES)
+    },
+    title: {
+      control: 'text',
+      description: 'Main text of the banner.'
+    },
+    variant: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(VARIANTS)
+    }
+  },
+  component: UTBanner,
+  title: 'Energy-UI/UTBanner'
+};
+export const Playground = {};
+export const WithClose = {
+  args: {
+    colorTheme: COLOR_THEMES.WARNING,
+    onClose: () => alert('closed'),
+    title: 'Session will expire in 5 minutes.'
+  },
+  name: 'With Close Button'
+};
+export const WithActions = {
+  args: {
+    button: {
+      title: 'Retry',
+      onClick: () => alert('retry')
+    },
+    colorTheme: COLOR_THEMES.ERROR,
+    secondaryButton: {
+      title: 'Dismiss',
+      onClick: () => alert('dismiss')
+    },
+    title: 'Something went wrong while loading your data.'
+  },
+  name: 'With Actions'
+};
+export const WithCategoryAndHelpText = {
+  args: {
+    category: 'Notice',
+    colorTheme: COLOR_THEMES.INFORMATION,
+    helpText: 'Contact billing if you have any questions.',
+    title: 'Your invoice is due in 3 days.'
+  },
+  name: 'With Category and Help Text'
+};
+export const WithDescription = {
+  args: {
+    colorTheme: COLOR_THEMES.INFORMATION,
+    description: 'This action cannot be undone. All associated data will be permanently removed.',
+    title: 'Are you sure you want to delete this account?'
+  },
+  name: 'With Description'
+};
+export const VerticalLayout = {
+  args: {
+    button: {
+      title: 'View Details',
+      onClick: () => alert('details')
+    },
+    buttonPlacement: PLACEMENTS.VERTICAL,
+    category: 'Update',
+    colorTheme: COLOR_THEMES.PRIMARY,
+    description: 'This update includes performance improvements and bug fixes.',
+    helpText: 'Restart the app to apply changes.',
+    iconPlacement: PLACEMENTS.VERTICAL,
+    secondaryButton: {
+      title: 'Later',
+      onClick: () => alert('later')
+    },
+    size: SIZES.LARGE,
+    title: 'A new version is available.'
+  },
+  name: 'Vertical Layout'
+};
+export const DarkVariant = {
+  args: {
+    colorTheme: COLOR_THEMES.NEGATIVE,
+    onClose: () => alert('closed'),
+    title: 'Critical maintenance scheduled for tonight.',
+    variant: VARIANTS.DARK
+  },
+  name: 'Dark Variant'
+};

package/dist/esm/components/UTBanner/styles.module.scss

@@ -1,7 +1,151 @@
 .bannerContainer {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    grid-gap: 16px;
-    padding: 16px;
+  align-items: flex-start;
+  border-radius: var(--UT-banner-radius, 8px);
+  display: flex;
+  flex-direction: row;
+}
+
+.contentContainer {
+  display: flex;
+  flex: 1;
+}
+
+.contentHorizontal {
+  align-items: flex-start;
+  flex-direction: row;
+}
+
+.contentVertical {
+  flex-direction: column;
+}
+
+.iconTextContainer {
+  display: flex;
+  grid-gap: var(--UT-banner-icon-gap, 12px);
+}
+
+.iconHorizontal {
+  align-items: flex-start;
+  flex-direction: row;
+}
+
+.iconVertical {
+  flex-direction: column;
+}
+
+.iconFlex {
+  flex: 1;
+}
+
+.textContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--UT-banner-text-gap, 8px);
+}
+
+.textFlex {
+  flex: 1;
+}
+
+.buttonsContainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  grid-gap: var(--UT-banner-buttons-gap, 8px);
+}
+
+.buttonsVertical {
+  align-self: flex-start;
+}
+
+.gapSmall {
+  grid-gap: var(--UT-banner-gap-sm, 8px);
+}
+
+.gapMedium {
+  grid-gap: var(--UT-banner-gap-md, 16px);
+}
+
+.gapLarge {
+  grid-gap: var(--UT-banner-gap-lg, 24px);
+}
+
+.paddingSmall {
+  padding: var(--UT-banner-padding-y-sm, 8px) var(--UT-banner-padding-x-sm, 12px);
+}
+
+.paddingMedium {
+  padding: var(--UT-banner-padding-md, 16px);
+}
+
+.paddingLarge {
+  padding: var(--UT-banner-padding-lg, 24px);
+}
+
+.errorLight {
+  background-color: var(--actionError01);
+}
+
+.errorDark {
+  background-color: var(--actionError04);
+}
+
+.grayLight {
+  background-color: var(--light02);
+}
+
+.grayDark {
+  background-color: var(--gray05);
+}
+
+.informationLight {
+  background-color: var(--semanticInformation01);
+}
+
+.informationDark {
+  background-color: var(--semanticInformation04);
+}
+
+.negativeLight {
+  background-color: var(--actionNegative02);
+}
+
+.negativeDark {
+  background-color: var(--actionNegative04);
+}
+
+.primaryLight {
+  background-color: var(--actionAccent01);
+}
+
+.primaryDark {
+  background-color: var(--actionAccent04);
+}
+
+.successLight {
+  background-color: var(--semanticSuccess01);
+}
+
+.successDark {
+  background-color: var(--semanticSuccess04);
+}
+
+.warningLight {
+  background-color: var(--semanticWarning01);
+}
+
+.warningDark {
+  background-color: var(--semanticWarning04);
+}
+
+.whiteLight {
+  background-color: var(--light01);
+}
+
+.whiteDark {
+  background-color: var(--dark04);
+}
+
+.uppercase {
+  text-transform: uppercase;
 }

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

@@ -0,0 +1,14 @@
+import { bool, func, node, oneOfType, shape, string } from 'prop-types';
+export const buttonType = shape({
+  colorTheme: string,
+  dataTestId: string,
+  disabled: bool,
+  Icon: oneOfType([string, func]),
+  iconPlacement: string,
+  loading: bool,
+  onClick: func,
+  size: string,
+  title: node,
+  type: string,
+  variant: string
+});

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

@@ -0,0 +1,137 @@
+import { COLOR_THEMES, SIZES, VARIANTS } from './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 }}
+ */
+export const getDefaultIconTheme = (colorTheme, variant) => {
+  var _COLOR_THEMES$ERROR$C;
+  if (variant === VARIANTS.DARK) {
+    return colorTheme === COLOR_THEMES.NEGATIVE ? {
+      colorTheme: 'dark',
+      shade: '05'
+    } : {
+      colorTheme: 'light',
+      shade: '01'
+    };
+  }
+  return (_COLOR_THEMES$ERROR$C = {
+    [COLOR_THEMES.ERROR]: {
+      colorTheme: 'error',
+      shade: '04'
+    },
+    [COLOR_THEMES.GRAY]: {
+      colorTheme: 'accent',
+      shade: '04'
+    },
+    [COLOR_THEMES.INFORMATION]: {
+      colorTheme: 'information',
+      shade: '04'
+    },
+    [COLOR_THEMES.NEGATIVE]: {
+      colorTheme: 'light',
+      shade: '01'
+    },
+    [COLOR_THEMES.PRIMARY]: {
+      colorTheme: 'accent',
+      shade: '04'
+    },
+    [COLOR_THEMES.SUCCESS]: {
+      colorTheme: 'success',
+      shade: '04'
+    },
+    [COLOR_THEMES.WARNING]: {
+      colorTheme: 'warning',
+      shade: '04'
+    },
+    [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}
+ */
+export const getDefaultIconSize = size => size === 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 }}
+ */
+export const getDefaultButtonColorTheme = variant => {
+  const isDark = variant === 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 }}
+ */
+export const getLabelStyles = size => {
+  var _SIZES$LARGE$SIZES$ME;
+  return (_SIZES$LARGE$SIZES$ME = {
+    [SIZES.LARGE]: {
+      titleVariant: 'title3',
+      descriptionVariant: 'body'
+    },
+    [SIZES.MEDIUM]: {
+      titleVariant: 'subtitle1',
+      descriptionVariant: 'small'
+    },
+    [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.
+ */
+export const getLabelColorTheme = (colorTheme, variant) => {
+  if (colorTheme === COLOR_THEMES.NEGATIVE) {
+    return variant === VARIANTS.LIGHT ? 'light' : 'dark';
+  }
+  return variant === 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.
+ */
+export const getSecondaryLabelColorTheme = (colorTheme, variant) => {
+  if (colorTheme === COLOR_THEMES.NEGATIVE) {
+    return variant === VARIANTS.LIGHT ? 'light' : 'gray';
+  }
+  return variant === VARIANTS.LIGHT ? 'gray' : 'light';
+};

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

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import * as d3 from 'd3';
 import { array, object, objectOf, string } from 'prop-types';
 import { mergeMultipleClassNames } from '../../utils/classesUtils';
@@ -168,7 +168,7 @@ const UTGraph = _ref => {
       crossAxisLeft,
       crossAxisRight
     } = _ref2;
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Bars, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Bars, {
       crossAxisLeft: crossAxisLeft,
       crossAxisRight: crossAxisRight,
       dataset: dataset,

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

@@ -146,8 +146,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: arrayOf(object),

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

@@ -0,0 +1,54 @@
+const flagComponentMap = {
+  AG: () => import('./AG'),
+  AI: () => import('./AI'),
+  AR: () => import('./AR'),
+  AW: () => import('./AW'),
+  BB: () => import('./BB'),
+  BL: () => import('./BL'),
+  BM: () => import('./BM'),
+  BO: () => import('./BO'),
+  BR: () => import('./BR'),
+  BS: () => import('./BS'),
+  BZ: () => import('./BZ'),
+  CA: () => import('./CA'),
+  CL: () => import('./CL'),
+  CO: () => import('./CO'),
+  CR: () => import('./CR'),
+  CU: () => import('./CU'),
+  CW: () => import('./CW'),
+  DM: () => import('./DM'),
+  DO: () => import('./DO'),
+  EC: () => import('./EC'),
+  ES: () => import('./ES'),
+  GD: () => import('./GD'),
+  GF: () => import('./GF'),
+  GL: () => import('./GL'),
+  GP: () => import('./GP'),
+  GT: () => import('./GT'),
+  GY: () => import('./GY'),
+  HN: () => import('./HN'),
+  HT: () => import('./HT'),
+  JM: () => import('./JM'),
+  LC: () => import('./LC'),
+  MF: () => import('./MF'),
+  MQ: () => import('./MQ'),
+  MS: () => import('./MS'),
+  MX: () => import('./MX'),
+  NI: () => import('./NI'),
+  PA: () => import('./PA'),
+  PE: () => import('./PE'),
+  PM: () => import('./PM'),
+  PR: () => import('./PR'),
+  PY: () => import('./PY'),
+  SR: () => import('./SR'),
+  SV: () => import('./SV'),
+  TC: () => import('./TC'),
+  TT: () => import('./TT'),
+  US: () => import('./US'),
+  UY: () => import('./UY'),
+  VC: () => import('./VC'),
+  VE: () => import('./VE'),
+  VG: () => import('./VG'),
+  VI: () => import('./VI')
+};
+export default flagComponentMap;

package/dist/esm/components/UTIcon/theme.js

@@ -4,6 +4,7 @@ import { capitalize, getDefaultColorShade } from '../../utils/componentUtils';
 import countries from '../../constants/countries';
 import { ENERGY_ICONS, ENERGY_ICON_PREFIX, FILLED_ICON_COLOR, FILLED_ICON_SUFIX, DEFAULT_INTERNAL_SHADE, DEFAULT_COLOR_THEME } from './constants';
 import styles from './styles.module.scss';
+import flagComponentMap from './components/FlagsIcons/flagsComponents';
 const FLAG_CODES = new Set(countries.map(_ref => {
   let {
     code
@@ -12,8 +13,9 @@ const FLAG_CODES = new Set(countries.map(_ref => {
 }));
 const flagComponentCache = {};
 const getFlagComponent = code => {
-  if (!flagComponentCache[code]) {
-    flagComponentCache[code] = /*#__PURE__*/React.lazy(() => import("./components/FlagsIcons/flagsComponents/".concat(code)));
+  if (!(code in flagComponentCache)) {
+    const loader = flagComponentMap[code];
+    flagComponentCache[code] = loader ? /*#__PURE__*/React.lazy(loader) : null;
   }
   return flagComponentCache[code];
 };

package/dist/esm/constants/testIds.js

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

package/dist/esm/index.js

@@ -9,6 +9,7 @@ import AttachmentContainer from './deprecated/UTAttachment';
 import UTAutocomplete from './deprecated/UTAutocomplete';
 import UTAvatar from './components/UTAvatar';
 import UTBadge from './components/UTBadge';
+import UTBanner from './components/UTBanner';
 import UTBarChart from './deprecated/UTBarChart';
 import UTBreadcrumbs from './components/UTBreadcrumbs';
 import UTButton from './components/UTButton';
@@ -106,4 +107,4 @@ export { UTList };
 export { UTPieChart };
 /** @deprecated */
 export { UTToggle };
-export { AlertHandler, componentUtils, ThemeProvider as EnergyThemeProvider, keyboardUtils, stylesDeduplicationUtils, useCSSVariables, UTCalendar, UTActionCard, UTAlert, UTAttachmentList, UTAvatar, UTBadge, UTBreadcrumbs, UTButton, UTButtonGroup, UTCaptcha, UTCarousel, UTCBUInput, UTCheckbox, UTCheckList, UTChip, UTConsumptionBar, UTCreditCard, UTCuit, UTDataCategory, UTDataElement, UTDatePicker, UTDocumentWizard, UTDotMenu, UTEmojiPicker, UTExternalLink, UTFileInputContainer as UTFileInput, UTShortcutPanel, UTGoogleAutocomplete, UTGraph, UTIcon, UTImageRadio, UTKpi, UTLabel, UTLoading, UTMap, UTMenu, UTModal, UTOnboarding, UTPagination, UTPanel, UTPasswordField, UTPhoneInput, UTPopper, UTPopUp, UTProductItem, UTProgressBar, UTRadioGroup, UTRatingContainer as UTRating, UTSearchField, UTSelect, UTSelectableCard, UTSidebar, UTSignature, Skeleton as UTSkeleton, UTStatus, UTStatusMessage, UTSwitch, UTTable, UTTabs, UTTextArea, UTTextInput, UTThirdPartyCookieChecker, UTTooltip, UTTopbar, UTTouchableWithoutFeedback, UTTracker, UTValidation, UTVirtualizedList, UTVirtualKeyboard, UTWorkflowContainer, UTWrapperObservation, WithLoading, WithTouch, useScrollBasedMenu };
+export { AlertHandler, componentUtils, ThemeProvider as EnergyThemeProvider, keyboardUtils, stylesDeduplicationUtils, useCSSVariables, UTCalendar, UTActionCard, UTAlert, UTAttachmentList, UTAvatar, UTBadge, UTBanner, UTBreadcrumbs, UTButton, UTButtonGroup, UTCaptcha, UTCarousel, UTCBUInput, UTCheckbox, UTCheckList, UTChip, UTConsumptionBar, UTCreditCard, UTCuit, UTDataCategory, UTDataElement, UTDatePicker, UTDocumentWizard, UTDotMenu, UTEmojiPicker, UTExternalLink, UTFileInputContainer as UTFileInput, UTShortcutPanel, UTGoogleAutocomplete, UTGraph, UTIcon, UTImageRadio, UTKpi, UTLabel, UTLoading, UTMap, UTMenu, UTModal, UTOnboarding, UTPagination, UTPanel, UTPasswordField, UTPhoneInput, UTPopper, UTPopUp, UTProductItem, UTProgressBar, UTRadioGroup, UTRatingContainer as UTRating, UTSearchField, UTSelect, UTSelectableCard, UTSidebar, UTSignature, Skeleton as UTSkeleton, UTStatus, UTStatusMessage, UTSwitch, UTTable, UTTabs, UTTextArea, UTTextInput, UTThirdPartyCookieChecker, UTTooltip, UTTopbar, UTTouchableWithoutFeedback, UTTracker, UTValidation, UTVirtualizedList, UTVirtualKeyboard, UTWorkflowContainer, UTWrapperObservation, WithLoading, WithTouch, useScrollBasedMenu };

package/dist/esm/utils/hooks/useCSSVariables/constants.js

@@ -163,6 +163,19 @@ export const baseTokens = {
     'radius-xl': 'radius-500'
   },
   component: {
+    'UT-banner-buttons-gap': 'gap-sm',
+    'UT-banner-gap-lg': 'gap-xl',
+    'UT-banner-gap-md': 'gap-lg',
+    'UT-banner-gap-sm': 'gap-sm',
+    'UT-banner-icon-gap': 'gap-md',
+    'UT-banner-icon-size-lg': 'size-icon-md',
+    'UT-banner-icon-size-sm': 'size-icon-xs',
+    'UT-banner-padding-lg': 'padding-lg',
+    'UT-banner-padding-md': 'padding-md',
+    'UT-banner-padding-x-sm': 'padding-sm',
+    'UT-banner-padding-y-sm': 'padding-xs',
+    'UT-banner-radius': 'radius-md',
+    'UT-banner-text-gap': 'gap-sm',
     'UT-button-height-sm': 'size-control-sm',
     'UT-button-height-md': 'size-control-md',
     'UT-button-height-lg': 'size-control-lg',

package/dist/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "UTBadge", {
     return _UTBadge.default;
   }
 });
+Object.defineProperty(exports, "UTBanner", {
+  enumerable: true,
+  get: function () {
+    return _UTBanner.default;
+  }
+});
 Object.defineProperty(exports, "UTBarChart", {
   enumerable: true,
   get: function () {
@@ -548,6 +554,7 @@ var _UTAttachment = _interopRequireDefault(require("./deprecated/UTAttachment"))
 var _UTAutocomplete = _interopRequireDefault(require("./deprecated/UTAutocomplete"));
 var _UTAvatar = _interopRequireDefault(require("./components/UTAvatar"));
 var _UTBadge = _interopRequireDefault(require("./components/UTBadge"));
+var _UTBanner = _interopRequireDefault(require("./components/UTBanner"));
 var _UTBarChart = _interopRequireDefault(require("./deprecated/UTBarChart"));
 var _UTBreadcrumbs = _interopRequireDefault(require("./components/UTBreadcrumbs"));
 var _UTButton = _interopRequireDefault(require("./components/UTButton"));

package/dist/utils/hooks/useCSSVariables/constants.js

@@ -169,6 +169,19 @@ const baseTokens = exports.baseTokens = {
     'radius-xl': 'radius-500'
   },
   component: {
+    'UT-banner-buttons-gap': 'gap-sm',
+    'UT-banner-gap-lg': 'gap-xl',
+    'UT-banner-gap-md': 'gap-lg',
+    'UT-banner-gap-sm': 'gap-sm',
+    'UT-banner-icon-gap': 'gap-md',
+    'UT-banner-icon-size-lg': 'size-icon-md',
+    'UT-banner-icon-size-sm': 'size-icon-xs',
+    'UT-banner-padding-lg': 'padding-lg',
+    'UT-banner-padding-md': 'padding-md',
+    'UT-banner-padding-x-sm': 'padding-sm',
+    'UT-banner-padding-y-sm': 'padding-xs',
+    'UT-banner-radius': 'radius-md',
+    'UT-banner-text-gap': 'gap-sm',
     'UT-button-height-sm': 'size-control-sm',
     'UT-button-height-md': 'size-control-md',
     'UT-button-height-lg': 'size-control-lg',

package/package.json

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