@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/InputFields/RadioButton.d.ts

@@ -1,55 +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'> & {
-    /** 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 | React.ReactNode;
-    /** Optional. Secondary label to be shown under the main 'label' */
-    additionalLabel?: string | React.ReactNode;
-    /** 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. */
-    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 | React.ReactNode;
-    /** Optional. Secondary label to be shown under the main 'label' */
-    additionalLabel?: string | React.ReactNode;
-    /** 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. */
-    tabIndexVal?: number | undefined;
-    /** Optional. Extra classname to be set on the container of the component. */
-    className?: string | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export default RadioButton;
+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. */
+    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;
+    /** 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. */
+    tabIndexVal?: number;
+    /** Optional. Extra classname to be set on the container of the component. */
+    className?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+export default RadioButton;

package/dist/InputFields/RadioButton.js

@@ -1,9 +1,7 @@
 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";
 const _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';
@@ -14,9 +12,125 @@ import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles';
 import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const 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"])), props => props.$margin ? "margin: ".concat(props.$margin, ";") : '', props => COLORS.getColor('black', props.theme), props => props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme), props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), focusStyles, props => COLORS.getColor('primary_20', props.theme), props => COLORS.getColor('primary_700', props.theme), props => COLORS.getColor('primary_100', props.theme), props => COLORS.getColor('primary_800', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('white', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('primary_20', props.theme), props => COLORS.getColor('primary_700', props.theme));
+const StyledRadioButton = styled.div`
+  display: flex;
+  width: 100%;
+  min-height: 48px;
+  min-width: 48px;
+
+  ${props => props.$margin ? `margin: ${props.$margin};` : ''}
+  cursor: pointer;
+
+  color: ${props => COLORS.getColor('black', props.theme)};
+
+  .pointerTransparent {
+    pointer-events: none;
+  }
+
+  .radio-button-icon {
+    margin: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    height: 36px;
+    min-width: 36px;
+    border-radius: 50%;
+
+    svg {
+      color: ${props => props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme)};
+    }
+  }
+
+  .radio-button-label {
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+
+    label {
+      cursor: inherit;
+    }
+
+    span {
+      ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    }
+  }
+
+  &.small {
+    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    .radio-button-label {
+      padding-top: 14px;
+    }
+  }
+
+  &.medium {
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    .radio-button-label {
+      padding-top: 12px;
+    }
+  }
+
+  &.large {
+    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    .radio-button-label {
+      padding-top: 12px;
+    }
+  }
+
+  &:not(.disabled):focus {
+    ${focusStyles}
+  }
+
+  &:not(.disabled):hover {
+    .radio-button-icon {
+      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+
+      svg {
+        color: ${props => COLORS.getColor('primary_700', props.theme)};
+      }
+    }
+  }
+
+  &:not(.disabled):active {
+    .radio-button-icon {
+      background: ${props => COLORS.getColor('primary_100', props.theme)};
+
+      svg {
+        color: ${props => COLORS.getColor('primary_800', props.theme)};
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    color: ${props => COLORS.getColor('neutral_300', props.theme)};
+
+    .radio-button-icon,
+    .radio-button-label {
+      pointer-events: none;
+    }
+
+    .radio-button-icon {
+      background-color: ${props => COLORS.getColor('white', props.theme)};
+    }
+
+    .radio-button-icon svg {
+      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+    }
+  }
+
+  &.dropdown-hover:not(.disabled) {
+    .radio-button-icon {
+      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+
+      svg {
+        color: ${props => COLORS.getColor('primary_700', props.theme)};
+      }
+    }
+  }
+`;
 const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  var _size;
   let {
       id,
       selected,
@@ -38,8 +152,8 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       select(!selected);
     }
   };
