@bento-core/facet-filter 1.0.1-c3dc.3 → 1.0.1-c3dc.4

package/dist/FacetFilterController.js

@@ -12,13 +12,13 @@ var _FacetFilterView = _interopRequireDefault(require("./FacetFilterView"));
 const _excluded = ["section"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const FacetFilterController = props => {
   /**
    * update checkbox state
@@ -29,7 +29,8 @@ const FacetFilterController = props => {
     filterState,
     data,
     facetsConfig,
-    facetSectionConfig
+    facetSectionConfig,
+    tooltipText = {}
   } = props;
   const updateFacetState = filterSections => {
     const updateSections = [...filterSections];
@@ -37,9 +38,16 @@ const FacetFilterController = props => {
       for (const [key, value] of Object.entries(filterState)) {
         updateSections.forEach(sideBar => {
           if (sideBar.type === _Types.InputTypes.CHECKBOX && sideBar.datafield === key) {
-            sideBar.facetValues.forEach(item => {
-              item.isChecked = value[item.name] ? value[item.name] : false;
+            const {
+              facetValues = []
+            } = sideBar;
+            const updateFacetVals = facetValues.map(item => {
+              const facetVal = item[sideBar.field];
+              return _objectSpread(_objectSpread({}, item), {}, {
+                isChecked: value[facetVal] ? value[facetVal] : false
+              });
             });
+            sideBar.facetValues = updateFacetVals;
           }
           if (sideBar.type === _Types.InputTypes.SLIDER && sideBar.datafield === key) {
             sideBar.facetValues = value;
@@ -49,9 +57,13 @@ const FacetFilterController = props => {
     } else {
       updateSections.forEach(sideBar => {
         if (sideBar.type === _Types.InputTypes.CHECKBOX) {
-          sideBar.facetValues.forEach(item => {
-            item.isChecked = false;
-          });
+          const {
+            facetValues = []
+          } = sideBar;
+          const updateFacetVals = facetValues.map(item => _objectSpread(_objectSpread({}, item), {}, {
+            isChecked: false
+          }));
+          sideBar.facetValues = updateFacetVals;
         }
         /**
          * set default value for slider - on clear all filter
@@ -96,6 +108,7 @@ const FacetFilterController = props => {
    * Construct filter object
    * 1. add facet values to facets
    * 2. add 'name' key to each facet value
+   * 3. add '
    */
   const addFacetValues = facets => {
     const updateFacets = [];
@@ -105,19 +118,13 @@ const FacetFilterController = props => {
           facetValues: []
         });
         const {
-          field,
           ApiLowerBoundName,
           ApiUpperBoundName,
           apiForFiltering
         } = updateFacet;
         if (data[apiForFiltering]) {
           if (Array.isArray(data[apiForFiltering])) {
-            const updateField = data[apiForFiltering].map(item => {
-              const addField = _objectSpread({}, item);
-              addField.name = item[field];
-              return addField;
-            });
-            updateFacet.facetValues = updateField;
+            updateFacet.facetValues = data[apiForFiltering];
           }
           /**
           * add object to facet values
@@ -125,19 +132,12 @@ const FacetFilterController = props => {
           if (facet.type === _Types.InputTypes.SLIDER) {
             const lowerBound = data[apiForFiltering][ApiLowerBoundName];
             const upperBound = data[apiForFiltering][ApiUpperBoundName];
-            if (lowerBound === 0 && upperBound === 0) {
-              updateFacet.filterOut = true;
-            } else {
-              updateFacet.minLowerBound = lowerBound;
-              updateFacet.maxUpperBound = upperBound;
-              updateFacet.facetValues = [lowerBound, upperBound];
-              updateFacet.style = facet.style;
-            }
+            updateFacet.minLowerBound = lowerBound;
+            updateFacet.maxUpperBound = upperBound;
+            updateFacet.facetValues = [lowerBound, upperBound];
           }
         }
-        if (!updateFacet.filterOut) {
-          updateFacets.push(updateFacet);
-        }
+        updateFacets.push(updateFacet);
       });
     }
     return updateFacets;
@@ -147,7 +147,6 @@ const FacetFilterController = props => {
    * Generate facet sections state
    *
    */
-  // const displayFacets = facetsConfig.filter((facet) => facet.show).slice(0, 16);
   const displayFacets = facetsConfig.filter(facet => facet.show);
   const facetStates = addFacetValues(displayFacets);
   const updateState = updateFacetState(facetStates);

package/dist/FacetFilterView.js

@@ -9,7 +9,6 @@ var _core = require("@material-ui/core");
 var _FacetFilterStyle = _interopRequireDefault(require("./FacetFilterStyle"));
 var _FacetSectionView = _interopRequireDefault(require("./components/section/FacetSectionView"));
 var _ReduxFacetView = _interopRequireDefault(require("./components/facet/ReduxFacetView"));
-var _FilterItems = _interopRequireDefault(require("./components/inputs/FilterItems"));
 var _ReduxSearchFacetView = _interopRequireDefault(require("./components/facet/ReduxSearchFacetView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable arrow-body-style */
@@ -37,11 +36,7 @@ const BentoFacetFilter = _ref => {
     return /*#__PURE__*/_react.default.createElement(_ReduxFacetView.default, {
       facet: facet,
       CustomView: CustomFacetView
-    }, /*#__PURE__*/_react.default.createElement(_core.List, {
-      className: "List_".concat(facet.label)
-    }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
-      facet: facet
-    })));
+    });
   })))));
 };
 var _default = (0, _core.withStyles)(_FacetFilterStyle.default)(BentoFacetFilter);

