@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTLabel/README.md

@@ -0,0 +1,179 @@
+# UTLabel
+
+Component used for displaying text values and markdown.
+
+## Props
+
+
+| Name              | Type   | Default                                  | Description                                                                                                                                                                                                                 |
+| ------------------- | -------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| align             | string |                                    | Alignment of the text content. Accepts values like 'left', 'center', 'right', or 'justify'.                                                                                                                                 |
+| className         | string |                                          | Additional classes.                                                                                                                                                                                                         |
+| classes           | string |                                          | Classes returned by UTLabel's own[theme](./theme.js#L40) `retrieveStyle`.                                                                                                                                                   |
+| colorTheme        | string | 'primary'                                | Color theme to style the UTLabel. Has to be defined in the proyect theme.[Example](#colortheme).                                                                                                                            |
+| markdownExtended  | bool   | false                                    | ⚠️ Requires`withMarkdown` to be set to `true` <br />Activates all markdown plugins for extended markdown support.                                                                                                            |
+| markdownRenderers | object | [MARKDOWN_RENDERERS](./constants.js#L36) | ⚠️ Requires`withMarkdown` to be set to `true` <br />Object mapping tag names to React components. The keys in components are HTML equivalents for the things you write with markdown [List of tags](#markdown-renderers). |
+| title             | string |                                          | [Title global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title).                                                                                                                        |
+| variant           | string | 'body'                                   | Defines html component to use. For a list of available variants, check [here](#variants). Font sizes can be overwritten (⚠️ for the entire proyect) through the proyect's theme.                                           |
+| weight            | string | 'regular'                                | Defines font-weight to be used. For a list of available options, check [here](#font-weights).                                                                                                                                |
+| withMarkdown      | bool   | false                                    | Tells the component whether or not to render text inside as markdown.                                                                                                                                                       |
+
+## Examples
+
+### colorTheme
+
+```js
+UTLabel: {
+    colorThemes: {
+      primary: {
+        color: Colors.primary
+      },
+    }
+}
+```
+
+### Use
+
+```JSX
+<UTLabel colorTheme='primary'>Your text here</UTLabel>
+```
+
+### Markdown renderers
+
+
+| markdown                  | component                                |
+| --------------------------- | ------------------------------------------ |
+| `blockquote`              | `blockquote`                             |
+| `break`                   | `br`                                     |
+| `code`, `inlineCode`      | `code`, `pre`**\***                      |
+| `definition`              | **†**                                   |
+| `emphasis`                | `em`                                     |
+| `heading`                 | `h1`, `h2`, `h3`, `h4`, `h5`, `h6`**§** |
+| `image`, `imageReference` | `img`**†**                              |
+| `link`, `linkReference`   | `a`**†**                                |
+| `list`                    | `ol`, `ul`**¶**                         |
+| `listItem`                | `li`                                     |
+| `paragraph`               | `p`                                      |
+| `strong`                  | `strong`                                 |
+| `text`                    |                                          |
+| `thematicBreak`           | `hr`                                     |
+
+- **\*** It’s possible to differentiate between code based on the `inline`
+  prop.
+  Block code is also wrapped in a `pre`
+- **†** Resource (`[text](url)`) and reference (`[text][id]`) style links and
+  images (and their definitions) are now resolved and treated the same
+- **§** It’s possible to differentiate between heading based on the `level`
+  prop
+- **¶** It’s possible to differentiate between lists based on the `ordered`
+  prop
+
+Example
+
+```JSX
+const markdownRenderers = {
+   a: ({ href, children }) => ( <a href={href}>{children}</a> );
+};
+
+<UTLabel withMarkdown markdownRenderers={markdownRenderers}>
+
+```
+
+<details>
+<summary>Show list of props for each component</summary>
+
+**Custom Handler Behavior:**
+If an element already has internal handling within UTLabel (such as `a`, `blockquote`, `h2`, etc.) and you pass a `customHandler` that returns `null`, the component will use its default internal behavior. This allows you to selectively override rendering for specific cases while falling back to the built-in logic when needed.
+
+The keys in components are HTML equivalents for the things you write with
+markdown (such as `h1` for `# heading`)**†**
+
+**†** Normally, in markdown, those are: `a`, `blockquote`, `code`, `em`, `h1`,
+`h2`, `h3`, `h4`, `h5`, `h6`, `hr`, `img`, `li`, `ol`, `p`, `pre`, `strong`, and
+`ul`.
+
+The props that are passed are what you probably would expect: an `a` (link) will
+get `href` (and `title`) props, and `img` (image) an `src` (and `title`), etc.
+There are some extra props passed.
+
+- `code`
+  - `inline` (`boolean?`)
+    — set to `true` for inline code
+  - `className` (`string?`)
+    — set to `language-js` or so when using ` ```js`
+- `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
+  - `level` (`number` beween 1 and 6)
+    — heading rank
+- `input` (when using [`remark-gfm`][gfm])
+  - `checked` (`boolean`)
+    — whether the item is checked
+  - `disabled` (`true`)
+  - `type` (`'checkbox'`)
+- `li`
+  - `index` (`number`)
+    — number of preceding items (so first gets `0`, etc.)
+  - `ordered` (`boolean`)
+    — whether the parent is an `ol` or not
+  - `checked` (`boolean?`)
+    — `null` normally, `boolean` when using [`remark-gfm`][gfm]’s tasklists
+  - `className` (`string?`)
+    — set to `task-list-item` when using [`remark-gfm`][gfm] and the
+    item1 is a tasklist
+- `ol`, `ul`
+  - `depth` (`number`)
+    — number of ancestral lists (so first gets `0`, etc.)
+  - `ordered` (`boolean`)
+    — whether it’s an `ol` or not
+  - `className` (`string?`)
+    — set to `contains-task-list` when using [`remark-gfm`][gfm] and the
+    list contains one or more tasklists
+- `td`, `th` (when using [`remark-gfm`][gfm])
+  - `style` (`Object?`)
+    — something like `{textAlign: 'left'}` depending on how the cell is
+    aligned
+  - `isHeader` (`boolean`)
+    — whether it’s a `th` or not
+- `tr` (when using [`remark-gfm`][gfm])
+  - `isHeader` (`boolean`)
+    — whether it’s in the `thead` or not
+
+Every component will receive a `node` (`Object`).
+This is the original [hast](https://github.com/syntax-tree/hast) element being
+turned into a React element.
+
+Every element will receive a `key` (`string`).
+See [React’s docs](https://reactjs.org/docs/lists-and-keys.html#keys) for more
+info.
+
+</details>
+
+### variants
+
+
+| Variant   | Component | Default font size |
+| ----------- | ----------- | ------------------- |
+| title1    | h1        | 30px              |
+| title2    | h2        | 24px              |
+| title3    | h3        | 22px              |
+| subtitle1 | h4        | 18px              |
+| subtitle2 | h5        | 16px              |
+| body      | span      | 16px              |
+| small     | span      | 14px              |
+| xsmall    | span      | 13px              |
+| th        | th        | 16px              |
+| td        | td        | 16px              |
+
+### font-weights
+
+
+| Name       | Weight |
+| ------------ | -------- |
+| thin       | 100    |
+| extralight | 200    |
+| light      | 300    |
+| regular    | 400    |
+| medium     | 500    |
+| semibold   | 600    |
+| bold       | 700    |
+| extrabold  | 800    |
+| black      | 900    |

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

@@ -0,0 +1,227 @@
+import React from 'react';
+import { joinArgTypes } from 'stories/utils';
+import { COLOR_SHADES, COLOR_THEMES } from '../../constants/Palette';
+import { DEFAULT_PROPS, VARIANTS, WEIGHTS } from './constants';
+import UTLabel from '.';
+export default {
+  args: {
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'Texto a mostrar en el componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    colorTheme: {
+      control: 'select',
+      description: 'Determina el color de la paleta a usar.',
+      options: Object.values(COLOR_THEMES),
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.colorTheme
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    shade: {
+      control: 'select',
+      description: 'Determina el tono de la prop `colorTheme` a usar.',
+      options: Object.values(COLOR_SHADES),
+      table: {
+        defaultValue: {
+          summary: '05'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    markdownExtended: {
+      control: 'boolean',
+      description: 'Habilita todos los plugins de markdown',
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.markdownExtended
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    markdownRenderers: {
+      control: false,
+      description: 'Mapper de componentes HTML a componentes react. Para más detalles revisar la sección Markdown Renderers',
+      table: {
+        defaultValue: {
+          summary: 'Detalles',
+          detail: 'Por defecto hay un renderer para elementos <a> que presetea algunos atributos de la etiqueta.'
+        },
+        type: {
+          summary: 'Object'
+        }
+      }
+    },
+    variant: {
+      control: 'select',
+      description: 'Determina el componente HTML a renderizar.',
+      options: Object.keys(VARIANTS),
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.variant
+        },
+        type: {
+          summary: joinArgTypes(Object.keys(VARIANTS))
+        }
+      }
+    },
+    weight: {
+      control: 'select',
+      description: 'Determina el valor del atributo `font-weight`.',
+      options: Object.keys(WEIGHTS),
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.weight
+        },
+        type: {
+          summary: joinArgTypes(Object.keys(WEIGHTS))
+        }
+      }
+    },
+    withMarkdown: {
+      control: 'boolean',
+      description: 'Determina si renderizar el contenido como markdown o texto plano.',
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.withMarkdown
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    className: {
+      control: false,
+      description: 'Clase que se le pasa al elemento contenedor.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  component: UTLabel,
+  parameters: {
+    controls: {
+      exclude: ['classes', 'field', 'style', 'title']
+    },
+    docs: {
+      description: {
+        component: 'Este componente se usa para renderizar texto. Consume la paleta de colores. Acepta markdown para formatear texto.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTLabel'
+};
+export const Default = {
+  args: {
+    colorTheme: DEFAULT_PROPS.colorTheme,
+    markdownExtended: DEFAULT_PROPS.markdownExtended,
+    variant: DEFAULT_PROPS.variant,
+    weight: DEFAULT_PROPS.weight,
+    withMarkdown: DEFAULT_PROPS.withMarkdown,
+    shade: '05'
+  },
+  name: 'Playground'
+};
+const BODY_TEXT = 'El sistema de diseño provee tokens de tipografía que garantizan consistencia visual en todos los productos. Cada nivel de heading tiene un line-height proporcional a su tamaño para una lectura cómoda.';
+const SMALL_TEXT = 'Los valores de consumo se actualizan cada 15 minutos y se almacenan durante 24 meses para análisis histórico.';
+const XSMALL_TEXT = 'Última actualización: 26/05/2026 · Fuente: medidor digital · ID lectura: 00487-A';
+const HEADINGS = [{
+  variant: 'title1',
+  label: 'Title 1 — H1',
+  heading: 'Gestión de energía para utilities modernas que operan en múltiples regiones del país'
+}, {
+  variant: 'title2',
+  label: 'Title 2 — H2',
+  heading: 'Seguimiento de consumo en tiempo real con integración a sistemas de medición inteligente'
+}, {
+  variant: 'title3',
+  label: 'Title 3 — H3',
+  heading: 'Configuración de alertas, notificaciones y umbrales de consumo por categoría de usuario'
+}, {
+  variant: 'subtitle1',
+  label: 'Subtitle 1 — H4',
+  heading: 'Parámetros de medición avanzada para clientes residenciales de alta demanda energética'
+}, {
+  variant: 'subtitle2',
+  label: 'Subtitle 2 — H5',
+  heading: 'Detalles del período de facturación correspondiente al bimestre actual del servicio eléctrico'
+}];
+export const HeadingBlocks = {
+  name: 'Bloques heading + texto',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Cada categoría de heading junto a párrafos de body, small y xsmall para verificar jerarquía y line-height.'
+      }
+    }
+  },
+  render: () => {
+    const pageStyle = {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '3rem',
+      maxWidth: '560px',
+      padding: '2rem'
+    };
+    const blockStyle = {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '0.75rem',
+      borderLeft: '3px solid #e2e8f0',
+      paddingLeft: '1rem'
+    };
+    const chipStyle = {
+      fontSize: '0.7rem',
+      color: '#94a3b8',
+      fontFamily: 'monospace',
+      marginBottom: '0.25rem'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: pageStyle
+    }, HEADINGS.map(_ref => {
+      let {
+        variant,
+        label,
+        heading
+      } = _ref;
+      return /*#__PURE__*/React.createElement("div", {
+        key: variant,
+        style: blockStyle
+      }, /*#__PURE__*/React.createElement("span", {
+        style: chipStyle
+      }, label), /*#__PURE__*/React.createElement(UTLabel, {
+        variant: variant
+      }, heading), /*#__PURE__*/React.createElement(UTLabel, {
+        variant: "small"
+      }, BODY_TEXT), /*#__PURE__*/React.createElement(UTLabel, {
+        variant: "small"
+      }, SMALL_TEXT), /*#__PURE__*/React.createElement(UTLabel, {
+        variant: "xsmall"
+      }, XSMALL_TEXT));
+    }));
+  }
+};

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

@@ -1 +1,40 @@
-import React,{memo}from"react";import{objectOf,string}from"prop-types";import WithCustomHandler from"../WithCustomHandler";import styles from"./styles.module.scss";const BlockQuote=_ref=>{let{children:children,classes:classes}=_ref;const lines=[];return Array.isArray(children)&&children.forEach(child=>{var _child$props;if("string"==typeof child){const parts=child.split("\n").filter(line=>line.trim());lines.push(...parts)}else if("p"===(null==child?void 0:child.type)&&null!=child&&null!==(_child$props=child.props)&&void 0!==_child$props&&_child$props.children){const pChildren=child.props.children;Array.isArray(pChildren)?pChildren.forEach(pChild=>{"string"==typeof pChild&&pChild.trim()&&lines.push(pChild.trim())}):"string"==typeof pChildren&&pChildren.trim()&&lines.push(pChildren.trim())}}),React.createElement("div",{className:"".concat(styles.blockquote," ").concat(null==classes?void 0:classes.blockquote)},lines.map(line=>React.createElement("div",{key:line},line)))};BlockQuote.propTypes={classes:objectOf(string)};export default memo(WithCustomHandler(BlockQuote));
+import React, { memo } from 'react';
+import { objectOf, string } from 'prop-types';
+import WithCustomHandler from '../WithCustomHandler';
+import styles from './styles.module.scss';
+const BlockQuote = _ref => {
+  let {
+    children,
+    classes
+  } = _ref;
+  const lines = [];
+  if (Array.isArray(children)) {
+    children.forEach(child => {
+      var _child$props;
+      if (typeof child === 'string') {
+        const parts = child.split('\n').filter(line => line.trim());
+        lines.push(...parts);
+      } else if ((child === null || child === void 0 ? void 0 : child.type) === 'p' && child !== null && child !== void 0 && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.children) {
+        const pChildren = child.props.children;
+        if (Array.isArray(pChildren)) {
+          pChildren.forEach(pChild => {
+            if (typeof pChild === 'string' && pChild.trim()) {
+              lines.push(pChild.trim());
+            }
+          });
+        } else if (typeof pChildren === 'string' && pChildren.trim()) {
+          lines.push(pChildren.trim());
+        }
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.blockquote, " ").concat(classes === null || classes === void 0 ? void 0 : classes.blockquote)
+  }, lines.map(line => /*#__PURE__*/React.createElement("div", {
+    key: line
+  }, line)));
+};
+BlockQuote.propTypes = {
+  classes: objectOf(string)
+};
+export default /*#__PURE__*/memo(WithCustomHandler(BlockQuote));

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

@@ -1 +1,11 @@
-export const EXTENSION_ICON={doc:"IconFileTypeDoc",docx:"IconFileTypeDocx",jpg:"IconFileTypeJpg",pdf:"IconFileTypePdf",txt:"IconFileTypeTxt",xls:"IconFileTypeXls",xml:"IconFileTypeXml",zip:"IconFileTypeZip"};export const DEFAULT_ICON="IconFile";
+export const EXTENSION_ICON = {
+  doc: 'IconFileTypeDoc',
+  docx: 'IconFileTypeDocx',
+  jpg: 'IconFileTypeJpg',
+  pdf: 'IconFileTypePdf',
+  txt: 'IconFileTypeTxt',
+  xls: 'IconFileTypeXls',
+  xml: 'IconFileTypeXml',
+  zip: 'IconFileTypeZip'
+};
+export const DEFAULT_ICON = 'IconFile';

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

@@ -1 +1,35 @@
-import React,{memo}from"react";import{string}from"prop-types";import UTIcon from"../../../../../UTIcon";import WithCustomHandler from"../WithCustomHandler";import{getIcon}from"./utils";import styles from"./styles.module.scss";const Citation=_ref=>{let{label:label,url:url}=_ref;const onClick=()=>window.open(url,"_blank","noopener,noreferrer"),icon=getIcon(label,url);return React.createElement("div",{className:styles.container,onClick:onClick,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||onClick()},role:"button",tabIndex:0},React.createElement(UTIcon,{colorTheme:"gray",name:icon,size:20}),React.createElement("div",{className:styles.label},label))};Citation.propTypes={label:string,url:string};export default memo(WithCustomHandler(Citation));
+import React, { memo } from 'react';
+import { string } from 'prop-types';
+import UTIcon from '../../../../../UTIcon';
+import WithCustomHandler from '../WithCustomHandler';
+import { getIcon } from './utils';
+import styles from './styles.module.scss';
+const Citation = _ref => {
+  let {
+    label,
+    url
+  } = _ref;
+  const onClick = () => window.open(url, '_blank', 'noopener,noreferrer');
+  const icon = getIcon(label, url);
+  const onKeyDown = e => {
+    if (e.key === 'Enter' || e.key === ' ') onClick();
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    colorTheme: "gray",
+    name: icon,
+    size: 20
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.label
+  }, label));
+};
+Citation.propTypes = {
+  label: string,
+  url: string
+};
+export default /*#__PURE__*/memo(WithCustomHandler(Citation));

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

@@ -1 +1,11 @@
-import{DEFAULT_ICON,EXTENSION_ICON}from"./constants";const getFileExtension=str=>{if(!str)return null;const match=str.match(/\.([a-zA-Z0-9]+)(?:\?|$)/);return match?match[1].toLowerCase():null};export const getIcon=(label,url)=>{const extension=getFileExtension(label)||getFileExtension(url);return extension&&EXTENSION_ICON[extension]||DEFAULT_ICON};
+import { DEFAULT_ICON, EXTENSION_ICON } from './constants';
+const getFileExtension = str => {
+  if (!str) return null;
+  const match = str.match(/\.([a-zA-Z0-9]+)(?:\?|$)/);
+  return match ? match[1].toLowerCase() : null;
+};
+export const getIcon = (label, url) => {
+  const extension = getFileExtension(label) || getFileExtension(url);
+  const icon = extension && EXTENSION_ICON[extension] || DEFAULT_ICON;
+  return icon;
+};

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

@@ -1 +1,15 @@
-import React,{memo,useState}from"react";import WithCustomHandler from"../WithCustomHandler";import styles from"./styles.module.scss";const CitationGroup=_ref=>{let{children:children}=_ref;const[isHovered,setIsHovered]=useState(!1);return React.createElement("div",{className:"".concat(styles.citationGroup," ").concat(isHovered?styles.isHovered:""),onMouseEnter:()=>setIsHovered(!0),onMouseLeave:()=>setIsHovered(!1)},children)};export default memo(WithCustomHandler(CitationGroup));
+import React, { memo, useState } from 'react';
+import WithCustomHandler from '../WithCustomHandler';
+import styles from './styles.module.scss';
+const CitationGroup = _ref => {
+  let {
+    children
+  } = _ref;
+  const [isHovered, setIsHovered] = useState(false);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.citationGroup, " ").concat(isHovered ? styles.isHovered : ''),
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false)
+  }, children);
+};
+export default /*#__PURE__*/memo(WithCustomHandler(CitationGroup));

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

@@ -1 +1,2 @@
-export const DATA_FOOTNOTE_REF="data-footnote-ref";export const DATA_FOOTNOTE_BACKREF="data-footnote-backref";
+export const DATA_FOOTNOTE_REF = 'data-footnote-ref';
+export const DATA_FOOTNOTE_BACKREF = 'data-footnote-backref';

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

@@ -1 +1,38 @@
-import React,{memo}from"react";import{bool,string}from"prop-types";import WithCustomHandler from"../WithCustomHandler";import{DATA_FOOTNOTE_REF,DATA_FOOTNOTE_BACKREF}from"./constants";import styles from"./styles.module.scss";const Links=_ref=>{let{[DATA_FOOTNOTE_REF]:dataFootnoteRef,[DATA_FOOTNOTE_BACKREF]:dataFootnoteBackref,children:children,href:href,id:id,markdownExtended:markdownExtended}=_ref;return markdownExtended&&void 0!==dataFootnoteRef?React.createElement("a",{href:href,id:id,className:styles.isFootNoteRef},children):markdownExtended&&void 0!==dataFootnoteBackref?React.createElement("a",{href:href,id:id,className:styles.isFootNoteRef},href.substring(20)):React.createElement("a",{href:href,rel:"noopener noreferrer",target:"_blank"},children)};Links.propTypes={[DATA_FOOTNOTE_REF]:string,[DATA_FOOTNOTE_BACKREF]:string,href:string,id:string,markdownExtended:bool};export default memo(WithCustomHandler(Links));
+import React, { memo } from 'react';
+import { bool, string } from 'prop-types';
+import WithCustomHandler from '../WithCustomHandler';
+import { DATA_FOOTNOTE_REF, DATA_FOOTNOTE_BACKREF } from './constants';
+import styles from './styles.module.scss';
+const Links = _ref => {
+  let {
+    [DATA_FOOTNOTE_REF]: dataFootnoteRef,
+    [DATA_FOOTNOTE_BACKREF]: dataFootnoteBackref,
+    children,
+    href,
+    id,
+    markdownExtended
+  } = _ref;
+  if (markdownExtended && dataFootnoteRef !== undefined) return /*#__PURE__*/React.createElement("a", {
+    href: href,
+    id: id,
+    className: styles.isFootNoteRef
+  }, children);
+  if (markdownExtended && dataFootnoteBackref !== undefined) return /*#__PURE__*/React.createElement("a", {
+    href: href,
+    id: id,
+    className: styles.isFootNoteRef
+  }, href.substring(20));
+  return /*#__PURE__*/React.createElement("a", {
+    href: href,
+    rel: "noopener noreferrer",
+    target: "_blank"
+  }, children);
+};
+Links.propTypes = {
+  [DATA_FOOTNOTE_REF]: string,
+  [DATA_FOOTNOTE_BACKREF]: string,
+  href: string,
+  id: string,
+  markdownExtended: bool
+};
+export default /*#__PURE__*/memo(WithCustomHandler(Links));

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

@@ -1 +1,44 @@
-import React,{Fragment,memo}from"react";import{object}from"prop-types";import UTIcon from"../../../../../UTIcon";import WithCustomHandler from"../WithCustomHandler";import{cleanElementProps}from"../../utils";import styles from"./styles.module.scss";const ListItem=_ref=>{var _node$properties;let{children:children,node:node,...props}=_ref;if((Array.isArray(null==node||null===(_node$properties=node.properties)||void 0===_node$properties?void 0:_node$properties.className)?node.properties.className:[]).includes("task-list-item")){var _node$children,_checkbox$properties;const checkbox=null==node||null===(_node$children=node.children)||void 0===_node$children?void 0:_node$children[0],isChecked=Boolean(null==checkbox||null===(_checkbox$properties=checkbox.properties)||void 0===_checkbox$properties?void 0:_checkbox$properties.checked),contentNodes=Array.isArray(children)?children.slice(1):children;return React.createElement("li",{className:styles.taskListItem},isChecked?React.createElement(Fragment,null,React.createElement(UTIcon,{area:!0,colorTheme:"success",name:"IconCheck",size:16}),React.createElement("span",{className:styles.itemContentChecked},contentNodes)):React.createElement(Fragment,null,React.createElement("span",{className:styles.taskItemIconUnchecked}),React.createElement("span",null,contentNodes)))}const safeChildren=Array.isArray(children)?children:children?[children]:[],mergedProps={...cleanElementProps(props),...(null==node?void 0:node.properties)||{}};return React.createElement("li",mergedProps,safeChildren)};ListItem.propTypes={node:object};export default memo(WithCustomHandler(ListItem));
+import React, { Fragment, memo } from 'react';
+import { object } from 'prop-types';
+import UTIcon from '../../../../../UTIcon';
+import WithCustomHandler from '../WithCustomHandler';
+import { cleanElementProps } from '../../utils';
+import styles from './styles.module.scss';
+const ListItem = _ref => {
+  var _node$properties;
+  let {
+    children,
+    node,
+    ...props
+  } = _ref;
+  const classList = Array.isArray(node === null || node === void 0 || (_node$properties = node.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.className) ? node.properties.className : [];
+  const isTaskListItem = classList.includes('task-list-item');
+  if (isTaskListItem) {
+    var _node$children, _checkbox$properties;
+    const checkbox = node === null || node === void 0 || (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children[0];
+    const isChecked = Boolean(checkbox === null || checkbox === void 0 || (_checkbox$properties = checkbox.properties) === null || _checkbox$properties === void 0 ? void 0 : _checkbox$properties.checked);
+    const contentNodes = Array.isArray(children) ? children.slice(1) : children;
+    return /*#__PURE__*/React.createElement("li", {
+      className: styles.taskListItem
+    }, isChecked ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(UTIcon, {
+      area: true,
+      colorTheme: "success",
+      name: "IconCheck",
+      size: 16
+    }), /*#__PURE__*/React.createElement("span", {
+      className: styles.itemContentChecked
+    }, contentNodes)) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: styles.taskItemIconUnchecked
+    }), /*#__PURE__*/React.createElement("span", null, contentNodes)));
+  }
+  const safeChildren = Array.isArray(children) ? children : children ? [children] : [];
+  const mergedProps = {
+    ...cleanElementProps(props),
+    ...((node === null || node === void 0 ? void 0 : node.properties) || {})
+  };
+  return /*#__PURE__*/React.createElement('li', mergedProps, safeChildren);
+};
+ListItem.propTypes = {
+  node: object
+};
+export default /*#__PURE__*/memo(WithCustomHandler(ListItem));