@databiosphere/findable-ui 5.0.0 → 7.0.0

package/lib/components/Filter/components/FilterTag/filterTag.stories.js

@@ -1,22 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterTagStory = void 0;
-const react_1 = __importDefault(require("react"));
-const filterTag_1 = require("./filterTag");
-exports.default = {
+import React from "react";
+import { FilterTag } from "./filterTag";
+export default {
     argTypes: {
         label: { control: "text" },
         superseded: { control: "boolean" },
     },
-    component: filterTag_1.FilterTag,
+    component: FilterTag,
     title: "Components/Filter/FilterTag",
 };
-const FilterTagTemplate = (args) => (react_1.default.createElement(filterTag_1.FilterTag, Object.assign({}, args)));
-exports.FilterTagStory = FilterTagTemplate.bind({});
-exports.FilterTagStory.args = {
+const FilterTagTemplate = (args) => (React.createElement(FilterTag, { ...args }));
+export const FilterTagStory = FilterTagTemplate.bind({});
+FilterTagStory.args = {
     label: "Male",
     superseded: false,
 };

package/lib/components/Filter/components/FilterTag/filterTag.styles.js

@@ -1,11 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SupersededTag = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-exports.SupersededTag = (0, styled_1.default)(material_1.Chip) `
+import styled from "@emotion/styled";
+import { Chip } from "@mui/material";
+export const SupersededTag = styled(Chip) `
   background-color: ${({ theme }) => theme.palette.smoke.dark};
 `;

package/lib/components/Filter/components/FilterTags/filterTags.js

@@ -1,13 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+import { FilterTag as Tag } from "../FilterTag/filterTag";
+import { FilterTags as Tags } from "./filterTags.styles";
+export const FilterTags = ({ tags }) => {
+    return tags && tags.length ? (React.createElement(Tags, null, tags.map(({ label, onRemove, superseded }, t) => (React.createElement(Tag, { key: `${label}${t}`, label: label, onRemove: onRemove, superseded: superseded }))))) : null;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterTags = void 0;
-const react_1 = __importDefault(require("react"));
-const filterTag_1 = require("../FilterTag/filterTag");
-const filterTags_styles_1 = require("./filterTags.styles");
-const FilterTags = ({ tags }) => {
-    return tags && tags.length ? (react_1.default.createElement(filterTags_styles_1.FilterTags, null, tags.map(({ label, onRemove, superseded }, t) => (react_1.default.createElement(filterTag_1.FilterTag, { key: `${label}${t}`, label: label, onRemove: onRemove, superseded: superseded }))))) : null;
-};
-exports.FilterTags = FilterTags;

package/lib/components/Filter/components/FilterTags/filterTags.stories.js

@@ -1,28 +1,22 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterTagsStory = void 0;
-const react_1 = __importDefault(require("react"));
-const filterTags_1 = require("./filterTags");
-exports.default = {
+import React from "react";
+import { FilterTags } from "./filterTags";
+export default {
     argTypes: {
         tags: { control: { disable: true } },
     },
-    component: filterTags_1.FilterTags,
+    component: FilterTags,
     decorators: [
-        (Story) => (react_1.default.createElement("div", { style: { padding: "8px 12px 8px 16px", width: 264 } },
-            react_1.default.createElement(Story, null))),
+        (Story) => (React.createElement("div", { style: { padding: "8px 12px 8px 16px", width: 264 } },
+            React.createElement(Story, null))),
     ],
     title: "Components/Filter/FilterTags",
 };
-const FilterTagsTemplate = (args) => (react_1.default.createElement(filterTags_1.FilterTags, Object.assign({}, args)));
+const FilterTagsTemplate = (args) => (React.createElement(FilterTags, { ...args }));
 const onRemove = () => {
     // onRemove function
 };
-exports.FilterTagsStory = FilterTagsTemplate.bind({});
-exports.FilterTagsStory.args = {
+export const FilterTagsStory = FilterTagsTemplate.bind({});
+FilterTagsStory.args = {
     tags: [
         {
             label: "Normal",

package/lib/components/Filter/components/FilterTags/filterTags.styles.js

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterTags = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
-exports.FilterTags = styled_1.default.span `
+import styled from "@emotion/styled";
+import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
+export const FilterTags = styled.span `
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
@@ -17,7 +11,7 @@ exports.FilterTags = styled_1.default.span `
     margin-bottom: 0;
   }
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     padding: 0;
   }
 `;

package/lib/components/Filter/components/Filters/filters.d.ts

@@ -9,7 +9,7 @@ export interface CategoryFilter {
 export interface FiltersProps {
     categoryFilters: CategoryFilter[];
     closeAncestor?: () => void;
-    disabled: boolean;
+    disabled?: boolean;
     onFilter: OnFilterFn;
     trackFilterOpened?: TrackFilterOpenedFunction;
 }

package/lib/components/Filter/components/Filters/filters.js

@@ -1,37 +1,11 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Filters = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const useBreakpointHelper_1 = require("../../../../hooks/useBreakpointHelper");
-const useWindowResize_1 = require("../../../../hooks/useWindowResize");
-const breakpoints_1 = require("../../../../theme/common/breakpoints");
-const filter_1 = require("../Filter/filter");
-const filterTags_1 = require("../FilterTags/filterTags");
-const filters_styles_1 = require("./filters.styles");
+import { Divider } from "@mui/material";
+import React, { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
+import { useWindowResize } from "../../../../hooks/useWindowResize";
+import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
+import { Filter } from "../Filter/filter";
+import { FilterTags } from "../FilterTags/filterTags";
+import { CategoryViewsLabel, Filters as FilterList } from "./filters.styles";
 /**
  * Returns set of selected category tags with tag label (the selected metadata label) and corresponding Tag onRemove function.
  * @param categoryView - View model of category to display.
@@ -58,23 +32,22 @@ function buildSelectCategoryTags(categoryView, onFilter) {
  */
 function renderFilterTags(categoryView, onFilter) {
     const tags = buildSelectCategoryTags(categoryView, onFilter);
-    return react_1.default.createElement(filterTags_1.FilterTags, { tags: tags });
+    return React.createElement(FilterTags, { tags: tags });
 }
-const Filters = ({ categoryFilters, closeAncestor, disabled = false, onFilter, trackFilterOpened, }) => {
-    const isFilterDrawer = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.DOWN, breakpoints_1.DESKTOP_SM);
-    const { height: windowHeight } = (0, useWindowResize_1.useWindowResize)();
-    const filterListRef = (0, react_1.useRef)(null);
-    const [height, setHeight] = (0, react_1.useState)(0);
-    const isLabeled = (0, react_1.useMemo)(() => isCategoryViewsLabeled(categoryFilters), [categoryFilters]);
-    (0, react_1.useEffect)(() => {
+export const Filters = ({ categoryFilters, closeAncestor, disabled = false, onFilter, trackFilterOpened, }) => {
+    const isFilterDrawer = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
+    const { height: windowHeight } = useWindowResize();
+    const filterListRef = useRef(null);
+    const [height, setHeight] = useState(0);
+    const isLabeled = useMemo(() => isCategoryViewsLabeled(categoryFilters), [categoryFilters]);
+    useEffect(() => {
         setHeight(calculateListHeight(windowHeight, filterListRef.current));
     }, [windowHeight]);
-    return (react_1.default.createElement(filters_styles_1.Filters, { disabled: disabled, height: height, isBaseStyle: !isLabeled, ref: filterListRef }, categoryFilters.map(({ categoryViews, label }, i) => (react_1.default.createElement(react_1.Fragment, { key: i },
-        i !== 0 && react_1.default.createElement(material_1.Divider, null),
-        label && react_1.default.createElement(filters_styles_1.CategoryViewsLabel, null, label),
-        categoryViews.map((categoryView) => (react_1.default.createElement(filter_1.Filter, { key: categoryView.key, categorySection: label, categoryView: categoryView, closeAncestor: closeAncestor, isFilterDrawer: isFilterDrawer, onFilter: onFilter, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }))))))));
+    return (React.createElement(FilterList, { disabled: disabled, height: height, isBaseStyle: !isLabeled, ref: filterListRef }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
+        i !== 0 && React.createElement(Divider, null),
+        label && React.createElement(CategoryViewsLabel, null, label),
+        categoryViews.map((categoryView) => (React.createElement(Filter, { key: categoryView.key, categorySection: label, categoryView: categoryView, closeAncestor: closeAncestor, isFilterDrawer: isFilterDrawer, onFilter: onFilter, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }))))))));
 };
-exports.Filters = Filters;
 /**
  * Returns given height of filter list.
  * @param windowHeight - Window height.
@@ -82,8 +55,7 @@ exports.Filters = Filters;
  * @returns calculated height.
  */
 function calculateListHeight(windowHeight, filterListEl) {
-    var _a, _b;
-    return windowHeight - ((_b = (_a = filterListEl === null || filterListEl === void 0 ? void 0 : filterListEl.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.top) !== null && _b !== void 0 ? _b : 0);
+    return windowHeight - (filterListEl?.getBoundingClientRect()?.top ?? 0);
 }
 /**
  * Returns true if any category views are labelled.

package/lib/components/Filter/components/Filters/filters.stories.js

@@ -1,22 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FiltersStory = void 0;
-const react_1 = __importDefault(require("react"));
-const filterMenu_stories_1 = require("../FilterMenu/filterMenu.stories");
-const filters_1 = require("./filters");
-exports.default = {
+import React from "react";
+import { FilterMenuStory } from "../FilterMenu/filterMenu.stories";
+import { Filters } from "./filters";
+export default {
     argTypes: {
         categories: { control: { disable: true } },
         onFilter: { control: { disable: true } },
     },
-    component: filters_1.Filters,
+    component: Filters,
     decorators: [
-        (Story) => (react_1.default.createElement("div", { style: { width: 264 } },
-            react_1.default.createElement(Story, null))),
+        (Story) => (React.createElement("div", { style: { width: 264 } },
+            React.createElement(Story, null))),
     ],
     title: "Components/Filter/Filters",
 };
@@ -37,7 +30,7 @@ const defaultValues = [
         selected: false,
     },
 ];
-exports.FiltersStory = {
+export const FiltersStory = {
     args: {
         categoryFilters: [
             {
@@ -69,7 +62,7 @@ exports.FiltersStory = {
                         isDisabled: false,
                         key: "donorDisease",
                         label: "Donor Disease",
-                        values: ((_a = filterMenu_stories_1.FilterMenuStory.args) === null || _a === void 0 ? void 0 : _a.values) || defaultValues,
+                        values: FilterMenuStory.args?.values || defaultValues,
                     },
                     {
                         isDisabled: true,

package/lib/components/Filter/components/Filters/filters.styles.js

@@ -1,19 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CategoryViewsLabel = exports.Filters = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
-const colors_1 = require("../../../../styles/common/mixins/colors");
-const fonts_1 = require("../../../../styles/common/mixins/fonts");
-exports.Filters = (0, styled_1.default)("div", {
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
+import { inkLight, inkMain } from "../../../../styles/common/mixins/colors";
+import { textBody400, textBody500, } from "../../../../styles/common/mixins/fonts";
+export const Filters = styled("div", {
     shouldForwardProp: (prop) => prop !== "height" && prop !== "isBaseStyle",
 }) `