package/dist/components/facet/FacetModal.js

@@ -35,7 +35,7 @@ const ModalView = _ref => {
   return /*#__PURE__*/_react.default.createElement(_core.Modal, {
     open: open,
     onClose: onClose,
-    "aria-labelledby": "".concat(facet.datafield, "-search-modal")
+    "aria-label": "".concat(facet.datafield, "-search-modal")
   }, /*#__PURE__*/_react.default.createElement(_core.Box, {
     className: classes.modalBody
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -64,7 +64,8 @@ const ModalView = _ref => {
     value: searchText,
     type: "text",
     placeholder: facet.searchPlaceholder ? facet.searchPlaceholder : 'e.g. Sarcoma, Neoplasm',
-    onChange: e => onSearchTextChange(facet.datafield, e.target.value)
+    onChange: e => onSearchTextChange(facet.datafield, e.target.value),
+    "aria-label": "Search within ".concat(facet.section, " facet")
   }), /*#__PURE__*/_react.default.createElement(_core.Button, {
     variant: "outlined",
     onClick: () => onSearchTextChange(facet.datafield, ''),

package/dist/components/facet/FacetStyle.js

@@ -35,35 +35,22 @@ var _default = () => ({
     paddingTop: '10px',
     marginBottom: '5px',
     textAlign: 'left',
-    marginLeft: '-4px',
-    display: 'flex',
-    alignItems: 'stretch',
-    justifyContent: 'flex-start',
-    gap: '8px'
-  },
-  sortGroupSlider: {
-    marginBottom: '5px',
-    textAlign: 'left',
-    marginLeft: '-4px',
-    display: 'flex',
-    alignItems: 'stretch',
-    justifyContent: 'flex-start',
-    gap: '8px'
+    marginLeft: '-5px',
+    borderTop: 'none'
   },
   sortGroupIcon: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
     fontSize: '10px',
     marginRight: '12px',
-    marginLeft: '24px'
+    marginLeft: '16px'
   },
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px'
-    // marginRight: '32px',
+    fontSize: '11px',
+    marginRight: '31px'
   },
-
   NonSortGroup: {
     marginBottom: '5px',
     borderTop: '1px solid #B1B1B1',
@@ -72,21 +59,19 @@ var _default = () => ({
   },
   NonSortGroupItem: {
     fontFamily: 'Nunito',
-    fontSize: '10px',
-    marginRight: '32px'
+    fontSize: '11px',
+    marginRight: '31px'
   },
   sortGroupItemCounts: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
-    marginRight: '19px',
-    marginLeft: 'auto'
-    // marginTop: '5px',
-    // float: 'right',
+    fontSize: '11px',
+    float: 'right',
+    marginRight: '10px',
+    marginTop: '5px'
   },
-
   highlight: {
-    color: '#b2c6d6'
+    color: '#537A9D'
   },
   showMore: {
     textAlign: 'right',
@@ -124,10 +109,11 @@ var _default = () => ({
     padding: '5px'
   },
   expandedDisplayButton: {
-    backgroundColor: '#4D889E !important',
+    backgroundColor: '#477C90 !important',
     color: 'white',
     width: 'calc(100% - 26px)',
     height: '30px',
+    marginTop: '5px',
     marginBottom: '5px',
     marginLeft: '6px',
     borderRadius: '5px',

package/dist/components/facet/FacetView.js

@@ -27,7 +27,9 @@ const FacetView = _ref => {
     facet,
     onClearFacetSection,
     onClearSliderSection,
-    CustomView
+    CustomView,
+    autoComplete,
+    upload
   } = _ref;
   const [expand, setExpand] = (0, _react.useState)(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
   const onExpandFacet = () => setExpand(!expand);
@@ -35,13 +37,11 @@ const FacetView = _ref => {
   /**
   * expand section incase of active local search
   */
-  // useEffect(() => {
-  //   if ((autoComplete && autoComplete.length > 0)
-  //     || (upload && upload.length > 0)) {
-  //     setExpand(true);
-  //   }
-  // }, [autoComplete, upload]);
-
+  (0, _react.useEffect)(() => {
+    if (autoComplete && autoComplete.length > 0 || upload && upload.length > 0) {
+      setExpand(true);
+    }
+  }, [autoComplete, upload]);
   const [sortBy, setSortBy] = (0, _react.useState)(null);
   const onSortFacet = type => {
     setSortBy(type);
@@ -61,7 +61,7 @@ const FacetView = _ref => {
     type,
     facetValues
   } = facet;
-  const selectedItems = facetValues && facetValues.filter(item => item.isChecked);
+  const selectedItems = facetValues && facetValues.filter(item => item && item.isChecked);
   const displayFacet = _objectSpread({}, facet);
   displayFacet.facetValues = selectedItems;
   const isActiveFacet = [...selectedItems].length > 0;
@@ -82,12 +82,12 @@ const FacetView = _ref => {
     className: (0, _clsx.default)(classes.subSectionSummaryText, {
       ["activeFacet".concat(facet.section)]: isActiveFacet
     })
-  }, facet.label)), facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, facet.label)), facet.type !== _Types.InputTypes.SLIDER && facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.NonSortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.NonSortGroupItem
   }, "No data for this field")), (facet.type === _Types.InputTypes.SLIDER || facetValues.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
-    className: facet.type === _Types.InputTypes.SLIDER ? classes.sortGroupSlider : classes.sortGroup
+    className: classes.sortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.sortGroupIcon
   }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
@@ -114,10 +114,10 @@ const FacetView = _ref => {
     onClick: () => {
       onSortFacet(_Sort.sortType.NUMERIC);
     }
-  }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
+  }, "Sort by count"))), expand && /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
     facet: facet,
     sortBy: sortBy
