@laerdal/life-react-components 5.0.9 → 5.1.1

package/dist/InputFields/RadioButton.cjs

@@ -1,11 +1,10 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = 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"));
@@ -17,74 +16,42 @@ var _styles = require("../styles");
 var _types = require("../types");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className", "dataTestId"];
+const _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className", "dataTestId"];
 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 _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; }
-var StyledRadioButton = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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 _styles.COLORS.getColor('black', props.theme);
-}, function (props) {
-  return props.$selected ? _styles.COLORS.getColor('primary_500', props.theme) : props.$invalid ? _styles.COLORS.getColor('critical_400', props.theme) : _styles.COLORS.getColor('neutral_600', props.theme);
-}, function (props) {
-  return (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
-}, function (props) {
-  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
-}, function (props) {
-  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
-}, function (props) {
-  return (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
-}, _styles.focusStyles, function (props) {
-  return _styles.COLORS.getColor('primary_20', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_100', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('white', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_20', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_700', props.theme);
-});
-var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+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 StyledRadioButton = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 => _styles.COLORS.getColor('black', props.theme), props => props.$selected ? _styles.COLORS.getColor('primary_500', props.theme) : props.$invalid ? _styles.COLORS.getColor('critical_400', props.theme) : _styles.COLORS.getColor('neutral_600', props.theme), props => (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)), props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)), props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)), props => (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)), _styles.focusStyles, props => _styles.COLORS.getColor('primary_20', props.theme), props => _styles.COLORS.getColor('primary_700', props.theme), props => _styles.COLORS.getColor('primary_100', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), props => _styles.COLORS.getColor('white', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), props => _styles.COLORS.getColor('primary_20', props.theme), props => _styles.COLORS.getColor('primary_700', props.theme));
+const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var _size;
-  var id = _ref.id,
-    selected = _ref.selected,
-    label = _ref.label,
-    additionalLabel = _ref.additionalLabel,
-    invalid = _ref.invalid,
-    select = _ref.select,
-    disabled = _ref.disabled,
-    margin = _ref.margin,
-    iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
-    size = _ref.size,
-    tabIndexVal = _ref.tabIndexVal,
-    className = _ref.className,
-    dataTestId = _ref.dataTestId,
-    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var onKeyPress = function onKeyPress(e) {
+  let {
+      id,
+      selected,
+      label,
+      additionalLabel,
+      invalid,
+      select,
+      disabled,
+      margin,
+      iconPointerEventsTransparent,
+      size,
+      tabIndexVal,
+      className,
+      dataTestId
+    } = _ref,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  const onKeyPress = e => {
     if (e.keyCode === 13 && !disabled) {
       select(!selected);
     }
   };
   size = (_size = size) !== null && _size !== void 0 ? _size : _types.Size.Medium;
-  var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
+  const cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledRadioButton, _objectSpread(_objectSpread({
     $margin: margin,
     ref: ref,
-    onClick: function onClick() {
-      return !disabled && select(!selected);
-    },
+    onClick: () => !disabled && select(!selected),
     onMouseDown: _common.defaultOnMouseDownHandler,
     onKeyDown: onKeyPress,
     $disabled: disabled,
@@ -116,18 +83,17 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }), id);
 });
 RadioButton.propTypes = {
-  id: _propTypes["default"].string,
-  selected: _propTypes["default"].bool.isRequired,
-  select: _propTypes["default"].func.isRequired,
-  label: _propTypes["default"].string,
-  additionalLabel: _propTypes["default"].string,
-  invalid: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  iconPointerEventsTransparent: _propTypes["default"].bool,
-  margin: _propTypes["default"].string,
-  tabIndexVal: _propTypes["default"].number,
-  className: _propTypes["default"].string
+  id: _propTypes.default.string,
+  selected: _propTypes.default.bool.isRequired,
+  select: _propTypes.default.func.isRequired,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  additionalLabel: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  invalid: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  iconPointerEventsTransparent: _propTypes.default.bool,
+  margin: _propTypes.default.string,
+  tabIndexVal: _propTypes.default.number,
+  className: _propTypes.default.string
 };
-var _default = RadioButton;
-exports["default"] = _default;
+var _default = exports.default = RadioButton;
 //# sourceMappingURL=RadioButton.cjs.map

package/dist/InputFields/RadioButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_common","_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","StyledRadioButton","styled","div","_taggedTemplateLiteral2","props","$margin","concat","COLORS","getColor","theme","$selected","$invalid","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentMStyling","ComponentLStyling","focusStyles","RadioButton","forwardRef","_ref","ref","_size","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties2","onKeyPress","keyCode","Size","Medium","cls","jsxs","onClick","onMouseDown","defaultOnMouseDownHandler","onKeyDown","$disabled","tabIndex","children","jsx","SystemIcons","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_propTypes","string","bool","isRequired","func","number","_default","exports"],"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.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_common","_jsxRuntime","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","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","StyledRadioButton","styled","div","_taggedTemplateLiteral2","props","$margin","concat","COLORS","getColor","theme","$selected","$invalid","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentMStyling","ComponentLStyling","focusStyles","RadioButton","forwardRef","_ref","ref","_size","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties2","onKeyPress","keyCode","Size","Medium","cls","jsxs","onClick","onMouseDown","defaultOnMouseDownHandler","onKeyDown","$disabled","tabIndex","children","jsx","SystemIcons","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_propTypes","string","bool","isRequired","func","oneOfType","node","number","_default","exports"],"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":[]}

package/dist/InputFields/RadioButton.d.ts

