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

package/dist/Image/ImageWithFallbacks.js

@@ -1,106 +1,87 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _pt from "prop-types";
-var _excluded = ["src", "alt", "fallbacks", "loader", "loading"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import { LoadingIndicator } from '..';
-import React from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImageWithFallbacks, _React$Component);
-  var _super = _createSuper(ImageWithFallbacks);
-  function ImageWithFallbacks(props) {
-    var _this$props$fallbacks, _this$props$fallbacks2;
-    var _this;
-    _classCallCheck(this, ImageWithFallbacks);
-    _this = _super.call(this, props);
-    _this.state = {
-      src: props.src,
-      fallbackIndex: 0,
-      fallbacks: (_this$props$fallbacks = (_this$props$fallbacks2 = _this.props.fallbacks) === null || _this$props$fallbacks2 === void 0 ? void 0 : _this$props$fallbacks2.split('|')) !== null && _this$props$fallbacks !== void 0 ? _this$props$fallbacks : [],
-      loaded: false
-    };
-    return _this;
-  }
-  _createClass(ImageWithFallbacks, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {
-        var _this$props$fallbacks3, _this$props$fallbacks4;
-        this.setState({
-          src: this.props.src,
-          fallbackIndex: 0,
-          fallbacks: (_this$props$fallbacks3 = (_this$props$fallbacks4 = this.props.fallbacks) === null || _this$props$fallbacks4 === void 0 ? void 0 : _this$props$fallbacks4.split('|')) !== null && _this$props$fallbacks3 !== void 0 ? _this$props$fallbacks3 : [],
-          loaded: false
-        });
-      }
-    }
-  }, {
-    key: "onError",
-    value: function onError() {
-      if (this.state.fallbackIndex > this.state.fallbacks.length) {
-        return;
-      }
-      this.setState({
-        src: this.state.fallbacks[this.state.fallbackIndex],
-        fallbackIndex: this.state.fallbackIndex + 1,
-        fallbacks: this.state.fallbacks
-      });
-    }
-  }, {
-    key: "onLoad",
-    value: function onLoad() {
-      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
-        loaded: true
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        src = _this$props.src,
-        alt = _this$props.alt,
-        fallbacks = _this$props.fallbacks,
-        loader = _this$props.loader,
-        loading = _this$props.loading,
-        rest = _objectWithoutProperties(_this$props, _excluded);
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("img", _objectSpread({
-          src: this.state.src,
-          onError: function onError() {
-            return _this2.onError();
-          },
-          onChange: function onChange() {
-            return _this2.onLoad();
-          },
-          onLoad: function onLoad() {
-            return _this2.onLoad();
-          },
-          alt: this.props.alt
-        }, rest)), this.props.loader && !this.state.loaded && /*#__PURE__*/_jsx(LoadingIndicator, {
-          id: "imgWithFallbackLoadingIndicator"
-        })]
-      });
-    }
-  }]);
-  return ImageWithFallbacks;
-}(React.Component);
-_defineProperty(ImageWithFallbacks, "propTypes", {
-  fallbacks: _pt.string,
-  src: _pt.string.isRequired,
-  alt: _pt.string,
-  loader: _pt.bool
-});
-export default ImageWithFallbacks;
-//# sourceMappingURL=ImageWithFallbacks.js.map
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { LoadingIndicator } from '..';
+import React from 'react';
+var ImageWithFallbacks = /** @class */ (function (_super) {
+    __extends(ImageWithFallbacks, _super);
+    function ImageWithFallbacks(props) {
+        var _this = this;
+        var _a, _b;
+        _this = _super.call(this, props) || this;
+        _this.state = {
+            src: props.src,
+            fallbackIndex: 0,
+            fallbacks: (_b = (_a = _this.props.fallbacks) === null || _a === void 0 ? void 0 : _a.split('|')) !== null && _b !== void 0 ? _b : [],
+            loaded: false,
+        };
+        return _this;
+    }
+    ImageWithFallbacks.prototype.componentDidUpdate = function (prevProps) {
+        var _a, _b;
+        if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {
+            this.setState({
+                src: this.props.src,
+                fallbackIndex: 0,
+                fallbacks: (_b = (_a = this.props.fallbacks) === null || _a === void 0 ? void 0 : _a.split('|')) !== null && _b !== void 0 ? _b : [],
+                loaded: false,
+            });
+        }
+    };
+    ImageWithFallbacks.prototype.onError = function () {
+        if (this.state.fallbackIndex > this.state.fallbacks.length) {
+            return;
+        }
+        this.setState({
+            src: this.state.fallbacks[this.state.fallbackIndex],
+            fallbackIndex: this.state.fallbackIndex + 1,
+            fallbacks: this.state.fallbacks,
+        });
+    };
+    ImageWithFallbacks.prototype.onLoad = function () {
+        this.setState(__assign(__assign({}, this.state), { loaded: true }));
+    };
+    ImageWithFallbacks.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, src = _a.src, alt = _a.alt, fallbacks = _a.fallbacks, loader = _a.loader, loading = _a.loading, rest = __rest(_a, ["src", "alt", "fallbacks", "loader", "loading"]);
+        return (React.createElement(React.Fragment, null,
+            React.createElement("img", __assign({ src: this.state.src, onError: function () { return _this.onError(); }, onChange: function () { return _this.onLoad(); }, onLoad: function () { return _this.onLoad(); }, alt: this.props.alt }, rest)),
+            this.props.loader && !this.state.loaded && React.createElement(LoadingIndicator, { id: "imgWithFallbackLoadingIndicator" })));
+    };
+    return ImageWithFallbacks;
+}(React.Component));
+export default ImageWithFallbacks;

