@widergy/energy-ui 3.172.2 → 3.173.0

package/CHANGELOG.md

@@ -1,16 +1,30 @@
-## [3.172.2](https://github.com/widergy/energy-ui/compare/v3.172.1...v3.172.2) (2026-07-03)
+# [3.173.0](https://github.com/widergy/energy-ui/compare/v3.172.3...v3.173.0) (2026-07-06)
 
 
-### Bug Fixes
+### Features
 
-* [PQRR-146] UTStatusMessage icon size and color adjustments ([#833](https://github.com/widergy/energy-ui/issues/833)) ([9ecabd1](https://github.com/widergy/energy-ui/commit/9ecabd142a86540f35a10f1fdc1435b27bcc5e13))
+* [CX-2739] datacategory - dataelement - radiogroup ([#832](https://github.com/widergy/energy-ui/issues/832)) ([8cb7619](https://github.com/widergy/energy-ui/commit/8cb7619983d17b1c39b7347aa8b3ed25e3cb0c81))
 
-## [3.172.1](https://github.com/widergy/energy-ui/compare/v3.172.0...v3.172.1) (2026-07-03)
+## [3.172.3](https://github.com/widergy/energy-ui/compare/v3.172.2...v3.172.3) (2026-07-03)
 
+### Novedades y Mejoras
 
-### Bug Fixes
+* Mejoras internas de la plataforma. [#834](https://github.com/widergy/Energy-UI/pull/834) [DEV-9999](https://widergy.atlassian.net/browse/DEV-9999)
+
+## [3.172.2](https://github.com/widergy/energy-ui/compare/v3.172.1...v3.172.2) (2026-07-03)
+
+### Correcciones
+
+* Se ajustó la apariencia de los mensajes de estado: el ícono ahora tiene un tamaño uniforme y proporcional, el espaciado interno es más compacto y los colores de fondo de los estados informativos, exitosos y de advertencia lucen con mayor contraste y consistencia visual. [#833](https://github.com/widergy/Energy-UI/pull/833) [PQRR-146](https://widergy.atlassian.net/browse/PQRR-146)
+
+## [3.172.1](https://github.com/widergy/energy-ui/compare/v3.172.0...v3.172.1) (2026-07-03)
+
+### Correcciones
 
-* [DIS-1108] ajustes utbutton ([#824](https://github.com/widergy/energy-ui/issues/824)) ([46b1ef8](https://github.com/widergy/energy-ui/commit/46b1ef8e07217bd75451b962236f98790c544f4b))
+* Se ajustaron las opciones de tamaño de los botones, permitiendo que ocupen el ancho o alto disponible según el contexto. [#824](https://github.com/widergy/Energy-UI/pull/824) [DIS-1108](https://widergy.atlassian.net/browse/DIS-1108)
+* Se unificó el comportamiento visual de los íconos dentro de los botones para lograr mayor consistencia en la interfaz. [#824](https://github.com/widergy/Energy-UI/pull/824) [DIS-1108](https://widergy.atlassian.net/browse/DIS-1108)
+* Se normalizó el comportamiento de varios componentes de formulario e indicadores, mejorando la consistencia visual y de interacción en toda la plataforma. [#824](https://github.com/widergy/Energy-UI/pull/824) [DIS-1108](https://widergy.atlassian.net/browse/DIS-1108)
+* Mejoras internas de la plataforma. [`e53dc85`](https://github.com/widergy/Energy-UI/commit/e53dc85)
 
 # [3.172.0](https://github.com/widergy/energy-ui/compare/v3.171.3...v3.172.0) (2026-07-02)
 

package/dist/components/UTDataCategory/README.md

@@ -12,6 +12,8 @@ A collapsible container component that displays a list of data elements with an
 | classNames    | object |         | Custom CSS class names for styling the component.                                  |
 | collapsable   | bool   | `true`  | Specifies if the data list is collapsible.                                         |
 | dataTestId    | string |         | Test ID for testing purposes.                                                      |
+| description   | string |         | Description text displayed below the title.                                        |
+| descriptionProps | object |      | Additional props for customizing the description UTLabel component.               |
 | elements      | array  | `[]`    | Array of objects to be rendered as UTDataElement components.                       |
 | elementsProps | object | `{}`    | Additional props that apply to all UTDataElement components.                       |
 | expanded      | bool   | `false` | Controls the initial expanded state of the component.                              |
@@ -21,7 +23,7 @@ A collapsible container component that displays a list of data elements with an
 
 ## Behavior
 
-- **Collapsible**: The component is only collapsible if it has a `title` and `collapsable` is `true`
+- **Collapsible**: The component is only collapsible if it has a `title` and `collapsable` is `true`. Clicking anywhere on the header (title, description) toggles it; the chevron next to the title is only a visual indicator. Clicks on `action` don't affect the toggle.
 - **Initial State**: The component starts collapsed by default unless `expanded` is `true`
 - **Area Styling**: When `area` is `true`, the component gets background color and padding
 - **Smooth Transitions**: Collapse/expand animations use CSS transitions for smooth UX

package/dist/components/UTDataCategory/UTDataCategory.stories.js

@@ -0,0 +1,405 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithSwitchAction = exports.WithHeaderAction = exports.WithDescription = exports.WithButtonAction = exports.Playground = exports.NonCollapsable = exports.ExpandedByDefault = exports.Default = exports.CustomDataTestId = exports.CollapsableWithActions = exports.AreaModeCustomProps = exports.AreaMode = void 0;
+var _constants = require("./constants");
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable no-alert */
+
+// Mock data for examples
+const mockElements = [{
+  title: 'Plan Mensual',
+  Data: '$4.999',
+  Icon: 'IconCreditCard',
+  badge: 'Activo'
+}, {
+  title: 'Almacenamiento',
+  Data: '50GB disponibles',
+  Icon: 'IconCloud'
+}, {
+  title: 'Soporte Prioritario',
+  Data: 'Atención 24/7',
+  Icon: 'IconHeadset'
+}];
+const mockElementsWithActions = [{
+  title: 'Streaming Plus',
+  Data: 'Plan mensual',
+  Icon: 'IconDeviceTv',
+  badge: 'Activo',
+  action: {
+    type: _constants.ACTION_TYPE.SWITCH,
+    checked: true,
+    onChange: checked => alert("Streaming Plus ".concat(checked ? 'activado' : 'desactivado'))
+  }
+}, {
+  title: 'Almacenamiento en la Nube',
+  Data: '50GB disponibles',
+  Icon: 'IconCloud',
+  action: {
+    type: _constants.ACTION_TYPE.BUTTON,
+    text: 'Editar',
+    variant: 'text',
+    onClick: () => alert('Editar plan de almacenamiento')
+  }
+}, {
+  title: 'Soporte Premium',
+  Data: 'Atención prioritaria 24/7',
+  Icon: 'IconHeadset',
+  action: {
+    type: _constants.ACTION_TYPE.SWITCH,
+    checked: false,
+    onChange: checked => alert("Soporte Premium ".concat(checked ? 'activado' : 'desactivado'))
+  }
+}];
+var _default = exports.default = {
+  args: {
+    title: 'Categoría de Datos',
+    elements: mockElements,
+    collapsable: true,
+    expanded: false
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Título que se muestra en el encabezado de la categoría.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    description: {
+      control: 'text',
+      description: 'Descripción que se muestra debajo del título.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    descriptionProps: {
+      control: false,
+      description: 'Props adicionales para el UTLabel de la descripción.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    Icon: {
+      control: 'text',
+      description: 'Icono que se muestra al inicio del título. Nombre de icono de UTIcon.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    iconProps: {
+      control: false,
+      description: 'Props adicionales para el icono del título.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    collapsable: {
+      control: 'boolean',
+      description: 'Determina si la categoría es colapsable. Al hacer clic en el encabezado (título, descripción) se expande/colapsa; el chevron junto al título es solo un indicador visual.',
+      table: {
+        defaultValue: {
+          summary: 'true'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    expanded: {
+      control: 'boolean',
+      description: 'Controla el estado inicial expandido del componente.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    action: {
+      control: false,
+      description: 'Configuración de la acción principal del encabezado (botón o switch). No dispara el colapso al hacer clic.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    elements: {
+      control: false,
+      description: 'Array de objetos que se renderizan como componentes UTDataElement.',
+      table: {
+        defaultValue: {
+          summary: '[]'
+        },
+        type: {
+          summary: 'array'
+        }
+      }
+    },
+    elementsProps: {
+      control: false,
+      description: 'Props adicionales aplicadas a todos los UTDataElement renderizados.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    area: {
+      control: 'boolean',
+      description: 'Cuando es true, aplica color de fondo y padding para dar apariencia de área.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    areaProps: {
+      control: false,
+      description: "Personaliza el fondo del área. Acepta `colorTheme` (cualquier valor de COLOR_THEMES) y `shade` ('01'–'05'). Solo aplica cuando `area` es `true`.",
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    dataTestId: {
+      control: 'text',
+      description: 'ID de test para pruebas automatizadas.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    titleProps: {
+      control: false,
+      description: 'Props adicionales para el UTLabel del título.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    classes: {
+      control: false,
+      description: 'Clases de tema para estilos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    classNames: {
+      control: false,
+      description: 'Clases CSS personalizadas para diferentes elementos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    }
+  },
+  component: _.default,
+  parameters: {
+    controls: {
+      exclude: []
+    },
+    docs: {
+      description: {
+        component: 'Contenedor colapsable que agrupa una lista de UTDataElement bajo un título y descripción opcionales.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTDataCategory'
+}; // Basic Stories
+const Default = exports.Default = {
+  args: {
+    title: 'Información de la Cuenta',
+    elements: mockElements
+  },
+  name: 'Básico'
+};
+const WithDescription = exports.WithDescription = {
+  args: {
+    title: 'Información de la Cuenta',
+    description: 'Datos generales asociados a tu cuenta actual.',
+    Icon: 'IconUser',
+    elements: mockElements
+  },
+  name: 'Con Descripción'
+};
+const NonCollapsable = exports.NonCollapsable = {
+  args: {
+    title: 'Resumen Fijo',
+    description: 'Esta categoría siempre está expandida.',
+    collapsable: false,
+    elements: mockElements
+  },
+  name: 'No Colapsable'
+};
+const ExpandedByDefault = exports.ExpandedByDefault = {
+  args: {
+    title: 'Categoría Expandida',
+    elements: mockElements,
+    expanded: true
+  },
+  name: 'Expandida por Defecto'
+};
+const WithHeaderAction = exports.WithHeaderAction = {
+  args: {
+    title: 'Métodos de Pago',
+    description: 'Administrá los métodos de pago asociados a tu cuenta.',
+    Icon: 'IconWallet',
+    action: {
+      type: _constants.ACTION_TYPE.BUTTON,
+      text: 'Agregar',
+      variant: 'text',
+      onClick: () => alert('Agregar nuevo método de pago')
+    },
+    elements: mockElements
+  },
+  name: 'Con Acción en el Encabezado'
+};
+const WithButtonAction = exports.WithButtonAction = {
+  args: {
+    title: 'Datos de Facturación',
+    description: 'Información asociada a tu método de pago activo.',
+    Icon: 'IconCreditCard',
+    action: {
+      type: _constants.ACTION_TYPE.BUTTON,
+      text: 'Editar',
+      variant: 'text',
+      onClick: () => alert('Editar datos de facturación')
+    },
+    elements: mockElements
+  },
+  name: 'Con Acción Botón'
+};
+const WithSwitchAction = exports.WithSwitchAction = {
+  args: {
+    title: 'Notificaciones Push',
+    description: 'Activá o desactivá las notificaciones de tu cuenta.',
+    Icon: 'IconBell',
+    action: {
+      type: _constants.ACTION_TYPE.SWITCH,
+      checked: true,
+      onChange: checked => alert("Switch ".concat(checked ? 'activado' : 'desactivado'))
+    },
+    elements: mockElements
+  },
+  name: 'Con Acción Switch'
+};
+const CollapsableWithActions = exports.CollapsableWithActions = {
+  args: {
+    title: 'Suscripciones Activas',
+    description: 'Gestioná los servicios a los que estás suscripto.',
+    Icon: 'IconApps',
+    collapsable: true,
+    action: {
+      type: _constants.ACTION_TYPE.BUTTON,
+      text: 'Agregar',
+      variant: 'text',
+      onClick: () => alert('Agregar nueva suscripción')
+    },
+    elements: mockElementsWithActions
+  },
+  name: 'Colapsable con Acciones (Encabezado y Elementos)'
+};
+const AreaMode = exports.AreaMode = {
+  args: {
+    title: 'Categoría con Área',
+    description: 'Esta categoría tiene un fondo destacado.',
+    area: true,
+    elements: mockElements
+  },
+  name: 'Modo Área'
+};
+const AreaModeCustomProps = exports.AreaModeCustomProps = {
+  args: {
+    title: 'Área con Color Personalizado',
+    area: true,
+    areaProps: {
+      colorTheme: 'accent',
+      shade: '01'
+    },
+    elements: mockElements
+  },
+  name: 'Modo Área — Color Personalizado'
+};
+const CustomDataTestId = exports.CustomDataTestId = {
+  args: {
+    title: 'Con Test ID',
+    elements: mockElements,
+    dataTestId: 'custom-data-category'
+  },
+  name: 'Con Test ID Personalizado'
+};
+const Playground = exports.Playground = {
+  args: {
+    title: 'Categoría de Datos',
+    description: '',
+    Icon: 'IconFolder',
+    collapsable: true,
+    expanded: false,
+    area: false,
+    elements: mockElementsWithActions,
+    dataTestId: 'playground-data-category'
+  },
+  name: 'Playground'
+};

package/dist/components/UTDataCategory/components/MainAction/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _testIds = require("../../../../constants/testIds");
+var _UTSwitch = _interopRequireDefault(require("../../../UTSwitch"));
+var _UTButton = _interopRequireDefault(require("../../../UTButton"));
+var _constants = require("../../constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const {
+  dataElement
+} = _testIds.TEST_IDS;
+const MainAction = _ref => {
+  let {
+    type = _constants.ACTION_TYPE.BUTTON,
+    onChange,
+    value,
+    onClick,
+    dataTestId,
+    ...props
+  } = _ref;
+  return type === _constants.ACTION_TYPE.SWITCH && onChange ? /*#__PURE__*/_react.default.createElement(_UTSwitch.default, _extends({
+    onChange: onChange,
+    value: value
+  }, props, {
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.switchAction) : undefined,
+    version: "V1"
+  })) : type === _constants.ACTION_TYPE.BUTTON && onClick ? /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.buttonAction) : undefined,
+    variant: "text",
+    onClick: onClick
+  }, props)) : null;
+};
+MainAction.propTypes = {
+  dataTestId: _propTypes.string,
+  id: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number]),
+  onChange: _propTypes.func,
+  onClick: _propTypes.func,
+  type: (0, _propTypes.oneOf)(Object.values(_constants.ACTION_TYPE)),
+  value: _propTypes.bool
+};
+var _default = exports.default = MainAction;

package/dist/components/UTDataCategory/constants.js

@@ -3,5 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WITHOUT_DATA_TEXT = void 0;
-const WITHOUT_DATA_TEXT = exports.WITHOUT_DATA_TEXT = 'Sin datos';
+exports.WITHOUT_DATA_TEXT = exports.ACTION_TYPE = void 0;
+const WITHOUT_DATA_TEXT = exports.WITHOUT_DATA_TEXT = 'Sin datos';
+const ACTION_TYPE = exports.ACTION_TYPE = {
+  SWITCH: 'switch',
+  BUTTON: 'button'
+};

package/dist/components/UTDataCategory/index.js

@@ -10,14 +10,14 @@ var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _UTDataElement = _interopRequireDefault(require("../UTDataElement"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../UTTouchableWithoutFeedback"));
 var _classesUtils = require("../../utils/classesUtils");
 var _testIds = require("../../constants/testIds");
 var _UTIcon = _interopRequireDefault(require("../UTIcon"));
-var _MainAction = _interopRequireDefault(require("../UTDataElement/components/MainAction"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _theme = require("./theme");
 var _constants = require("./constants");
+var _MainAction = _interopRequireDefault(require("./components/MainAction"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _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); }
@@ -32,6 +32,8 @@ const UTDataCategory = _ref => {
     classNames,
     collapsable = true,
     dataTestId,
+    description,
+    descriptionProps = {},
     elements = [],
     elementsProps = {},
     expanded = false,
@@ -45,13 +47,20 @@ const UTDataCategory = _ref => {
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
   const [isCollapsed, setIsCollapsed] = (0, _react.useState)(showTitle && collapsable && !expanded);
   const childrenRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    setIsCollapsed(showTitle && collapsable && !expanded);
+  }, [expanded, showTitle, collapsable]);
   const toggleCollapsed = () => setIsCollapsed(!isCollapsed);
+  const handleHeaderKeyDown = (0, _react.useCallback)(event => {
+    if (event.target === event.currentTarget && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      toggleCollapsed();
+    }
+  }, [toggleCollapsed]);
+  const stopActionPropagation = (0, _react.useCallback)(event => event.stopPropagation(), []);
   const containerClasses = "".concat(_stylesModule.default.container, " ").concat(classes.container || '', " ").concat(area ? classes.area : '');
-  const collapseButtonClasses = "".concat(_stylesModule.default.collapseButton, " ").concat(isCollapsed ? _stylesModule.default.collapsed : '');
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: containerClasses,
-    "data-testid": dataTestId ? "".concat(dataTestId, ".").concat(dataCategory.container) : undefined
-  }, title && /*#__PURE__*/_react.default.createElement("div", {
+  const collapseIconClasses = "".concat(_stylesModule.default.collapseButton, " ").concat(isCollapsed ? _stylesModule.default.collapsed : '');
+  const headerContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.title
   }, IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, _extends({
     name: Icon,
@@ -59,15 +68,31 @@ const UTDataCategory = _ref => {
   }, iconProps)), /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     colorTheme: "gray",
     weight: "medium"
-  }, titleProps), title), collapsable && /*#__PURE__*/_react.default.createElement("div", {
-    className: collapseButtonClasses
-  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
-    Icon: "IconChevronUp",
-    variant: "text",
-    onClick: toggleCollapsed,
-    size: "small",
+  }, titleProps), title), collapsable && /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    className: collapseIconClasses,
+    colorTheme: "gray",
+    name: "IconChevronUp",
     dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataCategory.collapseButton) : undefined
-  })), action && /*#__PURE__*/_react.default.createElement(_MainAction.default, action)), /*#__PURE__*/_react.default.createElement("div", {
+  }), action &&
+  /*#__PURE__*/
+  // Sin role="button": este div solo corta la propagación del click/keydown hacia el toggle de colapso, no es un control propio.
+  _react.default.createElement("div", {
+    onClick: stopActionPropagation,
+    onKeyDown: stopActionPropagation
+  }, /*#__PURE__*/_react.default.createElement(_MainAction.default, action))), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    colorTheme: "gray"
+  }, descriptionProps), description));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: containerClasses,
+    "data-testid": dataTestId ? "".concat(dataTestId, ".").concat(dataCategory.container) : undefined
+  }, title && (collapsable ? /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
+    className: "".concat(_stylesModule.default.header, " ").concat(_stylesModule.default.clickable),
+    onClick: toggleCollapsed,
+    onKeyDown: handleHeaderKeyDown,
+    "aria-expanded": !isCollapsed
+  }, headerContent) : /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.header
+  }, headerContent)), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       gridTemplateRows: isCollapsed ? '0fr' : '1fr',
       marginTop: isCollapsed || !showTitle ? 0 : 16
