@widergy/energy-ui 3.123.1 → 3.125.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.125.0](https://github.com/widergy/energy-ui/compare/v3.124.0...v3.125.0) (2025-12-09)
+
+
+### Features
+
+* [PROMI] calendar ([#736](https://github.com/widergy/energy-ui/issues/736)) ([32cc5c2](https://github.com/widergy/energy-ui/commit/32cc5c2e7816acbbb3ba760f521695d7fb687a7b))
+
+# [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/UTCalendar/components/Day/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../../../UTTouchableWithoutFeedback"));
+var _constants = require("../../constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const GenericRenderDay = _ref => {
+  let {
+    date,
+    bookingOptions,
+    selectedDayIndex,
+    setSelectedDayIndex,
+    dayInCurrentMonth
+  } = _ref;
+  const index = bookingOptions.findIndex(item => (0, _dayjs.default)(item.value).isSame((0, _dayjs.default)(date), 'day'));
+  const available = dayInCurrentMonth && index !== -1;
+  const isSelected = index === selectedDayIndex;
+  return /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
+    className: "".concat(_stylesModule.default.daysRender, "  ").concat(!available && _stylesModule.default.disabledButton, " ").concat(isSelected && _stylesModule.default.selectedDay, " ").concat(!dayInCurrentMonth && _stylesModule.default.notInCurrentMonth),
+    onClick: available ? () => setSelectedDayIndex(index) : undefined
+  }, dayInCurrentMonth ? (0, _dayjs.default)(date).format(_constants.DAY_FORMAT) : '');
+};
+GenericRenderDay.propTypes = {
+  date: _propTypes.object,
+  bookingOptions: _propTypes.object,
+  selectedDayIndex: _propTypes.number,
+  setSelectedDayIndex: _propTypes.func,
+  dayInCurrentMonth: _propTypes.bool
+};
+var _default = exports.default = GenericRenderDay;

package/dist/components/UTCalendar/components/Day/styles.module.scss

@@ -0,0 +1,36 @@
+.dateContainer {
+  grid-gap: 16px;
+  padding: 16px;
+
+  & > * {
+    padding: 0;
+  }
+}
+
+.daysRender {
+  background-color: var(--light01);
+  color: var(--gray04);
+  place-content: center;
+  flex-grow: 1;
+  height: 40px;
+  flex-wrap: wrap;
+
+  &:hover {
+    cursor: default;
+  }
+}
+
+.disabledButton {
+  background-color: var(--semanticError01);
+  color: var(--semanticError05);
+}
+
+.selectedDay {
+  background-color: var(--actionAccent04);
+  color: var(--light01);
+}
+
+.notInCurrentMonth { 
+  background-color: var(--light013);
+}
+

package/dist/components/UTCalendar/components/TimeInput/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTRadioGroup = _interopRequireDefault(require("../../../UTRadioGroup"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TimeInput = _ref => {
+  let {
+    availableTimeSlots,
+    selectedTime,
+    setSelectedTime
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.timeInputContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.timeInputHeader
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "subtitle1"
+  }, "Seleccione el horario"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, null, "Debe seleccionar un horario para continuar")), /*#__PURE__*/_react.default.createElement(_UTRadioGroup.default, {
+    options: availableTimeSlots,
+    value: selectedTime,
+    onChange: setSelectedTime,
+    version: "V1",
+    verticalSpacing: "small",
+    variant: "card"
+  }));
+};
+TimeInput.propTypes = {
+  availableTimeSlots: _propTypes.array,
+  selectedTime: _propTypes.string,
+  setSelectedTime: _propTypes.func
+};
+var _default = exports.default = TimeInput;

package/dist/components/UTCalendar/components/TimeInput/styles.module.scss

@@ -0,0 +1,12 @@
+.timeInputContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+  width: 100%;
+}
+
+.timeInputHeader {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 4px;
+}

