@widergy/energy-ui 3.123.1 → 3.124.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.124.0](https://github.com/widergy/energy-ui/compare/v3.123.1...v3.124.0) (2025-12-09)
+
+
+### Features
+
+* [PDI-501] UTLabel markdown plugins ([#727](https://github.com/widergy/energy-ui/issues/727)) ([2aa6e9a](https://github.com/widergy/energy-ui/commit/2aa6e9af166284ee63469b1766cdc88eb53b5c10))
+
 ## [3.123.1](https://github.com/widergy/energy-ui/compare/v3.123.0...v3.123.1) (2025-12-09)
 
 

package/dist/components/UTActionCard/components/Header/index.js

@@ -82,7 +82,7 @@ Header.propTypes = {
     }),
     variant: (0, _propTypes.oneOf)([_constants.HEADER_ACTIONS_VARIANTS.DEFAULT, _constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
   }),
-  setMainActionHoverVisible: _propTypes.string,
+  setMainActionHoverVisible: _propTypes.func,
   size: (0, _propTypes.oneOf)([_constants.SIZES.MEDIUM, _constants.SIZES.SMALL]),
   status: _propTypes.string,
   statusAlignment: (0, _propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER, _constants.PLACE_SELF_TYPES.END, _constants.PLACE_SELF_TYPES.START]),

package/dist/components/UTLabel/README.md

@@ -11,10 +11,11 @@ Component used for displaying text values and markdown.
 | 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).                                                                                                                                |
