@laerdal/life-react-components 1.9.9-dev.7 → 1.10.1-dev.1

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"));
@@ -17,19 +21,20 @@ var _ChipStyles = require("./ChipStyles");
 
 var _common = require("../common");
 
+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,
@@ -64,7 +69,7 @@ var ChoiceChips = function ChoiceChips(_ref) {
   };
 
   var handleKeyDown = function handleKeyDown(e, value) {
-    if (e.key === 'Enter') {
+    if (e.key === 'Enter' || e.key === ' ') {
       onSelectChip(value);
     }
   };
@@ -74,23 +79,30 @@ var ChoiceChips = function ChoiceChips(_ref) {
 
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: values.map(function (value) {
-      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, " ").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","defaultOnMouseDownHandler","label"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAMA;;;;;;;;AAdA;AACA;AACA;;AAGA;AACA;AACA;AASA,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,OAAd,EAAuB;AACrBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGP,MAAM,CAACW,GAAP,CAAW,UAACJ,KAAD;AAAA,0BACV,qBAAC,yBAAD;AAEE,QAAA,QAAQ,EAAET,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKS,KAAK,CAACK,IAAX,cAAmBd,QAAQ,GAAG,UAAH,GAAgB,EAA3C,cAAiDK,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,SAA/B,GAA2C,SAA5F,iBAHX;AAIE,QAAA,WAAW,EAAEM,iCAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACf,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,CAACO;AADT;AADF;AAPF,SACOP,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';\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') {\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} ${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.
@@ -14,6 +21,7 @@ import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
  */
 
 import { defaultOnMouseDownHandler } from '../common';
+import { Size } from '../types';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 
@@ -51,7 +59,7 @@ var ChoiceChips = function ChoiceChips(_ref) {
   };
 
   var handleKeyDown = function handleKeyDown(e, value) {
-    if (e.key === 'Enter') {
+    if (e.key === 'Enter' || e.key === ' ') {
       onSelectChip(value);
     }
   };
@@ -61,23 +69,31 @@ var ChoiceChips = function ChoiceChips(_ref) {
 
 
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: values.map(function (value) {
-      return /*#__PURE__*/_jsx(ChipContainer, {
+    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, _objectSpread(_objectSpread({
         tabIndex: disabled ? -1 : 0,
-        className: "".concat(value.size, " ").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","ChoiceChips","selected","disabled","onClick","values","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","size","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;;;;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,wBAAwCT,KAAK,CAACU,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEZ,EAAAA,KAAK,CAACa,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,OAAd,EAAuB;AACrBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGN,MAAM,CAACU,GAAP,CAAW,UAACJ,KAAD;AAAA,0BACV,KAAC,aAAD;AAEE,QAAA,QAAQ,EAAER,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKQ,KAAK,CAACK,IAAX,cAAmBb,QAAQ,GAAG,UAAH,GAAgB,EAA3C,cAAiDI,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,SAA/B,GAA2C,SAA5F,iBAHX;AAIE,QAAA,WAAW,EAAEX,yBAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACG,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,CAACM;AADT;AADF;AAPF,SACON,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';\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') {\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} ${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,8 +9,14 @@ 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");
+
 var _index = require("../icons/index");
 
 var _ChipStyles = require("./ChipStyles");
@@ -17,56 +25,53 @@ 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,
-      size = _ref.size,
+      _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)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
-      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!_onClick ? 'interactive' : ''),
-      tabIndex: disabled ? -1 : 0,
-      onKeyDown: function onKeyDown(e) {
-        return e.key === 'Enter' && !disabled && _onClick && _onClick();
-      },
-      onMouseDown: _common.defaultOnMouseDownHandler,
-      onClick: function onClick() {
-        return !disabled && _onClick && _onClick();
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
-          children: [selected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: 'chip-icon icon-left',
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SystemIcons.CheckMark, {
-              className: 'icon'
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: text
-          })]
-        })
+  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();
+    },
+    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", {
+          className: 'chip-icon icon-left',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SystemIcons.CheckMark, {
+            className: 'icon'
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: text
+        })]
       })
     })
-  });
+  }));
 };
 
 var _default = FilterChip;

