@laerdal/life-react-components 3.5.2 → 3.6.0

package/dist/InputFields/RadioButton.d.ts

@@ -1,55 +1,31 @@
 import * as React from 'react';
 import { Size, Testable } from '../types';
 export 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;
-    /** 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. */
+    size?: Size;
     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;
-    /** 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. */
+    size?: Size | undefined;
     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

@@ -4,8 +4,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
 import styled from 'styled-components';
 import { SystemIcons } from '../icons';
@@ -17,37 +17,9 @@ 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, ";") : '';
-}, function (props) {
-  return COLORS.getColor('black', props.theme);
-}, function (props) {
-  return props.selected ? COLORS.getColor('primary_500', props.theme) : props.invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme);
-}, function (props) {
-  return ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
-}, function (props) {
-  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
-}, function (props) {
-  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
-}, function (props) {
-  return ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
-}, focusStyles, function (props) {
-  return COLORS.getColor('primary_20', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return COLORS.getColor('white', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_20', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_700', props.theme);
-});
+}, 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,

package/dist/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledRadioButton","div","_templateObject","_taggedTemplateLiteral","props","margin","concat","getColor","theme","selected","invalid","Regular","RadioButton","forwardRef","_ref","ref","_size","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","Medium","cls","_objectSpread","onClick","onMouseDown","onKeyDown","tabIndex","children","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_pt","string","bool","isRequired","func","number"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .radio-button-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.selected ? COLORS.getColor('primary_500', props.theme) : props.invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\r\n    }\r\n  }\r\n\r\n  .radio-button-label {\r\n    user-select: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    label {\r\n      cursor: inherit;\r\n    }\r\n\r\n    span {\r\n      ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):hover {\r\n    .radio-button-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):active {\r\n    .radio-button-icon {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .radio-button-icon,\r\n    .radio-button-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .radio-button-icon {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .radio-button-icon svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .radio-button-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {\r\n  /** Optional. Id of the component */\r\n  id?: string;\r\n  /** Required. Current state of the component. */\r\n  selected: boolean;\r\n  /** Required. Handler to be called when user selects/unselected the radio button. */\r\n  select: (selected: boolean) => void;\r\n  /** Optional. Label to be shown on the right side of the radio button. */\r\n  label?: string;\r\n  /** Optional. Secondary label to be shown under the main 'label' */\r\n  additionalLabel?: string;\r\n  /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */\r\n  invalid?: boolean;\r\n  /** Optional. If disabled, user can not interact with the component. */\r\n  disabled?: boolean;\r\n  /** Optional. If set, then 'pointer-events: none' will be set on the component. */\r\n  iconPointerEventsTransparent?: boolean;\r\n  /** Optional. Margin style attribute to be set on the top level tag of the component. */\r\n  margin?: string;\r\n  /** Optional. Size of the radio button, defaults to 'medium'. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Optional. TabIndex attribute to be set on the component. */\r\n  tabIndexVal?: number;\r\n  /** Optional. Extra classname to be set on the container of the component. */\r\n  className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\r\n                                                               id,\r\n                                                               selected,\r\n                                                               label,\r\n                                                               additionalLabel,\r\n                                                               invalid,\r\n                                                               select,\r\n                                                               disabled,\r\n                                                               margin,\r\n                                                               iconPointerEventsTransparent,\r\n                                                               size,\r\n                                                               tabIndexVal,\r\n                                                               className,\r\n                                                               dataTestId,\r\n                                                               ...rest\r\n                                                             }: RadioButtonProps, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled) {\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\r\n\r\n  return (\r\n    <StyledRadioButton key={id}\r\n                       margin={margin}\r\n                       ref={ref}\r\n                       onClick={() => !disabled && select(!selected)}\r\n                       onMouseDown={defaultOnMouseDownHandler}\r\n                       onKeyDown={onKeyPress}\r\n                       disabled={disabled}\r\n                       className={cls}\r\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                       invalid={invalid}\r\n                       selected={selected}\r\n                       {...rest}>\r\n      <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n        {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n        {!selected &&\r\n          <SystemIcons.RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n      </div>\r\n      <div className={'radio-button-label'}>\r\n        {label && <label htmlFor={id}>{label}</label>}\r\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\r\n      </div>\r\n    </StyledRadioButton>\r\n  );\r\n});\r\n\r\nexport default RadioButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RadioButton.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","StyledRadioButton","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","onKeyPress","e","keyCode","Medium","cls","undefined"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${COLORS.black};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .radio-button-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\r\n    }\r\n  }\r\n\r\n  .radio-button-label {\r\n    user-select: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    label {\r\n      cursor: inherit;\r\n    }\r\n\r\n    span {\r\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):hover {\r\n    .radio-button-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):active {\r\n    .radio-button-icon {\r\n      background: ${COLORS.primary_100};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${COLORS.neutral_300};\r\n\r\n    .radio-button-icon,\r\n    .radio-button-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .radio-button-icon {\r\n      background-color: ${COLORS.white};\r\n    }\r\n\r\n    .radio-button-icon svg {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .radio-button-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {\r\n  id?: string;\r\n  selected: boolean;\r\n  select: (selected: boolean) => void;\r\n  label?: string;\r\n  additionalLabel?: string;\r\n  invalid?: boolean;\r\n  disabled?: boolean;\r\n  iconPointerEventsTransparent?: boolean;\r\n  margin?: string;\r\n  size?: Size;\r\n  tabIndexVal?: number;\r\n  className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\r\n                                                               id,\r\n                                                               selected,\r\n                                                               label,\r\n                                                               additionalLabel,\r\n                                                               invalid,\r\n                                                               select,\r\n                                                               disabled,\r\n                                                               margin,\r\n                                                               iconPointerEventsTransparent,\r\n                                                               size,\r\n                                                               tabIndexVal,\r\n                                                               className,\r\n                                                               dataTestId,\r\n                                                               ...rest\r\n                                                             }: RadioButtonProps, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled) {\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\r\n\r\n  return (\r\n    <StyledRadioButton key={id}\r\n                       margin={margin}\r\n                       ref={ref}\r\n                       onClick={() => !disabled && select(!selected)}\r\n                       onMouseDown={defaultOnMouseDownHandler}\r\n                       onKeyDown={onKeyPress}\r\n                       disabled={disabled}\r\n                       className={cls}\r\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                       invalid={invalid}\r\n                       selected={selected}\r\n                       {...rest}>\r\n      <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n        {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n        {!selected &&\r\n          <SystemIcons.RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n      </div>\r\n      <div className={'radio-button-label'}>\r\n        {label && <label htmlFor={id}>{label}</label>}\r\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\r\n      </div>\r\n    </StyledRadioButton>\r\n  );\r\n});\r\n\r\nexport default RadioButton;\r\n"],"mappings":"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"}

package/dist/InputFields/ResponsiveComponentWrapper.cjs

@@ -5,15 +5,15 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _types = require("../types");
 var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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; }
 /**
  * Import React libraries.
  */
@@ -22,14 +22,12 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * Import custom styles.
  */
 
-// Add component-specific types
-
 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 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     isMediumView = _React$useState2[0],
     setIsMediumView = _React$useState2[1];
   React.useEffect(function () {
@@ -53,8 +51,8 @@ var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
   });
 };
 ReponsiveComponentWrapper.propTypes = {
-  children: _propTypes["default"].any
+  children: _propTypes.default.any
 };
 var _default = ReponsiveComponentWrapper;
-exports["default"] = _default;
+exports.default = _default;
 //# sourceMappingURL=ResponsiveComponentWrapper.cjs.map

package/dist/InputFields/ResponsiveComponentWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveComponentWrapper.cjs","names":["React","_interopRequireWildcard","require","_types","_styles","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ReponsiveComponentWrapper","_ref","children","size","_React$useState","useState","_React$useState2","_slicedToArray2","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","concat","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","removeEventListener","Size","Medium","jsx","ComponentXS","Small","ComponentXXS","propTypes","_propTypes","any","_default","exports"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  size?: Size.Small | Size.Medium;\r\n  children?: any;\r\n};\r\n\r\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\r\n      setIsMediumView(mql.matches);\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  return size && size === Size.Medium ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : size && size === Size.Small ? (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  ) : isMediumView ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  );\r\n};\r\n\r\nexport default ReponsiveComponentWrapper;\r\n"],"mappings":";;;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAF,OAAA;AAAmE,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,cAAAR,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AATnE;AACA;AACA;;AAIA;AACA;AACA;;AAGA;;AAMA,IAAMW,yBAA8D,GAAG,SAAjEA,yBAA8DA,CAAAC,IAAA,EAAuC;EAAA,IAAjCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI;EACtF;EACA,IAAAC,eAAA,GAAwC9B,KAAK,CAAC+B,QAAQ,CAAU,KAAK,CAAC;IAAAC,gBAAA,OAAAC,eAAA,aAAAH,eAAA;IAA/DI,YAAY,GAAAF,gBAAA;IAAEG,eAAe,GAAAH,gBAAA;EAEpChC,KAAK,CAACoC,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,IAAAC,MAAA,CAAIC,mBAAW,CAACC,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAE,CAAC;MAC7ET,eAAe,CAACG,GAAG,CAACO,OAAO,CAAC;IAC9B,CAAC;IACDN,MAAM,CAACO,gBAAgB,CAAC,QAAQ,EAAET,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACQ,mBAAmB,CAAC,QAAQ,EAAEV,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOR,IAAI,IAAIA,IAAI,KAAKmB,WAAI,CAACC,MAAM,gBACjC,IAAA5C,WAAA,CAAA6C,GAAA,EAAC9C,OAAA,CAAA+C,WAAW;IAAAvB,QAAA,EAAEA;EAAQ,CAAc,CAAC,GACnCC,IAAI,IAAIA,IAAI,KAAKmB,WAAI,CAACI,KAAK,gBAC7B,IAAA/C,WAAA,CAAA6C,GAAA,EAAC9C,OAAA,CAAAiD,YAAY;IAAAzB,QAAA,EAAEA;EAAQ,CAAe,CAAC,GACrCM,YAAY,gBACd,IAAA7B,WAAA,CAAA6C,GAAA,EAAC9C,OAAA,CAAA+C,WAAW;IAAAvB,QAAA,EAAEA;EAAQ,CAAc,CAAC,gBAErC,IAAAvB,WAAA,CAAA6C,GAAA,EAAC9C,OAAA,CAAAiD,YAAY;IAAAzB,QAAA,EAAEA;EAAQ,CAAe,CACvC;AACH,CAAC;AAACF,yBAAA,CAAA4B,SAAA;EAzBA1B,QAAQ,EAAA2B,UAAA,YAAAC;AAAA;AAAA,IAAAC,QAAA,GA2BK/B,yBAAyB;AAAAgC,OAAA,cAAAD,QAAA","ignoreList":[]}
+{"version":3,"file":"ResponsiveComponentWrapper.cjs","names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","removeEventListener","Size","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  size?: Size.Small | Size.Medium;\r\n  children?: any;\r\n};\r\n\r\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\r\n      setIsMediumView(mql.matches);\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  return size && size === Size.Medium ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : size && size === Size.Small ? (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  ) : isMediumView ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  );\r\n};\r\n\r\nexport default ReponsiveComponentWrapper;\r\n"],"mappings":";;;;;;;;;;AAGA;AACA;AAKA;AAAmE;AAAA;AAAA;AATnE;AACA;AACA;;AAIA;AACA;AACA;;AASA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAA8D,OAAuC;EAAA,IAAjCC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EACtF;EACA,sBAAwCC,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/DC,YAAY;IAAEC,eAAe;EAEpCH,KAAK,CAACI,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,WAAIC,mBAAW,CAACC,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAG;MAC7ER,eAAe,CAACG,GAAG,CAACM,OAAO,CAAC;IAC9B,CAAC;IACDL,MAAM,CAACM,gBAAgB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACO,mBAAmB,CAAC,QAAQ,EAAET,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAON,IAAI,IAAIA,IAAI,KAAKgB,WAAI,CAACC,MAAM,gBACjC,qBAAC,mBAAW;IAAA,UAAElB;EAAQ,EAAe,GACnCC,IAAI,IAAIA,IAAI,KAAKgB,WAAI,CAACE,KAAK,gBAC7B,qBAAC,oBAAY;IAAA,UAAEnB;EAAQ,EAAgB,GACrCI,YAAY,gBACd,qBAAC,mBAAW;IAAA,UAAEJ;EAAQ,EAAe,gBAErC,qBAAC,oBAAY;IAAA,UAAEA;EAAQ,EACxB;AACH,CAAC;AAAC;EAzBAA,QAAQ;AAAA;AAAA,eA2BKD,yBAAyB;AAAA"}

