@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,55 @@
-import React,{useMemo}from"react";import{string,bool,object,objectOf,func}from"prop-types";import{mergeClasses}from"../../utils/classesUtils";import{valueExists}from"../../utils/componentUtils";import Skeleton from"../UTSkeleton";import WithTheme from"../WithTheme";import Markdown from"./components/Markdown";import{DEFAULT_PROPS,VARIANTS}from"./constants";import{retrieveStyle,retrieveProps}from"./theme";import styles from"./styles.module.scss";const UTLabel=_ref=>{let{align:align,children:children,className:className,classes:theme,dataTestId:dataTestId,markdownExtended:markdownExtended,markdownRenderers:markdownRenderers,style:style,title:title,variant:variant,withMarkdown:withMarkdown}=_ref;if(!valueExists(children))return null;const Component=VARIANTS[variant]||VARIANTS[DEFAULT_PROPS.variant],classes=useMemo(()=>mergeClasses(theme,{className:className}),[theme,className]),componentClassname="".concat(classes.root," ").concat(withMarkdown?classes.markdown:""," ").concat(styles["".concat(align,"Alignment")]||""," ").concat(classes.className);return React.createElement(Skeleton,null,React.createElement(Component,{className:componentClassname.trim(),"data-testid":dataTestId,style:style,title:title},withMarkdown&&React.createElement(Markdown,{classes:classes,markdownExtended:markdownExtended,markdownRenderers:markdownRenderers},children)||children))};UTLabel.defaultProps=DEFAULT_PROPS,UTLabel.propTypes={align:string,classes:objectOf(string),className:string,dataTestId:string,markdownExtended:bool,markdownRenderers:objectOf(func),style:object,title:string,variant:string,withMarkdown:bool};export default WithTheme(retrieveStyle,null,retrieveProps)(UTLabel);
+import React, { useMemo } from 'react';
+import { string, bool, object, objectOf, func } from 'prop-types';
+import { mergeClasses } from '../../utils/classesUtils';
+import { valueExists } from '../../utils/componentUtils';
+import Skeleton from '../UTSkeleton';
+import WithTheme from '../WithTheme';
+import Markdown from './components/Markdown';
+import { DEFAULT_PROPS, VARIANTS } from './constants';
+import { retrieveStyle, retrieveProps } from './theme';
+import styles from './styles.module.scss';
+const UTLabel = _ref => {
+  let {
+    align,
+    children,
+    className,
+    classes: theme,
+    dataTestId,
+    markdownExtended,
+    markdownRenderers,
+    style,
+    title,
+    variant,
+    withMarkdown
+  } = _ref;
+  if (!valueExists(children)) return null;
+  const Component = VARIANTS[variant] || VARIANTS[DEFAULT_PROPS.variant];
+  const classes = useMemo(() => mergeClasses(theme, {
+    className
+  }), [theme, className]);
+  const componentClassname = "".concat(classes.root, " ").concat(withMarkdown ? classes.markdown : '', " ").concat(styles["".concat(align, "Alignment")] || '', " ").concat(classes.className);
+  return /*#__PURE__*/React.createElement(Skeleton, null, /*#__PURE__*/React.createElement(Component, {
+    className: componentClassname.trim(),
+    "data-testid": dataTestId,
+    style: style,
+    title: title
+  }, withMarkdown && /*#__PURE__*/React.createElement(Markdown, {
+    classes: classes,
+    markdownExtended: markdownExtended,
+    markdownRenderers: markdownRenderers
+  }, children) || children));
+};
+UTLabel.defaultProps = DEFAULT_PROPS;
+UTLabel.propTypes = {
+  align: string,
+  classes: objectOf(string),
+  className: string,
+  dataTestId: string,
+  markdownExtended: bool,
+  markdownRenderers: objectOf(func),
+  style: object,
+  title: string,
+  variant: string,
+  withMarkdown: bool
+};
+export default WithTheme(retrieveStyle, null, retrieveProps)(UTLabel);

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