-  })), !expand && type === _Types.InputTypes.CHECKBOX && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
+  })), !expand && type === _Types.InputTypes.CHECKBOX && selectedItems.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
     id: "filter_Items"
   }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
     facet: displayFacet

package/dist/components/facet/ModalStyle.js

@@ -82,11 +82,7 @@ var _default = () => ({
     marginBottom: '5px',
     borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
-    marginLeft: '-4px',
-    display: 'flex',
-    alignItems: 'stretch',
-    justifyContent: 'flex-start',
-    gap: '8px'
+    marginLeft: '-5px'
   },
   sortGroupIcon: {
     cursor: 'pointer',
@@ -116,12 +112,10 @@ var _default = () => ({
     cursor: 'pointer',
     fontFamily: 'Nunito',
     fontSize: '10px',
-    marginRight: '19px',
-    marginLeft: 'auto'
-    // marginTop: '5px',
-    // float: 'right',
+    float: 'right',
+    marginRight: '10px',
+    marginTop: '5px'
   },
-
   itemContainer: {}
 });
 exports.default = _default;

package/dist/components/facet/ReduxFacetView.js

@@ -10,12 +10,14 @@ var _Actions = require("../../store/actions/Actions");
 var _FacetView = _interopRequireDefault(require("./FacetView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ReduxFacetView = props => /*#__PURE__*/_react.default.createElement(_FacetView.default, props);
-
-// const mapStateToProps = (state) => ({
-//   autoComplete: state?.localFind?.autocomplete || [],
-//   upload: state?.localFind?.upload || [],
-// });
-
+const mapStateToProps = state => {
+  var _state$localFind, _state$localFind2;
+  return {
+    filterState: state.statusReducer.filterState,
+    autoComplete: (state === null || state === void 0 ? void 0 : (_state$localFind = state.localFind) === null || _state$localFind === void 0 ? void 0 : _state$localFind.autocomplete) || [],
+    upload: (state === null || state === void 0 ? void 0 : (_state$localFind2 = state.localFind) === null || _state$localFind2 === void 0 ? void 0 : _state$localFind2.upload) || []
+  };
+};
 const mapDispatchToProps = dispatch => ({
   onClearFacetSection: facet => {
     dispatch((0, _Actions.clearFacetSection)(facet));
@@ -24,5 +26,5 @@ const mapDispatchToProps = dispatch => ({
     dispatch((0, _Actions.clearSliderSection)(facet));
   }
 });
-var _default = (0, _reactRedux.connect)(null, mapDispatchToProps)(ReduxFacetView);
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxFacetView);
 exports.default = _default;

package/dist/components/facet/SearchFacetView.js

@@ -72,7 +72,7 @@ const SearchFacetView = _ref => {
     datafield,
     section
   } = facet;
-  const selectedItems = facetValues && facetValues.filter(item => item.isChecked);
+  const selectedItems = facetValues && facetValues.filter(item => item && item.isChecked);
   const displayFacet = _objectSpread({}, facet);
   displayFacet.facetValues = selectedItems;
   const isActiveFacet = [...selectedItems].length > 0;
@@ -87,14 +87,10 @@ const SearchFacetView = _ref => {
     }),
     datafield: datafield,
     facet: facet
-    // queryParams={queryParams}
   }));
