@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/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/esm/components/UTStatus/UTStatus.stories.js

@@ -0,0 +1,391 @@
+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 { joinArgTypes } from 'stories/utils';
+import { DEFAULT_PROPS, SIZES, TYPES, VARIANTS, AREA_TYPES } from './constants';
+import UTStatus from '.';
+export default {
+  args: {
+    children: 'Información de estado',
+    size: DEFAULT_PROPS.size,
+    type: DEFAULT_PROPS.type,
+    variant: DEFAULT_PROPS.variant
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'Texto a mostrar en el componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    Icon: {
+      control: false,
+      description: 'Icono a mostrar en el componente. Sobreescribe el default. Solo se muestra si `withoutIcon` es `false`.',
+      table: {
+        defaultValue: {
+          summary: 'Detalles',
+          detail: 'Cada variant tiene su Icon default.'
+        },
+        type: {
+          summary: joinArgTypes(['ReactComponent', 'string'])
+        }
+      }
+    },
+    className: {
+      control: false,
+      description: 'Clase que recibe el contenedor.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    variant: {
+      control: 'select',
+      description: 'Determina la variante del componente a usar.',
+      options: Object.keys(VARIANTS),
+      table: {
+        defaultValue: {
+          summary: 'success'
+        },
+        type: {
+          summary: joinArgTypes(Object.keys(VARIANTS))
+        }
+      }
+    },
+    type: {
+      control: 'select',
+      description: 'Determina el tema a usar.',
+      options: Object.keys(TYPES),
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.type
+        },
+        type: {
+          summary: joinArgTypes(Object.keys(TYPES))
+        }
+      }
+    },
+    size: {
+      control: 'inline-radio',
+      description: 'Determina el tamaño del texto.',
+      options: Object.keys(SIZES),
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.size
+        },
+        type: {
+          summary: joinArgTypes(Object.keys(SIZES))
+        }
+      }
+    },
+    withoutIcon: {
+      control: 'boolean',
+      description: 'Determina si se debe mostrar u ocultar el icono.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Atributo title del elemento HTML para mostrar información adicional al hacer hover.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    tooltip: {
+      control: 'text',
+      description: 'Contenido del tooltip que se muestra al hacer hover sobre el componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: joinArgTypes(['string', 'ReactElement'])
+        }
+      }
+    },
+    tooltipProps: {
+      control: 'object',
+      description: 'Propiedades adicionales para personalizar el comportamiento del tooltip.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    labelDataTestId: {
+      control: 'text',
+      description: 'Identificador de test para el label del componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    adornments: {
+      control: 'object',
+      description: 'Array de adornos (badges e iconos) para mostrar junto al estado.',
+      table: {
+        defaultValue: {
+          summary: '[]'
+        },
+        type: {
+          summary: 'array'
+        }
+      }
+    },
+    area: {
+      control: 'boolean',
+      description: 'Determina si se debe mostrar el área de fondo del componente.',
+      table: {
+        defaultValue: {
+          summary: 'true'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    areaType: {
+      control: 'select',
+      description: 'Determina el tipo de área a usar.',
+      options: Object.keys(AREA_TYPES),
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.areaType
+        },
+        type: {
+          summary: joinArgTypes(Object.keys(AREA_TYPES))
+        }
+      }
+    }
+  },
+  component: UTStatus,
+  parameters: {
+    controls: {
+      exclude: ['classes']
+    },
+    docs: {
+      description: {
+        component: 'Este componente se usa para mostrar estados con o sin iconos asociados. Soporta diferentes variantes de color, tipos de tema y tamaños. Incluye funcionalidad de tooltip y puede personalizarse con iconos personalizados.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTStatus'
+};
+export const Default = {
+  args: {
+    size: DEFAULT_PROPS.size,
+    type: DEFAULT_PROPS.type,
+    variant: DEFAULT_PROPS.variant,
+    withoutIcon: DEFAULT_PROPS.withoutIcon,
+    area: DEFAULT_PROPS.area,
+    areaType: DEFAULT_PROPS.areaType
+  },
+  name: 'Playground'
+};
+export const AllVariants = {
+  args: {
+    children: 'Estado del sistema',
+    size: 'medium',
+    type: 'default'
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '16px',
+      flexWrap: 'wrap'
+    }
+  }, Object.keys(VARIANTS).map(variant => /*#__PURE__*/React.createElement(UTStatus, _extends({
+    key: variant
+  }, args, {
+    variant: variant
+  })))),
+  name: 'Todas las Variantes',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Muestra todas las variantes disponibles del componente UTStatus con el tipo por defecto.'
+      }
+    }
+  }
+};
+export const AllTypes = {
+  args: {
+    children: 'Diferentes tipos',
+    size: 'medium',
+    variant: 'success'
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '16px',
+      flexWrap: 'wrap'
+    }
+  }, Object.keys(TYPES).map(type => /*#__PURE__*/React.createElement(UTStatus, _extends({
+    key: type
+  }, args, {
+    type: type
+  })))),
+  name: 'Todos los Tipos',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Muestra todos los tipos de tema disponibles del componente UTStatus con la variante success.'
+      }
+    }
+  }
+};
+export const AllSizes = {
+  args: {
+    type: 'default'
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '12px'
+    }
+  }, Object.keys(SIZES).map(size => /*#__PURE__*/React.createElement("div", {
+    key: size,
+    style: {
+      display: 'flex',
+      gap: '8px',
+      alignItems: 'center'
+    }
+  }, Object.keys(VARIANTS).map(variant => /*#__PURE__*/React.createElement(UTStatus, _extends({
+    key: variant
+  }, args, {
+    size: size,
+    variant: variant
+  }), variant))))),
+  name: 'Todos los Tamaños',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Muestra todos los tamaños disponibles del componente UTStatus, con todas las variantes por fila.'
+      }
+    }
+  }
+};
+export const WithTooltip = {
+  args: {
+    children: 'Estado con tooltip',
+    variant: 'warning',
+    tooltip: 'Este es un mensaje de advertencia importante que requiere atención del usuario.'
+  },
+  name: 'Con Tooltip',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo del componente UTStatus con tooltip personalizado y propiedades adicionales.'
+      }
+    }
+  }
+};
+export const WithoutIcon = {
+  args: {
+    children: 'Estado sin icono',
+    variant: 'unassigned',
+    withoutIcon: true
+  },
+  name: 'Sin Icono',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo del componente UTStatus sin icono, útil para casos donde solo se necesita mostrar el texto del estado.'
+      }
+    }
+  }
+};
+export const CustomIcon = {
+  args: {
+    children: 'Icono personalizado',
+    variant: 'information',
+    Icon: 'IconStar',
+    title: 'Estado destacado con icono personalizado'
+  },
+  name: 'Icono Personalizado',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo del componente UTStatus con un icono personalizado que sobrescribe el icono por defecto de la variante.'
+      }
+    }
+  }
+};
+export const WithAdornments = {
+  args: {
+    children: 'Estado con adornos',
+    variant: 'success',
+    adornments: [{
+      name: 'Badge',
+      props: {
+        variant: 'information'
+      }
+    }]
+  },
+  name: 'Con Adornos',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo del componente UTStatus con adornos (badges e iconos) adicionales.'
+      }
+    }
+  }
+};
+export const WithoutArea = {
+  args: {
+    children: 'Estado sin área',
+    variant: 'warning',
+    area: false
+  },
+  name: 'Sin Área',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo del componente UTStatus sin el área de fondo, útil para integración en diseños más minimalistas.'
+      }
+    }
+  }
+};
+export const RoundedArea = {
+  args: {
+    children: 'Área redondeada',
+    variant: 'success',
+    areaType: 'full'
+  },
+  name: 'Área Redondeada',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo del componente UTStatus con área completamente redondeada.'
+      }
+    }
+  }
+};

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

