@widergy/energy-ui 3.167.0 → 3.168.0

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

@@ -197,7 +197,8 @@ const UTDatePicker = _ref => {
       InputProps: {
         endAdornment
       },
-      onChange: handleTextChange
+      onChange: handleTextChange,
+      fullWidth: true
     },
     onBlur: handleTextBlur,
     onFocus: openCalendar,

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/Spinner/index.js

@@ -13,7 +13,7 @@ const Spinner = _ref => {
     thickness,
     wrapperClassName
   } = _ref;
-  return /*#__PURE__*/React.createElement(Fragment, null, loading && /*#__PURE__*/React.createElement(Loading, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, loading && /*#__PURE__*/React.createElement(Loading, {
     className: className,
     size: size,
     text: text,

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

@@ -1,17 +1,26 @@
 import React from 'react';
-import { bool, node, number, string } from 'prop-types';
-import AnimatedCircles from './components/AnimatedCircles';
-import Spinner from './components/Spinner';
-const UTLoading = props => {
-  const {
-    useUtilityLoading
-  } = props || {};
-  return useUtilityLoading ? /*#__PURE__*/React.createElement(AnimatedCircles, props) : /*#__PURE__*/React.createElement(Spinner, props);
+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,
@@ -20,6 +29,7 @@ UTLoading.propTypes = {
   textClassName: string,
   thickness: number,
   useUtilityLoading: bool,
+  version: string,
   wrapperClassName: string
 };
 export default UTLoading;

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

@@ -0,0 +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
+  } = 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

@@ -0,0 +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 = () => /*#__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

@@ -0,0 +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';

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { bool, node, objectOf, string } from 'prop-types';
+import UTLabel from '../../../../../UTLabel';
+import WithTheme from '../../../../../WithTheme';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+import { DEFAULT_LOADING_TEXT } from './constants';
+import GradientTrack from './components/GradientTrack';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const {
+  UTLoading: UTLoadingTestIds
+} = TEST_IDS;
+const LogoLoader = _ref => {
+  let {
+    children,
+    classes,
+    dataTestId,
+    fullScreen,
+    loading,
+    Logo,
+    text = DEFAULT_LOADING_TEXT
+  } = _ref;
+  return loading ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(fullScreen ? styles.fullScreen : styles.contained, " ").concat(classes.root),
+    "data-testid": dataTestId || UTLoadingTestIds.logoLoader
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.loaderWrapper
+  }, /*#__PURE__*/React.createElement(GradientTrack, null), /*#__PURE__*/React.createElement("div", {
+    className: styles.innerCircle
+  }, Logo && /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    className: styles.logo,
+    src: Logo
+  }))), text && /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.text
+  }, text)) : children;
+};
+LogoLoader.propTypes = {
+  children: node,
+  classes: objectOf(string),
+  dataTestId: string,
+  fullScreen: bool,
+  loading: bool,
+  Logo: string,
+  text: string
+};
+export default WithTheme(retrieveStyle)(LogoLoader);

package/dist/esm/components/UTLoading/versions/V1/components/LogoLoader/styles.module.scss