-  size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
-  const cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
+  size = size ?? Size.Medium;
+  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;
   return /*#__PURE__*/_jsxs(StyledRadioButton, _objectSpread(_objectSpread({
     $margin: margin,
     ref: ref,
@@ -78,8 +192,8 @@ RadioButton.propTypes = {
   id: _pt.string,
   selected: _pt.bool.isRequired,
   select: _pt.func.isRequired,
-  label: _pt.oneOfType([_pt.string, _pt.node]),
-  additionalLabel: _pt.oneOfType([_pt.string, _pt.node]),
+  label: _pt.string,
+  additionalLabel: _pt.string,
   invalid: _pt.bool,
   disabled: _pt.bool,
   iconPointerEventsTransparent: _pt.bool,

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","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","Medium","cls","_objectSpread","onClick","onMouseDown","onKeyDown","$disabled","tabIndex","children","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_pt","string","bool","isRequired","func","oneOfType","node","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 | React.ReactNode;\r\n  /** Optional. Secondary label to be shown under the main 'label' */\r\n  additionalLabel?: string | React.ReactNode;\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","jsx","_jsx","jsxs","_jsxs","StyledRadioButton","div","props","$margin","getColor","theme","$selected","$invalid","Regular","RadioButton","forwardRef","_ref","ref","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","Medium","cls","_objectSpread","onClick","onMouseDown","onKeyDown","$disabled","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":[]}

package/dist/InputFields/ResponsiveComponentWrapper.cjs

@@ -31,7 +31,7 @@ const ReponsiveComponentWrapper = _ref => {
   const [isMediumView, setIsMediumView] = React.useState(false);
   React.useEffect(() => {
     const handleResize = () => {
-      const mql = window.matchMedia("".concat(_styles.BREAKPOINTS.MEDIUM.replace('@media ', '')));
+      const mql = window.matchMedia(`${_styles.BREAKPOINTS.MEDIUM.replace('@media ', '')}`);
       setIsMediumView(mql.matches);
     };
     window.addEventListener('resize', handleResize);

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","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ReponsiveComponentWrapper","_ref","children","size","isMediumView","setIsMediumView","useState","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":"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","ignoreList":[]}
+{"version":3,"file":"ResponsiveComponentWrapper.cjs","names":["React","_interopRequireWildcard","require","_types","_styles","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ReponsiveComponentWrapper","_ref","children","size","isMediumView","setIsMediumView","useState","useEffect","handleResize","mql","window","matchMedia","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":"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","ignoreList":[]}

package/dist/InputFields/ResponsiveComponentWrapper.d.ts

@@ -1,11 +1,11 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
-type LabelProps = {
-    size?: Size.Small | Size.Medium;
-    children?: any;
-};
-declare const ReponsiveComponentWrapper: React.FunctionComponent<LabelProps>;
-export default ReponsiveComponentWrapper;
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+import { Size } from '../types';
+type LabelProps = {
+    size?: Size.Small | Size.Medium;
+    children?: any;
+};
+declare const ReponsiveComponentWrapper: React.FunctionComponent<LabelProps>;
+export default ReponsiveComponentWrapper;

package/dist/InputFields/ResponsiveComponentWrapper.js

@@ -21,7 +21,7 @@ const ReponsiveComponentWrapper = _ref => {
   const [isMediumView, setIsMediumView] = React.useState(false);
   React.useEffect(() => {
     const handleResize = () => {
-      const mql = window.matchMedia("".concat(BREAKPOINTS.MEDIUM.replace('@media ', '')));
+      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);
       setIsMediumView(mql.matches);
     };
     window.addEventListener('resize', handleResize);

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","isMediumView","setIsMediumView","useState","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,MAAMC,yBAA8D,GAAGC,IAAA,IAAoC;EAAA,IAAnC;IAAEC,QAAQ;IAAEC;EAAiB,CAAC,GAAAF,IAAA;EACpG;EACA,MAAM,CAACG,YAAY,EAAEC,eAAe,CAAC,GAAGZ,KAAK,CAACa,QAAQ,CAAU,KAAK,CAAC;EAEtEb,KAAK,CAACc,SAAS,CAAC,MAAM;IACpB,MAAMC,YAAY,GAAGA,CAAA,KAAM;MACzB,MAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,IAAAC,MAAA,CAAIjB,WAAW,CAACkB,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAE,CAAC;MAC7ET,eAAe,CAACI,GAAG,CAACM,OAAO,CAAC;IAC9B,CAAC;IACDL,MAAM,CAACM,gBAAgB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAC/C,OAAO,MAAME,MAAM,CAACO,mBAAmB,CAAC,QAAQ,EAAET,YAAY,CAAC;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOL,IAAI,IAAIA,IAAI,KAAKT,IAAI,CAACwB,MAAM,gBACjCnB,IAAA,CAACF,WAAW;IAAAK,QAAA,EAAEA;EAAQ,CAAc,CAAC,GACnCC,IAAI,IAAIA,IAAI,KAAKT,IAAI,CAACyB,KAAK,gBAC7BpB,IAAA,CAACH,YAAY;IAAAM,QAAA,EAAEA;EAAQ,CAAe,CAAC,GACrCE,YAAY,gBACdL,IAAA,CAACF,WAAW;IAAAK,QAAA,EAAEA;EAAQ,CAAc,CAAC,gBAErCH,IAAA,CAACH,YAAY;IAAAM,QAAA,EAAEA;EAAQ,CAAe,CACvC;AACH,CAAC;AAACF,yBAAA,CAAAoB,SAAA;EAzBAlB,QAAQ,EAAAmB,GAAA,CAAAC;AAAA;AA2BV,eAAetB,yBAAyB","ignoreList":[]}
+{"version":3,"file":"ResponsiveComponentWrapper.js","names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","jsx","_jsx","ReponsiveComponentWrapper","_ref","children","size","isMediumView","setIsMediumView","useState","useEffect","handleResize","mql","window","matchMedia","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,MAAMC,yBAA8D,GAAGC,IAAA,IAAoC;EAAA,IAAnC;IAAEC,QAAQ;IAAEC;EAAiB,CAAC,GAAAF,IAAA;EACpG;EACA,MAAM,CAACG,YAAY,EAAEC,eAAe,CAAC,GAAGZ,KAAK,CAACa,QAAQ,CAAU,KAAK,CAAC;EAEtEb,KAAK,CAACc,SAAS,CAAC,MAAM;IACpB,MAAMC,YAAY,GAAGA,CAAA,KAAM;MACzB,MAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,CAAC,GAAGhB,WAAW,CAACiB,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC;MAC7ER,eAAe,CAACI,GAAG,CAACK,OAAO,CAAC;IAC9B,CAAC;IACDJ,MAAM,CAACK,gBAAgB,CAAC,QAAQ,EAAEP,YAAY,CAAC;IAC/C,OAAO,MAAME,MAAM,CAACM,mBAAmB,CAAC,QAAQ,EAAER,YAAY,CAAC;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOL,IAAI,IAAIA,IAAI,KAAKT,IAAI,CAACuB,MAAM,gBACjClB,IAAA,CAACF,WAAW;IAAAK,QAAA,EAAEA;EAAQ,CAAc,CAAC,GACnCC,IAAI,IAAIA,IAAI,KAAKT,IAAI,CAACwB,KAAK,gBAC7BnB,IAAA,CAACH,YAAY;IAAAM,QAAA,EAAEA;EAAQ,CAAe,CAAC,GACrCE,YAAY,gBACdL,IAAA,CAACF,WAAW;IAAAK,QAAA,EAAEA;EAAQ,CAAc,CAAC,gBAErCH,IAAA,CAACH,YAAY;IAAAM,QAAA,EAAEA;EAAQ,CAAe,CACvC;AACH,CAAC;AAACF,yBAAA,CAAAmB,SAAA;EAzBAjB,QAAQ,EAAAkB,GAAA,CAAAC;AAAA;AA2BV,eAAerB,yBAAyB","ignoreList":[]}

package/dist/InputFields/RichTextField.cjs

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.RichTextFieldFormats = exports.RichTextFieldContainer = exports.RichTextField = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _reactQuill = _interopRequireDefault(require("react-quill"));
@@ -19,12 +18,126 @@ var _systemicons = require("../icons/systemicons");
 require("react-quill/dist/quill.snow.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const _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 (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; }
-const RichTextFieldContainer = exports.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"])), props => _styles.COLORS.getColor('neutral_400', props.theme), props => _styles.COLORS.getColor('correct_500', props.theme), props => _styles.COLORS.getColor('critical_500', props.theme), props => _styles.COLORS.getColor('primary_700', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)), props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme)), props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)), props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme)), props => _styles.COLORS.getColor('neutral_200', props.theme), (0, _styles.scrollBarStyling)(_types.Size.Small), _styling.readOnlyState, props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme));
+const RichTextFieldContainer = exports.RichTextFieldContainer = _styledComponents.default.div`
+  .quill {
+    width: 100%;
+    margin-bottom: 4px;
+    overflow: hidden;
+
+    box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_400', props.theme)};
+    border-radius: 4px;
+  }
+
+  .quill.valid {
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('correct_500', props.theme)};
+  }
+
+  .quill.invalid {
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('critical_500', props.theme)};
+  }
+
+  .quill:hover {
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+  }
+
+  .quill:focus-within {
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+  }
+
+  .ql-editor,
+  .ql-editor p{
+    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+  }
+
+  .ql-editor.ql-blank::before {
+    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+  }
+
+  &.medium {
+    .ql-editor,
+    .ql-editor p{
+      ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    }
+
+    .ql-editor.ql-blank::before {
+      ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+    }
+  }
+
+  .ql-toolbar.ql-snow {
+    border: none;
+    padding: 8px 7px;
+    margin: 0 1px;
+    border-bottom: 1px solid ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+  }
+
+  .quill.valid .ql-toolbar,
+  .quill.invalid .ql-toolbar,
+  .quill:hover .ql-toolbar,
+  .quill:focus-within .ql-toolbar {
+    padding: 8px 6px;
+    margin: 0 2px;
+  }
+
+  .ql-container {
+    font-family: unset !important;
+  }
+
+  .ql-container.ql-snow {
+    border: none;
+    overflow-y: hidden;
+    padding: 8px;
+  }
+
+  .ql-editor {
+    padding: 8px;
+    overflow-y: auto;
+
+    ${(0, _styles.scrollBarStyling)(_types.Size.Small)}
+  }
+
+  &.resizable {
+    height: initial;
+
+    .quill {
+      flex: none;
+      overflow: initial;
+    }
+
+    .ql-container {
+      flex: none;
+      resize: vertical;
+    }
+
+    .ql-editor {
+      height: 100%;
+    }
+  }
+
+  &.readonly {
+    .quill {
+      ${_styling.readOnlyState}
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    .quill {
+      pointer-events: none;
+      box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+
+      .ql-editor.ql-blank::before {
+        color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      }
+    }
+  }
+`;
 let RichTextFieldFormats = exports.RichTextFieldFormats = /*#__PURE__*/function (RichTextFieldFormats) {
   RichTextFieldFormats["Background"] = "background";
   RichTextFieldFormats["Bold"] = "bold";
@@ -57,7 +170,6 @@ const defaultToolBarOptions = [[{
   'list': 'bullet'
 }], ['link'], ['clean']];
 const RichTextField = exports.RichTextField = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  var _modules$toolbar;
   let {
       readOnly,
       disabled,
@@ -71,12 +183,12 @@ const RichTextField = exports.RichTextField = /*#__PURE__*/_react.default.forwar
     } = _ref,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   const theme = (0, _styledComponents.useTheme)();
-  let 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
+  let m = _objectSpread(_objectSpread({}, modules ?? {}), {}, {
+    toolbar: modules?.toolbar ?? defaultToolBarOptions
   });
-  let f = formats !== null && formats !== void 0 ? formats : Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);
+  let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RichTextFieldContainer, {
-    className: "".concat(resizable ? 'resizable' : '', " ").concat(size, " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', "  ").concat(disabled ? 'disabled' : ''),
+    className: `${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''}  ${disabled ? 'disabled' : ''}`,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, _objectSpread({
       ref: ref,
       readOnly: readOnly || disabled,
@@ -85,7 +197,7 @@ const RichTextField = exports.RichTextField = /*#__PURE__*/_react.default.forwar
       formats: f
     }, rest)), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ValidationMessage, {
       className: size || '',
-      type: state !== null && state !== void 0 ? state : _types.States.Invalid,
+      type: state ?? _types.States.Invalid,
       children: [state === _types.States.Valid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_systemicons.CheckMark, {
         color: _styles.COLORS.getColor('correct_400', theme)
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_systemicons.TechnicalWarning, {