package/dist/Image/index.js

@@ -1,3 +1,2 @@
-import ImageWithFallbacks from './ImageWithFallbacks';
-export { ImageWithFallbacks };
-//# sourceMappingURL=index.js.map
+import ImageWithFallbacks from './ImageWithFallbacks';
+export { ImageWithFallbacks };

package/dist/InputFields/Checkbox.js

@@ -1,95 +1,65 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _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';
-import styled from 'styled-components';
-import { SystemIcons } from '../icons';
-import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
-import { Size } from '../types';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
-import { defaultOnMouseDownHandler } from '../common';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var 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"])), function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}, COLORS.black, function (props) {
-  return props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600;
-}, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, COLORS.neutral_300, COLORS.primary_20, COLORS.primary_700);
-var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _size;
-  var id = _ref.id,
-    selected = _ref.selected,
-    select = _ref.select,
-    label = _ref.label,
-    invalid = _ref.invalid,
-    iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
-    disabled = _ref.disabled,
-    margin = _ref.margin,
-    size = _ref.size,
-    semiSelected = _ref.semiSelected,
-    children = _ref.children,
-    readOnly = _ref.readOnly,
-    tabIndexVal = _ref.tabIndexVal,
-    dataTestId = _ref.dataTestId,
-    className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var onKeyPress = function onKeyPress(e) {
-    if (e.keyCode === 13 && !disabled && !readOnly) {
-      select && select(!selected);
-    }
-  };
-  var handleClick = function handleClick(e) {
-    if (disabled || readOnly) {
-      return;
-    }
-    if (select) {
-      e === null || e === void 0 ? void 0 : e.stopPropagation();
-      select(!selected);
-    }
-  };
-  size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
-  var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readOnly ? ' readonly' : '');
-  return /*#__PURE__*/_jsxs(StyledCheckBox, _objectSpread(_objectSpread({
-    ref: ref,
-    disabled: disabled,
-    className: cls,
-    "aria-checked": selected,
-    selected: selected,
-    tabIndex: disabled || readOnly ? -1 : tabIndexVal ? tabIndexVal : 0,
-    invalid: invalid,
-    margin: margin,
-    onClick: handleClick,
-    onKeyDown: onKeyPress,
-    onMouseDown: defaultOnMouseDownHandler
-  }, rest), {}, {
-    children: [/*#__PURE__*/_jsx("div", {
-      id: id,
-      "data-testid": dataTestId,
-      className: 'checkbox-icon',
-      children: selected ? /*#__PURE__*/_jsx(SystemIcons.CheckboxOn, {
-        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
-        size: "24px"
-      }) : semiSelected ? /*#__PURE__*/_jsx(SystemIcons.CheckboxSemi, {
-        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
-        size: "24px"
-      }) : /*#__PURE__*/_jsx(SystemIcons.CheckboxOff, {
-        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
-        size: "24px"
-      })
-    }), label && /*#__PURE__*/_jsx("label", {
-      className: 'checkbox-label',
-      htmlFor: id,
-      children: label
-    }), !label && /*#__PURE__*/_jsx("label", {
-      className: 'checkbox-label',
-      htmlFor: id,
-      children: children
-    })]
-  }), id);
-});
-export default Checkbox;
-//# sourceMappingURL=Checkbox.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { SystemIcons } from '../icons';
+import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
+import { Size } from '../types';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
+import { defaultOnMouseDownHandler } from '../common';
+export var StyledCheckBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .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"], ["\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"])), function (props) { return (props.margin ? "margin: ".concat(props.margin, ";") : ''); }, COLORS.black, function (props) { return (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600); }, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, COLORS.neutral_300, COLORS.primary_20, COLORS.primary_700);
+var Checkbox = React.forwardRef(function (_a, ref) {
+    var id = _a.id, selected = _a.selected, select = _a.select, label = _a.label, invalid = _a.invalid, iconPointerEventsTransparent = _a.iconPointerEventsTransparent, disabled = _a.disabled, margin = _a.margin, size = _a.size, semiSelected = _a.semiSelected, children = _a.children, readOnly = _a.readOnly, tabIndexVal = _a.tabIndexVal, dataTestId = _a.dataTestId, className = _a.className, rest = __rest(_a, ["id", "selected", "select", "label", "invalid", "iconPointerEventsTransparent", "disabled", "margin", "size", "semiSelected", "children", "readOnly", "tabIndexVal", "dataTestId", "className"]);
+    var onKeyPress = function (e) {
+        if (e.keyCode === 13 && !disabled && !readOnly) {
+            select && select(!selected);
+        }
+    };
+    var handleClick = function (e) {
+        if (disabled || readOnly) {
+            return;
+        }
+        if (select) {
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+            select(!selected);
+        }
+    };
+    size = size !== null && size !== void 0 ? size : Size.Medium;
+    var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readOnly ? ' readonly' : '');
+    return (React.createElement(StyledCheckBox, __assign({ key: id, ref: ref, disabled: disabled, className: cls, "aria-checked": selected, selected: selected, tabIndex: disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0), invalid: invalid, margin: margin, onClick: handleClick, onKeyDown: onKeyPress, onMouseDown: defaultOnMouseDownHandler }, rest),
+        React.createElement("div", { id: id, "data-testid": dataTestId, className: 'checkbox-icon' }, selected
+            ? React.createElement(SystemIcons.CheckboxOn, { className: iconPointerEventsTransparent ? 'pointerTransparent' : '', size: "24px" })
+            : semiSelected
+                ? React.createElement(SystemIcons.CheckboxSemi, { className: iconPointerEventsTransparent ? 'pointerTransparent' : '', size: "24px" })
+                : React.createElement(SystemIcons.CheckboxOff, { className: iconPointerEventsTransparent ? 'pointerTransparent' : '', size: "24px" })),
+        label &&
+            (React.createElement("label", { className: 'checkbox-label', htmlFor: id }, label)),
+        !label &&
+            React.createElement("label", { className: 'checkbox-label', htmlFor: id }, children)));
+});
+export default Checkbox;
+var templateObject_1;