package/dist/Chips/FilterChip.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["FilterChip","selected","text","size","disabled","onClick","e","key","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;AAGA;;AAMA;;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,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,qBAAC,yBAAD;AACE,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CH,QAAQ,GAAG,SAAH,GAAe,SAAlE,cAA+E,CAAC,CAACI,QAAF,GAAY,aAAZ,GAA4B,EAA3G,CADX;AAEE,MAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,MAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACH,QAAtB,IAAkCC,QAAlC,IAA6CA,QAAO,EAAxD;AAAA,OAHd;AAIE,MAAA,WAAW,EAAEG,iCAJf;AAKE,MAAA,OAAO,EAAE;AAAA,eAAM,CAACJ,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,OALX;AAAA,6BAME,qBAAC,gCAAD;AAAA,+BACE,sBAAC,uBAAD;AAAA,qBACGJ,QAAQ,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,mCAAuC,qBAAC,kBAAD,CAAa,SAAb;AAAuB,cAAA,SAAS,EAAE;AAAlC;AAAvC,YADf,eAEE;AAAA,sBAAMC;AAAN,YAFF;AAAA;AADF;AANF;AADF,IADF;AAiBD,CA7BD;;eA+BeF,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,\n                                                                disabled,\n                                                                onClick\n                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <>\n      <ChipContainer\n        className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''}`}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={e => e.key === 'Enter' && !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};\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,11 +1,20 @@
+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.
  */
 import * as React from 'react';
-
+import { Size } from '../types';
 /**
  * Import custom components.
  */
+
 import { SystemIcons } from '../icons/index';
 /**
  * Import custom styles.
@@ -19,43 +28,44 @@ import { ChipContent, ChipContentContainer, ChipContainer } from './ChipStyles';
 import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 
 var FilterChip = function FilterChip(_ref) {
   var selected = _ref.selected,
       text = _ref.text,
-      size = _ref.size,
+      _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(_Fragment, {
-    children: /*#__PURE__*/_jsx(ChipContainer, {
-      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!_onClick ? 'interactive' : ''),
-      tabIndex: disabled ? -1 : 0,
-      onKeyDown: function onKeyDown(e) {
-        return e.key === 'Enter' && !disabled && _onClick && _onClick();
-      },
-      onMouseDown: defaultOnMouseDownHandler,
-      onClick: function onClick() {
-        return !disabled && _onClick && _onClick();
-      },
-      children: /*#__PURE__*/_jsx(ChipContentContainer, {
-        children: /*#__PURE__*/_jsxs(ChipContent, {
-          children: [selected && /*#__PURE__*/_jsx("div", {
-            className: 'chip-icon icon-left',
-            children: /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
-              className: 'icon'
-            })
-          }), /*#__PURE__*/_jsx("div", {
-            children: text
-          })]
-        })
+  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();
+    },
+    onMouseDown: defaultOnMouseDownHandler,
+    onClick: function onClick() {
+      return !disabled && _onClick && _onClick();
+    }
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(ChipContentContainer, {
+      children: /*#__PURE__*/_jsxs(ChipContent, {
+        children: [selected && /*#__PURE__*/_jsx("div", {
+          className: 'chip-icon icon-left',
+          children: /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
+            className: 'icon'
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          children: text
+        })]
       })
     })
-  });
+  }));
 };
 
 export default FilterChip;

