@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

package/dist/HyperLink/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styling.cjs","names":["_styledComponents","require","_","_templateObject","_templateObject2","defaultStyle","css","_taggedTemplateLiteral2","COLORS","primary_600","primary_800","primary_700","white","exports","invertedStyle","neutral_100","neutral_800"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: none;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${COLORS.primary_600};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${COLORS.primary_800};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    color: ${COLORS.primary_700};\r\n    text-decoration-line: underline;\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    background: ${COLORS.primary_800};\r\n    color: ${COLORS.white};\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    background: ${COLORS.primary_800};\r\n    color: ${COLORS.white};\r\n  }\r\n\r\n\r\n  &:focus:hover,\r\n  &:active:hover,\r\n  &.active-state:hover,\r\n  &.focus-state:hover{\r\n    text-decoration-line: none;\r\n    color: ${COLORS.white};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: underline;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${COLORS.white};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${COLORS.neutral_100};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${COLORS.white};\r\n    color: ${COLORS.neutral_800};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    text-decoration-line: none;\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${COLORS.white};\r\n    color: ${COLORS.neutral_800};\r\n  }\r\n\r\n  &:focus:hover,\r\n  &:active:hover {\r\n    text-decoration-line: none;\r\n    color: ${COLORS.neutral_800};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,CAAA,GAAAD,OAAA;AAA4B,IAAAE,eAAA,EAAAC,gBAAA;AAErB,IAAMC,YAAY,OAAGC,qBAAG,EAAAH,eAAA,KAAAA,eAAA,OAAAI,uBAAA,uvBAUlBC,QAAM,CAACC,WAAW,EAIlBD,QAAM,CAACE,WAAW,EAKlBF,QAAM,CAACG,WAAW,EAObH,QAAM,CAACE,WAAW,EACvBF,QAAM,CAACI,KAAK,EAMPJ,QAAM,CAACE,WAAW,EACvBF,QAAM,CAACI,KAAK,EASZJ,QAAM,CAACI,KAAK,CAGxB;AAACC,OAAA,CAAAR,YAAA,GAAAA,YAAA;AAEK,IAAMS,aAAa,OAAGR,qBAAG,EAAAF,gBAAA,KAAAA,gBAAA,OAAAG,uBAAA,uvBAWnBC,QAAM,CAACI,KAAK,EAIZJ,QAAM,CAACO,WAAW,EAObP,QAAM,CAACI,KAAK,EACjBJ,QAAM,CAACQ,WAAW,EAYbR,QAAM,CAACI,KAAK,EACjBJ,QAAM,CAACQ,WAAW,EAMlBR,QAAM,CAACQ,WAAW,CAG9B;AAACH,OAAA,CAAAC,aAAA,GAAAA,aAAA","ignoreList":[]}
+{"version":3,"file":"styling.cjs","names":["_styledComponents","require","_","_templateObject","_templateObject2","defaultStyle","css","_taggedTemplateLiteral2","props","COLORS","getColor","theme","exports","invertedStyle"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: none;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    text-decoration-line: underline;\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n\r\n  &:focus:hover,\r\n  &:active:hover,\r\n  &.active-state:hover,\r\n  &.focus-state:hover{\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: underline;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    text-decoration-line: none;\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:focus:hover,\r\n  &:active:hover {\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,CAAA,GAAAD,OAAA;AAA4B,IAAAE,eAAA,EAAAC,gBAAA;AAErB,IAAMC,YAAY,OAAGC,qBAAG,EAAAH,eAAA,KAAAA,eAAA,OAAAI,uBAAA,uvBAUlB,UAAAC,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAIpD,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAKpD,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAO/C,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GACzD,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAMzC,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GACzD,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAS9C,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,EAG1D;AAACC,OAAA,CAAAP,YAAA,GAAAA,YAAA;AAEK,IAAMQ,aAAa,OAAGP,qBAAG,EAAAF,gBAAA,KAAAA,gBAAA,OAAAG,uBAAA,uvBAWnB,UAAAC,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAI9C,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAO/C,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GACnD,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAY/C,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GACnD,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAMpD,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,EAGhE;AAACC,OAAA,CAAAC,aAAA,GAAAA,aAAA","ignoreList":[]}

package/dist/HyperLink/styling.d.ts

@@ -1,2 +1,2 @@
-export declare const defaultStyle: import("styled-components").FlattenSimpleInterpolation;
-export declare const invertedStyle: import("styled-components").FlattenSimpleInterpolation;
+export declare const defaultStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare const invertedStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;

package/dist/HyperLink/styling.js

@@ -2,6 +2,36 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 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_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);
+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"])), function (props) {
+  return COLORS.getColor('primary_600', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+});
+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"])), function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_800', props.theme);
+});
 //# sourceMappingURL=styling.js.map

