@laerdal/life-react-components 1.6.0 → 1.7.0-dev.10

package/dist/HyperLink/styling.cjs

@@ -15,7 +15,7 @@ var _ = require("..");
 
 var _templateObject, _templateObject2;
 
-var defaultStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ", ";\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), _.COLORS.primary_500, _.COLORS.accent1_500, _.COLORS.primary_700, _.COLORS.primary_800, _.COLORS.white, _.COLORS.primary_800, _.COLORS.white, _.COLORS.white);
+var defaultStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ", ";\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), _.COLORS.primary_600, _.COLORS.primary_800, _.COLORS.primary_700, _.COLORS.primary_800, _.COLORS.white, _.COLORS.primary_800, _.COLORS.white, _.COLORS.white);
 exports.defaultStyle = defaultStyle;
 var invertedStyle = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), _.COLORS.white, _.COLORS.neutral_100, _.COLORS.white, _.COLORS.neutral_800, _.COLORS.white, _.COLORS.neutral_800, _.COLORS.neutral_800);
 exports.invertedStyle = invertedStyle;

package/dist/HyperLink/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["defaultStyle","css","COLORS","primary_500","accent1_500","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEO,IAAMA,YAAY,OAAGC,qBAAH,uzBAUZC,SAAOC,WAVK,EAcZD,SAAOE,WAdK,EAmBZF,SAAOG,WAnBK,EA0BPH,SAAOI,WA1BA,EA2BZJ,SAAOK,KA3BK,EAiCPL,SAAOI,WAjCA,EAkCZJ,SAAOK,KAlCK,EA2CZL,SAAOK,KA3CK,CAAlB;;AAgDA,IAAMC,aAAa,OAAGP,qBAAH,yzBAWbC,SAAOK,KAXM,EAebL,SAAOO,WAfM,EAsBRP,SAAOK,KAtBC,EAuBbL,SAAOQ,WAvBM,EAmCRR,SAAOK,KAnCC,EAoCbL,SAAOQ,WApCM,EA0CbR,SAAOQ,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.primary_500};\n  }\n\n  &:visited {\n    color: ${COLORS.accent1_500};\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ${COLORS.primary_700};\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ${COLORS.white};\n    opacity: 0.9;\n  }\n`;\n\nexport const invertedStyle = css`\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.white};\n  }\n\n  &:visited {\n    color: ${COLORS.neutral_100};\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ${COLORS.neutral_800};\n    opacity: 0.9;\n  }\n`;\n"],"file":"styling.cjs"}
+{"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["defaultStyle","css","COLORS","primary_600","primary_800","primary_700","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEO,IAAMA,YAAY,OAAGC,qBAAH,uzBAUZC,SAAOC,WAVK,EAcZD,SAAOE,WAdK,EAmBZF,SAAOG,WAnBK,EA0BPH,SAAOE,WA1BA,EA2BZF,SAAOI,KA3BK,EAiCPJ,SAAOE,WAjCA,EAkCZF,SAAOI,KAlCK,EA2CZJ,SAAOI,KA3CK,CAAlB;;AAgDA,IAAMC,aAAa,OAAGN,qBAAH,yzBAWbC,SAAOI,KAXM,EAebJ,SAAOM,WAfM,EAsBRN,SAAOI,KAtBC,EAuBbJ,SAAOO,WAvBM,EAmCRP,SAAOI,KAnCC,EAoCbJ,SAAOO,WApCM,EA0CbP,SAAOO,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.primary_600};\n  }\n\n  &:visited {\n    color: ${COLORS.primary_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ${COLORS.primary_700};\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ${COLORS.white};\n    opacity: 0.9;\n  }\n`;\n\nexport const invertedStyle = css`\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.white};\n  }\n\n  &:visited {\n    color: ${COLORS.neutral_100};\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ${COLORS.neutral_800};\n    opacity: 0.9;\n  }\n`;\n"],"file":"styling.cjs"}

package/dist/HyperLink/styling.js

@@ -4,6 +4,6 @@ var _templateObject, _templateObject2;
 
 import { css } from 'styled-components';
 import { COLORS } from '..';
-export var defaultStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ", ";\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), COLORS.primary_500, COLORS.accent1_500, COLORS.primary_700, COLORS.primary_800, COLORS.white, COLORS.primary_800, COLORS.white, COLORS.white);
+export var defaultStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ", ";\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), COLORS.primary_600, COLORS.primary_800, COLORS.primary_700, COLORS.primary_800, COLORS.white, COLORS.primary_800, COLORS.white, COLORS.white);
 export var invertedStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), COLORS.white, COLORS.neutral_100, COLORS.white, COLORS.neutral_800, COLORS.white, COLORS.neutral_800, COLORS.neutral_800);
 //# sourceMappingURL=styling.js.map

package/dist/HyperLink/styling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["css","COLORS","defaultStyle","primary_500","accent1_500","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,IAAvB;AAEA,OAAO,IAAMC,YAAY,GAAGF,GAAH,wyBAUZC,MAAM,CAACE,WAVK,EAcZF,MAAM,CAACG,WAdK,EAmBZH,MAAM,CAACI,WAnBK,EA0BPJ,MAAM,CAACK,WA1BA,EA2BZL,MAAM,CAACM,KA3BK,EAiCPN,MAAM,CAACK,WAjCA,EAkCZL,MAAM,CAACM,KAlCK,EA2CZN,MAAM,CAACM,KA3CK,CAAlB;AAgDP,OAAO,IAAMC,aAAa,GAAGR,GAAH,0yBAWbC,MAAM,CAACM,KAXM,EAebN,MAAM,CAACQ,WAfM,EAsBRR,MAAM,CAACM,KAtBC,EAuBbN,MAAM,CAACS,WAvBM,EAmCRT,MAAM,CAACM,KAnCC,EAoCbN,MAAM,CAACS,WApCM,EA0CbT,MAAM,CAACS,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.primary_500};\n  }\n\n  &:visited {\n    color: ${COLORS.accent1_500};\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ${COLORS.primary_700};\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ${COLORS.white};\n    opacity: 0.9;\n  }\n`;\n\nexport const invertedStyle = css`\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.white};\n  }\n\n  &:visited {\n    color: ${COLORS.neutral_100};\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ${COLORS.neutral_800};\n    opacity: 0.9;\n  }\n`;\n"],"file":"styling.js"}
+{"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["css","COLORS","defaultStyle","primary_600","primary_800","primary_700","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,IAAvB;AAEA,OAAO,IAAMC,YAAY,GAAGF,GAAH,wyBAUZC,MAAM,CAACE,WAVK,EAcZF,MAAM,CAACG,WAdK,EAmBZH,MAAM,CAACI,WAnBK,EA0BPJ,MAAM,CAACG,WA1BA,EA2BZH,MAAM,CAACK,KA3BK,EAiCPL,MAAM,CAACG,WAjCA,EAkCZH,MAAM,CAACK,KAlCK,EA2CZL,MAAM,CAACK,KA3CK,CAAlB;AAgDP,OAAO,IAAMC,aAAa,GAAGP,GAAH,0yBAWbC,MAAM,CAACK,KAXM,EAebL,MAAM,CAACO,WAfM,EAsBRP,MAAM,CAACK,KAtBC,EAuBbL,MAAM,CAACQ,WAvBM,EAmCRR,MAAM,CAACK,KAnCC,EAoCbL,MAAM,CAACQ,WApCM,EA0CbR,MAAM,CAACQ,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.primary_600};\n  }\n\n  &:visited {\n    color: ${COLORS.primary_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ${COLORS.primary_700};\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ${COLORS.white};\n    opacity: 0.9;\n  }\n`;\n\nexport const invertedStyle = css`\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.white};\n  }\n\n  &:visited {\n    color: ${COLORS.neutral_100};\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ${COLORS.neutral_800};\n    opacity: 0.9;\n  }\n`;\n"],"file":"styling.js"}

package/dist/Image/ImageWithFallbacks.cjs

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ = require("..");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(ImageWithFallbacks, _React$Component);
+
+  var _super = _createSuper(ImageWithFallbacks);
+
+  function ImageWithFallbacks(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ImageWithFallbacks);
+    _this = _super.call(this, props);
+    _this.state = {
+      src: props.src,
+      fallbackIndex: 0,
+      fallbacks: _this.props.fallbacks.split(','),
+      loaded: false
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(ImageWithFallbacks, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {
+        this.setState({
+          src: this.props.src,
+          fallbackIndex: 0,
+          fallbacks: this.props.fallbacks.split(','),
+          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;
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          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
+        }), this.props.loader && !this.state.loaded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LoadingIndicator, {})]
+      });
+    }
+  }]);
+  return ImageWithFallbacks;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(ImageWithFallbacks, "propTypes", {
+  fallbacks: _propTypes.default.string.isRequired,
+  src: _propTypes.default.string.isRequired,
+  alt: _propTypes.default.string.isRequired,
+  loader: _propTypes.default.bool.isRequired
+});
+var _default = ImageWithFallbacks;
+exports.default = _default;
+//# sourceMappingURL=ImageWithFallbacks.cjs.map

package/dist/Image/ImageWithFallbacks.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Image/ImageWithFallbacks.tsx"],"names":["ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","onError","onLoad","alt","loader","React","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;;;;;;;;;;;IAgBMA,kB;;;;;AACJ,8BAAYC,KAAZ,EAA4C;AAAA;;AAAA;AAC1C,8BAAMA,KAAN;AACA,UAAKC,KAAL,GAAa;AACXC,MAAAA,GAAG,EAAEF,KAAK,CAACE,GADA;AAEXC,MAAAA,aAAa,EAAE,CAFJ;AAGXC,MAAAA,SAAS,EAAE,MAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHA;AAIXC,MAAAA,MAAM,EAAE;AAJG,KAAb;AAF0C;AAQ3C;;;;WACD,4BAAmBC,SAAnB,EAAuD;AACrD,UAAIA,SAAS,CAACL,GAAV,KAAkB,KAAKF,KAAL,CAAWE,GAA7B,IAAoCK,SAAS,CAACH,SAAV,KAAwB,KAAKJ,KAAL,CAAWI,SAA3E,EAAsF;AACpF,aAAKI,QAAL,CAAc;AACZN,UAAAA,GAAG,EAAE,KAAKF,KAAL,CAAWE,GADJ;AAEZC,UAAAA,aAAa,EAAE,CAFH;AAGZC,UAAAA,SAAS,EAAE,KAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHC;AAIZC,UAAAA,MAAM,EAAE;AAJI,SAAd;AAMD;AACF;;;WACD,mBAAU;AACR,UAAI,KAAKL,KAAL,CAAWE,aAAX,GAA2B,KAAKF,KAAL,CAAWG,SAAX,CAAqBK,MAApD,EAA4D;AAC1D;AACD;;AACD,WAAKD,QAAL,CAAc;AACZN,QAAAA,GAAG,EAAE,KAAKD,KAAL,CAAWG,SAAX,CAAqB,KAAKH,KAAL,CAAWE,aAAhC,CADO;AAEZA,QAAAA,aAAa,EAAE,KAAKF,KAAL,CAAWE,aAAX,GAA2B,CAF9B;AAGZC,QAAAA,SAAS,EAAE,KAAKH,KAAL,CAAWG;AAHV,OAAd;AAKD;;;WACD,kBAAS;AACP,WAAKI,QAAL,iCAAmB,KAAKP,KAAxB;AAA+BK,QAAAA,MAAM,EAAE;AAAvC;AACD;;;WACD,kBAAS;AAAA;;AACP,0BACE;AAAA,gCACE;AAAK,UAAA,GAAG,EAAE,KAAKL,KAAL,CAAWC,GAArB;AAA0B,UAAA,OAAO,EAAE;AAAA,mBAAM,MAAI,CAACQ,OAAL,EAAN;AAAA,WAAnC;AAAyD,UAAA,QAAQ,EAAE;AAAA,mBAAM,MAAI,CAACC,MAAL,EAAN;AAAA,WAAnE;AAAwF,UAAA,MAAM,EAAE;AAAA,mBAAM,MAAI,CAACA,MAAL,EAAN;AAAA,WAAhG;AAAqH,UAAA,GAAG,EAAE,KAAKX,KAAL,CAAWY;AAArI,UADF,EAEG,KAAKZ,KAAL,CAAWa,MAAX,IAAqB,CAAC,KAAKZ,KAAL,CAAWK,MAAjC,iBAA2C,qBAAC,kBAAD,KAF9C;AAAA,QADF;AAMD;;;EAxC8BQ,eAAMC,S;;8BAAjChB,kB;AAbJK,EAAAA,S;AACAF,EAAAA,G;AACAU,EAAAA,G;AACAC,EAAAA,M;;eAqDad,kB","sourcesContent":["import { LoadingIndicator } from '..';\nimport React from 'react';\n\nexport interface ImageWithFallbacksProps {\n  fallbacks: string;\n  src: string;\n  alt: string;\n  loader: boolean;\n}\n\ntype ImageWithFallbacksState = {\n  src: string;\n  fallbackIndex: number;\n  fallbacks: string[];\n  loaded: boolean;\n};\n\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\n  constructor(props: ImageWithFallbacksProps) {\n    super(props);\n    this.state = {\n      src: props.src,\n      fallbackIndex: 0,\n      fallbacks: this.props.fallbacks.split(','),\n      loaded: false,\n    };\n  }\n  componentDidUpdate(prevProps: ImageWithFallbacksProps) {\n    if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\n      this.setState({\n        src: this.props.src,\n        fallbackIndex: 0,\n        fallbacks: this.props.fallbacks.split(','),\n        loaded: false,\n      });\n    }\n  }\n  onError() {\n    if (this.state.fallbackIndex > this.state.fallbacks.length) {\n      return;\n    }\n    this.setState({\n      src: this.state.fallbacks[this.state.fallbackIndex],\n      fallbackIndex: this.state.fallbackIndex + 1,\n      fallbacks: this.state.fallbacks,\n    });\n  }\n  onLoad() {\n    this.setState({ ...this.state, loaded: true });\n  }\n  render() {\n    return (\n      <>\n        <img src={this.state.src} onError={() => this.onError()} onChange={() => this.onLoad()} onLoad={() => this.onLoad()} alt={this.props.alt} />\n        {this.props.loader && !this.state.loaded && <LoadingIndicator></LoadingIndicator>}\n      </>\n    );\n  }\n}\n\nexport default ImageWithFallbacks;\n"],"file":"ImageWithFallbacks.cjs"}

package/dist/Image/ImageWithFallbacks.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface ImageWithFallbacksProps {
+    fallbacks: string;
+    src: string;
+    alt: string;
+    loader: boolean;
+}
+declare type ImageWithFallbacksState = {
+    src: string;
+    fallbackIndex: number;
+    fallbacks: string[];
+    loaded: boolean;
+};
+declare class ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {
+    constructor(props: ImageWithFallbacksProps);
+    componentDidUpdate(prevProps: ImageWithFallbacksProps): void;
+    onError(): void;
+    onLoad(): void;
+    render(): JSX.Element;
+}
+export default ImageWithFallbacks;

package/dist/Image/ImageWithFallbacks.js

@@ -0,0 +1,109 @@
+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";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+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;
+
+    _classCallCheck(this, ImageWithFallbacks);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      src: props.src,
+      fallbackIndex: 0,
+      fallbacks: _this.props.fallbacks.split(','),
+      loaded: false
+    };
+    return _this;
+  }
+
+  _createClass(ImageWithFallbacks, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {
+        this.setState({
+          src: this.props.src,
+          fallbackIndex: 0,
+          fallbacks: this.props.fallbacks.split(','),
+          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;
+
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("img", {
+          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
+        }), this.props.loader && !this.state.loaded && /*#__PURE__*/_jsx(LoadingIndicator, {})]
+      });
+    }
+  }]);
+
+  return ImageWithFallbacks;
+}(React.Component);
+
+_defineProperty(ImageWithFallbacks, "propTypes", {
+  fallbacks: _pt.string.isRequired,
+  src: _pt.string.isRequired,
+  alt: _pt.string.isRequired,
+  loader: _pt.bool.isRequired
+});
+
+export default ImageWithFallbacks;
+//# sourceMappingURL=ImageWithFallbacks.js.map

package/dist/Image/ImageWithFallbacks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Image/ImageWithFallbacks.tsx"],"names":["LoadingIndicator","React","ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","onError","onLoad","alt","loader","Component"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAASA,gBAAT,QAAiC,IAAjC;AACA,OAAOC,KAAP,MAAkB,OAAlB;;;;;IAgBMC,kB;;;;;AACJ,8BAAYC,KAAZ,EAA4C;AAAA;;AAAA;;AAC1C,8BAAMA,KAAN;AACA,UAAKC,KAAL,GAAa;AACXC,MAAAA,GAAG,EAAEF,KAAK,CAACE,GADA;AAEXC,MAAAA,aAAa,EAAE,CAFJ;AAGXC,MAAAA,SAAS,EAAE,MAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHA;AAIXC,MAAAA,MAAM,EAAE;AAJG,KAAb;AAF0C;AAQ3C;;;;WACD,4BAAmBC,SAAnB,EAAuD;AACrD,UAAIA,SAAS,CAACL,GAAV,KAAkB,KAAKF,KAAL,CAAWE,GAA7B,IAAoCK,SAAS,CAACH,SAAV,KAAwB,KAAKJ,KAAL,CAAWI,SAA3E,EAAsF;AACpF,aAAKI,QAAL,CAAc;AACZN,UAAAA,GAAG,EAAE,KAAKF,KAAL,CAAWE,GADJ;AAEZC,UAAAA,aAAa,EAAE,CAFH;AAGZC,UAAAA,SAAS,EAAE,KAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHC;AAIZC,UAAAA,MAAM,EAAE;AAJI,SAAd;AAMD;AACF;;;WACD,mBAAU;AACR,UAAI,KAAKL,KAAL,CAAWE,aAAX,GAA2B,KAAKF,KAAL,CAAWG,SAAX,CAAqBK,MAApD,EAA4D;AAC1D;AACD;;AACD,WAAKD,QAAL,CAAc;AACZN,QAAAA,GAAG,EAAE,KAAKD,KAAL,CAAWG,SAAX,CAAqB,KAAKH,KAAL,CAAWE,aAAhC,CADO;AAEZA,QAAAA,aAAa,EAAE,KAAKF,KAAL,CAAWE,aAAX,GAA2B,CAF9B;AAGZC,QAAAA,SAAS,EAAE,KAAKH,KAAL,CAAWG;AAHV,OAAd;AAKD;;;WACD,kBAAS;AACP,WAAKI,QAAL,iCAAmB,KAAKP,KAAxB;AAA+BK,QAAAA,MAAM,EAAE;AAAvC;AACD;;;WACD,kBAAS;AAAA;;AACP,0BACE;AAAA,gCACE;AAAK,UAAA,GAAG,EAAE,KAAKL,KAAL,CAAWC,GAArB;AAA0B,UAAA,OAAO,EAAE;AAAA,mBAAM,MAAI,CAACQ,OAAL,EAAN;AAAA,WAAnC;AAAyD,UAAA,QAAQ,EAAE;AAAA,mBAAM,MAAI,CAACC,MAAL,EAAN;AAAA,WAAnE;AAAwF,UAAA,MAAM,EAAE;AAAA,mBAAM,MAAI,CAACA,MAAL,EAAN;AAAA,WAAhG;AAAqH,UAAA,GAAG,EAAE,KAAKX,KAAL,CAAWY;AAArI,UADF,EAEG,KAAKZ,KAAL,CAAWa,MAAX,IAAqB,CAAC,KAAKZ,KAAL,CAAWK,MAAjC,iBAA2C,KAAC,gBAAD,KAF9C;AAAA,QADF;AAMD;;;;EAxC8BR,KAAK,CAACgB,S;;gBAAjCf,kB;AAbJK,EAAAA,S;AACAF,EAAAA,G;AACAU,EAAAA,G;AACAC,EAAAA,M;;;AAqDF,eAAed,kBAAf","sourcesContent":["import { LoadingIndicator } from '..';\nimport React from 'react';\n\nexport interface ImageWithFallbacksProps {\n  fallbacks: string;\n  src: string;\n  alt: string;\n  loader: boolean;\n}\n\ntype ImageWithFallbacksState = {\n  src: string;\n  fallbackIndex: number;\n  fallbacks: string[];\n  loaded: boolean;\n};\n\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\n  constructor(props: ImageWithFallbacksProps) {\n    super(props);\n    this.state = {\n      src: props.src,\n      fallbackIndex: 0,\n      fallbacks: this.props.fallbacks.split(','),\n      loaded: false,\n    };\n  }\n  componentDidUpdate(prevProps: ImageWithFallbacksProps) {\n    if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\n      this.setState({\n        src: this.props.src,\n        fallbackIndex: 0,\n        fallbacks: this.props.fallbacks.split(','),\n        loaded: false,\n      });\n    }\n  }\n  onError() {\n    if (this.state.fallbackIndex > this.state.fallbacks.length) {\n      return;\n    }\n    this.setState({\n      src: this.state.fallbacks[this.state.fallbackIndex],\n      fallbackIndex: this.state.fallbackIndex + 1,\n      fallbacks: this.state.fallbacks,\n    });\n  }\n  onLoad() {\n    this.setState({ ...this.state, loaded: true });\n  }\n  render() {\n    return (\n      <>\n        <img src={this.state.src} onError={() => this.onError()} onChange={() => this.onLoad()} onLoad={() => this.onLoad()} alt={this.props.alt} />\n        {this.props.loader && !this.state.loaded && <LoadingIndicator></LoadingIndicator>}\n      </>\n    );\n  }\n}\n\nexport default ImageWithFallbacks;\n"],"file":"ImageWithFallbacks.js"}

package/dist/Image/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ImageWithFallbacks", {
+  enumerable: true,
+  get: function get() {
+    return _ImageWithFallbacks.default;
+  }
+});
+
+var _ImageWithFallbacks = _interopRequireDefault(require("./ImageWithFallbacks"));
+//# sourceMappingURL=index.cjs.map

package/dist/Image/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["import ImageWithFallbacks from './ImageWithFallbacks';\n\nexport { ImageWithFallbacks };\n"],"file":"index.cjs"}

package/dist/Image/index.d.ts

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

package/dist/Image/index.js

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

package/dist/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Image/index.tsx"],"names":["ImageWithFallbacks"],"mappings":"AAAA,OAAOA,kBAAP,MAA+B,sBAA/B;AAEA,SAASA,kBAAT","sourcesContent":["import ImageWithFallbacks from './ImageWithFallbacks';\n\nexport { ImageWithFallbacks };\n"],"file":"index.js"}

package/dist/InputFields/Checkbox.cjs

@@ -35,11 +35,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var 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    outline: none;\n\n    .checkbox-icon {\n      background-color: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\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      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    box-shadow: none;\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"])), function (props) {
+var 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    .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"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, _styles.COLORS.black, function (props) {
   return props.selected ? _styles.COLORS.primary_500 : props.showWarning ? _styles.COLORS.warning_400 : _styles.COLORS.neutral_600;
-}, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_600, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.white, _styles.COLORS.neutral_300);
+}, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.white, _styles.COLORS.neutral_300);
 
 exports.StyledCheckBox = StyledCheckBox;
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {

package/dist/InputFields/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","tabIndexVal","onKeyPress","e","keyCode","handleClick","Size","Medium","toString","toLowerCase","concat","defaultOnMouseDownHandler"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\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: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readonly?: boolean;\n  tabIndexVal?: number;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readonly,\n                                                            tabIndexVal\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readonly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readonly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : '')}\n                    selected={selected}\n                    tabIndex={disabled || readonly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.cjs"}
+{"version":3,"sources":["../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","tabIndexVal","onKeyPress","e","keyCode","handleClick","Size","Medium","toString","toLowerCase","concat","defaultOnMouseDownHandler"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\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: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readonly?: boolean;\n  tabIndexVal?: number;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readonly,\n                                                            tabIndexVal\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readonly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readonly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : '')}\n                    selected={selected}\n                    tabIndex={disabled || readonly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.cjs"}

package/dist/InputFields/Checkbox.js

@@ -6,17 +6,17 @@ var _templateObject;
 import * as React from 'react';
 import styled from 'styled-components';
 import { CheckboxOff, CheckboxOn, CheckboxSemi } from '../icons/systemicons/SystemIcons';
-import { COLORS, ComponentTextStyle } from '../styles';
+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    outline: none;\n\n    .checkbox-icon {\n      background-color: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\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      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    box-shadow: none;\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"])), function (props) {
+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    .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"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, COLORS.black, function (props) {
   return props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600;
-}, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.white, COLORS.primary_500, COLORS.neutral_600, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, COLORS.neutral_300);
+}, 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);
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _size;
 

package/dist/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","tabIndexVal","onKeyPress","e","keyCode","handleClick","Medium","toString","toLowerCase","concat"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,EAAqBC,UAArB,EAAiCC,YAAjC,QAAoD,kCAApD;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,QAAsE,sBAAtE;AACA,SAAQC,yBAAR,QAAwC,WAAxC;;;AAEA,OAAO,IAAMC,cAAc,GAAGX,MAAM,CAACY,GAAV,izDAMvB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAjD;AAAA,CANkB,EAShBV,MAAM,CAACW,KATS,EA0BZ,UAAAF,KAAK;AAAA,SAAKA,KAAK,CAACG,QAAN,GAAiBZ,MAAM,CAACa,WAAxB,GAAsCJ,KAAK,CAACK,WAAN,GAAoBd,MAAM,CAACe,WAA3B,GAAyCf,MAAM,CAACgB,WAA3F;AAAA,CA1BO,EAoCrBX,iBAAiB,CAACJ,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CApCI,EA2CrBP,iBAAiB,CAACH,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CA3CI,EAkDrBR,iBAAiB,CAACF,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CAlDI,EA4DDX,MAAM,CAACkB,KA5DN,EA6DClB,MAAM,CAACa,WA7DR,EAgEVb,MAAM,CAACgB,WAhEG,EAuEDhB,MAAM,CAACmB,UAvEN,EA0EVnB,MAAM,CAACoB,WA1EG,EAiFPpB,MAAM,CAACqB,WAjFA,EAqFVrB,MAAM,CAACsB,WArFG,EAsGdtB,MAAM,CAACuB,WAtGO,EA8GDvB,MAAM,CAACkB,KA9GN,EAkHZlB,MAAM,CAACuB,WAlHK,CAApB;AAsIP,IAAMC,QAAQ,gBAAG7B,KAAK,CAAC8B,UAAN,CAAwC,gBAcIC,GAdJ,EAcY;AAAA;;AAAA,MAbTC,EAaS,QAbTA,EAaS;AAAA,MAZTf,QAYS,QAZTA,QAYS;AAAA,MAXTgB,MAWS,QAXTA,MAWS;AAAA,MAVTC,KAUS,QAVTA,KAUS;AAAA,MATTf,WASS,QATTA,WASS;AAAA,MARTgB,4BAQS,QARTA,4BAQS;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTrB,MAMS,QANTA,MAMS;AAAA,MALTsB,IAKS,QALTA,IAKS;AAAA,MAJTC,YAIS,QAJTA,YAIS;AAAA,MAHTC,QAGS,QAHTA,QAGS;AAAA,MAFTC,QAES,QAFTA,QAES;AAAA,MADTC,WACS,QADTA,WACS;;AACnE,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAY;AAC7B,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAd,IAAoB,CAACR,QAArB,IAAiC,CAACI,QAAtC,EAAgD;AAC9CP,MAAAA,MAAM,IAAIA,MAAM,CAAC,CAAChB,QAAF,CAAhB;AACD;AACF,GAJD;;AAMA,MAAM4B,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIT,QAAQ,IAAII,QAAhB,EAA0B;AACxB;AACD;;AACDP,IAAAA,MAAM,IAAIA,MAAM,CAAC,CAAChB,QAAF,CAAhB;AACD,GALD;;AAOAoB,EAAAA,IAAI,YAAGA,IAAH,yCAAW9B,IAAI,CAACuC,MAApB;AAEA,sBACE,MAAC,cAAD;AACgB,IAAA,GAAG,EAAEf,GADrB;AAEgB,IAAA,QAAQ,EAAEK,QAF1B;AAGgB,IAAA,SAAS,EAAEC,IAAI,CAACU,QAAL,GAAgBC,WAAhB,GAA8BC,MAA9B,CAAqCb,QAAQ,GAAG,WAAH,GAAiB,EAA9D,EAAkEa,MAAlE,CAAyET,QAAQ,GAAG,WAAH,GAAiB,EAAlG,CAH3B;AAIgB,IAAA,QAAQ,EAAEvB,QAJ1B;AAKgB,IAAA,QAAQ,EAAEmB,QAAQ,IAAII,QAAZ,GAAuB,CAAC,CAAxB,GAA6BC,WAAW,GAAGA,WAAH,GAAiB,CALnF;AAMgB,IAAA,WAAW,EAAEtB,WAN7B;AAOgB,IAAA,MAAM,EAAEJ,MAPxB;AAQgB,IAAA,OAAO,EAAE8B,WARzB;AASgB,IAAA,SAAS,EAAEH,UAT3B;AAUgB,IAAA,WAAW,EAAE/B,yBAV7B;AAAA,4BAWE;AAAK,MAAA,EAAE,EAAEqB,EAAT;AAAa,MAAA,SAAS,EAAE,eAAxB;AAAA,gBAEIf,QAAQ,gBACJ,KAAC,UAAD;AAAY,QAAA,SAAS,EAAEkB,4BAA4B,GAAG,oBAAH,GAA0B,EAA7E;AAAiF,QAAA,IAAI,EAAC;AAAtF,QADI,GAEJG,YAAY,gBACV,KAAC,YAAD;AAAc,QAAA,SAAS,EAAEH,4BAA4B,GAAG,oBAAH,GAA0B,EAA/E;AAAmF,QAAA,IAAI,EAAC;AAAxF,QADU,gBAEV,KAAC,WAAD;AAAa,QAAA,SAAS,EAAEA,4BAA4B,GAAG,oBAAH,GAA0B,EAA9E;AAAkF,QAAA,IAAI,EAAC;AAAvF;AANV,MAXF,EAqBID,KAAK,iBAEH;AAAO,MAAA,SAAS,EAAE,gBAAlB;AACO,MAAA,OAAO,EAAEF,EADhB;AAAA,gBAEGE;AAFH,MAvBN,EA8BI,CAACA,KAAD,iBACA;AAAO,MAAA,SAAS,EAAE,gBAAlB;AACO,MAAA,OAAO,EAAEF,EADhB;AAAA,gBAEGO;AAFH,MA/BJ;AAAA,KAAqBP,EAArB,CADF;AAuCD,CArEgB,CAAjB;;AAdEA,EAAAA,E;AACAf,EAAAA,Q;AACAgB,EAAAA,M;AACAC,EAAAA,K;AACAf,EAAAA,W;AACAiB,EAAAA,Q;AACArB,EAAAA,M;AAEAoB,EAAAA,4B;AACAG,EAAAA,Y;AACAE,EAAAA,Q;AACAC,EAAAA,W;;AA0EF,eAAeZ,QAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\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: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readonly?: boolean;\n  tabIndexVal?: number;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readonly,\n                                                            tabIndexVal\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readonly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readonly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : '')}\n                    selected={selected}\n                    tabIndex={disabled || readonly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","tabIndexVal","onKeyPress","e","keyCode","handleClick","Medium","toString","toLowerCase","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\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: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readonly?: boolean;\n  tabIndexVal?: number;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readonly,\n                                                            tabIndexVal\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readonly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readonly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : '')}\n                    selected={selected}\n                    tabIndex={disabled || readonly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}