@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/esm/components/UTLabel/components/Markdown/customPlugins/remarkDeflist.js

@@ -0,0 +1,148 @@
+import { visit } from 'unist-util-visit';
+import { COMPONENTS_NAMES, NODE_TYPES } from '../constants';
+
+/**
+ * remarkDeflist
+ *
+ * Convierte bloques como:
+ *
+ * Term 1
+ * : Description 1
+ * : Description 2
+ *
+ * Term 2
+ * : Desc A
+ *
+ * en un nodo <dl> con <dt> y <dd>
+ */
+export default function remarkDeflist() {
+  return tree => {
+    visit(tree, NODE_TYPES.PARAGRAPH, (node, index, parent) => {
+      if (!parent || !Array.isArray(parent.children)) return;
+
+      // Check if this paragraph contains definition list items
+      // A valid definition list has lines that start with ':' at the beginning (after whitespace)
+      const hasDefinitionItems = node.children.some(child => {
+        if ('value' in child) {
+          const lines = child.value.split('\n');
+          return lines.some(l => l.trim().startsWith(':'));
+        }
+        return false;
+      });
+      if (!hasDefinitionItems) return;
+
+      // Extract text content to check structure
+      const raw = node.children.map(ch => 'value' in ch ? ch.value : '').join('');
+      const lines = raw.split('\n');
+
+      // Validate that this is a proper definition list structure
+      // A valid definition list should have at least one term followed by descriptions
+      let hasValidStructure = false;
+      let hasTerms = false;
+      let hasDescriptions = false;
+      for (let i = 0; i < lines.length; i += 1) {
+        const trimmed = lines[i].trim();
+        if (trimmed && !trimmed.startsWith(':')) {
+          hasTerms = true;
+        }
+        if (trimmed.startsWith(':')) {
+          hasDescriptions = true;
+        }
+      }
+      hasValidStructure = hasTerms && hasDescriptions;
+      if (!hasValidStructure) return;
+
+      // Build items while preserving node structure
+      const items = [];
+      let currentTerm = null;
+      const processLine = trimmed => {
+        if (trimmed && !trimmed.startsWith(':')) {
+          // This is a term
+          if (currentTerm) {
+            items.push({
+              term: currentTerm,
+              desc: []
+            });
+          }
+          currentTerm = trimmed;
+        } else if (trimmed.startsWith(':')) {
+          // This is a description
+          if (!currentTerm) {
+            currentTerm = '';
+          }
+          const itemExists = items.some(item => item.term === currentTerm);
+          if (!itemExists) {
+            // Only add if we haven't already added this term
+            if (currentTerm) {
+              items.push({
+                term: currentTerm,
+                desc: []
+              });
+              currentTerm = null;
+            }
+          }
+          const descText = trimmed.replace(/^:\s*/, '');
+          if (items.length > 0) {
+            items[items.length - 1].desc.push(descText);
+          }
+        }
+      };
+      for (let i = 0; i < node.children.length; i += 1) {
+        const child = node.children[i];
+        if ('value' in child) {
+          const childLines = child.value.split('\n');
+          for (let lineIdx = 0; lineIdx < childLines.length; lineIdx += 1) {
+            const line = childLines[lineIdx];
+            const trimmed = line.trim();
+            processLine(trimmed);
+          }
+        }
+      }
+      if (currentTerm) {
+        items.push({
+          term: currentTerm,
+          desc: []
+        });
+      }
+
+      // Only process if we have valid items
+      if (items.length === 0) return;
+      const dlNode = {
+        type: COMPONENTS_NAMES.DEFINITION_LIST,
+        data: {
+          hName: COMPONENTS_NAMES.DEFINITION_LIST
+        },
+        children: []
+      };
+      for (let j = 0; j < items.length; j += 1) {
+        const {
+          term,
+          desc
+        } = items[j];
+        dlNode.children.push({
+          type: COMPONENTS_NAMES.DEFINITION_TERM,
+          data: {
+            hName: COMPONENTS_NAMES.DEFINITION_TERM
+          },
+          children: [{
+            type: NODE_TYPES.TEXT,
+            value: term
+          }]
+        });
+        for (let k = 0; k < desc.length; k += 1) {
+          dlNode.children.push({
+            type: COMPONENTS_NAMES.DEFINITION_DESCRIPTION,
+            data: {
+              hName: COMPONENTS_NAMES.DEFINITION_DESCRIPTION
+            },
+            children: [{
+              type: NODE_TYPES.TEXT,
+              value: desc[k]
+            }]
+          });
+        }
+      }
+      parent.children.splice(index, 1, dlNode);
+    });
+  };
+}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { bool, func, objectOf, string } from 'prop-types';
+import ReactMarkdown from 'react-markdown';
+import { getMarkdownPlugins } from './utils';
+const Markdown = _ref => {
+  let {
+    children,
+    classes,
+    markdownExtended,
+    markdownRenderers
+  } = _ref;
+  const {
+    components,
+    disallowedElements,
+    rehypePlugins,
+    remarkPlugins
+  } = getMarkdownPlugins(classes, markdownExtended, markdownRenderers);
+  return /*#__PURE__*/React.createElement(ReactMarkdown
+  /* eslint-disable react/no-children-prop */, {
+    children: children,
+    components: components,
+    disallowedElements: disallowedElements,
+    remarkPlugins: remarkPlugins,
+    rehypePlugins: rehypePlugins,
+    skipHtml: false,
+    unwrapDisallowed: true
+  });
+};
+Markdown.propTypes = {
+  classes: objectOf(string),
+  markdownExtended: bool,
+  markdownRenderers: objectOf(func)
+};
+export default Markdown;