@@ -94,11 +119,16 @@ const UTDataCategory = _ref => {
 UTDataCategory.propTypes = {
   action: _propTypes.object,
   area: _propTypes.bool,
-  areaProps: _propTypes.object,
+  areaProps: (0, _propTypes.shape)({
+    colorTheme: _propTypes.string,
+    shade: _propTypes.string
+  }),
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
   collapsable: _propTypes.bool,
   dataTestId: _propTypes.string,
+  description: _propTypes.string,
+  descriptionProps: _propTypes.object,
   elements: _propTypes.array,
   elementsProps: _propTypes.object,
   expanded: _propTypes.bool,

package/dist/components/UTDataCategory/styles.module.scss

@@ -3,6 +3,17 @@
   flex-direction: column;
 }
 
+.header {
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--UT-dataCategory-title-gap, 0.5rem);
+}
+
+.clickable {
+  cursor: pointer;
+}
+
 .title {
   align-items: center;
   display: flex;

package/dist/components/UTDataElement/README.md

@@ -8,6 +8,7 @@ A versatile data component that can be customized with various themes, sizes, ic
 | ------------------ | ----------------- | ------------ | ------------------------------------------------------------------ |
 | action             | object            |              | Action configuration for button or switch. See Action Types below. |
 | area               | bool              | `false`      | Specifies whether the component has a background area.             |
+| areaProps          | object            | `{}`         | Customizes the area background. Supports `colorTheme` (any `COLOR_THEMES` value) and `shade` (`'01'`–`'05'`). Only applies when `area` is `true`. |
 | badge              | string \| number  |              | Displays a badge with text or number.                              |
 | badgeProps         | object            | `{}`         | Additional props for customizing the badge.                        |
 | children           | element           |              | Collapsible content displayed below the main component.            |
@@ -69,7 +70,7 @@ The values of `paddingVertical` and `spacing` must be one of the following:
 
 ## Collapsible Content
 
-If the component has any `children`, it will automatically become collapsible with a chevron button to expand/collapse the content.
+If the component has any `children`, it will automatically become collapsible. Clicking anywhere on the title/data area expands/collapses the content; the chevron next to the title is only a visual indicator of the current state. Clicks on `action` (button or switch) don't affect the toggle since it sits outside that clickable area.
 
 ## Examples
 
@@ -134,4 +135,16 @@ If the component has any `children`, it will automatically become collapsible wi
 
 ```javascript
 <UTDataElement area title="Highlighted Item" Data="Important information" Icon="IconStar" />
-```
+```
+
+### With Custom Area Style
+
+```javascript
+<UTDataElement
+  area
+  areaProps={{ colorTheme: 'accent', shade: '01' }}
+  title="Custom Area"
+  Data="Custom background color and shade"
+  Icon="IconStar"
+/>
+```