@laerdal/life-react-components 3.5.1-dev.11 → 3.5.1-dev.12

package/dist/InputFields/RadioButton.d.ts

@@ -1,31 +1,55 @@
 import * as React from 'react';
 import { Size, Testable } from '../types';
-export type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {
+export declare type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {
+    /** Optional. Id of the component */
     id?: string;
+    /** Required. Current state of the component. */
     selected: boolean;
+    /** Required. Handler to be called when user selects/unselected the radio button. */
     select: (selected: boolean) => void;
+    /** Optional. Label to be shown on the right side of the radio button. */
     label?: string;
+    /** Optional. Secondary label to be shown under the main 'label' */
     additionalLabel?: string;
+    /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */
     invalid?: boolean;
+    /** Optional. If disabled, user can not interact with the component. */
     disabled?: boolean;
+    /** Optional. If set, then 'pointer-events: none' will be set on the component. */
     iconPointerEventsTransparent?: boolean;
+    /** Optional. Margin style attribute to be set on the top level tag of the component. */
     margin?: string;
-    size?: Size;
+    /** Optional. Size of the radio button, defaults to 'medium'. */
+    size?: Size.Small | Size.Medium | Size.Large;
+    /** Optional. TabIndex attribute to be set on the component. */
     tabIndexVal?: number;
+    /** Optional. Extra classname to be set on the container of the component. */
     className?: string;
 };
 declare const RadioButton: React.ForwardRefExoticComponent<Testable & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "tabIndex" | "onKeyDown" | "onClick" | "onMouseDown"> & {
+    /** Optional. Id of the component */
     id?: string | undefined;
+    /** Required. Current state of the component. */
     selected: boolean;
+    /** Required. Handler to be called when user selects/unselected the radio button. */
     select: (selected: boolean) => void;
+    /** Optional. Label to be shown on the right side of the radio button. */
     label?: string | undefined;
+    /** Optional. Secondary label to be shown under the main 'label' */
     additionalLabel?: string | undefined;
+    /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */
     invalid?: boolean | undefined;
+    /** Optional. If disabled, user can not interact with the component. */
     disabled?: boolean | undefined;
+    /** Optional. If set, then 'pointer-events: none' will be set on the component. */
     iconPointerEventsTransparent?: boolean | undefined;
+    /** Optional. Margin style attribute to be set on the top level tag of the component. */
     margin?: string | undefined;
-    size?: Size | undefined;
+    /** Optional. Size of the radio button, defaults to 'medium'. */
+    size?: Size.Small | Size.Medium | Size.Large | undefined;
+    /** Optional. TabIndex attribute to be set on the component. */
     tabIndexVal?: number | undefined;
+    /** Optional. Extra classname to be set on the container of the component. */
     className?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default RadioButton;

package/dist/InputFields/RadioButton.js

@@ -1,96 +1,54 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className", "dataTestId"];
-var _templateObject;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import * as React from 'react';
-import styled from 'styled-components';
-import { SystemIcons } from '../icons';
-import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
-import { Size } from '../types';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles';
-import { defaultOnMouseDownHandler } from '../common';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var StyledRadioButton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ", ";\n    }\n\n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}, COLORS.black, function (props) {
-  return props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600;
-}, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, COLORS.neutral_300, COLORS.primary_20, COLORS.primary_700);
-var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _size;
-  var id = _ref.id,
-    selected = _ref.selected,
-    label = _ref.label,
-    additionalLabel = _ref.additionalLabel,
-    invalid = _ref.invalid,
-    select = _ref.select,
-    disabled = _ref.disabled,
-    margin = _ref.margin,
-    iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
-    size = _ref.size,
-    tabIndexVal = _ref.tabIndexVal,
-    className = _ref.className,
-    dataTestId = _ref.dataTestId,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var onKeyPress = function onKeyPress(e) {
-    if (e.keyCode === 13 && !disabled) {
-      select(!selected);
-    }
-  };
-  size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
-  var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
-  return /*#__PURE__*/_jsxs(StyledRadioButton, _objectSpread(_objectSpread({
-    margin: margin,
-    ref: ref,
-    onClick: function onClick() {
-      return !disabled && select(!selected);
-    },
-    onMouseDown: defaultOnMouseDownHandler,
-    onKeyDown: onKeyPress,
-    disabled: disabled,
-    className: cls,
-    tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
-    invalid: invalid,
-    selected: selected
-  }, rest), {}, {
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: 'radio-button-icon',
-      id: id,
-      "data-testid": dataTestId,
-      children: [selected && /*#__PURE__*/_jsx(SystemIcons.RadioButtonOn, {
-        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
-        size: "24px"
-      }), !selected && /*#__PURE__*/_jsx(SystemIcons.RadioButtonOff, {
-        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
-        size: "24px"
-      })]
-    }), /*#__PURE__*/_jsxs("div", {
-      className: 'radio-button-label',
-      children: [label && /*#__PURE__*/_jsx("label", {
-        htmlFor: id,
-        children: label
-      }), additionalLabel !== undefined && /*#__PURE__*/_jsx("span", {
-        children: additionalLabel
-      })]
-    })]
-  }), id);
-});
-RadioButton.propTypes = {
-  id: _pt.string,
-  selected: _pt.bool.isRequired,
-  select: _pt.func.isRequired,
-  label: _pt.string,
-  additionalLabel: _pt.string,
-  invalid: _pt.bool,
-  disabled: _pt.bool,
-  iconPointerEventsTransparent: _pt.bool,
-  margin: _pt.string,
-  tabIndexVal: _pt.number,
-  className: _pt.string
-};
-export default RadioButton;
-//# sourceMappingURL=RadioButton.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { SystemIcons } from '../icons';
+import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
+import { Size } from '../types';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+var StyledRadioButton = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ", ";\n    }\n\n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"], ["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ", ";\n    }\n\n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) { return (props.margin ? "margin: ".concat(props.margin, ";") : ''); }, COLORS.black, function (props) { return (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600); }, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, COLORS.neutral_300, COLORS.primary_20, COLORS.primary_700);
+var RadioButton = React.forwardRef(function (_a, ref) {
+    var id = _a.id, selected = _a.selected, label = _a.label, additionalLabel = _a.additionalLabel, invalid = _a.invalid, select = _a.select, disabled = _a.disabled, margin = _a.margin, iconPointerEventsTransparent = _a.iconPointerEventsTransparent, size = _a.size, tabIndexVal = _a.tabIndexVal, className = _a.className, dataTestId = _a.dataTestId, rest = __rest(_a, ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className", "dataTestId"]);
+    var onKeyPress = function (e) {
+        if (e.keyCode === 13 && !disabled) {
+            select(!selected);
+        }
+    };
+    size = size !== null && size !== void 0 ? size : Size.Medium;
+    var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
+    return (React.createElement(StyledRadioButton, __assign({ key: id, margin: margin, ref: ref, onClick: function () { return !disabled && select(!selected); }, onMouseDown: defaultOnMouseDownHandler, onKeyDown: onKeyPress, disabled: disabled, className: cls, tabIndex: disabled ? -1 : (tabIndexVal ? tabIndexVal : 0), invalid: invalid, selected: selected }, rest),
+        React.createElement("div", { className: 'radio-button-icon', id: id, "data-testid": dataTestId },
+            selected && React.createElement(SystemIcons.RadioButtonOn, { className: iconPointerEventsTransparent ? 'pointerTransparent' : '', size: "24px" }),
+            !selected &&
+                React.createElement(SystemIcons.RadioButtonOff, { className: iconPointerEventsTransparent ? 'pointerTransparent' : '', size: "24px" })),
+        React.createElement("div", { className: 'radio-button-label' },
+            label && React.createElement("label", { htmlFor: id }, label),
+            additionalLabel !== undefined && React.createElement("span", null, additionalLabel))));
+});
+export default RadioButton;
+var templateObject_1;

package/dist/InputFields/ResponsiveComponentWrapper.d.ts

@@ -3,7 +3,7 @@
  */
 import * as React from 'react';
 import { Size } from '../types';
-type LabelProps = {
+declare type LabelProps = {
     size?: Size.Small | Size.Medium;
     children?: any;
 };

package/dist/InputFields/ResponsiveComponentWrapper.js

@@ -1,48 +1,24 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _pt from "prop-types";
 /**
  * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
-
+ */
+import * as React from 'react';
+import { Size } from '../types';
 /**
  * Import custom styles.
- */
-import { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';
-
-// Add component-specific types
-import { jsx as _jsx } from "react/jsx-runtime";
-var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
-  var children = _ref.children,
-    size = _ref.size;
-  // Globally used variables within the component
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isMediumView = _React$useState2[0],
-    setIsMediumView = _React$useState2[1];
-  React.useEffect(function () {
-    var handleResize = function handleResize() {
-      var mql = window.matchMedia("".concat(BREAKPOINTS.MEDIUM.replace('@media ', '')));
-      setIsMediumView(mql.matches);
-    };
-    window.addEventListener('resize', handleResize);
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-  return size && size === Size.Medium ? /*#__PURE__*/_jsx(ComponentXS, {
-    children: children
-  }) : size && size === Size.Small ? /*#__PURE__*/_jsx(ComponentXXS, {
-    children: children
-  }) : isMediumView ? /*#__PURE__*/_jsx(ComponentXS, {
-    children: children
-  }) : /*#__PURE__*/_jsx(ComponentXXS, {
-    children: children
-  });
-};
-ReponsiveComponentWrapper.propTypes = {
-  children: _pt.any
-};
-export default ReponsiveComponentWrapper;
-//# sourceMappingURL=ResponsiveComponentWrapper.js.map
+ */
+import { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';
+var ReponsiveComponentWrapper = function (_a) {
+    var children = _a.children, size = _a.size;
+    // Globally used variables within the component
+    var _b = React.useState(false), isMediumView = _b[0], setIsMediumView = _b[1];
+    React.useEffect(function () {
+        var handleResize = function () {
+            var mql = window.matchMedia("".concat(BREAKPOINTS.MEDIUM.replace('@media ', '')));
+            setIsMediumView(mql.matches);
+        };
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    return size && size === Size.Medium ? (React.createElement(ComponentXS, null, children)) : size && size === Size.Small ? (React.createElement(ComponentXXS, null, children)) : isMediumView ? (React.createElement(ComponentXS, null, children)) : (React.createElement(ComponentXXS, null, children));
+};
+export default ReponsiveComponentWrapper;

package/dist/InputFields/RichTextField.d.ts

@@ -29,24 +29,81 @@ export declare enum RichTextFieldFormats {
     Video = "video"
 }
 export interface RichTextFieldProps {
+    /**
+     * Optional. The ID of the rich text field.
+     */
     id?: string;
+    /**
+     * Optional. The CSS class name of the rich text field.
+     */
     className?: string;
+    /**
+     * Optional. The placeholder text to be displayed in the rich text field when it is empty.
+     */
     placeholder?: string;
+    /**
+     * Optional. A boolean indicating whether the rich text field is read-only.
+     */
     readOnly?: boolean;
+    /**
+     * Optional. A boolean indicating whether the rich text field is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Optional. A boolean indicating whether the rich text field is resizable.
+     */
     resizable?: boolean;
+    /**
+     * Optional. An object containing the modules to be used by the rich text field.
+     */
     modules?: StringMap;
+    /**
+     * Optional. An array of formats to be used by the rich text field.
+     */
     formats?: RichTextFieldFormats[];
+    /**
+     * Optional. A function to be called when the rich text field gains focus.
+     */
     onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;
+    /**
+     * Optional. A function to be called when the rich text field loses focus.
+     */
     onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;
+    /**
+     * Optional. A function to be called when a keydown event occurs in the rich text field.
+     */
     onKeyDown?: React.EventHandler<any>;
+    /**
+     * Optional. A function to be called when a keypress event occurs in the rich text field.
+     */
     onKeyPress?: React.EventHandler<any>;
+    /**
+     * Optional. A function to be called when a keyup event occurs in the rich text field.
+     */
     onKeyUp?: React.EventHandler<any>;
+    /**
+     * Required. The current value of the rich text field.
+     */
     value: any;
+    /**
+     * Required. A function to be called when the value of the rich text field changes.
+     */
     onChange: (value: any) => void;
+    /**
+     * Optional. The validation message to be displayed when the rich text field is in an error state.
+     */
     validationMessage?: string;
+    /**
+     * Optional. A note to be displayed below the rich text field.
+     */
     note?: TextFieldNote;
+    /**
+     * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.
+     */
     size?: Size.Small | Size.Medium;
+    /**
+     * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.
+     */
     state?: States.Invalid | States.Valid;
 }
 export declare const RichTextField: React.ForwardRefExoticComponent<RichTextFieldProps & React.RefAttributes<any>>;

package/dist/InputFields/RichTextField.js

@@ -1,111 +1,83 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"];
-var _templateObject;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React from 'react';
-import ReactQuill from "react-quill";
-import styled from "styled-components";
-import { NoteMessage, readOnlyState, ValidationMessage } from "./styling";
-import { Size, States } from "../types";
-import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling } from "../styles";
-import { CheckMark, TechnicalWarning } from "../icons/systemicons";
-import 'react-quill/dist/quill.snow.css';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var RichTextFieldContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .quill {\n    width: 100%;\n    margin-bottom: 4px;\n    overflow: hidden;\n\n    box-shadow: inset 0 0 0 1px ", ";\n    border-radius: 4px;\n  }\n\n  .quill.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .ql-editor,\n  .ql-editor p{\n    ", "\n  }\n\n  .ql-editor.ql-blank::before {\n    ", "\n  }\n\n  &.medium {\n    .ql-editor,\n    .ql-editor p{\n      ", "\n    }\n\n    .ql-editor.ql-blank::before {\n      ", "\n    }\n  }\n\n  .ql-toolbar.ql-snow {\n    border: none;\n    padding: 8px 7px;\n    margin: 0 1px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .quill.valid .ql-toolbar,\n  .quill.invalid .ql-toolbar,\n  .quill:hover .ql-toolbar,\n  .quill:focus-within .ql-toolbar {\n    padding: 8px 6px;\n    margin: 0 2px;\n  }\n\n  .ql-container {\n    font-family: unset !important;\n  }\n\n  .ql-container.ql-snow {\n    border: none;\n    overflow-y: hidden;\n    padding: 8px;\n  }\n\n  .ql-editor {\n    padding: 8px;\n    overflow-y: auto;\n\n    ", "\n  }\n\n  &.resizable {\n    height: initial;\n\n    .quill {\n      flex: none;\n      overflow: initial;\n    }\n\n    .ql-container {\n      flex: none;\n      resize: vertical;\n    }\n\n    .ql-editor {\n      height: 100%;\n    }\n  }\n\n  &.readonly {\n    .quill {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    .quill {\n      pointer-events: none;\n      box-shadow: inset 0 0 0 1px ", ";\n      color: ", ";\n\n      .ql-editor.ql-blank::before {\n        color: ", ";\n      }\n    }\n  }\n"])), COLORS.neutral_400, COLORS.correct_500, COLORS.critical_500, COLORS.primary_700, COLORS.primary_800, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.neutral_200, scrollBarStyling(Size.Small), readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300);
-export var RichTextFieldFormats;
-(function (RichTextFieldFormats) {
-  RichTextFieldFormats["Background"] = "background";
-  RichTextFieldFormats["Bold"] = "bold";
-  RichTextFieldFormats["Color"] = "color";
-  RichTextFieldFormats["Font"] = "font";
-  RichTextFieldFormats["Code"] = "code";
-  RichTextFieldFormats["Italic"] = "italic";
-  RichTextFieldFormats["Link"] = "link";
-  RichTextFieldFormats["Size"] = "size";
-  RichTextFieldFormats["Strike"] = "strike";
-  RichTextFieldFormats["Script"] = "script";
-  RichTextFieldFormats["Underline"] = "underline";
-  RichTextFieldFormats["Blockquote"] = "blockquote";
-  RichTextFieldFormats["Header"] = "header";
-  RichTextFieldFormats["Indent"] = "indent";
-  RichTextFieldFormats["List"] = "list";
-  RichTextFieldFormats["Align"] = "align";
-  RichTextFieldFormats["Direction"] = "direction";
-  RichTextFieldFormats["CodeBlock"] = "code-block";
-  RichTextFieldFormats["Formula"] = "formula";
-  RichTextFieldFormats["Image"] = "image";
-  RichTextFieldFormats["Video"] = "video";
-})(RichTextFieldFormats || (RichTextFieldFormats = {}));
-var defaultToolBarOptions = [[{
-  header: [1, 2, 3, false]
-}], ['bold', 'italic', 'underline', 'strike'], [{
-  'list': 'ordered'
-}, {
-  'list': 'bullet'
-}], ['link'], ['clean']];
-export var RichTextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _modules$toolbar;
-  var readOnly = _ref.readOnly,
-    disabled = _ref.disabled,
-    validationMessage = _ref.validationMessage,
-    note = _ref.note,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? Size.Medium : _ref$size,
-    state = _ref.state,
-    resizable = _ref.resizable,
-    modules = _ref.modules,
-    formats = _ref.formats,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var m = _objectSpread(_objectSpread({}, modules !== null && modules !== void 0 ? modules : {}), {}, {
-    toolbar: (_modules$toolbar = modules === null || modules === void 0 ? void 0 : modules.toolbar) !== null && _modules$toolbar !== void 0 ? _modules$toolbar : defaultToolBarOptions
-  });
-  var f = formats !== null && formats !== void 0 ? formats : Object.values(RichTextFieldFormats).filter(function (a) {
-    return a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula;
-  });
-  return /*#__PURE__*/_jsxs(RichTextFieldContainer, {
-    className: "".concat(resizable ? 'resizable' : '', " ").concat(size, " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', "  ").concat(disabled ? 'disabled' : ''),
-    children: [/*#__PURE__*/_jsx(ReactQuill, _objectSpread({
-      ref: ref,
-      readOnly: readOnly || disabled,
-      modules: m,
-      theme: 'snow',
-      formats: f
-    }, rest)), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
-      className: size || '',
-      type: state !== null && state !== void 0 ? state : States.Invalid,
-      children: [state === States.Valid ? /*#__PURE__*/_jsx(CheckMark, {
-        color: COLORS.correct_400
-      }) : /*#__PURE__*/_jsx(TechnicalWarning, {
-        color: COLORS.critical_400
-      }), /*#__PURE__*/_jsx("span", {
-        children: validationMessage
-      })]
-    }), note && !disabled && /*#__PURE__*/_jsxs(NoteMessage, {
-      className: size,
-      children: [note.icon, /*#__PURE__*/_jsx("span", {
-        children: note.message
-      })]
-    })]
-  });
-});
-RichTextField.propTypes = {
-  id: _pt.string,
-  className: _pt.string,
-  placeholder: _pt.string,
-  readOnly: _pt.bool,
-  disabled: _pt.bool,
-  resizable: _pt.bool,
-  formats: _pt.arrayOf(_pt.oneOf(["background", "bold", "color", "font", "code", "italic", "link", "size", "strike", "script", "underline", "blockquote", "header", "indent", "list", "align", "direction", "code-block", "formula", "image", "video"])),
-  onKeyDown: _pt.func,
-  onKeyPress: _pt.func,
-  onKeyUp: _pt.func,
-  value: _pt.any.isRequired,
-  onChange: _pt.func.isRequired,
-  validationMessage: _pt.string
-};
-//# sourceMappingURL=RichTextField.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import ReactQuill from "react-quill";
+import styled from "styled-components";
+import { NoteMessage, readOnlyState, ValidationMessage } from "./styling";
+import { Size, States } from "../types";
+import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling } from "../styles";
+import { CheckMark, TechnicalWarning } from "../icons/systemicons";
+import 'react-quill/dist/quill.snow.css';
+export var RichTextFieldContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .quill {\n    width: 100%;\n    margin-bottom: 4px;\n    overflow: hidden;\n\n    box-shadow: inset 0 0 0 1px ", ";\n    border-radius: 4px;\n  }\n\n  .quill.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .ql-editor,\n  .ql-editor p{\n    ", "\n  }\n\n  .ql-editor.ql-blank::before {\n    ", "\n  }\n\n  &.medium {\n    .ql-editor,\n    .ql-editor p{\n      ", "\n    }\n\n    .ql-editor.ql-blank::before {\n      ", "\n    }\n  }\n\n  .ql-toolbar.ql-snow {\n    border: none;\n    padding: 8px 7px;\n    margin: 0 1px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .quill.valid .ql-toolbar,\n  .quill.invalid .ql-toolbar,\n  .quill:hover .ql-toolbar,\n  .quill:focus-within .ql-toolbar {\n    padding: 8px 6px;\n    margin: 0 2px;\n  }\n\n  .ql-container {\n    font-family: unset !important;\n  }\n\n  .ql-container.ql-snow {\n    border: none;\n    overflow-y: hidden;\n    padding: 8px;\n  }\n\n  .ql-editor {\n    padding: 8px;\n    overflow-y: auto;\n\n    ", "\n  }\n\n  &.resizable {\n    height: initial;\n\n    .quill {\n      flex: none;\n      overflow: initial;\n    }\n\n    .ql-container {\n      flex: none;\n      resize: vertical;\n    }\n\n    .ql-editor {\n      height: 100%;\n    }\n  }\n\n  &.readonly {\n    .quill {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    .quill {\n      pointer-events: none;\n      box-shadow: inset 0 0 0 1px ", ";\n      color: ", ";\n\n      .ql-editor.ql-blank::before {\n        color: ", ";\n      }\n    }\n  }\n"], ["\n  .quill {\n    width: 100%;\n    margin-bottom: 4px;\n    overflow: hidden;\n\n    box-shadow: inset 0 0 0 1px ", ";\n    border-radius: 4px;\n  }\n\n  .quill.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .ql-editor,\n  .ql-editor p{\n    ", "\n  }\n\n  .ql-editor.ql-blank::before {\n    ", "\n  }\n\n  &.medium {\n    .ql-editor,\n    .ql-editor p{\n      ", "\n    }\n\n    .ql-editor.ql-blank::before {\n      ", "\n    }\n  }\n\n  .ql-toolbar.ql-snow {\n    border: none;\n    padding: 8px 7px;\n    margin: 0 1px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .quill.valid .ql-toolbar,\n  .quill.invalid .ql-toolbar,\n  .quill:hover .ql-toolbar,\n  .quill:focus-within .ql-toolbar {\n    padding: 8px 6px;\n    margin: 0 2px;\n  }\n\n  .ql-container {\n    font-family: unset !important;\n  }\n\n  .ql-container.ql-snow {\n    border: none;\n    overflow-y: hidden;\n    padding: 8px;\n  }\n\n  .ql-editor {\n    padding: 8px;\n    overflow-y: auto;\n\n    ", "\n  }\n\n  &.resizable {\n    height: initial;\n\n    .quill {\n      flex: none;\n      overflow: initial;\n    }\n\n    .ql-container {\n      flex: none;\n      resize: vertical;\n    }\n\n    .ql-editor {\n      height: 100%;\n    }\n  }\n\n  &.readonly {\n    .quill {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    .quill {\n      pointer-events: none;\n      box-shadow: inset 0 0 0 1px ", ";\n      color: ", ";\n\n      .ql-editor.ql-blank::before {\n        color: ", ";\n      }\n    }\n  }\n"])), COLORS.neutral_400, COLORS.correct_500, COLORS.critical_500, COLORS.primary_700, COLORS.primary_800, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.neutral_200, scrollBarStyling(Size.Small), readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300);
+export var RichTextFieldFormats;
+(function (RichTextFieldFormats) {
+    RichTextFieldFormats["Background"] = "background";
+    RichTextFieldFormats["Bold"] = "bold";
+    RichTextFieldFormats["Color"] = "color";
+    RichTextFieldFormats["Font"] = "font";
+    RichTextFieldFormats["Code"] = "code";
+    RichTextFieldFormats["Italic"] = "italic";
+    RichTextFieldFormats["Link"] = "link";
+    RichTextFieldFormats["Size"] = "size";
+    RichTextFieldFormats["Strike"] = "strike";
+    RichTextFieldFormats["Script"] = "script";
+    RichTextFieldFormats["Underline"] = "underline";
+    RichTextFieldFormats["Blockquote"] = "blockquote";
+    RichTextFieldFormats["Header"] = "header";
+    RichTextFieldFormats["Indent"] = "indent";
+    RichTextFieldFormats["List"] = "list";
+    RichTextFieldFormats["Align"] = "align";
+    RichTextFieldFormats["Direction"] = "direction";
+    RichTextFieldFormats["CodeBlock"] = "code-block";
+    RichTextFieldFormats["Formula"] = "formula";
+    RichTextFieldFormats["Image"] = "image";
+    RichTextFieldFormats["Video"] = "video";
+})(RichTextFieldFormats || (RichTextFieldFormats = {}));
+var defaultToolBarOptions = [
+    [{ header: [1, 2, 3, false] }],
+    ['bold', 'italic', 'underline', 'strike'],
+    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+    ['link'],
+    ['clean']
+];
+export var RichTextField = React.forwardRef(function (_a, ref) {
+    var _b;
+    var readOnly = _a.readOnly, disabled = _a.disabled, validationMessage = _a.validationMessage, note = _a.note, _c = _a.size, size = _c === void 0 ? Size.Medium : _c, state = _a.state, resizable = _a.resizable, modules = _a.modules, formats = _a.formats, rest = __rest(_a, ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"]);
+    var m = __assign(__assign({}, (modules !== null && modules !== void 0 ? modules : {})), { toolbar: (_b = modules === null || modules === void 0 ? void 0 : modules.toolbar) !== null && _b !== void 0 ? _b : defaultToolBarOptions });
+    var f = formats !== null && formats !== void 0 ? formats : Object.values(RichTextFieldFormats).filter(function (a) { return a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula; });
+    return (React.createElement(RichTextFieldContainer, { className: "".concat(resizable ? 'resizable' : '', " ").concat(size, " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', "  ").concat(disabled ? 'disabled' : '') },
+        React.createElement(ReactQuill, __assign({ ref: ref, readOnly: readOnly || disabled, modules: m, theme: 'snow', formats: f }, rest)),
+        validationMessage && (React.createElement(ValidationMessage, { className: size || '', type: state !== null && state !== void 0 ? state : States.Invalid },
+            state === States.Valid
+                ? React.createElement(CheckMark, { color: COLORS.correct_400 })
+                : React.createElement(TechnicalWarning, { color: COLORS.critical_400 }),
+            React.createElement("span", null, validationMessage))),
+        note && !disabled && (React.createElement(NoteMessage, { className: size },
+            note.icon,
+            React.createElement("span", null, note.message)))));
+});
+var templateObject_1;