@widergy/energy-ui 3.173.2 → 3.173.4

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

@@ -1,144 +1 @@
-export const DEFAULT_ICON = 'IconUser';
-export const SHAPE = {
-  CIRCLE: 'circle',
-  SQUARE: 'rounded'
-};
-export const SIZE = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large',
-  XLARGE: 'xlarge',
-  XXLARGE: 'xxlarge',
-  XXXLARGE: 'xxxlarge'
-};
-export const TYPE = {
-  ICON: 'icon',
-  LETTER: 'letter'
-};
-export const SIZE_VARIANTS = {
-  [SIZE.SMALL]: {
-    [TYPE.LETTER]: 'small',
-    [TYPE.ICON]: 16
-  },
-  [SIZE.MEDIUM]: {
-    [TYPE.LETTER]: 'subtitle1',
-    [TYPE.ICON]: 16
-  },
-  [SIZE.LARGE]: {
-    [TYPE.LETTER]: 'subtitle1',
-    [TYPE.ICON]: 18
-  },
-  [SIZE.XLARGE]: {
-    [TYPE.LETTER]: 'title2',
-    [TYPE.ICON]: 24
-  },
-  [SIZE.XXLARGE]: {
-    [TYPE.LETTER]: 'title1',
-    [TYPE.ICON]: 28
-  },
-  [SIZE.XXXLARGE]: {
-    [TYPE.LETTER]: 'title1',
-    [TYPE.ICON]: 32
-  }
-};
-export const defaultPalette = [{
-  backgroundColor: 'rgb(0, 0, 180)',
-  color: '#FFF',
-  colorTheme: 'light'
-}, {
-  backgroundColor: 'rgb(175, 13, 102)',
-  color: '#FFF',
-  colorTheme: 'light'
-}, {
-  backgroundColor: 'rgb(146,248,70)',
-  color: '#000',
-  colorTheme: 'dark'
-}, {
-  backgroundColor: 'rgb(255, 200, 47)',
-  color: '#000',
-  colorTheme: 'dark'
-}, {
-  backgroundColor: 'rgb(255,118,0)',
-  color: '#000',
-  colorTheme: 'dark'
-}, {
-  backgroundColor: 'rgb(0, 0, 180)',
-  color: '#000',
-  colorTheme: 'dark'
-}, {
-  backgroundColor: 'rgb(235,235,222)',
-  color: '#000',
-  colorTheme: 'dark'
-}, {
-  backgroundColor: 'rgb(100,100,100)',
-  color: '#FFF',
-  colorTheme: 'light'
-}, {
-  backgroundColor: 'rgb(255,255,0)',
-  color: '#000',
-  colorTheme: 'dark'
-}, {
-  backgroundColor: 'rgb(55,19,112)',
-  color: '#FFF',
-  colorTheme: 'light'
-}, {
-  backgroundColor: 'rgb(255,255,150)',
-  color: '#000',
-  colorTheme: 'dark'
-}, {
-  backgroundColor: 'rgb(202,62,94)',
-  color: '#FFF',
-  colorTheme: 'light'
-}, {
-  backgroundColor: 'rgb(205,145,63)',
-  color: '#000',
-  colorTheme: 'dark'
-}, {
-  backgroundColor: 'rgb(12,75,100)',
-  color: '#FFF',
-  colorTheme: 'light'
-}, {
-  backgroundColor: 'rgb(175,155,50)',
-  color: '#000',
-  colorTheme: 'dark'
-}, {
-  backgroundColor: '#000',
-  color: '#FFF',
-  colorTheme: 'light'
-}, {
-  backgroundColor: 'rgb(37,70,25)',
-  color: '#FFF',
-  colorTheme: 'light'
-}, {
-  backgroundColor: 'rgb(121,33,135)',
-  color: '#FFF',
-  colorTheme: 'light'
-}, {
-  backgroundColor: 'rgb(83,140,208)',
-  color: '#FFF',
-  colorTheme: 'light'
-}, {
-  backgroundColor: 'rgb(0,154,37)',
-  color: '#000',
-  colorTheme: 'dark'
-}, {
-  backgroundColor: 'rgb(178,220,205)',
-  color: '#000',
-  colorTheme: 'dark'
-}, {
-  backgroundColor: 'rgb(255,152,213)',
-  color: '#000',
-  colorTheme: 'dark'
-}, {
-  backgroundColor: 'rgb(0,0,74)',
-  color: '#FFF',
-  colorTheme: 'light'
-}, {
-  backgroundColor: 'rgb(175,200,74)',
-  color: '#000',
-  colorTheme: 'dark'
-}, {
-  backgroundColor: 'rgb(63,25,12)',
-  color: '#FFF',
-  colorTheme: 'light'
-}];
+export const DEFAULT_ICON="IconUser";export const SHAPE={CIRCLE:"circle",SQUARE:"rounded"};export const SIZE={SMALL:"small",MEDIUM:"medium",LARGE:"large",XLARGE:"xlarge",XXLARGE:"xxlarge",XXXLARGE:"xxxlarge"};export const TYPE={ICON:"icon",LETTER:"letter"};export const SIZE_VARIANTS={[SIZE.SMALL]:{[TYPE.LETTER]:"small",[TYPE.ICON]:16},[SIZE.MEDIUM]:{[TYPE.LETTER]:"subtitle1",[TYPE.ICON]:16},[SIZE.LARGE]:{[TYPE.LETTER]:"subtitle1",[TYPE.ICON]:18},[SIZE.XLARGE]:{[TYPE.LETTER]:"title2",[TYPE.ICON]:24},[SIZE.XXLARGE]:{[TYPE.LETTER]:"title1",[TYPE.ICON]:28},[SIZE.XXXLARGE]:{[TYPE.LETTER]:"title1",[TYPE.ICON]:32}};export const defaultPalette=[{backgroundColor:"rgb(0, 0, 180)",color:"#FFF",colorTheme:"light"},{backgroundColor:"rgb(175, 13, 102)",color:"#FFF",colorTheme:"light"},{backgroundColor:"rgb(146,248,70)",color:"#000",colorTheme:"dark"},{backgroundColor:"rgb(255, 200, 47)",color:"#000",colorTheme:"dark"},{backgroundColor:"rgb(255,118,0)",color:"#000",colorTheme:"dark"},{backgroundColor:"rgb(0, 0, 180)",color:"#000",colorTheme:"dark"},{backgroundColor:"rgb(235,235,222)",color:"#000",colorTheme:"dark"},{backgroundColor:"rgb(100,100,100)",color:"#FFF",colorTheme:"light"},{backgroundColor:"rgb(255,255,0)",color:"#000",colorTheme:"dark"},{backgroundColor:"rgb(55,19,112)",color:"#FFF",colorTheme:"light"},{backgroundColor:"rgb(255,255,150)",color:"#000",colorTheme:"dark"},{backgroundColor:"rgb(202,62,94)",color:"#FFF",colorTheme:"light"},{backgroundColor:"rgb(205,145,63)",color:"#000",colorTheme:"dark"},{backgroundColor:"rgb(12,75,100)",color:"#FFF",colorTheme:"light"},{backgroundColor:"rgb(175,155,50)",color:"#000",colorTheme:"dark"},{backgroundColor:"#000",color:"#FFF",colorTheme:"light"},{backgroundColor:"rgb(37,70,25)",color:"#FFF",colorTheme:"light"},{backgroundColor:"rgb(121,33,135)",color:"#FFF",colorTheme:"light"},{backgroundColor:"rgb(83,140,208)",color:"#FFF",colorTheme:"light"},{backgroundColor:"rgb(0,154,37)",color:"#000",colorTheme:"dark"},{backgroundColor:"rgb(178,220,205)",color:"#000",colorTheme:"dark"},{backgroundColor:"rgb(255,152,213)",color:"#000",colorTheme:"dark"},{backgroundColor:"rgb(0,0,74)",color:"#FFF",colorTheme:"light"},{backgroundColor:"rgb(175,200,74)",color:"#000",colorTheme:"dark"},{backgroundColor:"rgb(63,25,12)",color:"#FFF",colorTheme:"light"}];

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