package/dist/InputFields/ResponsiveComponentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveComponentWrapper.js","names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","jsx","_jsx","ReponsiveComponentWrapper","_ref","children","size","_React$useState","useState","_React$useState2","_slicedToArray","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","concat","MEDIUM","replace","matches","addEventListener","removeEventListener","Medium","Small","propTypes","_pt","any"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  size?: Size.Small | Size.Medium;\r\n  children?: any;\r\n};\r\n\r\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\r\n      setIsMediumView(mql.matches);\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  return size && size === Size.Medium ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : size && size === Size.Small ? (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  ) : isMediumView ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  );\r\n};\r\n\r\nexport default ReponsiveComponentWrapper;\r\n"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,UAAU;;AAE/B;AACA;AACA;AACA,SAASC,WAAW,EAAEC,YAAY,EAAEC,WAAW,QAAQ,WAAW;;AAElE;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAA8DA,CAAAC,IAAA,EAAuC;EAAA,IAAjCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI;EACtF;EACA,IAAAC,eAAA,GAAwCX,KAAK,CAACY,QAAQ,CAAU,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAA/DI,YAAY,GAAAF,gBAAA;IAAEG,eAAe,GAAAH,gBAAA;EAEpCb,KAAK,CAACiB,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,IAAAC,MAAA,CAAIpB,WAAW,CAACqB,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAE,CAAC;MAC7ER,eAAe,CAACG,GAAG,CAACM,OAAO,CAAC;IAC9B,CAAC;IACDL,MAAM,CAACM,gBAAgB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACO,mBAAmB,CAAC,QAAQ,EAAET,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOR,IAAI,IAAIA,IAAI,KAAKT,IAAI,CAAC2B,MAAM,gBACjCtB,IAAA,CAACF,WAAW;IAAAK,QAAA,EAAEA;EAAQ,CAAc,CAAC,GACnCC,IAAI,IAAIA,IAAI,KAAKT,IAAI,CAAC4B,KAAK,gBAC7BvB,IAAA,CAACH,YAAY;IAAAM,QAAA,EAAEA;EAAQ,CAAe,CAAC,GACrCM,YAAY,gBACdT,IAAA,CAACF,WAAW;IAAAK,QAAA,EAAEA;EAAQ,CAAc,CAAC,gBAErCH,IAAA,CAACH,YAAY;IAAAM,QAAA,EAAEA;EAAQ,CAAe,CACvC;AACH,CAAC;AAACF,yBAAA,CAAAuB,SAAA;EAzBArB,QAAQ,EAAAsB,GAAA,CAAAC;AAAA;AA2BV,eAAezB,yBAAyB","ignoreList":[]}
+{"version":3,"file":"ResponsiveComponentWrapper.js","names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","removeEventListener","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  size?: Size.Small | Size.Medium;\r\n  children?: any;\r\n};\r\n\r\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\r\n      setIsMediumView(mql.matches);\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  return size && size === Size.Medium ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : size && size === Size.Small ? (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  ) : isMediumView ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  );\r\n};\r\n\r\nexport default ReponsiveComponentWrapper;\r\n"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,UAAU;;AAE/B;AACA;AACA;AACA,SAASC,WAAW,EAAEC,YAAY,EAAEC,WAAW,QAAQ,WAAW;;AAElE;AAAA;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAA8D,OAAuC;EAAA,IAAjCC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EACtF;EACA,sBAAwCP,KAAK,CAACQ,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/DC,YAAY;IAAEC,eAAe;EAEpCV,KAAK,CAACW,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,WAAIb,WAAW,CAACc,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAG;MAC7EP,eAAe,CAACG,GAAG,CAACK,OAAO,CAAC;IAC9B,CAAC;IACDJ,MAAM,CAACK,gBAAgB,CAAC,QAAQ,EAAEP,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACM,mBAAmB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACoB,MAAM,gBACjC,KAAC,WAAW;IAAA,UAAEf;EAAQ,EAAe,GACnCC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,KAAK,gBAC7B,KAAC,YAAY;IAAA,UAAEhB;EAAQ,EAAgB,GACrCG,YAAY,gBACd,KAAC,WAAW;IAAA,UAAEH;EAAQ,EAAe,gBAErC,KAAC,YAAY;IAAA,UAAEA;EAAQ,EACxB;AACH,CAAC;AAAC;EAzBAA,QAAQ;AAAA;AA2BV,eAAeD,yBAAyB"}

package/dist/InputFields/RichTextField.cjs

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _reactQuill = _interopRequireDefault(require("react-quill"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styling = require("./styling");
 var _types = require("../types");
 var _styles = require("../styles");
@@ -21,37 +20,9 @@ require("react-quill/dist/quill.snow.css");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"];
 var _templateObject;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-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) { (0, _defineProperty2["default"])(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; }
-var RichTextFieldContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
-  return _styles.COLORS.getColor('neutral_400', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('correct_500', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('critical_500', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
-}, function (props) {
-  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme));
-}, function (props) {
-  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
-}, function (props) {
-  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme));
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_200', props.theme);
-}, (0, _styles.scrollBarStyling)(_types.Size.Small), _styling.readOnlyState, function (props) {
-  return _styles.COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-});
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var RichTextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.COLORS.neutral_400, _styles.COLORS.correct_500, _styles.COLORS.critical_500, _styles.COLORS.primary_700, _styles.COLORS.primary_800, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.COLORS.neutral_200, (0, _styles.scrollBarStyling)(_types.Size.Small), _styling.readOnlyState, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
 exports.RichTextFieldContainer = RichTextFieldContainer;
 var RichTextFieldFormats;
 exports.RichTextFieldFormats = RichTextFieldFormats;