@@ -1 +1,201 @@
-import merge from"lodash/merge";import{COLOR_SHADES,COLOR_THEMES}from"../../constants/Palette";import{getDefaultColorShade}from"../../utils/componentUtils";import Colors from"../../scss/variables/colors.module.scss";import{DEFAULT_PROPS,VARIANTS_LINE_HEIGHT,VARIANTS_SIZES,WEIGHTS}from"./constants";const variantsColorTheme=(colorTheme,shade,theme)=>{var _theme$Palette$action;return(theme.Palette[colorTheme]||(null===(_theme$Palette$action=theme.Palette.actions)||void 0===_theme$Palette$action?void 0:_theme$Palette$action[colorTheme])||theme.Palette[DEFAULT_PROPS.colorTheme])[Object.values(COLOR_SHADES).includes(shade)?shade:getDefaultColorShade(colorTheme)]||Colors.black},linkColor=(theme,colorTheme)=>{var _theme$Palette;const actionPaletteColors=(null===(_theme$Palette=theme.Palette)||void 0===_theme$Palette?void 0:_theme$Palette.actions)||theme.Palette;return colorTheme===COLOR_THEMES.light?actionPaletteColors[COLOR_THEMES.negative][COLOR_SHADES.shade05]:colorTheme===COLOR_THEMES.error?actionPaletteColors[COLOR_THEMES.error][COLOR_SHADES.shade05]:actionPaletteColors[COLOR_THEMES.accent][COLOR_SHADES.shade05]};export const getFontStyles=_ref=>{var _theme$UTLabel,_theme$UTLabel2,_theme$Fonts;let{theme:theme,variant:variant,weight:weight,variantsSizes:propVariantsSizes}=_ref;const variantsSizes=propVariantsSizes||merge({},VARIANTS_SIZES,null==theme||null===(_theme$UTLabel=theme.UTLabel)||void 0===_theme$UTLabel?void 0:_theme$UTLabel.variantsSizes),variantsLineHeights=merge({},VARIANTS_LINE_HEIGHT,null==theme||null===(_theme$UTLabel2=theme.UTLabel)||void 0===_theme$UTLabel2?void 0:_theme$UTLabel2.variantsLineHeights);return{fontFamily:null==theme||null===(_theme$Fonts=theme.Fonts)||void 0===_theme$Fonts?void 0:_theme$Fonts.fontFamily,fontSize:variantsSizes[variant]||variantsSizes[DEFAULT_PROPS.variant],fontWeight:WEIGHTS[weight]||WEIGHTS[DEFAULT_PROPS.weight],lineHeight:variantsLineHeights[variant]||variantsLineHeights[DEFAULT_PROPS.variant]}};export const retrieveStyle=_ref2=>{var _field$configuration$,_field$configuration,_field$configuration$2,_field$configuration2,_field$configuration$3,_field$configuration3,_field$configuration$4,_field$configuration4;let{colorTheme:colorTheme,field:field,shade:shade,theme:theme,variant:variant,weight:weight,variantsSizes:variantsSizes}=_ref2;const darkTextColor=colorTheme===COLOR_THEMES.light?theme.Palette[COLOR_THEMES.light][COLOR_SHADES.shade01]:theme.Palette[COLOR_THEMES.dark][COLOR_SHADES.shade05],grayTextColor=colorTheme===COLOR_THEMES.light?theme.Palette[COLOR_THEMES.light][COLOR_SHADES.shade01]:theme.Palette[COLOR_THEMES.gray][COLOR_SHADES.shade04];return{root:{color:variantsColorTheme(null!==(_field$configuration$=null==field||null===(_field$configuration=field.configuration)||void 0===_field$configuration?void 0:_field$configuration.colorTheme)&&void 0!==_field$configuration$?_field$configuration$:colorTheme,null!==(_field$configuration$2=null==field||null===(_field$configuration2=field.configuration)||void 0===_field$configuration2?void 0:_field$configuration2.shade)&&void 0!==_field$configuration$2?_field$configuration$2:shade,theme),...getFontStyles({theme:theme,variant:null!==(_field$configuration$3=null==field||null===(_field$configuration3=field.configuration)||void 0===_field$configuration3?void 0:_field$configuration3.variant)&&void 0!==_field$configuration$3?_field$configuration$3:variant,weight:null!==(_field$configuration$4=null==field||null===(_field$configuration4=field.configuration)||void 0===_field$configuration4?void 0:_field$configuration4.weight)&&void 0!==_field$configuration$4?_field$configuration$4:weight,variantsSizes:variantsSizes}),margin:0},markdown:{"& a":{color:linkColor(theme,colorTheme)},"& h1, & h2, & h3, & h4, & h5, & h6":{color:darkTextColor,fontWeight:WEIGHTS.medium,lineHeight:"var(--UT-label-lh-heading, 1.2)",margin:"0 0 var(--UT-label-markdown-margin-md, 8px) 0"},"& h1":{fontSize:"var(--UT-label-size-title-1, 1.875em)"},"& h2":{fontSize:"var(--UT-label-size-title-2, 1.5em)"},"& h3":{fontSize:"var(--UT-label-size-title-3, 1.375em)"},"& h4":{fontSize:"var(--UT-label-size-subtitle-1, 1.125em)"},"& h5":{fontSize:"var(--UT-label-size-subtitle-2, 1em)",margin:"0 0 var(--UT-label-markdown-margin-md, 12px) 0"},"& h6":{color:grayTextColor,fontSize:"var(--UT-label-size-body, 1em)",margin:"0 0 var(--UT-label-markdown-margin-md, 12px) 0"},"& table":{border:"1px solid ".concat(theme.Palette[COLOR_THEMES.light][COLOR_SHADES.shade04]),borderCollapse:"collapse",margin:"0 0 var(--UT-label-markdown-margin-xl, 24px) 0",width:"100%"},"& th, & td":{border:"1px solid ".concat(theme.Palette[COLOR_THEMES.light][COLOR_SHADES.shade04]),padding:"var(--UT-label-markdown-padding-sm, 8px) var(--UT-label-markdown-padding-md, 12px)",textAlign:"left"},"& th":{backgroundColor:(theme.Palette.actions||theme.Palette)[COLOR_THEMES.negative][COLOR_SHADES.shade01],color:grayTextColor,fontWeight:WEIGHTS.medium},"& p":{margin:"0 0 var(--UT-label-markdown-margin-md, 12px) 0"},"& ol":{paddingLeft:"var(--UT-label-markdown-padding-xl, 24px)",textAlign:"start"},"& ul, & ol":{margin:"0 0 var(--UT-label-markdown-margin-xl, 24px) 0"},"& ul:not(.contains-task-list)":{paddingLeft:"var(--UT-label-markdown-padding-xl, 24px)",textAlign:"start"},"& pre":{backgroundColor:theme.Palette[COLOR_THEMES.light][COLOR_SHADES.shade03],borderRadius:"var(--UT-radius-md, 0.5rem)",fontSize:"var(--UT-label-size-small, 0.875em)",lineHeight:"var(--UT-label-lh-small, 1.4)",margin:"0 0 var(--UT-label-markdown-margin-xl, 24px) 0",padding:"var(--UT-label-markdown-padding-sm, 12px) var(--UT-label-markdown-padding-md, 16px)",whiteSpace:"pre-wrap"},"& dl":{margin:"0 0 var(--UT-label-markdown-margin-xl, 24px) 0"},"& dd":{fontSize:"inherit",margin:0},"& dt":{color:grayTextColor,fontSize:VARIANTS_SIZES.small,fontWeight:WEIGHTS.semibold},"& dt + dt, & dt + dd, & dd + dd":{marginTop:12},"& hr":{borderColor:theme.Palette[COLOR_THEMES.gray][COLOR_SHADES.shade01],borderTop:0,margin:"var(--UT-label-markdown-margin-sm, 8px) 0 var(--UT-label-markdown-margin-xl, 24px)"},"& li + li":{marginTop:"var(--UT-label-markdown-margin-md, 12px)"},"& li > ul":{marginTop:"var(--UT-label-markdown-margin-sm, 8px)"},"& li::marker":{color:theme.Palette[COLOR_THEMES.gray][COLOR_SHADES.shade01]},"& li > ul > li + li":{marginTop:"var(--UT-label-markdown-margin-sm, 8px)"},"& li p":{margin:0},"& sup":{fontSize:"inherit"},"& sup > a":{fontSize:"var(--UT-label-size-xsmall, 0.75em)"},"& img, & video, & audio":{borderRadius:"var(--UT-radius-md, 0.5rem)",margin:"0 0 var(--UT-label-markdown-margin-xl, 24px) 0"},"& .contains-task-list":{display:"flex",flexDirection:"column",gridGap:"var(--gap-md, 12px)",margin:"0 0 var(--UT-label-markdown-margin-xl, 24px) 0",paddingLeft:0,"& li":{margin:0}},"& :last-child":{marginBottom:"0"}},blockquote:{color:grayTextColor},customFootnotes:{"& span":{color:grayTextColor}}}};export const retrieveProps=(componentsProps,props)=>({...(null==componentsProps?void 0:componentsProps.UTLabel)||{},...props});
+import merge from 'lodash/merge';
+import { COLOR_SHADES, COLOR_THEMES } from '../../constants/Palette';
+import { getDefaultColorShade } from '../../utils/componentUtils';
+import Colors from '../../scss/variables/colors.module.scss';
+import { DEFAULT_PROPS, VARIANTS_LINE_HEIGHT, VARIANTS_SIZES, WEIGHTS } from './constants';
+const variantsColorTheme = (colorTheme, shade, theme) => {
+  var _theme$Palette$action;
+  const colorThemeDefinition = theme.Palette[colorTheme] || ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action[colorTheme]) || theme.Palette[DEFAULT_PROPS.colorTheme];
+  const colorShade = Object.values(COLOR_SHADES).includes(shade) ? shade : getDefaultColorShade(colorTheme);
+  return colorThemeDefinition[colorShade] || Colors.black;
+};
+const linkColor = (theme, colorTheme) => {
+  var _theme$Palette;
+  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
+  const color = colorTheme === COLOR_THEMES.light ? actionPaletteColors[COLOR_THEMES.negative][COLOR_SHADES.shade05] : colorTheme === COLOR_THEMES.error ? actionPaletteColors[COLOR_THEMES.error][COLOR_SHADES.shade05] : actionPaletteColors[COLOR_THEMES.accent][COLOR_SHADES.shade05];
+  return color;
+};
+export const getFontStyles = _ref => {
+  var _theme$UTLabel, _theme$UTLabel2, _theme$Fonts;
+  let {
+    theme,
+    variant,
+    weight,
+    variantsSizes: propVariantsSizes
+  } = _ref;
+  const variantsSizes = propVariantsSizes || merge({}, VARIANTS_SIZES, theme === null || theme === void 0 || (_theme$UTLabel = theme.UTLabel) === null || _theme$UTLabel === void 0 ? void 0 : _theme$UTLabel.variantsSizes);
+  const variantsLineHeights = merge({}, VARIANTS_LINE_HEIGHT, theme === null || theme === void 0 || (_theme$UTLabel2 = theme.UTLabel) === null || _theme$UTLabel2 === void 0 ? void 0 : _theme$UTLabel2.variantsLineHeights);
+  return {
+    fontFamily: theme === null || theme === void 0 || (_theme$Fonts = theme.Fonts) === null || _theme$Fonts === void 0 ? void 0 : _theme$Fonts.fontFamily,
+    fontSize: variantsSizes[variant] || variantsSizes[DEFAULT_PROPS.variant],
+    fontWeight: WEIGHTS[weight] || WEIGHTS[DEFAULT_PROPS.weight],
+    lineHeight: variantsLineHeights[variant] || variantsLineHeights[DEFAULT_PROPS.variant]
+  };
+};
+export const retrieveStyle = _ref2 => {
+  var _field$configuration$, _field$configuration, _field$configuration$2, _field$configuration2, _field$configuration$3, _field$configuration3, _field$configuration$4, _field$configuration4;
+  let {
+    colorTheme,
+    field,
+    shade,
+    theme,
+    variant,
+    weight,
+    variantsSizes
+  } = _ref2;
+  const darkTextColor = colorTheme === COLOR_THEMES.light ? theme.Palette[COLOR_THEMES.light][COLOR_SHADES.shade01] : theme.Palette[COLOR_THEMES.dark][COLOR_SHADES.shade05];
+  const grayTextColor = colorTheme === COLOR_THEMES.light ? theme.Palette[COLOR_THEMES.light][COLOR_SHADES.shade01] : theme.Palette[COLOR_THEMES.gray][COLOR_SHADES.shade04];
+  return {
+    root: {
+      color: variantsColorTheme((_field$configuration$ = field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.colorTheme) !== null && _field$configuration$ !== void 0 ? _field$configuration$ : colorTheme, (_field$configuration$2 = field === null || field === void 0 || (_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.shade) !== null && _field$configuration$2 !== void 0 ? _field$configuration$2 : shade, theme),
+      ...getFontStyles({
+        theme,
+        variant: (_field$configuration$3 = field === null || field === void 0 || (_field$configuration3 = field.configuration) === null || _field$configuration3 === void 0 ? void 0 : _field$configuration3.variant) !== null && _field$configuration$3 !== void 0 ? _field$configuration$3 : variant,
+        weight: (_field$configuration$4 = field === null || field === void 0 || (_field$configuration4 = field.configuration) === null || _field$configuration4 === void 0 ? void 0 : _field$configuration4.weight) !== null && _field$configuration$4 !== void 0 ? _field$configuration$4 : weight,
+        variantsSizes
+      }),
+      margin: 0
+    },
+    markdown: {
+      '& a': {
+        color: linkColor(theme, colorTheme)
+      },
+      '& h1, & h2, & h3, & h4, & h5, & h6': {
+        color: darkTextColor,
+        fontWeight: WEIGHTS.medium,
+        lineHeight: 'var(--UT-label-lh-heading, 1.2)',
+        margin: '0 0 var(--UT-label-markdown-margin-md, 8px) 0'
+      },
+      '& h1': {
+        fontSize: 'var(--UT-label-size-title-1, 1.875em)'
+      },
+      '& h2': {
+        fontSize: 'var(--UT-label-size-title-2, 1.5em)'
+      },
+      '& h3': {
+        fontSize: 'var(--UT-label-size-title-3, 1.375em)'
+      },
+      '& h4': {
+        fontSize: 'var(--UT-label-size-subtitle-1, 1.125em)'
+      },
+      '& h5': {
+        fontSize: 'var(--UT-label-size-subtitle-2, 1em)',
+        margin: '0 0 var(--UT-label-markdown-margin-md, 12px) 0'
+      },
+      '& h6': {
+        color: grayTextColor,
+        fontSize: 'var(--UT-label-size-body, 1em)',
+        margin: '0 0 var(--UT-label-markdown-margin-md, 12px) 0'
+      },
+      '& table': {
+        border: "1px solid ".concat(theme.Palette[COLOR_THEMES.light][COLOR_SHADES.shade04]),
+        borderCollapse: 'collapse',
+        margin: '0 0 var(--UT-label-markdown-margin-xl, 24px) 0',
+        width: '100%'
+      },
+      '& th, & td': {
+        border: "1px solid ".concat(theme.Palette[COLOR_THEMES.light][COLOR_SHADES.shade04]),
+        padding: 'var(--UT-label-markdown-padding-sm, 8px) var(--UT-label-markdown-padding-md, 12px)',
+        textAlign: 'left'
+      },
+      '& th': {
+        backgroundColor: (theme.Palette.actions || theme.Palette)[COLOR_THEMES.negative][COLOR_SHADES.shade01],
+        color: grayTextColor,
+        fontWeight: WEIGHTS.medium
+      },
+      '& p': {
+        margin: '0 0 var(--UT-label-markdown-margin-md, 12px) 0'
+      },
+      '& ol': {
+        paddingLeft: 'var(--UT-label-markdown-padding-xl, 24px)',
+        textAlign: 'start'
+      },
+      '& ul, & ol': {
+        margin: '0 0 var(--UT-label-markdown-margin-xl, 24px) 0'
+      },
+      '& ul:not(.contains-task-list)': {
+        paddingLeft: 'var(--UT-label-markdown-padding-xl, 24px)',
+        textAlign: 'start'
+      },
+      '& pre': {
+        backgroundColor: theme.Palette[COLOR_THEMES.light][COLOR_SHADES.shade03],
+        borderRadius: 'var(--UT-radius-md, 0.5rem)',
+        fontSize: 'var(--UT-label-size-small, 0.875em)',
+        lineHeight: 'var(--UT-label-lh-small, 1.4)',
+        margin: '0 0 var(--UT-label-markdown-margin-xl, 24px) 0',
+        padding: 'var(--UT-label-markdown-padding-sm, 12px) var(--UT-label-markdown-padding-md, 16px)',
+        whiteSpace: 'pre-wrap'
+      },
+      '& dl': {
+        margin: '0 0 var(--UT-label-markdown-margin-xl, 24px) 0'
+      },
+      '& dd': {
+        fontSize: 'inherit',
+        margin: 0
+      },
+      '& dt': {
+        color: grayTextColor,
+        fontSize: VARIANTS_SIZES.small,
+        fontWeight: WEIGHTS.semibold
+      },
+      '& dt + dt, & dt + dd, & dd + dd': {
+        marginTop: 12
+      },
+      '& hr': {
+        borderColor: theme.Palette[COLOR_THEMES.gray][COLOR_SHADES.shade01],
+        borderTop: 0,
+        margin: 'var(--UT-label-markdown-margin-sm, 8px) 0 var(--UT-label-markdown-margin-xl, 24px)'
+      },
+      '& li + li': {
+        marginTop: 'var(--UT-label-markdown-margin-md, 12px)'
+      },
+      '& li > ul': {
+        marginTop: 'var(--UT-label-markdown-margin-sm, 8px)'
+      },
+      '& li::marker': {
+        color: theme.Palette[COLOR_THEMES.gray][COLOR_SHADES.shade01]
+      },
+      '& li > ul > li + li': {
+        marginTop: 'var(--UT-label-markdown-margin-sm, 8px)'
+      },
+      '& li p': {
+        margin: 0
+      },
+      '& sup': {
+        fontSize: 'inherit'
+      },
+      '& sup > a': {
+        fontSize: 'var(--UT-label-size-xsmall, 0.75em)'
+      },
+      '& img, & video, & audio': {
+        borderRadius: 'var(--UT-radius-md, 0.5rem)',
+        margin: '0 0 var(--UT-label-markdown-margin-xl, 24px) 0'
+      },
+      '& .contains-task-list': {
+        display: 'flex',
+        flexDirection: 'column',
+        gridGap: 'var(--gap-md, 12px)',
+        margin: '0 0 var(--UT-label-markdown-margin-xl, 24px) 0',
+        paddingLeft: 0,
+        '& li': {
+          margin: 0
+        }
+      },
+      '& :last-child': {
+        marginBottom: '0'
+      }
+    },
+    blockquote: {
+      color: grayTextColor
+    },
+    customFootnotes: {
+      '& span': {
+        color: grayTextColor
+      }
+    }
+  };
+};
+export const retrieveProps = (componentsProps, props) => ({
+  ...((componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.UTLabel) || {}),
+  ...props
+});

package/dist/esm/components/UTLoading/README.md

@@ -0,0 +1,85 @@
+# UTLoading
+
+Componente de carga con soporte de versiones. Muestra un indicador visual de carga mientras se obtienen datos. Soporta dos variantes internas: un Spinner circular y un LogoLoader con el logo/isologo del cliente.
+
+## Versiones
+
+### V0 (default)
+
+Comportamiento original. Se activa cuando no se pasa la prop `version` o cuando se pasa `version="V0"`.
+
+- `useUtilityLoading=false` → Spinner basado en Material UI `CircularProgress`
+- `useUtilityLoading=true` → AnimatedCircles: logo + 3 puntos animados, siempre full screen
+
+### V1
+
+Nueva versión con diseño actualizado. Se activa pasando `version="V1"`.
+
+- `useUtilityLoading=false` → Nuevo Spinner CSS puro con línea más gruesa
+- `useUtilityLoading=true` → LogoLoader: track de gradiente animado con logo del cliente, prop `fullScreen` para controlar comportamiento
+
+## Uso básico
+
+```jsx
+import { UTLoading } from '@widergy/energy-ui';
+
+// V0 (default — sin cambios)
+<UTLoading loading>
+  <MiContenido />
+</UTLoading>
+
+// V1 — Spinner
+<UTLoading version="V1" loading useUtilityLoading={false}>
+  <MiContenido />
+</UTLoading>
+
+// V1 — LogoLoader full screen
+<UTLoading
+  version="V1"
+  loading
+  useUtilityLoading
+  Logo="https://mi-dominio.com/logo.svg"
+  fullScreen
+/>
+
+// V1 — LogoLoader en contenedor
+<UTLoading
+  version="V1"
+  loading
+  useUtilityLoading
+  fullScreen={false}
+>
+  <MiContenido />
+</UTLoading>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `version` | `string` | `'V0'` | `'V0'` o `'V1'` — selecciona la versión a renderizar |
+| `loading` | `bool` | — | Muestra el loader cuando `true`, los `children` cuando `false` |
+| `children` | `node` | — | Contenido a mostrar cuando `loading=false` |
+| `useUtilityLoading` | `bool` | — | `true` → LogoLoader / AnimatedCircles; `false` → Spinner |
+| `fullScreen` | `bool` | `true` | Solo V1 LogoLoader. `true`: `position: fixed` full screen. `false`: adaptado al contenedor |
+| `Logo` | `string` | — | URL del asset SVG del logo/isologo del cliente |
+| `text` | `string` | `'Cargando el contenido...'` | Texto de carga. Pasar `''` para ocultarlo (solo V1) |
+| `dataTestId` | `string` | — | `data-testid` del elemento raíz (solo V1) |
+| `color` | `string` | — | Color CSS explícito del spinner (solo V0 Spinner) |
+| `size` | `number` | — | Tamaño del spinner en px (solo V0) |
+| `thickness` | `number` | — | Grosor del spinner (solo V0) |
+| `preventUnmount` | `bool` | `false` | Mantiene los children en el DOM cuando `loading=true` (Spinner) |
+| `className` | `string` | — | Clase adicional para el spinner (solo V0) |
+| `textClassName` | `string` | — | Clase del texto (solo V0) |
+| `wrapperClassName` | `string` | — | Clase del wrapper de children (Spinner) |
+| `classNames` | `object` | — | Objeto de clases para AnimatedCircles (solo V0) |
+
+## Design tokens — V1
+
+| Token | Descripción | Fallback |
+|-------|-------------|---------|
+| `--UT-loading-track-color-start` | Color inicial del gradiente del track | `identitySolidTone1` del cliente |
+| `--UT-loading-track-color-end` | Color final del gradiente del track | `identitySolidTone2` del cliente |
+| `--UT-loading-gap` | Gap entre track/spinner y label | `8px` |
+
+> Los tokens de color del gradiente se derivan automáticamente de los colores de identidad de cada cliente. El ajuste de valores exactos queda pendiente de confirmación de Diseño en Figma (CX-2398).

package/dist/esm/components/UTLoading/components/AnimatedCircles/constants.js

@@ -1 +1,2 @@
-export const DELAY_ANIMATION=1100;export const NUMBER_OF_CIRCLES=3;
+export const DELAY_ANIMATION = 1100;
+export const NUMBER_OF_CIRCLES = 3;

package/dist/esm/components/UTLoading/components/AnimatedCircles/index.js

@@ -1 +1,75 @@
-import React,{useEffect,useRef}from"react";import{bool,node,objectOf,string}from"prop-types";import WithTheme from"../../../WithTheme";import{DELAY_ANIMATION,NUMBER_OF_CIRCLES}from"./constants";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";const AnimatedCircles=_ref=>{let{children:children,classNames:classNames,classes:theme,color:color,loading:loading,Logo:Logo}=_ref;const animationFrameId=useRef(null);return useEffect(()=>{const circles=document.querySelectorAll(".".concat(styles.circle));if(loading){const onAnimate=function(delay){var _circles$currentIndex,_circles$currentIndex2,_circles$nextIndex,_circles$nextIndex2,_circles$nextNextInde;let currentIndex=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;const nextIndex=(currentIndex+1)%NUMBER_OF_CIRCLES,nextNextIndex=(currentIndex+2)%NUMBER_OF_CIRCLES;null===(_circles$currentIndex=circles[currentIndex])||void 0===_circles$currentIndex||_circles$currentIndex.classList.add(styles.translateDown),null===(_circles$currentIndex2=circles[currentIndex])||void 0===_circles$currentIndex2||_circles$currentIndex2.classList.remove(styles.translateUp,styles.opacityMedium,styles.opacityHigh),null===(_circles$nextIndex=circles[nextIndex])||void 0===_circles$nextIndex||_circles$nextIndex.classList.add(styles.translateDown,styles.opacityMedium),null===(_circles$nextIndex2=circles[nextIndex])||void 0===_circles$nextIndex2||_circles$nextIndex2.classList.remove(styles.translateUp,styles.opacityHigh),null===(_circles$nextNextInde=circles[nextNextIndex])||void 0===_circles$nextNextInde||_circles$nextNextInde.classList.add(styles.opacityHigh),animationFrameId.current=requestAnimationFrame(()=>{setTimeout(()=>{var _circles$currentIndex3,_circles$currentIndex4;null===(_circles$currentIndex3=circles[currentIndex])||void 0===_circles$currentIndex3||_circles$currentIndex3.classList.add(styles.translateUp,styles.opacityMedium),null===(_circles$currentIndex4=circles[currentIndex])||void 0===_circles$currentIndex4||_circles$currentIndex4.classList.remove(styles.translateDown),onAnimate(DELAY_ANIMATION,nextIndex)},delay)})};onAnimate()}return()=>{circles.forEach(circle=>{null==circle||circle.classList.remove(styles.translateUp,styles.translateDown,styles.opacityLow,styles.opacityMedium,styles.opacityHigh)}),cancelAnimationFrame(animationFrameId.current)}},[loading]),loading?React.createElement("div",{className:"".concat(styles.container," ").concat(null==classNames?void 0:classNames.container," ").concat(theme.containerBackgroundColor)},Logo&&React.createElement("img",{alt:"",className:styles.imageStyle,src:Logo}),React.createElement("div",{className:styles.circlesContainer},Array.from({length:NUMBER_OF_CIRCLES}).map((_,index)=>React.createElement("div",{key:index,className:"".concat(styles.circle," ").concat(theme.defaultCircleColor),style:{backgroundColor:color}})))):children};AnimatedCircles.propTypes={children:node,classNames:objectOf(string),classes:objectOf(string),color:string,loading:bool,Logo:string};export default WithTheme(retrieveStyle)(AnimatedCircles);
+/* eslint-disable react/no-array-index-key */
+import React, { useEffect, useRef } from 'react';
+import { bool, node, objectOf, string } from 'prop-types';
+import WithTheme from '../../../WithTheme';
+import { DELAY_ANIMATION, NUMBER_OF_CIRCLES } from './constants';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const AnimatedCircles = _ref => {
+  let {
+    children,
+    classNames,
+    classes: theme,
+    color,
+    loading,
+    Logo
+  } = _ref;
+  const animationFrameId = useRef(null);
+  useEffect(() => {
+    const circles = document.querySelectorAll(".".concat(styles.circle));
+    if (loading) {
+      const onAnimate = function (delay) {
+        var _circles$currentIndex, _circles$currentIndex2, _circles$nextIndex, _circles$nextIndex2, _circles$nextNextInde;
+        let currentIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+        const nextIndex = (currentIndex + 1) % NUMBER_OF_CIRCLES;
+        const nextNextIndex = (currentIndex + 2) % NUMBER_OF_CIRCLES;
+        (_circles$currentIndex = circles[currentIndex]) === null || _circles$currentIndex === void 0 || _circles$currentIndex.classList.add(styles.translateDown);
+        (_circles$currentIndex2 = circles[currentIndex]) === null || _circles$currentIndex2 === void 0 || _circles$currentIndex2.classList.remove(styles.translateUp, styles.opacityMedium, styles.opacityHigh);
+        (_circles$nextIndex = circles[nextIndex]) === null || _circles$nextIndex === void 0 || _circles$nextIndex.classList.add(styles.translateDown, styles.opacityMedium);
+        (_circles$nextIndex2 = circles[nextIndex]) === null || _circles$nextIndex2 === void 0 || _circles$nextIndex2.classList.remove(styles.translateUp, styles.opacityHigh);
+        (_circles$nextNextInde = circles[nextNextIndex]) === null || _circles$nextNextInde === void 0 || _circles$nextNextInde.classList.add(styles.opacityHigh);
+        animationFrameId.current = requestAnimationFrame(() => {
+          setTimeout(() => {
+            var _circles$currentIndex3, _circles$currentIndex4;
+            (_circles$currentIndex3 = circles[currentIndex]) === null || _circles$currentIndex3 === void 0 || _circles$currentIndex3.classList.add(styles.translateUp, styles.opacityMedium);
+            (_circles$currentIndex4 = circles[currentIndex]) === null || _circles$currentIndex4 === void 0 || _circles$currentIndex4.classList.remove(styles.translateDown);
+            onAnimate(DELAY_ANIMATION, nextIndex);
+          }, delay);
+        });
+      };
+      onAnimate();
+    }
+    return () => {
+      circles.forEach(circle => {
+        circle === null || circle === void 0 || circle.classList.remove(styles.translateUp, styles.translateDown, styles.opacityLow, styles.opacityMedium, styles.opacityHigh);
+      });
+      cancelAnimationFrame(animationFrameId.current);
+    };
+  }, [loading]);
+  return loading ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(classNames === null || classNames === void 0 ? void 0 : classNames.container, " ").concat(theme.containerBackgroundColor)
+  }, Logo && /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    className: styles.imageStyle,
+    src: Logo
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.circlesContainer
+  }, Array.from({
+    length: NUMBER_OF_CIRCLES
+  }).map((_, index) => /*#__PURE__*/React.createElement("div", {
+    key: index,
+    className: "".concat(styles.circle, " ").concat(theme.defaultCircleColor),
+    style: {
+      backgroundColor: color
+    }
+  })))) : children;
+};
+AnimatedCircles.propTypes = {
+  children: node,
+  classNames: objectOf(string),
+  classes: objectOf(string),
+  color: string,
+  loading: bool,
+  Logo: string
+};
+export default WithTheme(retrieveStyle)(AnimatedCircles);

package/dist/esm/components/UTLoading/components/AnimatedCircles/theme.js

@@ -1 +1,14 @@
-export const retrieveStyle=_ref=>{var _theme$Palette,_theme$Palette$action;let{theme:theme}=_ref;return{containerBackgroundColor:{backgroundColor:null===(_theme$Palette=theme.Palette)||void 0===_theme$Palette?void 0:_theme$Palette.light["01"]},defaultCircleColor:{backgroundColor:(null===(_theme$Palette$action=theme.Palette.actions)||void 0===_theme$Palette$action?void 0:_theme$Palette$action.neutral["04"])||theme.Palette.neutral["04"]}}};
+export const retrieveStyle = _ref => {
+  var _theme$Palette, _theme$Palette$action;
+  let {
+    theme
+  } = _ref;
+  return {
+    containerBackgroundColor: {
+      backgroundColor: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.light['01']
+    },
+    defaultCircleColor: {
+      backgroundColor: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.neutral['04']) || theme.Palette.neutral['04']
+    }
+  };
+};

package/dist/esm/components/UTLoading/components/Spinner/index.js

@@ -1 +1,42 @@
-import React,{Fragment}from"react";import{bool,string,number}from"prop-types";import Loading from"../../../Loading";const Spinner=_ref=>{let{children:children,className:className,loading:loading,preventUnmount:preventUnmount,size:size,text:text,textClassName:textClassName,thickness:thickness,wrapperClassName:wrapperClassName}=_ref;return React.createElement(React.Fragment,null,loading&&React.createElement(Loading,{className:className,size:size,text:text,textClassName:textClassName,thickness:thickness}),preventUnmount?React.createElement("div",{className:wrapperClassName,style:loading?{display:"none"}:{}},children):!loading&&children)};Spinner.defaultProps={preventUnmount:!1},Spinner.propTypes={className:string,loading:bool,preventUnmount:bool,size:number,text:string,textClassName:string,thickness:number,wrapperClassName:string};export default Spinner;
+import React, { Fragment } from 'react';
+import { bool, string, number } from 'prop-types';
+import Loading from '../../../Loading';
+const Spinner = _ref => {
+  let {
+    children,
+    className,
+    loading,
+    preventUnmount,
+    size,
+    text,
+    textClassName,
+    thickness,
+    wrapperClassName
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, loading && /*#__PURE__*/React.createElement(Loading, {
+    className: className,
+    size: size,
+    text: text,
+    textClassName: textClassName,
+    thickness: thickness
+  }), preventUnmount ? /*#__PURE__*/React.createElement("div", {
+    className: wrapperClassName,
+    style: loading ? {
+      display: 'none'
+    } : {}
+  }, children) : !loading && children);
+};
+Spinner.defaultProps = {
+  preventUnmount: false
+};
+Spinner.propTypes = {
+  className: string,
+  loading: bool,
+  preventUnmount: bool,
+  size: number,
+  text: string,
+  textClassName: string,
+  thickness: number,
+  wrapperClassName: string
+};
+export default Spinner;

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

@@ -1 +1,35 @@
-import React from"react";import{arrayOf,bool,node,number,string}from"prop-types";import V0 from"./versions/V0";import V1 from"./versions/V1";const COMPONENTS={V0:V0,V1:V1},UTLoading=_ref=>{let{version:version="V0",...props}=_ref;const Component=COMPONENTS[version]||V0;return React.createElement(Component,props)};UTLoading.propTypes={children:node,className:string,color:string,colors:arrayOf(string),dataTestId:string,fullScreen:bool,loading:bool,Logo:string,preventUnmount:bool,size:number,text:string,textClassName:string,thickness:number,useUtilityLoading:bool,version:string,wrapperClassName:string};export default UTLoading;
+import React from 'react';
+import { arrayOf, bool, node, number, string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const COMPONENTS = {
+  V0,
+  V1
+};
+const UTLoading = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = COMPONENTS[version] || V0;
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTLoading.propTypes = {
+  children: node,
+  className: string,
+  color: string,
+  colors: arrayOf(string),
+  dataTestId: string,
+  fullScreen: bool,
+  loading: bool,
+  Logo: string,
+  preventUnmount: bool,
+  size: number,
+  text: string,
+  textClassName: string,
+  thickness: number,
+  useUtilityLoading: bool,
+  version: string,
+  wrapperClassName: string
+};
+export default UTLoading;

package/dist/esm/components/UTLoading/versions/V0/index.js

@@ -1 +1,25 @@
-import React from"react";import{bool,node,number,string}from"prop-types";import AnimatedCircles from"../../components/AnimatedCircles";import Spinner from"../../components/Spinner";const V0=props=>{const{useUtilityLoading:useUtilityLoading}=props;return useUtilityLoading?React.createElement(AnimatedCircles,props):React.createElement(Spinner,props)};V0.propTypes={children:node,className:string,color:string,loading:bool,Logo:string,preventUnmount:bool,size:number,text:string,textClassName:string,thickness:number,useUtilityLoading:bool,wrapperClassName:string};export default V0;
+import React from 'react';
+import { bool, node, number, string } from 'prop-types';
+import AnimatedCircles from '../../components/AnimatedCircles';
+import Spinner from '../../components/Spinner';
+const V0 = props => {
+  const {
+    useUtilityLoading
+  } = props;
+  return useUtilityLoading ? /*#__PURE__*/React.createElement(AnimatedCircles, props) : /*#__PURE__*/React.createElement(Spinner, props);
+};
+V0.propTypes = {
+  children: node,
+  className: string,
+  color: string,
+  loading: bool,
+  Logo: string,
+  preventUnmount: bool,
+  size: number,
+  text: string,
+  textClassName: string,
+  thickness: number,
+  useUtilityLoading: bool,
+  wrapperClassName: string
+};
+export default V0;

package/dist/esm/components/UTLoading/versions/V1/components/LogoLoader/components/GradientTrack/index.js

@@ -1 +1,58 @@
-import React from"react";import{GLOW_FILTER_ID,GRADIENT_ID,INNER_CIRCLE_RADIUS,TRACK_CENTER,TRACK_RADIUS,TRACK_STROKE_WIDTH,TRACK_VIEW_BOX_SIZE}from"../../constants";import styles from"../../styles.module.scss";const GradientTrack=()=>React.createElement("svg",{className:styles.track,overflow:"visible",viewBox:"0 0 ".concat(TRACK_VIEW_BOX_SIZE," ").concat(TRACK_VIEW_BOX_SIZE),xmlns:"http://www.w3.org/2000/svg"},React.createElement("defs",null,React.createElement("linearGradient",{id:GRADIENT_ID,x1:"0%",x2:"100%",y1:"0%",y2:"100%"},React.createElement("stop",{offset:"0%",style:{stopColor:"var(--UT-loading-color-start, #25E0A6)"}}),React.createElement("stop",{offset:"100%",style:{stopColor:"var(--UT-loading-color-end, #20BBFC)"}})),React.createElement("filter",{id:GLOW_FILTER_ID,x:"-50%",y:"-50%",height:"200%",width:"200%"},React.createElement("feGaussianBlur",{result:"blur",stdDeviation:"12"}))),React.createElement("circle",{className:styles.trackGlow,cx:TRACK_CENTER,cy:TRACK_CENTER,filter:"url(#".concat(GLOW_FILTER_ID,")"),r:TRACK_RADIUS}),React.createElement("circle",{className:styles.trackBackground,cx:TRACK_CENTER,cy:TRACK_CENTER,r:TRACK_RADIUS,strokeWidth:TRACK_STROKE_WIDTH}),React.createElement("circle",{className:styles.innerFill,cx:TRACK_CENTER,cy:TRACK_CENTER,r:INNER_CIRCLE_RADIUS}),React.createElement("circle",{className:styles.trackGradient,cx:TRACK_CENTER,cy:TRACK_CENTER,r:TRACK_RADIUS,strokeWidth:TRACK_STROKE_WIDTH}));export default GradientTrack;
+import React from 'react';
+import { GLOW_FILTER_ID, GRADIENT_ID, INNER_CIRCLE_RADIUS, TRACK_CENTER, TRACK_RADIUS, TRACK_STROKE_WIDTH, TRACK_VIEW_BOX_SIZE } from '../../constants';
+import styles from '../../styles.module.scss';
+const GradientTrack = () => /*#__PURE__*/React.createElement("svg", {
+  className: styles.track,
+  overflow: "visible",
+  viewBox: "0 0 ".concat(TRACK_VIEW_BOX_SIZE, " ").concat(TRACK_VIEW_BOX_SIZE),
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  id: GRADIENT_ID,
+  x1: "0%",
+  x2: "100%",
+  y1: "0%",
+  y2: "100%"
+}, /*#__PURE__*/React.createElement("stop", {
+  offset: "0%",
+  style: {
+    stopColor: 'var(--UT-loading-color-start, #25E0A6)'
+  }
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: "100%",
+  style: {
+    stopColor: 'var(--UT-loading-color-end, #20BBFC)'
+  }
+})), /*#__PURE__*/React.createElement("filter", {
+  id: GLOW_FILTER_ID,
+  x: "-50%",
+  y: "-50%",
+  height: "200%",
+  width: "200%"
+}, /*#__PURE__*/React.createElement("feGaussianBlur", {
+  result: "blur",
+  stdDeviation: "12"
+}))), /*#__PURE__*/React.createElement("circle", {
+  className: styles.trackGlow,
+  cx: TRACK_CENTER,
+  cy: TRACK_CENTER,
+  filter: "url(#".concat(GLOW_FILTER_ID, ")"),
+  r: TRACK_RADIUS
+}), /*#__PURE__*/React.createElement("circle", {
+  className: styles.trackBackground,
+  cx: TRACK_CENTER,
+  cy: TRACK_CENTER,
+  r: TRACK_RADIUS,
+  strokeWidth: TRACK_STROKE_WIDTH
+}), /*#__PURE__*/React.createElement("circle", {
+  className: styles.innerFill,
+  cx: TRACK_CENTER,
+  cy: TRACK_CENTER,
+  r: INNER_CIRCLE_RADIUS
+}), /*#__PURE__*/React.createElement("circle", {
+  className: styles.trackGradient,
+  cx: TRACK_CENTER,
+  cy: TRACK_CENTER,
+  r: TRACK_RADIUS,
+  strokeWidth: TRACK_STROKE_WIDTH
+}));
+export default GradientTrack;

package/dist/esm/components/UTLoading/versions/V1/components/LogoLoader/constants.js

@@ -1 +1,8 @@
-export const DEFAULT_LOADING_TEXT="Cargando...";export const TRACK_VIEW_BOX_SIZE=120;export const TRACK_CENTER=60;export const TRACK_RADIUS=53;export const TRACK_STROKE_WIDTH=11;export const INNER_CIRCLE_RADIUS=47.5;export const GRADIENT_ID="UTLoadingTrackGradient";export const GLOW_FILTER_ID="UTLoadingGlow";
+export const DEFAULT_LOADING_TEXT = 'Cargando...';
+export const TRACK_VIEW_BOX_SIZE = 120;
+export const TRACK_CENTER = 60;
+export const TRACK_RADIUS = 53;
+export const TRACK_STROKE_WIDTH = 11;
+export const INNER_CIRCLE_RADIUS = 47.5;
+export const GRADIENT_ID = 'UTLoadingTrackGradient';
+export const GLOW_FILTER_ID = 'UTLoadingGlow';