package/dist/esm/components/UTLabel/components/Markdown/utils.js

@@ -0,0 +1,39 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { BASE_CONFIG, EXTENDED_CONFIG } from './constants';
+const wrapComponents = (components, classes, markdownExtended, markdownRenderers) => Object.entries(components).reduce((wrapped, _ref) => {
+  let [key, Component] = _ref;
+  wrapped[key] = props => /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    classes: classes,
+    customHandler: markdownRenderers === null || markdownRenderers === void 0 ? void 0 : markdownRenderers[key],
+    markdownExtended: markdownExtended
+  }));
+  return wrapped;
+}, {});
+export const getMarkdownPlugins = function (classes, markdownExtended) {
+  let markdownRenderers = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const {
+    components,
+    disallowedElements,
+    remarkPlugins,
+    rehypePlugins
+  } = markdownExtended ? EXTENDED_CONFIG : BASE_CONFIG;
+  const wrappedComponents = wrapComponents(components, classes, markdownExtended, markdownRenderers);
+  return {
+    components: {
+      ...markdownRenderers,
+      ...wrappedComponents
+    },
+    disallowedElements,
+    rehypePlugins,
+    remarkPlugins
+  };
+};
+export const cleanElementProps = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  if (isEmpty(props)) return {};
+  if (props.markdownExtended) delete props.markdownExtended;
+  if (props.customHandler) delete props.customHandler;
+  return props;
+};

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

