@laerdal/life-react-components 1.10.3-dev.2 → 1.10.3-dev.5

package/dist/Card/VerticalCard/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ${CardTopLevelContainer}{\n      border: 1px solid ${COLORS.neutral_100};\n    }\n  }\n`;\n\n\nexport interface CardProps {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'elevated'\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n  return (\n\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.js"}
+{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","rest","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ${CardTopLevelContainer}{\n      border: 1px solid ${COLORS.neutral_100};\n    }\n  }\n`;\n\n\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'elevated',\n                                                    className,\n                                                    ...rest\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\n\n  return (\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}\n             {...rest}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.js"}

package/dist/Chips/ActionChip.cjs

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _index = require("../icons/index");
@@ -19,34 +25,31 @@ var _common = require("../common");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["icon", "text", "size", "disabled", "onClick", "className"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/**
- * Import React libraries.
- */
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-/**
- * Import custom components.
- */
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-/**
- * Import custom styles.
- */
 var ActionChip = function ActionChip(_ref) {
   var icon = _ref.icon,
       text = _ref.text,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
       disabled = _ref.disabled,
-      _onClick = _ref.onClick;
+      _onClick = _ref.onClick,
+      className = _ref.className,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   /**
    * Return Action Chip component.
    */
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
-    className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!_onClick ? 'interactive' : ''),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, _objectSpread(_objectSpread({
+    className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!_onClick ? 'interactive' : '', " ").concat(className || ''),
     onClick: function onClick() {
       return !disabled && _onClick && _onClick();
     },
@@ -54,7 +57,8 @@ var ActionChip = function ActionChip(_ref) {
     onKeyDown: function onKeyDown(e) {
       return (e.key === 'Enter' || e.key === ' ') && !disabled && _onClick && _onClick();
     },
-    tabIndex: disabled || !_onClick ? -1 : 0,
+    tabIndex: disabled || !_onClick ? -1 : 0
+  }, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
         children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -67,7 +71,7 @@ var ActionChip = function ActionChip(_ref) {
         })]
       })
     })
-  });
+  }));
 };
 
 var _default = ActionChip;

