@laerdal/life-react-components 5.0.8-dev.2.full → 5.0.9

package/dist/InputFields/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_typography","_common","_jsxRuntime","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledCheckBox","exports","styled","div","_taggedTemplateLiteral2","props","margin","concat","COLORS","getColor","theme","$selected","$invalid","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","Checkbox","forwardRef","_ref","ref","_size","id","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties2","onKeyPress","keyCode","handleClick","stopPropagation","Size","Medium","cls","jsxs","tabIndex","onClick","onKeyDown","onMouseDown","defaultOnMouseDownHandler","jsx","SystemIcons","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor","_default"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    $selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    $invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_typography","_common","_jsxRuntime","_excluded","_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","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties2","onKeyPress","keyCode","handleClick","stopPropagation","Size","Medium","cls","jsxs","tabIndex","onClick","onKeyDown","onMouseDown","defaultOnMouseDownHandler","jsx","SystemIcons","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor","_default"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    $selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    $invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/Checkbox.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-const _excluded = ["id", "selected", "select", "label", "invalid", "iconPointerEventsTransparent", "disabled", "margin", "size", "semiSelected", "children", "readOnly", "tabIndexVal", "dataTestId", "className"];
+var _excluded = ["id", "selected", "select", "label", "invalid", "iconPointerEventsTransparent", "disabled", "margin", "size", "semiSelected", "children", "readOnly", "tabIndexVal", "dataTestId", "className"];
 var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -12,44 +12,73 @@ 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, jsxs as _jsxs } from "react/jsx-runtime";
-export const StyledCheckBox = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ", "\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ", "\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ", ";\n    }\n\n    .checkbox-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), props => props.margin ? "margin: ".concat(props.margin, ";") : '', props => COLORS.getColor('black', props.theme), props => props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme), props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), focusStyles, props => COLORS.getColor('primary_20', props.theme), props => COLORS.getColor('primary_700', props.theme), props => COLORS.getColor('primary_100', props.theme), props => COLORS.getColor('primary_800', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('white', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('primary_20', props.theme), props => COLORS.getColor('primary_700', props.theme));
-const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+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, ";") : '';
+}, 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;
-  let {
-      id,
-      selected,
-      select,
-      label,
-      invalid,
-      iconPointerEventsTransparent,
-      disabled,
-      margin,
-      size,
-      semiSelected,
-      children,
-      readOnly,
-      tabIndexVal,
-      dataTestId,
-      className
-    } = _ref,
+  var id = _ref.id,
+    selected = _ref.selected,
+    select = _ref.select,
+    label = _ref.label,
+    invalid = _ref.invalid,
+    iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
+    disabled = _ref.disabled,
+    margin = _ref.margin,
+    size = _ref.size,
+    semiSelected = _ref.semiSelected,
+    children = _ref.children,
+    readOnly = _ref.readOnly,
+    tabIndexVal = _ref.tabIndexVal,
+    dataTestId = _ref.dataTestId,
+    className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  const onKeyPress = e => {
+  var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled && !readOnly) {
       select && select(!selected);
     }
   };
-  const handleClick = e => {
+  var handleClick = function handleClick(e) {
     if (disabled || readOnly) {
       return;
     }
     if (select) {
-      e === null || e === void 0 || e.stopPropagation();
+      e === null || e === void 0 ? void 0 : e.stopPropagation();
       select(!selected);
     }
   };
   size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
-  const cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readOnly ? ' readonly' : '');
+  var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readOnly ? ' readonly' : '');
   return /*#__PURE__*/_jsxs(StyledCheckBox, _objectSpread(_objectSpread({
     ref: ref,
     disabled: disabled,

package/dist/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledCheckBox","div","_templateObject","_taggedTemplateLiteral","props","margin","concat","getColor","theme","$selected","$invalid","Regular","Checkbox","forwardRef","_ref","ref","_size","id","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","handleClick","stopPropagation","Medium","cls","_objectSpread","tabIndex","onClick","onKeyDown","onMouseDown","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    $selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    $invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledCheckBox","div","_templateObject","_taggedTemplateLiteral","props","margin","concat","getColor","theme","$selected","$invalid","Regular","Checkbox","forwardRef","_ref","ref","_size","id","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","handleClick","stopPropagation","Medium","cls","_objectSpread","tabIndex","onClick","onKeyDown","onMouseDown","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    $selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    $invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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","ignoreList":[]}