+| 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
@@ -80,6 +81,10 @@ const 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`)**†**
 

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

@@ -52,6 +52,18 @@ var _default = exports.default = {
         }
       }
     },
+    markdownExtended: {
+      control: 'boolean',
+      description: 'Habilita todos los plugins de markdown',
+      table: {
+        defaultValue: {
+          summary: _constants.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',
@@ -132,6 +144,7 @@ var _default = exports.default = {
 const Default = exports.Default = {
   args: {
     colorTheme: _constants.DEFAULT_PROPS.colorTheme,
+    markdownExtended: _constants.DEFAULT_PROPS.markdownExtended,
     variant: _constants.DEFAULT_PROPS.variant,
     weight: _constants.DEFAULT_PROPS.weight,
     withMarkdown: _constants.DEFAULT_PROPS.withMarkdown,

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _WithCustomHandler = _interopRequireDefault(require("../WithCustomHandler"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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.default.createElement("div", {
+    className: "".concat(_stylesModule.default.blockquote, " ").concat(classes === null || classes === void 0 ? void 0 : classes.blockquote)
+  }, lines.map(line => /*#__PURE__*/_react.default.createElement("div", {
+    key: line
+  }, line)));
+};
+BlockQuote.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string)
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)((0, _WithCustomHandler.default)(BlockQuote));

package/dist/components/UTLabel/components/Markdown/components/BlockQuote/styles.module.scss

@@ -0,0 +1,16 @@
+.blockquote {
+  margin: 0 0 24px 0;
+  padding-left: 12px;
+  position: relative;
+  white-space: pre-line;
+
+  &:before {
+    border-radius: 3;
+    content: '';
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    width: 2px;
+  }
+}

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../../../../../UTButton"));
+var _WithCustomHandler = _interopRequireDefault(require("../WithCustomHandler"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Citation = _ref => {
+  let {
+    label,
+    url
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    colorTheme: "secondary",
+    onClick: () => window.open(url, '_blank', 'noopener,noreferrer'),
+    size: "small"
+  }, label);
+};
+Citation.propTypes = {
+  label: _propTypes.string,
+  url: _propTypes.string
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)((0, _WithCustomHandler.default)(Citation));

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _WithCustomHandler = _interopRequireDefault(require("../WithCustomHandler"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const CitationGroup = _ref => {
+  let {
+    children,
+    classes
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.citationGroup, " ").concat(classes.citationGroup)
+  }, children);
+};
+CitationGroup.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string)
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)((0, _WithCustomHandler.default)(CitationGroup));

package/dist/components/UTLabel/components/Markdown/components/CitationGroup/styles.module.scss

@@ -0,0 +1,22 @@
+.citationGroup {
+  -webkit-overflow-scrolling: touch;
+  display: flex;
+  grid-gap: 8px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 4px;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+
+  button {
+    flex: 0 0 auto;
+  }
+
+  &::-webkit-scrollbar {
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar * {
+    background-color: transparent;
+  }
+}

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DATA_FOOTNOTE_REF = exports.DATA_FOOTNOTE_BACKREF = void 0;
+const DATA_FOOTNOTE_REF = exports.DATA_FOOTNOTE_REF = 'data-footnote-ref';
+const DATA_FOOTNOTE_BACKREF = exports.DATA_FOOTNOTE_BACKREF = 'data-footnote-backref';

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _WithCustomHandler = _interopRequireDefault(require("../WithCustomHandler"));
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Links = _ref => {
+  let {
+    [_constants.DATA_FOOTNOTE_REF]: dataFootnoteRef,
+    [_constants.DATA_FOOTNOTE_BACKREF]: dataFootnoteBackref,
+    children,
+    href,
+    id,
+    markdownExtended
+  } = _ref;
+  if (markdownExtended && dataFootnoteRef !== undefined) return /*#__PURE__*/_react.default.createElement("a", {
+    href: href,
+    id: id,
+    className: _stylesModule.default.isFootNoteRef
+  }, children);
+  if (markdownExtended && dataFootnoteBackref !== undefined) return /*#__PURE__*/_react.default.createElement("a", {
+    href: href,
+    id: id,
+    className: _stylesModule.default.isFootNoteRef
+  }, href.substring(20));
+  return /*#__PURE__*/_react.default.createElement("a", {
+    href: href,
+    rel: "noopener noreferrer",
+    target: "_blank"
+  }, children);
+};
+Links.propTypes = {
+  [_constants.DATA_FOOTNOTE_REF]: _propTypes.string,
+  [_constants.DATA_FOOTNOTE_BACKREF]: _propTypes.string,
+  href: _propTypes.string,
+  id: _propTypes.string,
+  markdownExtended: _propTypes.bool
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)((0, _WithCustomHandler.default)(Links));

package/dist/components/UTLabel/components/Markdown/components/Links/styles.module.scss

@@ -0,0 +1,3 @@
+.isFootNoteRef {
+  text-decoration: none !important;
+}

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _UTIcon = _interopRequireDefault(require("../../../../../UTIcon"));
+var _WithCustomHandler = _interopRequireDefault(require("../WithCustomHandler"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ListItem = _ref => {
+  var _node$properties;
+  let {
+    children,
+    classes,
+    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.default.createElement("li", {
+      className: _stylesModule.default.taskListItem
+    }, isChecked ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+      area: true,
+      colorTheme: "success",
+      name: "IconCheck",
+      size: 16
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: _stylesModule.default.itemContentChecked
+    }, contentNodes)) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(_stylesModule.default.taskItemIconUnchecked, " ").concat(classes === null || classes === void 0 ? void 0 : classes.taskItemIconUnchecked)
+    }), /*#__PURE__*/_react.default.createElement("span", null, contentNodes)));
+  }
+  const safeChildren = Array.isArray(children) ? children : children ? [children] : [];
+  const mergedProps = {
+    ...props,
+    ...((node === null || node === void 0 ? void 0 : node.properties) || {})
+  };
+  return /*#__PURE__*/_react.default.createElement('li', mergedProps, safeChildren);
+};
+ListItem.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  node: _propTypes.object
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)((0, _WithCustomHandler.default)(ListItem));

package/dist/components/UTLabel/components/Markdown/components/ListItem/styles.module.scss

@@ -0,0 +1,22 @@
+.taskListItem {
+  align-items: center;
+  display: flex;
+  grid-gap: 8px;
+  list-style-type: none;
+  margin: 0;
+}
+
+.taskItemIconUnchecked {
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  display: inline-block;
+  flex-shrink: 0;
+  height: 20px;
+  width: 20px;
+}
+
+.itemContentChecked {
+  text-decoration: line-through;
+}

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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); }
+const Section = _ref => {
+  var _node$properties;
+  let {
+    children,
+    classes,
+    node,
+    ...props
+  } = _ref;
+  const isFootnotesSection = (node === null || node === void 0 || (_node$properties = node.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.dataFootnotes) !== undefined;
+  if (!isFootnotesSection) {
+    return /*#__PURE__*/_react.default.createElement('section', props, children);
+  }
+  const reactChildren = _react.default.Children.toArray(children);
+  const ol = reactChildren.find(c => (c === null || c === void 0 ? void 0 : c.type) === 'ol');
+  if (!ol) return /*#__PURE__*/_react.default.createElement("div", null);
+  const liNodes = _react.default.Children.toArray(ol.props.children).filter(c => {
+    var _c$props;
+    return (c === null || c === void 0 || (_c$props = c.props) === null || _c$props === void 0 || (_c$props = _c$props.node) === null || _c$props === void 0 ? void 0 : _c$props.tagName) === 'li';
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes === null || classes === void 0 ? void 0 : classes.customFootnotes, " ").concat(_stylesModule.default.customFootnotes)
+  }, liNodes.map(li => {
+    const liChildren = _react.default.Children.toArray(li.props.children);
+    const p = liChildren.find(ch => (ch === null || ch === void 0 ? void 0 : ch.type) === 'p');
+    const sourceChildren = p ? _react.default.Children.toArray(p.props.children) : liChildren;
+    const textNodes = sourceChildren.filter(ch => typeof ch === 'string' || typeof ch === 'number');
+    const elementNodes = sourceChildren.filter(ch => !(typeof ch === 'string' || typeof ch === 'number'));
+    const textContent = textNodes.join('').trim();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.customFootnoteItem
+    }, /*#__PURE__*/_react.default.createElement("div", null, elementNodes.map(el => {
+      var _el$props;
+      if ((el === null || el === void 0 ? void 0 : el.type) === 'a' && typeof ((_el$props = el.props) === null || _el$props === void 0 ? void 0 : _el$props.href) === 'string') {
+        return /*#__PURE__*/_react.default.createElement("a", _extends({
+          href: el.props.href,
+          key: el.props.href
+        }, el.props || {}), el.props.children);
+      }
+      return /*#__PURE__*/_react.default.cloneElement(el);
+    })), textContent ? /*#__PURE__*/_react.default.createElement("span", null, textContent) : null);
+  }));
+};
+Section.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  node: _propTypes.object
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(Section);

package/dist/components/UTLabel/components/Markdown/components/Section/styles.module.scss

@@ -0,0 +1,13 @@
+.customFootnotes {
+  margin: 0 0 24px 0;
+}
+
+.customFootnoteItem {
+  display: flex;
+
+   a {
+    font-size: 0.75em;
+    margin-right: 4px;
+    vertical-align: super;
+  }
+}

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const WithCustomHandler = (Component, props) => {
+  const {
+    customHandler,
+    ...restProps
+  } = props;
+  if (customHandler) {
+    const CustomRenderer = customHandler(props);
+    if (CustomRenderer) return CustomRenderer;
+  }
+  return /*#__PURE__*/_react.default.createElement(Component, restProps);
+};
+WithCustomHandler.propTypes = {
+  customHandler: _propTypes.func
+};
+var _default = Component => props => WithCustomHandler(Component, props);
+exports.default = _default;

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

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NODE_TYPES = exports.EXTENDED_CONFIG = exports.COMPONENTS_NAMES = exports.BASE_CONFIG = void 0;
+var _remarkBreaks = _interopRequireDefault(require("remark-breaks"));
+var _rehypeRaw = _interopRequireDefault(require("rehype-raw"));
+var _remarkGfm = _interopRequireDefault(require("remark-gfm"));
+var _BlockQuote = _interopRequireDefault(require("./components/BlockQuote"));
+var _Citation = _interopRequireDefault(require("./components/Citation"));
+var _CitationGroup = _interopRequireDefault(require("./components/CitationGroup"));
+var _Links = _interopRequireDefault(require("./components/Links"));
+var _ListItem = _interopRequireDefault(require("./components/ListItem"));
+var _Section = _interopRequireDefault(require("./components/Section"));
+var _remarkCitations = _interopRequireDefault(require("./customPlugins/remarkCitations"));
+var _remarkDeflist = _interopRequireDefault(require("./customPlugins/remarkDeflist"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const COMPONENTS_NAMES = exports.COMPONENTS_NAMES = {
+  BLOCKQUOTE: 'blockquote',
+  CITATION: 'citation',
+  CITATION_GROUP: 'citationgroup',
+  DEFINITION_LIST: 'dl',
+  DEFINITION_TERM: 'dt',
+  DEFINITION_DESCRIPTION: 'dd',
+  LINK: 'a',
+  LIST_ITEM: 'li',
+  HEADING_2: 'h2',
+  PARAGRAPH: 'p',
+  SECTION: 'section'
+};
+const NODE_TYPES = exports.NODE_TYPES = {
+  BLOCKQUOTE: 'blockquote',
+  CITATION: 'citation',
+  CITATION_GROUP: 'citationgroup',
+  DEFINITION_LIST: 'definitionList',
+  DEFINITION_TERM: 'definitionTerm',
+  DEFINITION_DESCRIPTION: 'definitionDescription',
+  HEADING: 'heading',
+  LINK: 'link',
+  LIST_ITEM: 'listItem',
+  PARAGRAPH: 'paragraph',
+  TABLE_CELL: 'tableCell',
+  TEXT: 'text'
+};
+const BASE_CONFIG = exports.BASE_CONFIG = {
+  disallowedElements: [COMPONENTS_NAMES.PARAGRAPH, COMPONENTS_NAMES.BLOCKQUOTE],
+  remarkPlugins: [_remarkBreaks.default],
+  rehypePlugins: [_rehypeRaw.default],
+  components: {
+    [COMPONENTS_NAMES.LINK]: _Links.default
+  }
+};
+const EXTENDED_CONFIG = exports.EXTENDED_CONFIG = {
+  disallowedElements: [],
+  remarkPlugins: [_remarkGfm.default, _remarkDeflist.default, _remarkCitations.default, _remarkBreaks.default],
+  rehypePlugins: [_rehypeRaw.default],
+  components: {
+    [COMPONENTS_NAMES.BLOCKQUOTE]: _BlockQuote.default,
+    [COMPONENTS_NAMES.CITATION]: _Citation.default,
+    [COMPONENTS_NAMES.CITATION_GROUP]: _CitationGroup.default,
+    [COMPONENTS_NAMES.LINK]: _Links.default,
+    [COMPONENTS_NAMES.LIST_ITEM]: _ListItem.default,
+    [COMPONENTS_NAMES.SECTION]: _Section.default
+  }
+};

package/dist/components/UTLabel/components/Markdown/customPlugins/remarkCitations.js

@@ -0,0 +1,189 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _unistUtilVisit = require("unist-util-visit");
+var _constants = require("../constants");
+/**
+ * Detecta el patrón de citas en un texto y lo convierte en componentes.
+ *
+ * Busca el patrón [Documento1.pdf†https://example.com/doc1.pdf] en el contenido.
+ * Si hay una sola cita, muestra un UTChip (componente Citation).
+ * Si hay múltiples citas, las renderiza dentro de un div contenedor (componente CitationGroup).
+ *
+ * @returns {Function} Función que procesa el árbol AST de remark
+ */
+var _default = () => {
+  const pattern = /\[([^\]]+?)†(https?:\/\/[^\]]+?)\]/g;
+  return tree => {
+    (0, _unistUtilVisit.visit)(tree, node => {
+      const parentsToProcess = [_constants.NODE_TYPES.PARAGRAPH, _constants.NODE_TYPES.HEADING, _constants.NODE_TYPES.LIST_ITEM, _constants.NODE_TYPES.BLOCKQUOTE, _constants.NODE_TYPES.TABLE_CELL];
+      if (!parentsToProcess.includes(node.type) || !Array.isArray(node.children)) return;
+      const {
+        children
+      } = node;
+      const getText = n => {
+        if (n.type === _constants.NODE_TYPES.TEXT) return n.value || '';
+        if (n.type === _constants.NODE_TYPES.LINK) {
+          const inner = Array.isArray(n.children) ? n.children.map(getText).join('') : '';
+          return inner + (n.url || '');
+        }
+        if (Array.isArray(n.children)) return n.children.map(getText).join('');
+        return '';
+      };
+      const parts = children.map(child => {
+        const text = getText(child);
+        return {
+          node: child,
+          text,
+          length: text.length
+        };
+      });
+      const combined = parts.map(p => p.text).join('');
+      if (!combined.includes('†')) return;
+      const matches = [...combined.matchAll(pattern)];
+      if (matches.length === 0) return;
+      const findPartIndexByChar = charIndex => {
+        let acc = 0;
+        return parts.reduce((accumulator, part, idx) => {
+          if (accumulator.found) return accumulator;
+          const next = acc + part.length;
+          if (charIndex < next) {
+            return {
+              found: true,
+              partIndex: idx,
+              offsetInPart: charIndex - acc
+            };
+          }
+          acc = next;
+          return {
+            found: false,
+            partIndex: -1,
+            offsetInPart: -1
+          };
+        }, {
+          found: false,
+          partIndex: -1,
+          offsetInPart: -1
+        });
+      };
+      const newChildren = [];
+      let cursorChar = 0;
+      let consumedPartIndex = 0;
+      matches.forEach(match => {
+        const [full, label, url] = match;
+        const matchStart = match.index;
+        const matchEnd = matchStart + full.length;
+        if (matchStart > cursorChar) {
+          const endInfo = findPartIndexByChar(matchStart - 1);
+          for (let i = consumedPartIndex; i <= endInfo.partIndex; i += 1) {
+            const part = parts[i];
+            const partStartChar = parts.slice(0, i).reduce((a, b) => a + b.length, 0);
+            const takeFrom = Math.max(cursorChar - partStartChar, 0);
+            const takeTo = Math.min(matchStart - partStartChar, part.length);
+            if (takeFrom === 0 && takeTo === part.length) {
+              newChildren.push(part.node);
+            } else {
+              const textSlice = part.text.slice(takeFrom, takeTo);
+              if (textSlice) newChildren.push({
+                type: _constants.NODE_TYPES.TEXT,
+                value: textSlice
+              });
+            }
+          }
+          consumedPartIndex = endInfo.partIndex + 1;
+        }
+        const matchStartInfo = findPartIndexByChar(matchStart);
+        const matchEndInfo = findPartIndexByChar(matchEnd - 1);
+        if (matchStartInfo.partIndex > consumedPartIndex) {
+          for (let i = consumedPartIndex; i < matchStartInfo.partIndex; i += 1) {
+            newChildren.push(parts[i].node);
+          }
+        }
+        newChildren.push({
+          type: _constants.COMPONENTS_NAMES.CITATION,
+          data: {
+            hName: _constants.COMPONENTS_NAMES.CITATION,
+            hProperties: {
+              label,
+              url
+            }
+          }
+        });
+        consumedPartIndex = matchEndInfo.partIndex + 1;
+        cursorChar = matchEnd;
+      });
+      if (cursorChar < combined.length) {
+        const startInfo = findPartIndexByChar(cursorChar);
+        if (startInfo.found) {
+          const partStartChar = parts.slice(0, startInfo.partIndex).reduce((a, b) => a + b.length, 0);
+          const takeFrom = cursorChar - partStartChar;
+          const firstPart = parts[startInfo.partIndex];
+          if (takeFrom < firstPart.length) {
+            const slice = firstPart.text.slice(takeFrom);
+            if (slice) newChildren.push({
+              type: _constants.NODE_TYPES.TEXT,
+              value: slice
+            });
+          }
+          for (let i = Math.max(consumedPartIndex, startInfo.partIndex + 1); i < parts.length; i += 1) {
+            newChildren.push(parts[i].node);
+          }
+        } else {
+          for (let i = consumedPartIndex; i < parts.length; i += 1) {
+            newChildren.push(parts[i].node);
+          }
+        }
+      } else {
+        for (let i = consumedPartIndex; i < parts.length; i += 1) {
+          newChildren.push(parts[i].node);
+        }
+      }
+      const groupedChildren = [];
+      let i = 0;
+      while (i < newChildren.length) {
+        const child = newChildren[i];
+        if (child.type === _constants.COMPONENTS_NAMES.CITATION) {
+          let citationCount = 1;
+          let j = i + 1;
+          let endIndex = i + 1;
+          while (j < newChildren.length) {
+            const nextChild = newChildren[j];
+            if (nextChild.type === _constants.COMPONENTS_NAMES.CITATION) {
+              citationCount += 1;
+              endIndex = j + 1;
+              j += 1;
+            } else if (nextChild.type === _constants.NODE_TYPES.TEXT && nextChild.value.trim() === '') {
+              j += 1;
+            } else {
+              break;
+            }
+          }
+          if (citationCount >= 2) {
+            const citationGroup = {
+              type: _constants.COMPONENTS_NAMES.CITATION_GROUP,
+              children: newChildren.slice(i, endIndex),
+              data: {
+                hName: _constants.COMPONENTS_NAMES.CITATION_GROUP
+              }
+            };
+            groupedChildren.push(citationGroup);
+            i = endIndex;
+          } else {
+            groupedChildren.push(child);
+            i += 1;
+          }
+        } else {
+          groupedChildren.push(child);
+          i += 1;
+        }
+      }
+      if (groupedChildren.length > 0) {
+        node.children = groupedChildren;
+      }
+    });
+  };
+};
+exports.default = _default;

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

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = remarkDeflist;
+var _unistUtilVisit = require("unist-util-visit");
+var _constants = require("../constants");
+/**
+ * remarkDeflist
+ *
+ * Convierte bloques como:
+ *
+ * Term 1
+ * : Description 1
+ * : Description 2
+ *
+ * Term 2
+ * : Desc A
+ *
+ * en un nodo <dl> con <dt> y <dd>
+ */
+function remarkDeflist() {
+  return tree => {
+    (0, _unistUtilVisit.visit)(tree, _constants.NODE_TYPES.PARAGRAPH, (node, index, parent) => {
+      if (!parent || !Array.isArray(parent.children)) return;
+      const raw = node.children.map(ch => 'value' in ch ? ch.value : '').join('');
+      const lines = raw.split('\n');
+      if (!lines.some(l => l.trim().startsWith(':'))) return;
+      const items = [];
+      let currentTerm = null;
+      for (let i = 0; i < lines.length; i += 1) {
+        const line = lines[i];
+        const trimmed = line.trim();
+        if (trimmed && !trimmed.startsWith(':')) {
+          if (currentTerm) {
+            items.push(currentTerm);
+          }
+          currentTerm = {
+            term: trimmed,
+            desc: []
+          };
+        } else if (trimmed.startsWith(':')) {
+          if (!currentTerm) {
+            currentTerm = {
+              term: '',
+              desc: []
+            };
+          }
+          currentTerm.desc.push(trimmed.replace(/^:\s*/, ''));
+        }
+      }
+      if (currentTerm) {
+        items.push(currentTerm);
+      }
+      const dlNode = {
+        type: _constants.COMPONENTS_NAMES.DEFINITION_LIST,
+        data: {
+          hName: _constants.COMPONENTS_NAMES.DEFINITION_LIST
+        },
+        children: []
+      };
+      for (let j = 0; j < items.length; j += 1) {
+        const {
+          term,
+          desc
+        } = items[j];
+        dlNode.children.push({
+          type: _constants.COMPONENTS_NAMES.DEFINITION_TERM,
+          data: {
+            hName: _constants.COMPONENTS_NAMES.DEFINITION_TERM
+          },
+          children: [{
+            type: _constants.NODE_TYPES.TEXT,
+            value: term
+          }]
+        });
+        for (let k = 0; k < desc.length; k += 1) {
+          dlNode.children.push({
+            type: _constants.COMPONENTS_NAMES.DEFINITION_DESCRIPTION,
+            data: {
+              hName: _constants.COMPONENTS_NAMES.DEFINITION_DESCRIPTION
+            },
+            children: [{
+              type: _constants.NODE_TYPES.TEXT,
+              value: desc[k]
+            }]
+          });
+        }
+      }
+      parent.children.splice(index, 1, dlNode);
+    });
+  };
+}

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Markdown = _ref => {
+  let {
+    children,
+    classes,
+    markdownExtended,
+    markdownRenderers
+  } = _ref;
+  const {
+    components,
+    disallowedElements,
+    rehypePlugins,
+    remarkPlugins
+  } = (0, _utils.getMarkdownPlugins)(classes, markdownExtended, markdownRenderers);
+  return /*#__PURE__*/_react.default.createElement(_reactMarkdown.default
+  /* eslint-disable react/no-children-prop */, {
+    children: children,
+    components: components,
+    disallowedElements: disallowedElements,
+    remarkPlugins: remarkPlugins,
+    rehypePlugins: rehypePlugins,
+    skipHtml: false,
+    unwrapDisallowed: true
+  });
+};
+Markdown.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  markdownExtended: _propTypes.bool,
+  markdownRenderers: (0, _propTypes.objectOf)(_propTypes.func)
+};
+var _default = exports.default = Markdown;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMarkdownPlugins = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const wrapComponents = (components, classes, markdownExtended, markdownRenderers) => Object.entries(components).reduce((wrapped, _ref) => {
+  let [key, Component] = _ref;
+  wrapped[key] = props => /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
+    classes: classes,
+    customHandler: markdownRenderers === null || markdownRenderers === void 0 ? void 0 : markdownRenderers[key],
+    markdownExtended: markdownExtended
+  }));
+  return wrapped;
+}, {});
+const getMarkdownPlugins = function (classes, markdownExtended) {
+  let markdownRenderers = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const {
+    components,
+    disallowedElements,
+    remarkPlugins,
+    rehypePlugins
+  } = markdownExtended ? _constants.EXTENDED_CONFIG : _constants.BASE_CONFIG;
+  const wrappedComponents = wrapComponents(components, classes, markdownExtended, markdownRenderers);
+  return {
+    components: {
+      ...markdownRenderers,
+      ...wrappedComponents
+    },
+    disallowedElements,
+    rehypePlugins,
+    remarkPlugins
+  };
+};
+exports.getMarkdownPlugins = getMarkdownPlugins;

package/dist/components/UTLabel/constants.js

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WEIGHTS = exports.VARIANTS_SIZES = exports.VARIANTS_LINE_HEIGHT = exports.VARIANTS = exports.MARKDOWN_RENDERERS = exports.DEFAULT_PROPS = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.WEIGHTS = exports.VARIANTS_SIZES = exports.VARIANTS_LINE_HEIGHT = exports.VARIANTS = exports.DEFAULT_PROPS = void 0;
 var _Palette = require("../../constants/Palette");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const VARIANTS = exports.VARIANTS = {
   title1: 'h1',
   title2: 'h2',
@@ -54,23 +52,11 @@ const WEIGHTS = exports.WEIGHTS = {
   extrabold: 800,
   black: 900
 };
-const MARKDOWN_RENDERERS = exports.MARKDOWN_RENDERERS = {
-  a: _ref => {
-    let {
-      href,
-      children
-    } = _ref;
-    return /*#__PURE__*/_react.default.createElement("a", {
-      href: href,
-      rel: "noopener noreferrer",
-      target: "_blank"
-    }, children);
-  }
-};
 const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
   colorTheme: _Palette.COLOR_THEMES.dark,
   field: {},
-  markdownRenderers: MARKDOWN_RENDERERS,
+  markdownExtended: false,
+  markdownRenderers: {},
   variant: 'body',
   weight: 'regular',
   withMarkdown: false

package/dist/components/UTLabel/index.js

@@ -6,20 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
-var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
-var _remarkBreaks = _interopRequireDefault(require("remark-breaks"));
-var _rehypeRaw = _interopRequireDefault(require("rehype-raw"));
 var _classesUtils = require("../../utils/classesUtils");
 var _componentUtils = require("../../utils/componentUtils");
 var _UTSkeleton = _interopRequireDefault(require("../UTSkeleton"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _Markdown = _interopRequireDefault(require("./components/Markdown"));
 var _constants = require("./constants");
 var _theme = require("./theme");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/* eslint-disable react/no-children-prop */
-
 const UTLabel = _ref => {
   let {
     align,
@@ -27,6 +23,7 @@ const UTLabel = _ref => {
     className,
     classes: theme,
     dataTestId,
+    markdownExtended,
     markdownRenderers,
     title,
     variant,
@@ -37,19 +34,16 @@ const UTLabel = _ref => {
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, {
     className
   }), [theme, className]);
+  const componentClassname = "".concat(classes.root, " ").concat(withMarkdown ? classes.markdown : '', " ").concat(_stylesModule.default["".concat(align, "Alignment")] || '', " ").concat(classes.className);
   return /*#__PURE__*/_react.default.createElement(_UTSkeleton.default, null, /*#__PURE__*/_react.default.createElement(Component, {
-    className: "".concat(classes.root, " ").concat(_stylesModule.default["".concat(align, "Alignment")] || '', " ").concat(classes.className).trim(),
+    className: componentClassname.trim(),
     "data-testid": dataTestId,
     title: title
-  }, withMarkdown && /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, {
-    children: children,
-    components: markdownRenderers,
-    disallowedElements: ['p', 'blockquote'],
-    rehypePlugins: [_rehypeRaw.default],
-    remarkPlugins: [_remarkBreaks.default],
-    skipHtml: false,
-    unwrapDisallowed: true
-  }) || children));
+  }, withMarkdown && /*#__PURE__*/_react.default.createElement(_Markdown.default, {
+    classes: classes,
+    markdownExtended: markdownExtended,
+    markdownRenderers: markdownRenderers
+  }, children) || children));
 };
 UTLabel.defaultProps = _constants.DEFAULT_PROPS;
 UTLabel.propTypes = {
@@ -57,6 +51,7 @@ UTLabel.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   className: _propTypes.string,
   dataTestId: _propTypes.string,
+  markdownExtended: _propTypes.bool,
   markdownRenderers: (0, _propTypes.objectOf)(_propTypes.func),
   title: _propTypes.string,
   variant: _propTypes.string,

package/dist/components/UTLabel/theme.js

@@ -19,7 +19,7 @@ const variantsColorTheme = (colorTheme, shade, theme) => {
 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 === _Palette.COLOR_THEMES.light ? actionPaletteColors.negative[_Palette.COLOR_SHADES.shade05] : colorTheme === _Palette.COLOR_THEMES.error ? actionPaletteColors.error[_Palette.COLOR_SHADES.shade05] : actionPaletteColors.neutral[_Palette.COLOR_SHADES.shade05];
+  const color = colorTheme === _Palette.COLOR_THEMES.light ? actionPaletteColors[_Palette.COLOR_THEMES.negative][_Palette.COLOR_SHADES.shade05] : colorTheme === _Palette.COLOR_THEMES.error ? actionPaletteColors[_Palette.COLOR_THEMES.error][_Palette.COLOR_SHADES.shade05] : actionPaletteColors[_Palette.COLOR_THEMES.accent][_Palette.COLOR_SHADES.shade05];
   return color;
 };
 const getFontStyles = _ref => {
@@ -51,6 +51,8 @@ const retrieveStyle = _ref2 => {
     weight,
     variantsSizes
   } = _ref2;
+  const darkTextColor = colorTheme === _Palette.COLOR_THEMES.light ? theme.Palette[_Palette.COLOR_THEMES.light][_Palette.COLOR_SHADES.shade01] : theme.Palette[_Palette.COLOR_THEMES.dark][_Palette.COLOR_SHADES.shade05];
+  const grayTextColor = colorTheme === _Palette.COLOR_THEMES.light ? theme.Palette[_Palette.COLOR_THEMES.light][_Palette.COLOR_SHADES.shade01] : theme.Palette[_Palette.COLOR_THEMES.gray][_Palette.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),
@@ -60,10 +62,158 @@ const retrieveStyle = _ref2 => {
         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,
-      '& > a': {
+      margin: 0
+    },
+    markdown: {
+      '& a': {
         color: linkColor(theme, colorTheme)
+      },
+      '& h1, & h2, & h3, & h4, & h5, & h6': {
+        color: darkTextColor,
+        fontWeight: _constants.WEIGHTS.medium,
+        lineHeight: 1,
+        margin: '0 0 8px 0'
+      },
+      '& h1': {
+        fontSize: '1.875em'
+      },
+      '& h2': {
+        fontSize: '1.5em'
+      },
+      '& h3': {
+        fontSize: '1.375em'
+      },
+      '& h4': {
+        fontSize: '1.125em'
+      },
+      '& h5': {
+        fontSize: '1em',
+        margin: '0 0 12px 0'
+      },
+      '& h6': {
+        color: grayTextColor,
+        fontSize: '1em',
+        margin: '0 0 12px 0'
+      },
+      '& table': {
+        border: "1px solid ".concat(theme.Palette[_Palette.COLOR_THEMES.light][_Palette.COLOR_SHADES.shade04]),
+        borderCollapse: 'collapse',
+        margin: '0 0 24px 0',
+        width: '100%'
+      },
+      '& th, & td': {
+        border: "1px solid ".concat(theme.Palette[_Palette.COLOR_THEMES.light][_Palette.COLOR_SHADES.shade04]),
+        padding: '8px 12px',
+        textAlign: 'left'
+      },
+      '& th': {
+        backgroundColor: (theme.Palette.actions || theme.Palette)[_Palette.COLOR_THEMES.negative][_Palette.COLOR_SHADES.shade01],
+        color: grayTextColor,
+        fontWeight: _constants.WEIGHTS.medium
+      },
+      '& p': {
+        margin: '0 0 12px 0'
+      },
+      '& ol': {
+        paddingLeft: 24,
+        textAlign: 'start'
+      },
+      '& ul, & ol': {
+        margin: '0 0 24px 0'
+      },
+      '& ul:not(.contains-task-list)': {
+        paddingLeft: 24,
+        textAlign: 'start'
+      },
+      '& pre': {
+        backgroundColor: theme.Palette[_Palette.COLOR_THEMES.light][_Palette.COLOR_SHADES.shade03],
+        borderRadius: 8,
+        fontSize: '0.875em',
+        lineHeight: '1.25em',
+        margin: '0 0 24px 0',
+        padding: '12px 16px',
+        whiteSpace: 'pre-wrap'
+      },
+      '& dl': {
+        margin: '0 0 24px 0'
+      },
+      '& dd': {
+        fontSize: 'inherit',
+        margin: 0
+      },
+      '& dt': {
+        color: grayTextColor,
+        fontSize: _constants.VARIANTS_SIZES.small,
+        fontWeight: _constants.WEIGHTS.semibold
+      },
+      '& dl + dl': {
+        marginTop: -12
+      },
+      '& dt + dt, & dt + dd, & dd + dd': {
+        marginTop: 12
+      },
+      '& hr': {
+        borderColor: theme.Palette[_Palette.COLOR_THEMES.gray][_Palette.COLOR_SHADES.shade01],
+        borderTop: 0,
+        margin: '8px 0 24px'
+      },
+      '& li + li': {
+        marginTop: 12
+      },
+      '& li > ul': {
+        marginTop: 8
+      },
+      '& li::marker': {
+        color: theme.Palette[_Palette.COLOR_THEMES.gray][_Palette.COLOR_SHADES.shade01]
+      },
+      '& li > ul > li + li': {
+        marginTop: 8
+      },
+      '& li p': {
+        margin: 0
+      },
+      '& sup': {
+        fontSize: 'inherit'
+      },
+      '& sup > a': {
+        fontSize: '0.75em'
+      },
+      '& img, & video, & audio': {
+        borderRadius: 8,
+        margin: '0 0 24px 0'
+      },
+      '& .contains-task-list': {
+        display: 'flex',
+        flexDirection: 'column',
+        gridGap: '12px',
+        margin: '0 0 24px 0',
+        paddingLeft: 0,
+        '& li': {
+          margin: 0
+        }
+      },
+      '& :last-child': {
+        marginBottom: '0'
       }
+    },
+    blockquote: {
+      color: grayTextColor,
+      '&::before': {
+        background: theme.Palette[_Palette.COLOR_THEMES.gray][_Palette.COLOR_SHADES.shade01]
+      }
+    },
+    citationGroup: {
+      '&::-webkit-scrollbar-thumb': {
+        backgroundColor: theme.Palette[_Palette.COLOR_THEMES.gray][_Palette.COLOR_SHADES.shade04]
+      }
+    },
+    customFootnotes: {
+      '& span': {
+        color: grayTextColor
+      }
+    },
+    taskItemIconUnchecked: {
+      borderColor: theme.Palette[_Palette.COLOR_THEMES.gray][_Palette.COLOR_SHADES.shade01]
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.123.1",
+  "version": "3.124.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",
@@ -67,9 +67,11 @@
     "react-window": "^1.8.5",
     "rehype-raw": "^6.1.0",
     "remark-breaks": "^3.0.2",
+    "remark-gfm": "^3.0.1",
     "sass-loader": "^10.0.5",
     "sass": "^1.80.4",
-    "seamless-immutable": "^7.1.4"
+    "seamless-immutable": "^7.1.4",
+    "unist-util-visit": "^4.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",