@@ -1,73 +1 @@
-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 Avatar from '@material-ui/core/Avatar';
-import { arrayOf, bool, shape, string } from 'prop-types';
-import UTLabel from '../UTLabel';
-import UTIcon from '../UTIcon';
-import componentUtils from '../../utils/componentUtils';
-import { defaultPalette, DEFAULT_ICON, SHAPE, SIZE, SIZE_VARIANTS, TYPE } from './constants';
-import ownStyles from './styles.module.scss';
-const UTAvatar = _ref => {
-  var _iconProps$name;
-  let {
-    abbreviation,
-    areaShape = SHAPE.CIRCLE,
-    className,
-    iconProps,
-    labelProps,
-    manualColors,
-    palette,
-    size = SIZE.MEDIUM,
-    dataTestId,
-    type = TYPE.LETTER,
-    userName
-  } = _ref;
-  const {
-    getFirstLetter,
-    getAvatarColors
-  } = componentUtils;
-  const {
-    colorTheme,
-    ...styles
-  } = getAvatarColors(type === TYPE.LETTER ? userName || abbreviation : (_iconProps$name = iconProps === null || iconProps === void 0 ? void 0 : iconProps.name) !== null && _iconProps$name !== void 0 ? _iconProps$name : DEFAULT_ICON, palette || defaultPalette);
-  const sizeVariant = SIZE_VARIANTS[size][type];
-  const textToShow = abbreviation || getFirstLetter(userName);
-  return /*#__PURE__*/React.createElement(Avatar, {
-    className: "".concat(className !== null && className !== void 0 ? className : '', " ").concat(size ? ownStyles[size] : ''),
-    style: manualColors ? {} : styles,
-    variant: areaShape,
-    "data-testid": dataTestId
-  }, type === TYPE.LETTER ? /*#__PURE__*/React.createElement(UTLabel, _extends({
-    colorTheme: colorTheme,
-    variant: sizeVariant,
-    weight: "medium"
-  }, labelProps), textToShow) : /*#__PURE__*/React.createElement(UTIcon, _extends({
-    colorTheme: colorTheme,
-    name: DEFAULT_ICON,
-    size: sizeVariant
-  }, iconProps)));
-};
-UTAvatar.propTypes = {
-  abbreviation: string,
-  className: string,
-  iconProps: shape({
-    className: string,
-    variant: string
-  }),
-  labelProps: shape({
-    className: string,
-    variant: string,
-    weight: string
-  }),
-  manualColors: bool,
-  palette: arrayOf(shape({
-    color: string,
-    backgroundColor: string
-  })),
-  areaShape: string,
-  size: string,
-  dataTestId: string,
-  type: string,
-  userName: string
-};
-export default UTAvatar;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var a=arguments[e];for(var r in a)({}).hasOwnProperty.call(a,r)&&(t[r]=a[r])}return t},_extends.apply(null,arguments)}import React from"react";import Avatar from"@material-ui/core/Avatar";import{arrayOf,bool,shape,string}from"prop-types";import UTLabel from"../UTLabel";import UTIcon from"../UTIcon";import componentUtils from"../../utils/componentUtils";import{defaultPalette,DEFAULT_ICON,SHAPE,SIZE,SIZE_VARIANTS,TYPE}from"./constants";import ownStyles from"./styles.module.scss";const UTAvatar=t=>{var e;let{abbreviation:a,areaShape:r=SHAPE.CIRCLE,className:o,iconProps:s,labelProps:n,manualColors:l,palette:i,size:c=SIZE.MEDIUM,dataTestId:m,type:p=TYPE.LETTER,userName:T}=t;const{getFirstLetter:E,getAvatarColors:g}=componentUtils,{colorTheme:u,...d}=g(p===TYPE.LETTER?T||a:null!==(e=null==s?void 0:s.name)&&void 0!==e?e:DEFAULT_ICON,i||defaultPalette),v=SIZE_VARIANTS[c][p],f=a||E(T);return React.createElement(Avatar,{className:"".concat(null!=o?o:""," ").concat(c?ownStyles[c]:""),style:l?{}:d,variant:r,"data-testid":m},p===TYPE.LETTER?React.createElement(UTLabel,_extends({colorTheme:u,variant:v,weight:"medium"},n),f):React.createElement(UTIcon,_extends({colorTheme:u,name:DEFAULT_ICON,size:v},s)))};UTAvatar.propTypes={abbreviation:string,className:string,iconProps:shape({className:string,variant:string}),labelProps:shape({className:string,variant:string,weight:string}),manualColors:bool,palette:arrayOf(shape({color:string,backgroundColor:string})),areaShape:string,size:string,dataTestId:string,type:string,userName:string};export default UTAvatar;

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

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

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