package/dist/Chips/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["React","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","FilterChip","selected","text","size","disabled","onClick","e","key"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;;AAGA;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,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,KAAC,aAAD;AACE,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CH,QAAQ,GAAG,SAAH,GAAe,SAAlE,cAA+E,CAAC,CAACI,QAAF,GAAY,aAAZ,GAA4B,EAA3G,CADX;AAEE,MAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,MAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACH,QAAtB,IAAkCC,QAAlC,IAA6CA,QAAO,EAAxD;AAAA,OAHd;AAIE,MAAA,WAAW,EAAEN,yBAJf;AAKE,MAAA,OAAO,EAAE;AAAA,eAAM,CAACK,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,OALX;AAAA,6BAME,KAAC,oBAAD;AAAA,+BACE,MAAC,WAAD;AAAA,qBACGJ,QAAQ,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,mCAAuC,KAAC,WAAD,CAAa,SAAb;AAAuB,cAAA,SAAS,EAAE;AAAlC;AAAvC,YADf,eAEE;AAAA,sBAAMC;AAAN,YAFF;AAAA;AADF;AANF;AADF,IADF;AAiBD,CA7BD;;AA+BA,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,\n                                                                disabled,\n                                                                onClick\n                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <>\n      <ChipContainer\n        className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''}`}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={e => e.key === 'Enter' && !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};\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"}

package/dist/Chips/InputChip.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");
@@ -15,34 +21,35 @@ var _ChipStyles = require("./ChipStyles");
 
 var _common = require("../common");
 
+var _types = require("../types");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["icon", "text", "variant", "size", "disabled", "onClick", "disableRemove", "onRemove", "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 InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref2;
 
   var icon = _ref.icon,
       text = _ref.text,
-      variant = _ref.variant,
-      size = _ref.size,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? _types.States.Default : _ref$variant,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
       disabled = _ref.disabled,
       _onClick = _ref.onClick,
       disableRemove = _ref.disableRemove,
-      onRemove = _ref.onRemove;
+      onRemove = _ref.onRemove,
+      className = _ref.className,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var containerRef = (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : React.useRef(null);
   var removeRef = React.useRef(null);
   (0, _common.useActionWithin)(containerRef, [removeRef]);
@@ -70,48 +77,47 @@ var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    */
 
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
-      ref: containerRef,
-      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', "  ").concat(variant, " ").concat(!!_onClick ? 'interactive' : ''),
-      tabIndex: disabled || !_onClick ? -1 : 0,
-      onMouseDown: _common.defaultOnMouseDownHandler,
-      onKeyDown: handleContainerKeyDown,
-      onClick: function onClick() {
-        return _onClick && _onClick();
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
-          className: 'with-action-right',
-          children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: 'chip-icon icon-left',
-            children: _index.SystemIcons[icon]({
-              className: 'icon'
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: text
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            ref: removeRef,
-            className: "action-right ".concat(disableRemove ? 'disabled' : ''),
-            tabIndex: disableRemove || disabled ? -1 : 0,
-            onMouseDown: _common.defaultOnMouseDownHandler,
-            onClick: function onClick(e) {
-              return !disableRemove && onRemoveClick(e);
-            },
-            onKeyDown: function onKeyDown(e) {
-              return (e.key === 'Enter' || e.key === ' ') && onRemoveClick(e);
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: 'chip-icon',
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SystemIcons.Close, {
-                className: 'remove'
-              })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, _objectSpread(_objectSpread({
+    ref: containerRef,
+    className: "".concat(size, " ").concat(disabled ? 'disabled' : '', "  ").concat(variant, " ").concat(!!_onClick ? 'interactive' : '', " ").concat(className || ''),
+    tabIndex: disabled || !_onClick ? -1 : 0,
+    onMouseDown: _common.defaultOnMouseDownHandler,
+    onKeyDown: handleContainerKeyDown,
+    onClick: function onClick() {
+      return !disabled && _onClick && _onClick();
+    }
+  }, rest), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
+        className: 'with-action-right',
+        children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: 'chip-icon icon-left',
+          children: _index.SystemIcons[icon]({
+            className: 'icon'
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: text
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: removeRef,
+          className: "action-right ".concat(disableRemove ? 'disabled' : ''),
+          tabIndex: disableRemove || disabled ? -1 : 0,
+          onMouseDown: _common.defaultOnMouseDownHandler,
+          onClick: function onClick(e) {
+            return !disableRemove && !disabled && onRemoveClick(e);
+          },
+          onKeyDown: function onKeyDown(e) {
+            return (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: 'chip-icon',
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SystemIcons.Close, {
+              className: 'remove'
             })
-          })]
-        })
+          })
+        })]
       })
     })
-  });
+  }));
 });
 var _default = InputChip;
 exports.default = _default;