package/dist/Chips/ActionChip.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/ActionChip.tsx"],"names":["ActionChip","icon","text","size","Size","Medium","disabled","onClick","defaultOnMouseDownHandler","e","key","icons","className"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AAIA;;AAMA;;;;;;;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,uBAHrBC,IAGqB;AAAA,MAHrBA,IAGqB,0BAHdC,YAAKC,MAGS;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAEnF;AACF;AACA;AACE,sBACE,qBAAC,yBAAD;AAAe,IAAA,SAAS,YAAKJ,IAAL,cAAaG,QAAQ,GAAG,UAAH,GAAgB,EAArC,sBAAmD,CAAC,CAACC,QAAF,GAAY,aAAZ,GAA4B,EAA/E,CAAxB;AACe,IAAA,OAAO,EAAE;AAAA,aAAM,CAACD,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,KADxB;AAEe,IAAA,WAAW,EAAEC,iCAF5B;AAGe,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACJ,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;AAAA,KAH3B;AAIe,IAAA,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAJrD;AAAA,2BAKE,qBAAC,gCAAD;AAAA,6BACE,sBAAC,uBAAD;AAAA,mBAEIN,IAAI,iBACJ;AAAK,UAAA,SAAS,EAAE,qBAAhB;AAAA,oBACGU,mBAAMV,IAAN,EAAY;AAACW,YAAAA,SAAS,EAAE;AAAZ,WAAZ;AADH,UAHJ,eAOE;AAAA,oBACGV;AADH,UAPF;AAAA;AADF;AALF,IADF;AAqBD,CAhCD;;eAkCeF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''}`}\n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icons[icon]({className: 'icon'})}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"file":"ActionChip.cjs"}
+{"version":3,"sources":["../../src/Chips/ActionChip.tsx"],"names":["ActionChip","icon","text","size","Size","Medium","disabled","onClick","className","rest","defaultOnMouseDownHandler","e","key","icons"],"mappings":";;;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AAIA;;AAMA;;;;;;;;;;;;;;AAEA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAQwB;AAAA,MAPrBC,IAOqB,QAPrBA,IAOqB;AAAA,MANrBC,IAMqB,QANrBA,IAMqB;AAAA,uBALrBC,IAKqB;AAAA,MALrBA,IAKqB,0BALdC,YAAKC,MAKS;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,OAGqB;AAAA,MAFrBC,SAEqB,QAFrBA,SAEqB;AAAA,MADlBC,IACkB;;AAEnF;AACF;AACA;AACE,sBACE,qBAAC,yBAAD;AAAe,IAAA,SAAS,YAAKN,IAAL,cAAaG,QAAQ,GAAG,UAAH,GAAgB,EAArC,sBAAmD,CAAC,CAACC,QAAF,GAAY,aAAZ,GAA4B,EAA/E,cAAqFC,SAAS,IAAI,EAAlG,CAAxB;AACe,IAAA,OAAO,EAAE;AAAA,aAAM,CAACF,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,KADxB;AAEe,IAAA,WAAW,EAAEG,iCAF5B;AAGe,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACN,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;AAAA,KAH3B;AAIe,IAAA,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B;AAJrD,KAKmBE,IALnB;AAAA,2BAME,qBAAC,gCAAD;AAAA,6BACE,sBAAC,uBAAD;AAAA,mBAEIR,IAAI,iBACJ;AAAK,UAAA,SAAS,EAAE,qBAAhB;AAAA,oBACGY,mBAAMZ,IAAN,EAAY;AAACO,YAAAA,SAAS,EAAE;AAAZ,WAAZ;AADH,UAHJ,eAOE;AAAA,oBACGN;AADH,UAPF;AAAA;AADF;AANF,KADF;AAsBD,CAnCD;;eAqCeF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icons[icon]({className: 'icon'})}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"file":"ActionChip.cjs"}

package/dist/Chips/ActionChip.js

@@ -1,3 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["icon", "text", "size", "disabled", "onClick", "className"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 /**
  * Import React libraries.
  */
@@ -27,13 +35,15 @@ var ActionChip = function ActionChip(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? Size.Medium : _ref$size,
       disabled = _ref.disabled,
-      _onClick = _ref.onClick;
+      _onClick = _ref.onClick,
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   /**
    * Return Action Chip component.
    */
-  return /*#__PURE__*/_jsx(ChipContainer, {
-    className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!_onClick ? 'interactive' : ''),
+  return /*#__PURE__*/_jsx(ChipContainer, _objectSpread(_objectSpread({
+    className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!_onClick ? 'interactive' : '', " ").concat(className || ''),
     onClick: function onClick() {
       return !disabled && _onClick && _onClick();
     },
@@ -41,7 +51,8 @@ var ActionChip = function ActionChip(_ref) {
     onKeyDown: function onKeyDown(e) {
       return (e.key === 'Enter' || e.key === ' ') && !disabled && _onClick && _onClick();
     },
-    tabIndex: disabled || !_onClick ? -1 : 0,
+    tabIndex: disabled || !_onClick ? -1 : 0
+  }, rest), {}, {
     children: /*#__PURE__*/_jsx(ChipContentContainer, {
       children: /*#__PURE__*/_jsxs(ChipContent, {
         children: [icon && /*#__PURE__*/_jsx("div", {
@@ -54,7 +65,7 @@ var ActionChip = function ActionChip(_ref) {
         })]
       })
     })
-  });
+  }));
 };
 
 export default ActionChip;

package/dist/Chips/ActionChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/ActionChip.tsx"],"names":["React","SystemIcons","icons","Size","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","Medium","disabled","onClick","e","key","className"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,WAAW,IAAIC,KAAvB,QAAmC,gBAAnC;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,uBAHrBC,IAGqB;AAAA,MAHrBA,IAGqB,0BAHdR,IAAI,CAACS,MAGS;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAEnF;AACF;AACA;AACE,sBACE,KAAC,aAAD;AAAe,IAAA,SAAS,YAAKH,IAAL,cAAaE,QAAQ,GAAG,UAAH,GAAgB,EAArC,sBAAmD,CAAC,CAACC,QAAF,GAAY,aAAZ,GAA4B,EAA/E,CAAxB;AACe,IAAA,OAAO,EAAE;AAAA,aAAM,CAACD,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,KADxB;AAEe,IAAA,WAAW,EAAEP,yBAF5B;AAGe,IAAA,SAAS,EAAE,mBAAAQ,CAAC;AAAA,aAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACH,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;AAAA,KAH3B;AAIe,IAAA,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAJrD;AAAA,2BAKE,KAAC,oBAAD;AAAA,6BACE,MAAC,WAAD;AAAA,mBAEIL,IAAI,iBACJ;AAAK,UAAA,SAAS,EAAE,qBAAhB;AAAA,oBACGP,KAAK,CAACO,IAAD,CAAL,CAAY;AAACQ,YAAAA,SAAS,EAAE;AAAZ,WAAZ;AADH,UAHJ,eAOE;AAAA,oBACGP;AADH,UAPF;AAAA;AADF;AALF,IADF;AAqBD,CAhCD;;AAkCA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''}`}\n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icons[icon]({className: 'icon'})}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"file":"ActionChip.js"}
+{"version":3,"sources":["../../src/Chips/ActionChip.tsx"],"names":["React","SystemIcons","icons","Size","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","Medium","disabled","onClick","className","rest","e","key"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,WAAW,IAAIC,KAAvB,QAAmC,gBAAnC;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAQwB;AAAA,MAPrBC,IAOqB,QAPrBA,IAOqB;AAAA,MANrBC,IAMqB,QANrBA,IAMqB;AAAA,uBALrBC,IAKqB;AAAA,MALrBA,IAKqB,0BALdR,IAAI,CAACS,MAKS;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,OAGqB;AAAA,MAFrBC,SAEqB,QAFrBA,SAEqB;AAAA,MADlBC,IACkB;;AAEnF;AACF;AACA;AACE,sBACE,KAAC,aAAD;AAAe,IAAA,SAAS,YAAKL,IAAL,cAAaE,QAAQ,GAAG,UAAH,GAAgB,EAArC,sBAAmD,CAAC,CAACC,QAAF,GAAY,aAAZ,GAA4B,EAA/E,cAAqFC,SAAS,IAAI,EAAlG,CAAxB;AACe,IAAA,OAAO,EAAE;AAAA,aAAM,CAACF,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,KADxB;AAEe,IAAA,WAAW,EAAEP,yBAF5B;AAGe,IAAA,SAAS,EAAE,mBAAAU,CAAC;AAAA,aAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACL,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;AAAA,KAH3B;AAIe,IAAA,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B;AAJrD,KAKmBE,IALnB;AAAA,2BAME,KAAC,oBAAD;AAAA,6BACE,MAAC,WAAD;AAAA,mBAEIP,IAAI,iBACJ;AAAK,UAAA,SAAS,EAAE,qBAAhB;AAAA,oBACGP,KAAK,CAACO,IAAD,CAAL,CAAY;AAACM,YAAAA,SAAS,EAAE;AAAZ,WAAZ;AADH,UAHJ,eAOE;AAAA,oBACGL;AADH,UAPF;AAAA;AADF;AANF,KADF;AAsBD,CAnCD;;AAqCA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icons[icon]({className: 'icon'})}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"file":"ActionChip.js"}

package/dist/Chips/ChipTypes.d.ts

@@ -1,8 +1,9 @@
 import { Size, States } from '../types';
+import React from 'react';
 /**
  * Types for the chips.
  */
-export interface ChipProps {
+export interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseDown' | 'onKeyDown' | 'tabIndex'> {
     size?: Size;
     disabled?: boolean;
 }
@@ -24,12 +25,13 @@ export interface ActionChipProps extends ChipProps {
     icon?: ChipIcons;
     onClick?: () => void;
 }
-export interface ChoiceChipProps extends ChipProps {
+export interface ChoiceChipProps {
     selected: string;
     values: ChipValue[];
     onClick?: (value: ChipValue) => void;
+    disabled?: boolean;
 }
-export interface ChipValue {
+export interface ChipValue extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onMouseDown' | 'onKeyDown'> {
     value: string;
     label: string;
     size?: Size;

package/dist/Chips/ChoiceChips.cjs

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -21,17 +25,16 @@ var _types = require("../types");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["value", "size", "label", "className"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/**
- * Import React libraries.
- */
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-/**
- * Import custom styles.
- */
 var ChoiceChips = function ChoiceChips(_ref) {
   var selected = _ref.selected,
       disabled = _ref.disabled,
@@ -76,25 +79,30 @@ var ChoiceChips = function ChoiceChips(_ref) {
 
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: values.map(function (value) {
-      var _value$size;
-
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
+    children: values.map(function (item) {
+      var value = item.value,
+          _item$size = item.size,
+          size = _item$size === void 0 ? _types.Size.Medium : _item$size,
+          label = item.label,
+          className = item.className,
+          rest = (0, _objectWithoutProperties2.default)(item, _excluded);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, _objectSpread(_objectSpread({
         tabIndex: disabled ? -1 : 0,
-        className: "".concat((_value$size = value.size) !== null && _value$size !== void 0 ? _value$size : _types.Size.Medium, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value.value ? 'default' : 'outline', " interactive"),
+        className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value ? 'default' : 'outline', " interactive ").concat(className || ''),
         onMouseDown: _common.defaultOnMouseDownHandler,
         onClick: function onClick() {
-          return !disabled && onSelectChip(value);
+          return !disabled && onSelectChip(item);
         },
         onKeyDown: function onKeyDown(e) {
-          return !disabled && handleKeyDown(e, value);
-        },
+          return !disabled && handleKeyDown(e, item);
+        }
+      }, rest), {}, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContent, {
-            children: value.label
+            children: label
           })
         })
-      }, value.value);
+      }), value);
     })
   });
 };

