@widergy/energy-ui 3.167.1 → 3.168.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.168.0](https://github.com/widergy/energy-ui/compare/v3.167.1...v3.168.0) (2026-06-18)
+
+
+### Features
+
+* [CX-2398] new ut loading version ([#815](https://github.com/widergy/energy-ui/issues/815)) ([b115b7e](https://github.com/widergy/energy-ui/commit/b115b7ecabd6e84e4917381f0d7876207602ffae))
+
 ## [3.167.1](https://github.com/widergy/energy-ui/compare/v3.167.0...v3.167.1) (2026-06-18)
 
 

package/dist/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/components/UTLoading/components/Spinner/index.js

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

package/dist/components/UTLoading/index.js

@@ -6,19 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _AnimatedCircles = _interopRequireDefault(require("./components/AnimatedCircles"));
-var _Spinner = _interopRequireDefault(require("./components/Spinner"));
+var _V = _interopRequireDefault(require("./versions/V0"));
+var _V2 = _interopRequireDefault(require("./versions/V1"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const UTLoading = props => {
-  const {
-    useUtilityLoading
-  } = props || {};
-  return useUtilityLoading ? /*#__PURE__*/_react.default.createElement(_AnimatedCircles.default, props) : /*#__PURE__*/_react.default.createElement(_Spinner.default, props);
+const COMPONENTS = {
+  V0: _V.default,
+  V1: _V2.default
+};
+const UTLoading = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = COMPONENTS[version] || _V.default;
+  return /*#__PURE__*/_react.default.createElement(Component, props);
 };
 UTLoading.propTypes = {
   children: _propTypes.node,
   className: _propTypes.string,
   color: _propTypes.string,
+  colors: (0, _propTypes.arrayOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
+  fullScreen: _propTypes.bool,
   loading: _propTypes.bool,
   Logo: _propTypes.string,
   preventUnmount: _propTypes.bool,
@@ -27,6 +36,7 @@ UTLoading.propTypes = {
   textClassName: _propTypes.string,
   thickness: _propTypes.number,
   useUtilityLoading: _propTypes.bool,
+  version: _propTypes.string,
   wrapperClassName: _propTypes.string
 };
 var _default = exports.default = UTLoading;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _AnimatedCircles = _interopRequireDefault(require("../../components/AnimatedCircles"));
+var _Spinner = _interopRequireDefault(require("../../components/Spinner"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const V0 = props => {
+  const {
+    useUtilityLoading
+  } = props;
+  return useUtilityLoading ? /*#__PURE__*/_react.default.createElement(_AnimatedCircles.default, props) : /*#__PURE__*/_react.default.createElement(_Spinner.default, props);
+};
+V0.propTypes = {
+  children: _propTypes.node,
+  className: _propTypes.string,
+  color: _propTypes.string,
+  loading: _propTypes.bool,
+  Logo: _propTypes.string,
+  preventUnmount: _propTypes.bool,
+  size: _propTypes.number,
+  text: _propTypes.string,
+  textClassName: _propTypes.string,
+  thickness: _propTypes.number,
+  useUtilityLoading: _propTypes.bool,
+  wrapperClassName: _propTypes.string
+};
+var _default = exports.default = V0;

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

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("../../constants");
+var _stylesModule = _interopRequireDefault(require("../../styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const GradientTrack = () => /*#__PURE__*/_react.default.createElement("svg", {
+  className: _stylesModule.default.track,
+  overflow: "visible",
+  viewBox: "0 0 ".concat(_constants.TRACK_VIEW_BOX_SIZE, " ").concat(_constants.TRACK_VIEW_BOX_SIZE),
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  id: _constants.GRADIENT_ID,
+  x1: "0%",
+  x2: "100%",
+  y1: "0%",
+  y2: "100%"
+}, /*#__PURE__*/_react.default.createElement("stop", {
+  offset: "0%",
+  style: {
+    stopColor: 'var(--UT-loading-color-start, #25E0A6)'
+  }
+}), /*#__PURE__*/_react.default.createElement("stop", {
+  offset: "100%",
+  style: {
+    stopColor: 'var(--UT-loading-color-end, #20BBFC)'
+  }
+})), /*#__PURE__*/_react.default.createElement("filter", {
+  id: _constants.GLOW_FILTER_ID,
+  x: "-50%",
+  y: "-50%",
+  height: "200%",
+  width: "200%"
+}, /*#__PURE__*/_react.default.createElement("feGaussianBlur", {
+  result: "blur",
+  stdDeviation: "12"
+}))), /*#__PURE__*/_react.default.createElement("circle", {
+  className: _stylesModule.default.trackGlow,
+  cx: _constants.TRACK_CENTER,
+  cy: _constants.TRACK_CENTER,
+  filter: "url(#".concat(_constants.GLOW_FILTER_ID, ")"),
+  r: _constants.TRACK_RADIUS
+}), /*#__PURE__*/_react.default.createElement("circle", {
+  className: _stylesModule.default.trackBackground,
+  cx: _constants.TRACK_CENTER,
+  cy: _constants.TRACK_CENTER,
+  r: _constants.TRACK_RADIUS,
+  strokeWidth: _constants.TRACK_STROKE_WIDTH
+}), /*#__PURE__*/_react.default.createElement("circle", {
+  className: _stylesModule.default.innerFill,
+  cx: _constants.TRACK_CENTER,
+  cy: _constants.TRACK_CENTER,
+  r: _constants.INNER_CIRCLE_RADIUS
+}), /*#__PURE__*/_react.default.createElement("circle", {
+  className: _stylesModule.default.trackGradient,
+  cx: _constants.TRACK_CENTER,
+  cy: _constants.TRACK_CENTER,
+  r: _constants.TRACK_RADIUS,
+  strokeWidth: _constants.TRACK_STROKE_WIDTH
+}));
+var _default = exports.default = GradientTrack;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TRACK_VIEW_BOX_SIZE = exports.TRACK_STROKE_WIDTH = exports.TRACK_RADIUS = exports.TRACK_CENTER = exports.INNER_CIRCLE_RADIUS = exports.GRADIENT_ID = exports.GLOW_FILTER_ID = exports.DEFAULT_LOADING_TEXT = void 0;
+const DEFAULT_LOADING_TEXT = exports.DEFAULT_LOADING_TEXT = 'Cargando...';
+const TRACK_VIEW_BOX_SIZE = exports.TRACK_VIEW_BOX_SIZE = 120;
+const TRACK_CENTER = exports.TRACK_CENTER = 60;
+const TRACK_RADIUS = exports.TRACK_RADIUS = 53;
+const TRACK_STROKE_WIDTH = exports.TRACK_STROKE_WIDTH = 11;
+const INNER_CIRCLE_RADIUS = exports.INNER_CIRCLE_RADIUS = 47.5;
+const GRADIENT_ID = exports.GRADIENT_ID = 'UTLoadingTrackGradient';
+const GLOW_FILTER_ID = exports.GLOW_FILTER_ID = 'UTLoadingGlow';

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../../../../../WithTheme"));
+var _testIds = require("../../../../../../constants/testIds");
+var _constants = require("./constants");
+var _GradientTrack = _interopRequireDefault(require("./components/GradientTrack"));
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  UTLoading: UTLoadingTestIds
+} = _testIds.TEST_IDS;
+const LogoLoader = _ref => {
+  let {
+    children,
+    classes,
+    dataTestId,
+    fullScreen,
+    loading,
+    Logo,
+    text = _constants.DEFAULT_LOADING_TEXT
+  } = _ref;
+  return loading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(fullScreen ? _stylesModule.default.fullScreen : _stylesModule.default.contained, " ").concat(classes.root),
+    "data-testid": dataTestId || UTLoadingTestIds.logoLoader
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.loaderWrapper
+  }, /*#__PURE__*/_react.default.createElement(_GradientTrack.default, null), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.innerCircle
+  }, Logo && /*#__PURE__*/_react.default.createElement("img", {
+    alt: "",
+    className: _stylesModule.default.logo,
+    src: Logo
+  }))), text && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.text
+  }, text)) : children;
+};
+LogoLoader.propTypes = {
+  children: _propTypes.node,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
+  fullScreen: _propTypes.bool,
+  loading: _propTypes.bool,
+  Logo: _propTypes.string,
+  text: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(LogoLoader);

package/dist/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/components/UTLoading/versions/V1/components/LogoLoader/theme.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+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'
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

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

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GRADIENT_ID = void 0;
+const GRADIENT_ID = exports.GRADIENT_ID = 'ut-spinner-gradient';

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

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _constants = require("../../constants");
+var _stylesModule = _interopRequireDefault(require("../../styles.module.scss"));
+var _constants2 = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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(_constants2.GRADIENT_ID, ")") : solidColor;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    className: _stylesModule.default.spinner,
+    viewBox: "0 0 ".concat(_constants.SPINNER_VIEW_BOX_SIZE, " ").concat(_constants.SPINNER_VIEW_BOX_SIZE),
+    xmlns: "http://www.w3.org/2000/svg"
+  }, useGradient && /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+    id: _constants2.GRADIENT_ID,
+    x1: "0%",
+    y1: "0%",
+    x2: "0%",
+    y2: "100%"
+  }, /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "0%",
+    stopColor: colors[0]
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "100%",
+    stopColor: colors[1]
+  }))), /*#__PURE__*/_react.default.createElement("circle", {
+    className: "".concat(_stylesModule.default.track, " ").concat(classes.track || ''),
+    cx: _constants.SPINNER_CENTER,
+    cy: _constants.SPINNER_CENTER,
+    r: _constants.SPINNER_RADIUS
+  }), /*#__PURE__*/_react.default.createElement("circle", {
+    className: "".concat(_stylesModule.default.arc, " ").concat(!arcStroke ? classes.arc || '' : ''),
+    cx: _constants.SPINNER_CENTER,
+    cy: _constants.SPINNER_CENTER,
+    r: _constants.SPINNER_RADIUS,
+    strokeDasharray: "".concat(_constants.SPINNER_ARC_LENGTH, " ").concat(_constants.SPINNER_CIRCUMFERENCE),
+    style: arcStroke ? {
+      stroke: arcStroke
+    } : undefined
+  }));
+};
+SpinnerTrack.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  colors: (0, _propTypes.arrayOf)(_propTypes.string)
+};
+var _default = exports.default = SpinnerTrack;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SPINNER_VIEW_BOX_SIZE = exports.SPINNER_RADIUS = exports.SPINNER_CIRCUMFERENCE = exports.SPINNER_CENTER = exports.SPINNER_ARC_LENGTH = exports.DEFAULT_LOADING_TEXT = void 0;
+const DEFAULT_LOADING_TEXT = exports.DEFAULT_LOADING_TEXT = 'Cargando...';
+const SPINNER_VIEW_BOX_SIZE = exports.SPINNER_VIEW_BOX_SIZE = 50;
+const SPINNER_CENTER = exports.SPINNER_CENTER = 25;
+const SPINNER_RADIUS = exports.SPINNER_RADIUS = 20;
+const SPINNER_CIRCUMFERENCE = exports.SPINNER_CIRCUMFERENCE = 126;
+const SPINNER_ARC_LENGTH = exports.SPINNER_ARC_LENGTH = 94;

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

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../../../../../WithTheme"));
+var _testIds = require("../../../../../../constants/testIds");
+var _constants = require("./constants");
+var _SpinnerTrack = _interopRequireDefault(require("./components/SpinnerTrack"));
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  UTLoading: UTLoadingTestIds
+} = _testIds.TEST_IDS;
+const Spinner = _ref => {
+  let {
+    children,
+    classes,
+    colors,
+    dataTestId,
+    loading,
+    preventUnmount = false,
+    text = _constants.DEFAULT_LOADING_TEXT,
+    wrapperClassName
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container,
+    "data-testid": dataTestId || UTLoadingTestIds.spinner
+  }, /*#__PURE__*/_react.default.createElement(_SpinnerTrack.default, {
+    classes: classes,
+    colors: colors
+  }), text && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.text
+  }, text)), preventUnmount ? /*#__PURE__*/_react.default.createElement("div", {
+    className: wrapperClassName,
+    style: loading ? {
+      display: 'none'
+    } : {}
+  }, children) : !loading && children);
+};
+Spinner.propTypes = {
+  children: _propTypes.node,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  colors: (0, _propTypes.arrayOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
+  loading: _propTypes.bool,
+  preventUnmount: _propTypes.bool,
+  text: _propTypes.string,
+  wrapperClassName: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(Spinner);

package/dist/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/components/UTLoading/versions/V1/components/Spinner/theme.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+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'
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_PROPS = exports.DEFAULT_LOADING_TEXT = void 0;
+const DEFAULT_LOADING_TEXT = exports.DEFAULT_LOADING_TEXT = 'Cargando...';
+const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  fullScreen: true,
+  text: DEFAULT_LOADING_TEXT
+};