@laerdal/life-react-components 2.0.1-dev.4 → 2.0.1-dev.5.full

package/dist/Chips/FilterChip.js

@@ -43,6 +43,7 @@ var FilterChip = function FilterChip(_ref) {
    * Return Filter Chip component.
    */
   return /*#__PURE__*/_jsx(ChipContainer, _objectSpread(_objectSpread({
+    role: "checkbox",
     className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!_onClick ? 'interactive' : '', " ").concat(className || ''),
     tabIndex: disabled || !_onClick ? -1 : 0,
     onKeyDown: function onKeyDown(e) {

package/dist/Chips/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterChip.js","names":["React","Size","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","FilterChip","selected","text","size","Medium","disabled","onClick","className","rest","e","key"],"sources":["../../src/Chips/FilterChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n                                                                selected,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                ...rest\n                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <ChipContainer\n      className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n      tabIndex={disabled || !onClick ? -1 : 0}\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n      onMouseDown={defaultOnMouseDownHandler}\n      onClick={() => !disabled && onClick && onClick()}\n      {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\n          <div>{text}</div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default FilterChip;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAAQC,IAAR,QAAmB,UAAnB;AAEA;AACA;AACA;;AACA,SAAQC,WAAR,QAA0B,gBAA1B;AAEA;AACA;AACA;;AACA,SAAQC,WAAR,EAAqBC,oBAArB,EAA2CC,aAA3C,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAQwB;EAAA,IAPrBC,QAOqB,QAPrBA,QAOqB;EAAA,IANrBC,IAMqB,QANrBA,IAMqB;EAAA,qBALrBC,IAKqB;EAAA,IALrBA,IAKqB,0BALdT,IAAI,CAACU,MAKS;EAAA,IAJrBC,QAIqB,QAJrBA,QAIqB;EAAA,IAHrBC,QAGqB,QAHrBA,OAGqB;EAAA,IAFrBC,SAEqB,QAFrBA,SAEqB;EAAA,IADlBC,IACkB;;EAGnF;AACF;AACA;EACE,oBACE,KAAC,aAAD;IACE,SAAS,YAAKL,IAAL,cAAaE,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CJ,QAAQ,GAAG,SAAH,GAAe,SAAlE,cAA+E,CAAC,CAACK,QAAF,GAAY,aAAZ,GAA4B,EAA3G,cAAiHC,SAAS,IAAI,EAA9H,CADX;IAEE,QAAQ,EAAEF,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAFxC;IAGE,SAAS,EAAE,mBAAAG,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACL,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;IAAA,CAHd;IAIE,WAAW,EAAEP,yBAJf;IAKE,OAAO,EAAE;MAAA,OAAM,CAACM,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;IAAA;EALX,GAMME,IANN;IAAA,uBAOE,KAAC,oBAAD;MAAA,uBACE,MAAC,WAAD;QAAA,WACGP,QAAQ,iBAAI;UAAK,SAAS,EAAE,qBAAhB;UAAA,uBAAuC,KAAC,WAAD,CAAa,SAAb;YAAuB,SAAS,EAAE;UAAlC;QAAvC,EADf,eAEE;UAAA,UAAMC;QAAN,EAFF;MAAA;IADF;EAPF,GADF;AAgBD,CA9BD;;AAgCA,eAAeF,UAAf"}
+{"version":3,"file":"FilterChip.js","names":["React","Size","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","FilterChip","selected","text","size","Medium","disabled","onClick","className","rest","e","key"],"sources":["../../src/Chips/FilterChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n                                                                selected,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                ...rest\n                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <ChipContainer\n      role=\"checkbox\"\n      className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n      tabIndex={disabled || !onClick ? -1 : 0}\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n      onMouseDown={defaultOnMouseDownHandler}\n      onClick={() => !disabled && onClick && onClick()}\n      {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\n          <div>{text}</div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default FilterChip;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAAQC,IAAR,QAAmB,UAAnB;AAEA;AACA;AACA;;AACA,SAAQC,WAAR,QAA0B,gBAA1B;AAEA;AACA;AACA;;AACA,SAAQC,WAAR,EAAqBC,oBAArB,EAA2CC,aAA3C,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAQwB;EAAA,IAPrBC,QAOqB,QAPrBA,QAOqB;EAAA,IANrBC,IAMqB,QANrBA,IAMqB;EAAA,qBALrBC,IAKqB;EAAA,IALrBA,IAKqB,0BALdT,IAAI,CAACU,MAKS;EAAA,IAJrBC,QAIqB,QAJrBA,QAIqB;EAAA,IAHrBC,QAGqB,QAHrBA,OAGqB;EAAA,IAFrBC,SAEqB,QAFrBA,SAEqB;EAAA,IADlBC,IACkB;;EAGnF;AACF;AACA;EACE,oBACE,KAAC,aAAD;IACE,IAAI,EAAC,UADP;IAEE,SAAS,YAAKL,IAAL,cAAaE,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CJ,QAAQ,GAAG,SAAH,GAAe,SAAlE,cAA+E,CAAC,CAACK,QAAF,GAAY,aAAZ,GAA4B,EAA3G,cAAiHC,SAAS,IAAI,EAA9H,CAFX;IAGE,QAAQ,EAAEF,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAHxC;IAIE,SAAS,EAAE,mBAAAG,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACL,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;IAAA,CAJd;IAKE,WAAW,EAAEP,yBALf;IAME,OAAO,EAAE;MAAA,OAAM,CAACM,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;IAAA;EANX,GAOME,IAPN;IAAA,uBAQE,KAAC,oBAAD;MAAA,uBACE,MAAC,WAAD;QAAA,WACGP,QAAQ,iBAAI;UAAK,SAAS,EAAE,qBAAhB;UAAA,uBAAuC,KAAC,WAAD,CAAa,SAAb;YAAuB,SAAS,EAAE;UAAlC;QAAvC,EADf,eAEE;UAAA,UAAMC;QAAN,EAFF;MAAA;IADF;EARF,GADF;AAiBD,CA/BD;;AAiCA,eAAeF,UAAf"}

package/dist/Chips/InputChip.cjs

@@ -79,6 +79,8 @@ var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, _objectSpread(_objectSpread({
     ref: containerRef,
+    role: "button",
+    "aria-roledescription": "Removable filter",
     className: "".concat(size, " ").concat(disabled ? 'disabled' : '', "  ").concat(variant, " ").concat(!!_onClick ? 'interactive' : '', " ").concat(className || ''),
     tabIndex: disabled || !_onClick ? -1 : 0,
     onMouseDown: _common.defaultOnMouseDownHandler,

package/dist/Chips/InputChip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputChip.cjs","names":["InputChip","React","forwardRef","ref","icon","text","variant","States","Default","size","Size","Medium","disabled","onClick","disableRemove","onRemove","className","rest","containerRef","useRef","removeRef","useActionWithin","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","defaultOnMouseDownHandler","icons","e"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipVariant, InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\nimport {Size, States} from '../types';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant = States.Default,\n                                                                               size = Size.Medium,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               onRemove,\n                                                                               className,\n                                                                               ...rest\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <ChipContainer ref={containerRef}\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onKeyDown={handleContainerKeyDown}\n                   onClick={() => !disabled && onClick && onClick()}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent className={'with-action-right'}>\n          {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n          <div>{text}</div>\n\n          <div ref={removeRef}\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\n               tabIndex={disableRemove || disabled ? -1 : 0}\n               onMouseDown={defaultOnMouseDownHandler}\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\n            <div className={'chip-icon'}>\n              <SystemIcons.Close className={'remove'}/>\n            </div>\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n});\n\nexport default InputChip;\n"],"mappings":"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"}
+{"version":3,"file":"InputChip.cjs","names":["InputChip","React","forwardRef","ref","icon","text","variant","States","Default","size","Size","Medium","disabled","onClick","disableRemove","onRemove","className","rest","containerRef","useRef","removeRef","useActionWithin","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","defaultOnMouseDownHandler","icons","e"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipVariant, InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\nimport {Size, States} from '../types';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant = States.Default,\n                                                                               size = Size.Medium,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               onRemove,\n                                                                               className,\n                                                                               ...rest\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <ChipContainer ref={containerRef}\n                   role=\"button\"\n                   aria-roledescription='Removable filter'\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onKeyDown={handleContainerKeyDown}\n                   onClick={() => !disabled && onClick && onClick()}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent className={'with-action-right'}>\n          {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n          <div>{text}</div>\n\n          <div ref={removeRef}\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\n               tabIndex={disableRemove || disabled ? -1 : 0}\n               onMouseDown={defaultOnMouseDownHandler}\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\n            <div className={'chip-icon'}>\n              <SystemIcons.Close className={'remove'}/>\n            </div>\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n});\n\nexport default InputChip;\n"],"mappings":"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"}

package/dist/Chips/InputChip.js

@@ -73,6 +73,8 @@ var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return /*#__PURE__*/_jsx(ChipContainer, _objectSpread(_objectSpread({
     ref: containerRef,
+    role: "button",
+    "aria-roledescription": "Removable filter",
     className: "".concat(size, " ").concat(disabled ? 'disabled' : '', "  ").concat(variant, " ").concat(!!_onClick ? 'interactive' : '', " ").concat(className || ''),
     tabIndex: disabled || !_onClick ? -1 : 0,
     onMouseDown: defaultOnMouseDownHandler,

package/dist/Chips/InputChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputChip.js","names":["React","SystemIcons","icons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","useActionWithin","Size","States","InputChip","forwardRef","ref","icon","text","variant","Default","size","Medium","disabled","onClick","disableRemove","onRemove","className","rest","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","e"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipVariant, InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\nimport {Size, States} from '../types';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant = States.Default,\n                                                                               size = Size.Medium,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               onRemove,\n                                                                               className,\n                                                                               ...rest\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <ChipContainer ref={containerRef}\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onKeyDown={handleContainerKeyDown}\n                   onClick={() => !disabled && onClick && onClick()}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent className={'with-action-right'}>\n          {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n          <div>{text}</div>\n\n          <div ref={removeRef}\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\n               tabIndex={disableRemove || disabled ? -1 : 0}\n               onMouseDown={defaultOnMouseDownHandler}\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\n            <div className={'chip-icon'}>\n              <SystemIcons.Close className={'remove'}/>\n            </div>\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n});\n\nexport default InputChip;\n"],"mappings":"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"}
+{"version":3,"file":"InputChip.js","names":["React","SystemIcons","icons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","useActionWithin","Size","States","InputChip","forwardRef","ref","icon","text","variant","Default","size","Medium","disabled","onClick","disableRemove","onRemove","className","rest","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","e"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipVariant, InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\nimport {Size, States} from '../types';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant = States.Default,\n                                                                               size = Size.Medium,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               onRemove,\n                                                                               className,\n                                                                               ...rest\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <ChipContainer ref={containerRef}\n                   role=\"button\"\n                   aria-roledescription='Removable filter'\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onKeyDown={handleContainerKeyDown}\n                   onClick={() => !disabled && onClick && onClick()}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent className={'with-action-right'}>\n          {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n          <div>{text}</div>\n\n          <div ref={removeRef}\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\n               tabIndex={disableRemove || disabled ? -1 : 0}\n               onMouseDown={defaultOnMouseDownHandler}\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\n            <div className={'chip-icon'}>\n              <SystemIcons.Close className={'remove'}/>\n            </div>\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n});\n\nexport default InputChip;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,WAAR,EAAqBA,WAAW,IAAIC,KAApC,QAAgD,gBAAhD;AAEA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,EAAmCC,eAAnC,QAAyD,WAAzD;AACA,SAAQC,IAAR,EAAcC,MAAd,QAA2B,UAA3B;;;AAEA,IAAMC,SAAkD,gBAAGV,KAAK,CAACW,UAAN,CAAiB,gBAWoBC,GAXpB,EAW4B;EAAA;;EAAA,IAVzBC,IAUyB,QAVzBA,IAUyB;EAAA,IATzBC,IASyB,QATzBA,IASyB;EAAA,wBARzBC,OAQyB;EAAA,IARzBA,OAQyB,6BARfN,MAAM,CAACO,OAQQ;EAAA,qBAPzBC,IAOyB;EAAA,IAPzBA,IAOyB,0BAPlBT,IAAI,CAACU,MAOa;EAAA,IANzBC,QAMyB,QANzBA,QAMyB;EAAA,IALzBC,QAKyB,QALzBA,OAKyB;EAAA,IAJzBC,aAIyB,QAJzBA,aAIyB;EAAA,IAHzBC,QAGyB,QAHzBA,QAGyB;EAAA,IAFzBC,SAEyB,QAFzBA,SAEyB;EAAA,IADtBC,IACsB;;EAEtG,IAAMC,YAAY,YAAGb,GAAH,yCAAoDZ,KAAK,CAAC0B,MAAN,CAA6B,IAA7B,CAAtE;EACA,IAAMC,SAAS,GAAG3B,KAAK,CAAC0B,MAAN,CAA6B,IAA7B,CAAlB;EAEAnB,eAAe,CAACkB,YAAD,EAAe,CAACE,SAAD,CAAf,CAAf;EAEA;AACF;AACA;AACA;;EACE,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAoF;IACxG,CAAC,CAACA,KAAF,IAAWA,KAAK,CAACC,eAAN,EAAX;IACAR,QAAQ,CAACO,KAAD,CAAR;EACD,CAHD;;EAKA,IAAME,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACF,KAAD,EAAgD;IAC7E,IAAIA,KAAK,CAACG,GAAN,KAAc,OAAd,IAAyBH,KAAK,CAACG,GAAN,KAAc,GAA3C,EAAgD;MAC9C,CAACb,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAA/B;IACD;;IACD,IAAIS,KAAK,CAACG,GAAN,KAAc,WAAd,IAA6B,CAACX,aAAlC,EAAiD;MAC/C,CAACA,aAAD,IAAkBC,QAAlB,IAA8BA,QAAQ,CAACO,KAAD,CAAtC;IACD;EACF,CAPD;EASA;AACF;AACA;;;EACE,oBACE,KAAC,aAAD;IAAe,GAAG,EAAEJ,YAApB;IACe,IAAI,EAAC,QADpB;IAEe,wBAAqB,kBAFpC;IAGe,SAAS,YAAKR,IAAL,cAAaE,QAAQ,GAAG,UAAH,GAAgB,EAArC,eAA4CJ,OAA5C,cAAuD,CAAC,CAACK,QAAF,GAAY,aAAZ,GAA4B,EAAnF,cAAyFG,SAAS,IAAI,EAAtG,CAHxB;IAIe,QAAQ,EAAEJ,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAJrD;IAKe,WAAW,EAAEd,yBAL5B;IAMe,SAAS,EAAEyB,sBAN1B;IAOe,OAAO,EAAE;MAAA,OAAM,CAACZ,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;IAAA;EAPxB,GAQmBI,IARnB;IAAA,uBASE,KAAC,oBAAD;MAAA,uBACE,MAAC,WAAD;QAAa,SAAS,EAAE,mBAAxB;QAAA,WACGX,IAAI,iBAAI;UAAK,SAAS,EAAE,qBAAhB;UAAA,UAAwCX,KAAK,CAACW,IAAD,CAAL,CAAY;YAACU,SAAS,EAAE;UAAZ,CAAZ;QAAxC,EADX,eAGE;UAAA,UAAMT;QAAN,EAHF,eAKE;UAAK,GAAG,EAAEa,SAAV;UACK,SAAS,yBAAkBN,aAAa,GAAG,UAAH,GAAgB,EAA/C,CADd;UAEK,QAAQ,EAAEA,aAAa,IAAIF,QAAjB,GAA4B,CAAC,CAA7B,GAAiC,CAFhD;UAGK,WAAW,EAAEb,yBAHlB;UAIK,OAAO,EAAE,iBAAA2B,CAAC;YAAA,OAAI,CAACZ,aAAD,IAAkB,CAACF,QAAnB,IAA+BS,aAAa,CAACK,CAAD,CAAhD;UAAA,CAJf;UAKK,SAAS,EAAE,mBAAAA,CAAC;YAAA,OAAI,CAACA,CAAC,CAACD,GAAF,KAAU,OAAV,IAAqBC,CAAC,CAACD,GAAF,KAAU,GAAhC,KAAwC,CAACX,aAAzC,IAA0D,CAACF,QAA3D,IAAuES,aAAa,CAACK,CAAD,CAAxF;UAAA,CALjB;UAAA,uBAME;YAAK,SAAS,EAAE,WAAhB;YAAA,uBACE,KAAC,WAAD,CAAa,KAAb;cAAmB,SAAS,EAAE;YAA9B;UADF;QANF,EALF;MAAA;IADF;EATF,GADF;AA8BD,CArE0D,CAA3D;AAuEA,eAAevB,SAAf"}

package/dist/Footer/Footer.cjs

@@ -32,6 +32,7 @@ var FooterGlobalContent = _styledComponents.default.section(_templateObject2 ||
 var Footer = function Footer(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FooterContainer, {
+    role: "contentinfo",
     children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterGlobalContent, {
       "data-testid": 'footer-content'
     })]

package/dist/Footer/Footer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.cjs","names":["FooterContainer","styled","footer","FooterGlobalContent","section","COLORS","primary_700","Footer","children"],"sources":["../../src/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS } from '../styles';\n\nconst FooterContainer = styled.footer`\n  margin-top: auto;\n`;\n\nconst FooterGlobalContent = styled.section`\n  min-height: 8px;\n  background-color: ${COLORS.primary_700};\n  color: white;\n`;\n\nconst Footer = ({ children }: any) => {\n  return (\n    <FooterContainer>\n      {children}\n      <FooterGlobalContent data-testid={'footer-content'} />\n    </FooterContainer>\n  );\n};\n\nexport default Footer;\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;AAEA,IAAMA,eAAe,GAAGC,yBAAA,CAAOC,MAAV,0GAArB;;AAIA,IAAMC,mBAAmB,GAAGF,yBAAA,CAAOG,OAAV,wJAEHC,cAAA,CAAOC,WAFJ,CAAzB;;AAMA,IAAMC,MAAM,GAAG,SAATA,MAAS,OAAuB;EAAA,IAApBC,QAAoB,QAApBA,QAAoB;EACpC,oBACE,sBAAC,eAAD;IAAA,WACGA,QADH,eAEE,qBAAC,mBAAD;MAAqB,eAAa;IAAlC,EAFF;EAAA,EADF;AAMD,CAPD;;eASeD,M"}
+{"version":3,"file":"Footer.cjs","names":["FooterContainer","styled","footer","FooterGlobalContent","section","COLORS","primary_700","Footer","children"],"sources":["../../src/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS } from '../styles';\n\nconst FooterContainer = styled.footer`\n  margin-top: auto;\n`;\n\nconst FooterGlobalContent = styled.section`\n  min-height: 8px;\n  background-color: ${COLORS.primary_700};\n  color: white;\n`;\n\nconst Footer = ({ children }: any) => {\n  return (\n    <FooterContainer role=\"contentinfo\">\n      {children}\n      <FooterGlobalContent data-testid={'footer-content'} />\n    </FooterContainer>\n  );\n};\n\nexport default Footer;\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;AAEA,IAAMA,eAAe,GAAGC,yBAAA,CAAOC,MAAV,0GAArB;;AAIA,IAAMC,mBAAmB,GAAGF,yBAAA,CAAOG,OAAV,wJAEHC,cAAA,CAAOC,WAFJ,CAAzB;;AAMA,IAAMC,MAAM,GAAG,SAATA,MAAS,OAAuB;EAAA,IAApBC,QAAoB,QAApBA,QAAoB;EACpC,oBACE,sBAAC,eAAD;IAAiB,IAAI,EAAC,aAAtB;IAAA,WACGA,QADH,eAEE,qBAAC,mBAAD;MAAqB,eAAa;IAAlC,EAFF;EAAA,EADF;AAMD,CAPD;;eASeD,M"}

package/dist/Footer/Footer.js

@@ -13,6 +13,7 @@ var FooterGlobalContent = styled.section(_templateObject2 || (_templateObject2 =
 var Footer = function Footer(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_jsxs(FooterContainer, {
+    role: "contentinfo",
     children: [children, /*#__PURE__*/_jsx(FooterGlobalContent, {
       "data-testid": 'footer-content'
     })]

package/dist/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","names":["React","styled","COLORS","FooterContainer","footer","FooterGlobalContent","section","primary_700","Footer","children"],"sources":["../../src/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS } from '../styles';\n\nconst FooterContainer = styled.footer`\n  margin-top: auto;\n`;\n\nconst FooterGlobalContent = styled.section`\n  min-height: 8px;\n  background-color: ${COLORS.primary_700};\n  color: white;\n`;\n\nconst Footer = ({ children }: any) => {\n  return (\n    <FooterContainer>\n      {children}\n      <FooterGlobalContent data-testid={'footer-content'} />\n    </FooterContainer>\n  );\n};\n\nexport default Footer;\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,MAAT,QAAuB,WAAvB;;;AAEA,IAAMC,eAAe,GAAGF,MAAM,CAACG,MAAV,4FAArB;AAIA,IAAMC,mBAAmB,GAAGJ,MAAM,CAACK,OAAV,0IAEHJ,MAAM,CAACK,WAFJ,CAAzB;;AAMA,IAAMC,MAAM,GAAG,SAATA,MAAS,OAAuB;EAAA,IAApBC,QAAoB,QAApBA,QAAoB;EACpC,oBACE,MAAC,eAAD;IAAA,WACGA,QADH,eAEE,KAAC,mBAAD;MAAqB,eAAa;IAAlC,EAFF;EAAA,EADF;AAMD,CAPD;;AASA,eAAeD,MAAf"}
+{"version":3,"file":"Footer.js","names":["React","styled","COLORS","FooterContainer","footer","FooterGlobalContent","section","primary_700","Footer","children"],"sources":["../../src/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS } from '../styles';\n\nconst FooterContainer = styled.footer`\n  margin-top: auto;\n`;\n\nconst FooterGlobalContent = styled.section`\n  min-height: 8px;\n  background-color: ${COLORS.primary_700};\n  color: white;\n`;\n\nconst Footer = ({ children }: any) => {\n  return (\n    <FooterContainer role=\"contentinfo\">\n      {children}\n      <FooterGlobalContent data-testid={'footer-content'} />\n    </FooterContainer>\n  );\n};\n\nexport default Footer;\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,MAAT,QAAuB,WAAvB;;;AAEA,IAAMC,eAAe,GAAGF,MAAM,CAACG,MAAV,4FAArB;AAIA,IAAMC,mBAAmB,GAAGJ,MAAM,CAACK,OAAV,0IAEHJ,MAAM,CAACK,WAFJ,CAAzB;;AAMA,IAAMC,MAAM,GAAG,SAATA,MAAS,OAAuB;EAAA,IAApBC,QAAoB,QAApBA,QAAoB;EACpC,oBACE,MAAC,eAAD;IAAiB,IAAI,EAAC,aAAtB;IAAA,WACGA,QADH,eAEE,KAAC,mBAAD;MAAqB,eAAa;IAAlC,EAFF;EAAA,EADF;AAMD,CAPD;;AASA,eAAeD,MAAf"}

package/dist/InputFields/Checkbox.cjs

@@ -15,8 +15,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -124,20 +122,6 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     })]
   }), id);
 });
-Checkbox.propTypes = {
-  id: _propTypes.default.string,
-  selected: _propTypes.default.bool.isRequired,
-  select: _propTypes.default.func,
-  label: _propTypes.default.string,
-  invalid: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  margin: _propTypes.default.string,
-  iconPointerEventsTransparent: _propTypes.default.bool,
-  semiSelected: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
-  tabIndexVal: _propTypes.default.number,
-  className: _propTypes.default.string
-};
 var _default = Checkbox;
 exports.default = _default;
 //# sourceMappingURL=Checkbox.cjs.map

package/dist/InputFields/Checkbox.cjs.map

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

package/dist/InputFields/Checkbox.d.ts

@@ -1,25 +1,10 @@
 import * as React from 'react';
-import { Size } from '../types';
+import { CheckboxProps } from './types';
 export declare const StyledCheckBox: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
     invalid?: boolean | undefined;
     selected?: boolean | undefined;
     margin?: string | undefined;
 }, never>;
-interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'> {
-    id?: string;
-    selected: boolean;
-    select?: (selected: boolean) => void;
-    label?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    margin?: string;
-    size?: Size;
-    iconPointerEventsTransparent?: boolean;
-    semiSelected?: boolean;
-    readOnly?: boolean;
-    tabIndexVal?: number;
-    className?: string;
-}
-declare const Checkbox: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLDivElement>>;
 export default Checkbox;

package/dist/InputFields/Checkbox.js

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
 var _excluded = ["id", "selected", "select", "label", "invalid", "iconPointerEventsTransparent", "disabled", "margin", "size", "semiSelected", "children", "readOnly", "tabIndexVal", "className"];
 
 var _templateObject;
@@ -96,19 +95,5 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     })]
   }), id);
 });