package/dist/HyperLink/styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"styling.js","names":["css","COLORS","defaultStyle","_templateObject","_taggedTemplateLiteral","primary_600","primary_800","primary_700","white","invertedStyle","_templateObject2","neutral_100","neutral_800"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: none;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${COLORS.primary_600};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${COLORS.primary_800};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    color: ${COLORS.primary_700};\r\n    text-decoration-line: underline;\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    background: ${COLORS.primary_800};\r\n    color: ${COLORS.white};\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    background: ${COLORS.primary_800};\r\n    color: ${COLORS.white};\r\n  }\r\n\r\n\r\n  &:focus:hover,\r\n  &:active:hover,\r\n  &.active-state:hover,\r\n  &.focus-state:hover{\r\n    text-decoration-line: none;\r\n    color: ${COLORS.white};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: underline;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${COLORS.white};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${COLORS.neutral_100};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${COLORS.white};\r\n    color: ${COLORS.neutral_800};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    text-decoration-line: none;\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${COLORS.white};\r\n    color: ${COLORS.neutral_800};\r\n  }\r\n\r\n  &:focus:hover,\r\n  &:active:hover {\r\n    text-decoration-line: none;\r\n    color: ${COLORS.neutral_800};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,mBAAmB;AACvC,SAASC,MAAM,QAAQ,IAAI;AAE3B,OAAO,IAAMC,YAAY,GAAGF,GAAG,CAAAG,eAAA,KAAAA,eAAA,GAAAC,sBAAA,2uBAUlBH,MAAM,CAACI,WAAW,EAIlBJ,MAAM,CAACK,WAAW,EAKlBL,MAAM,CAACM,WAAW,EAObN,MAAM,CAACK,WAAW,EACvBL,MAAM,CAACO,KAAK,EAMPP,MAAM,CAACK,WAAW,EACvBL,MAAM,CAACO,KAAK,EASZP,MAAM,CAACO,KAAK,CAGxB;AAED,OAAO,IAAMC,aAAa,GAAGT,GAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAN,sBAAA,2uBAWnBH,MAAM,CAACO,KAAK,EAIZP,MAAM,CAACU,WAAW,EAObV,MAAM,CAACO,KAAK,EACjBP,MAAM,CAACW,WAAW,EAYbX,MAAM,CAACO,KAAK,EACjBP,MAAM,CAACW,WAAW,EAMlBX,MAAM,CAACW,WAAW,CAG9B","ignoreList":[]}
+{"version":3,"file":"styling.js","names":["css","COLORS","defaultStyle","_templateObject","_taggedTemplateLiteral","props","getColor","theme","invertedStyle","_templateObject2"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: none;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    text-decoration-line: underline;\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n\r\n  &:focus:hover,\r\n  &:active:hover,\r\n  &.active-state:hover,\r\n  &.focus-state:hover{\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: underline;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    text-decoration-line: none;\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:focus:hover,\r\n  &:active:hover {\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,mBAAmB;AACvC,SAASC,MAAM,QAAQ,IAAI;AAE3B,OAAO,IAAMC,YAAY,GAAGF,GAAG,CAAAG,eAAA,KAAAA,eAAA,GAAAC,sBAAA,2uBAUlB,UAAAC,KAAK;EAAA,OAAIJ,MAAM,CAACK,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAIpD,UAAAF,KAAK;EAAA,OAAIJ,MAAM,CAACK,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAKpD,UAAAF,KAAK;EAAA,OAAIJ,MAAM,CAACK,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAO/C,UAAAF,KAAK;EAAA,OAAIJ,MAAM,CAACK,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GACzD,UAAAF,KAAK;EAAA,OAAIJ,MAAM,CAACK,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAMzC,UAAAF,KAAK;EAAA,OAAIJ,MAAM,CAACK,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GACzD,UAAAF,KAAK;EAAA,OAAIJ,MAAM,CAACK,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAS9C,UAAAF,KAAK;EAAA,OAAIJ,MAAM,CAACK,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAG1D;AAED,OAAO,IAAMC,aAAa,GAAGR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAL,sBAAA,2uBAWnB,UAAAC,KAAK;EAAA,OAAIJ,MAAM,CAACK,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAI9C,UAAAF,KAAK;EAAA,OAAIJ,MAAM,CAACK,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAO/C,UAAAF,KAAK;EAAA,OAAIJ,MAAM,CAACK,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GACnD,UAAAF,KAAK;EAAA,OAAIJ,MAAM,CAACK,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAY/C,UAAAF,KAAK;EAAA,OAAIJ,MAAM,CAACK,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GACnD,UAAAF,KAAK;EAAA,OAAIJ,MAAM,CAACK,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAMpD,UAAAF,KAAK;EAAA,OAAIJ,MAAM,CAACK,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAGhE","ignoreList":[]}

package/dist/InputFields/Checkbox.cjs

@@ -25,9 +25,35 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var StyledCheckBox = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ", "\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ", "\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ", ";\n    }\n\n    .checkbox-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}, _styles.COLORS.black, function (props) {
-  return props.selected ? _styles.COLORS.primary_500 : props.invalid ? _styles.COLORS.critical_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.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, _styles.COLORS.primary_20, _styles.COLORS.primary_700);
+}, function (props) {
+  return _styles.COLORS.getColor('black', props.theme);
+}, function (props) {
+  return props.selected ? _styles.COLORS.getColor('primary_500', props.theme) : props.invalid ? _styles.COLORS.getColor('critical_400', props.theme) : _styles.COLORS.getColor('neutral_600', props.theme);
+}, function (props) {
+  return (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
+}, function (props) {
+  return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
+}, function (props) {
+  return (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
+}, _styles.focusStyles, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+});
 exports.StyledCheckBox = StyledCheckBox;
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _size;

package/dist/InputFields/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_typography","_common","_jsxRuntime","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledCheckBox","styled","div","_taggedTemplateLiteral2","props","margin","concat","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","exports","Checkbox","forwardRef","_ref","ref","_size","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties2","onKeyPress","keyCode","handleClick","stopPropagation","Size","Medium","cls","jsxs","tabIndex","onClick","onKeyDown","onMouseDown","defaultOnMouseDownHandler","jsx","SystemIcons","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor","_default"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${COLORS.black};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${COLORS.primary_100};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${COLORS.neutral_300};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.white};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,WAAA,GAAAN,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AAAoD,IAAAQ,WAAA,GAAAR,OAAA;AAAA,IAAAS,SAAA;AAAA,IAAAC,eAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAb,wBAAAa,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,cAAAR,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,aAAA/B,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AAG7C,IAAMkC,cAAc,GAAGC,4BAAM,CAACC,GAAG,CAAAtC,eAAA,KAAAA,eAAA,OAAAuC,uBAAA,0qDAMpC,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,cAAAC,MAAA,CAAcF,KAAK,CAACC,MAAM,SAAM,EAAE;AAAA,CAAC,EAGlDE,cAAM,CAACC,KAAK,EAiBR,UAAAJ,KAAK;EAAA,OAAKA,KAAK,CAACK,QAAQ,GAAGF,cAAM,CAACG,WAAW,GAAGN,KAAK,CAACO,OAAO,GAAGJ,cAAM,CAACK,YAAY,GAAGL,cAAM,CAACM,WAAW;AAAA,CAAC,EAUlH,IAAAC,6BAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAET,cAAM,CAACC,KAAK,CAAC,EAO3D,IAAAS,6BAAiB,EAACF,0BAAkB,CAACC,OAAO,EAAET,cAAM,CAACC,KAAK,CAAC,EAO3D,IAAAU,6BAAiB,EAACH,0BAAkB,CAACC,OAAO,EAAET,cAAM,CAACC,KAAK,CAAC,EAO3DW,mBAAW,EAKSZ,cAAM,CAACa,UAAU,EAG1Bb,cAAM,CAACc,WAAW,EAOfd,cAAM,CAACe,WAAW,EAGrBf,cAAM,CAACgB,WAAW,EAiBtBhB,cAAM,CAACiB,WAAW,EAQLjB,cAAM,CAACkB,KAAK,EAIvBlB,cAAM,CAACiB,WAAW,EAMPjB,cAAM,CAACa,UAAU,EAG1Bb,cAAM,CAACc,WAAW,CAIlC;AAACK,OAAA,CAAA1B,cAAA,GAAAA,cAAA;AAEF,IAAM2B,QAAQ,gBAAG3E,KAAK,CAAC4E,UAAU,CAAgC,UAAAC,IAAA,EAiBJC,GAAG,EAAK;EAAA,IAAAC,KAAA;EAAA,IAhBTC,EAAE,GAAAH,IAAA,CAAFG,EAAE;IACFvB,QAAQ,GAAAoB,IAAA,CAARpB,QAAQ;IACRwB,MAAM,GAAAJ,IAAA,CAANI,MAAM;IACNC,KAAK,GAAAL,IAAA,CAALK,KAAK;IACLvB,OAAO,GAAAkB,IAAA,CAAPlB,OAAO;IACPwB,4BAA4B,GAAAN,IAAA,CAA5BM,4BAA4B;IAC5BC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACR/B,MAAM,GAAAwB,IAAA,CAANxB,MAAM;IACNgC,IAAI,GAAAR,IAAA,CAAJQ,IAAI;IACJC,YAAY,GAAAT,IAAA,CAAZS,YAAY;IACZC,QAAQ,GAAAV,IAAA,CAARU,QAAQ;IACRC,QAAQ,GAAAX,IAAA,CAARW,QAAQ;IACRC,WAAW,GAAAZ,IAAA,CAAXY,WAAW;IACXC,UAAU,GAAAb,IAAA,CAAVa,UAAU;IACVC,SAAS,GAAAd,IAAA,CAATc,SAAS;IACNC,IAAI,OAAAC,yBAAA,aAAAhB,IAAA,EAAAlE,SAAA;EAEjE,IAAMmF,UAAU,GAAG,SAAbA,UAAUA,CAAIhF,CAAM,EAAK;IAC7B,IAAIA,CAAC,CAACiF,OAAO,KAAK,EAAE,IAAI,CAACX,QAAQ,IAAI,CAACI,QAAQ,EAAE;MAC9CP,MAAM,IAAIA,MAAM,CAAC,CAACxB,QAAQ,CAAC;IAC7B;EACF,CAAC;EAED,IAAMuC,WAAW,GAAG,SAAdA,WAAWA,CAAIlF,CAAmC,EAAK;IAC3D,IAAIsE,QAAQ,IAAII,QAAQ,EAAE;MACxB;IACF;IACA,IAAGP,MAAM,EAAC;MACRnE,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEmF,eAAe,CAAC,CAAC;MACpBhB,MAAM,CAAC,CAACxB,QAAQ,CAAC;IACnB;EACF,CAAC;EAED4B,IAAI,IAAAN,KAAA,GAAGM,IAAI,cAAAN,KAAA,cAAAA,KAAA,GAAImB,WAAI,CAACC,MAAM;EAE1B,IAAMC,GAAG,MAAA9C,MAAA,CAAM+B,IAAI,OAAA/B,MAAA,CAAIqC,SAAS,IAAI,EAAE,OAAArC,MAAA,CAAI8B,QAAQ,GAAG,WAAW,GAAG,EAAE,OAAA9B,MAAA,CAAIkC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAE;EAEtG,oBACE,IAAA9E,WAAA,CAAA2F,IAAA,EAACrD,cAAc,EAAAP,aAAA,CAAAA,aAAA;IACCqC,GAAG,EAAEA,GAAI;IACTM,QAAQ,EAAEA,QAAS;IACnBO,SAAS,EAAES,GAAI;IACf,gBAAc3C,QAAS;IACvBA,QAAQ,EAAEA,QAAS;IACnB6C,QAAQ,EAAElB,QAAQ,IAAII,QAAQ,GAAG,CAAC,CAAC,GAAIC,WAAW,GAAGA,WAAW,GAAG,CAAG;IACtE9B,OAAO,EAAEA,OAAQ;IACjBN,MAAM,EAAEA,MAAO;IACfkD,OAAO,EAAEP,WAAY;IACrBQ,SAAS,EAAEV,UAAW;IACtBW,WAAW,EAAEC;EAA0B,GACnCd,IAAI;IAAAL,QAAA,gBACtB,IAAA7E,WAAA,CAAAiG,GAAA;MAAK3B,EAAE,EAAEA,EAAG;MAAC,eAAaU,UAAW;MAACC,SAAS,EAAE,eAAgB;MAAAJ,QAAA,EAE7D9B,QAAQ,gBACJ,IAAA/C,WAAA,CAAAiG,GAAA,EAACtG,MAAA,CAAAuG,WAAW,CAACC,UAAU;QAAClB,SAAS,EAAER,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAACE,IAAI,EAAC;MAAM,CAAC,CAAC,GAC1GC,YAAY,gBACV,IAAA5E,WAAA,CAAAiG,GAAA,EAACtG,MAAA,CAAAuG,WAAW,CAACE,YAAY;QAACnB,SAAS,EAAER,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAACE,IAAI,EAAC;MAAM,CAAC,CAAC,gBAC5G,IAAA3E,WAAA,CAAAiG,GAAA,EAACtG,MAAA,CAAAuG,WAAW,CAACG,WAAW;QAACpB,SAAS,EAAER,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAACE,IAAI,EAAC;MAAM,CAAC;IAAC,CAEhH,CAAC,EAEJH,KAAK,iBAEH,IAAAxE,WAAA,CAAAiG,GAAA;MAAOhB,SAAS,EAAE,gBAAiB;MAC5BqB,OAAO,EAAEhC,EAAG;MAAAO,QAAA,EAChBL;IAAK,CACD,CACR,EAGD,CAACA,KAAK,iBACN,IAAAxE,WAAA,CAAAiG,GAAA;MAAOhB,SAAS,EAAE,gBAAiB;MAC5BqB,OAAO,EAAEhC,EAAG;MAAAO,QAAA,EAChBA;IAAQ,CACJ,CAAC;EAAA,IApCSP,EAsCL,CAAC;AAErB,CAAC,CAAC;AAAC,IAAAiC,QAAA,GAEYtC,QAAQ;AAAAD,OAAA,cAAAuC,QAAA","ignoreList":[]}
+{"version":3,"file":"Checkbox.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_typography","_common","_jsxRuntime","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledCheckBox","styled","div","_taggedTemplateLiteral2","props","margin","concat","COLORS","getColor","theme","selected","invalid","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","exports","Checkbox","forwardRef","_ref","ref","_size","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties2","onKeyPress","keyCode","handleClick","stopPropagation","Size","Medium","cls","jsxs","tabIndex","onClick","onKeyDown","onMouseDown","defaultOnMouseDownHandler","jsx","SystemIcons","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor","_default"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.selected ? COLORS.getColor('primary_500', props.theme) : props.invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/Checkbox.js

@@ -16,9 +16,35 @@ 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);
+}, function (props) {
+  return COLORS.getColor('black', props.theme);
+}, function (props) {
+  return props.selected ? COLORS.getColor('primary_500', props.theme) : props.invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme);
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, focusStyles, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+});
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _size;
   var id = _ref.id,

