react-science 0.19.2 → 0.20.0

package/lib/app/about/AboutDialogToolbarButton.js

@@ -1,19 +1,19 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AboutDialogToolbarButton = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-const react_1 = require("@emotion/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
 const index_1 = require("../../components/index");
-const aboutDialogToolbarButtonCss = {
-    root: (0, react_1.css) `
-    max-width: 600px;
-    padding: 10px;
-  `,
-};
+const ModalBody = styled_1.default.div `
+  max-width: 600px;
+  padding: 10px;
+`;
 function AboutDialogToolbarButton(props) {
     const { name, icon, body } = props;
     const [isOpenDialog, openDialog, closeDialog] = (0, index_1.useOnOff)(false);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.Toolbar.Item, { titleOrientation: "horizontal", title: `About ${name}`, onClick: openDialog, children: icon }), (0, jsx_runtime_1.jsxs)(index_1.Modal, { isOpen: isOpenDialog, onRequestClose: closeDialog, children: [(0, jsx_runtime_1.jsx)(index_1.Modal.Header, { children: name }), (0, jsx_runtime_1.jsx)(index_1.Modal.Body, { children: (0, jsx_runtime_1.jsx)("div", { css: aboutDialogToolbarButtonCss.root, children: body }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.Toolbar.Item, { titleOrientation: "horizontal", title: `About ${name}`, onClick: openDialog, children: icon }), (0, jsx_runtime_1.jsxs)(index_1.Modal, { isOpen: isOpenDialog, onRequestClose: closeDialog, children: [(0, jsx_runtime_1.jsx)(index_1.Modal.Header, { children: name }), (0, jsx_runtime_1.jsx)(index_1.Modal.Body, { children: (0, jsx_runtime_1.jsx)(ModalBody, { children: body }) })] })] }));
 }
 exports.AboutDialogToolbarButton = AboutDialogToolbarButton;

package/lib/app/explorer/MeasurementExplorer.js

@@ -1,12 +1,33 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MeasurementExplorer = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-const react_1 = require("@emotion/react");
-const react_2 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("react");
 const fa_1 = require("react-icons/fa");
 const index_1 = require("../helpers/index");
+const MeasurementExplorerRoot = styled_1.default.div `
+  display: flex;
+  flex-direction: column;
+`;
+const MeasurementExplorerContent = styled_1.default.div `
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 20px;
+`;
+const MeasurementExplorerSelect = styled_1.default.select `
+  cursor: pointer;
+  border: 1px solid black;
+  padding: 1px;
+  margin-left: 2px;
+`;
+const MeasurementExplorerAction = styled_1.default.div `
+  padding: 1px;
+  display: flex;
+`;
 function MeasurementExplorer(props) {
     const { measurement: { data }, width = '100%', height = '100%', } = props;
     function defaultInfo(dataIndex) {
@@ -17,7 +38,7 @@ function MeasurementExplorer(props) {
             yVariableName: varNames.includes('y') ? 'y' : varNames[1],
         };
     }
-    const [info, setInfo] = (0, react_2.useState)({
+    const [info, setInfo] = (0, react_1.useState)({
         flipHorizontalAxis: false,
         ...defaultInfo(0),
     });
@@ -40,19 +61,7 @@ function MeasurementExplorer(props) {
             return null;
         });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { width, height }, css: (0, react_1.css) `
-        display: flex;
-        flex-direction: column;
-      `, children: [(0, jsx_runtime_1.jsxs)("div", { css: (0, react_1.css) `
-          display: flex;
-          justify-content: space-around;
-          margin-bottom: 20px;
-        `, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { children: "dataIndex: " }), (0, jsx_runtime_1.jsx)("select", { css: (0, react_1.css) `
-              cursor: pointer;
-              border: 1px solid black;
-              padding: 1px;
-              margin-left: 2px;
-            `, onChange: ({ target }) => {
+    return ((0, jsx_runtime_1.jsxs)(MeasurementExplorerRoot, { style: { width, height }, children: [(0, jsx_runtime_1.jsxs)(MeasurementExplorerContent, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { children: "dataIndex: " }), (0, jsx_runtime_1.jsx)(MeasurementExplorerSelect, { onChange: ({ target }) => {
                                     const value = Number(target.value);
                                     if (value !== undefined && !Number.isNaN(value)) {
                                         setInfo(({ flipHorizontalAxis }) => ({
@@ -62,42 +71,26 @@ function MeasurementExplorer(props) {
                                     }
                                 }, children: data.map((d, i) => (
                                 // eslint-disable-next-line react/no-array-index-key
-                                (0, jsx_runtime_1.jsx)("option", { value: i, children: i }, i))) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { children: "xVariable: " }), (0, jsx_runtime_1.jsx)("select", { css: (0, react_1.css) `
-              cursor: pointer;
-              border: 1px solid black;
-              padding: 1px;
-              margin-left: 2px;
-            `, onChange: ({ target }) => {
+                                (0, jsx_runtime_1.jsx)("option", { value: i, children: i }, i))) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { children: "xVariable: " }), (0, jsx_runtime_1.jsx)(MeasurementExplorerSelect, { onChange: ({ target }) => {
                                     const value = target.value;
                                     if (value) {
                                         setInfo((info) => ({ ...info, xVariableName: value }));
                                     }
-                                }, value: info.xVariableName, children: dropdownVariables('x') })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(fa_1.FaExchangeAlt, { css: (0, react_1.css) `
-              margin-top: 2px;
-              cursor: pointer;
-            `, size: "20", onClick: () => setInfo(({ xVariableName, yVariableName, ...info }) => ({
+                                }, value: info.xVariableName, children: dropdownVariables('x') })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(fa_1.FaExchangeAlt, { style: { marginTop: 2, cursor: 'pointer' }, size: "20", onClick: () => setInfo(({ xVariableName, yVariableName, ...info }) => ({
                                 ...info,
                                 xVariableName: yVariableName,
                                 yVariableName: xVariableName,
-                            })) }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { children: "yVariable :" }), (0, jsx_runtime_1.jsx)("select", { css: (0, react_1.css) `
-              cursor: pointer;
-              border: 1px solid black;
-              padding: 1px;
-              margin-left: 2px;
-            `, onChange: ({ target }) => {
+                            })) }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { children: "yVariable :" }), (0, jsx_runtime_1.jsx)(MeasurementExplorerSelect, { onChange: ({ target }) => {
                                     const value = target.value;
                                     if (value) {
                                         setInfo((info) => ({ ...info, yVariableName: value }));
                                     }
-                                }, value: info.yVariableName, children: dropdownVariables('y') })] }), (0, jsx_runtime_1.jsxs)("div", { css: (0, react_1.css) `
-            padding: 1px;
-            display: flex;
-          `, children: ["Flip horizontal axis:", (0, jsx_runtime_1.jsx)(fa_1.FaArrowsAltH, { css: (0, react_1.css) `
-              cursor: pointer;
-              border: 1px solid black;
-              padding: 1px;
-              margin-left: 2px;
-            `, size: "28", onClick: () => setInfo(({ flipHorizontalAxis, ...other }) => ({
+                                }, value: info.yVariableName, children: dropdownVariables('y') })] }), (0, jsx_runtime_1.jsxs)(MeasurementExplorerAction, { children: ["Flip horizontal axis:", (0, jsx_runtime_1.jsx)(fa_1.FaArrowsAltH, { style: {
+                                    cursor: 'pointer',
+                                    border: '1px solid black',
+                                    padding: 1,
+                                    marginLeft: 2,
+                                }, size: "28", onClick: () => setInfo(({ flipHorizontalAxis, ...other }) => ({
                                     flipHorizontalAxis: !flipHorizontalAxis,
                                     ...other,
                                 })) })] })] }), (0, jsx_runtime_1.jsx)(index_1.MeasurementPlot, { ...props, ...info })] }));

package/lib/app/helpers/react-plot.js

@@ -1,16 +1,26 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BasicComponent = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-const react_1 = require("@emotion/react");
-const react_2 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("react");
 const react_d3_utils_1 = require("react-d3-utils");
 const react_plot_1 = require("react-plot");
+const BasicComponentRoot = styled_1.default.div `
+  user-drag: none;
+  -webkit-user-drag: none;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+`;
 function BasicComponent(props) {
     const { children, measurement, dataIndex = 0, xVariableName = 'x', yVariableName = 'y', width = '100%', height = '100%', zoom = 'horizontal', wheelZoom = 'vertical', crossHair = true, showHorizontalAxis = true, showVerticalAxis = true, showHorizontalGrid = true, showVerticalGrid = true, flipHorizontalAxis = false, } = props;
     const { info: { title }, data, } = measurement;
-    const { x, y } = (0, react_2.useMemo)(() => {
+    const { x, y } = (0, react_1.useMemo)(() => {
         const { variables } = data[dataIndex];
         const { [xVariableName]: x, [yVariableName]: y } = variables;
         if (x === undefined || y === undefined) {
@@ -35,13 +45,6 @@ function BasicComponent(props) {
         disabled: !crossHair,
     });
     (0, react_plot_1.usePan)();
-    return ((0, jsx_runtime_1.jsx)("div", { style: { width, height }, css: (0, react_1.css) `
-        user-drag: none;
-        -webkit-user-drag: none;
-        user-select: none;
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-      `, children: (0, jsx_runtime_1.jsx)(react_d3_utils_1.ResponsiveChart, { width: width, height: height, children: ({ width, height }) => ((0, jsx_runtime_1.jsxs)(react_plot_1.Plot, { width: width, height: height, children: [(0, jsx_runtime_1.jsx)(react_plot_1.Heading, { title: title }), children, (0, jsx_runtime_1.jsxs)(react_plot_1.Annotations, { children: [rectZoom.annotations, axisZoom.annotations, crossHairAnnot.annotations] }), (0, jsx_runtime_1.jsx)(react_plot_1.Axis, { hidden: !showHorizontalAxis, displayPrimaryGridLines: showVerticalGrid, flip: flipHorizontalAxis, position: "bottom", label: `${x.label}${x.units ? `(${x.units})` : ''}` }), (0, jsx_runtime_1.jsx)(react_plot_1.Axis, { hidden: !showVerticalAxis, displayPrimaryGridLines: showHorizontalGrid, position: "left", label: `${y.label}${y.units ? `(${y.units})` : ''}`, paddingStart: "10", paddingEnd: "10" })] })) }) }));
+    return ((0, jsx_runtime_1.jsx)(BasicComponentRoot, { style: { width, height }, children: (0, jsx_runtime_1.jsx)(react_d3_utils_1.ResponsiveChart, { width: width, height: height, children: ({ width, height }) => ((0, jsx_runtime_1.jsxs)(react_plot_1.Plot, { width: width, height: height, children: [(0, jsx_runtime_1.jsx)(react_plot_1.Heading, { title: title }), children, (0, jsx_runtime_1.jsxs)(react_plot_1.Annotations, { children: [rectZoom.annotations, axisZoom.annotations, crossHairAnnot.annotations] }), (0, jsx_runtime_1.jsx)(react_plot_1.Axis, { hidden: !showHorizontalAxis, displayPrimaryGridLines: showVerticalGrid, flip: flipHorizontalAxis, position: "bottom", label: `${x.label}${x.units ? `(${x.units})` : ''}` }), (0, jsx_runtime_1.jsx)(react_plot_1.Axis, { hidden: !showVerticalAxis, displayPrimaryGridLines: showHorizontalGrid, position: "left", label: `${y.label}${y.units ? `(${y.units})` : ''}`, paddingStart: "10", paddingEnd: "10" })] })) }) }));
 }
 exports.BasicComponent = BasicComponent;

package/lib/app/kinds/iv/plot-view/IvPlotView.js

@@ -4,26 +4,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IvPlotView = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-const react_1 = require("@emotion/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
 const fa_1 = require("react-icons/fa");
 const react_plot_1 = require("react-plot");
 const index_1 = require("../../../../app-data/index");
 const index_2 = require("../../../../components/index");
 const IvMeasurementsPlot_1 = __importDefault(require("./IvMeasurementsPlot"));
 const IvPlotVariablesSelector_1 = __importDefault(require("./IvPlotVariablesSelector"));
+const IvPlotRoot = styled_1.default.div `
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+`;
+const PlotRoot = styled_1.default.div `
+  padding: 5px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`;
 function IvPlotView() {
-    return ((0, jsx_runtime_1.jsxs)("div", { css: (0, react_1.css) `
-        display: flex;
-        flex-direction: row;
-        height: 100%;
-      `, children: [(0, jsx_runtime_1.jsx)(VerticalToolbar, {}), (0, jsx_runtime_1.jsxs)("div", { css: (0, react_1.css) `
-          padding: 5px;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-        `, children: [(0, jsx_runtime_1.jsx)(react_plot_1.PlotController, { children: (0, jsx_runtime_1.jsx)(IvMeasurementsPlot_1.default, {}) }), (0, jsx_runtime_1.jsx)(IvPlotVariablesSelector_1.default, {})] })] }));
+    return ((0, jsx_runtime_1.jsxs)(IvPlotRoot, { children: [(0, jsx_runtime_1.jsx)(VerticalToolbar, {}), (0, jsx_runtime_1.jsxs)(PlotRoot, { children: [(0, jsx_runtime_1.jsx)(react_plot_1.PlotController, { children: (0, jsx_runtime_1.jsx)(IvMeasurementsPlot_1.default, {}) }), (0, jsx_runtime_1.jsx)(IvPlotVariablesSelector_1.default, {})] })] }));
 }
 exports.IvPlotView = IvPlotView;
 function VerticalToolbar() {

package/lib/app/panels/measurements/MeasurementCheckbox.js

@@ -1,11 +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.MeasurementCheckbox = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-const react_1 = require("@emotion/react");
-const react_2 = require("react");
-const checkboxCss = (0, react_1.css) `
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("react");
+const InputMeasurementCheckBox = styled_1.default.input `
   color: #6366f1;
   border-color: #d1d5db;
   border-radius: 0.25rem;
@@ -15,12 +17,12 @@ const checkboxCss = (0, react_1.css) `
 `;
 function MeasurementCheckbox(props) {
     const { checked, onSelectCheckbox, indeterminate } = props;
-    const ref = (0, react_2.useRef)(null);
-    (0, react_2.useLayoutEffect)(() => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
         if (ref.current && indeterminate !== undefined) {
             ref.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    return ((0, jsx_runtime_1.jsx)("input", { css: checkboxCss, type: "checkbox", checked: checked, onChange: onSelectCheckbox, ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(InputMeasurementCheckBox, { type: "checkbox", checked: checked, onChange: onSelectCheckbox, ref: ref }));
 }
 exports.MeasurementCheckbox = MeasurementCheckbox;

package/lib/app/panels/measurements/MeasurementColorPreview.js

@@ -1,27 +1,29 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-const react_1 = require("@emotion/react");
-const react_2 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("react");
 const index_1 = require("../../../app-data/index");
 const index_2 = require("../../../components/index");
 const Portal_1 = require("../../../components/root-layout/Portal");
-const colorPreviewCss = (0, react_1.css) `
+const ColorPreviewButton = styled_1.default.button `
   width: 1em;
   height: 1em;
 `;
 function MeasurementColorPreview(props) {
     const { measurementId, kind, color } = props;
     const dispatch = (0, index_1.useAppDispatch)();
-    const ref = (0, react_2.useRef)(null);
+    const ref = (0, react_1.useRef)(null);
     const [isOpened, , close, toggle] = (0, index_2.useOnOff)(false);
     const { setReferenceElement, setPopperElement, popperProps } = (0, index_2.useModifiedPopper)({
         placement: 'bottom-start',
         offset: 6,
     });
     (0, index_2.useOnClickOutside)(ref, close);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", ref: setReferenceElement, css: colorPreviewCss, onClick: toggle, children: (0, jsx_runtime_1.jsx)(index_2.ColorPreview, { color: color }) }), isOpened && ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: (div) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorPreviewButton, { type: "button", ref: setReferenceElement, onClick: toggle, children: (0, jsx_runtime_1.jsx)(index_2.ColorPreview, { color: color }) }), isOpened && ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: (div) => {
                         setPopperElement(div);
                         ref.current = div;
                     }, ...popperProps, children: color.kind === 'fixed' ? ((0, jsx_runtime_1.jsx)(FixedColorPicker, { color: color.color, onChange: (newColor) => dispatch({

package/lib/app/panels/measurements/MeasurementsTable.js

@@ -27,87 +27,76 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MeasurementsTable = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-const react_1 = require("@emotion/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
 const fa_1 = require("react-icons/fa");
 const index_1 = require("../../../app-data/index");
 const index_2 = require("../../../components/index");
 const MeasurementCheckbox_1 = require("./MeasurementCheckbox");
 const MeasurementColorPreview_1 = __importDefault(require("./MeasurementColorPreview"));
 const MeasurementVisibilityToggle_1 = __importStar(require("./MeasurementVisibilityToggle"));
-const styles = {
-    root: (0, react_1.css) `
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    border-collapse: collapse;
-    table-layout: fixed;
-  `,
-    th: (0, react_1.css) `
-    border-bottom-width: 1px;
-    font-weight: 500;
-    text-align: left;
-    padding-bottom: 10px;
-    padding-top: 10px;
-    padding-left: 2rem;
-  `,
-    tbody: (0, react_1.css) `
-    background-color: white;
-  `,
-    tr: (0, react_1.css) `
-    height: 50px;
-    max-height: 50px;
-    overflow: hidden;
-    cursor: pointer;
-    padding-left: 2rem;
-    padding-bottom: 10px;
-    padding-top: 10px;
-    border-bottom-width: 1px;
+const MeasurementsTableContainer = styled_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+const MeasurementsTableRoot = styled_1.default.table `
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border-collapse: collapse;
+  table-layout: fixed;
+`;
+const MeasurementsTableHeaderStyled = styled_1.default.tr `
+  border-bottom-width: 1px;
+  font-weight: 500;
+  text-align: left;
+  padding-bottom: 10px;
+  padding-top: 10px;
+  padding-left: 2rem;
+`;
+const MeasurementsTableBody = styled_1.default.tbody `
+  background-color: white;
+`;
+const MeasurementsLinkButton = styled_1.default.span `
+  cursor: pointer;
+  :hover {
+    text-decoration: underline;
+  }
+`;
+const MeasurementsHeaderColumn = styled_1.default.div `
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  padding-left: 5px;
 
-    font-weight: 500;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  `,
-    header: (0, react_1.css) `
-    border-bottom-width: 1px;
-    font-weight: 500;
-    text-align: left;
-    padding-bottom: 10px;
-    padding-top: 10px;
-    padding-left: 2rem;
-  `,
-    iconsContainer: (0, react_1.css) `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    justify-items: center;
-    height: 50px;
-    flex-direction: row;
-    gap: 0.5rem;
-    cursor: default;
-    width: 70px;
-  `,
-    linkButton: (0, react_1.css) `
-    cursor: pointer;
-    :hover {
-      text-decoration: underline;
-    }
-  `,
-    container: (0, react_1.css) `
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-  `,
-    headerColumn: (0, react_1.css) `
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    align-items: center;
-    padding-left: 5px;
+  border-bottom: 1px solid black;
+`;
+const MeasurementsTableRowData = styled_1.default.tr `
+  height: 50px;
+  max-height: 50px;
+  overflow: hidden;
+  cursor: pointer;
+  padding-left: 2rem;
+  padding-bottom: 10px;
+  padding-top: 10px;
+  border-bottom-width: 1px;
 
-    border-bottom: 1px solid black;
-  `,
-};
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+`;
+const MeasurementsIconsContainer = styled_1.default.td `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-items: center;
+  height: 50px;
+  flex-direction: row;
+  gap: 0.5rem;
+  cursor: default;
+  width: 70px;
+`;
 function MeasurementsTable(props) {
     const { kind } = props;
     const { data: { measurements }, view: { selectedMeasurements }, } = (0, index_1.useAppState)();
@@ -127,29 +116,27 @@ function MeasurementsTable(props) {
         dispatch({ type: 'REMOVE_SELECTED_MEASUREMENTS', payload: { kind } });
         closeRemoveModal();
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { css: styles.container, children: [(0, jsx_runtime_1.jsxs)("div", { css: styles.headerColumn, children: [(0, jsx_runtime_1.jsx)(MeasurementVisibilityToggle_1.MeasurementSelectedVisibilityChange, { kind: kind, openedEyes: true }), (0, jsx_runtime_1.jsx)(MeasurementVisibilityToggle_1.MeasurementSelectedVisibilityChange, { kind: kind, openedEyes: false }), (0, jsx_runtime_1.jsx)("span", { css: styles.linkButton, onClick: () => onSelectLink(true), children: "Select all" }), (0, jsx_runtime_1.jsx)("span", { css: styles.linkButton, onClick: () => onSelectLink(false), children: "Unselect all" }), (0, jsx_runtime_1.jsx)(fa_1.FaTrash, { style: hasSelectedMeasurements ? { cursor: 'pointer' } : { opacity: 0.6 }, onClick: hasSelectedMeasurements ? openRemoveModal : undefined }), (0, jsx_runtime_1.jsx)(index_2.ConfirmModal, { headerColor: "red", isOpen: isRemoveModalOpen, onConfirm: onRemove, onRequestClose: closeRemoveModal, saveText: "Remove", children: (0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 'bold', padding: 10 }, children: "Remove selected measurements?" }) })] }), (0, jsx_runtime_1.jsxs)("table", { css: styles.root, children: [(0, jsx_runtime_1.jsx)(MeasurementsTableHeader, {}), (0, jsx_runtime_1.jsx)("tbody", { css: styles.tbody, children: measurements[kind].entries.map((element) => ((0, jsx_runtime_1.jsx)(MeasurementsTableRow, { item: element, kind: kind }, element.id))) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(MeasurementsTableContainer, { children: [(0, jsx_runtime_1.jsxs)(MeasurementsHeaderColumn, { children: [(0, jsx_runtime_1.jsx)(MeasurementVisibilityToggle_1.MeasurementSelectedVisibilityChange, { kind: kind, openedEyes: true }), (0, jsx_runtime_1.jsx)(MeasurementVisibilityToggle_1.MeasurementSelectedVisibilityChange, { kind: kind, openedEyes: false }), (0, jsx_runtime_1.jsx)(MeasurementsLinkButton, { onClick: () => onSelectLink(true), children: "Select all" }), (0, jsx_runtime_1.jsx)(MeasurementsLinkButton, { onClick: () => onSelectLink(false), children: "Unselect all" }), (0, jsx_runtime_1.jsx)(fa_1.FaTrash, { style: hasSelectedMeasurements ? { cursor: 'pointer' } : { opacity: 0.6 }, onClick: hasSelectedMeasurements ? openRemoveModal : undefined }), (0, jsx_runtime_1.jsx)(index_2.ConfirmModal, { headerColor: "red", isOpen: isRemoveModalOpen, onConfirm: onRemove, onRequestClose: closeRemoveModal, saveText: "Remove", children: (0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 'bold', padding: 10 }, children: "Remove selected measurements?" }) })] }), (0, jsx_runtime_1.jsxs)(MeasurementsTableRoot, { children: [(0, jsx_runtime_1.jsx)(MeasurementsTableHeader, {}), (0, jsx_runtime_1.jsx)(MeasurementsTableBody, { children: measurements[kind].entries.map((element) => ((0, jsx_runtime_1.jsx)(MeasurementsTableRow, { item: element, kind: kind }, element.id))) })] })] }));
 }
 exports.MeasurementsTable = MeasurementsTable;
-const tableHeaderStyles = {
-    thStyleEmpty: (0, react_1.css) `
-    display: flex;
-    gap: 5px;
-    align-items: center;
-    width: 70px;
-  `,
-    thStyleFilename: (0, react_1.css) `
-    width: 60%;
-  `,
-    thStyleTechnique: (0, react_1.css) `
-    width: 150px;
-  `,
-    tdName: (0, react_1.css) `
-    width: 60%;
-    overflow: hidden;
-  `,
-};
+const TableHeaderEmpty = styled_1.default.th `
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  width: 70px;
+`;
+const TableHeaderFilename = styled_1.default.th `
+  width: 60%;
+`;
+const TableHeaderTechnique = styled_1.default.th `
+  width: 150px;
+`;
+const TableDataHeaderName = styled_1.default.td `
+  width: 60%;
+  overflow: hidden;
+`;
 function MeasurementsTableHeader() {
-    return ((0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { css: styles.header, children: [(0, jsx_runtime_1.jsx)("th", { css: tableHeaderStyles.thStyleEmpty }), (0, jsx_runtime_1.jsx)("th", { css: tableHeaderStyles.thStyleFilename, children: "Filename" }), (0, jsx_runtime_1.jsx)("th", { css: tableHeaderStyles.thStyleTechnique, children: "Technique" })] }) }));
+    return ((0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)(MeasurementsTableHeaderStyled, { children: [(0, jsx_runtime_1.jsx)(TableHeaderEmpty, {}), (0, jsx_runtime_1.jsx)(TableHeaderFilename, { children: "Filename" }), (0, jsx_runtime_1.jsx)(TableHeaderTechnique, { children: "Technique" })] }) }));
 }
 function MeasurementsTableRow(props) {
     const { item, kind } = props;
@@ -168,5 +155,5 @@ function MeasurementsTableRow(props) {
             payload: { id: item.id, kind, acc: isAlreadyChecked ? 'remove' : 'add' },
         });
     }
-    return ((0, jsx_runtime_1.jsxs)("tr", { css: styles.tr, children: [(0, jsx_runtime_1.jsxs)("td", { css: styles.iconsContainer, children: [(0, jsx_runtime_1.jsx)(MeasurementVisibilityToggle_1.default, { id: item.id, isVisible: measurements[item.id].visible }), (0, jsx_runtime_1.jsx)(MeasurementColorPreview_1.default, { measurementId: item.id, kind: kind, color: measurements[item.id].color }), (0, jsx_runtime_1.jsx)(MeasurementCheckbox_1.MeasurementCheckbox, { checked: selectedMeasurements[kind]?.includes(item.id) || false, onSelectCheckbox: onSelectCheckbox })] }), (0, jsx_runtime_1.jsx)("td", { css: tableHeaderStyles.tdName, onClick: onSelectRow, title: item.id, children: item.info.file?.name ?? item.info.title }), (0, jsx_runtime_1.jsx)("td", { onClick: onSelectRow, children: item.meta.technique })] }));
+    return ((0, jsx_runtime_1.jsxs)(MeasurementsTableRowData, { children: [(0, jsx_runtime_1.jsxs)(MeasurementsIconsContainer, { children: [(0, jsx_runtime_1.jsx)(MeasurementVisibilityToggle_1.default, { id: item.id, isVisible: measurements[item.id].visible }), (0, jsx_runtime_1.jsx)(MeasurementColorPreview_1.default, { measurementId: item.id, kind: kind, color: measurements[item.id].color }), (0, jsx_runtime_1.jsx)(MeasurementCheckbox_1.MeasurementCheckbox, { checked: selectedMeasurements[kind]?.includes(item.id) || false, onSelectCheckbox: onSelectCheckbox })] }), (0, jsx_runtime_1.jsx)(TableDataHeaderName, { onClick: onSelectRow, title: item.id, children: item.info.file?.name ?? item.info.title }), (0, jsx_runtime_1.jsx)("td", { onClick: onSelectRow, children: item.meta.technique })] }));
 }

package/lib/components/button/ButtonGroup.js

@@ -1,53 +1,41 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonGroup = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-const react_1 = require("@emotion/react");
-const styles = {
-    root: (0, react_1.css) `
-    display: inline-flex;
-    border-radius: 0.375rem;
-    isolation: isolate;
-  `,
-    firstButton: (0, react_1.css) `
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    font-weight: 500;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    border-width: 1px;
-    border-top-left-radius: 0.375rem;
-    border-bottom-left-radius: 0.375rem;
-  `,
-    secondButton: (0, react_1.css) `
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    font-weight: 500;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    border-width: 1px;
-    border-top-right-radius: 0.375rem;
-    border-bottom-right-radius: 0.375rem;
-    margin-left: -1px;
-  `,
-};
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const ButtonGroupRoot = styled_1.default.div `
+  display: inline-flex;
+  border-radius: 0.375rem;
+  isolation: isolate;
+`;
+const ButtonGroupCustomButton = styled_1.default.button `
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border-width: 1px;
+  border-top-left-radius: ${({ isLast }) => !isLast && '0.375rem'};
+  border-bottom-left-radius: ${({ isLast }) => !isLast && '0.375rem'};
+
+  border-top-right-radius: ${({ isLast }) => isLast && '0.375rem'};
+  border-bottom-right-radius: ${({ isLast }) => isLast && '0.375rem'};
+  margin-left: ${({ isLast }) => isLast && '-1px'};
+`;
 function ButtonGroup(props) {
     const { children } = props;
-    return (0, jsx_runtime_1.jsx)("div", { css: styles.root, children: children });
+    return (0, jsx_runtime_1.jsx)(ButtonGroupRoot, { children: children });
 }
 exports.ButtonGroup = ButtonGroup;
 ButtonGroup.Button = function ButtonGroupButton(props) {
     const { position, label, onClick } = props;
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, css: position === 'first' ? styles.firstButton : styles.secondButton, children: label }));
+    return ((0, jsx_runtime_1.jsx)(ButtonGroupCustomButton, { type: "button", onClick: onClick, isLast: position === 'last', children: label }));
 };