-
   const newUncheckedFullList = searchItems(sortFilters.filter(item => !item.isChecked), searchText);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReduxFacetModal.default, {
-    facet: facet
-    // queryParams={queryParams}
-    ,
+    facet: facet,
     open: open,
     onClose: () => setOpen(false)
   }), /*#__PURE__*/_react.default.createElement(_core.Accordion, {
@@ -113,7 +109,7 @@ const SearchFacetView = _ref => {
     className: (0, _clsx.default)(classes.subSectionSummaryText, {
       ["activeFacet".concat(facet.section)]: isActiveFacet
     })
-  }, facet.label)), facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, facet.label)), facet.type !== _Types.InputTypes.SLIDER && facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.NonSortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.NonSortGroupItem
@@ -124,7 +120,8 @@ const SearchFacetView = _ref => {
     value: searchText,
     type: "text",
     placeholder: facet.searchPlaceholder ? facet.searchPlaceholder : 'e.g. Sarcoma, Neoplasm',
-    onChange: e => onSearchTextChange(facet.datafield, e.target.value)
+    onChange: e => onSearchTextChange(facet.datafield, e.target.value),
+    "aria-label": "Search within ".concat(facet.section, " facet")
   }), searchText && searchText.trim() !== '' && /*#__PURE__*/_react.default.createElement(_core.IconButton, {
     "aria-label": "close",
     onClick: () => onSearchTextChange(facet.datafield, ''),
@@ -171,13 +168,14 @@ const SearchFacetView = _ref => {
     onClick: () => {
       onSortChange(facet.datafield, _Sort.sortType.NUMERIC);
     }
-  }, "Sort by count")), /*#__PURE__*/_react.default.createElement(_SearchFilterItems.default, {
+  }, "Sort by count")), expand && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SearchFilterItems.default, {
     searchText: searchText,
     facet: facet,
     sortBy: sortBy
-  }))), !expand && type === _Types.InputTypes.CHECKBOX && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
+  })))), !expand && type === _Types.InputTypes.CHECKBOX && selectedItems.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
     id: "filter_Items"
   }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