@@ -1 +1,43 @@
-import UTBadge from"../UTBadge";import UTIcon from"../UTIcon";export const SIZES={large:"large",medium:"medium",small:"small",xlarge:"xlarge",xsmall:"xsmall"};export const VARIANTS={accent:"accent",error:"error",information:"information",success:"success",unassigned:"unassigned",warning:"warning"};export const TYPES={accent:"accent",default:"default",light:"light",negative:"negative"};export const AREA_TYPES={SQUARE:"SQUARE",ROUNDED:"ROUNDED"};export const DEFAULT_PROPS={areaType:AREA_TYPES.SQUARE,size:"medium",type:"default",variant:"success",weight:"medium",withoutIcon:!1};export const COMPONENT_KEYS={BADGE:"Badge",ICON:"Icon"};export const COMPONENTS_MAPPER={[COMPONENT_KEYS.BADGE]:UTBadge,[COMPONENT_KEYS.ICON]:UTIcon};
+import UTBadge from '../UTBadge';
+import UTIcon from '../UTIcon';
+export const SIZES = {
+  large: 'large',
+  medium: 'medium',
+  small: 'small',
+  xlarge: 'xlarge',
+  xsmall: 'xsmall'
+};
+export const VARIANTS = {
+  accent: 'accent',
+  error: 'error',
+  information: 'information',
+  success: 'success',
+  unassigned: 'unassigned',
+  warning: 'warning'
+};
+export const TYPES = {
+  accent: 'accent',
+  default: 'default',
+  light: 'light',
+  negative: 'negative'
+};
+export const AREA_TYPES = {
+  SQUARE: 'SQUARE',
+  ROUNDED: 'ROUNDED'
+};
+export const DEFAULT_PROPS = {
+  areaType: AREA_TYPES.SQUARE,
+  size: 'medium',
+  type: 'default',
+  variant: 'success',
+  weight: 'medium',
+  withoutIcon: false
+};
+export const COMPONENT_KEYS = {
+  BADGE: 'Badge',
+  ICON: 'Icon'
+};
+export const COMPONENTS_MAPPER = {
+  [COMPONENT_KEYS.BADGE]: UTBadge,
+  [COMPONENT_KEYS.ICON]: UTIcon
+};

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