package/dist/Chips/ChoiceChips.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["ChoiceChips","selected","disabled","onClick","values","React","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","size","Size","Medium","defaultOnMouseDownHandler","label"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAMA;;AACA;;;;;;;;AAfA;AACA;AACA;;AAGA;AACA;AACA;AAUA,IAAMA,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACP,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAR,IAAAA,OAAO,IAAIA,OAAO,CAACQ,KAAD,CAAlB;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;AACtCJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGP,MAAM,CAACW,GAAP,CAAW,UAACJ,KAAD;AAAA;;AAAA,0BACV,qBAAC,yBAAD;AAEE,QAAA,QAAQ,EAAET,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,2BAAKS,KAAK,CAACK,IAAX,qDAAmBC,YAAKC,MAAxB,cAAkChB,QAAQ,GAAG,UAAH,GAAgB,EAA1D,cAAgEK,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,SAA/B,GAA2C,SAA3G,iBAHX;AAIE,QAAA,WAAW,EAAEQ,iCAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACjB,QAAD,IAAaQ,YAAY,CAACC,KAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAI,CAACX,QAAD,IAAaU,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAA9B;AAAA,SANd;AAAA,+BAOE,qBAAC,gCAAD;AAAA,iCACE,qBAAC,uBAAD;AAAA,sBACGA,KAAK,CAACS;AADT;AADF;AAPF,SACOT,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAmBD,CA1DD;;eA4DeX,W","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {Size} from '../types';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <ChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${value.size ?? Size.Medium} ${disabled ? 'disabled' : ''} ${selectedChip === value.value ? 'default' : 'outline'} interactive`}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onSelectChip(value)}\n          onKeyDown={e => !disabled && handleKeyDown(e, value)}>\n          <ChipContentContainer>\n            <ChipContent>\n              {value.label}\n            </ChipContent>\n          </ChipContentContainer>\n        </ChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.cjs"}
+{"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["ChoiceChips","selected","disabled","onClick","values","React","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","item","size","Size","Medium","label","className","rest","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;;;;;;;;;AAGA;;AAKA;;AAMA;;AACA;;;;;;;;;;;;;;AAEA,IAAMA,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACP,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAR,IAAAA,OAAO,IAAIA,OAAO,CAACQ,KAAD,CAAlB;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;AACtCJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGP,MAAM,CAACW,GAAP,CAAW,UAACC,IAAD,EAAqB;AAC/B,UAAOL,KAAP,GAAgEK,IAAhE,CAAOL,KAAP;AAAA,uBAAgEK,IAAhE,CAAcC,IAAd;AAAA,UAAcA,IAAd,2BAAqBC,YAAKC,MAA1B;AAAA,UAAkCC,KAAlC,GAAgEJ,IAAhE,CAAkCI,KAAlC;AAAA,UAAyCC,SAAzC,GAAgEL,IAAhE,CAAyCK,SAAzC;AAAA,UAAuDC,IAAvD,0CAAgEN,IAAhE;AACA,0BACE,qBAAC,yBAAD;AAEE,QAAA,QAAQ,EAAEd,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKe,IAAL,cAAaf,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CK,YAAY,KAAKI,KAAjB,GAAyB,SAAzB,GAAqC,SAAhF,0BAAyGU,SAAS,IAAI,EAAtH,CAHX;AAIE,QAAA,WAAW,EAAEE,iCAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACrB,QAAD,IAAaQ,YAAY,CAACM,IAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAH,CAAC;AAAA,iBAAI,CAACX,QAAD,IAAaU,aAAa,CAACC,CAAD,EAAIG,IAAJ,CAA9B;AAAA;AANd,SAOMM,IAPN;AAAA,+BAQE,qBAAC,gCAAD;AAAA,iCACE,qBAAC,uBAAD;AAAA,sBACGF;AADH;AADF;AARF,UACOT,KADP,CADF;AAgBD,KAlBA;AADH,IADF;AAuBD,CA9DD;;eAgEeX,W","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {Size} from '../types';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((item: ChipValue) => {\n        const {value, size = Size.Medium, label, className, ...rest } = item;\n        return (\n          <ChipContainer\n            key={value}\n            tabIndex={disabled ? -1 : 0}\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\n            onMouseDown={defaultOnMouseDownHandler}\n            onClick={() => !disabled && onSelectChip(item)}\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\n            {...rest}>\n            <ChipContentContainer>\n              <ChipContent>\n                {label}\n              </ChipContent>\n            </ChipContentContainer>\n          </ChipContainer>\n        );\n      })}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.cjs"}

package/dist/Chips/ChoiceChips.js

@@ -1,4 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["value", "size", "label", "className"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 /**
  * Import React libraries.
@@ -62,25 +69,31 @@ var ChoiceChips = function ChoiceChips(_ref) {
 
 
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: values.map(function (value) {
-      var _value$size;
+    children: values.map(function (item) {
+      var value = item.value,
+          _item$size = item.size,
+          size = _item$size === void 0 ? Size.Medium : _item$size,
+          label = item.label,
+          className = item.className,
+          rest = _objectWithoutProperties(item, _excluded);
 
-      return /*#__PURE__*/_jsx(ChipContainer, {
+      return /*#__PURE__*/_jsx(ChipContainer, _objectSpread(_objectSpread({
         tabIndex: disabled ? -1 : 0,
-        className: "".concat((_value$size = value.size) !== null && _value$size !== void 0 ? _value$size : Size.Medium, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value.value ? 'default' : 'outline', " interactive"),
+        className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value ? 'default' : 'outline', " interactive ").concat(className || ''),
         onMouseDown: defaultOnMouseDownHandler,
         onClick: function onClick() {
-          return !disabled && onSelectChip(value);
+          return !disabled && onSelectChip(item);
         },
         onKeyDown: function onKeyDown(e) {
-          return !disabled && handleKeyDown(e, value);
-        },
+          return !disabled && handleKeyDown(e, item);
+        }
+      }, rest), {}, {
         children: /*#__PURE__*/_jsx(ChipContentContainer, {
           children: /*#__PURE__*/_jsx(ChipContent, {
-            children: value.label
+            children: label
           })
         })
-      }, value.value);
+      }), value);
     })
   });
 };

package/dist/Chips/ChoiceChips.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","Size","ChoiceChips","selected","disabled","onClick","values","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","size","Medium","label"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;AACA,SAAQC,IAAR,QAAmB,UAAnB;;;;AAEA,IAAMC,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCV,KAAK,CAACW,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEb,EAAAA,KAAK,CAACc,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACN,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAP,IAAAA,OAAO,IAAIA,OAAO,CAACO,KAAD,CAAlB;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;AACtCJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGN,MAAM,CAACU,GAAP,CAAW,UAACJ,KAAD;AAAA;;AAAA,0BACV,KAAC,aAAD;AAEE,QAAA,QAAQ,EAAER,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,2BAAKQ,KAAK,CAACK,IAAX,qDAAmBhB,IAAI,CAACiB,MAAxB,cAAkCd,QAAQ,GAAG,UAAH,GAAgB,EAA1D,cAAgEI,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,SAA/B,GAA2C,SAA3G,iBAHX;AAIE,QAAA,WAAW,EAAEZ,yBAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACI,QAAD,IAAaO,YAAY,CAACC,KAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAI,CAACV,QAAD,IAAaS,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAA9B;AAAA,SANd;AAAA,+BAOE,KAAC,oBAAD;AAAA,iCACE,KAAC,WAAD;AAAA,sBACGA,KAAK,CAACO;AADT;AADF;AAPF,SACOP,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAmBD,CA1DD;;AA4DA,eAAeV,WAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {Size} from '../types';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <ChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${value.size ?? Size.Medium} ${disabled ? 'disabled' : ''} ${selectedChip === value.value ? 'default' : 'outline'} interactive`}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onSelectChip(value)}\n          onKeyDown={e => !disabled && handleKeyDown(e, value)}>\n          <ChipContentContainer>\n            <ChipContent>\n              {value.label}\n            </ChipContent>\n          </ChipContentContainer>\n        </ChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.js"}
+{"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","Size","ChoiceChips","selected","disabled","onClick","values","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","item","size","Medium","label","className","rest"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;AACA,SAAQC,IAAR,QAAmB,UAAnB;;;;AAEA,IAAMC,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCV,KAAK,CAACW,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEb,EAAAA,KAAK,CAACc,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACN,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAP,IAAAA,OAAO,IAAIA,OAAO,CAACO,KAAD,CAAlB;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;AACtCJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGN,MAAM,CAACU,GAAP,CAAW,UAACC,IAAD,EAAqB;AAC/B,UAAOL,KAAP,GAAgEK,IAAhE,CAAOL,KAAP;AAAA,uBAAgEK,IAAhE,CAAcC,IAAd;AAAA,UAAcA,IAAd,2BAAqBjB,IAAI,CAACkB,MAA1B;AAAA,UAAkCC,KAAlC,GAAgEH,IAAhE,CAAkCG,KAAlC;AAAA,UAAyCC,SAAzC,GAAgEJ,IAAhE,CAAyCI,SAAzC;AAAA,UAAuDC,IAAvD,4BAAgEL,IAAhE;;AACA,0BACE,KAAC,aAAD;AAEE,QAAA,QAAQ,EAAEb,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKc,IAAL,cAAad,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CI,YAAY,KAAKI,KAAjB,GAAyB,SAAzB,GAAqC,SAAhF,0BAAyGS,SAAS,IAAI,EAAtH,CAHX;AAIE,QAAA,WAAW,EAAErB,yBAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACI,QAAD,IAAaO,YAAY,CAACM,IAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAH,CAAC;AAAA,iBAAI,CAACV,QAAD,IAAaS,aAAa,CAACC,CAAD,EAAIG,IAAJ,CAA9B;AAAA;AANd,SAOMK,IAPN;AAAA,+BAQE,KAAC,oBAAD;AAAA,iCACE,KAAC,WAAD;AAAA,sBACGF;AADH;AADF;AARF,UACOR,KADP,CADF;AAgBD,KAlBA;AADH,IADF;AAuBD,CA9DD;;AAgEA,eAAeV,WAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {Size} from '../types';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((item: ChipValue) => {\n        const {value, size = Size.Medium, label, className, ...rest } = item;\n        return (\n          <ChipContainer\n            key={value}\n            tabIndex={disabled ? -1 : 0}\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\n            onMouseDown={defaultOnMouseDownHandler}\n            onClick={() => !disabled && onSelectChip(item)}\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\n            {...rest}>\n            <ChipContentContainer>\n              <ChipContent>\n                {label}\n              </ChipContent>\n            </ChipContentContainer>\n          </ChipContainer>\n        );\n      })}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.js"}