@@ -85,7 +56,7 @@ var defaultToolBarOptions = [[{
 }, {
   'list': 'bullet'
 }], ['link'], ['clean']];
-var RichTextField = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+var RichTextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _modules$toolbar;
   var readOnly = _ref.readOnly,
     disabled = _ref.disabled,
@@ -97,8 +68,7 @@ var RichTextField = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     resizable = _ref.resizable,
     modules = _ref.modules,
     formats = _ref.formats,
-    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var theme = (0, _styledComponents.useTheme)();
+    rest = (0, _objectWithoutProperties2.default)(_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
   });
@@ -107,7 +77,7 @@ var RichTextField = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RichTextFieldContainer, {
     className: "".concat(resizable ? 'resizable' : '', " ").concat(size, " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', "  ").concat(disabled ? 'disabled' : ''),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill["default"], _objectSpread({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, _objectSpread({
       ref: ref,
       readOnly: readOnly || disabled,
       modules: m,
@@ -117,9 +87,9 @@ var RichTextField = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       className: size || '',
       type: state !== null && state !== void 0 ? state : _types.States.Invalid,
       children: [state === _types.States.Valid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_systemicons.CheckMark, {
-        color: _styles.COLORS.getColor('correct_400', theme)
+        color: _styles.COLORS.correct_400
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_systemicons.TechnicalWarning, {
-        color: _styles.COLORS.getColor('critical_400', theme)
+        color: _styles.COLORS.critical_400
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: validationMessage
       })]
@@ -133,18 +103,18 @@ var RichTextField = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
 });
 exports.RichTextField = RichTextField;
 RichTextField.propTypes = {
-  id: _propTypes["default"].string,
-  className: _propTypes["default"].string,
-  placeholder: _propTypes["default"].string,
-  readOnly: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  resizable: _propTypes["default"].bool,
-  formats: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(["background", "bold", "color", "font", "code", "italic", "link", "size", "strike", "script", "underline", "blockquote", "header", "indent", "list", "align", "direction", "code-block", "formula", "image", "video"])),
-  onKeyDown: _propTypes["default"].func,
-  onKeyPress: _propTypes["default"].func,
-  onKeyUp: _propTypes["default"].func,
-  value: _propTypes["default"].any.isRequired,
-  onChange: _propTypes["default"].func.isRequired,
-  validationMessage: _propTypes["default"].string
+  id: _propTypes.default.string,
+  className: _propTypes.default.string,
+  placeholder: _propTypes.default.string,
+  readOnly: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  resizable: _propTypes.default.bool,
+  formats: _propTypes.default.arrayOf(_propTypes.default.oneOf(["background", "bold", "color", "font", "code", "italic", "link", "size", "strike", "script", "underline", "blockquote", "header", "indent", "list", "align", "direction", "code-block", "formula", "image", "video"])),
+  onKeyDown: _propTypes.default.func,
+  onKeyPress: _propTypes.default.func,
+  onKeyUp: _propTypes.default.func,
+  value: _propTypes.default.any.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  validationMessage: _propTypes.default.string
 };
 //# sourceMappingURL=RichTextField.cjs.map