@@ -8,9 +8,9 @@ export type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivEleme
     /** 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;
+    label?: string | React.ReactNode;
     /** Optional. Secondary label to be shown under the main 'label' */
-    additionalLabel?: string;
+    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. */
@@ -34,9 +34,9 @@ declare const RadioButton: React.ForwardRefExoticComponent<Testable & Omit<React
     /** 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;
+    label?: string | React.ReactNode;
     /** Optional. Secondary label to be shown under the main 'label' */
-    additionalLabel?: string | undefined;
+    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. */

package/dist/InputFields/RadioButton.js

@@ -2,7 +2,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";
-var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className", "dataTestId"];
+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; }
@@ -13,70 +13,37 @@ import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
 import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles';
 import { defaultOnMouseDownHandler } from '../common';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var StyledRadioButton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ", ";\n    }\n\n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
-  return props.$margin ? "margin: ".concat(props.$margin, ";") : '';
-}, 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);
-});
-var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+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 RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var _size;
-  var id = _ref.id,
-    selected = _ref.selected,
-    label = _ref.label,
-    additionalLabel = _ref.additionalLabel,
-    invalid = _ref.invalid,
-    select = _ref.select,
-    disabled = _ref.disabled,
-    margin = _ref.margin,
-    iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
-    size = _ref.size,
-    tabIndexVal = _ref.tabIndexVal,
-    className = _ref.className,
-    dataTestId = _ref.dataTestId,
+  let {
+      id,
+      selected,
+      label,
+      additionalLabel,
+      invalid,
+      select,
+      disabled,
+      margin,
+      iconPointerEventsTransparent,
+      size,
+      tabIndexVal,
+      className,
+      dataTestId
+    } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var onKeyPress = function onKeyPress(e) {
+  const onKeyPress = e => {
     if (e.keyCode === 13 && !disabled) {
       select(!selected);
     }
   };
   size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
-  var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
+  const cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
   return /*#__PURE__*/_jsxs(StyledRadioButton, _objectSpread(_objectSpread({
     $margin: margin,
     ref: ref,
-    onClick: function onClick() {
-      return !disabled && select(!selected);
-    },
+    onClick: () => !disabled && select(!selected),
     onMouseDown: defaultOnMouseDownHandler,
     onKeyDown: onKeyPress,
     $disabled: disabled,
@@ -111,8 +78,8 @@ RadioButton.propTypes = {
   id: _pt.string,
   selected: _pt.bool.isRequired,
   select: _pt.func.isRequired,
-  label: _pt.string,
-  additionalLabel: _pt.string,
+  label: _pt.oneOfType([_pt.string, _pt.node]),
+  additionalLabel: _pt.oneOfType([_pt.string, _pt.node]),
   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","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","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":[]}

package/dist/InputFields/ResponsiveComponentWrapper.cjs

@@ -1,19 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 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(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; }
 /**
  * Import React libraries.
  */
@@ -24,23 +22,20 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // Add component-specific types
 
-var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
-  var children = _ref.children,
-    size = _ref.size;
+const ReponsiveComponentWrapper = _ref => {
+  let {
+    children,
+    size
+  } = _ref;
   // Globally used variables within the component
-  var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    isMediumView = _React$useState2[0],
-    setIsMediumView = _React$useState2[1];
-  React.useEffect(function () {
-    var handleResize = function handleResize() {
-      var mql = window.matchMedia("".concat(_styles.BREAKPOINTS.MEDIUM.replace('@media ', '')));
+  const [isMediumView, setIsMediumView] = React.useState(false);
+  React.useEffect(() => {
+    const handleResize = () => {
+      const mql = window.matchMedia("".concat(_styles.BREAKPOINTS.MEDIUM.replace('@media ', '')));
       setIsMediumView(mql.matches);
     };
     window.addEventListener('resize', handleResize);
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
+    return () => window.removeEventListener('resize', handleResize);
   }, []);
   return size && size === _types.Size.Medium ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentXS, {
     children: children
@@ -53,8 +48,7 @@ var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
   });
 };
 ReponsiveComponentWrapper.propTypes = {
-  children: _propTypes["default"].any
+  children: _propTypes.default.any
 };
-var _default = ReponsiveComponentWrapper;
-exports["default"] = _default;
+var _default = exports.default = ReponsiveComponentWrapper;
 //# 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":["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":[]}

package/dist/InputFields/ResponsiveComponentWrapper.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _pt from "prop-types";
 /**
  * Import React libraries.
@@ -13,23 +12,20 @@ import { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';
 
 // Add component-specific types
 import { jsx as _jsx } from "react/jsx-runtime";
-var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
-  var children = _ref.children,
-    size = _ref.size;
+const ReponsiveComponentWrapper = _ref => {
+  let {
+    children,
+    size
+  } = _ref;
   // Globally used variables within the component
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isMediumView = _React$useState2[0],
-    setIsMediumView = _React$useState2[1];
-  React.useEffect(function () {
-    var handleResize = function handleResize() {
-      var mql = window.matchMedia("".concat(BREAKPOINTS.MEDIUM.replace('@media ', '')));
+  const [isMediumView, setIsMediumView] = React.useState(false);
+  React.useEffect(() => {
+    const handleResize = () => {
+      const mql = window.matchMedia("".concat(BREAKPOINTS.MEDIUM.replace('@media ', '')));
       setIsMediumView(mql.matches);
     };
     window.addEventListener('resize', handleResize);
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
+    return () => window.removeEventListener('resize', handleResize);
   }, []);
   return size && size === Size.Medium ? /*#__PURE__*/_jsx(ComponentXS, {
     children: children