@widergy/energy-ui 1.134.2 → 2.0.0

package/dist/components/UTImageRadio/components/ImageRadioCard/index.js

@@ -64,8 +64,8 @@ var ImageRadioCard = function ImageRadioCard(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
       className: "".concat(classes.name, " ").concat(_stylesModule.default.text, " ").concat(isSelected && !transparent && classes.selectedText)
     }, name), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-      light: true,
-      className: "".concat(classes.description, " ").concat(_stylesModule.default.text, " ").concat(isSelected && classes.selectedText)
+      weight: "light",
+      className: "".concat(classes.description, " ").concat(_stylesModule.default.text, " ").concat(isSelected && _stylesModule.default.selectedText)
     }, description)));
   };
   return tooltip ? /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {

package/dist/components/UTImageRadio/index.js

@@ -67,8 +67,9 @@ var UTImageRadio = function UTImageRadio(_ref) {
       classes: classes
     });
   })), meta && (0, _form.shouldShowErrors)(meta) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "error",
     className: _stylesModule.default.error,
-    error: true
+    variant: "small"
   }, meta.error));
 };
 UTImageRadio.propTypes = {

package/dist/components/UTImageRadio/theme.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = void 0;
 var _seamlessImmutable = require("seamless-immutable");
 var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
+var _classesUtils = require("../../utils/classesUtils");
 var _constants = require("./constants");
 var _utils = require("./utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -13,7 +14,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var retrieveStyle = function retrieveStyle(theme) {
+var retrieveStyle = function retrieveStyle(_ref) {
+  var _theme$UTImageRadio, _theme$UTImageRadio$c, _theme$UTImageRadio2, _theme$UTImageRadio2$, _theme$UTImageRadio3, _theme$UTImageRadio3$, _theme$UTImageRadio4, _theme$UTImageRadio4$, _theme$UTImageRadio5, _theme$UTImageRadio5$, _theme$UTImageRadio6, _theme$UTImageRadio6$, _theme$UTImageRadio7, _theme$UTImageRadio7$, _theme$UTImageRadio8, _theme$UTImageRadio8$, _theme$UTImageRadio9, _theme$UTImageRadio9$, _theme$UTImageRadio10, _theme$UTImageRadio11, _theme$UTImageRadio12, _theme$UTImageRadio13;
+  var theme = _ref.theme;
   var tabletMobile = (0, _seamlessImmutable.getIn)(theme, ['Media', 'tabletMobile']);
   return {
     containerCard: {
@@ -33,7 +36,7 @@ var retrieveStyle = function retrieveStyle(theme) {
       pointerEvents: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'isSelected', 'pointerEvents'], 'none')
     },
     containerText: _defineProperty({
-      width: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'containerText', 'width'], '100% !important')
+      width: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTImageRadio = theme.UTImageRadio) === null || _theme$UTImageRadio === void 0 ? void 0 : (_theme$UTImageRadio$c = _theme$UTImageRadio.containerText) === null || _theme$UTImageRadio$c === void 0 ? void 0 : _theme$UTImageRadio$c.width) || '100%')
     }, tabletMobile, {
       width: '100%'
     }),
@@ -44,27 +47,27 @@ var retrieveStyle = function retrieveStyle(theme) {
     vertical: {
       flexDirection: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'vertical', 'flexDirection'], 'column'),
       border: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'vertical', 'border'], '2px solid transparent'),
-      borderWidth: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'vertical', 'borderWidth'], '2px !important'),
+      borderWidth: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTImageRadio2 = theme.UTImageRadio) === null || _theme$UTImageRadio2 === void 0 ? void 0 : (_theme$UTImageRadio2$ = _theme$UTImageRadio2.vertical) === null || _theme$UTImageRadio2$ === void 0 ? void 0 : _theme$UTImageRadio2$.borderWidth) || '2px'),
       alignItems: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'vertical', 'alignItems'], 'center'),
       textAlign: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'vertical', 'textAlign'], 'center'),
