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

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,8 +29,7 @@ const FacetFilterController = props => {
     filterState,
     data,
     facetsConfig,
-    facetSectionConfig,
-    tooltipText = {}
+    facetSectionConfig
   } = props;
   const updateFacetState = filterSections => {
     const updateSections = [...filterSections];
@@ -38,16 +37,9 @@ const FacetFilterController = props => {
       for (const [key, value] of Object.entries(filterState)) {
         updateSections.forEach(sideBar => {
           if (sideBar.type === _Types.InputTypes.CHECKBOX && sideBar.datafield === key) {
-            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.forEach(item => {
+              item.isChecked = value[item.name] ? value[item.name] : false;
             });
-            sideBar.facetValues = updateFacetVals;
           }
           if (sideBar.type === _Types.InputTypes.SLIDER && sideBar.datafield === key) {
             sideBar.facetValues = value;
@@ -57,13 +49,9 @@ const FacetFilterController = props => {
     } else {
       updateSections.forEach(sideBar => {
         if (sideBar.type === _Types.InputTypes.CHECKBOX) {
-          const {
-            facetValues = []
-          } = sideBar;
-          const updateFacetVals = facetValues.map(item => _objectSpread(_objectSpread({}, item), {}, {
-            isChecked: false
-          }));
-          sideBar.facetValues = updateFacetVals;
+          sideBar.facetValues.forEach(item => {
+            item.isChecked = false;
+          });
         }
         /**
          * set default value for slider - on clear all filter
@@ -108,7 +96,6 @@ 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 = [];
@@ -118,13 +105,19 @@ const FacetFilterController = props => {
           facetValues: []
         });
         const {
+          field,
           ApiLowerBoundName,
           ApiUpperBoundName,
           apiForFiltering
         } = updateFacet;
         if (data[apiForFiltering]) {
           if (Array.isArray(data[apiForFiltering])) {
-            updateFacet.facetValues = data[apiForFiltering];
+            const updateField = data[apiForFiltering].map(item => {
+              const addField = _objectSpread({}, item);
+              addField.name = item[field];
+              return addField;
+            });
+            updateFacet.facetValues = updateField;
           }
           /**
           * add object to facet values
@@ -132,12 +125,19 @@ const FacetFilterController = props => {
           if (facet.type === _Types.InputTypes.SLIDER) {
             const lowerBound = data[apiForFiltering][ApiLowerBoundName];
             const upperBound = data[apiForFiltering][ApiUpperBoundName];
-            updateFacet.minLowerBound = lowerBound;
-            updateFacet.maxUpperBound = upperBound;
-            updateFacet.facetValues = [lowerBound, upperBound];
+            if (lowerBound === 0 && upperBound === 0) {
+              updateFacet.filterOut = true;
+            } else {
+              updateFacet.minLowerBound = lowerBound;
+              updateFacet.maxUpperBound = upperBound;
+              updateFacet.facetValues = [lowerBound, upperBound];
+              updateFacet.style = facet.style;
+            }
           }
         }
-        updateFacets.push(updateFacet);
+        if (!updateFacet.filterOut) {
+          updateFacets.push(updateFacet);
+        }
       });
     }
     return updateFacets;
@@ -147,6 +147,7 @@ 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/FacetFilterStyle.js

@@ -25,7 +25,7 @@ var _default = () => ({
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px'
   }
 });

package/dist/FacetFilterView.js

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

package/dist/components/facet/FacetStyle.js

@@ -35,22 +35,35 @@ var _default = () => ({
     paddingTop: '10px',
     marginBottom: '5px',
     textAlign: 'left',
-    marginLeft: '-5px',
-    borderTop: 'none'
+    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'
   },
   sortGroupIcon: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '12px',
-    marginLeft: '16px'
+    marginLeft: '24px'
   },
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '11px',
-    marginRight: '31px'
+    fontSize: '11px'
+    // marginRight: '32px',
   },
+
   NonSortGroup: {
     marginBottom: '5px',
     borderTop: '1px solid #B1B1B1',
@@ -60,24 +73,26 @@ var _default = () => ({
   NonSortGroupItem: {
     fontFamily: 'Nunito',
     fontSize: '11px',
-    marginRight: '31px'
+    marginRight: '32px'
   },
   sortGroupItemCounts: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
     fontSize: '11px',
-    float: 'right',
-    marginRight: '10px',
-    marginTop: '5px'
+    marginRight: '19px',
+    marginLeft: 'auto'
+    // marginTop: '5px',
+    // float: 'right',
   },
+
   highlight: {
-    color: '#537A9D'
+    color: '#b2c6d6'
   },
   showMore: {
     textAlign: 'right',
     paddingRight: '5px',
     cursor: 'pointer',
-    fontSize: '10px',
+    fontSize: '11px',
     width: '100%'
   },
   searchContainer: {
@@ -109,11 +124,10 @@ var _default = () => ({
     padding: '5px'
   },
   expandedDisplayButton: {
-    backgroundColor: '#477C90 !important',
+    backgroundColor: '#4D889E !important',
     color: 'white',
     width: 'calc(100% - 26px)',
     height: '30px',
-    marginTop: '5px',
     marginBottom: '5px',
     marginLeft: '6px',
     borderRadius: '5px',

package/dist/components/facet/FacetView.js

@@ -27,9 +27,7 @@ const FacetView = _ref => {
     facet,
     onClearFacetSection,
     onClearSliderSection,
-    CustomView,
-    autoComplete,
-    upload
+    CustomView
   } = _ref;
   const [expand, setExpand] = (0, _react.useState)(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
   const onExpandFacet = () => setExpand(!expand);
@@ -37,11 +35,13 @@ const FacetView = _ref => {
   /**
   * expand section incase of active local search
   */
-  (0, _react.useEffect)(() => {
-    if (autoComplete && autoComplete.length > 0 || upload && upload.length > 0) {
-      setExpand(true);
-    }
-  }, [autoComplete, upload]);
+  // 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 && item.isChecked);
+  const selectedItems = facetValues && facetValues.filter(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)), facet.type !== _Types.InputTypes.SLIDER && facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, facet.label)), 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: classes.sortGroup
+    className: facet.type === _Types.InputTypes.SLIDER ? classes.sortGroupSlider : 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"))), expand && /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
+  }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
     facet: facet,
     sortBy: sortBy
-  })), !expand && type === _Types.InputTypes.CHECKBOX && selectedItems.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
+  })), !expand && type === _Types.InputTypes.CHECKBOX && /*#__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,7 +82,11 @@ var _default = () => ({
     marginBottom: '5px',
     borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
-    marginLeft: '-5px'
+    marginLeft: '-4px',
+    display: 'flex',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start',
+    gap: '8px'
   },
   sortGroupIcon: {
     cursor: 'pointer',
@@ -112,10 +116,12 @@ var _default = () => ({
     cursor: 'pointer',
     fontFamily: 'Nunito',
     fontSize: '10px',
-    float: 'right',
-    marginRight: '10px',
-    marginTop: '5px'
+    marginRight: '19px',
+    marginLeft: 'auto'
+    // marginTop: '5px',
+    // float: 'right',
   },
+
   itemContainer: {}
 });
 exports.default = _default;

package/dist/components/facet/ReduxFacetView.js

@@ -10,14 +10,12 @@ 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 => {
-  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 mapStateToProps = (state) => ({
+//   autoComplete: state?.localFind?.autocomplete || [],
+//   upload: state?.localFind?.upload || [],
+// });
+
 const mapDispatchToProps = dispatch => ({
   onClearFacetSection: facet => {
     dispatch((0, _Actions.clearFacetSection)(facet));
@@ -26,5 +24,5 @@ const mapDispatchToProps = dispatch => ({
     dispatch((0, _Actions.clearSliderSection)(facet));
   }
 });
-var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxFacetView);
+var _default = (0, _reactRedux.connect)(null, mapDispatchToProps)(ReduxFacetView);
 exports.default = _default;

package/dist/components/facet/SearchFacetView.js

@@ -35,7 +35,7 @@ const searchItems = (items, searchText) => {
       const item = items[i];
       for (let j = 0; j < keyList.length; j += 1) {
         const key = keyList[j].trim();
-        if (key === '' || item.name.toUpperCase().includes(key)) {
+        if (key === '' || item.group.toUpperCase().includes(key)) {
           matchedItems.push(item);
           break;
         }
@@ -72,7 +72,7 @@ const SearchFacetView = _ref => {
     datafield,
     section
   } = facet;
-  const selectedItems = facetValues && facetValues.filter(item => item && item.isChecked);
+  const selectedItems = facetValues && facetValues.filter(item => item.isChecked);
   const displayFacet = _objectSpread({}, facet);
   displayFacet.facetValues = selectedItems;
   const isActiveFacet = [...selectedItems].length > 0;
@@ -87,10 +87,14 @@ 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,
+    facet: facet
+    // queryParams={queryParams}
+    ,
     open: open,
     onClose: () => setOpen(false)
   }), /*#__PURE__*/_react.default.createElement(_core.Accordion, {
@@ -109,7 +113,7 @@ const SearchFacetView = _ref => {
     className: (0, _clsx.default)(classes.subSectionSummaryText, {
       ["activeFacet".concat(facet.section)]: isActiveFacet
     })
-  }, facet.label)), facet.type !== _Types.InputTypes.SLIDER && facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, facet.label)), facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.NonSortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.NonSortGroupItem
@@ -168,14 +172,13 @@ const SearchFacetView = _ref => {
     onClick: () => {
       onSortChange(facet.datafield, _Sort.sortType.NUMERIC);
     }
-  }, "Sort by count")), expand && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SearchFilterItems.default, {
+  }, "Sort by count")), /*#__PURE__*/_react.default.createElement(_SearchFilterItems.default, {
     searchText: searchText,
     facet: facet,
     sortBy: sortBy
-  })))), !expand && type === _Types.InputTypes.CHECKBOX && selectedItems.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
+  }))), !expand && type === _Types.InputTypes.CHECKBOX && /*#__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,29 +10,36 @@ var _default = () => ({
     marginBottom: '5px',
     borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
-    marginLeft: '-5px'
+    marginLeft: '-4px',
+    display: 'flex',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start',
+    gap: '8px'
   },
   sortGroupIcon: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '12px',
-    marginLeft: '16px'
+    marginLeft: '24px'
   },
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
-    marginRight: '32px'
+    fontSize: '11px'
+    // marginRight: '32px',
   },
+
   sortGroupItemCounts: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
-    float: 'right',
-    marginRight: '10px',
-    marginTop: '5px'
+    fontSize: '11px',
+    marginRight: '19px',
+    marginLeft: 'auto'
+    // marginTop: '5px',
+    // float: 'right',
   },
+
   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,
-    searchText,
     sortBy,
+    searchText,
     onClearSection,
     onSortChange,
     classes

package/dist/components/inputs/ModalFilterStyle.js

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

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

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