@@ -0,0 +1,107 @@
+@use '../../../../../../scss/variables/colors.module.scss' as *;
+
+$animation-duration: 1.4s;
+$fade-in-animation: fadeIn 0.7s ease-in-out forwards;
+$default-container-background-color: #ffffff;
+
+.contained {
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.container {
+  align-items: center;
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.fullScreen {
+  background-color: var(--light01, $default-container-background-color);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 999;
+}
+
+.loaderWrapper {
+  align-items: center;
+  animation: $fade-in-animation;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.track {
+  animation: spin $animation-duration linear infinite;
+  display: block;
+  height: var(--UT-loading-size, 7.5rem);
+  width: var(--UT-loading-size, 7.5rem);
+}
+
+.trackGlow {
+  fill: none;
+  opacity: 0.72;
+  stroke: url('#UTLoadingTrackGradient');
+  stroke-width: 18;
+}
+
+.trackBackground {
+  fill: none;
+  stroke: var(--light02);
+  stroke-width: 11;
+}
+
+.innerFill {
+  fill: var(--light01, $white);
+}
+
+.trackGradient {
+  fill: none;
+  stroke: url('#UTLoadingTrackGradient');
+  stroke-linecap: round;
+  stroke-width: 11;
+}
+
+.innerCircle {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.logo {
+  display: block;
+  height: var(--UT-loading-logo-width, 3.5rem);
+  object-fit: contain;
+  width: var(--UT-loading-logo-width, 3.5rem);
+}
+
+.text {
+  animation: $fade-in-animation;
+  font-size: var(--UT-loading-text-size, 0.875rem) !important;
+  margin-top: var(--UT-loading-gap, 1.5rem) !important;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,11 @@
+export const retrieveStyle = _ref => {
+  var _theme$Palette;
+  let {
+    theme
+  } = _ref;
+  return {
+    root: {
+      backgroundColor: ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.light) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette['01']) || '#FFFFFF'
+    }
+  };
+};

package/dist/esm/components/UTLoading/versions/V1/components/Spinner/components/SpinnerTrack/constants.js

@@ -0,0 +1 @@
+export const GRADIENT_ID = 'ut-spinner-gradient';

package/dist/esm/components/UTLoading/versions/V1/components/Spinner/components/SpinnerTrack/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { arrayOf, objectOf, string } from 'prop-types';
+import { SPINNER_ARC_LENGTH, SPINNER_CENTER, SPINNER_CIRCUMFERENCE, SPINNER_RADIUS, SPINNER_VIEW_BOX_SIZE } from '../../constants';
+import styles from '../../styles.module.scss';
+import { GRADIENT_ID } from './constants';
+const SpinnerTrack = _ref => {
+  let {
+    classes = {},
+    colors
+  } = _ref;
+  const useGradient = colors && colors.length >= 2;
+  const solidColor = !useGradient && colors && colors.length === 1 ? colors[0] : undefined;
+  const arcStroke = useGradient ? "url(#".concat(GRADIENT_ID, ")") : solidColor;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: styles.spinner,
+    viewBox: "0 0 ".concat(SPINNER_VIEW_BOX_SIZE, " ").concat(SPINNER_VIEW_BOX_SIZE),
+    xmlns: "http://www.w3.org/2000/svg"
+  }, useGradient && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: GRADIENT_ID,
+    x1: "0%",
+    y1: "0%",
+    x2: "0%",
+    y2: "100%"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: "0%",
+    stopColor: colors[0]
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "100%",
+    stopColor: colors[1]
+  }))), /*#__PURE__*/React.createElement("circle", {
+    className: "".concat(styles.track, " ").concat(classes.track || ''),
+    cx: SPINNER_CENTER,
+    cy: SPINNER_CENTER,
+    r: SPINNER_RADIUS
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "".concat(styles.arc, " ").concat(!arcStroke ? classes.arc || '' : ''),
+    cx: SPINNER_CENTER,
+    cy: SPINNER_CENTER,
+    r: SPINNER_RADIUS,
+    strokeDasharray: "".concat(SPINNER_ARC_LENGTH, " ").concat(SPINNER_CIRCUMFERENCE),
+    style: arcStroke ? {
+      stroke: arcStroke
+    } : undefined
+  }));
+};
+SpinnerTrack.propTypes = {
+  classes: objectOf(string),
+  colors: arrayOf(string)
+};
+export default SpinnerTrack;

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

@@ -0,0 +1,6 @@
+export const DEFAULT_LOADING_TEXT = 'Cargando...';
+export const SPINNER_VIEW_BOX_SIZE = 50;
+export const SPINNER_CENTER = 25;
+export const SPINNER_RADIUS = 20;
+export const SPINNER_CIRCUMFERENCE = 126;
+export const SPINNER_ARC_LENGTH = 94;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { arrayOf, bool, node, objectOf, string } from 'prop-types';
+import UTLabel from '../../../../../UTLabel';
+import WithTheme from '../../../../../WithTheme';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+import { DEFAULT_LOADING_TEXT } from './constants';
+import SpinnerTrack from './components/SpinnerTrack';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const {
+  UTLoading: UTLoadingTestIds
+} = TEST_IDS;
+const Spinner = _ref => {
+  let {
+    children,
+    classes,
+    colors,
+    dataTestId,
+    loading,
+    preventUnmount = false,
+    text = DEFAULT_LOADING_TEXT,
+    wrapperClassName
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, loading && /*#__PURE__*/React.createElement("div", {
+    className: styles.container,
+    "data-testid": dataTestId || UTLoadingTestIds.spinner
+  }, /*#__PURE__*/React.createElement(SpinnerTrack, {
+    classes: classes,
+    colors: colors
+  }), text && /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.text
+  }, text)), preventUnmount ? /*#__PURE__*/React.createElement("div", {
+    className: wrapperClassName,
+    style: loading ? {
+      display: 'none'
+    } : {}
+  }, children) : !loading && children);
+};
+Spinner.propTypes = {
+  children: node,
+  classes: objectOf(string),
+  colors: arrayOf(string),
+  dataTestId: string,
+  loading: bool,
+  preventUnmount: bool,
+  text: string,
+  wrapperClassName: string
+};
+export default WithTheme(retrieveStyle)(Spinner);

package/dist/esm/components/UTLoading/versions/V1/components/Spinner/styles.module.scss

