@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTAvatar/stories/storiesConstants.js

@@ -1 +1,162 @@
-import{SHAPE,SIZE,TYPE}from"../constants";export const COMMON_ARG_TYPES={abbreviation:{control:"text",description:"The abbreviation to display instead of the initial letter",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},userName:{control:"text",description:"The name of the user to display (first letter will be shown)",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},areaShape:{control:"select",description:"The shape of the avatar",options:Object.values(SHAPE),table:{defaultValue:{summary:SHAPE.CIRCLE},type:{summary:"string"}}},size:{control:"select",description:"The size of the avatar",options:Object.values(SIZE),table:{defaultValue:{summary:SIZE.MEDIUM},type:{summary:"string"}}},type:{control:"select",description:"The type of avatar content (letter or icon)",options:Object.values(TYPE),table:{defaultValue:{summary:TYPE.LETTER},type:{summary:"string"}}},manualColors:{control:"boolean",description:"Whether to use manual colors instead of automatic palette",table:{defaultValue:{summary:!1},type:{summary:"boolean"}}},className:{control:"text",description:"Additional CSS class names",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},labelProps:{control:!1,description:"Props for the internal UTLabel component",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},iconProps:{control:!1,description:"Props for the internal UTIcon component",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},palette:{control:!1,description:"Custom color palette array",table:{defaultValue:{summary:"defaultPalette"},type:{summary:"array"}}},dataTestId:{control:"text",description:"Test identifier for the avatar",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}}};export const COMMON_ARGS={userName:"John Doe",areaShape:SHAPE.CIRCLE,size:SIZE.XLARGE,type:TYPE.LETTER,manualColors:!1,dataTestId:"customAvatarId"};export const COMMON_PARAMETERS={controls:{exclude:["labelProps","iconProps","palette","className"]},docs:{description:{component:"Avatar component that displays user initials or icons with automatically generated colors based on the user name. Supports multiple sizes and shapes."}}};
+import { SHAPE, SIZE, TYPE } from '../constants';
+
+// Common argTypes used across multiple stories files
+export const COMMON_ARG_TYPES = {
+  abbreviation: {
+    control: 'text',
+    description: 'The abbreviation to display instead of the initial letter',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  userName: {
+    control: 'text',
+    description: 'The name of the user to display (first letter will be shown)',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  areaShape: {
+    control: 'select',
+    description: 'The shape of the avatar',
+    options: Object.values(SHAPE),
+    table: {
+      defaultValue: {
+        summary: SHAPE.CIRCLE
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  size: {
+    control: 'select',
+    description: 'The size of the avatar',
+    options: Object.values(SIZE),
+    table: {
+      defaultValue: {
+        summary: SIZE.MEDIUM
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  type: {
+    control: 'select',
+    description: 'The type of avatar content (letter or icon)',
+    options: Object.values(TYPE),
+    table: {
+      defaultValue: {
+        summary: TYPE.LETTER
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  manualColors: {
+    control: 'boolean',
+    description: 'Whether to use manual colors instead of automatic palette',
+    table: {
+      defaultValue: {
+        summary: false
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  className: {
+    control: 'text',
+    description: 'Additional CSS class names',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  labelProps: {
+    control: false,
+    description: 'Props for the internal UTLabel component',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  iconProps: {
+    control: false,
+    description: 'Props for the internal UTIcon component',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  palette: {
+    control: false,
+    description: 'Custom color palette array',
+    table: {
+      defaultValue: {
+        summary: 'defaultPalette'
+      },
+      type: {
+        summary: 'array'
+      }
+    }
+  },
+  dataTestId: {
+    control: 'text',
+    description: 'Test identifier for the avatar',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  }
+};
+
+// Common args used across multiple stories files
+export const COMMON_ARGS = {
+  userName: 'John Doe',
+  areaShape: SHAPE.CIRCLE,
+  size: SIZE.XLARGE,
+  type: TYPE.LETTER,
+  manualColors: false,
+  dataTestId: 'customAvatarId'
+};
+
+// Common parameters used across multiple stories files
+export const COMMON_PARAMETERS = {
+  controls: {
+    exclude: ['labelProps', 'iconProps', 'palette', 'className']
+  },
+  docs: {
+    description: {
+      component: 'Avatar component that displays user initials or icons with automatically generated colors based on the user name. Supports multiple sizes and shapes.'
+    }
+  }
+};

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

@@ -0,0 +1,44 @@
+# UTBadge
+
+### Description
+
+Basic badge component for displaying labels with various color themes.
+
+### Color Themes
+
+The color themes are defined by the UX team and are:
+
+- `alert`: Consumes the error variant.
+- `identity`: Consumes the accent variant.
+- `identitySecondary`: Consumes the neutral variant.
+- `negative`: Consumes the negative variant.
+- `information`: Consumes the information variant.
+- `warning`: Consumes the warning variant.
+- `success`: Consumes the success variant.
+
+These color themes will change how the badge looks.
+
+### Props
+
+| Name       | Type   | Default | Description                                                                                                                |
+| ---------- | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| children   | string |         | The text content to be displayed inside the badge.                                                                         |
+| colorTheme | string |         | The color theme to use. One of: `alert`, `identity`, `identitySecondary`, `negative`, `information`, `warning`, `success`. |
+
+### Example
+
+```jsx
+import React from 'react';
+import UTBadge from '@widergy/energy-ui';
+
+const App = () => (
+  <div>
+    <UTBadge />
+    <UTBadge colorTheme="identity">0</UTBadge>
+    <UTBadge colorTheme="information">999+</UTBadge>
+    <UTBadge colorTheme="success">Success Badge</UTBadge>
+  </div>
+);
+
+export default App;
+```

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

@@ -1 +1,3 @@
-export const DEFAULT_PROPS={colorTheme:"error"};
+export const DEFAULT_PROPS = {
+  colorTheme: 'error'
+};

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

@@ -1 +1,43 @@
-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{number,objectOf,oneOfType,string}from"prop-types";import{valueExists}from"../../utils/componentUtils";import{COLOR_THEMES}from"../../constants/Palette";import UTLabel from"../UTLabel";import WithTheme from"../WithTheme";import{retrieveStyle}from"./theme";import{DEFAULT_PROPS}from"./constants";const UTBadge=_ref=>{let{children:children,classes:classes,className:className,colorTheme:colorTheme}=_ref;const textColorTheme=[COLOR_THEMES.negative,COLOR_THEMES.light].includes(colorTheme)?"dark":"negative",{Component:Component,componentProps:componentProps}=valueExists(children)?{Component:UTLabel,componentProps:{colorTheme:textColorTheme,variant:"xsmall",weight:"medium"}}:{Component:"span",componentProps:{}};return React.createElement(Component,_extends({className:"".concat(classes.root," ").concat(className||"")},componentProps),children)};UTBadge.defaultProps=DEFAULT_PROPS,UTBadge.propTypes={children:oneOfType([number,string]),classes:objectOf(string),className:string,colorTheme:string};export default WithTheme(retrieveStyle)(UTBadge);
+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 { number, objectOf, oneOfType, string } from 'prop-types';
+import { valueExists } from '../../utils/componentUtils';
+import { COLOR_THEMES } from '../../constants/Palette';
+import UTLabel from '../UTLabel';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+import { DEFAULT_PROPS } from './constants';
+const UTBadge = _ref => {
+  let {
+    children,
+    classes,
+    className,
+    colorTheme
+  } = _ref;
+  const textColorTheme = [COLOR_THEMES.negative, COLOR_THEMES.light].includes(colorTheme) ? 'dark' : 'negative';
+  const {
+    Component,
+    componentProps
+  } = valueExists(children) ? {
+    Component: UTLabel,
+    componentProps: {
+      colorTheme: textColorTheme,
+      variant: 'xsmall',
+      weight: 'medium'
+    }
+  } : {
+    Component: 'span',
+    componentProps: {}
+  };
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: "".concat(classes.root, " ").concat(className || '')
+  }, componentProps), children);
+};
+UTBadge.defaultProps = DEFAULT_PROPS;
+UTBadge.propTypes = {
+  children: oneOfType([number, string]),
+  classes: objectOf(string),
+  className: string,
+  colorTheme: string
+};
+export default WithTheme(retrieveStyle)(UTBadge);

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

@@ -1 +1,48 @@
-import{valueExists,getDefaultColorShade}from"../../utils/componentUtils";import{DEFAULT_PROPS}from"./constants";export const variantsColorTheme=(theme,colorTheme,shade)=>{var _theme$Palette$action;const colorThemeDefinition=theme.Palette[colorTheme]||(null===(_theme$Palette$action=theme.Palette.actions)||void 0===_theme$Palette$action?void 0:_theme$Palette$action[colorTheme])||theme.Palette[DEFAULT_PROPS.colorTheme],colorShade=getDefaultColorShade(colorTheme);return{backgroundColor:colorThemeDefinition[shade]||colorThemeDefinition[colorShade]}};const baseButtonTheme=()=>({root:{alignItems:"center",borderRadius:"100px",display:"inline-flex",flexShrink:0,height:"fit-content",justifyContent:"center",minHeight:"10px",minWidth:"10px",verticalAlign:"middle"},text:{height:"20px",padding:"0 6px",textAlign:"center",width:"fit-content"}});export const retrieveStyle=_ref=>{let{theme:theme,colorTheme:colorTheme,children:children,shade:shade}=_ref;const baseTheme=baseButtonTheme(),textTheme=valueExists(children)?baseTheme.text:{},variantTheme=variantsColorTheme(theme,colorTheme,shade);return{root:{...baseTheme.root,...textTheme,...variantTheme}}};
+import { valueExists, getDefaultColorShade } from '../../utils/componentUtils';
+import { DEFAULT_PROPS } from './constants';
+export const variantsColorTheme = (theme, colorTheme, shade) => {
+  var _theme$Palette$action;
+  const colorThemeDefinition = theme.Palette[colorTheme] || ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action[colorTheme]) || theme.Palette[DEFAULT_PROPS.colorTheme];
+  const colorShade = getDefaultColorShade(colorTheme);
+  const backgroundColor = colorThemeDefinition[shade] || colorThemeDefinition[colorShade];
+  return {
+    backgroundColor
+  };
+};
+const baseButtonTheme = () => ({
+  root: {
+    alignItems: 'center',
+    borderRadius: '100px',
+    display: 'inline-flex',
+    flexShrink: 0,
+    height: 'fit-content',
+    justifyContent: 'center',
+    minHeight: '10px',
+    minWidth: '10px',
+    verticalAlign: 'middle'
+  },
+  text: {
+    height: '20px',
+    padding: '0 6px',
+    textAlign: 'center',
+    width: 'fit-content'
+  }
+});
+export const retrieveStyle = _ref => {
+  let {
+    theme,
+    colorTheme,
+    children,
+    shade
+  } = _ref;
+  const baseTheme = baseButtonTheme();
+  const textTheme = valueExists(children) ? baseTheme.text : {};
+  const variantTheme = variantsColorTheme(theme, colorTheme, shade);
+  return {
+    root: {
+      ...baseTheme.root,
+      ...textTheme,
+      ...variantTheme
+    }
+  };
+};

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

@@ -0,0 +1,48 @@
+# UTBanner
+
+### Description
+
+Displays a banner with contextual information. Supports multiple color themes, sizes, icon/button placement, and optional close action.
+
+## Props
+
+| 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

@@ -1 +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};
+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 +1,139 @@
-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{capitalize,isUTIcon}from"../../utils/componentUtils";import{mergeMultipleClassNames}from"../../utils/classesUtils";import{ID_CONSTANTS}from"../../constants/testIds";import styles from"./styles.module.scss";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{button:button,buttonPlacement:buttonPlacement=DEFAULT_PROPS.buttonPlacement,category:category,classNames:classNames,colorTheme:colorTheme=DEFAULT_PROPS.colorTheme,dataTestId:dataTestId,description:description,descriptionProps:descriptionProps,helpText:helpText,Icon:Icon,iconPlacement:iconPlacement=DEFAULT_PROPS.iconPlacement,iconProps:iconProps,onClose:onClose,secondaryButton:secondaryButton,size:size=DEFAULT_PROPS.size,title:title,titleProps:titleProps,variant:variant=DEFAULT_PROPS.variant}=_ref;const isVerticalButton=buttonPlacement===PLACEMENTS.VERTICAL,isVerticalIcon=iconPlacement===PLACEMENTS.VERTICAL,labelColorTheme=getLabelColorTheme(colorTheme,variant),secondaryLabelColorTheme=getSecondaryLabelColorTheme(colorTheme,variant),{titleVariant:titleVariant,descriptionVariant:descriptionVariant}=getLabelStyles(size),iconTheme=getDefaultIconTheme(colorTheme,variant),iconSize=getDefaultIconSize(size),buttonColorTheme=getDefaultButtonColorTheme(variant),gapClass=styles["gap".concat(capitalize(size))],paddingClass=styles["padding".concat(capitalize(size))],dynamicClasses={bannerContainer:[styles["".concat(colorTheme).concat(capitalize(variant))],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:""},normalizedClassNames=classNames?{...classNames,bannerContainer:classNames.infoContainer}:void 0,classes=mergeMultipleClassNames(styles,dynamicClasses,normalizedClassNames);return React.createElement("div",{className:classes.bannerContainer,"data-testid":dataTestId},React.createElement("div",{className:classes.contentContainer},React.createElement("div",{className:classes.iconTextContainer},Icon&&isUTIcon(Icon)?React.createElement(UTIcon,_extends({colorTheme:iconTheme.colorTheme,dataTestId:dataTestId?"".concat(dataTestId,".").concat(ID_CONSTANTS.ICON):void 0,name:Icon,shade:iconTheme.shade,size:iconSize},iconProps)):!!Icon&&React.createElement(Icon,_extends({},iconProps,{"data-testId":dataTestId?"".concat(dataTestId,".").concat(ID_CONSTANTS.ICON):void 0})),React.createElement("div",{className:classes.textContainer},!!category&&React.createElement(UTLabel,{className:styles.uppercase,colorTheme:secondaryLabelColorTheme,dataTestId:dataTestId?"".concat(dataTestId,".category.").concat(ID_CONSTANTS.LABEL):void 0,variant:"xsmall",weight:"medium"},category),!!title&&React.createElement(UTLabel,_extends({colorTheme:labelColorTheme,variant:titleVariant,weight:"medium"},titleProps,{dataTestId:dataTestId?"".concat(dataTestId,".").concat(ID_CONSTANTS.TITLE,".").concat(ID_CONSTANTS.LABEL):void 0}),title),!!description&&React.createElement(UTLabel,_extends({colorTheme:labelColorTheme,variant:descriptionVariant},descriptionProps,{dataTestId:dataTestId?"".concat(dataTestId,".").concat(ID_CONSTANTS.DESCRIPTION,".").concat(ID_CONSTANTS.LABEL):void 0}),description),!!helpText&&React.createElement(UTLabel,{colorTheme:secondaryLabelColorTheme,dataTestId:dataTestId?"".concat(dataTestId,".").concat(ID_CONSTANTS.HELP_TEXT,".").concat(ID_CONSTANTS.LABEL):void 0,variant:"small"},helpText))),!(!button&&!secondaryButton)&&React.createElement("div",{className:classes.buttonsContainer},!!button&&React.createElement(UTButton,_extends({colorTheme:buttonColorTheme.button},button,{dataTestId:dataTestId?"".concat(dataTestId,".button.").concat(ID_CONSTANTS.SECONDARY_ACTION):void 0}),button.title),!!secondaryButton&&React.createElement(UTButton,_extends({colorTheme:buttonColorTheme.secondaryButton,variant:"text"},secondaryButton,{dataTestId:dataTestId?"".concat(dataTestId,".secondaryButton.").concat(ID_CONSTANTS.TERTIARY_ACTION):void 0}),secondaryButton.title))),!!onClose&&React.createElement(UTButton,{colorTheme:buttonColorTheme.onClose,dataTestId:dataTestId?"".concat(dataTestId,".close"):void 0,Icon:"IconX",onClick:onClose,size:"small",variant:"text"}))};UTBanner.propTypes={button:buttonType,buttonPlacement:oneOf(Object.values(PLACEMENTS)),category:string,classNames:objectOf(string),colorTheme:oneOf(Object.values(COLOR_THEMES)),dataTestId:string,description:string,descriptionProps:object,helpText:string,Icon:oneOfType([elementType,string]),iconPlacement:oneOf(Object.values(PLACEMENTS)),iconProps:object,onClose:func,secondaryButton:buttonType,size:oneOf(Object.values(SIZES)),title:string,titleProps:object,variant:oneOf(Object.values(VARIANTS))};export default UTBanner;
+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 { capitalize, isUTIcon } from '../../utils/componentUtils';
+import { mergeMultipleClassNames } from '../../utils/classesUtils';
+import { ID_CONSTANTS } from '../../constants/testIds';
+import styles from './styles.module.scss';
+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 {
+    button,
+    buttonPlacement = DEFAULT_PROPS.buttonPlacement,
+    category,
+    classNames,
+    colorTheme = DEFAULT_PROPS.colorTheme,
+    dataTestId,
+    description,
+    descriptionProps,
+    helpText,
+    Icon,
+    iconPlacement = DEFAULT_PROPS.iconPlacement,
+    iconProps,
+    onClose,
+    secondaryButton,
+    size = DEFAULT_PROPS.size,
+    title,
+    titleProps,
+    variant = DEFAULT_PROPS.variant
+  } = _ref;
+  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: 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, _extends({
+    colorTheme: labelColorTheme,
+    variant: titleVariant,
+    weight: "medium"
+  }, titleProps, {
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.TITLE, ".").concat(ID_CONSTANTS.LABEL) : undefined
+  }), title), !!description && /*#__PURE__*/React.createElement(UTLabel, _extends({
+    colorTheme: labelColorTheme,
+    variant: descriptionVariant
+  }, descriptionProps, {
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.DESCRIPTION, ".").concat(ID_CONSTANTS.LABEL) : undefined
+  }), description), !!helpText && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: secondaryLabelColorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.HELP_TEXT, ".").concat(ID_CONSTANTS.LABEL) : undefined,
+    variant: "small"
+  }, 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 = {
+  button: buttonType,
+  buttonPlacement: oneOf(Object.values(PLACEMENTS)),
+  category: string,
+  classNames: objectOf(string),
+  colorTheme: oneOf(Object.values(COLOR_THEMES)),
+  dataTestId: string,
+  description: string,
+  descriptionProps: object,
+  helpText: string,
+  Icon: oneOfType([elementType, string]),
+  iconPlacement: oneOf(Object.values(PLACEMENTS)),
+  iconProps: object,
+  onClose: func,
+  secondaryButton: buttonType,
+  size: oneOf(Object.values(SIZES)),
+  title: string,
+  titleProps: object,
+  variant: oneOf(Object.values(VARIANTS))
+};
+export default UTBanner;