package/dist/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledCheckBox","div","_templateObject","_taggedTemplateLiteral","props","margin","concat","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","_ref","ref","_size","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","handleClick","stopPropagation","Medium","cls","_objectSpread","tabIndex","onClick","onKeyDown","onMouseDown","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${COLORS.black};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${COLORS.primary_100};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${COLORS.neutral_300};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.white};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":";;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,QAAO,WAAW;AACjE,SAAQC,IAAI,QAAO,UAAU;AAC7B,SAAQC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,QAAO,sBAAsB;AAC5F,SAAQC,yBAAyB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAGpD,OAAO,IAAMC,cAAc,GAAGd,MAAM,CAACe,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,8pDAMpC,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,cAAAC,MAAA,CAAcF,KAAK,CAACC,MAAM,SAAM,EAAE;AAAA,CAAC,EAGlDjB,MAAM,CAACmB,KAAK,EAiBR,UAAAH,KAAK;EAAA,OAAKA,KAAK,CAACI,QAAQ,GAAGpB,MAAM,CAACqB,WAAW,GAAGL,KAAK,CAACM,OAAO,GAAGtB,MAAM,CAACuB,YAAY,GAAGvB,MAAM,CAACwB,WAAW;AAAA,CAAC,EAUlHlB,iBAAiB,CAACL,kBAAkB,CAACwB,OAAO,EAAEzB,MAAM,CAACmB,KAAK,CAAC,EAO3Dd,iBAAiB,CAACJ,kBAAkB,CAACwB,OAAO,EAAEzB,MAAM,CAACmB,KAAK,CAAC,EAO3Df,iBAAiB,CAACH,kBAAkB,CAACwB,OAAO,EAAEzB,MAAM,CAACmB,KAAK,CAAC,EAO3DjB,WAAW,EAKSF,MAAM,CAAC0B,UAAU,EAG1B1B,MAAM,CAAC2B,WAAW,EAOf3B,MAAM,CAAC4B,WAAW,EAGrB5B,MAAM,CAAC6B,WAAW,EAiBtB7B,MAAM,CAAC8B,WAAW,EAQL9B,MAAM,CAAC+B,KAAK,EAIvB/B,MAAM,CAAC8B,WAAW,EAMP9B,MAAM,CAAC0B,UAAU,EAG1B1B,MAAM,CAAC2B,WAAW,CAIlC;AAED,IAAMK,QAAQ,gBAAGnC,KAAK,CAACoC,UAAU,CAAgC,UAAAC,IAAA,EAiBJC,GAAG,EAAK;EAAA,IAAAC,KAAA;EAAA,IAhBTC,EAAE,GAAAH,IAAA,CAAFG,EAAE;IACFjB,QAAQ,GAAAc,IAAA,CAARd,QAAQ;IACRkB,MAAM,GAAAJ,IAAA,CAANI,MAAM;IACNC,KAAK,GAAAL,IAAA,CAALK,KAAK;IACLjB,OAAO,GAAAY,IAAA,CAAPZ,OAAO;IACPkB,4BAA4B,GAAAN,IAAA,CAA5BM,4BAA4B;IAC5BC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACRxB,MAAM,GAAAiB,IAAA,CAANjB,MAAM;IACNyB,IAAI,GAAAR,IAAA,CAAJQ,IAAI;IACJC,YAAY,GAAAT,IAAA,CAAZS,YAAY;IACZC,QAAQ,GAAAV,IAAA,CAARU,QAAQ;IACRC,QAAQ,GAAAX,IAAA,CAARW,QAAQ;IACRC,WAAW,GAAAZ,IAAA,CAAXY,WAAW;IACXC,UAAU,GAAAb,IAAA,CAAVa,UAAU;IACVC,SAAS,GAAAd,IAAA,CAATc,SAAS;IACNC,IAAI,GAAAC,wBAAA,CAAAhB,IAAA,EAAAiB,SAAA;EAEjE,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAIC,CAAM,EAAK;IAC7B,IAAIA,CAAC,CAACC,OAAO,KAAK,EAAE,IAAI,CAACb,QAAQ,IAAI,CAACI,QAAQ,EAAE;MAC9CP,MAAM,IAAIA,MAAM,CAAC,CAAClB,QAAQ,CAAC;IAC7B;EACF,CAAC;EAED,IAAMmC,WAAW,GAAG,SAAdA,WAAWA,CAAIF,CAAmC,EAAK;IAC3D,IAAIZ,QAAQ,IAAII,QAAQ,EAAE;MACxB;IACF;IACA,IAAGP,MAAM,EAAC;MACRe,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEG,eAAe,CAAC,CAAC;MACpBlB,MAAM,CAAC,CAAClB,QAAQ,CAAC;IACnB;EACF,CAAC;EAEDsB,IAAI,IAAAN,KAAA,GAAGM,IAAI,cAAAN,KAAA,cAAAA,KAAA,GAAIjC,IAAI,CAACsD,MAAM;EAE1B,IAAMC,GAAG,MAAAxC,MAAA,CAAMwB,IAAI,OAAAxB,MAAA,CAAI8B,SAAS,IAAI,EAAE,OAAA9B,MAAA,CAAIuB,QAAQ,GAAG,WAAW,GAAG,EAAE,OAAAvB,MAAA,CAAI2B,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAE;EAEtG,oBACElC,KAAA,CAACC,cAAc,EAAA+C,aAAA,CAAAA,aAAA;IACCxB,GAAG,EAAEA,GAAI;IACTM,QAAQ,EAAEA,QAAS;IACnBO,SAAS,EAAEU,GAAI;IACf,gBAActC,QAAS;IACvBA,QAAQ,EAAEA,QAAS;IACnBwC,QAAQ,EAAEnB,QAAQ,IAAII,QAAQ,GAAG,CAAC,CAAC,GAAIC,WAAW,GAAGA,WAAW,GAAG,CAAG;IACtExB,OAAO,EAAEA,OAAQ;IACjBL,MAAM,EAAEA,MAAO;IACf4C,OAAO,EAAEN,WAAY;IACrBO,SAAS,EAAEV,UAAW;IACtBW,WAAW,EAAExD;EAA0B,GACnC0C,IAAI;IAAAL,QAAA,gBACtBnC,IAAA;MAAK4B,EAAE,EAAEA,EAAG;MAAC,eAAaU,UAAW;MAACC,SAAS,EAAE,eAAgB;MAAAJ,QAAA,EAE7DxB,QAAQ,gBACJX,IAAA,CAACV,WAAW,CAACiE,UAAU;QAAChB,SAAS,EAAER,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAACE,IAAI,EAAC;MAAM,CAAC,CAAC,GAC1GC,YAAY,gBACVlC,IAAA,CAACV,WAAW,CAACkE,YAAY;QAACjB,SAAS,EAAER,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAACE,IAAI,EAAC;MAAM,CAAC,CAAC,gBAC5GjC,IAAA,CAACV,WAAW,CAACmE,WAAW;QAAClB,SAAS,EAAER,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAACE,IAAI,EAAC;MAAM,CAAC;IAAC,CAEhH,CAAC,EAEJH,KAAK,iBAEH9B,IAAA;MAAOuC,SAAS,EAAE,gBAAiB;MAC5BmB,OAAO,EAAE9B,EAAG;MAAAO,QAAA,EAChBL;IAAK,CACD,CACR,EAGD,CAACA,KAAK,iBACN9B,IAAA;MAAOuC,SAAS,EAAE,gBAAiB;MAC5BmB,OAAO,EAAE9B,EAAG;MAAAO,QAAA,EAChBA;IAAQ,CACJ,CAAC;EAAA,IApCSP,EAsCL,CAAC;AAErB,CAAC,CAAC;AAEF,eAAeL,QAAQ","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledCheckBox","div","_templateObject","_taggedTemplateLiteral","props","margin","concat","getColor","theme","selected","invalid","Regular","Checkbox","forwardRef","_ref","ref","_size","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","handleClick","stopPropagation","Medium","cls","_objectSpread","tabIndex","onClick","onKeyDown","onMouseDown","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.selected ? COLORS.getColor('primary_500', props.theme) : props.invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/DatepickerField.cjs

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +12,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
 var _enGB = _interopRequireDefault(require("date-fns/locale/en-GB"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
@@ -35,6 +36,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /**
  * Import third-party libraries.
  */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 _dayjs["default"].extend(_advancedFormat["default"]);
@@ -57,12 +60,100 @@ _dayjs["default"].extend(_quarterOfYear["default"]);
  */
 var DatePickerContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  .react-datepicker-popper[data-placement^=bottom] {\n    padding-top: 0px;\n  }\n\n  \n  .react-datepicker-popper[data-placement^=top] {\n    padding-bottom: 0px;\n  }\n\n  > div {\n    display: block;\n\n    ", "\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 48px;\n      width: 48px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ", "\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker-year-header {\n      height: 48px;\n      line-height: 48px !important;\n      align-items: center;\n\n      ", "\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__quarter-wrapper{\n      width: 100%;\n      display: flex;\n      align-content: space-evenly;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 20px;\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__navigation-icon {\n      display: none;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ", "\n    }\n\n    \n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day, .react-datepicker__quarter-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      flex-grow: 1;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ", "\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        flex-grow: 1;\n        font-weight: 400;\n        border: none;\n      }\n\n      &.react-datepicker__quarter--selected {\n        color: ", " !important;\n        flex-grow: 1;\n        background: ", " !important;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          ", "\n        }\n      }\n    }\n  }\n"])), _styles.Z_INDEXES.dropdown, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}, _colors["default"].primary_20, _styles.focusStyles, _colors["default"].neutral_20, _colors["default"].neutral_200, _colors["default"].neutral_20, function (props) {
+}, function (props) {
+  return _colors["default"].getColor('primary_20', props.theme);
+}, _styles.focusStyles, function (props) {
+  return _colors["default"].getColor('neutral_20', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('neutral_200', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('neutral_20', props.theme);
+}, function (props) {
   return !props.yearPicker ? '96px' : '54px';
-}, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors["default"].neutral_600), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors["default"].neutral_600), (0, _styles.scrollBarStyling)(_types.Size.Small), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors["default"].neutral_600), _colors["default"].white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors["default"].neutral_600), _colors["default"].neutral_600, _colors["default"].white, _colors["default"].primary_700, _colors["default"].primary_20, _styles.focusStyles, _colors["default"].white, _colors["default"].primary_500, _colors["default"].white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors["default"].neutral_600), _colors["default"].neutral_600, _colors["default"].white, _colors["default"].white, _colors["default"].primary_500, _colors["default"].primary_700, _colors["default"].primary_20, _styles.focusStyles, _colors["default"].white, _colors["default"].primary_500, _colors["default"].neutral_700, _colors["default"].neutral_100, _colors["default"].primary_700, _colors["default"].primary_20, _styles.focusStyles);
+}, function (props) {
+  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors["default"].getColor('neutral_600', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors["default"].getColor('neutral_600', props.theme));
+}, (0, _styles.scrollBarStyling)(_types.Size.Small), function (props) {
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors["default"].getColor('neutral_600', props.theme));
+}, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, function (props) {
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors["default"].getColor('neutral_600', props.theme));
+}, function (props) {
+  return _colors["default"].getColor('neutral_600', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_700', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_20', props.theme);
+}, _styles.focusStyles, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_500', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, function (props) {
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors["default"].getColor('neutral_600', props.theme));
+}, function (props) {
+  return _colors["default"].getColor('neutral_600', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_500', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_700', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_20', props.theme);
+}, _styles.focusStyles, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_500', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('neutral_700', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('neutral_100', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_700', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_20', props.theme);
+}, _styles.focusStyles);
 var IconWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n"])), +_styles.Z_INDEXES.focus + 1);
 var DatepickerRow = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-var StyledInputFieldStyling = (0, _styledComponents["default"])(_styling.InputFieldStyling)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n  \n  &:disabled {\n    background-color: ", ";\n  }\n\n  & ~ ", "{\n    color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ", &.open ~ ", " {\n    color: ", ";\n  }\n\n  &[tabindex='-1'] ~ ", " {\n    color: ", ";\n  }\n"])), _colors["default"].neutral_500, _colors["default"].primary_300, _colors["default"].primary_200, _colors["default"].primary_700, _colors["default"].primary_20, _colors["default"].primary_700, _colors["default"].primary_300, _colors["default"].primary_100, _colors["default"].primary_800, _colors["default"].primary_800, _colors["default"].white, IconWrapper, _colors["default"].neutral_600, IconWrapper, _colors["default"].primary_700, IconWrapper, IconWrapper, _colors["default"].primary_800, IconWrapper, _colors["default"].neutral_300);