@@ -1,43 +1 @@
-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);
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)({}).hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},_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=e=>{let{children:t,classes:o,className:n,colorTheme:r}=e;const s=[COLOR_THEMES.negative,COLOR_THEMES.light].includes(r)?"dark":"negative",{Component:a,componentProps:m}=valueExists(t)?{Component:UTLabel,componentProps:{colorTheme:s,variant:"xsmall",weight:"medium"}}:{Component:"span",componentProps:{}};return React.createElement(a,_extends({className:"".concat(o.root," ").concat(n||"")},m),t)};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,48 +1 @@
-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
-    }
-  };
-};
+import{valueExists,getDefaultColorShade}from"../../utils/componentUtils";import{DEFAULT_PROPS}from"./constants";export const variantsColorTheme=(t,e,o)=>{var n;const i=t.Palette[e]||(null===(n=t.Palette.actions)||void 0===n?void 0:n[e])||t.Palette[DEFAULT_PROPS.colorTheme],r=getDefaultColorShade(e);return{backgroundColor:i[o]||i[r]}};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=t=>{let{theme:e,colorTheme:o,children:n,shade:i}=t;const r=baseButtonTheme(),l=valueExists(n)?r.text:{},a=variantsColorTheme(e,o,i);return{root:{...r.root,...l,...a}}};

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