+    searchText: searchText,
     facet: displayFacet
   }))), !expand && selectedItems.length > limitCheckBoxCount && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.showMore,

package/dist/components/inputs/FilterItemStyle.js

@@ -10,36 +10,29 @@ var _default = () => ({
     marginBottom: '5px',
     borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
-    marginLeft: '-4px',
-    display: 'flex',
-    alignItems: 'stretch',
-    justifyContent: 'flex-start',
-    gap: '8px'
+    marginLeft: '-5px'
   },
   sortGroupIcon: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
     fontSize: '10px',
     marginRight: '12px',
-    marginLeft: '24px'
+    marginLeft: '16px'
   },
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px'
-    // marginRight: '32px',
+    fontSize: '10px',
+    marginRight: '32px'
   },
-
   sortGroupItemCounts: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
     fontSize: '10px',
-    marginRight: '19px',
-    marginLeft: 'auto'
-    // marginTop: '5px',
-    // float: 'right',
+    float: 'right',
+    marginRight: '10px',
+    marginTop: '5px'
   },
-
   itemsContainer: {
     maxHeight: '400px',
     overflowY: 'auto',

package/dist/components/inputs/ModalFilterItems.js

@@ -41,8 +41,8 @@ const searchItems = (items, searchText, facet) => {
 const ModalFilterItems = _ref => {
   let {
     facet,
-    sortBy,
     searchText,
+    sortBy,
     onClearSection,
     onSortChange,
     classes

package/dist/components/inputs/ModalFilterStyle.js

@@ -10,11 +10,7 @@ var _default = () => ({
     marginBottom: '5px',
     borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
-    marginLeft: '-4px',
-    display: 'flex',
-    alignItems: 'stretch',
-    justifyContent: 'flex-start',
-    gap: '8px'
+    marginLeft: '-5px'
   },
   highlight: {
     color: '#b2c6d6'
@@ -29,16 +25,17 @@ var _default = () => ({
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '11px',
-    fontWeight: '400'
+    ffontSize: '11px',
+    fontWeight: '400',
+    marginRight: '32px'
   },
   sortGroupItemCounts: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
     fontSize: '11px',
     fontWeight: '400',
-    marginRight: '18px',
-    marginLeft: 'auto'
+    float: 'right',
+    marginRight: '18px'
   },
   checkboxContainer: {
     height: '528px'

package/dist/components/inputs/checkbox/CheckboxStyle.js

@@ -6,10 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _default = () => ({
   listItemGutters: {
-    padding: '10px 10px 10px 0px'
+    padding: '10px 20px 10px 0px'
+  },
+  listItemRoot: {
+    cursor: 'pointer'
   },
   checkboxRoot: {
-    marginLeft: '8px',
+    marginLeft: '5px',
     height: 12
   },
   panelDetailText: {
@@ -30,11 +33,11 @@ var _default = () => ({
   checkboxName: {
     margin: '0',
     color: '#000000',
-    fontSize: '16px',
-    fontWeight: 300,
+    fontSize: '14px',
     marginTop: '1.5px',
     fontFamily: 'Nunito',
-    lineHeight: '120%'
+    lineHeight: '120%',
+    wordBreak: 'break-word'
   }
 });
 exports.default = _default;