@@ -0,0 +1,69 @@
+import { COLOR_THEMES } from '../../constants/Palette';
+export const VARIANTS_NAMES = {
+  TITLE1: 'title1',
+  TITLE2: 'title2',
+  TITLE3: 'title3',
+  SUBTITLE1: 'subtitle1',
+  SUBTITLE2: 'subtitle2',
+  BODY: 'body',
+  SMALL: 'small',
+  XSMALL: 'xsmall',
+  TH: 'th',
+  TD: 'td'
+};
+export const VARIANTS = {
+  [VARIANTS_NAMES.TITLE1]: 'h1',
+  [VARIANTS_NAMES.TITLE2]: 'h2',
+  [VARIANTS_NAMES.TITLE3]: 'h3',
+  [VARIANTS_NAMES.SUBTITLE1]: 'h4',
+  [VARIANTS_NAMES.SUBTITLE2]: 'h5',
+  [VARIANTS_NAMES.BODY]: 'div',
+  [VARIANTS_NAMES.SMALL]: 'div',
+  [VARIANTS_NAMES.XSMALL]: 'div',
+  [VARIANTS_NAMES.TH]: 'th',
+  [VARIANTS_NAMES.TD]: 'td'
+};
+export const VARIANTS_SIZES = {
+  [VARIANTS_NAMES.TITLE1]: 'var(--UT-label-size-title-1, 1.875rem)',
+  [VARIANTS_NAMES.TITLE2]: 'var(--UT-label-size-title-2, 1.5rem)',
+  [VARIANTS_NAMES.TITLE3]: 'var(--UT-label-size-title-3, 1.375rem)',
+  [VARIANTS_NAMES.SUBTITLE1]: 'var(--UT-label-size-subtitle-1, 1.125rem)',
+  [VARIANTS_NAMES.SUBTITLE2]: 'var(--UT-label-size-subtitle-2, 1rem)',
+  [VARIANTS_NAMES.BODY]: 'var(--UT-label-size-body, 1rem)',
+  [VARIANTS_NAMES.SMALL]: 'var(--UT-label-size-small, 0.875rem)',
+  [VARIANTS_NAMES.XSMALL]: 'var(--UT-label-size-xsmall, 0.75rem)',
+  [VARIANTS_NAMES.TH]: 'var(--UT-label-size-body, 1rem)',
+  [VARIANTS_NAMES.TD]: 'var(--UT-label-size-body, 1rem)'
+};
+export const VARIANTS_LINE_HEIGHT = {
+  [VARIANTS_NAMES.TITLE1]: 'var(--UT-label-lh-heading, 100%)',
+  [VARIANTS_NAMES.TITLE2]: 'var(--UT-label-lh-heading, 100%)',
+  [VARIANTS_NAMES.TITLE3]: 'var(--UT-label-lh-heading, 100%)',
+  [VARIANTS_NAMES.SUBTITLE1]: 'var(--UT-label-lh-heading, 100%)',
+  [VARIANTS_NAMES.SUBTITLE2]: 'var(--UT-label-lh-body, 1.375rem)',
+  [VARIANTS_NAMES.BODY]: 'var(--UT-label-lh-body, 1.375rem)',
+  [VARIANTS_NAMES.SMALL]: 'var(--UT-label-lh-small, 1.25rem)',
+  [VARIANTS_NAMES.XSMALL]: 'var(--UT-label-lh-xsmall, 1.125rem)',
+  [VARIANTS_NAMES.TH]: 'var(--UT-label-lh-body, 1.375rem)',
+  [VARIANTS_NAMES.TD]: 'var(--UT-label-lh-body, 1.375rem)'
+};
+export const WEIGHTS = {
+  thin: 'var(--UT-label-weight-thin, 100)',
+  extralight: 'var(--UT-label-weight-extralight, 200)',
+  light: 'var(--UT-label-weight-light, 300)',
+  regular: 'var(--UT-label-weight-regular, 400)',
+  medium: 'var(--UT-label-weight-medium, 500)',
+  semibold: 'var(--UT-label-weight-semibold, 600)',
+  bold: 'var(--UT-label-weight-bold, 700)',
+  extrabold: 'var(--UT-label-weight-extrabold, 800)',
+  black: 'var(--UT-label-weight-black, 900)'
+};
+export const DEFAULT_PROPS = {
+  colorTheme: COLOR_THEMES.dark,
+  field: {},
+  markdownExtended: false,
+  markdownRenderers: {},
+  variant: 'body',
+  weight: 'regular',
+  withMarkdown: false
+};

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

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

package/dist/esm/components/UTLabel/styles.module.scss

@@ -0,0 +1,15 @@
+.leftAlignment {
+  text-align: left;
+}
+
+.centerAlignment {
+  text-align: center;
+}
+
+.rightAlignment {
+  text-align: right;
+}
+
+.justifyAlignment {
+  text-align: justify;
+}

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

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

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

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

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

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