-      width: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'vertical', 'width'], 'fit-content !important'),
+      width: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTImageRadio3 = theme.UTImageRadio) === null || _theme$UTImageRadio3 === void 0 ? void 0 : (_theme$UTImageRadio3$ = _theme$UTImageRadio3.vertical) === null || _theme$UTImageRadio3$ === void 0 ? void 0 : _theme$UTImageRadio3$.width) || 'fit-content'),
       pointerEvents: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'vertical', 'pointerEvents'], 'auto'),
       '&:hover': {
-        border: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'vertical', 'border'], "2px solid ".concat(_colors.default.imageRadioBackground, " !important"))
+        border: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTImageRadio4 = theme.UTImageRadio) === null || _theme$UTImageRadio4 === void 0 ? void 0 : (_theme$UTImageRadio4$ = _theme$UTImageRadio4.vertical) === null || _theme$UTImageRadio4$ === void 0 ? void 0 : _theme$UTImageRadio4$.border) || "2px solid ".concat(_colors.default.imageRadioBackground))
       }
     },
     description: {
-      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'description', 'color'], _colors.default.black), " !important"),
-      fontSize: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'description', 'fontSize'], 14), "px !important"),
-      fontWeight: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'description', 'fontWeight'], 400), " !important")
+      color: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTImageRadio5 = theme.UTImageRadio) === null || _theme$UTImageRadio5 === void 0 ? void 0 : (_theme$UTImageRadio5$ = _theme$UTImageRadio5.description) === null || _theme$UTImageRadio5$ === void 0 ? void 0 : _theme$UTImageRadio5$.color) || _colors.default.black),
+      fontSize: (0, _classesUtils.withImportant)("".concat((theme === null || theme === void 0 ? void 0 : (_theme$UTImageRadio6 = theme.UTImageRadio) === null || _theme$UTImageRadio6 === void 0 ? void 0 : (_theme$UTImageRadio6$ = _theme$UTImageRadio6.description) === null || _theme$UTImageRadio6$ === void 0 ? void 0 : _theme$UTImageRadio6$.fontSize) || 14, "px")),
+      fontWeight: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTImageRadio7 = theme.UTImageRadio) === null || _theme$UTImageRadio7 === void 0 ? void 0 : (_theme$UTImageRadio7$ = _theme$UTImageRadio7.description) === null || _theme$UTImageRadio7$ === void 0 ? void 0 : _theme$UTImageRadio7$.fontWeight) || 400)
     },
     name: {
-      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'name', 'color'], _colors.default.black), " !important"),
-      fontSize: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'name', 'fontSize'], 18), "px !important"),
-      fontWeight: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'name', 'fontWeight'], 600), " !important")
+      color: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTImageRadio8 = theme.UTImageRadio) === null || _theme$UTImageRadio8 === void 0 ? void 0 : (_theme$UTImageRadio8$ = _theme$UTImageRadio8.name) === null || _theme$UTImageRadio8$ === void 0 ? void 0 : _theme$UTImageRadio8$.color) || _colors.default.black),
+      fontSize: (0, _classesUtils.withImportant)("".concat((theme === null || theme === void 0 ? void 0 : (_theme$UTImageRadio9 = theme.UTImageRadio) === null || _theme$UTImageRadio9 === void 0 ? void 0 : (_theme$UTImageRadio9$ = _theme$UTImageRadio9.name) === null || _theme$UTImageRadio9$ === void 0 ? void 0 : _theme$UTImageRadio9$.fontSize) || 18, "px")),
+      fontWeight: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTImageRadio10 = theme.UTImageRadio) === null || _theme$UTImageRadio10 === void 0 ? void 0 : (_theme$UTImageRadio11 = _theme$UTImageRadio10.name) === null || _theme$UTImageRadio11 === void 0 ? void 0 : _theme$UTImageRadio11.fontWeight) || 600)
     },
     selectedText: {
-      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'selectedText', 'color'], _colors.default.white), " !important")
+      color: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTImageRadio12 = theme.UTImageRadio) === null || _theme$UTImageRadio12 === void 0 ? void 0 : (_theme$UTImageRadio13 = _theme$UTImageRadio12.selectedText) === null || _theme$UTImageRadio13 === void 0 ? void 0 : _theme$UTImageRadio13.color) || _colors.default.white)
     }
   };
 };

package/dist/components/UTLabel/README.md