package/dist/Chips/FilterChip.cjs

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _types = require("../types");
@@ -19,34 +25,31 @@ var _common = require("../common");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["selected", "text", "size", "disabled", "onClick", "className"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/**
- * Import React libraries.
- */
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-/**
- * Import custom components.
- */
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-/**
- * Import custom styles.
- */
 var FilterChip = function FilterChip(_ref) {
   var selected = _ref.selected,
       text = _ref.text,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
       disabled = _ref.disabled,
-      _onClick = _ref.onClick;
+      _onClick = _ref.onClick,
+      className = _ref.className,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   /**
    * Return Filter Chip component.
    */
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
-    className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!_onClick ? 'interactive' : ''),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, _objectSpread(_objectSpread({
+    className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!_onClick ? 'interactive' : '', " ").concat(className || ''),
     tabIndex: disabled || !_onClick ? -1 : 0,
     onKeyDown: function onKeyDown(e) {
       return (e.key === 'Enter' || e.key === ' ') && !disabled && _onClick && _onClick();
@@ -54,7 +57,8 @@ var FilterChip = function FilterChip(_ref) {
     onMouseDown: _common.defaultOnMouseDownHandler,
     onClick: function onClick() {
       return !disabled && _onClick && _onClick();
-    },
+    }
+  }, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
         children: [selected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -67,7 +71,7 @@ var FilterChip = function FilterChip(_ref) {
         })]
       })
     })