-  ${(props) => (props.isBaseStyle ? (0, fonts_1.textBody500)(props) : (0, fonts_1.textBody400)(props))};
-  color: ${(props) => (props.isBaseStyle ? (0, colors_1.inkMain)(props) : (0, colors_1.inkLight)(props))};
+  ${(props) => (props.isBaseStyle ? textBody500(props) : textBody400(props))};
+  color: ${(props) => (props.isBaseStyle ? inkMain(props) : inkLight(props))};
   height: ${({ height }) => height}px;
   margin: 8px 0;
   overflow: auto;
@@ -21,7 +15,7 @@ exports.Filters = (0, styled_1.default)("div", {
 
   // Filters are globally "disabled".
   ${({ disabled }) => disabled &&
-    (0, react_1.css) `
+    css `
       pointer-events: none;
     `};
 
@@ -29,18 +23,18 @@ exports.Filters = (0, styled_1.default)("div", {
     margin: 8px 0;
   }
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     height: unset;
     overflow: unset;
     padding: 0 12px 0 16px;
   }
 `;
-exports.CategoryViewsLabel = (0, styled_1.default)("div") `
-  ${fonts_1.textBody500};
-  color: ${colors_1.inkMain};
+export const CategoryViewsLabel = styled("div") `
+  ${textBody500};
+  color: ${inkMain};
   padding: 8px 16px;
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     padding: 8px 0;
   }
 `;

package/lib/components/Filter/components/HighlightedLabel/highlightedLabel.js

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HighlightedLabel = void 0;
-const react_1 = __importDefault(require("react"));
-const highlightedLabel_styles_1 = require("./highlightedLabel.styles");
-const HighlightedLabel = ({ label, ranges, }) => {
+import React from "react";
+import { MatchHighlight } from "./highlightedLabel.styles";
+export const HighlightedLabel = ({ label, ranges, }) => {
     const items = [];
     if (ranges) {
         ranges = ranges.slice().sort(({ start: a }, { start: b }) => a - b);
@@ -25,7 +19,7 @@ const HighlightedLabel = ({ label, ranges, }) => {
             const rightOpen = !rightChar || /\s/.test(rightChar);
             const matchItems = [
                 label.substring(prevIndex, start),
-                react_1.default.createElement(highlightedLabel_styles_1.MatchHighlight, { key: start, leftOpen: leftOpen, rightOpen: rightOpen }, label.substring(start, end)),
+                React.createElement(MatchHighlight, { key: start, leftOpen: leftOpen, rightOpen: rightOpen }, label.substring(start, end)),
             ];
             prevIndex = end;
             items.push(matchItems);
@@ -35,6 +29,5 @@ const HighlightedLabel = ({ label, ranges, }) => {
     else {
         items.push(label);
     }
-    return react_1.default.createElement("span", null, items);
+    return React.createElement("span", null, items);
 };
-exports.HighlightedLabel = HighlightedLabel;

package/lib/components/Filter/components/HighlightedLabel/highlightedLabel.styles.js

@@ -1,24 +1,18 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MatchHighlight = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.MatchHighlight = styled_1.default.mark `
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+export const MatchHighlight = styled.mark `
   background: ${({ theme }) => theme.palette.warning.light};
   color: inherit;
   padding: 2px 0;
 
   ${({ leftOpen }) => leftOpen &&
-    (0, react_1.css) `
+    css `
       margin-left: -2px;
       padding-left: 2px;
     `}
 
   ${({ rightOpen }) => rightOpen &&
-    (0, react_1.css) `
+    css `
       margin-right: -2px;
       padding-right: 2px;
     `}

package/lib/components/Filter/components/SearchAllFilters/common/constants.js

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NO_RESULTS_ITEM = exports.DIVIDER_ITEM = exports.DRAWER_SLOT_PROPS = exports.DRAWER_POPPER_PROPS = exports.DRAWER_PAPER_PROPS = exports.DEFAULT_SLOT_PROPS = exports.DEFAULT_POPPER_PROPS = exports.DEFAULT_PAPER_PROPS = exports.DIVIDER_HEIGHT = exports.DEFAULT_LIST_HEIGHT = void 0;
-const entites_1 = require("./entites");
-exports.DEFAULT_LIST_HEIGHT = 0;
-exports.DIVIDER_HEIGHT = 17;
-exports.DEFAULT_PAPER_PROPS = {
+import { ITEM_TYPE } from "./entites";
+export const DEFAULT_LIST_HEIGHT = 0;
+export const DIVIDER_HEIGHT = 17;
+export const DEFAULT_PAPER_PROPS = {
     sx: {
         width: 368,
     },
     variant: "menu",
 };
-exports.DEFAULT_POPPER_PROPS = {
+export const DEFAULT_POPPER_PROPS = {
     modifiers: [
         {
             name: "offset",
@@ -21,17 +18,17 @@ exports.DEFAULT_POPPER_PROPS = {
     ],
     placement: "bottom-start",
 };
-exports.DEFAULT_SLOT_PROPS = {
-    paper: exports.DEFAULT_PAPER_PROPS,
-    popper: exports.DEFAULT_POPPER_PROPS,
+export const DEFAULT_SLOT_PROPS = {
+    paper: DEFAULT_PAPER_PROPS,
+    popper: DEFAULT_POPPER_PROPS,
 };
-exports.DRAWER_PAPER_PROPS = {
+export const DRAWER_PAPER_PROPS = {
     elevation: 0,
     sx: {
         width: 312,
     },
 };
-exports.DRAWER_POPPER_PROPS = {
+export const DRAWER_POPPER_PROPS = {
     modifiers: [
         {
             name: "offset",
@@ -42,14 +39,14 @@ exports.DRAWER_POPPER_PROPS = {
     ],
     popperOptions: { strategy: "absolute" },
 };
-exports.DRAWER_SLOT_PROPS = {
-    paper: exports.DRAWER_PAPER_PROPS,
-    popper: exports.DRAWER_POPPER_PROPS,
+export const DRAWER_SLOT_PROPS = {
+    paper: DRAWER_PAPER_PROPS,
+    popper: DRAWER_POPPER_PROPS,
 };
-exports.DIVIDER_ITEM = {
-    type: entites_1.ITEM_TYPE.DIVIDER,
+export const DIVIDER_ITEM = {
+    type: ITEM_TYPE.DIVIDER,
 };
-exports.NO_RESULTS_ITEM = {
+export const NO_RESULTS_ITEM = {
     key: "noResults",
-    type: entites_1.ITEM_TYPE.NO_RESULTS,
+    type: ITEM_TYPE.NO_RESULTS,
 };

package/lib/components/Filter/components/SearchAllFilters/common/entites.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OVERFLOW_STYLE = exports.ITEM_TYPE = void 0;
-var ITEM_TYPE;
+export var ITEM_TYPE;
 (function (ITEM_TYPE) {
     ITEM_TYPE["CATEGORY"] = "CATEGORY";
     ITEM_TYPE["DIVIDER"] = "DIVIDER";
     ITEM_TYPE["NO_RESULTS"] = "NO_RESULTS";
     ITEM_TYPE["VALUE"] = "VALUE";
-})(ITEM_TYPE = exports.ITEM_TYPE || (exports.ITEM_TYPE = {}));
-var OVERFLOW_STYLE;
+})(ITEM_TYPE || (ITEM_TYPE = {}));
+export var OVERFLOW_STYLE;
 (function (OVERFLOW_STYLE) {
     OVERFLOW_STYLE["HIDDEN"] = "hidden";
     OVERFLOW_STYLE["NONE"] = "";
-})(OVERFLOW_STYLE = exports.OVERFLOW_STYLE || (exports.OVERFLOW_STYLE = {}));
+})(OVERFLOW_STYLE || (OVERFLOW_STYLE = {}));

package/lib/components/Filter/components/SearchAllFilters/common/utils.js

@@ -1,16 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setElementsOverflowStyle = void 0;
 /**
  * Sets overflow style for the given list of elements.
  * @param elements - Elements.
  * @param overflowStyle - Overflow style value.
  */
-function setElementsOverflowStyle(elements, overflowStyle) {
+export function setElementsOverflowStyle(elements, overflowStyle) {
     for (const element of elements) {
         if (element) {
             element.style.overflow = overflowStyle;
         }
     }
 }
-exports.setElementsOverflowStyle = setElementsOverflowStyle;

package/lib/components/Filter/components/SearchAllFilters/components/AutocompletePopper/autocompletePopper.styles.js

@@ -1,17 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutocompletePopper = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const breakpoints_1 = require("../../../../../../styles/common/mixins/breakpoints");
-const colors_1 = require("../../../../../../styles/common/mixins/colors");
-exports.AutocompletePopper = (0, styled_1.default)(material_1.Popper) `
-  ${breakpoints_1.mediaDesktopSmallDown} {
+import styled from "@emotion/styled";
+import { Popper as MPopper } from "@mui/material";
+import { mediaDesktopSmallDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { smokeLight } from "../../../../../../styles/common/mixins/colors";
+export const AutocompletePopper = styled(MPopper) `
+  ${mediaDesktopSmallDown} {
     .MuiPaper-root {
-      background-color: ${colors_1.smokeLight};
+      background-color: ${smokeLight};
 
       .MuiList-root {
         margin: 0;