@haniffalab/cherita-react 1.4.1 → 1.4.2-dev.2025-10-29.81a6b906

package/dist/esm/context/ZarrDataContext.js

@@ -1,6 +1,7 @@
-import React, { createContext, useContext } from "react";
-import { useFilter } from "../utils/Filter";
-import { useObsData, useObsmData, useXData } from "../utils/zarrData";
+import { createContext, useContext } from 'react';
+import { useFilter } from '../utils/Filter';
+import { useObsData, useObsmData, useXData } from '../utils/zarrData';
+import { jsx as _jsx } from "react/jsx-runtime";
 const ZarrDataContext = /*#__PURE__*/createContext(null);
 export function ZarrDataProvider(_ref) {
   let {
@@ -17,9 +18,10 @@ export function ZarrDataProvider(_ref) {
     serverError: obsmData.serverError || obsData.serverError || xData.serverError
   };
   useFilter(data);
-  return /*#__PURE__*/React.createElement(ZarrDataContext.Provider, {
-    value: data
-  }, children);
+  return /*#__PURE__*/_jsx(ZarrDataContext.Provider, {
+    value: data,
+    children: children
+  });
 }
 export function useZarrData() {
   return useContext(ZarrDataContext);

package/dist/esm/helpers/color-helper.js

@@ -1,6 +1,6 @@
-import { useCallback } from "react";
-import { COLORSCALES } from "../constants/colorscales";
-import { useSettings } from "../context/SettingsContext";
+import { useCallback } from 'react';
+import { COLORSCALES } from '../constants/colorscales';
+import { useSettings } from '../context/SettingsContext';
 const GRAY = [214, 212, 212];
 const parseHexColor = color => {
   const r = parseInt(color === null || color === void 0 ? void 0 : color.substring(1, 3), 16);
@@ -31,7 +31,7 @@ const computeColor = (colormap, value) => {
 };
 export const rgbToHex = color => {
   const [r, g, b] = color || [0, 0, 0, 0];
-  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 };
 export const useColor = () => {
   const settings = useSettings();
@@ -47,7 +47,7 @@ export const useColor = () => {
       colorEncoding = settings.colorEncoding,
       colorscale = null
     } = _ref;
-    const colormap = colorscale || COLORSCALES[categorical ? "Accent" : settings.controls.colorScale];
+    const colormap = colorscale || COLORSCALES[categorical ? 'Accent' : settings.controls.colorScale];
     if (colorEncoding) {
       if (grayOut) {
         // Mix color with gray manually instead of chroma.mix to get better performance with deck.gl

package/dist/esm/helpers/map-helper.js

@@ -1,5 +1,5 @@
-import { WebMercatorViewport } from "@deck.gl/core";
-import _ from "lodash";
+import { WebMercatorViewport } from '@deck.gl/core';
+import _ from 'lodash';
 export class MapHelper {
   fitBounds(coords) {
     let {

package/dist/esm/helpers/zarr-helper.js

@@ -3,9 +3,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { useCallback } from "react";
-import { useQueries, useQuery } from "@tanstack/react-query";
-import { ArrayNotFoundError, GroupNotFoundError, openArray } from "zarr";
+import { useCallback } from 'react';
+import { useQueries, useQuery } from '@tanstack/react-query';
+import { ArrayNotFoundError, GroupNotFoundError, openArray } from 'zarr';
 export const GET_OPTIONS = {
   concurrencyLimit: 10,
   // max number of concurrent requests (default 10)
@@ -22,7 +22,7 @@ export class ZarrHelper {
     const z = await openArray({
       store: url,
       path: path,
-      mode: "r"
+      mode: 'r'
     });
     return z;
   }
@@ -53,7 +53,7 @@ export const useZarr = function (_ref2) {
     isLoading: isPending = false,
     error: serverError = null
   } = useQuery(_objectSpread({
-    queryKey: ["zarr", url, path, s],
+    queryKey: ['zarr', url, path, s],
     queryFn: () => fetchDataFromZarr(url, path, s, options),
     retry: (failureCount, _ref3) => {
       let {
@@ -94,7 +94,7 @@ export const useMultipleZarr = function (inputs) {
     serverError = null
   } = useQueries({
     queries: inputs.map(input => _objectSpread({
-      queryKey: ["zarr", input.url, input.path, input.s],
+      queryKey: ['zarr', input.url, input.path, input.s],
       queryFn: () => fetchDataFromZarr(input.url, input.path, input.s, options),
       retry: (failureCount, _ref4) => {
         let {

package/dist/esm/index.js

@@ -1,22 +1,22 @@
-export { Dotplot } from "./components/dotplot/Dotplot";
-export { DotplotControls } from "./components/dotplot/DotplotControls";
-export { FullPage } from "./components/full-page/FullPage";
-export { Heatmap } from "./components/heatmap/Heatmap";
-export { HeatmapControls } from "./components/heatmap/HeatmapControls";
-export { Matrixplot } from "./components/matrixplot/Matrixplot";
-export { MatrixplotControls } from "./components/matrixplot/MatrixplotControls";
-export { ObsColsList } from "./components/obs-list/ObsList";
-export { ObsmKeysList } from "./components/obsm-list/ObsmList";
-export { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasVars } from "./components/offcanvas";
-export { Pseudospatial } from "./components/pseudospatial/Pseudospatial";
-export { Scatterplot } from "./components/scatterplot/Scatterplot";
-export { ScatterplotControls } from "./components/scatterplot/ScatterplotControls";
-export { SearchBar } from "./components/search-bar/SearchBar";
-export { Toolbar } from "./components/toolbar/Toolbar";
-export { VarNamesList } from "./components/var-list/VarList";
-export { Violin } from "./components/violin/Violin";
-export { ViolinControls } from "./components/violin/ViolinControls";
-export { COLORSCALES } from "./constants/colorscales";
-export { PLOT_TYPES, SELECTION_MODES, VIOLIN_MODES } from "./constants/constants";
-export { DatasetProvider } from "./context/DatasetContext";
-export { FilterProvider } from "./context/FilterContext";
+export { Dotplot } from './components/dotplot/Dotplot';
+export { DotplotControls } from './components/dotplot/DotplotControls';
+export { FullPage } from './components/full-page/FullPage';
+export { Heatmap } from './components/heatmap/Heatmap';
+export { HeatmapControls } from './components/heatmap/HeatmapControls';
+export { Matrixplot } from './components/matrixplot/Matrixplot';
+export { MatrixplotControls } from './components/matrixplot/MatrixplotControls';
+export { ObsColsList } from './components/obs-list/ObsList';
+export { ObsmKeysList } from './components/obsm-list/ObsmList';
+export { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasVars } from './components/offcanvas';
+export { Pseudospatial } from './components/pseudospatial/Pseudospatial';
+export { Scatterplot } from './components/scatterplot/Scatterplot';
+export { ScatterplotControls } from './components/scatterplot/ScatterplotControls';
+export { SearchBar } from './components/search-bar/SearchBar';
+export { Toolbar } from './components/toolbar/Toolbar';
+export { VarNamesList } from './components/var-list/VarList';
+export { Violin } from './components/violin/Violin';
+export { ViolinControls } from './components/violin/ViolinControls';
+export { COLORSCALES } from './constants/colorscales';
+export { PLOT_TYPES, SELECTION_MODES, VIOLIN_MODES } from './constants/constants';
+export { DatasetProvider } from './context/DatasetContext';
+export { FilterProvider } from './context/FilterContext';

package/dist/esm/utils/Filter.js

@@ -1,9 +1,10 @@
-import { useEffect, useCallback, useMemo } from "react";
-import { booleanPointInPolygon, point } from "@turf/turf";
-import _ from "lodash";
-import { COLOR_ENCODINGS, OBS_TYPES } from "../constants/constants";
-import { useFilteredDataDispatch } from "../context/FilterContext";
-import { useSettings } from "../context/SettingsContext";
+import { useEffect, useCallback, useMemo } from 'react';
+import { booleanPointInPolygon, point } from '@turf/turf';
+import _ from 'lodash';
+import { useSelectedObs } from './Resolver';
+import { COLOR_ENCODINGS, OBS_TYPES } from '../constants/constants';
+import { useFilteredDataDispatch } from '../context/FilterContext';
+import { useSettings } from '../context/SettingsContext';
 const EPSILON = 1e-6;
 const isInBins = (v, binEdges, indices) => {
   const lastEdge = _.last(binEdges);
@@ -29,9 +30,14 @@ const isInValues = (omit, value) => {
   return !_.includes(omit, value);
 };
 export const useFilter = data => {
-  var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3, _settings$selectedObs4, _settings$selectedObs7, _settings$selectedObs8;
+  var _selectedObs$omit, _selectedObs$bins2;
   const settings = useSettings();
   const filterDataDispatch = useFilteredDataDispatch();
+  const selectedObs = useSelectedObs();
+  const omitCodes = _.map((selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit) || [], o => {
+    var _selectedObs$codes;
+    return selectedObs === null || selectedObs === void 0 || (_selectedObs$codes = selectedObs.codes) === null || _selectedObs$codes === void 0 ? void 0 : _selectedObs$codes[o];
+  });
   const {
     obsmData,
     xData,
@@ -39,26 +45,25 @@ export const useFilter = data => {
     isPending,
     serverError
   } = data;
-  const isCategorical = ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === OBS_TYPES.CATEGORICAL || ((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.type) === OBS_TYPES.BOOLEAN;
-  const isContinuous = ((_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.type) === OBS_TYPES.CONTINUOUS;
-  const sliceByObs = settings.colorEncoding === COLOR_ENCODINGS.OBS && !!((_settings$selectedObs4 = settings.selectedObs) !== null && _settings$selectedObs4 !== void 0 && _settings$selectedObs4.omit.length) || settings.sliceBy.obs;
+  const isCategorical = (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === OBS_TYPES.CATEGORICAL || (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === OBS_TYPES.BOOLEAN;
+  const isContinuous = (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === OBS_TYPES.CONTINUOUS;
+  const sliceByObs = settings.colorEncoding === COLOR_ENCODINGS.OBS && !!(selectedObs !== null && selectedObs !== void 0 && (_selectedObs$omit = selectedObs.omit) !== null && _selectedObs$omit !== void 0 && _selectedObs$omit.length) || settings.sliceBy.obs;
   const isInObsSlice = useCallback((index, values) => {
     let inSlice = true;
     if (values && sliceByObs) {
       if (isCategorical) {
-        var _settings$selectedObs5;
-        inSlice &= isInValues((_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.omit, values[index]);
+        inSlice &= isInValues(omitCodes, values[index]);
       } else if (isContinuous) {
         if (isNaN(values[index])) {
-          var _settings$selectedObs6;
-          inSlice &= isInValues((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.omit, -1);
+          inSlice &= isInValues(omitCodes, -1);
         } else {
-          inSlice &= isInBins(values[index], settings.selectedObs.bins.binEdges, _.without(settings.selectedObs.omit, -1));
+          var _selectedObs$bins;
+          inSlice &= isInBins(values[index], selectedObs === null || selectedObs === void 0 || (_selectedObs$bins = selectedObs.bins) === null || _selectedObs$bins === void 0 ? void 0 : _selectedObs$bins.binEdges, _.without(omitCodes, -1));
         }
       }
     }
     return inSlice;
-  }, [(_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 || (_settings$selectedObs7 = _settings$selectedObs7.bins) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.binEdges, (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.omit, isCategorical, isContinuous, sliceByObs]);
+  }, [sliceByObs, isCategorical, isContinuous, omitCodes, selectedObs === null || selectedObs === void 0 || (_selectedObs$bins2 = selectedObs.bins) === null || _selectedObs$bins2 === void 0 ? void 0 : _selectedObs$bins2.binEdges]);
   const isInPolygonsSlice = useCallback((index, positions) => {
     let inSlice = true;
     if (settings.sliceBy.polygons && positions) {
@@ -139,7 +144,7 @@ export const useFilter = data => {
   useEffect(() => {
     if (!isPending && !serverError) {
       filterDataDispatch({
-        type: "set.obs.indices",
+        type: 'set.obs.indices',
         indices: isSliced ? filteredIndices : null,
         valueMin: valueMin,
         valueMax: valueMax,

package/dist/esm/utils/Histogram.js

@@ -1,8 +1,8 @@
-import React from "react";
-import { SparkLineChart, mangoFusionPalette, blueberryTwilightPalette } from "@mui/x-charts";
-import _ from "lodash";
-import { LoadingLinear } from "./LoadingIndicators";
-import { formatNumerical, FORMATS } from "./string";
+import { SparkLineChart, mangoFusionPalette, blueberryTwilightPalette } from '@mui/x-charts';
+import _ from 'lodash';
+import { LoadingLinear } from './LoadingIndicators';
+import { formatNumerical, FORMATS } from './string';
+import { jsx as _jsx } from "react/jsx-runtime";
 export function Histogram(_ref) {
   var _data$bin_edges;
   let {
@@ -10,36 +10,38 @@ export function Histogram(_ref) {
     isPending,
     altColor = false
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "feature-histogram-container"
-  }, isPending ? /*#__PURE__*/React.createElement(LoadingLinear, null) : data ? /*#__PURE__*/React.createElement("div", {
-    className: "feature-histogram m-1"
-  }, /*#__PURE__*/React.createElement(SparkLineChart, {
-    plotType: "bar",
-    data: data.log10,
-    margin: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0
-    },
-    colors: altColor ? mangoFusionPalette : blueberryTwilightPalette,
-    showHighlight: true,
-    showTooltip: true,
-    valueFormatter: (v, _ref2) => {
-      let {
-        dataIndex
-      } = _ref2;
-      return "".concat(formatNumerical(data.hist[dataIndex]));
-    },
-    xAxis: {
-      data: _.range((_data$bin_edges = data.bin_edges) === null || _data$bin_edges === void 0 ? void 0 : _data$bin_edges.length) || null,
-      valueFormatter: v => "Bin [".concat(formatNumerical(data.bin_edges[v][0], FORMATS.EXPONENTIAL), ", ").concat(formatNumerical(data.bin_edges[v][1], FORMATS.EXPONENTIAL)).concat(v === data.bin_edges.length - 1 ? "]" : ")")
-    },
-    slotProps: {
-      popper: {
-        className: "feature-histogram-tooltip"
-      }
-    }
-  })) : null);
+  return /*#__PURE__*/_jsx("div", {
+    className: "feature-histogram-container",
+    children: isPending ? /*#__PURE__*/_jsx(LoadingLinear, {}) : data ? /*#__PURE__*/_jsx("div", {
+      className: "feature-histogram m-1",
+      children: /*#__PURE__*/_jsx(SparkLineChart, {
+        plotType: "bar",
+        data: data.log10,
+        margin: {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0
+        },
+        colors: altColor ? mangoFusionPalette : blueberryTwilightPalette,
+        showHighlight: true,
+        showTooltip: true,
+        valueFormatter: (v, _ref2) => {
+          let {
+            dataIndex
+          } = _ref2;
+          return "".concat(formatNumerical(data.hist[dataIndex]));
+        },
+        xAxis: {
+          data: _.range((_data$bin_edges = data.bin_edges) === null || _data$bin_edges === void 0 ? void 0 : _data$bin_edges.length) || null,
+          valueFormatter: v => "Bin [".concat(formatNumerical(data.bin_edges[v][0], FORMATS.EXPONENTIAL), ", ").concat(formatNumerical(data.bin_edges[v][1], FORMATS.EXPONENTIAL)).concat(v === data.bin_edges.length - 1 ? ']' : ')')
+        },
+        slotProps: {
+          popper: {
+            className: 'feature-histogram-tooltip'
+          }
+        }
+      })
+    }) : null
+  });
 }

package/dist/esm/utils/ImageViewer.js

@@ -1,18 +1,19 @@
-import React, { useState } from "react";
-import { Alert } from "react-bootstrap";
+import { useState } from 'react';
+import { Alert } from 'react-bootstrap';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 export const ImageViewer = _ref => {
   let {
     src,
     alt,
-    className = "img-fluid"
+    className = 'img-fluid'
   } = _ref;
   const [error, setError] = useState(false);
   const handleError = () => {
-    console.error("Error loading image from src:", src);
+    console.error('Error loading image from src:', src);
     setError(true);
   };
   if (!error) {
-    return /*#__PURE__*/React.createElement("img", {
+    return /*#__PURE__*/_jsx("img", {
       src: src,
       alt: alt,
       className: className,
@@ -20,8 +21,11 @@ export const ImageViewer = _ref => {
       onError: handleError
     });
   } else {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Alert, {
-      variant: "danger"
-    }, "Failed to load image"));
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsx(Alert, {
+        variant: "danger",
+        children: "Failed to load image"
+      })
+    });
   }
 };

package/dist/esm/utils/Legend.js

@@ -1,18 +1,19 @@
-import React, { useMemo } from "react";
-import { faDroplet } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import _ from "lodash";
-import { formatNumerical, FORMATS } from "./string";
-import { COLOR_ENCODINGS } from "../constants/constants";
-import { useSettings } from "../context/SettingsContext";
-import { rgbToHex, useColor } from "../helpers/color-helper";
+import { useMemo } from 'react';
+import { faDroplet } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import _ from 'lodash';
+import { formatNumerical, FORMATS } from './string';
+import { COLOR_ENCODINGS } from '../constants/constants';
+import { useSettings } from '../context/SettingsContext';
+import { rgbToHex, useColor } from '../helpers/color-helper';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Legend(_ref) {
   let {
     isCategorical = false,
     min = 0,
     max = 1,
     colorscale = null,
-    addText = ""
+    addText = ''
   } = _ref;
   const settings = useSettings();
   const {
@@ -25,41 +26,48 @@ export function Legend(_ref) {
         categorical: isCategorical,
         colorscale: colorscale
       }));
-      return /*#__PURE__*/React.createElement("span", {
-        key: i,
+      return /*#__PURE__*/_jsx("span", {
         className: "grad-step",
         style: {
           backgroundColor: color
         }
-      });
+      }, i);
     });
   }, [colorscale, getColor, isCategorical]);
   if (settings.colorEncoding && !isCategorical) {
     var _settings$selectedVar, _settings$selectedObs;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "cherita-legend"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "gradient"
-    }, /*#__PURE__*/React.createElement("p", {
-      className: "small m-0 p-0"
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faDroplet,
-      className: "me-1"
-    }), (settings.colorEncoding === COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : (_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.name) + addText), spanList, /*#__PURE__*/React.createElement("span", {
-      className: "domain-min"
-    }, formatNumerical(min, FORMATS.EXPONENTIAL)), /*#__PURE__*/React.createElement("span", {
-      className: "domain-med"
-    }, formatNumerical((min + max) * 0.5, FORMATS.EXPONENTIAL)), /*#__PURE__*/React.createElement("span", {
-      className: "domain-max"
-    }, formatNumerical(max, FORMATS.EXPONENTIAL))));
+    return /*#__PURE__*/_jsx("div", {
+      className: "cherita-legend",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "gradient",
+        children: [/*#__PURE__*/_jsxs("p", {
+          className: "small m-0 p-0",
+          children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+            icon: faDroplet,
+            className: "me-1"
+          }), (settings.colorEncoding === COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : (_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.name) + addText]
+        }), spanList, /*#__PURE__*/_jsx("span", {
+          className: "domain-min",
+          children: formatNumerical(min, FORMATS.EXPONENTIAL)
+        }), /*#__PURE__*/_jsx("span", {
+          className: "domain-med",
+          children: formatNumerical((min + max) * 0.5, FORMATS.EXPONENTIAL)
+        }), /*#__PURE__*/_jsx("span", {
+          className: "domain-max",
+          children: formatNumerical(max, FORMATS.EXPONENTIAL)
+        })]
+      })
+    });
   } else if (settings.colorEncoding === COLOR_ENCODINGS.OBS && settings.selectedObs) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "cherita-legend categorical"
-    }, /*#__PURE__*/React.createElement("p", {
-      className: "legend-text text-end m-0 p-0"
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faDroplet,
-      className: "me-2"
-    }), settings.selectedObs.name));
+    return /*#__PURE__*/_jsx("div", {
+      className: "cherita-legend categorical",
+      children: /*#__PURE__*/_jsxs("p", {
+        className: "legend-text text-end m-0 p-0",
+        children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faDroplet,
+          className: "me-2"
+        }), settings.selectedObs.name]
+      })
+    });
   }
 }

package/dist/esm/utils/LoadingIndicators.js

@@ -1,22 +1,25 @@
-import React from 'react';
-import { Box, CircularProgress, LinearProgress } from "@mui/material";
+import { Box, CircularProgress, LinearProgress } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const LoadingSpinner = _ref => {
   let {
     text = null,
     disableShrink = false
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "loading-spinner"
-  }, /*#__PURE__*/React.createElement(CircularProgress, {
-    disableShrink: disableShrink
-  }), (text === null || text === void 0 ? void 0 : text.length) && /*#__PURE__*/React.createElement("span", {
-    className: "visually-hidden"
-  }, text));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "loading-spinner",
+    children: [/*#__PURE__*/_jsx(CircularProgress, {
+      disableShrink: disableShrink
+    }), (text === null || text === void 0 ? void 0 : text.length) && /*#__PURE__*/_jsx("span", {
+      className: "visually-hidden",
+      children: text
+    })]
+  });
 };
 export const LoadingLinear = () => {
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     sx: {
-      width: "100%"
-    }
-  }, /*#__PURE__*/React.createElement(LinearProgress, null));
+      width: '100%'
+    },
+    children: /*#__PURE__*/_jsx(LinearProgress, {})
+  });
 };