@widergy/energy-ui 3.172.2 → 3.173.0

package/dist/esm/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"
+/>
+```

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

@@ -168,6 +168,18 @@ export default {
         }
       }
     },
+    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'
+        }
+      }
+    },
     action: {
       control: false,
       description: 'Configuración de la acción principal del elemento.',
@@ -526,6 +538,22 @@ export const AreaMode = {
   },
   name: 'Modo Área'
 };
+export const AreaModeCustomProps = {
+  args: {
+    title: 'Área con Color Personalizado',
+    Data: mockDataContent,
+    Icon: 'IconPalette',
+    area: true,
+    areaProps: {
+      colorTheme: 'accent',
+      shade: '01'
+    },
+    orientation: ORIENTATION.HORIZONTAL,
+    paddingVertical: PADDING.MEDIUM,
+    spacing: SPACING.MEDIUM
+  },
+  name: 'Modo Área — Color Personalizado'
+};
 export const SmallPadding = {
   args: {
     title: 'Padding Pequeño',

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

@@ -1,17 +1,17 @@
 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 { bool, element, object, number, objectOf, oneOfType, string } from 'prop-types';
-import React, { useCallback, useMemo, useRef, useState, Fragment } from 'react';
+import { bool, element, object, number, objectOf, oneOfType, shape, string } from 'prop-types';
+import React, { useCallback, useEffect, useMemo, useRef, useState, Fragment } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import isString from 'lodash/isString';
 import isFinite from 'lodash/isFinite';
 import UTTooltip from '../UTTooltip';
 import UTBadge from '../UTBadge';
 import UTLabel from '../UTLabel';
+import UTTouchableWithoutFeedback from '../UTTouchableWithoutFeedback';
 import WithTheme from '../WithTheme';
 import UTIcon from '../UTIcon';
 import { capitalize, isUTIcon, isUTLabel } from '../../utils/componentUtils';
 import { mergeMultipleClassNames } from '../../utils/classesUtils';
-import UTButton from '../UTButton';
 import { TEST_IDS } from '../../constants/testIds';
 import { retrieveStyle } from './theme';
 import styles from './styles.module.scss';
@@ -32,6 +32,7 @@ const UTDataElement = _ref => {
     Data,
     dataProps = {},
     dataTestId,
+    expanded = false,
     forceShowBadge = false,
     Icon,
     iconProps = {},
@@ -45,35 +46,67 @@ const UTDataElement = _ref => {
     transitionDuration = ANIMATION.TRANSITION_DURATION
   } = _ref;
   const classes = useMemo(() => mergeMultipleClassNames(styles, theme, classNames), [classNames, theme]);
-  const [isCollapsed, setIsCollapsed] = useState(true);
+  const [isCollapsed, setIsCollapsed] = useState(!expanded);
   const [isTransitioning, setIsTransitioning] = useState(false);
-  const [contentHeight, setContentHeight] = useState('0px');
+  const [contentHeight, setContentHeight] = useState(expanded ? 'none' : '0px');
   const childrenRef = useRef(null);
+  const hasMountedRef = useRef(false);
+  const transitionTimeoutRef = useRef(null);
+  const transitionFrameRef = useRef(null);
+  const clearPendingTransition = useCallback(() => {
+    if (transitionTimeoutRef.current) {
+      clearTimeout(transitionTimeoutRef.current);
+      transitionTimeoutRef.current = null;
+    }
+    if (transitionFrameRef.current) {
+      cancelAnimationFrame(transitionFrameRef.current);
+      transitionFrameRef.current = null;
+    }
+  }, []);
+  const prepareContentTransition = useCallback(() => {
+    if (!childrenRef.current) return false;
+    clearPendingTransition();
+    setContentHeight("".concat(childrenRef.current.scrollHeight, "px"));
+    setIsTransitioning(true);
+    return true;
+  }, [clearPendingTransition]);
+  const openContent = useCallback(() => {
+    if (!prepareContentTransition()) return;
+    setIsCollapsed(false);
+    transitionTimeoutRef.current = setTimeout(() => {
+      setIsTransitioning(false);
+      setContentHeight('none');
+    }, transitionDuration);
+  }, [prepareContentTransition, transitionDuration]);
+  const closeContent = useCallback(() => {
+    if (!prepareContentTransition()) return;
+    transitionFrameRef.current = requestAnimationFrame(() => {
+      setContentHeight('0px');
+      setIsCollapsed(true);
+      transitionTimeoutRef.current = setTimeout(() => setIsTransitioning(false), transitionDuration);
+    });
+  }, [prepareContentTransition, transitionDuration]);
+  useEffect(() => clearPendingTransition, []);
   const toggleCollapsed = useCallback(() => {
-    if (isCollapsed) {
-      if (childrenRef.current) {
-        const height = childrenRef.current.scrollHeight;
-        setContentHeight("".concat(height, "px"));
-        setIsTransitioning(true);
-        setIsCollapsed(false);
-        setTimeout(() => {
-          setIsTransitioning(false);
-          setContentHeight('none');
-        }, transitionDuration);
-      }
-    } else if (childrenRef.current) {
-      const height = childrenRef.current.scrollHeight;
-      setContentHeight("".concat(height, "px"));
-      setIsTransitioning(true);
-      requestAnimationFrame(() => {
-        setContentHeight('0px');
-        setIsCollapsed(true);
-        setTimeout(() => setIsTransitioning(false), transitionDuration);
-      });
+    if (isCollapsed) openContent();else closeContent();
+  }, [isCollapsed, openContent, closeContent]);
+  useEffect(() => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      return;
     }
-  }, [isCollapsed]);
+    if (expanded) openContent();else closeContent();
+  }, [expanded, openContent, closeContent]);
+  const handleInfoKeyDown = useCallback(event => {
+    if (event.target === event.currentTarget && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      toggleCollapsed();
+    }
+  }, [toggleCollapsed]);
+  const stopDataPropagation = useCallback(event => event.stopPropagation(), []);
   const IconComponent = isUTIcon(Icon) ? UTIcon : Icon;
-  const DataComponent = isUTLabel(Data) ? /*#__PURE__*/React.createElement(UTLabel, dataProps, Data) : Data;
+  const isDataLabel = isUTLabel(Data);
+  const DataComponent = isDataLabel ? /*#__PURE__*/React.createElement(UTLabel, dataProps, Data) : Data;
   const showBadge = forceShowBadge || isString(badge) && !isEmpty(badge) || isFinite(badge);
   const {
     tooltip: titleTooltip
@@ -84,18 +117,7 @@ const UTDataElement = _ref => {
   const infoClasses = "".concat(classes.info, " ").concat(orientation === ORIENTATION.VERTICAL && classes.vertical);
   const iconCollapseButtonClasses = "".concat(classes.iconCollapseButton, " ").concat(isCollapsed && classes.collapsed);
   const childrenClasses = "".concat(classes.children, " ").concat(isCollapsed ? classes.childrenCollapsed : classes.childrenExpanded, " ").concat(isTransitioning ? classes.childrenTransitioning : classes.childrenStatic);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(classes.container, " ").concat(area ? classes.area : '', " ").concat(classes["padding".concat(capitalize(paddingVertical))]),
-    "data-testid": dataTestId ? "".concat(dataTestId, ".").concat(dataElement.container) : undefined
-  }, /*#__PURE__*/React.createElement("div", {
-    className: contentClasses
-  }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, _extends({
-    name: Icon,
-    colorTheme: "gray",
-    size: "var(--UT-dataElement-icon-size, 1.5rem)"
-  }, iconProps)), /*#__PURE__*/React.createElement("div", {
-    className: infoClasses
-  }, (prefix || title || showBadge) && /*#__PURE__*/React.createElement("div", {
+  const infoContent = /*#__PURE__*/React.createElement(React.Fragment, null, (prefix || title || showBadge || children) && /*#__PURE__*/React.createElement("div", {
     className: classes.topInfo
   }, prefix && /*#__PURE__*/React.createElement(UTLabel, _extends({
     colorTheme: "gray"
@@ -104,21 +126,41 @@ const UTDataElement = _ref => {
     content: titleTooltip
   } : {}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UTLabel, _extends({
     colorTheme: "gray"
-  }, titleProps), title))), showBadge && /*#__PURE__*/React.createElement(UTBadge, _extends({
+  }, titleProps), title))), children && /*#__PURE__*/React.createElement(UTIcon, {
+    className: iconCollapseButtonClasses,
+    colorTheme: "gray",
+    name: "IconChevronUp",
+    size: "var(--UT-dataElement-chevron-icon-size, 1.25rem)",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.collapseButton) : undefined
+  }), showBadge && /*#__PURE__*/React.createElement(UTBadge, _extends({
     colorTheme: "accent",
     className: classes.badge
-  }, badgeProps), forceShowBadge ? null : badge)), DataComponent && DataComponent), action && /*#__PURE__*/React.createElement(MainAction, _extends({
-    dataTestId: dataTestId
-  }, action)), children && /*#__PURE__*/React.createElement(UTButton, {
-    classNames: {
-      icon: iconCollapseButtonClasses
-    },
-    Icon: "IconChevronUp",
+  }, badgeProps), forceShowBadge ? null : badge)), DataComponent && (isDataLabel ? DataComponent :
+  /*#__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.createElement("div", {
+    onClick: stopDataPropagation,
+    onKeyDown: stopDataPropagation
+  }, DataComponent)));
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classes.container, " ").concat(area ? classes.area : '', " ").concat(classes["padding".concat(capitalize(paddingVertical))]),
+    "data-testid": dataTestId ? "".concat(dataTestId, ".").concat(dataElement.container) : undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    className: contentClasses
+  }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, _extends({
+    name: Icon,
+    colorTheme: "gray",
+    size: "var(--UT-dataElement-icon-size, 1.5rem)"
+  }, iconProps)), children ? /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: "".concat(infoClasses, " ").concat(classes.clickable),
     onClick: toggleCollapsed,
-    size: "small",
-    variant: "text",
-    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.collapseButton) : undefined
-  })), children && /*#__PURE__*/React.createElement("div", {
+    onKeyDown: handleInfoKeyDown,
+    "aria-expanded": !isCollapsed
+  }, infoContent) : /*#__PURE__*/React.createElement("div", {
+    className: infoClasses
+  }, infoContent), action && /*#__PURE__*/React.createElement(MainAction, _extends({
+    dataTestId: dataTestId
+  }, action))), children && /*#__PURE__*/React.createElement("div", {
     style: {
       maxHeight: contentHeight
     },
@@ -130,6 +172,10 @@ const UTDataElement = _ref => {
 UTDataElement.propTypes = {
   action: object,
   area: bool,
+  areaProps: shape({
+    colorTheme: string,
+    shade: string
+  }),
   badge: string,
   badgeProps: object,
   classes: objectOf(string),
@@ -137,6 +183,7 @@ UTDataElement.propTypes = {
   Data: oneOfType([element, string]),
   dataProps: object,
   dataTestId: string,
+  expanded: bool,
   forceShowBadge: bool,
   Icon: oneOfType([element, string]),
   iconProps: object,

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

@@ -33,6 +33,7 @@
 }
 
 .info {
+  align-items: stretch;
   display: flex;
   flex: 1;
   flex-direction: row;
@@ -40,6 +41,10 @@
   justify-content: space-between;
 }
 
+.clickable {
+  cursor: pointer;
+}
+
 .vertical {
   flex-direction: column;
   grid-gap: var(--UT-dataElement-content-gap-y, 0.5rem);

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

@@ -1,20 +1,22 @@
-import { COLOR_THEMES } from '../../constants/Palette';
-export const backgroundColor = (theme, area) => {
-  var _theme$Palette;
-  const colorTheme = COLOR_THEMES.light;
-  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
-  const paletteColors = theme.Palette;
-  const areaColor = actionPaletteColors[colorTheme] || paletteColors[colorTheme];
+import { COLOR_THEMES, COLOR_SHADES, VALID_PALETTE_COLOR_THEMES } from '../../constants/Palette';
+export const backgroundColor = function (theme, area) {
+  var _theme$Palette, _theme$Palette2;
+  let areaProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const requestedColorTheme = areaProps.colorTheme || COLOR_THEMES.light;
+  const colorTheme = VALID_PALETTE_COLOR_THEMES.has(requestedColorTheme) ? requestedColorTheme : COLOR_THEMES.light;
+  const areaColor = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.actions) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette[colorTheme]) || ((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2[colorTheme]);
+  const shade = areaProps.shade || (COLOR_THEMES.light === colorTheme ? COLOR_SHADES.shade03 : COLOR_SHADES.shade01);
   return {
-    backgroundColor: area ? areaColor['03'] : 'transparent'
+    backgroundColor: area ? areaColor === null || areaColor === void 0 ? void 0 : areaColor[shade] : 'transparent'
   };
 };
 export const retrieveStyle = _ref => {
   let {
     area,
-    theme
+    theme,
+    areaProps
   } = _ref;
-  const areaBackgroundColor = backgroundColor(theme, area);
+  const areaBackgroundColor = backgroundColor(theme, area, areaProps);
   return {
     area: {
       ...areaBackgroundColor,

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

@@ -2,7 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import { useArgs } from '@storybook/preview-api';
 import { joinArgTypes } from 'stories/utils';
-import { SPACING } from '../UTCheckbox/versions/V1/constants';
+import { SPACING } from './versions/V1/constants';
 import { RADIO_VARIANTS } from './versions/V1/components/Radio/constants';
 import UTRadioGroup from '.';
 const defaultOptions = [{
@@ -312,6 +312,102 @@ export default {
         eq: 'V1'
       }
     },
+    area: {
+      control: 'boolean',
+      description: 'Muestra un área de fondo alrededor del grupo de opciones (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    areaProps: {
+      control: 'object',
+      description: 'Personalización del área de fondo: `colorTheme`, `shade`, `borderColorTheme`, `borderShade` (V1 only). Sin `colorTheme` no se agrega fondo; sin `borderColorTheme` no se agrega borde.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    iconProps: {
+      control: 'object',
+      description: 'Props adicionales para el ícono de cada opción (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    iconSelectedProps: {
+      control: 'object',
+      description: 'Props adicionales para el ícono de la opción seleccionada, sobrescriben `iconProps` (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    nameProps: {
+      control: 'object',
+      description: 'Props adicionales para el UTLabel del nombre de cada opción (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    nameSelectedProps: {
+      control: 'object',
+      description: 'Props adicionales para el UTLabel del nombre de la opción seleccionada, sobrescriben `nameProps` (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
     dataTestId: {
       control: 'text',
       description: 'ID de prueba para el elemento raíz.',
@@ -419,8 +515,8 @@ export const Playground = {
     options: defaultOptions,
     title: 'Selecciona una opción',
     value: '',
-    horizontalSpacing: 'medium',
-    verticalSpacing: 'medium',
+    horizontalSpacing: SPACING.MEDIUM,
+    verticalSpacing: SPACING.MEDIUM,
     reversed: false,
     required: false,
     disabled: false,
@@ -476,6 +572,30 @@ export const V1ButtonVariant = {
   },
   name: 'V1 - Variante Button'
 };
+export const V1WithArea = {
+  render: V1Template,
+  args: {
+    version: 'V1',
+    options: defaultOptions,
+    title: 'Opciones con Área de Fondo',
+    value: '',
+    area: true,
+    areaProps: {
+      colorTheme: 'light',
+      borderColorTheme: 'gray'
+    },
+    iconProps: {
+      colorTheme: 'dark'
+    },
+    iconSelectedProps: {
+      colorTheme: 'accent'
+    },
+    nameSelectedProps: {
+      weight: 'bold'
+    }
+  },
+  name: 'V1 - Con Área de Fondo'
+};
 
 // V0 Stories
 export const V0Basic = {

package/dist/esm/components/UTRadioGroup/versions/V1/components/Radio/index.js

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import MaterialRadio from '@material-ui/core/Radio';
 import { object, bool, func, string } from 'prop-types';
+import UTTouchableWithoutFeedback from '../../../../../UTTouchableWithoutFeedback';
 import UTIcon from '../../../../../UTIcon';
 import UTLabel from '../../../../../UTLabel';
 import WithTheme from '../../../../../WithTheme';
@@ -14,18 +15,20 @@ const Radio = _ref => {
     descriptionProps = {},
     disabled,
     icon,
+    iconProps = {},
+    iconSelectedProps = {},
     name,
     nameProps = {},
+    nameSelectedProps = {},
     onChange,
     prefix,
     selected,
     suffix,
     variant = RADIO_VARIANTS.DEFAULT
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
     className: classes.root,
-    onClick: () => !disabled && onChange(),
-    role: "button"
+    onClick: () => !disabled && onChange()
   }, variant === RADIO_VARIANTS.DEFAULT && /*#__PURE__*/React.createElement(MaterialRadio, {
     checked: selected,
     onChange: onChange,
@@ -33,11 +36,11 @@ const Radio = _ref => {
     disabled: disabled
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.content
-  }, icon && /*#__PURE__*/React.createElement(UTIcon, {
+  }, icon && /*#__PURE__*/React.createElement(UTIcon, _extends({
     name: icon,
     colorTheme: selected ? 'accent' : 'dark',
     size: ICON_SIZES[variant]
-  }), /*#__PURE__*/React.createElement("div", {
+  }, iconProps, selected ? iconSelectedProps : {})), /*#__PURE__*/React.createElement("div", {
     className: classes.contentContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.content
@@ -45,7 +48,7 @@ const Radio = _ref => {
     colorTheme: "gray"
   }, prefix), name && /*#__PURE__*/React.createElement(UTLabel, _extends({
     colorTheme: selected ? 'accent' : 'dark'
-  }, nameProps), name), suffix && /*#__PURE__*/React.createElement(UTLabel, {
+  }, nameProps, selected ? nameSelectedProps : {}), name), suffix && /*#__PURE__*/React.createElement(UTLabel, {
     colorTheme: "gray",
     variant: "small",
     weight: "medium"
@@ -63,8 +66,11 @@ Radio.propTypes = {
   descriptionProps: object,
   disabled: bool,
   icon: string,
+  iconProps: object,
+  iconSelectedProps: object,
   name: string,
   nameProps: object,
+  nameSelectedProps: object,
   onChange: func,
   prefix: string,
   selected: bool,

package/dist/esm/components/UTRadioGroup/versions/V1/constants.js

@@ -1,4 +1,5 @@
 export const SPACING = {
+  NONE: 'none',
   SMALL: 'small',
   MEDIUM: 'medium'
 };

package/dist/esm/components/UTRadioGroup/versions/V1/index.js

@@ -1,6 +1,6 @@
 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, { useMemo } from 'react';
-import { arrayOf, bool, func, objectOf, shape, string, object } from 'prop-types';
+import { arrayOf, bool, func, objectOf, oneOf, shape, string, object } from 'prop-types';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import { buttonTypes } from '../../../../types/buttonTypes';
 import UTFieldLabel from '../../../UTFieldLabel';
@@ -9,19 +9,25 @@ import { formatErrorToValidation } from '../../../UTValidation/utils';
 import UTValidation from '../../../UTValidation';
 import Radio from './components/Radio';
 import styles from './styles.module.scss';
-import { NO_CATEGORY } from './constants';
+import { getAreaStyle } from './utils';
+import { NO_CATEGORY, SPACING } from './constants';
 const UTRadioGroup = _ref => {
   let {
     actions,
+    area,
+    areaProps,
     classNames = {},
     dataTestId,
     descriptionProps,
     disabled,
     error,
     errorDataTestId,
-    horizontalSpacing = 'medium',
+    horizontalSpacing = SPACING.MEDIUM,
+    iconProps,
+    iconSelectedProps,
     itemDataTestId,
     nameProps,
+    nameSelectedProps,
     onChange = () => {},
     options,
     required,
@@ -29,7 +35,7 @@ const UTRadioGroup = _ref => {
     title,
     value = null,
     variant,
-    verticalSpacing = 'medium'
+    verticalSpacing = SPACING.MEDIUM
   } = _ref;
   const categorizedOptions = useMemo(() => {
     const optionsGrouped = options.reduce((groupedOptions, option) => {
@@ -52,11 +58,13 @@ const UTRadioGroup = _ref => {
     });
   }, [options]);
   const validationData = useMemo(() => error && formatErrorToValidation(error), [error]);
+  const areaStyle = useMemo(() => getAreaStyle(area, areaProps), [area, areaProps]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles.container, "  ").concat(classNames.root),
-    "data-testid": dataTestId
+    className: "".concat(styles.container, " ").concat(classNames.root || ''),
+    "data-testid": dataTestId,
+    style: areaStyle
   }, title && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles.headerContainer, " ").concat(classNames.header)
+    className: "".concat(styles.headerContainer, " ").concat(classNames.header || '')
   }, title && /*#__PURE__*/React.createElement(UTFieldLabel, {
     actions: actions,
     required: required
@@ -77,8 +85,11 @@ const UTRadioGroup = _ref => {
       dataTestId: itemDataTestId ? "".concat(itemDataTestId, ".category_").concat(catIndex, ".").concat(index) : null,
       descriptionProps: descriptionProps,
       disabled: item.disabled || disabled,
+      iconProps: iconProps,
+      iconSelectedProps: iconSelectedProps,
       key: item.value,
       nameProps: nameProps,
+      nameSelectedProps: nameSelectedProps,
       onChange: () => onChange(item.value),
       reversed: reversed,
       selected: item.value === value,
@@ -92,15 +103,20 @@ const UTRadioGroup = _ref => {
 };
 UTRadioGroup.propTypes = {
   actions: arrayOf(buttonTypes),
+  area: bool,
+  areaProps: object,
   classNames: objectOf(string),
   dataTestId: string,
   descriptionProps: object,
   disabled: bool,
   error: string,
   errorDataTestId: string,
-  horizontalSpacing: string,
+  horizontalSpacing: oneOf(Object.values(SPACING)),
+  iconProps: object,
+  iconSelectedProps: object,
   itemDataTestId: string,
   nameProps: object,
+  nameSelectedProps: object,
   onChange: func,
   options: arrayOf(shape({
     category: string,
@@ -115,6 +131,6 @@ UTRadioGroup.propTypes = {
   title: string,
   value: string,
   variant: string,
-  verticalSpacing: string
+  verticalSpacing: oneOf(Object.values(SPACING))
 };
 export default UTRadioGroup;