package/dist/components/UTCalendar/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ONLY_ONE_WORK_SCHEDULE = exports.INPUT_VALUE_DEFAULT = exports.ICON_SIZE_DEFAULT = exports.FORMAT_DATE = exports.FIELD_KEYS = exports.DAY_FORMAT = void 0;
+const INPUT_VALUE_DEFAULT = exports.INPUT_VALUE_DEFAULT = '00:00';
+const ONLY_ONE_WORK_SCHEDULE = exports.ONLY_ONE_WORK_SCHEDULE = 0;
+const DAY_FORMAT = exports.DAY_FORMAT = 'DD';
+const FORMAT_DATE = exports.FORMAT_DATE = 'YYYY-MM-DD';
+const ICON_SIZE_DEFAULT = exports.ICON_SIZE_DEFAULT = 32;
+const FIELD_KEYS = exports.FIELD_KEYS = {
+  DATE: 'date',
+  TIME: 'time'
+};

package/dist/components/UTCalendar/index.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _pickers = require("@material-ui/pickers");
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
+var _es = _interopRequireDefault(require("date-fns/locale/es"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _UTFieldLabel = _interopRequireDefault(require("../UTFieldLabel"));
+var _utils = require("../UTValidation/utils");
+var _UTValidation = _interopRequireDefault(require("../UTValidation"));
+var _constants = require("./constants");
+var _TimeInput = _interopRequireDefault(require("./components/TimeInput"));
+var _Day = _interopRequireDefault(require("./components/Day"));
+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 Calendar = _ref => {
+  var _options$selectedDayI, _options$selectedDayI2;
+  let {
+    dataTestId,
+    actions,
+    error,
+    onChange,
+    options,
+    required,
+    showLegend,
+    timeSelection,
+    title,
+    value
+  } = _ref;
+  const [selectedDayIndex, setSelectedDayIndex] = (0, _react.useState)(value === null || value === void 0 ? void 0 : value[_constants.FIELD_KEYS.DATE]);
+  const [selectedTime, setSelectedTime] = (0, _react.useState)(value === null || value === void 0 ? void 0 : value[_constants.FIELD_KEYS.TIME]);
+  const selectedDay = (_options$selectedDayI = options[selectedDayIndex]) === null || _options$selectedDayI === void 0 ? void 0 : _options$selectedDayI.value;
+  const validationData = (0, _react.useMemo)(() => error && (0, _utils.formatErrorToValidation)(error), [error]);
+  (0, _react.useEffect)(() => {
+    setSelectedTime(null);
+    onChange({
+      [_constants.FIELD_KEYS.DATE]: selectedDay
+    });
+  }, [selectedDayIndex]);
+  (0, _react.useEffect)(() => {
+    onChange(currentValue => ({
+      ...currentValue,
+      [_constants.FIELD_KEYS.TIME]: selectedTime
+    }));
+  }, [selectedTime]);
+  const availableTimeSlots = options === null || options === void 0 || (_options$selectedDayI2 = options[selectedDayIndex]) === null || _options$selectedDayI2 === void 0 ? void 0 : _options$selectedDayI2.configuration.times;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container,
+    "data-testid": dataTestId
+  }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    actions: actions,
+    required: required
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.calendarContainer
+  }, /*#__PURE__*/_react.default.createElement(_pickers.MuiPickersUtilsProvider, {
+    utils: _dateFns.default,
+    locale: _es.default
+  }, /*#__PURE__*/_react.default.createElement(_pickers.DatePicker, {
+    disableToolbar: true,
+    variant: "static",
+    value: selectedDay,
+    onChange: () => null,
+    renderDay: (date, _, dayInCurrentMonth) => /*#__PURE__*/_react.default.createElement(_Day.default, {
+      date: date,
+      bookingOptions: options,
+      selectedDayIndex: selectedDayIndex,
+      setSelectedDayIndex: setSelectedDayIndex,
+      dayInCurrentMonth: dayInCurrentMonth,
+      setSelectedDay: setSelectedDayIndex
+    }),
+    minDate: new Date()
+  })), showLegend && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.bottomReference
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.legendReference
+  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    className: _stylesModule.default.legendLabel
+  }, "Sin horarios disponibles"))), timeSelection && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.timeRankContainer, " ").concat((0, _isEmpty.default)(availableTimeSlots) && _stylesModule.default.emptyTimeRankContainer)
+  }, !(0, _isEmpty.default)(availableTimeSlots) ? /*#__PURE__*/_react.default.createElement(_TimeInput.default, {
+    availableTimeSlots: availableTimeSlots,
+    selectedTime: selectedTime,
+    setSelectedTime: setSelectedTime
+  }) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.calendarIconWrapper
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    name: "IconCalendarEvent",
+    colorTheme: "gray",
+    size: _constants.ICON_SIZE_DEFAULT
+  })), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray"
+  }, selectedDay ? 'No hay horarios disponibles' : 'Debe seleccionar una fecha primero')))), validationData && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+    validationData: validationData
+  }));
+};
+Calendar.propTypes = {
+  actions: _propTypes.array,
+  dataTestId: _propTypes.string,
+  error: _propTypes.string,
+  onChange: _propTypes.func,
+  options: _propTypes.array,
+  required: _propTypes.bool,
+  showLegend: _propTypes.bool,
+  timeSelection: _propTypes.bool,
+  title: _propTypes.string,
+  value: _propTypes.object
+};
+var _default = exports.default = Calendar;

