@widergy/energy-ui 3.142.2 → 3.144.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.144.0](https://github.com/widergy/energy-ui/compare/v3.143.0...v3.144.0) (2026-04-22)
+
+
+### Features
+
+* new size utstatus ([#778](https://github.com/widergy/energy-ui/issues/778)) ([835c56a](https://github.com/widergy/energy-ui/commit/835c56aec7ee8ade5df39206fb82896c7796c8d6))
+
+# [3.143.0](https://github.com/widergy/energy-ui/compare/v3.142.2...v3.143.0) (2026-04-15)
+
+
+### Features
+
+* [BRILLA-339] persist file name and xls download ([#774](https://github.com/widergy/energy-ui/issues/774)) ([d2486f3](https://github.com/widergy/energy-ui/commit/d2486f3f475299954245b051defaa527c1c1e0c1))
+
 ## [3.142.2](https://github.com/widergy/energy-ui/compare/v3.142.1...v3.142.2) (2026-04-15)
 
 

package/dist/components/UTAttachmentList/index.js

@@ -76,7 +76,7 @@ const AttachmentListContainer = _ref => {
     const loadPreview = file => new Promise((resolve, reject) => {
       const reader = new FileReader();
       reader.onload = e => {
-        if ((0, _utils.hasPreview)(file)) {
+        if ((0, _utils.hasPreview)(file) || (0, _utils.isDownloadable)(file)) {
           resolve({
             src: e.target.result,
             file
@@ -190,7 +190,9 @@ const AttachmentListContainer = _ref => {
     const imageUrl = Array.isArray(input.value) ? ((_input$value$index = input.value[index]) === null || _input$value$index === void 0 ? void 0 : _input$value$index.url) || ((_formattedImages$inde = formattedImages[index]) === null || _formattedImages$inde === void 0 ? void 0 : _formattedImages$inde.url) : input.value;
     (0, _utils.getBlobFromUrl)(imageUrl, async response => {
       if (response) {
-        const newFile = new File([response], (0, _utils.getDefaultAttachment)(response.type.substring(response.type.indexOf('/') + 1), index + 1), {
+        var _input$value$index2, _formattedImages$inde2;
+        const itemName = Array.isArray(input.value) ? ((_input$value$index2 = input.value[index]) === null || _input$value$index2 === void 0 ? void 0 : _input$value$index2.name) || ((_formattedImages$inde2 = formattedImages[index]) === null || _formattedImages$inde2 === void 0 ? void 0 : _formattedImages$inde2.name) : null;
+        const newFile = new File([response], itemName || (0, _utils.getDefaultAttachment)(response.type.substring(response.type.indexOf('/') + 1), index + 1), {
           type: response.type
         });
         loadDefaultValues(index + 1, [...accumulatedFiles, newFile]);

package/dist/components/UTAttachmentList/layout.js

@@ -112,9 +112,9 @@ const AttachmentList = _ref => {
     },
     size: "small",
     variant: "text"
-  }), (0, _utils.isPDF)(previewItem) && previewItem.src && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+  }), (0, _utils.isDownloadable)(previewItem) && previewItem.src && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     Icon: "IconDownload",
-    onClick: () => (0, _downloadjs.default)(previewItem.src, previewItem.name, 'application/pdf'),
+    onClick: () => (0, _downloadjs.default)(previewItem.src, previewItem.name, previewItem.type),
     size: "small",
     variant: "text"
   }), /*#__PURE__*/_react.default.createElement(_UTButton.default, {

package/dist/components/UTAttachmentList/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.pdfAspectRatioValidation = exports.isVideo = exports.isValidFile = exports.isPDF = exports.isNewFile = exports.isImage = exports.isHTML = exports.isAudio = exports.hasPreview = exports.getSizeInMB = exports.getNotRepeatedFiles = exports.getDefaultAttachment = exports.getBlobFromUrl = exports.getAvailableFileTypesLabel = void 0;
+exports.pdfAspectRatioValidation = exports.isXLSX = exports.isXLS = exports.isVideo = exports.isValidFile = exports.isPDF = exports.isNewFile = exports.isImage = exports.isHTML = exports.isDownloadable = exports.isCSV = exports.isAudio = exports.hasPreview = exports.getSizeInMB = exports.getNotRepeatedFiles = exports.getDefaultAttachment = exports.getBlobFromUrl = exports.getAvailableFileTypesLabel = void 0;
 var _files = require("@widergy/web-utils/lib/constants/files");
 var _constants = require("./constants");
 if (window['pdfjs-dist/build/pdf']) window['pdfjs-dist/build/pdf'].GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(window['pdfjs-dist/build/pdf'].version, "/pdf.worker.js");
@@ -49,6 +49,14 @@ const isVideo = file => _files.inputFiles.video.validType.includes(file === null
 exports.isVideo = isVideo;
 const isHTML = file => _files.inputFiles.html.validType.includes(file === null || file === void 0 ? void 0 : file.type);
 exports.isHTML = isHTML;
+const isCSV = file => _files.inputFiles.csv.validType.includes(file === null || file === void 0 ? void 0 : file.type);
+exports.isCSV = isCSV;
+const isXLS = file => _files.inputFiles.xls.validType.includes(file === null || file === void 0 ? void 0 : file.type);
+exports.isXLS = isXLS;
+const isXLSX = file => _files.inputFiles.xlsx.validType.includes(file === null || file === void 0 ? void 0 : file.type);
+exports.isXLSX = isXLSX;
+const isDownloadable = file => isPDF(file) || isCSV(file) || isXLS(file) || isXLSX(file);
+exports.isDownloadable = isDownloadable;
 const hasPreview = file => isImage(file) || isAudio(file) || isVideo(file) || isPDF(file);
 exports.hasPreview = hasPreview;
 const isValidFile = file => hasPreview(file) || isPDF(file) || isHTML(file);

package/dist/components/UTStatus/README.md

@@ -0,0 +1,106 @@
+# UTStatus
+
+### Descripción
+
+Componente de estado que muestra un ícono y un texto. Soporta múltiples variantes de color, tipos visuales, tamaños, tooltip y adornos opcionales (badges e íconos).
+
+### Tamaños
+
+| Tamaño   | Fuente | Tamaño ícono | Padding |
+| -------- | ------ | ------------ | ------- |
+| `xsmall` | xsmall | 14px         | 2px 4px |
+| `small`  | xsmall | 14px         | 4px 8px |
+| `medium` | small  | 16px         | 4px 8px |
+| `large`  | body   | 20px         | 4px 8px |
+
+### Ícono
+
+Cada variante tiene un ícono por defecto. Puede sobreescribirse con la prop `Icon`, que acepta un nombre de Tabler Icons (string) o un componente React. El ícono puede ocultarse completamente con `withoutIcon`.
+
+### Área
+
+El área de fondo se muestra por defecto (`area={true}`). Puede ocultarse o cambiar su forma:
+
+- `areaType="SQUARE"`: border-radius 4px (por defecto).
+- `areaType="ROUNDED"`: border-radius 100px (forma de píldora).
+
+### Adornos
+
+Se pueden agregar badges o íconos adicionales a la izquierda o derecha del contenido mediante la prop `adornments`. Cada adorno debe indicar un `name` (`Badge` o `Icon`) y opcionalmente `props` para pasarle a ese componente.
+
+```jsx
+// Adorno simple (se ubica a la izquierda por defecto)
+adornments={[{ name: 'Badge', props: { colorTheme: 'success' } }]}
+
+// Posicionamiento explícito izquierda/derecha
+adornments={[
+  { left: { name: 'Icon', props: { name: 'IconStar' } } },
+  { right: { name: 'Badge', props: { colorTheme: 'information' } } }
+]}
+```
+
+### Tooltip
+
+Se puede mostrar un tooltip al hacer hover mediante la prop `tooltip` (string o ReactElement). Opciones adicionales de Tippy.js pueden pasarse con `tooltipProps`.
+
+### Props
+
+| Nombre          | Tipo                                                                                       | Default     | Descripción                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------ |
+| variant         | `'success'` \| `'error'` \| `'warning'` \| `'information'` \| `'accent'` \| `'unassigned'` | `'success'` | Variante de color del componente.                                                                      |
+| type            | `'default'` \| `'light'` \| `'accent'` \| `'negative'`                                     | `'default'` | Tipo visual que modifica el tratamiento del color.                                                     |
+| size            | `'xsmall'` \| `'small'` \| `'medium'` \| `'large'`                                         | `'medium'`  | Tamaño del componente.                                                                                 |
+| children        | string                                                                                     |             | Texto del estado.                                                                                      |
+| area            | bool                                                                                       | `true`      | Muestra el área de fondo.                                                                              |
+| areaType        | `'SQUARE'` \| `'ROUNDED'`                                                                  | `'SQUARE'`  | Forma del área de fondo.                                                                               |
+| Icon            | elementType \| string                                                                      |             | Sobreescribe el ícono por defecto de la variante. Acepta nombre de Tabler Icons o un componente React. |
+| withoutIcon     | bool                                                                                       | `false`     | Oculta el ícono.                                                                                       |
+| weight          | string                                                                                     | `'medium'`  | Peso tipográfico del texto.                                                                            |
+| adornments      | array                                                                                      | `[]`        | Array de adornos (`Badge` o `Icon`) para mostrar junto al estado.                                      |
+| tooltip         | string \| node                                                                             |             | Contenido del tooltip al hacer hover.                                                                  |
+| tooltipProps    | object                                                                                     | `{}`        | Props adicionales para el tooltip (Tippy.js).                                                          |
+| className       | string                                                                                     |             | Clase CSS adicional sobre el contenedor raíz.                                                          |
+| labelDataTestId | string                                                                                     |             | `data-testid` para el label interno.                                                                   |
+| title           | string                                                                                     |             | Atributo HTML `title` en el contenedor raíz.                                                           |
+
+### Ejemplo
+
+```jsx
+import React from 'react';
+import { UTStatus } from '@widergy/energy-ui';
+
+const App = () => (
+  <div>
+    <UTStatus variant="success">Activo</UTStatus>
+    <UTStatus variant="error" size="small">
+      Rechazado
+    </UTStatus>
+    <UTStatus variant="warning" type="light">
+      Pendiente
+    </UTStatus>
+    <UTStatus variant="information" size="xsmall">
+      Info
+    </UTStatus>
+    <UTStatus variant="success" area={false}>
+      Sin fondo
+    </UTStatus>
+    <UTStatus variant="unassigned" areaType="ROUNDED">
+      Redondeado
+    </UTStatus>
+    <UTStatus variant="information" Icon="IconStar">
+      Ícono personalizado
+    </UTStatus>
+    <UTStatus variant="error" withoutIcon>
+      Sin ícono
+    </UTStatus>
+    <UTStatus variant="warning" tooltip="Acción requerida">
+      Con tooltip
+    </UTStatus>
+    <UTStatus variant="success" adornments={[{ name: 'Badge', props: { colorTheme: 'success' } }]}>
+      Con badge
+    </UTStatus>
+  </div>
+);
+
+export default App;
+```

package/dist/components/UTStatus/UTStatus.stories.js

@@ -270,26 +270,32 @@ const AllTypes = exports.AllTypes = {
 };
 const AllSizes = exports.AllSizes = {
   args: {
-    children: 'Diferentes tamaños',
-    type: 'default',
-    variant: 'information'
+    type: 'default'
   },
   render: args => /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
-      gap: '16px',
+      flexDirection: 'column',
+      gap: '12px'
+    }
+  }, Object.keys(_constants.SIZES).map(size => /*#__PURE__*/_react.default.createElement("div", {
+    key: size,
+    style: {
+      display: 'flex',
+      gap: '8px',
       alignItems: 'center'
     }
-  }, Object.keys(_constants.SIZES).map(size => /*#__PURE__*/_react.default.createElement(_.default, _extends({
-    key: size
+  }, Object.keys(_constants.VARIANTS).map(variant => /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    key: variant
   }, args, {
-    size: size
-  })))),
+    size: size,
+    variant: variant
+  }), variant))))),
   name: 'Todos los Tamaños',
   parameters: {
     docs: {
       description: {
-        story: 'Muestra todos los tamaños disponibles del componente UTStatus.'
+        story: 'Muestra todos los tamaños disponibles del componente UTStatus, con todas las variantes por fila.'
       }
     }
   }

package/dist/components/UTStatus/constants.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VARIANTS = exports.TYPES = exports.SIZES = exports.ICON_SIZE = exports.DEFAULT_PROPS = exports.COMPONENT_KEYS = exports.COMPONENTS_MAPPER = exports.AREA_TYPES = void 0;
+exports.VARIANTS = exports.TYPES = exports.SIZES = exports.DEFAULT_PROPS = exports.COMPONENT_KEYS = exports.COMPONENTS_MAPPER = exports.AREA_TYPES = void 0;
 var _UTBadge = _interopRequireDefault(require("../UTBadge"));
 var _UTIcon = _interopRequireDefault(require("../UTIcon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ICON_SIZE = exports.ICON_SIZE = 20;
 const SIZES = exports.SIZES = {
   large: 'large',
   medium: 'medium',
-  small: 'small'
+  small: 'small',
+  xsmall: 'xsmall'
 };
 const VARIANTS = exports.VARIANTS = {
   accent: 'accent',

package/dist/components/UTStatus/index.js

@@ -79,7 +79,7 @@ const UTStatus = _ref => {
     type,
     variant,
     size
-  })), [StatusIcon, type, variant, classes.icon]);
+  })), [StatusIcon, type, variant, size, classes.icon]);
   const showTooltip = !(0, _isEmpty.default)(tooltip);
   const colorTheme = (0, _theme.getColorTheme)((0, _theme.validateProps)({
     type,

package/dist/components/UTStatus/theme.js

@@ -31,30 +31,44 @@ const getGridGap = _ref3 => {
     size
   } = _ref3;
   return {
-    [_constants.SIZES.large]: '8px',
-    [_constants.SIZES.medium]: '8px',
-    [_constants.SIZES.small]: '4px'
+    [_constants.SIZES.large]: 'var(--UT-status-gap-large, 8px)',
+    [_constants.SIZES.medium]: 'var(--UT-status-gap-medium, 8px)',
+    [_constants.SIZES.small]: 'var(--UT-status-gap-small, 4px)',
+    [_constants.SIZES.xsmall]: 'var(--UT-status-gap-xsmall, 4px)'
   }[size];
 };
-const getLabelVariant = _ref4 => {
+const getPadding = _ref4 => {
   let {
     size
   } = _ref4;
+  return {
+    [_constants.SIZES.large]: 'var(--UT-status-padding-y-large, 4px) var(--UT-status-padding-x-large, 8px)',
+    [_constants.SIZES.medium]: 'var(--UT-status-padding-y-medium, 4px) var(--UT-status-padding-x-medium, 8px)',
+    [_constants.SIZES.small]: 'var(--UT-status-padding-y-small, 4px) var(--UT-status-padding-x-small, 8px)',
+    [_constants.SIZES.xsmall]: 'var(--UT-status-padding-y-xsmall, 2px) var(--UT-status-padding-x-xsmall, 4px)'
+  }[size];
+};
+const getLabelVariant = _ref5 => {
+  let {
+    size
+  } = _ref5;
   return {
     [_constants.SIZES.large]: 'body',
     [_constants.SIZES.medium]: 'small',
-    [_constants.SIZES.small]: 'xsmall'
+    [_constants.SIZES.small]: 'xsmall',
+    [_constants.SIZES.xsmall]: 'xsmall'
   }[size];
 };
 exports.getLabelVariant = getLabelVariant;
-const getIconSize = _ref5 => {
+const getIconSize = _ref6 => {
   let {
     size
-  } = _ref5;
+  } = _ref6;
   return {
-    [_constants.SIZES.large]: '20px',
-    [_constants.SIZES.medium]: '16px',
-    [_constants.SIZES.small]: '14px'
+    [_constants.SIZES.large]: 'var(--UT-status-icon-size-xs, 20px)',
+    [_constants.SIZES.medium]: 'var(--UT-status-icon-size-2xs, 16px)',
+    [_constants.SIZES.small]: 'var(--UT-status-icon-size-3xs, 12px)',
+    [_constants.SIZES.xsmall]: 'var(--UT-status-icon-size-3xs, 12px)'
   }[size];
 };
 exports.getIconSize = getIconSize;
@@ -67,12 +81,12 @@ const defaultIconMapper = variant => ({
   [_constants.VARIANTS.warning]: 'IconAlertTriangle'
 })[variant];
 exports.defaultIconMapper = defaultIconMapper;
-const validateProps = _ref6 => {
+const validateProps = _ref7 => {
   let {
     type,
     variant,
     ...props
-  } = _ref6;
+  } = _ref7;
   return {
     type: _constants.TYPES[type] || _constants.TYPES[_constants.DEFAULT_PROPS.type],
     variant: _constants.VARIANTS[variant] || _constants.VARIANTS[_constants.DEFAULT_PROPS.variant],
@@ -80,14 +94,14 @@ const validateProps = _ref6 => {
   };
 };
 exports.validateProps = validateProps;
-const retrieveStyle = _ref7 => {
+const retrieveStyle = _ref8 => {
   let {
     theme,
     size = _constants.DEFAULT_PROPS.size,
     type = _constants.DEFAULT_PROPS.type,
     uppercase,
     variant = _constants.DEFAULT_PROPS.variant
-  } = _ref7;
+  } = _ref8;
   return {
     root: {
       alignItems: 'center',
@@ -98,13 +112,15 @@ const retrieveStyle = _ref7 => {
           variant
         })
       }),
-      borderRadius: '4px',
+      borderRadius: 'var(--UT-status-radius, 4px)',
       display: 'flex',
       gridGap: getGridGap({
         size
       }),
       height: 'fit-content',
-      padding: '4px 8px',
+      padding: getPadding({
+        size
+      }),
       width: 'fit-content',
       '&:empty': {
         display: 'none'
@@ -117,8 +133,8 @@ const retrieveStyle = _ref7 => {
     },
     icon: {
       flexShrink: '0',
-      height: '20px',
-      width: '20px',
+      height: 'var(--UT-status-icon-size-xs, 20px)',
+      width: 'var(--UT-status-icon-size-xs, 20px)',
       '& path': {
         fill: getIconFill({
           theme,
@@ -144,17 +160,25 @@ const retrieveStyle = _ref7 => {
         })
       }
     },
+    iconXsmall: {
+      height: 'var(--UT-status-icon-size-3xs, 12px)',
+      width: 'var(--UT-status-icon-size-3xs, 12px)'
+    },
     iconSmall: {
-      height: '14px',
-      width: '14px'
+      height: 'var(--UT-status-icon-size-3xs, 12px)',
+      width: 'var(--UT-status-icon-size-3xs, 12px)'
     },
     iconMedium: {
-      height: '16px',
-      width: '16px'
+      height: 'var(--UT-status-icon-size-2xs, 16px)',
+      width: 'var(--UT-status-icon-size-2xs, 16px)'
     },
     iconLarge: {
-      height: '20px',
-      width: '20px'
+      height: 'var(--UT-status-icon-size-xs, 20px)',
+      width: 'var(--UT-status-icon-size-xs, 20px)'
+    },
+    badgeXsmall: {
+      height: '8px',
+      width: '8px'
     },
     badgeSmall: {
       height: '8px',
@@ -172,16 +196,16 @@ const retrieveStyle = _ref7 => {
       backgroundColor: 'transparent !important'
     },
     roundedArea: {
-      borderRadius: '100px'
+      borderRadius: 'var(--UT-status-radius-rounded, 9999px)'
     }
   };
 };
 exports.retrieveStyle = retrieveStyle;
-const getColorTheme = _ref8 => {
+const getColorTheme = _ref9 => {
   let {
     type,
     variant
-  } = _ref8;
+  } = _ref9;
   return {
     [_constants.TYPES.accent]: _Palette.COLOR_THEMES.accent,
     [_constants.TYPES.default]: _Palette.COLOR_THEMES.dark,

package/dist/components/UTStatus/utils.js

@@ -43,20 +43,24 @@ const validateAdornments = adornments => adornments.every(adornment => {
 exports.validateAdornments = validateAdornments;
 const interpreterSize = (size, classes) => {
   const {
+    iconXsmall,
     iconSmall,
     iconMedium,
     iconLarge,
+    badgeXsmall,
     badgeSmall,
     badgeMedium,
     badgeLarge
   } = classes || {};
   return {
     [_constants.COMPONENT_KEYS.BADGE]: {
+      [_constants.SIZES.xsmall]: badgeXsmall,
       [_constants.SIZES.small]: badgeSmall,
       [_constants.SIZES.medium]: badgeMedium,
       [_constants.SIZES.large]: badgeLarge
     }[size],
     [_constants.COMPONENT_KEYS.ICON]: {
+      [_constants.SIZES.xsmall]: iconXsmall,
       [_constants.SIZES.small]: iconSmall,
       [_constants.SIZES.medium]: iconMedium,
       [_constants.SIZES.large]: iconLarge

package/dist/components/UTWrapperObservation/UTWrapperObservation.stories.js

@@ -96,7 +96,7 @@ var _default = exports.default = {
     },
     dataTestId: {
       control: 'text',
-      description: 'ID para testing. El container recibe `dataTestId` y cada action icon recibe `${dataTestId}.actionIcon.${config.key}`.',
+      description: 'ID para testing. El container recibe `dataTestId` y cada action icon recibe `{dataTestId}.actionIcon.{config.key}`.',
       table: {
         defaultValue: {
           summary: 'undefined'
@@ -244,7 +244,7 @@ const Playground = exports.Playground = {
     return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
       observationWrapperConfiguration: configJSON === null || configJSON === void 0 ? void 0 : configJSON.map(config => ({
         ...config,
-        action: () => alert("Acci\xF3n ejecutada: ".concat(config.key)) // eslint-disable-line no-alert
+        action: () => alert("Acci\xF3n ejecutada: ".concat(config.key))
       }))
     }), args.children);
   }

package/dist/components/UTWrapperObservation/index.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
+var _lodash = require("lodash");
 var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
 var _UTButton = _interopRequireDefault(require("../UTButton"));
-var _lodash = require("lodash");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -40,6 +40,10 @@ const UTWrapperObservation = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.iconButton,
     onClick: config.action,
+    onKeyDown: e => {
+      var _config$action;
+      return e.key === 'Enter' && ((_config$action = config.action) === null || _config$action === void 0 ? void 0 : _config$action.call(config));
+    },
     role: "button",
     tabIndex: 0,
     "data-testid": dataTestId ? "".concat(dataTestId, ".actionIcon.").concat(config.key) : undefined

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

@@ -81,6 +81,7 @@ const baseTokens = exports.baseTokens = {
     'radius-full': '9999px'
   },
   semantic: {
+    'padding-3xs': 'spacing-1',
     'padding-2xs': 'spacing-2',
     'padding-xs': 'spacing-3',
     'padding-sm': 'spacing-4',
@@ -136,6 +137,7 @@ const baseTokens = exports.baseTokens = {
     'size-control-xl': 'size-11',
     'size-control-2xl': 'size-12',
     'size-control-3xl': 'size-13',
+    'size-icon-3xs': 'size-4',
     'size-icon-2xs': 'size-5',
     'size-icon-xs': 'size-6',
     'size-icon-md': 'size-7',
@@ -235,6 +237,24 @@ const baseTokens = exports.baseTokens = {
     'UT-dataCategory-title-gap': 'gap-sm',
     'UT-dataCategory-title-size': 'font-body-size-sm',
     'UT-dataCategory-title-weight': 'font-weight-medium',
-    'UT-dataCategory-icon-size': 'size-icon-xs'
+    'UT-dataCategory-icon-size': 'size-icon-xs',
+    'UT-status-gap-large': 'gap-sm',
+    'UT-status-gap-medium': 'gap-sm',
+    'UT-status-gap-small': 'gap-xs',
+    'UT-status-gap-xsmall': 'gap-xs',
+    'UT-status-padding-y-large': 'padding-2xs',
+    'UT-status-padding-x-large': 'padding-xs',
+    'UT-status-padding-y-medium': 'padding-2xs',
+    'UT-status-padding-x-medium': 'padding-xs',
+    'UT-status-padding-y-small': 'padding-2xs',
+    'UT-status-padding-x-small': 'padding-xs',
+    'UT-status-padding-y-xsmall': 'padding-3xs',
+    'UT-status-padding-x-xsmall': 'padding-2xs',
+    'UT-status-radius': 'radius-sm',
+    'UT-status-radius-rounded': 'radius-full',
+    'UT-status-icon-size-3xs': 'size-icon-3xs',
+    'UT-status-icon-size-2xs': 'size-icon-2xs',
+    'UT-status-icon-size-xs': 'size-icon-xs',
+    'UT-status-icon-size-md': 'size-icon-md'
   }
 };

package/package.json

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