@@ -1,30 +1 @@
-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,139 +1 @@
-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;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)({}).hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},_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=e=>{let{button:t,buttonPlacement:o=DEFAULT_PROPS.buttonPlacement,category:n,classNames:a,colorTheme:c=DEFAULT_PROPS.colorTheme,dataTestId:s,description:l,descriptionProps:r,helpText:i,Icon:T,iconPlacement:m=DEFAULT_PROPS.iconPlacement,iconProps:d,onClose:p,secondaryButton:u,size:C=DEFAULT_PROPS.size,title:I,titleProps:S,variant:E=DEFAULT_PROPS.variant}=e;const N=o===PLACEMENTS.VERTICAL,O=m===PLACEMENTS.VERTICAL,b=getLabelColorTheme(c,E),f=getSecondaryLabelColorTheme(c,E),{titleVariant:y,descriptionVariant:A}=getLabelStyles(C),L=getDefaultIconTheme(c,E),g=getDefaultIconSize(C),v=getDefaultButtonColorTheme(E),P=styles["gap".concat(capitalize(C))],_=styles["padding".concat(capitalize(C))],R={bannerContainer:[styles["".concat(c).concat(capitalize(E))],_,P].filter(Boolean).join(" "),contentContainer:[N?styles.contentVertical:styles.contentHorizontal,P].filter(Boolean).join(" "),iconTextContainer:[O?styles.iconVertical:styles.iconHorizontal,N?"":styles.iconFlex].filter(Boolean).join(" "),textContainer:O?"":styles.textFlex,buttonsContainer:N?styles.buttonsVertical:""},h=a?{...a,bannerContainer:a.infoContainer}:void 0,U=mergeMultipleClassNames(styles,R,h);return React.createElement("div",{className:U.bannerContainer,"data-testid":s},React.createElement("div",{className:U.contentContainer},React.createElement("div",{className:U.iconTextContainer},T&&isUTIcon(T)?React.createElement(UTIcon,_extends({colorTheme:L.colorTheme,dataTestId:s?"".concat(s,".").concat(ID_CONSTANTS.ICON):void 0,name:T,shade:L.shade,size:g},d)):!!T&&React.createElement(T,_extends({},d,{"data-testId":s?"".concat(s,".").concat(ID_CONSTANTS.ICON):void 0})),React.createElement("div",{className:U.textContainer},!!n&&React.createElement(UTLabel,{className:styles.uppercase,colorTheme:f,dataTestId:s?"".concat(s,".category.").concat(ID_CONSTANTS.LABEL):void 0,variant:"xsmall",weight:"medium"},n),!!I&&React.createElement(UTLabel,_extends({colorTheme:b,variant:y,weight:"medium"},S,{dataTestId:s?"".concat(s,".").concat(ID_CONSTANTS.TITLE,".").concat(ID_CONSTANTS.LABEL):void 0}),I),!!l&&React.createElement(UTLabel,_extends({colorTheme:b,variant:A},r,{dataTestId:s?"".concat(s,".").concat(ID_CONSTANTS.DESCRIPTION,".").concat(ID_CONSTANTS.LABEL):void 0}),l),!!i&&React.createElement(UTLabel,{colorTheme:f,dataTestId:s?"".concat(s,".").concat(ID_CONSTANTS.HELP_TEXT,".").concat(ID_CONSTANTS.LABEL):void 0,variant:"small"},i))),!(!t&&!u)&&React.createElement("div",{className:U.buttonsContainer},!!t&&React.createElement(UTButton,_extends({colorTheme:v.button},t,{dataTestId:s?"".concat(s,".button.").concat(ID_CONSTANTS.SECONDARY_ACTION):void 0}),t.title),!!u&&React.createElement(UTButton,_extends({colorTheme:v.secondaryButton,variant:"text"},u,{dataTestId:s?"".concat(s,".secondaryButton.").concat(ID_CONSTANTS.TERTIARY_ACTION):void 0}),u.title))),!!p&&React.createElement(UTButton,{colorTheme:v.onClose,dataTestId:s?"".concat(s,".close"):void 0,Icon:"IconX",onClick:p,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;

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

@@ -1,14 +1 @@
-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
-});
+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

@@ -1,137 +1 @@
-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';
-};
+import{COLOR_THEMES,SIZES,VARIANTS}from"./constants";export const getDefaultIconTheme=(e,t)=>{var o;return t===VARIANTS.DARK?e===COLOR_THEMES.NEGATIVE?{colorTheme:"dark",shade:"05"}:{colorTheme:"light",shade:"01"}:null!==(o={[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"}}[e])&&void 0!==o?o:{colorTheme:"accent",shade:"04"}};export const getDefaultIconSize=e=>e===SIZES.LARGE?24:20;export const getDefaultButtonColorTheme=e=>{const t=e===VARIANTS.DARK;return{button:t?"negative":"secondary",onClose:t?"negative":"gray",secondaryButton:t?"negative":"secondary"}};export const getLabelStyles=e=>{var t;return null!==(t={[SIZES.LARGE]:{titleVariant:"title3",descriptionVariant:"body"},[SIZES.MEDIUM]:{titleVariant:"subtitle1",descriptionVariant:"small"},[SIZES.SMALL]:{titleVariant:"small",descriptionVariant:"small"}}[e])&&void 0!==t?t:{titleVariant:"small",descriptionVariant:"small"}};export const getLabelColorTheme=(e,t)=>e===COLOR_THEMES.NEGATIVE?t===VARIANTS.LIGHT?"light":"dark":t===VARIANTS.LIGHT?"dark":"light";export const getSecondaryLabelColorTheme=(e,t)=>e===COLOR_THEMES.NEGATIVE?t===VARIANTS.LIGHT?"light":"gray":t===VARIANTS.LIGHT?"gray":"light";