@@ -0,0 +1,169 @@
+# UTLabel
+
+Component used for displaying text values and markdown.
+
+## Props
+
+| Name              | Type   | Default                                  | Description                                                                                                                                                                                                                |
+| ----------------- | ------ | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 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).                                                                                                                          |
+| 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>
+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/components/UTLabel/constants.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WEIGHTS = exports.VARIANTS_SIZES = exports.VARIANTS_LINE_HEIGHT = exports.VARIANTS = exports.MARKDOWN_RENDERERS = exports.DEFAULT_PROPS = exports.COLOR_THEMES = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable react/prop-types */
+
+var VARIANTS = {
+  title1: 'h1',
+  title2: 'h2',
+  title3: 'h3',
+  subtitle1: 'h4',
+  subtitle2: 'h5',
+  body: 'div',
+  small: 'div',
+  xsmall: 'div',
+  th: 'th',
+  td: 'td'
+};
+exports.VARIANTS = VARIANTS;
+var VARIANTS_SIZES = {
+  title1: '1.875rem',
+  title2: '1.5rem',
+  title3: '1.375rem',
+  subtitle1: '1.125rem',
+  subtitle2: '1rem',
+  body: '1rem',
+  small: '0.875rem',
+  xsmall: '0.813rem',
+  th: '1rem',
+  td: '1rem'
+};
+exports.VARIANTS_SIZES = VARIANTS_SIZES;
+var VARIANTS_LINE_HEIGHT = {
+  title1: '100%',
+  title2: '100%',
+  title3: '100%',
+  subtitle1: '100%',
+  subtitle2: '100%',
+  body: '1.375rem',
+  small: '1.375rem',
+  xsmall: '1.25rem',
+  th: '1.375rem',
+  td: '1.375rem'
+};
+exports.VARIANTS_LINE_HEIGHT = VARIANTS_LINE_HEIGHT;
+var WEIGHTS = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900
+};
+exports.WEIGHTS = WEIGHTS;
+var COLOR_THEMES = {
+  dark: 'dark',
+  gray: 'gray',
+  light: 'light',
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  information: 'information'
+};
+exports.COLOR_THEMES = COLOR_THEMES;
+var MARKDOWN_RENDERERS = {
+  a: function a(_ref) {
+    var href = _ref.href,
+      children = _ref.children;
+    return /*#__PURE__*/_react.default.createElement("a", {
+      href: href,
+      rel: "noopener noreferrer",
+      target: "_blank"
+    }, children);
+  }
+};
+exports.MARKDOWN_RENDERERS = MARKDOWN_RENDERERS;
+var DEFAULT_PROPS = {
+  colorTheme: 'dark',
+  markdownRenderers: MARKDOWN_RENDERERS,
+  variant: 'body',
+  weight: 'regular',
+  withMarkdown: false
+};
+exports.DEFAULT_PROPS = DEFAULT_PROPS;

package/dist/components/UTLabel/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,121 +9,57 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
 var _remarkBreaks = _interopRequireDefault(require("remark-breaks"));