-Checkbox.propTypes = {
-  id: _pt.string,
-  selected: _pt.bool.isRequired,
-  select: _pt.func,
-  label: _pt.string,
-  invalid: _pt.bool,
-  disabled: _pt.bool,
-  margin: _pt.string,
-  iconPointerEventsTransparent: _pt.bool,
-  semiSelected: _pt.bool,
-  readOnly: _pt.bool,
-  tabIndexVal: _pt.number,
-  className: _pt.string
-};
 export default Checkbox;
 //# sourceMappingURL=Checkbox.js.map

package/dist/InputFields/Checkbox.js.map

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

package/dist/InputFields/types.cjs

@@ -3,4 +3,5 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+;
 //# sourceMappingURL=types.cjs.map

package/dist/InputFields/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size } from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: 'invalid' | 'valid';\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n"],"mappings":""}
+{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size } from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: 'invalid' | 'valid';\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n};"],"mappings":";;;;;AA2DC"}

package/dist/InputFields/types.d.ts

@@ -37,3 +37,18 @@ export declare type TextFieldNote = {
     message: string;
     icon: React.ReactNode;
 };
+export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'> {
+    id?: string;
+    selected: boolean;
+    select?: (selected: boolean) => void;
+    label?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    margin?: string;
+    size?: Size;
+    iconPointerEventsTransparent?: boolean;
+    semiSelected?: boolean;
+    readOnly?: boolean;
+    tabIndexVal?: number;
+    className?: string;
+}