package/dist/InputFields/DatepickerField.d.ts

@@ -7,34 +7,72 @@ import { Testable } from '../types';
 /**
  * Add custom types.
  */
-export type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {
+export declare type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {
+    /** Optional. Selected date. Defaults to current date */
     value?: Date;
+    /** Optional. Handler to be called when selected date was changed. */
     onChange?: (date: Date) => void;
+    /** Optional. Handler to be called when control is losing focus. */
     onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    /** Optional. Quarter picker mode. If set, then user can not select a particular date, but quarter of the year.
+     * 1st day of the quarter will be set as value.
+     */
     showQuarterYearPicker?: boolean;
+    /** Optional. If set, then input field will be shown in 'invalid' state */
     invalid?: boolean;
+    /** Optional. Format in which date will be shown in the input field. Defaults to 'MMMM Do, yyyy'.
+     * For quarter picker will be shown in 'YYYY, qqq' format.
+     */
     dateFormat?: string;
+    /** Optional. Validation message to be shown under the input field */
     validationMessage?: string;
+    /** Optional. Value for 'autocomplete' attribute of input field tag. */
     autoComplete?: string;
+    /** Optional. Placeholder text to be shown when no value is selected. */
     placeholder?: string;
+    /** Optional. If set, then user will be able to open year selector by clicking on the month in the dropdown. */
     yearPicker?: boolean;
+    /** Optional. How many years before current year will be available in the year selector mode. */
     yearsBeforeCurrentDate?: number;
+    /** Optional. How many years after current year will be available in the year selector mode. */
     yearsAfterCurrentDate?: number;
+    /** Optional. Margin value to be set to the dropdown container. */
     margin?: string;
+    /** Optional. Position where to show tooltip in case of closed datepicker and value overflowing the input field. */
+    overflowTooltipPosition?: 'top' | 'bottom';
 };
-declare const DatepickerField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onBlur" | "onChange" | "size" | "value"> & {
+declare const DatepickerField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onBlur" | "onChange" | "size"> & {
+    /** Optional. Selected date. Defaults to current date */
     value?: Date | undefined;
+    /** Optional. Handler to be called when selected date was changed. */
     onChange?: ((date: Date) => void) | undefined;
+    /** Optional. Handler to be called when control is losing focus. */
     onBlur?: ((event: React.FocusEvent<HTMLDivElement>) => void) | undefined;
+    /** Optional. Quarter picker mode. If set, then user can not select a particular date, but quarter of the year.
+     * 1st day of the quarter will be set as value.
+     */
     showQuarterYearPicker?: boolean | undefined;
+    /** Optional. If set, then input field will be shown in 'invalid' state */
     invalid?: boolean | undefined;
+    /** Optional. Format in which date will be shown in the input field. Defaults to 'MMMM Do, yyyy'.
+     * For quarter picker will be shown in 'YYYY, qqq' format.
+     */
     dateFormat?: string | undefined;
+    /** Optional. Validation message to be shown under the input field */
     validationMessage?: string | undefined;
+    /** Optional. Value for 'autocomplete' attribute of input field tag. */
     autoComplete?: string | undefined;
+    /** Optional. Placeholder text to be shown when no value is selected. */
     placeholder?: string | undefined;
+    /** Optional. If set, then user will be able to open year selector by clicking on the month in the dropdown. */
     yearPicker?: boolean | undefined;
+    /** Optional. How many years before current year will be available in the year selector mode. */
     yearsBeforeCurrentDate?: number | undefined;
+    /** Optional. How many years after current year will be available in the year selector mode. */
     yearsAfterCurrentDate?: number | undefined;
+    /** Optional. Margin value to be set to the dropdown container. */
     margin?: string | undefined;
+    /** Optional. Position where to show tooltip in case of closed datepicker and value overflowing the input field. */
+    overflowTooltipPosition?: "top" | "bottom" | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export default DatepickerField;