@widergy/energy-ui 3.167.0 → 3.168.0

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
+};

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _LogoLoader = _interopRequireDefault(require("./components/LogoLoader"));
+var _Spinner = _interopRequireDefault(require("./components/Spinner"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const V1 = props => {
+  const {
+    useUtilityLoading
+  } = props;
+  return useUtilityLoading ? /*#__PURE__*/_react.default.createElement(_LogoLoader.default, props) : /*#__PURE__*/_react.default.createElement(_Spinner.default, props);
+};
+V1.propTypes = {
+  children: _propTypes.node,
+  colors: (0, _propTypes.arrayOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
+  fullScreen: _propTypes.bool,
+  loading: _propTypes.bool,
+  Logo: _propTypes.string,
+  preventUnmount: _propTypes.bool,
+  text: _propTypes.string,
+  useUtilityLoading: _propTypes.bool,
+  wrapperClassName: _propTypes.string
+};
+var _default = exports.default = V1;

package/dist/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`).

package/dist/components/UTLoading/versions/V1/stories/UTLoadingV1.stories.js

@@ -0,0 +1,369 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TestSite = exports.SpinnerSinTexto = exports.SpinnerPlayground = exports.SpinnerConGradiente = exports.LogoLoaderSinTexto = exports.LogoLoaderFullScreen = exports.LogoLoaderEnContenedor = exports.LogoLoaderConLogo = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("../../../index"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  args: {
+    loading: true,
+    version: 'V1'
+  },
+  argTypes: {
+    colors: {
+      control: 'object',
+      description: 'Array de colores para el Spinner. 2 colores → gradiente lineal. 1 color → sólido. Sin prop → usa el color del tema.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string[]'
+        }
+      }
+    },
+    dataTestId: {
+      control: 'text',
+      description: 'Identificador para pruebas automatizadas.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    fullScreen: {
+      control: 'boolean',
+      description: 'Cuando es true el loader ocupa toda la pantalla (position fixed). Cuando es false se adapta al contenedor padre.',
+      table: {
+        defaultValue: {
+          summary: 'true'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Controla si se muestra el loader o los children.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    Logo: {
+      control: 'text',
+      description: 'URL del asset SVG del logo/isologo del cliente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    text: {
+      control: 'text',
+      description: 'Texto de carga opcional.',
+      table: {
+        defaultValue: {
+          summary: 'Cargando...'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    useUtilityLoading: {
+      control: 'boolean',
+      description: 'Cuando es true muestra el LogoLoader. Cuando es false muestra el Spinner nuevo.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    version: {
+      control: 'select',
+      description: 'Versión del componente a utilizar.',
+      options: ['V0', 'V1'],
+      table: {
+        defaultValue: {
+          summary: 'V0'
+        },
+        type: {
+          summary: "'V0' | 'V1'"
+        }
+      }
+    }
+  },
+  component: _index.default,
+  parameters: {
+    controls: {
+      exclude: ['classes', 'className', 'color', 'size', 'textClassName', 'thickness', 'wrapperClassName']
+    },
+    docs: {
+      description: {
+        component: 'UTLoading V1 — Nueva versión del componente de carga. Incluye un Spinner custom con línea gruesa y un LogoLoader con track de gradiente animado y logo del cliente.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTLoading/V1'
+};
+const SpinnerPlayground = exports.SpinnerPlayground = {
+  args: {
+    loading: true,
+    text: 'Cargando...',
+    useUtilityLoading: false,
+    version: 'V1'
+  },
+  name: 'Spinner — Playground',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Spinner circular custom con línea gruesa y label de texto opcional.'
+      }
+    }
+  }
+};
+const SpinnerConGradiente = exports.SpinnerConGradiente = {
+  args: {
+    colors: ['var(--UT-loading-color-start)', 'var(--UT-loading-color-end)'],
+    loading: true,
+    text: 'Cargando...',
+    useUtilityLoading: false,
+    version: 'V1'
+  },
+  decorators: [Story => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, "\n          :root {\n            --identitySolidTone3: #4D97FA;\n            --identitySolidTone2: #7BB8FF;\n            --UT-loading-color-start: var(--identitySolidTone3);\n            --UT-loading-color-end: var(--identitySolidTone2);\n          }\n        "), /*#__PURE__*/_react.default.createElement(Story, null))],
+  name: 'Spinner — Con gradiente',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Spinner con gradiente lineal. Se pasan 2 colores vía prop `colors`. En producción se inyectan desde los design tokens `--UT-loading-color-start` y `--UT-loading-color-end`.'
+      }
+    }
+  }
+};
+const SpinnerSinTexto = exports.SpinnerSinTexto = {
+  args: {
+    loading: true,
+    text: '',
+    useUtilityLoading: false,
+    version: 'V1'
+  },
+  name: 'Spinner — Sin texto',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Spinner sin label de texto.'
+      }
+    }
+  }
+};
+const LogoLoaderFullScreen = exports.LogoLoaderFullScreen = {
+  args: {
+    fullScreen: true,
+    loading: true,
+    Logo: 'https://utilitygo-demo-qa-ev.widergydev.com/favicon.png',
+    text: '',
+    useUtilityLoading: true,
+    version: 'V1'
+  },
+  name: 'LogoLoader — Full Screen',
+  parameters: {
+    docs: {
+      description: {
+        story: 'LogoLoader en modo full screen (position fixed, z-index 999). Muestra el track con gradiente de identidad del cliente rotando.'
+      }
+    }
+  }
+};
+const LogoLoaderEnContenedor = exports.LogoLoaderEnContenedor = {
+  args: {
+    fullScreen: false,
+    loading: true,
+    Logo: 'https://utilitygo-demo-qa-ev.widergydev.com/favicon.png',
+    text: 'Cargando...',
+    useUtilityLoading: true,
+    version: 'V1'
+  },
+  decorators: [Story => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      border: '1px dashed #C1C7D0',
+      height: '300px',
+      position: 'relative',
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(Story, null))],
+  name: 'LogoLoader — En contenedor',
+  parameters: {
+    docs: {
+      description: {
+        story: 'LogoLoader adaptado al contenedor padre (fullScreen=false). Se centra dentro del div contenedor.'
+      }
+    }
+  }
+};
+const LogoLoaderConLogo = exports.LogoLoaderConLogo = {
+  args: {
+    fullScreen: false,
+    loading: true,
+    Logo: 'https://utilitygo-demo-qa-ev.widergydev.com/favicon.png',
+    text: 'Cargando...',
+    useUtilityLoading: true,
+    version: 'V1'
+  },
+  decorators: [Story => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      border: '1px dashed #C1C7D0',
+      height: '300px',
+      position: 'relative',
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(Story, null))],
+  name: 'LogoLoader — Con logo',
+  parameters: {
+    docs: {
+      description: {
+        story: 'LogoLoader con logo SVG del cliente centrado dentro del track.'
+      }
+    }
+  }
+};
+const LogoLoaderSinTexto = exports.LogoLoaderSinTexto = {
+  args: {
+    fullScreen: false,
+    loading: true,
+    Logo: 'https://utilitygo-demo-qa-ev.widergydev.com/favicon.png',
+    text: '',
+    useUtilityLoading: true,
+    version: 'V1'
+  },
+  decorators: [Story => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      border: '1px dashed #C1C7D0',
+      height: '300px',
+      position: 'relative',
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(Story, null))],
+  name: 'LogoLoader — Sin texto',
+  parameters: {
+    docs: {
+      description: {
+        story: 'LogoLoader sin label de texto debajo del track.'
+      }
+    }
+  }
+};
+const TestSite = exports.TestSite = {
+  render: () => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '32px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      fontFamily: 'sans-serif',
+      fontSize: '12px',
+      marginBottom: '8px'
+    }
+  }, "Spinner \u2014 loading true"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '120px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    loading: true,
+    useUtilityLoading: false,
+    version: "V1"
+  }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      fontFamily: 'sans-serif',
+      fontSize: '12px',
+      marginBottom: '8px'
+    }
+  }, "Spinner \u2014 sin texto"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '120px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    loading: true,
+    text: "",
+    useUtilityLoading: false,
+    version: "V1"
+  }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      fontFamily: 'sans-serif',
+      fontSize: '12px',
+      marginBottom: '8px'
+    }
+  }, "Spinner \u2014 loading false (muestra children)"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '120px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    loading: false,
+    useUtilityLoading: false,
+    version: "V1"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Contenido cargado")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      fontFamily: 'sans-serif',
+      fontSize: '12px',
+      marginBottom: '8px'
+    }
+  }, "LogoLoader \u2014 en contenedor (fullScreen=false)"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      border: '1px dashed #C1C7D0',
+      height: '200px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    fullScreen: false,
+    loading: true,
+    Logo: "https://utilitygo-demo-qa-ev.widergydev.com/favicon.png",
+    useUtilityLoading: true,
+    version: "V1"
+  }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      fontFamily: 'sans-serif',
+      fontSize: '12px',
+      marginBottom: '8px'
+    }
+  }, "LogoLoader \u2014 loading false (muestra children)"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '80px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    fullScreen: false,
+    loading: false,
+    useUtilityLoading: true,
+    version: "V1"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Contenido cargado"))))),
+  name: 'Test Site',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Casos de prueba para el Storybook Test Runner.'
+      }
+    }
+  }
+};

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/UTDatePicker/assets/calendar.svg

@@ -1,14 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="18px" height="20px" viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <path d="M8,15 C8.55,15 9,15.45 9,16 C9,16.55 8.55,17 8,17 C7.45,17 7,16.55 7,16 C7,15.45 7.45,15 8,15 Z M16,15 C16.55,15 17,15.45 17,16 C17,16.55 16.55,17 16,17 L16,17 L12,17 C11.45,17 11,16.55 11,16 C11,15.45 11.45,15 12,15 L12,15 Z M18,20 L6,20 C5.449,20 5,19.551 5,19 L5,13 L19,13 L19,19 C19,19.551 18.551,20 18,20 M6,6 L7,6 L7,7 C7,7.55 7.45,8 8,8 C8.55,8 9,7.55 9,7 L9,6 L15,6 L15,7 C15,7.55 15.45,8 16,8 C16.55,8 17,7.55 17,7 L17,6 L18,6 C18.551,6 19,6.449 19,7 L19,11 L5,11 L5,7 C5,6.449 5.449,6 6,6 M18,4 L17,4 L17,3 C17,2.45 16.55,2 16,2 C15.45,2 15,2.45 15,3 L15,4 L9,4 L9,3 C9,2.45 8.55,2 8,2 C7.45,2 7,2.45 7,3 L7,4 L6,4 C4.346,4 3,5.346 3,7 L3,19 C3,20.654 4.346,22 6,22 L18,22 C19.654,22 21,20.654 21,19 L21,7 C21,5.346 19.654,4 18,4" id="calendario"></path>
-    </defs>
-    <g id="Final" stroke="none" stroke-width="1" fill="current" fill-rule="evenodd">
-        <g id="Group" transform="translate(-3.000000, -2.000000)">
-            <mask id="mask-2" fill="white">
-                <use xlink:href="#calendario"></use>
-            </mask>
-            <use id="🎨-Icon-Сolor" fill="current" fill-rule="nonzero" xlink:href="#calendario"></use>
-        </g>
-    </g>
-</svg>
+<svg width="18" height="20" viewBox="0 0 18 20" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="nonzero" transform="translate(-3 -2)" d="M8,15 C8.55,15 9,15.45 9,16 C9,16.55 8.55,17 8,17 C7.45,17 7,16.55 7,16 C7,15.45 7.45,15 8,15 Z M16,15 C16.55,15 17,15.45 17,16 C17,16.55 16.55,17 16,17 L16,17 L12,17 C11.45,17 11,16.55 11,16 C11,15.45 11.45,15 12,15 L12,15 Z M18,20 L6,20 C5.449,20 5,19.551 5,19 L5,13 L19,13 L19,19 C19,19.551 18.551,20 18,20 M6,6 L7,6 L7,7 C7,7.55 7.45,8 8,8 C8.55,8 9,7.55 9,7 L9,6 L15,6 L15,7 C15,7.55 15.45,8 16,8 C16.55,8 17,7.55 17,7 L17,6 L18,6 C18.551,6 19,6.449 19,7 L19,11 L5,11 L5,7 C5,6.449 5.449,6 6,6 M18,4 L17,4 L17,3 C17,2.45 16.55,2 16,2 C15.45,2 15,2.45 15,3 L15,4 L9,4 L9,3 C9,2.45 8.55,2 8,2 C7.45,2 7,2.45 7,3 L7,4 L6,4 C4.346,4 3,5.346 3,7 L3,19 C3,20.654 4.346,22 6,22 L18,22 C19.654,22 21,20.654 21,19 L21,7 C21,5.346 19.654,4 18,4"/>
+</svg>

package/dist/esm/components/UTDatePicker/versions/V0/assets/calendar.svg

@@ -1,14 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="18px" height="20px" viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <path d="M8,15 C8.55,15 9,15.45 9,16 C9,16.55 8.55,17 8,17 C7.45,17 7,16.55 7,16 C7,15.45 7.45,15 8,15 Z M16,15 C16.55,15 17,15.45 17,16 C17,16.55 16.55,17 16,17 L16,17 L12,17 C11.45,17 11,16.55 11,16 C11,15.45 11.45,15 12,15 L12,15 Z M18,20 L6,20 C5.449,20 5,19.551 5,19 L5,13 L19,13 L19,19 C19,19.551 18.551,20 18,20 M6,6 L7,6 L7,7 C7,7.55 7.45,8 8,8 C8.55,8 9,7.55 9,7 L9,6 L15,6 L15,7 C15,7.55 15.45,8 16,8 C16.55,8 17,7.55 17,7 L17,6 L18,6 C18.551,6 19,6.449 19,7 L19,11 L5,11 L5,7 C5,6.449 5.449,6 6,6 M18,4 L17,4 L17,3 C17,2.45 16.55,2 16,2 C15.45,2 15,2.45 15,3 L15,4 L9,4 L9,3 C9,2.45 8.55,2 8,2 C7.45,2 7,2.45 7,3 L7,4 L6,4 C4.346,4 3,5.346 3,7 L3,19 C3,20.654 4.346,22 6,22 L18,22 C19.654,22 21,20.654 21,19 L21,7 C21,5.346 19.654,4 18,4" id="calendario"></path>
-    </defs>
-    <g id="Final" stroke="none" stroke-width="1" fill="current" fill-rule="evenodd">
-        <g id="Group" transform="translate(-3.000000, -2.000000)">
-            <mask id="mask-2" fill="white">
-                <use xlink:href="#calendario"></use>
-            </mask>
-            <use id="🎨-Icon-Сolor" fill="current" fill-rule="nonzero" xlink:href="#calendario"></use>
-        </g>
-    </g>
-</svg>
+<svg width="18" height="20" viewBox="0 0 18 20" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="nonzero" transform="translate(-3 -2)" d="M8,15 C8.55,15 9,15.45 9,16 C9,16.55 8.55,17 8,17 C7.45,17 7,16.55 7,16 C7,15.45 7.45,15 8,15 Z M16,15 C16.55,15 17,15.45 17,16 C17,16.55 16.55,17 16,17 L16,17 L12,17 C11.45,17 11,16.55 11,16 C11,15.45 11.45,15 12,15 L12,15 Z M18,20 L6,20 C5.449,20 5,19.551 5,19 L5,13 L19,13 L19,19 C19,19.551 18.551,20 18,20 M6,6 L7,6 L7,7 C7,7.55 7.45,8 8,8 C8.55,8 9,7.55 9,7 L9,6 L15,6 L15,7 C15,7.55 15.45,8 16,8 C16.55,8 17,7.55 17,7 L17,6 L18,6 C18.551,6 19,6.449 19,7 L19,11 L5,11 L5,7 C5,6.449 5.449,6 6,6 M18,4 L17,4 L17,3 C17,2.45 16.55,2 16,2 C15.45,2 15,2.45 15,3 L15,4 L9,4 L9,3 C9,2.45 8.55,2 8,2 C7.45,2 7,2.45 7,3 L7,4 L6,4 C4.346,4 3,5.346 3,7 L3,19 C3,20.654 4.346,22 6,22 L18,22 C19.654,22 21,20.654 21,19 L21,7 C21,5.346 19.654,4 18,4"/>
+</svg>

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

@@ -21,22 +21,15 @@ import { mergeClasses } from '../../../../utils/classesUtils';
 import UTValidation from '../../../UTValidation';
 import { formatErrorToValidation } from '../../../UTValidation/utils';
 var CalendarIcon = function CalendarIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
-    d: "M8 15c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm8 0c.55 0 1 .45 1 1s-.45 1-1 1h-4c-.55 0-1-.45-1-1s.45-1 1-1Zm2 5H6c-.551 0-1-.449-1-1v-6h14v6c0 .551-.449 1-1 1M6 6h1v1c0 .55.45 1 1 1s1-.45 1-1V6h6v1c0 .55.45 1 1 1s1-.45 1-1V6h1c.551 0 1 .449 1 1v4H5V7c0-.551.449-1 1-1m12-2h-1V3c0-.55-.45-1-1-1s-1 .45-1 1v1H9V3c0-.55-.45-1-1-1s-1 .45-1 1v1H6C4.346 4 3 5.346 3 7v12c0 1.654 1.346 3 3 3h12c1.654 0 3-1.346 3-3V7c0-1.654-1.346-3-3-3",
-    id: "a"
-  })), /*#__PURE__*/React.createElement("use", {
-    fillRule: "nonzero",
-    xlinkHref: "#a",
-    transform: "translate(-3 -2)",
-    fill: "current"
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M5 13c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm8 0c.55 0 1 .45 1 1s-.45 1-1 1H9c-.55 0-1-.45-1-1s.45-1 1-1Zm2 5H3c-.551 0-1-.449-1-1v-6h14v6c0 .551-.449 1-1 1M3 4h1v1c0 .55.45 1 1 1s1-.45 1-1V4h6v1c0 .55.45 1 1 1s1-.45 1-1V4h1c.551 0 1 .449 1 1v4H2V5c0-.551.449-1 1-1m12-2h-1V1c0-.55-.45-1-1-1s-1 .45-1 1v1H6V1c0-.55-.45-1-1-1S4 .45 4 1v1H3C1.346 2 0 3.346 0 5v12c0 1.654 1.346 3 3 3h12c1.654 0 3-1.346 3-3V5c0-1.654-1.346-3-3-3"
   }));
 };
 CalendarIcon.defaultProps = {
   width: "18",
   height: "20",
   viewBox: "0 0 18 20",
-  xmlns: "http://www.w3.org/2000/svg",
-  xmlnsXlink: "http://www.w3.org/1999/xlink"
+  xmlns: "http://www.w3.org/2000/svg"
 };
 import Day from './components/Day';
 import { retrieveStyle, materialTheme } from './theme';