package/dist/InputFields/types.js

@@ -1,2 +1,3 @@
+;
 export {};
 //# sourceMappingURL=types.js.map

package/dist/InputFields/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size } from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: 'invalid' | 'valid';\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size } from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: 'invalid' | 'valid';\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n};"],"mappings":"AA2DC"}

package/dist/Tabs/HorizontalTabs.cjs

@@ -76,6 +76,7 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(HorizontalTabContainer, _objectSpread(_objectSpread({
+    role: "tablist",
     "data-testid": 'horizontal-tabs-container'
   }, rest), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TabSideFill, {
@@ -88,7 +89,9 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
           className = tab.className,
           rest = (0, _objectWithoutProperties2.default)(tab, _excluded2);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabButton, _objectSpread(_objectSpread({
+        role: "tab",
         "data-testid": "tab_".concat(value),
+        "aria-expanded": selected,
         tabIndex: disabled ? -1 : 0,
         onMouseDown: _common.defaultOnMouseDownHandler,
         style: fullWidth ? {

package/dist/Tabs/HorizontalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.cjs","names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","Z_INDEXES","hover","primary_20","primary_700","active","focusStyles","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","value","selected","disabled","className","defaultOnMouseDownHandler","width","length"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n\n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement>{\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer data-testid={'horizontal-tabs-container'} {...rest}>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const { value, selected, to, disabled, className, ...rest } = tab;\n        return (\n          <TabButton\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            tabIndex={disabled ? -1 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            className={`${className || ''} size-${size} ${selected ? 'selected' : ''} ${disabled ? 'disabled' : ''}`}\n            onClick={() => !disabled && doTabChange(to)}\n            {...rest}>\n            <div\n              className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalTabs.cjs","names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","Z_INDEXES","hover","primary_20","primary_700","active","focusStyles","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","value","selected","disabled","className","defaultOnMouseDownHandler","width","length"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n\n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement>{\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const { value, selected, to, disabled, className, ...rest } = tab;\n        return (\n          <TabButton\n            role=\"tab\"\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            aria-expanded={selected}\n            tabIndex={disabled ? -1 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            className={`${className || ''} size-${size} ${selected ? 'selected' : ''} ${disabled ? 'disabled' : ''}`}\n            onClick={() => !disabled && doTabChange(to)}\n            {...rest}>\n            <div\n              className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}

package/dist/Tabs/HorizontalTabs.js

@@ -58,6 +58,7 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
   };
 
   return /*#__PURE__*/_jsxs(HorizontalTabContainer, _objectSpread(_objectSpread({
+    role: "tablist",
     "data-testid": 'horizontal-tabs-container'
   }, rest), {}, {
     children: [/*#__PURE__*/_jsx(TabSideFill, {
@@ -71,7 +72,9 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
           rest = _objectWithoutProperties(tab, _excluded2);
 
       return /*#__PURE__*/_jsx(TabButton, _objectSpread(_objectSpread({
+        role: "tab",
         "data-testid": "tab_".concat(value),
+        "aria-expanded": selected,
         tabIndex: disabled ? -1 : 0,
         onMouseDown: defaultOnMouseDownHandler,
         style: fullWidth ? {

package/dist/Tabs/HorizontalTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.js","names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","value","selected","disabled","className","width","length"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n\n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement>{\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer data-testid={'horizontal-tabs-container'} {...rest}>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const { value, selected, to, disabled, className, ...rest } = tab;\n        return (\n          <TabButton\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            tabIndex={disabled ? -1 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            className={`${className || ''} size-${size} ${selected ? 'selected' : ''} ${disabled ? 'disabled' : ''}`}\n            onClick={() => !disabled && doTabChange(to)}\n            {...rest}>\n            <div\n              className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalTabs.js","names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","value","selected","disabled","className","width","length"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n\n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement>{\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const { value, selected, to, disabled, className, ...rest } = tab;\n        return (\n          <TabButton\n            role=\"tab\"\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            aria-expanded={selected}\n            tabIndex={disabled ? -1 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            className={`${className || ''} size-${size} ${selected ? 'selected' : ''} ${disabled ? 'disabled' : ''}`}\n            onClick={() => !disabled && doTabChange(to)}\n            {...rest}>\n            <div\n              className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}