-var _style = require("@widergy/web-utils/lib/style");
-var _UTSkeleton = _interopRequireDefault(require("../UTSkeleton"));
+var _rehypeRaw = _interopRequireDefault(require("rehype-raw"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _classesUtils = require("../../utils/classesUtils");
+var _UTSkeleton = _interopRequireDefault(require("../UTSkeleton"));
+var _constants = require("./constants");
 var _theme = require("./theme");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var variants = ['xxxsmall', 'xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge', 'xxxlarge', 'title', 'largeTitle', 'extraLight', 'light', 'semibold', 'bold', 'extrabold', 'primary', 'secondary', 'alternative', 'gray', 'darkGray', 'white', 'error', 'uppercase', 'lowercase'];
-var UTLabel = /*#__PURE__*/function (_PureComponent) {
-  _inherits(UTLabel, _PureComponent);
-  var _super = _createSuper(UTLabel);
-  function UTLabel(props) {
-    var _this;
-    _classCallCheck(this, UTLabel);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
-      _this.setTitle();
-    });
-    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function () {
-      _this.setTitle();
-    });
-    _defineProperty(_assertThisInitialized(_this), "setTitle", function () {
-      if (!_this.ref) return;
-      var _this$ref$getBounding = _this.ref.getBoundingClientRect(),
-        childWidth = _this$ref$getBounding.width;
-      var parent = _this.ref.parentElement;
-      if (!parent) return;
-      var _parent$getBoundingCl = parent.getBoundingClientRect(),
-        parentWidth = _parent$getBoundingCl.width;
+/* eslint-disable react/no-children-prop */
 
-      // eslint-disable-next-line react/no-did-update-set-state
-      _this.setState({
-        withHoverTitle: childWidth > parentWidth + 10
-      });
+var UTLabel = function UTLabel(_ref) {
+  var children = _ref.children,
+    theme = _ref.classes,
+    className = _ref.className,
+    markdownRenderers = _ref.markdownRenderers,
+    style = _ref.style,
+    title = _ref.title,
+    variant = _ref.variant,
+    withMarkdown = _ref.withMarkdown;
+  if (children == null) return null;
+  var Component = _constants.VARIANTS[variant] || _constants.VARIANTS[_constants.DEFAULT_PROPS.variant];
+  var classes = (0, _react.useMemo)(function () {
+    return (0, _classesUtils.mergeClasses)(theme, {
+      className: className
     });
-    _this.ref = null;
-    _this.state = {
-      withHoverTitle: false
-    };
-    return _this;
-  }
-  _createClass(UTLabel, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        children = _this$props.children,
-        classes = _this$props.classes,
-        className = _this$props.className,
-        tag = _this$props.tag,
-        withoutMarkdown = _this$props.withoutMarkdown,
-        propStyle = _this$props.style;
-      var withHoverTitle = this.state.withHoverTitle;
-      var style = (0, _style.retrieveClassNamesFromProps)(variants, classes, this.props);
-      var handleCustomTag = function handleCustomTag(prop) {
-        var CustomTag = tag;
-        return /*#__PURE__*/_react.default.createElement(CustomTag, {
-          ref: function ref(_ref) {
-            return _this2.ref = _ref;
-          },
-          title: withHoverTitle ? prop.children || prop : '',
-          style: propStyle,
-          key: prop.children,
-          className: withoutMarkdown && "".concat(className, " ").concat(classes.base, " ").concat(style)
-        }, prop.children || prop);
-      };
-      var renderLinkComponent = function renderLinkComponent(prop) {
-        return /*#__PURE__*/_react.default.createElement("a", {
-          href: prop.href,
-          rel: "noopener noreferrer",
-          target: "_blank",
-          className: _stylesModule.default.link
-        }, prop.children);
-      };
-      var value = Array.isArray(children) ? children.join('') : isNaN(children) ? children : "".concat(children); // eslint-disable-line
-
-      return /*#__PURE__*/_react.default.createElement(_UTSkeleton.default, null, withoutMarkdown ? handleCustomTag(value) : /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, {
-        source: value,
-        escapeHtml: false,
-        plugins: [_remarkBreaks.default],
-        unwrapDisallowed: true,
-        disallowedTypes: ['root', 'paragraph'],
-        className: "".concat(className, " ").concat(classes.base, " ").concat(style),
-        renderers: {
-          link: renderLinkComponent,
-          text: handleCustomTag
-        }
-      }, value));
-    }
-  }]);
-  return UTLabel;
-}(_react.PureComponent);
-UTLabel.defaultProps = {
-  tag: 'span'
+  });
+  return /*#__PURE__*/_react.default.createElement(_UTSkeleton.default, null, /*#__PURE__*/_react.default.createElement(Component, {
+    className: "".concat(classes.root, " ").concat(classes.className).trim(),
+    title: title,
+    style: style
+  }, 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));
 };
+UTLabel.defaultProps = _constants.DEFAULT_PROPS;
 UTLabel.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   className: _propTypes.string,
-  tag: _propTypes.string,
-  withoutMarkdown: _propTypes.bool
+  markdownRenderers: (0, _propTypes.objectOf)(_propTypes.func),
+  // TODO: this "style" prop is for compatibility with the -base project only. Delete it when no longer needed
+  style: _propTypes.object,
+  title: _propTypes.string,
+  variant: _propTypes.string,
+  withMarkdown: _propTypes.bool
 };
 var _default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTLabel);
 exports.default = _default;