@widergy/energy-ui 3.167.1 → 3.169.0

package/dist/components/UTSelect/versions/V1/components/ListboxComponent/index.js

@@ -17,6 +17,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ListboxComponent = _ref => {
   let {
+    CustomRow,
     dataTestId,
     filteredOptions,
     handleSelectionChange,
@@ -38,6 +39,7 @@ const ListboxComponent = _ref => {
       maxHeight: maxHeightValid
     }
   }, /*#__PURE__*/_react.default.createElement(_UTCheckList.default, {
+    CustomRow: CustomRow,
     dataTestId: dataTestId,
     horizontalSpacing: horizontalSpacing,
     isSimple: !multiple,
@@ -53,6 +55,7 @@ const ListboxComponent = _ref => {
   }));
 };
 ListboxComponent.propTypes = {
+  CustomRow: _propTypes.elementType,
   dataTestId: _propTypes.string,
   filteredOptions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     name: _propTypes.string,

package/dist/components/UTSelect/versions/V1/index.js

@@ -30,6 +30,7 @@ const UTSelect = _ref => {
     autocompleteProps = {},
     className,
     clearable = true,
+    CustomRow,
     dataTestId,
     disabled,
     disableFilterOptions = false,
@@ -172,6 +173,7 @@ const UTSelect = _ref => {
     variant: variant
   }), [alwaysShowPlaceholder, disabled, error, handleInputBlur, handleInputFocus, leftAdornments, placeholder, rightAdornments, searchTerm]);
   const listBoxProps = (0, _react.useMemo)(() => ({
+    CustomRow,
     dataTestId: listDataTestId,
     filteredOptions,
     handleSelectionChange,
@@ -180,7 +182,7 @@ const UTSelect = _ref => {
     noMatchesText,
     value,
     ...listProps
-  }), [filteredOptions, handleSelectionChange, multiple, noMatchesText, value, listProps]);
+  }), [CustomRow, filteredOptions, handleSelectionChange, multiple, noMatchesText, value, listProps]);
   const noOptionsTextComponent = /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: _stylesModule.default.noOptionsLabel,
     colorTheme: "gray"
@@ -227,6 +229,7 @@ UTSelect.propTypes = {
   autocompleteProps: _propTypes.object,
   className: _propTypes.string,
   clearable: _propTypes.bool,
+  CustomRow: _propTypes.elementType,
   dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
   disableFilterOptions: _propTypes.bool,

package/dist/constants/testIds.js

@@ -169,6 +169,10 @@ const TEST_IDS = exports.TEST_IDS = {
   wrapperObservation: {
     actionIcon: 'wrapperObservation.actionIcon.'
   },
+  UTLoading: {
+    logoLoader: 'UTLoading.logoLoader',
+    spinner: 'UTLoading.spinner'
+  },
   UTSnackbar: {
     closeButton: "".concat(ID_CONSTANTS.UT_SNACKBAR, ".closeButton"),
     description: "".concat(ID_CONSTANTS.UT_SNACKBAR, ".description"),

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;