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

package/dist/Image/ImageWithFallbacks.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageWithFallbacks.js","names":["LoadingIndicator","React","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ImageWithFallbacks","Component","constructor","props","_this$props$fallbacks","_this$props$fallbacks2","state","src","fallbackIndex","fallbacks","split","loaded","componentDidUpdate","prevProps","_this$props$fallbacks3","_this$props$fallbacks4","setState","onError","length","onLoad","_objectSpread","render","_this$props","alt","loader","loading","rest","_objectWithoutProperties","_excluded","children","onChange","id","_defineProperty","_pt","string","isRequired","bool"],"sources":["../../src/Image/ImageWithFallbacks.tsx"],"sourcesContent":["import { LoadingIndicator } from '..';\r\nimport React from 'react';\r\n\r\nexport interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError' | 'onLoad' | 'onChange'>{\r\n  fallbacks?: string;\r\n  src: string;\r\n  alt?: string;\r\n  loader?: boolean;\r\n}\r\n\r\ntype ImageWithFallbacksState = {\r\n  src: string;\r\n  fallbackIndex: number;\r\n  fallbacks: string[];\r\n  loaded: boolean;\r\n};\r\n\r\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\r\n  constructor(props: ImageWithFallbacksProps) {\r\n    super(props);\r\n    this.state = {\r\n      src: props.src,\r\n      fallbackIndex: 0,\r\n      fallbacks: this.props.fallbacks?.split('|') ?? [],\r\n      loaded: false,\r\n    };\r\n  }\r\n  componentDidUpdate(prevProps: ImageWithFallbacksProps) {\r\n    if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\r\n      this.setState({\r\n        src: this.props.src,\r\n        fallbackIndex: 0,\r\n        fallbacks: this.props.fallbacks?.split('|') ?? [],\r\n        loaded: false,\r\n      });\r\n    }\r\n  }\r\n  onError() {\r\n    if (this.state.fallbackIndex > this.state.fallbacks.length) {\r\n      return;\r\n    }\r\n    this.setState({\r\n      src: this.state.fallbacks[this.state.fallbackIndex],\r\n      fallbackIndex: this.state.fallbackIndex + 1,\r\n      fallbacks: this.state.fallbacks,\r\n    });\r\n  }\r\n  onLoad() {\r\n    this.setState({ ...this.state, loaded: true });\r\n  }\r\n  render() {\r\n    const {src, alt, fallbacks, loader, loading, ...rest} = this.props;\r\n    return (\r\n      <>\r\n        <img src={this.state.src}\r\n             onError={() => this.onError()}\r\n             onChange={() => this.onLoad()}\r\n             onLoad={() => this.onLoad()}\r\n             alt={this.props.alt}\r\n             {...rest}/>\r\n        {this.props.loader && !this.state.loaded && <LoadingIndicator id=\"imgWithFallbackLoadingIndicator\"></LoadingIndicator>}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\nexport default ImageWithFallbacks;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ImageWithFallbacks.js","names":["LoadingIndicator","React","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ImageWithFallbacks","Component","constructor","props","state","src","fallbackIndex","fallbacks","split","loaded","componentDidUpdate","prevProps","setState","onError","length","onLoad","_objectSpread","render","_this$props","alt","loader","loading","rest","_objectWithoutProperties","_excluded","children","onChange","id","_defineProperty","_pt","string","isRequired","bool"],"sources":["../../src/Image/ImageWithFallbacks.tsx"],"sourcesContent":["import { LoadingIndicator } from '..';\r\nimport React from 'react';\r\n\r\nexport interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError' | 'onLoad' | 'onChange'>{\r\n  fallbacks?: string;\r\n  src: string;\r\n  alt?: string;\r\n  loader?: boolean;\r\n}\r\n\r\ntype ImageWithFallbacksState = {\r\n  src: string;\r\n  fallbackIndex: number;\r\n  fallbacks: string[];\r\n  loaded: boolean;\r\n};\r\n\r\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\r\n  constructor(props: ImageWithFallbacksProps) {\r\n    super(props);\r\n    this.state = {\r\n      src: props.src,\r\n      fallbackIndex: 0,\r\n      fallbacks: this.props.fallbacks?.split('|') ?? [],\r\n      loaded: false,\r\n    };\r\n  }\r\n  componentDidUpdate(prevProps: ImageWithFallbacksProps) {\r\n    if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\r\n      this.setState({\r\n        src: this.props.src,\r\n        fallbackIndex: 0,\r\n        fallbacks: this.props.fallbacks?.split('|') ?? [],\r\n        loaded: false,\r\n      });\r\n    }\r\n  }\r\n  onError() {\r\n    if (this.state.fallbackIndex > this.state.fallbacks.length) {\r\n      return;\r\n    }\r\n    this.setState({\r\n      src: this.state.fallbacks[this.state.fallbackIndex],\r\n      fallbackIndex: this.state.fallbackIndex + 1,\r\n      fallbacks: this.state.fallbacks,\r\n    });\r\n  }\r\n  onLoad() {\r\n    this.setState({ ...this.state, loaded: true });\r\n  }\r\n  render() {\r\n    const {src, alt, fallbacks, loader, loading, ...rest} = this.props;\r\n    return (\r\n      <>\r\n        <img src={this.state.src}\r\n             onError={() => this.onError()}\r\n             onChange={() => this.onLoad()}\r\n             onLoad={() => this.onLoad()}\r\n             alt={this.props.alt}\r\n             {...rest}/>\r\n        {this.props.loader && !this.state.loaded && <LoadingIndicator id=\"imgWithFallbackLoadingIndicator\"></LoadingIndicator>}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\nexport default ImageWithFallbacks;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Image/index.d.ts

@@ -1,2 +1,2 @@
-import ImageWithFallbacks from './ImageWithFallbacks';
-export { ImageWithFallbacks };
+import ImageWithFallbacks from './ImageWithFallbacks';
+export { ImageWithFallbacks };

package/dist/InputFields/Checkbox.cjs

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.StyledCheckBox = 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 React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _icons = require("../icons");
@@ -17,14 +16,129 @@ var _typography = require("../styles/typography");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "selected", "select", "label", "invalid", "iconPointerEventsTransparent", "disabled", "margin", "size", "semiSelected", "children", "readOnly", "tabIndexVal", "dataTestId", "className"];
-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 StyledCheckBox = exports.StyledCheckBox = _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  .checkbox-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  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ", "\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ", "\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ", ";\n    }\n\n    .checkbox-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-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, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)), props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)), props => (0, _typography.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 StyledCheckBox = exports.StyledCheckBox = _styledComponents.default.div`
+  display: flex;
+  width: 100%;
+  min-height: 48px;
+  min-width: 48px;
+
+  ${props => props.margin ? `margin: ${props.margin};` : ''}
+  cursor: pointer;
+
+  color: ${props => _styles.COLORS.getColor('black', props.theme)};
+
+  .pointerTransparent {
+    pointer-events: none;
+  }
+
+  .checkbox-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 ? _styles.COLORS.getColor('primary_500', props.theme) : props.$invalid ? _styles.COLORS.getColor('critical_400', props.theme) : _styles.COLORS.getColor('neutral_600', props.theme)};
+    }
+  }
+
+  .checkbox-label {
+    user-select: none;
+    cursor: inherit;
+  }
+
+  &.small {
+    ${props => (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    .checkbox-label {
+      padding-top: 14px;
+    }
+  }
+
+  &.medium {
+    ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    .checkbox-label {
+      padding-top: 12px;
+    }
+  }
+
+  &.large {
+    ${props => (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    .checkbox-label {
+      padding-top: 12px;
+    }
+  }
+
+  &:not(.disabled):not(.readonly):focus {
+    ${_styles.focusStyles}
+  }
+
+  &:not(.disabled):not(.readonly):hover {
+    .checkbox-icon {
+      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+
+      svg {
+        color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+      }
+    }
+  }
+
+  &:not(.disabled):not(.readonly):active {
+    .checkbox-icon {
+      background: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+
+      svg {
+        color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+      }
+    }
+  }
+
+  &.readonly {
+    cursor: inherit;
+
+    .checkbox-icon,
+    .checkbox-label {
+      pointer-events: none;
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+
+    .checkbox-icon,
+    .checkbox-label {
+      pointer-events: none;
+    }
+
+    .checkbox-icon {
+      background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+    }
+
+    .checkbox-icon svg {
+      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    }
+  }
+
+  &.dropdown-hover:not(.disabled) {
+    .checkbox-icon {
+      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+
+      svg {
+        color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+      }
+    }
+  }
+`;
 const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  var _size;
   let {
       id,
       selected,
@@ -53,12 +167,12 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       return;
     }
     if (select) {
-      e === null || e === void 0 || e.stopPropagation();
+      e?.stopPropagation();
       select(!selected);
     }
   };