@@ -0,0 +1,39 @@
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+}
+
+.spinner {
+  animation: spin 0.8s linear infinite;
+  display: block;
+  flex-shrink: 0;
+  height: var(--UT-loading-size, 85px);
+  width: var(--UT-loading-size, 85px);
+}
+
+.track {
+  fill: none;
+  opacity: 0.15;
+  stroke-width: 4;
+}
+
+.arc {
+  fill: none;
+  stroke-dasharray: 94 126;
+  stroke-linecap: round;
+  stroke-width: 4;
+}
+
+.text {
+  margin-top: var(--UT-loading-gap, 1.5rem) !important;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/esm/components/UTLoading/versions/V1/components/Spinner/theme.js

@@ -0,0 +1,14 @@
+export const retrieveStyle = _ref => {
+  var _theme$Palette, _theme$Palette2;
+  let {
+    theme
+  } = _ref;
+  return {
+    arc: {
+      stroke: ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.accent) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette['05']) || '#0136E7'
+    },
+    track: {
+      stroke: ((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 || (_theme$Palette2 = _theme$Palette2.accent) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2['05']) || '#0136E7'
+    }
+  };
+};

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

@@ -0,0 +1,5 @@
+export const DEFAULT_LOADING_TEXT = 'Cargando...';
+export const DEFAULT_PROPS = {
+  fullScreen: true,
+  text: DEFAULT_LOADING_TEXT
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { arrayOf, bool, node, string } from 'prop-types';
+import LogoLoader from './components/LogoLoader';
+import Spinner from './components/Spinner';
+const V1 = props => {
+  const {
+    useUtilityLoading
+  } = props;
+  return useUtilityLoading ? /*#__PURE__*/React.createElement(LogoLoader, props) : /*#__PURE__*/React.createElement(Spinner, props);
+};
+V1.propTypes = {
+  children: node,
+  colors: arrayOf(string),
+  dataTestId: string,
+  fullScreen: bool,
+  loading: bool,
+  Logo: string,
+  preventUnmount: bool,
+  text: string,
+  useUtilityLoading: bool,
+  wrapperClassName: string
+};
+export default V1;

package/dist/esm/components/UTLoading/versions/V1/stories/UTLoadingV1.mdx

@@ -0,0 +1,67 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/blocks';
+import * as UTLoadingV1Stories from './UTLoadingV1.stories';
+
+<Meta of={UTLoadingV1Stories} />
+
+# UTLoading — V1
+
+Nueva versión del componente de carga. Incluye un Spinner custom con línea más gruesa y un LogoLoader con track de gradiente animado usando los colores de identidad del cliente.
+
+## Cómo activar V1
+
+Pasar la prop `version="V1"` al componente. Sin esta prop el comportamiento es idéntico al actual (V0).
+
+```jsx
+<UTLoading version="V1" loading useUtilityLoading={false} />
+```
+
+## Spinner
+
+Spinner circular CSS puro. Muestra una línea circular con track de fondo y arco superior en el color de acento del tema. Soporta un label de texto opcional debajo.
+
+<Canvas of={UTLoadingV1Stories.SpinnerPlayground} />
+<Controls of={UTLoadingV1Stories.SpinnerPlayground} />
+
+## LogoLoader
+
+Loader con track circular de gradiente de 2 colores (colores de identidad del cliente). El logo/isologo del cliente se muestra centrado con una animación de escala sincronizada con la rotación del track.
+
+### Full Screen
+
+Cuando `fullScreen=true` el contenedor ocupa toda la pantalla con `position: fixed` y `z-index: 999`.
+
+<Canvas of={UTLoadingV1Stories.LogoLoaderFullScreen} />
+
+### En contenedor
+
+Cuando `fullScreen=false` el loader se adapta al contenedor padre y se centra dentro de él.
+
+<Canvas of={UTLoadingV1Stories.LogoLoaderEnContenedor} />
+
+### Con logo del cliente
+
+<Canvas of={UTLoadingV1Stories.LogoLoaderConLogo} />
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `version` | `string` | `'V0'` | `'V0'` o `'V1'` — versión a renderizar |
+| `loading` | `bool` | — | Muestra el loader cuando `true`, los `children` cuando `false` |
+| `useUtilityLoading` | `bool` | — | `true` → LogoLoader; `false` → Spinner |
+| `fullScreen` | `bool` | `true` | Full screen (`position: fixed`) o adaptado al contenedor |
+| `Logo` | `string` | — | URL del SVG del logo/isologo del cliente |
+| `text` | `string` | `'Cargando...'` | Texto de carga. Pasar `''` para ocultarlo |
+| `dataTestId` | `string` | — | `data-testid` del elemento raíz |
+| `preventUnmount` | `bool` | `false` | Mantiene los children en el DOM cuando `loading=true` (solo Spinner) |
+| `wrapperClassName` | `string` | — | Clase del wrapper de children (solo Spinner) |
+
+## Design tokens
+
+| Token | Propiedad | Fallback |
+|-------|-----------|---------|
+| `--UT-loading-track-color-start` | Color inicial del gradiente del track | Color de identidad 1 del cliente |
+| `--UT-loading-track-color-end` | Color final del gradiente del track | Color de identidad 2 del cliente |
+| `--UT-loading-gap` | Gap entre track/spinner y label | `8px` |
+
+> Los tokens de color del gradiente se inyectan automáticamente desde los colores de identidad del cliente (`identitySolidTone1` y `identitySolidTone2`).