-  });
+  }));
 };
 
 var _default = FilterChip;

package/dist/Chips/FilterChip.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["FilterChip","selected","text","size","Size","Medium","disabled","onClick","e","key","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AAKA;;AAMA;;;;;;;;AApBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,uBAHrBC,IAGqB;AAAA,MAHrBA,IAGqB,0BAHdC,YAAKC,MAGS;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE,qBAAC,yBAAD;AACE,IAAA,SAAS,YAAKJ,IAAL,cAAaG,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CL,QAAQ,GAAG,SAAH,GAAe,SAAlE,cAA+E,CAAC,CAACM,QAAF,GAAY,aAAZ,GAA4B,EAA3G,CADX;AAEE,IAAA,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAFxC;AAGE,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACH,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;AAAA,KAHd;AAIE,IAAA,WAAW,EAAEG,iCAJf;AAKE,IAAA,OAAO,EAAE;AAAA,aAAM,CAACJ,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,KALX;AAAA,2BAME,qBAAC,gCAAD;AAAA,6BACE,sBAAC,uBAAD;AAAA,mBACGN,QAAQ,iBAAI;AAAK,UAAA,SAAS,EAAE,qBAAhB;AAAA,iCAAuC,qBAAC,kBAAD,CAAa,SAAb;AAAuB,YAAA,SAAS,EAAE;AAAlC;AAAvC,UADf,eAEE;AAAA,oBAAMC;AAAN,UAFF;AAAA;AADF;AANF,IADF;AAeD,CA3BD;;eA6BeF,U","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                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <ChipContainer\n      className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''}`}\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      <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"],"file":"FilterChip.cjs"}
+{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["FilterChip","selected","text","size","Size","Medium","disabled","onClick","className","rest","e","key","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AAKA;;AAMA;;;;;;;;;;;;;;AAEA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAQwB;AAAA,MAPrBC,QAOqB,QAPrBA,QAOqB;AAAA,MANrBC,IAMqB,QANrBA,IAMqB;AAAA,uBALrBC,IAKqB;AAAA,MALrBA,IAKqB,0BALdC,YAAKC,MAKS;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,OAGqB;AAAA,MAFrBC,SAEqB,QAFrBA,SAEqB;AAAA,MADlBC,IACkB;;AAGnF;AACF;AACA;AACE,sBACE,qBAAC,yBAAD;AACE,IAAA,SAAS,YAAKN,IAAL,cAAaG,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CL,QAAQ,GAAG,SAAH,GAAe,SAAlE,cAA+E,CAAC,CAACM,QAAF,GAAY,aAAZ,GAA4B,EAA3G,cAAiHC,SAAS,IAAI,EAA9H,CADX;AAEE,IAAA,QAAQ,EAAEF,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAFxC;AAGE,IAAA,SAAS,EAAE,mBAAAG,CAAC;AAAA,aAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACL,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;AAAA,KAHd;AAIE,IAAA,WAAW,EAAEK,iCAJf;AAKE,IAAA,OAAO,EAAE;AAAA,aAAM,CAACN,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA;AALX,KAMME,IANN;AAAA,2BAOE,qBAAC,gCAAD;AAAA,6BACE,sBAAC,uBAAD;AAAA,mBACGR,QAAQ,iBAAI;AAAK,UAAA,SAAS,EAAE,qBAAhB;AAAA,iCAAuC,qBAAC,kBAAD,CAAa,SAAb;AAAuB,YAAA,SAAS,EAAE;AAAlC;AAAvC,UADf,eAEE;AAAA,oBAAMC;AAAN,UAFF;AAAA;AADF;AAPF,KADF;AAgBD,CA9BD;;eAgCeF,U","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"],"file":"FilterChip.cjs"}