package/dist/InputFields/RichTextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextField.cjs","names":["_react","_interopRequireDefault","require","_reactQuill","_styledComponents","_interopRequireWildcard","_styling","_types","_styles","_systemicons","_jsxRuntime","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","RichTextFieldContainer","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","ComponentSStyling","ComponentTextStyle","Regular","Italic","ComponentMStyling","scrollBarStyling","Size","Small","readOnlyState","exports","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","React","forwardRef","_ref","ref","_modules$toolbar","readOnly","disabled","validationMessage","note","_ref$size","size","Medium","state","resizable","modules","formats","rest","_objectWithoutProperties2","useTheme","m","toolbar","f","values","Image","Video","Formula","jsxs","className","concat","children","jsx","ValidationMessage","type","States","Invalid","Valid","CheckMark","color","TechnicalWarning","NoteMessage","icon","message","propTypes","id","_propTypes","string","placeholder","bool","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","any","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport {Sources, StringMap} from \"quill\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n  .quill {\r\n    width: 100%;\r\n    margin-bottom: 4px;\r\n    overflow: hidden;\r\n\r\n    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .quill.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n\r\n  .quill.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  .quill:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  .quill:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  .ql-editor,\r\n  .ql-editor p{\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  .ql-editor.ql-blank::before {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  &.medium {\r\n    .ql-editor,\r\n    .ql-editor p{\r\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    }\r\n\r\n    .ql-editor.ql-blank::before {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  .ql-toolbar.ql-snow {\r\n    border: none;\r\n    padding: 8px 7px;\r\n    margin: 0 1px;\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n\r\n  .quill.valid .ql-toolbar,\r\n  .quill.invalid .ql-toolbar,\r\n  .quill:hover .ql-toolbar,\r\n  .quill:focus-within .ql-toolbar {\r\n    padding: 8px 6px;\r\n    margin: 0 2px;\r\n  }\r\n\r\n  .ql-container {\r\n    font-family: unset !important;\r\n  }\r\n\r\n  .ql-container.ql-snow {\r\n    border: none;\r\n    overflow-y: hidden;\r\n    padding: 8px;\r\n  }\r\n\r\n  .ql-editor {\r\n    padding: 8px;\r\n    overflow-y: auto;\r\n\r\n    ${scrollBarStyling(Size.Small)}\r\n  }\r\n\r\n  &.resizable {\r\n    height: initial;\r\n\r\n    .quill {\r\n      flex: none;\r\n      overflow: initial;\r\n    }\r\n\r\n    .ql-container {\r\n      flex: none;\r\n      resize: vertical;\r\n    }\r\n\r\n    .ql-editor {\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    .quill {\r\n      ${readOnlyState}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    .quill {\r\n      pointer-events: none;\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n      .ql-editor.ql-blank::before {\r\n        color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n  Background = 'background',\r\n  Bold = 'bold',\r\n  Color = 'color',\r\n  Font = 'font',\r\n  Code = 'code',\r\n  Italic = 'italic',\r\n  Link = 'link',\r\n  Size = 'size',\r\n  Strike = 'strike',\r\n  Script = 'script',\r\n  Underline = 'underline',\r\n  Blockquote = 'blockquote',\r\n  Header = 'header',\r\n  Indent = 'indent',\r\n  List = 'list',\r\n  Align = 'align',\r\n  Direction = 'direction',\r\n  CodeBlock = 'code-block',\r\n  Formula = 'formula',\r\n  Image = 'image',\r\n  Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n  [{header: [1, 2, 3, false]}],\r\n  ['bold', 'italic', 'underline', 'strike'],\r\n  [{'list': 'ordered'}, {'list': 'bullet'}],\r\n  ['link'],\r\n  ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n  /**\r\n   * Optional. The ID of the rich text field.\r\n   */\r\n  id?: string;\r\n\r\n  /**\r\n   * Optional. The CSS class name of the rich text field.\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is read-only.\r\n   */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is resizable.\r\n   */\r\n  resizable?: boolean;\r\n\r\n  /**\r\n   * Optional. An object containing the modules to be used by the rich text field.\r\n   */\r\n  modules?: StringMap;\r\n\r\n  /**\r\n   * Optional. An array of formats to be used by the rich text field.\r\n   */\r\n  formats?: RichTextFieldFormats[];\r\n\r\n  /**\r\n   * Optional. A function to be called when the rich text field gains focus.\r\n   */\r\n  onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  /**\r\n   * Optional. A function to be called when the rich text field loses focus.\r\n   */\r\n  onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n   */\r\n  onKeyDown?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n   */\r\n  onKeyPress?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n   */\r\n  onKeyUp?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Required. The current value of the rich text field.\r\n   */\r\n  value: any;\r\n\r\n  /**\r\n   * Required. A function to be called when the value of the rich text field changes.\r\n   */\r\n  onChange: (value: any) => void;\r\n\r\n  /**\r\n   * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n   * Optional. A note to be displayed below the rich text field.\r\n   */\r\n  note?: TextFieldNote;\r\n\r\n  /**\r\n   * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n\r\n  /**\r\n   * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n   */\r\n  state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n                                                                          readOnly,\r\n                                                                          disabled,\r\n                                                                          validationMessage,\r\n                                                                          note,\r\n                                                                          size = Size.Medium,\r\n                                                                          state,\r\n                                                                          resizable,\r\n                                                                          modules,\r\n                                                                          formats,\r\n                                                                          ...rest\r\n                                                                        }: RichTextFieldProps, ref) => {\r\n\r\n  const theme = useTheme();\r\n  let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n  let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n  return (\r\n    <RichTextFieldContainer\r\n      className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''}  ${disabled ? 'disabled' : ''}`}>\r\n      <ReactQuill ref={ref}\r\n                  readOnly={readOnly || disabled}\r\n                  modules={m}\r\n                  theme={'snow'}\r\n                  formats={f}\r\n                  {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {\r\n            state === States.Valid\r\n              ? <CheckMark color={COLORS.getColor('correct_400', theme)}/>\r\n              : <TechnicalWarning color={COLORS.getColor('critical_400', theme)}/>\r\n          }\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </RichTextFieldContainer>\r\n  )\r\n});"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RichTextField.cjs","names":["RichTextFieldContainer","styled","div","COLORS","neutral_400","correct_500","critical_500","primary_700","primary_800","ComponentSStyling","ComponentTextStyle","Regular","black","Italic","neutral_500","ComponentMStyling","neutral_200","scrollBarStyling","Size","Small","readOnlyState","neutral_100","neutral_300","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","React","forwardRef","ref","readOnly","disabled","validationMessage","note","size","Medium","state","resizable","modules","formats","rest","m","toolbar","f","Object","values","filter","a","Image","Video","Formula","States","Invalid","Valid","correct_400","critical_400","icon","message","id","className","placeholder","onKeyDown","onKeyPress","onKeyUp","value","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport {Sources, StringMap} from \"quill\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n  .quill {\r\n    width: 100%;\r\n    margin-bottom: 4px;\r\n    overflow: hidden;\r\n\r\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .quill.valid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\r\n  }\r\n\r\n  .quill.invalid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\r\n  }\r\n\r\n  .quill:hover {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\r\n  }\r\n\r\n  .quill:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  .ql-editor,\r\n  .ql-editor p{\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  .ql-editor.ql-blank::before {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n  }\r\n\r\n  &.medium {\r\n    .ql-editor,\r\n    .ql-editor p{\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    }\r\n\r\n    .ql-editor.ql-blank::before {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  .ql-toolbar.ql-snow {\r\n    border: none;\r\n    padding: 8px 7px;\r\n    margin: 0 1px;\r\n    border-bottom: 1px solid ${COLORS.neutral_200};\r\n  }\r\n\r\n  .quill.valid .ql-toolbar,\r\n  .quill.invalid .ql-toolbar,\r\n  .quill:hover .ql-toolbar,\r\n  .quill:focus-within .ql-toolbar {\r\n    padding: 8px 6px;\r\n    margin: 0 2px;\r\n  }\r\n\r\n  .ql-container {\r\n    font-family: unset !important;\r\n  }\r\n\r\n  .ql-container.ql-snow {\r\n    border: none;\r\n    overflow-y: hidden;\r\n    padding: 8px;\r\n  }\r\n\r\n  .ql-editor {\r\n    padding: 8px;\r\n    overflow-y: auto;\r\n\r\n    ${scrollBarStyling(Size.Small)}\r\n  }\r\n\r\n  &.resizable {\r\n    height: initial;\r\n\r\n    .quill {\r\n      flex: none;\r\n      overflow: initial;\r\n    }\r\n\r\n    .ql-container {\r\n      flex: none;\r\n      resize: vertical;\r\n    }\r\n\r\n    .ql-editor {\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    .quill {\r\n      ${readOnlyState}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    .quill {\r\n      pointer-events: none;\r\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n      color: ${COLORS.neutral_300};\r\n\r\n      .ql-editor.ql-blank::before {\r\n        color: ${COLORS.neutral_300};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n  Background = 'background',\r\n  Bold = 'bold',\r\n  Color = 'color',\r\n  Font = 'font',\r\n  Code = 'code',\r\n  Italic = 'italic',\r\n  Link = 'link',\r\n  Size = 'size',\r\n  Strike = 'strike',\r\n  Script = 'script',\r\n  Underline = 'underline',\r\n  Blockquote = 'blockquote',\r\n  Header = 'header',\r\n  Indent = 'indent',\r\n  List = 'list',\r\n  Align = 'align',\r\n  Direction = 'direction',\r\n  CodeBlock = 'code-block',\r\n  Formula = 'formula',\r\n  Image = 'image',\r\n  Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n  [{header: [1, 2, 3, false]}],\r\n  ['bold', 'italic', 'underline', 'strike'],\r\n  [{'list': 'ordered'}, {'list': 'bullet'}],\r\n  ['link'],\r\n  ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n  id?: string;\r\n  className?: string;\r\n  placeholder?: string;\r\n  readOnly?: boolean;\r\n  disabled?: boolean;\r\n  resizable?: boolean;\r\n\r\n  modules?: StringMap;\r\n  formats?: RichTextFieldFormats[];\r\n\r\n  onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  onKeyDown?: React.EventHandler<any>;\r\n  onKeyPress?: React.EventHandler<any>;\r\n  onKeyUp?: React.EventHandler<any>;\r\n\r\n  value: any;\r\n  onChange: (value: any) => void;\r\n\r\n  validationMessage?: string;\r\n  note?: TextFieldNote;\r\n  size?: Size.Small | Size.Medium;\r\n  state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n                                                                          readOnly,\r\n                                                                          disabled,\r\n                                                                          validationMessage,\r\n                                                                          note,\r\n                                                                          size = Size.Medium,\r\n                                                                          state,\r\n                                                                          resizable,\r\n                                                                          modules,\r\n                                                                          formats,\r\n                                                                          ...rest\r\n                                                                        }: RichTextFieldProps, ref) => {\r\n\r\n  let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n  let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n  return (\r\n    <RichTextFieldContainer\r\n      className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''}  ${disabled ? 'disabled' : ''}`}>\r\n      <ReactQuill ref={ref}\r\n                  readOnly={readOnly || disabled}\r\n                  modules={m}\r\n                  theme={'snow'}\r\n                  formats={f}\r\n                  {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {\r\n            state === States.Valid\r\n              ? <CheckMark color={COLORS.correct_400}/>\r\n              : <TechnicalWarning color={COLORS.critical_400}/>\r\n          }\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </RichTextFieldContainer>\r\n  )\r\n});"],"mappings":"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"}

package/dist/InputFields/RichTextField.d.ts

@@ -29,81 +29,24 @@ 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>>;