-  size = (_size = size) !== null && _size !== void 0 ? _size : _types.Size.Medium;
-  const cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readOnly ? ' readonly' : '');
+  size = size ?? _types.Size.Medium;
+  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledCheckBox, _objectSpread(_objectSpread({
     ref: ref,
     disabled: disabled,

package/dist/InputFields/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_typography","_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","StyledCheckBox","exports","styled","div","_taggedTemplateLiteral2","props","margin","concat","COLORS","getColor","theme","$selected","$invalid","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","Checkbox","forwardRef","_ref","ref","_size","id","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties2","onKeyPress","keyCode","handleClick","stopPropagation","Size","Medium","cls","jsxs","tabIndex","onClick","onKeyDown","onMouseDown","defaultOnMouseDownHandler","jsx","SystemIcons","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor","_default"],"sources":["../../src/InputFields/Checkbox.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} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\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  .checkbox-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  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-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    .checkbox-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    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-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):not(.readonly):active {\r\n    .checkbox-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  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\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    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .checkbox-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    .checkbox-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\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\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' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    $selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    $invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_typography","_common","_jsxRuntime","_excluded","_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","StyledCheckBox","exports","styled","div","props","margin","COLORS","getColor","theme","$selected","$invalid","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","Checkbox","forwardRef","_ref","ref","id","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties2","onKeyPress","keyCode","handleClick","stopPropagation","Size","Medium","cls","jsxs","tabIndex","onClick","onKeyDown","onMouseDown","defaultOnMouseDownHandler","jsx","SystemIcons","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor","_default"],"sources":["../../src/InputFields/Checkbox.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} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\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  .checkbox-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  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-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    .checkbox-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    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-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):not(.readonly):active {\r\n    .checkbox-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  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\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    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .checkbox-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    .checkbox-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\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\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' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    $selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    $invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/Checkbox.d.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { CheckboxProps } from './types';
-export declare const StyledCheckBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    disabled?: boolean | undefined;
-    $invalid?: boolean | undefined;
-    $selected?: boolean | undefined;
-    margin?: string | undefined;
-}>> & string;
-declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLDivElement>>;
-export default Checkbox;
+import * as React from 'react';
+import { CheckboxProps } from './types';
+export declare const StyledCheckBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    disabled?: boolean;
+    $invalid?: boolean;
+    $selected?: boolean;
+    margin?: string;
+}>> & string;
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLDivElement>>;
+export default Checkbox;