package/dist/Chips/FilterChip.js

@@ -1,3 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["selected", "text", "size", "disabled", "onClick", "className"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 /**
  * Import React libraries.
  */
@@ -27,13 +35,15 @@ var FilterChip = function FilterChip(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? Size.Medium : _ref$size,
       disabled = _ref.disabled,
-      _onClick = _ref.onClick;
+      _onClick = _ref.onClick,
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   /**
    * Return Filter Chip component.
    */
-  return /*#__PURE__*/_jsx(ChipContainer, {
-    className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!_onClick ? 'interactive' : ''),
+  return /*#__PURE__*/_jsx(ChipContainer, _objectSpread(_objectSpread({
+    className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!_onClick ? 'interactive' : '', " ").concat(className || ''),
     tabIndex: disabled || !_onClick ? -1 : 0,
     onKeyDown: function onKeyDown(e) {
       return (e.key === 'Enter' || e.key === ' ') && !disabled && _onClick && _onClick();
@@ -41,7 +51,8 @@ var FilterChip = function FilterChip(_ref) {
     onMouseDown: defaultOnMouseDownHandler,
     onClick: function onClick() {
       return !disabled && _onClick && _onClick();
-    },
+    }
+  }, rest), {}, {
     children: /*#__PURE__*/_jsx(ChipContentContainer, {
       children: /*#__PURE__*/_jsxs(ChipContent, {
         children: [selected && /*#__PURE__*/_jsx("div", {
@@ -54,7 +65,7 @@ var FilterChip = function FilterChip(_ref) {
         })]
       })
     })
-  });
+  }));
 };
 
 export default FilterChip;

package/dist/Chips/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["React","Size","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","FilterChip","selected","text","size","Medium","disabled","onClick","e","key"],"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,OAMwB;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,uBAHrBC,IAGqB;AAAA,MAHrBA,IAGqB,0BAHdT,IAAI,CAACU,MAGS;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE,KAAC,aAAD;AACE,IAAA,SAAS,YAAKH,IAAL,cAAaE,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CJ,QAAQ,GAAG,SAAH,GAAe,SAAlE,cAA+E,CAAC,CAACK,QAAF,GAAY,aAAZ,GAA4B,EAA3G,CADX;AAEE,IAAA,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAFxC;AAGE,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACH,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;AAAA,KAHd;AAIE,IAAA,WAAW,EAAEP,yBAJf;AAKE,IAAA,OAAO,EAAE;AAAA,aAAM,CAACM,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,KALX;AAAA,2BAME,KAAC,oBAAD;AAAA,6BACE,MAAC,WAAD;AAAA,mBACGL,QAAQ,iBAAI;AAAK,UAAA,SAAS,EAAE,qBAAhB;AAAA,iCAAuC,KAAC,WAAD,CAAa,SAAb;AAAuB,YAAA,SAAS,EAAE;AAAlC;AAAvC,UADf,eAEE;AAAA,oBAAMC;AAAN,UAFF;AAAA;AADF;AANF,IADF;AAeD,CA3BD;;AA6BA,eAAeF,UAAf","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                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <ChipContainer\n      className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''}`}\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      <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"],"file":"FilterChip.js"}
+{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["React","Size","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","FilterChip","selected","text","size","Medium","disabled","onClick","className","rest","e","key"],"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;AAAA,MAPrBC,QAOqB,QAPrBA,QAOqB;AAAA,MANrBC,IAMqB,QANrBA,IAMqB;AAAA,uBALrBC,IAKqB;AAAA,MALrBA,IAKqB,0BALdT,IAAI,CAACU,MAKS;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,OAGqB;AAAA,MAFrBC,SAEqB,QAFrBA,SAEqB;AAAA,MADlBC,IACkB;;AAGnF;AACF;AACA;AACE,sBACE,KAAC,aAAD;AACE,IAAA,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;AAEE,IAAA,QAAQ,EAAEF,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAFxC;AAGE,IAAA,SAAS,EAAE,mBAAAG,CAAC;AAAA,aAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACL,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;AAAA,KAHd;AAIE,IAAA,WAAW,EAAEP,yBAJf;AAKE,IAAA,OAAO,EAAE;AAAA,aAAM,CAACM,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA;AALX,KAMME,IANN;AAAA,2BAOE,KAAC,oBAAD;AAAA,6BACE,MAAC,WAAD;AAAA,mBACGP,QAAQ,iBAAI;AAAK,UAAA,SAAS,EAAE,qBAAhB;AAAA,iCAAuC,KAAC,WAAD,CAAa,SAAb;AAAuB,YAAA,SAAS,EAAE;AAAlC;AAAvC,UADf,eAEE;AAAA,oBAAMC;AAAN,UAFF;AAAA;AADF;AAPF,KADF;AAgBD,CA9BD;;AAgCA,eAAeF,UAAf","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"],"file":"FilterChip.js"}