+var StyledInputFieldStyling = (0, _styledComponents["default"])(_styling.InputFieldStyling)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n  \n  &:disabled {\n    background-color: ", ";\n  }\n\n  & ~ ", "{\n    color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ", &.open ~ ", " {\n    color: ", ";\n  }\n\n  &[tabindex='-1'] ~ ", " {\n    color: ", ";\n  }\n"])), function (props) {
+  return _colors["default"].getColor('neutral_500', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_300', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_200', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_700', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_20', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_700', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_300', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_100', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_800', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_800', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, IconWrapper, function (props) {
+  return _colors["default"].getColor('neutral_600', props.theme);
+}, IconWrapper, function (props) {
+  return _colors["default"].getColor('primary_700', props.theme);
+}, IconWrapper, IconWrapper, function (props) {
+  return _colors["default"].getColor('primary_800', props.theme);
+}, IconWrapper, function (props) {
+  return _colors["default"].getColor('neutral_300', props.theme);
+});
 var quarterComponentsClassPrefix = 'react-datepicker__quarter-';
 var DatepickerField = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
@@ -86,6 +177,7 @@ var DatepickerField = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     dataTestId = _ref.dataTestId,
     rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   // Globally used variables within the component
+  var theme = (0, _styledComponents.useTheme)();
   var inputRef = (0, _common.useFocusVisibleRef)();
   var datepickerRef = _react["default"].useRef(null);
   var focusedQuarterRef = _react["default"].useRef(1);
@@ -321,7 +413,7 @@ var DatepickerField = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       })
     }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.TechnicalWarning, {
-        color: _colors["default"].critical_400
+        color: _colors["default"].getColor('critical_400', theme)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: validationMessage
       })]