package/dist/InputFields/Checkbox.js

@@ -1,8 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 const _excluded = ["id", "selected", "select", "label", "invalid", "iconPointerEventsTransparent", "disabled", "margin", "size", "semiSelected", "children", "readOnly", "tabIndexVal", "dataTestId", "className"];
-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';
@@ -13,9 +11,125 @@ import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
 import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const StyledCheckBox = 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  .checkbox-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  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ", "\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ", "\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ", ";\n    }\n\n    .checkbox-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-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 => 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));
+export const StyledCheckBox = 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;
+  }
+
+  .checkbox-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)};
+    }
+  }
+
+  .checkbox-label {
+    user-select: none;
+    cursor: inherit;
+  }
+
+  &.small {
+    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    .checkbox-label {
+      padding-top: 14px;
+    }
+  }
+
+  &.medium {
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    .checkbox-label {
+      padding-top: 12px;
+    }
+  }
+
+  &.large {
+    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    .checkbox-label {
+      padding-top: 12px;
+    }
+  }
+
+  &:not(.disabled):not(.readonly):focus {
+    ${focusStyles}
+  }
+
+  &:not(.disabled):not(.readonly):hover {
+    .checkbox-icon {
+      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+
+      svg {
+        color: ${props => COLORS.getColor('primary_700', props.theme)};
+      }
+    }
+  }
+
+  &:not(.disabled):not(.readonly):active {
+    .checkbox-icon {
+      background: ${props => COLORS.getColor('primary_100', props.theme)};
+
+      svg {
+        color: ${props => COLORS.getColor('primary_800', props.theme)};
+      }
+    }
+  }
+
+  &.readonly {
+    cursor: inherit;
+
+    .checkbox-icon,
+    .checkbox-label {
+      pointer-events: none;
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    color: ${props => COLORS.getColor('neutral_300', props.theme)};
+
+    .checkbox-icon,
+    .checkbox-label {
+      pointer-events: none;
+    }
+
+    .checkbox-icon {
+      background-color: ${props => COLORS.getColor('white', props.theme)};
+    }
+
+    .checkbox-icon svg {
+      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+    }
+  }
+
+  &.dropdown-hover:not(.disabled) {
+    .checkbox-icon {
+      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+
+      svg {
+        color: ${props => COLORS.getColor('primary_700', props.theme)};
+      }
+    }
+  }
+`;
 const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  var _size;
   let {
       id,
       selected,
@@ -44,12 +158,12 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       return;
     }
     if (select) {
-      e === null || e === void 0 || e.stopPropagation();
+      e?.stopPropagation();
       select(!selected);
     }
   };
-  size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
-  const cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readOnly ? ' readonly' : '');
+  size = size ?? Size.Medium;
+  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;
   return /*#__PURE__*/_jsxs(StyledCheckBox, _objectSpread(_objectSpread({
     ref: ref,
     disabled: disabled,

package/dist/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledCheckBox","div","_templateObject","_taggedTemplateLiteral","props","margin","concat","getColor","theme","$selected","$invalid","Regular","Checkbox","forwardRef","_ref","ref","_size","id","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","handleClick","stopPropagation","Medium","cls","_objectSpread","tabIndex","onClick","onKeyDown","onMouseDown","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor"],"sources":["../../src/InputFields/Checkbox.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} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\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  .checkbox-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  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-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    .checkbox-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    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-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):not(.readonly):active {\r\n    .checkbox-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  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\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    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .checkbox-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    .checkbox-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\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\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' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    $selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    $invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledCheckBox","div","props","margin","getColor","theme","$selected","$invalid","Regular","Checkbox","forwardRef","_ref","ref","id","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","handleClick","stopPropagation","Medium","cls","_objectSpread","tabIndex","onClick","onKeyDown","onMouseDown","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor"],"sources":["../../src/InputFields/Checkbox.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} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\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  .checkbox-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  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-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    .checkbox-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    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-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):not(.readonly):active {\r\n    .checkbox-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  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\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    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .checkbox-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    .checkbox-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\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\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' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    $selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    $invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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","ignoreList":[]}