@@ -1 +1,142 @@
-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,{useCallback,useMemo}from"react";import{bool,string,objectOf,elementType,object,oneOfType,element,arrayOf}from"prop-types";import isEmpty from"lodash/isEmpty";import UTLabel from"../UTLabel";import WithTheme from"../WithTheme";import Skeleton from"../UTSkeleton";import UTTooltip from"../UTTooltip";import{defaultIconMapper,getColorTheme,getLabelVariant,retrieveStyle,validateProps}from"./theme";import{AREA_TYPES,COMPONENTS_MAPPER,DEFAULT_PROPS,TYPES}from"./constants";import{getAdornmentsThemeProps,getIconProps,validateAdornments}from"./utils";import styles from"./styles.module.scss";const UTStatus=_ref=>{let{adornments:adornments=[],area:area=!0,areaType:areaType=DEFAULT_PROPS.areaType,children:children,classes:classes,className:className,Icon:Icon,labelDataTestId:labelDataTestId,size:size=DEFAULT_PROPS.size,title:title,tooltip:tooltip,tooltipProps:tooltipProps={},truncate:truncate,type:type=DEFAULT_PROPS.type,variant:variant=DEFAULT_PROPS.variant,weight:weight=DEFAULT_PROPS.weight,withoutIcon:withoutIcon}=_ref;const StatusIcon=null!=Icon?Icon:defaultIconMapper(variant),{leftAdornments:leftAdornments,rightAdornments:rightAdornments}=useMemo(()=>{const left=[],right=[];return validateAdornments(adornments)?(adornments.forEach((item,index)=>{item.left||item.right?(item.left&&left.push({...item.left,key:item.left.key||"".concat(item.left.name,"-left-").concat(index)}),item.right&&right.push({...item.right,key:item.right.key||"".concat(item.right.name,"-right-").concat(index)})):left.push({...item,key:item.key||"".concat(item.name,"-").concat(index)})}),{leftAdornments:left,rightAdornments:right}):{leftAdornments:left,rightAdornments:right}},[adornments]),useValidAdornments=leftAdornments.length>0||rightAdornments.length>0,{IconComponent:IconComponent,...iconProps}=useMemo(()=>getIconProps(validateProps({className:classes.icon,Icon:StatusIcon,type:type,variant:variant,size:size})),[StatusIcon,type,variant,size,classes.icon]),showTooltip=!isEmpty(tooltip),colorTheme=getColorTheme(validateProps({type:type,variant:variant})),renderAdornment=useCallback(adornment=>{const Component=COMPONENTS_MAPPER[adornment.name],themeProps=getAdornmentsThemeProps({area:area,classes:classes,size:size,adornmentName:adornment.name}),adornmentProps={variant:variant,...(null==adornment?void 0:adornment.props)||{},...themeProps};return Component?React.createElement(Component,_extends({},adornmentProps,{key:(null==adornment?void 0:adornment.key)||adornment.name})):null},[adornments,size,variant]),StatusRender=React.createElement("div",{className:"".concat(classes.root," ").concat(truncate?styles.truncated:""," ").concat(className||""," ").concat(area?"":classes.withoutArea," ").concat(areaType===AREA_TYPES.SQUARE?"":classes.roundedArea),title:title},useValidAdornments&&leftAdornments.map(renderAdornment),withoutIcon||useValidAdornments?null:React.createElement(IconComponent,iconProps),React.createElement(UTLabel,{className:"".concat(classes.label," ").concat(truncate?styles.truncatedLabel:""),colorTheme:colorTheme,shade:type!==TYPES.negative?"05":void 0,dataTestId:labelDataTestId,variant:getLabelVariant({size:size}),weight:weight},children),useValidAdornments&&rightAdornments.map(renderAdornment));return React.createElement(Skeleton,null,showTooltip?React.createElement(UTTooltip,{content:tooltip,tippyProps:{appendTo:()=>document.body,interactive:!1,arrow:!1,...tooltipProps}},StatusRender):StatusRender)};UTStatus.defaultProps=DEFAULT_PROPS,UTStatus.propTypes={adornments:arrayOf(object),area:bool,areaType:string,classes:objectOf(string),className:string,Icon:elementType,iconProps:object,labelDataTestId:string,size:string,title:string,tooltip:oneOfType([string,element]),tooltipProps:object,truncate:bool,type:string,variant:string,weight:string,withoutIcon:bool};export default WithTheme(retrieveStyle)(UTStatus);
+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, { useCallback, useMemo } from 'react';
+import { bool, string, objectOf, elementType, object, oneOfType, element, arrayOf } from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+import UTLabel from '../UTLabel';
+import WithTheme from '../WithTheme';
+import Skeleton from '../UTSkeleton';
+import UTTooltip from '../UTTooltip';
+import { defaultIconMapper, getColorTheme, getLabelVariant, retrieveStyle, validateProps } from './theme';
+import { AREA_TYPES, COMPONENTS_MAPPER, DEFAULT_PROPS, TYPES } from './constants';
+import { getAdornmentsThemeProps, getIconProps, validateAdornments } from './utils';
+import styles from './styles.module.scss';
+const UTStatus = _ref => {
+  let {
+    adornments = [],
+    area = true,
+    areaType = DEFAULT_PROPS.areaType,
+    children,
+    classes,
+    className,
+    Icon,
+    labelDataTestId,
+    size = DEFAULT_PROPS.size,
+    title,
+    tooltip,
+    tooltipProps = {},
+    truncate,
+    type = DEFAULT_PROPS.type,
+    variant = DEFAULT_PROPS.variant,
+    weight = DEFAULT_PROPS.weight,
+    withoutIcon
+  } = _ref;
+  const StatusIcon = Icon !== null && Icon !== void 0 ? Icon : defaultIconMapper(variant);
+  const {
+    leftAdornments,
+    rightAdornments
+  } = useMemo(() => {
+    const left = [];
+    const right = [];
+    if (!validateAdornments(adornments)) return {
+      leftAdornments: left,
+      rightAdornments: right
+    };
+    adornments.forEach((item, index) => {
+      if (item.left || item.right) {
+        if (item.left) left.push({
+          ...item.left,
+          key: item.left.key || "".concat(item.left.name, "-left-").concat(index)
+        });
+        if (item.right) right.push({
+          ...item.right,
+          key: item.right.key || "".concat(item.right.name, "-right-").concat(index)
+        });
+      } else {
+        left.push({
+          ...item,
+          key: item.key || "".concat(item.name, "-").concat(index)
+        });
+      }
+    });
+    return {
+      leftAdornments: left,
+      rightAdornments: right
+    };
+  }, [adornments]);
+  const useValidAdornments = leftAdornments.length > 0 || rightAdornments.length > 0;
+  const {
+    IconComponent,
+    ...iconProps
+  } = useMemo(() => getIconProps(validateProps({
+    className: classes.icon,
+    Icon: StatusIcon,
+    type,
+    variant,
+    size
+  })), [StatusIcon, type, variant, size, classes.icon]);
+  const showTooltip = !isEmpty(tooltip);
+  const colorTheme = getColorTheme(validateProps({
+    type,
+    variant
+  }));
+  const renderAdornment = useCallback(adornment => {
+    const Component = COMPONENTS_MAPPER[adornment.name];
+    const themeProps = getAdornmentsThemeProps({
+      area,
+      classes,
+      size,
+      adornmentName: adornment.name
+    });
+    const adornmentProps = {
+      variant,
+      ...((adornment === null || adornment === void 0 ? void 0 : adornment.props) || {}),
+      ...themeProps
+    };
+    return Component ? /*#__PURE__*/React.createElement(Component, _extends({}, adornmentProps, {
+      key: (adornment === null || adornment === void 0 ? void 0 : adornment.key) || adornment.name
+    })) : null;
+  }, [adornments, size, variant]);
+  const StatusRender = /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classes.root, " ").concat(truncate ? styles.truncated : '', " ").concat(className || '', " ").concat(area ? '' : classes.withoutArea, " ").concat(areaType === AREA_TYPES.SQUARE ? '' : classes.roundedArea),
+    title: title
+  }, useValidAdornments && leftAdornments.map(renderAdornment), withoutIcon || useValidAdornments ? null : /*#__PURE__*/React.createElement(IconComponent, iconProps), /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(classes.label, " ").concat(truncate ? styles.truncatedLabel : ''),
+    colorTheme: colorTheme,
+    shade: type !== TYPES.negative ? '05' : undefined,
+    dataTestId: labelDataTestId,
+    variant: getLabelVariant({
+      size
+    }),
+    weight: weight
+  }, children), useValidAdornments && rightAdornments.map(renderAdornment));
+  return /*#__PURE__*/React.createElement(Skeleton, null, showTooltip ? /*#__PURE__*/React.createElement(UTTooltip, {
+    content: tooltip,
+    tippyProps: {
+      appendTo: () => document.body,
+      interactive: false,
+      arrow: false,
+      ...tooltipProps
+    }
+  }, StatusRender) : StatusRender);
+};
+UTStatus.defaultProps = DEFAULT_PROPS;
+UTStatus.propTypes = {
+  adornments: arrayOf(object),
+  area: bool,
+  areaType: string,
+  classes: objectOf(string),
+  className: string,
+  Icon: elementType,
+  iconProps: object,
+  labelDataTestId: string,
+  size: string,
+  title: string,
+  tooltip: oneOfType([string, element]),
+  tooltipProps: object,
+  truncate: bool,
+  type: string,
+  variant: string,
+  weight: string,
+  withoutIcon: bool
+};
+export default WithTheme(retrieveStyle)(UTStatus);