package/dist/components/UTCalendar/styles.module.scss

@@ -0,0 +1,122 @@
+@use '../../scss/variables/mediaQueries.module.scss' as *;
+
+
+$default-shadow-gray-bottom-1: 0px 3px 6px rgba(24, 44, 73, 0.1);
+
+.container {
+  display: flex;
+  grid-gap: 32px;
+  height: 100%;
+  max-width: 1200px;
+
+  width: 100%;
+
+  @media #{$tablet-mobile} {
+    flex-direction: column;
+  }
+}
+
+%containers {
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1, $default-shadow-gray-bottom-1);
+  display: flex;
+  padding:24px;
+}
+
+.calendarContainer {
+  @extend %containers;
+  padding: 16px;
+  flex-grow: 1;
+  
+
+  :global(.MuiPickersStaticWrapper-staticWrapperRoot) {
+    flex-grow: 1;
+  }
+
+  :global(.MuiPickersBasePicker-pickerView) {
+    justify-content: unset;
+    max-width: inherit;
+        height: 336px;
+  } 
+
+  :global(.MuiPickersSlideTransition-transitionContainer) {
+    text-transform: capitalize;
+
+  }
+
+  :global(.MuiPickersCalendar-week) {
+    background: var(--light03);
+    justify-content: flex-start;
+
+    > div {
+      border: 1px solid var(--light04);
+      min-width: 40px;
+      width: 100%;
+    }
+  }
+
+    :global(.MuiPickersCalendarHeader-daysHeader) {
+
+    > span {
+      color: var(--gray03);
+      width: 100%;
+    }
+  }
+
+ :global(.MuiPickersCalendarHeader-dayLabel) {
+    text-transform: uppercase;
+  }
+} 
+
+.timeRankContainer {
+  @extend %containers;
+  flex-grow: 1;
+
+  @media #{$tablet-mobile} {
+    width: unset;
+  }
+}
+
+.emptyTimeRankContainer {
+  align-items: center;
+  background-color: var(--light03);
+  border: 2px solid var(--light04);
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 16px;
+  justify-content: center;
+}
+
+.calendarIconWrapper {
+  background-color: var(--light04);
+  border-radius: 100px;
+  display: flex;
+  padding: 14px;
+}
+
+.legendLabel {
+  text-align: end;
+}
+
+.bottomReference {
+  align-items: center;
+  display: flex;
+  grid-gap: 12px;
+  justify-content: flex-end;
+  padding: 16px;
+}
+
+.legendReference {
+  background: var(--semanticError01);
+  border-radius: 2px;
+  height: 16px;
+  width: 16px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 16px;
+}

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';