@manuscripts/style-guide 2.1.7 → 2.1.8-LEAN-4344.0

package/dist/es/components/DraggableModal.js

@@ -1,19 +1,5 @@
-/*!
- * © 2025 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React, { useCallback, useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { ModalContainer, StyledModal } from './StyledModal';
 export const DraggableModal = ({ children, isOpen, onRequestClose }) => {
@@ -47,14 +33,13 @@ export const DraggableModal = ({ children, isOpen, onRequestClose }) => {
             document.removeEventListener('mouseup', mouseup);
         };
     }, []);
-    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: onRequestClose, shouldCloseOnOverlayClick: false, pointerEventsOnBackdrop: "none", style: {
+    return (_jsx(StyledModal, Object.assign({ isOpen: isOpen, onRequestClose: onRequestClose, shouldCloseOnOverlayClick: false, pointerEventsOnBackdrop: "none", style: {
             content: {
                 left: pos.left + 'px',
                 top: pos.top + 'px',
                 transition: 'none',
             },
-        } },
-        React.createElement(DraggableModalContainer, { onMouseDown: mouseDown, onMouseMove: mouseMove, "data-cy": "find-replace-modal" }, children)));
+        } }, { children: _jsx(DraggableModalContainer, Object.assign({ onMouseDown: mouseDown, onMouseMove: mouseMove, "data-cy": "find-replace-modal" }, { children: children })) })));
 };
 const DraggableModalContainer = styled(ModalContainer) `
   padding: 0 2rem 2rem 2rem;

package/dist/es/components/Drawer.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled, { keyframes } from 'styled-components';
 import { AddedIcon, AddIcon } from './icons';
 const slideIn = keyframes `
@@ -95,21 +95,5 @@ const ItemMeta = styled.span `
   color: ${(props) => props.theme.colors.text.secondary};
 `;
 export const Drawer = ({ items, selectedIds = [], title, onSelect, onBack, width, }) => {
-    return (React.createElement(DrawerContainer, { "data-cy": "drawer", width: width },
-        React.createElement(BackButton, { onClick: onBack },
-            React.createElement("span", null, "\u2190"),
-            "Back"),
-        React.createElement(DrawerTitle, null, title),
-        React.createElement(ItemsList, null, items.map((item) => (React.createElement(ListItem, { "data-cy": "item", key: item.id, selected: selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.includes(item.id), onClick: () => onSelect(item.id) },
-            React.createElement(Icon, null, (selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.includes(item.id)) ? (React.createElement(AddedIcon, { width: 22, height: 22 })) : (React.createElement(AddIcon, { width: 22, height: 22 }))),
-            React.createElement(LabelContainer, null,
-                React.createElement(ItemLabel, null, item.label),
-                React.createElement(ItemMeta, null,
-                    item.city && (React.createElement(React.Fragment, null,
-                        item.city,
-                        item.state || item.country ? ', ' : '')),
-                    item.state && (React.createElement(React.Fragment, null,
-                        item.state,
-                        item.country ? ', ' : '')),
-                    item.country && React.createElement(React.Fragment, null, item.country)))))))));
+    return (_jsxs(DrawerContainer, Object.assign({ "data-cy": "drawer", width: width }, { children: [_jsxs(BackButton, Object.assign({ onClick: onBack }, { children: [_jsx("span", { children: "\u2190" }), "Back"] })), _jsx(DrawerTitle, { children: title }), _jsx(ItemsList, { children: items.map((item) => (_jsxs(ListItem, Object.assign({ "data-cy": "item", selected: selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.includes(item.id), onClick: () => onSelect(item.id) }, { children: [_jsx(Icon, { children: (selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.includes(item.id)) ? (_jsx(AddedIcon, { width: 22, height: 22 })) : (_jsx(AddIcon, { width: 22, height: 22 })) }), _jsxs(LabelContainer, { children: [_jsx(ItemLabel, { children: item.label }), _jsxs(ItemMeta, { children: [item.city && (_jsxs(_Fragment, { children: [item.city, item.state || item.country ? ', ' : ''] })), item.state && (_jsxs(_Fragment, { children: [item.state, item.country ? ', ' : ''] })), item.country && _jsx(_Fragment, { children: item.country })] })] })] }), item.id))) })] })));
 };

package/dist/es/components/Dropdown.js

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
-export const DropdownList = styled.div.attrs({ 'data-cy': 'dropdown' }) `
+export const DropdownList = styled.div.attrs({
+    'data-cy': 'dropdown',
+}) `
   display: flex;
   flex-direction: column;
   border: 1px solid ${(props) => props.theme.colors.border.secondary};

package/dist/es/components/InspectorSection.js

@@ -1,19 +1,5 @@
-/*!
- * © 2020 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import styled from 'styled-components';
 import { IconButton } from './Button';
 import { ArrowDownCircleIcon } from './icons';
@@ -67,15 +53,9 @@ export const Field = styled.div `
 `;
 export const InspectorSection = ({ title, contentStyles, children, }) => {
     const [expanded, setExpanded] = useState(true);
-    return (React.createElement(Section, null,
-        React.createElement(Line, null),
-        React.createElement(Heading, { onClick: () => setExpanded(!expanded), marginBottom: (!(expanded && children) && '40px') || undefined },
-            React.createElement(HeadingText, null, title),
-            React.createElement(ExpanderButton, { "aria-label": 'Toggle expand section', onClick: () => setExpanded(!expanded), style: {
-                    transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',
-                } },
-                React.createElement(ArrowDownCircleIcon, null))),
-        expanded && children && React.createElement("div", { style: contentStyles }, children)));
+    return (_jsxs(Section, { children: [_jsx(Line, {}), _jsxs(Heading, Object.assign({ onClick: () => setExpanded(!expanded), marginBottom: (!(expanded && children) && '40px') || undefined }, { children: [_jsx(HeadingText, { children: title }), _jsx(ExpanderButton, Object.assign({ "aria-label": 'Toggle expand section', onClick: () => setExpanded(!expanded), style: {
+                            transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',
+                        } }, { children: _jsx(ArrowDownCircleIcon, {}) }))] })), expanded && children && _jsx("div", Object.assign({ style: contentStyles }, { children: children }))] }));
 };
 const Line = styled.hr `
   flex: 1;

package/dist/es/components/LoadingOverlay.js

@@ -1,7 +1,6 @@
-import React from 'react';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import Modal from 'react-modal';
-export const LoadingOverlay = ({ children, }) => (React.createElement(React.Fragment, null,
-    React.createElement(Modal, { isOpen: true, style: {
+export const LoadingOverlay = ({ children, }) => (_jsx(_Fragment, { children: _jsx(Modal, Object.assign({ isOpen: true, style: {
             overlay: {
                 position: 'fixed',
                 top: 0,
@@ -24,5 +23,4 @@ export const LoadingOverlay = ({ children, }) => (React.createElement(React.Frag
                 overflow: 'auto',
                 border: 'none',
             },
-        } },
-        React.createElement(React.Fragment, null, children))));
+        } }, { children: _jsx(_Fragment, { children: children }) })) }));

package/dist/es/components/Menus/Menus.js

@@ -1,19 +1,4 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { Submenu, SubmenusContainer, SubmenusContainerWrapper, Text, } from './Submenu';
 const MenusContainer = styled.div `
@@ -38,16 +23,12 @@ const MenuContainer = styled.div `
   }
 `;
 export const Menus = ({ menus, innerRef, handleClick, }) => {
-    return (React.createElement(MenusContainer, { ref: innerRef, "data-cy": 'manuscript-menus' }, menus.map((menu, index) => {
-        return (React.createElement(MenuContainer, { "data-cy": 'menu', key: `menu-${index}`, isEnabled: menu.isEnabled },
-            React.createElement(MenuHeading, { onMouseDown: (e) => {
-                    e.preventDefault();
-                    handleClick([index]);
-                }, isOpen: menu.isOpen },
-                React.createElement(Text, null, menu.label)),
-            menu.isEnabled && menu.isOpen && menu.submenu && (React.createElement(SubmenusContainerWrapper, null,
-                React.createElement(SubmenusContainer, null, menu.submenu.map((submenu, sindex) => {
-                    return (React.createElement(Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]) }));
-                }))))));
-    })));
+    return (_jsx(MenusContainer, Object.assign({ ref: innerRef, "data-cy": 'manuscript-menus' }, { children: menus.map((menu, index) => {
+            return (_jsxs(MenuContainer, Object.assign({ "data-cy": 'menu', isEnabled: menu.isEnabled }, { children: [_jsx(MenuHeading, Object.assign({ onMouseDown: (e) => {
+                            e.preventDefault();
+                            handleClick([index]);
+                        }, isOpen: menu.isOpen }, { children: _jsx(Text, { children: menu.label }) })), menu.isEnabled && menu.isOpen && menu.submenu && (_jsx(SubmenusContainerWrapper, { children: _jsx(SubmenusContainer, { children: menu.submenu.map((submenu, sindex) => {
+                                return (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]) }, `${index}-${sindex}`));
+                            }) }) }))] }), `menu-${index}`));
+        }) })));
 };

package/dist/es/components/Menus/Shortcut.js

@@ -1,19 +1,4 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 const isMac = /Mac/.test(window.navigator.platform);
 export const ShortcutContainer = styled.div `
@@ -49,9 +34,9 @@ const parts = (shortcut) => {
             nodes.push(separator);
         }
         else {
-            nodes.push(React.createElement(Character, { key: part }, part));
+            nodes.push(_jsx(Character, { children: part }, part));
         }
     }
     return nodes;
 };
-export const Shortcut = ({ shortcut }) => (React.createElement(ShortcutContainer, null, parts(shortcut)));
+export const Shortcut = ({ shortcut }) => (_jsx(ShortcutContainer, { children: parts(shortcut) }));

package/dist/es/components/Menus/Submenu.js

@@ -1,19 +1,4 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { isMenuSeparator } from '../../lib/menus';
 import { TriangleCollapsedIcon } from '../icons';
@@ -91,26 +76,20 @@ export const SubmenuLabel = ({ menu, handleClick }) => {
     if (isMenuSeparator(menu)) {
         return null;
     }
-    return (React.createElement(Container, { isOpen: menu.isOpen, "data-cy": 'submenu', className: menu.isEnabled ? '' : 'disabled', onMouseDown: (e) => {
+    return (_jsxs(Container, Object.assign({ isOpen: menu.isOpen, "data-cy": 'submenu', className: menu.isEnabled ? '' : 'disabled', onMouseDown: (e) => {
             e.preventDefault();
             handleClick([]);
-        } },
-        React.createElement(Active, null, activeContent(menu)),
-        React.createElement(Text, null, menu.label),
-        menu.submenu && React.createElement(Arrow, null),
-        menu.shortcut && React.createElement(Shortcut, { shortcut: menu.shortcut })));
+        } }, { children: [_jsx(Active, { children: activeContent(menu) }), _jsx(Text, { children: menu.label }), menu.submenu && _jsx(Arrow, {}), menu.shortcut && _jsx(Shortcut, { shortcut: menu.shortcut })] })));
 };
 export const Submenu = ({ menu, handleClick }) => {
     if (isMenuSeparator(menu)) {
-        return React.createElement(Separator, null);
+        return _jsx(Separator, {});
     }
     if (menu.component) {
-        return React.createElement(menu.component, { menu: menu, handleClick: handleClick });
+        return _jsx(menu.component, { menu: menu, handleClick: handleClick });
     }
     if (!menu.submenu) {
-        return React.createElement(SubmenuLabel, { menu: menu, handleClick: handleClick });
+        return _jsx(SubmenuLabel, { menu: menu, handleClick: handleClick });
     }
-    return (React.createElement(SubmenuContainer, { "data-cy": 'submenu' },
-        React.createElement(SubmenuLabel, { menu: menu, handleClick: handleClick }),
-        menu.submenu && menu.isOpen && (React.createElement(NestedSubmenusContainer, null, menu.submenu.map((submenu, index) => (React.createElement(Submenu, { key: `menu-${index}`, menu: submenu, handleClick: (i) => handleClick([index, ...i]) })))))));
+    return (_jsxs(SubmenuContainer, Object.assign({ "data-cy": 'submenu' }, { children: [_jsx(SubmenuLabel, { menu: menu, handleClick: handleClick }), menu.submenu && menu.isOpen && (_jsx(NestedSubmenusContainer, { children: menu.submenu.map((submenu, index) => (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, ...i]) }, `menu-${index}`))) }))] })));
 };

package/dist/es/components/MultiValueInput.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import styled from 'styled-components';
 import { commonStyles } from './TextField';
 const Container = styled.div `
@@ -114,9 +115,5 @@ export const MultiValueInput = ({ id, inputType, placeholder = '', initialValues
         : inputType === 'number'
             ? 'Enter number and press enter'
             : 'Enter text and press enter';
-    return (React.createElement(Container, null,
-        values.map((value, index) => (React.createElement(Chip, { key: index },
-            value,
-            React.createElement(RemoveButton, { onMouseUp: () => handleRemoveValue(index) }, "\u00D7")))),
-        React.createElement(Input, { id: id, type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })));
+    return (_jsxs(Container, { children: [values.map((value, index) => (_jsxs(Chip, { children: [value, _jsx(RemoveButton, Object.assign({ onMouseUp: () => handleRemoveValue(index) }, { children: "\u00D7" }))] }, index))), _jsx(Input, { id: id, type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })] }));
 };

package/dist/es/components/NavDropdown.js

@@ -1,19 +1,4 @@
-/*!
- * © 2020 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NavLink } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 import { Badge } from './Badge';
@@ -113,15 +98,10 @@ export const NotificationsBadge = styled(Badge) `
   min-width: 10px;
   min-height: 10px;
 `;
-export const NavDropdownButtonContainer = styled(SecondaryButton).attrs((props) => ({
-    selected: props.isOpen,
-})) `
+export const NavDropdownButtonContainer = styled(SecondaryButton) `
   .inheritColors path {
     fill: currentColor;
     stroke: currentColor;
   }
 `;
-export const NavDropdownButton = ({ as, children, disabled, isOpen, notificationsCount, onClick, removeChevron, }) => (React.createElement(NavDropdownButtonContainer, { as: as, disabled: disabled, onClick: onClick, isOpen: isOpen, className: 'dropdown-toggle' },
-    React.createElement(NavDropdownButtonText, null, children),
-    !!notificationsCount && (React.createElement(NotificationsBadge, { isOpen: isOpen }, notificationsCount)),
-    !removeChevron && React.createElement(NavDropdownToggle, { className: isOpen ? 'open' : '' })));
+export const NavDropdownButton = ({ as, children, disabled, isOpen, notificationsCount, onClick, removeChevron, }) => (_jsxs(NavDropdownButtonContainer, Object.assign({ as: as, disabled: disabled, onClick: onClick, isOpen: isOpen, selected: isOpen, className: 'dropdown-toggle' }, { children: [_jsx(NavDropdownButtonText, { children: children }), !!notificationsCount && (_jsx(NotificationsBadge, Object.assign({ isOpen: isOpen }, { children: notificationsCount }))), !removeChevron && _jsx(NavDropdownToggle, { className: isOpen ? 'open' : '' })] })));

package/dist/es/components/RadioButton.js

@@ -1,18 +1,3 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -24,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 const Input = styled.input `
     position: absolute;
@@ -74,7 +59,5 @@ const Input = styled.input `
 `;
 export const RadioButton = (_a) => {
     var { checked, id, label, name } = _a, rest = __rest(_a, ["checked", "id", "label", "name"]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Input, Object.assign({ checked: checked, type: "radio", name: name, id: id }, rest)),
-        React.createElement("label", { htmlFor: id }, label)));
+    return (_jsxs(_Fragment, { children: [_jsx(Input, Object.assign({ checked: checked, type: "radio", name: name, id: id }, rest)), _jsx("label", Object.assign({ htmlFor: id }, { children: label }))] }));
 };

package/dist/es/components/RelativeDate.js

@@ -1,18 +1,3 @@
-/*!
- * © 2020 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -24,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 export const RelativeDate = (_a) => {
     var { date } = _a, props = __rest(_a, ["date"]);
     if (!date) {
@@ -37,5 +22,5 @@ export const RelativeDate = (_a) => {
         value = Math.floor(value / 24);
         unit = 'day';
     }
-    return React.createElement("span", Object.assign({}, props), formatter.format(value, unit));
+    return _jsx("span", Object.assign({}, props, { children: formatter.format(value, unit) }));
 };

package/dist/es/components/Resizer/Resizer.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useState } from 'react';
 import { ResizerButton } from './ResizerButton';
 import { HorizontalEndResizerInner, HorizontalStartResizerInner, VerticalEndResizerInner, VerticalStartResizerInner, } from './ResizerInner';
 const inners = {
@@ -11,92 +12,79 @@ const inners = {
         start: HorizontalStartResizerInner,
     },
 };
-export class Resizer extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.resizerRef = React.createRef();
-        this.state = {
-            isHovering: false,
-            isResizing: false,
-            startPosition: 0,
-        };
-        this.scheduleResize = (delta) => {
-            if (this.state.isResizing && delta) {
-                this.props.onResize(delta);
-            }
-        };
-        this.mouseDownHandler = (e) => {
-            e.preventDefault();
-            if (!this.resizerRef.current || e.target !== this.resizerRef.current) {
-                return;
-            }
-            if (this.state.isResizing) {
-                return;
-            }
-            this.setState({
-                isResizing: true,
-                startPosition: this.getPosition(e),
-            });
-            window.addEventListener('mousemove', this.mouseMoveHandler);
-            window.addEventListener('mouseup', this.mouseUpHandler);
-            window.addEventListener('mouseout', this.handleOutofBounds);
-        };
-        this.mouseUpHandler = (e, outOfBounds = false) => {
-            window.removeEventListener('mousemove', this.mouseMoveHandler);
-            window.removeEventListener('mouseup', this.mouseUpHandler);
-            window.removeEventListener('mouseout', this.handleOutofBounds);
-            this.setState({
-                isResizing: false,
-            });
-            const position = this.getPosition(e);
-            const adjustedPosition = outOfBounds ? position - 32 : position;
-            const delta = this.getDelta(adjustedPosition);
-            if (delta === 0) {
-                this.props.onResizeButton();
-            }
-            this.props.onResize(delta);
-            this.props.onResizeEnd(delta);
-        };
-        this.mouseMoveHandler = (e) => {
-            const position = this.getPosition(e);
-            const delta = this.getDelta(position);
-            this.scheduleResize(delta);
-        };
-        this.mouseEnterHandler = () => {
-            this.setState({
-                isHovering: true,
-            });
-        };
-        this.mouseLeaveHandler = () => {
-            this.setState({
-                isHovering: false,
-            });
-        };
-        this.handleOutofBounds = (e) => {
-            const disableResizeNodes = [
-                'IFRAME',
-                'HTML',
-                null,
-            ];
-            if (this.state.isResizing &&
-                disableResizeNodes.includes(e.relatedTarget && e.relatedTarget.nodeName)) {
-                this.mouseUpHandler(e, true);
-            }
-        };
-        this.getDelta = (delta) => {
-            const { startPosition } = this.state;
-            return this.props.side === 'end'
-                ? delta - startPosition
-                : startPosition - delta;
-        };
-        this.getPosition = (e) => {
-            return this.props.direction === 'row' ? e.screenX : e.screenY;
-        };
-    }
-    render() {
-        const { buttonInner, direction, side } = this.props;
-        const ResizerInner = inners[direction][side];
-        return (React.createElement(ResizerInner, { ref: this.resizerRef, onMouseDown: this.mouseDownHandler, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler },
-            React.createElement(ResizerButton, { direction: direction, isCollapsed: this.props.collapsed, isVisible: this.state.isHovering, onClick: this.props.onResizeButton, side: side, buttonInner: buttonInner })));
-    }
-}
+export const Resizer = ({ buttonInner, direction, side, collapsed, onResize, onResizeButton, onResizeEnd, }) => {
+    const resizerRef = React.useRef(null);
+    const [isHovering, setIsHovering] = useState(false);
+    const [isResizing, setIsResizing] = useState(false);
+    const [startPosition, setStartPosition] = useState(0);
+    const getPosition = useCallback((e) => {
+        return direction === 'row' ? e.screenX : e.screenY;
+    }, [direction]);
+    const getDelta = useCallback((delta) => {
+        return side === 'end' ? delta - startPosition : startPosition - delta;
+    }, [side, startPosition]);
+    const scheduleResize = useCallback((delta) => {
+        if (isResizing && delta) {
+            onResize(delta);
+        }
+    }, [isResizing, onResize]);
+    const mouseUpHandler = useCallback((e, outOfBounds = false) => {
+        window.removeEventListener('mousemove', mouseMoveHandler);
+        window.removeEventListener('mouseup', mouseUpHandler);
+        window.removeEventListener('mouseout', handleOutofBounds);
+        setIsResizing(false);
+        const position = getPosition(e);
+        const adjustedPosition = outOfBounds ? position - 32 : position;
+        const delta = getDelta(adjustedPosition);
+        if (delta === 0) {
+            onResizeButton();
+        }
+        onResize(delta);
+        onResizeEnd(delta);
+    }, [getPosition, getDelta, onResize, onResizeButton, onResizeEnd]);
+    const mouseMoveHandler = useCallback((e) => {
+        const position = getPosition(e);
+        const delta = getDelta(position);
+        scheduleResize(delta);
+    }, [getPosition, getDelta, scheduleResize]);
+    const handleOutofBounds = useCallback((e) => {
+        const disableResizeNodes = [
+            'IFRAME',
+            'HTML',
+            null,
+        ];
+        if (isResizing &&
+            disableResizeNodes.includes(e.relatedTarget && e.relatedTarget.nodeName)) {
+            mouseUpHandler(e, true);
+        }
+    }, [isResizing, mouseUpHandler]);
+    const mouseDownHandler = useCallback((e) => {
+        e.preventDefault();
+        if (!resizerRef.current || e.target !== resizerRef.current) {
+            return;
+        }
+        if (isResizing) {
+            return;
+        }
+        setIsResizing(true);
+        setStartPosition(getPosition(e));
+        window.addEventListener('mousemove', mouseMoveHandler);
+        window.addEventListener('mouseup', mouseUpHandler);
+        window.addEventListener('mouseout', handleOutofBounds);
+    }, [
+        isResizing,
+        getPosition,
+        mouseMoveHandler,
+        mouseUpHandler,
+        handleOutofBounds,
+    ]);
+    const mouseEnterHandler = useCallback(() => {
+        setIsHovering(true);
+    }, []);
+    const mouseLeaveHandler = useCallback(() => {
+        setIsHovering(false);
+    }, []);
+    const ResizerInner = inners[direction][side];
+    return (_jsx(ResizerInner, Object.assign({ ref: resizerRef, onMouseDown: mouseDownHandler, onMouseEnter: mouseEnterHandler, onMouseLeave: mouseLeaveHandler }, { children: _jsx(ResizerButton, { direction: direction, isCollapsed: collapsed, isVisible: isHovering, onClick: onResizeButton, side: side, buttonInner: buttonInner }) })));
+};
+Resizer.displayName = 'Resizer';

package/dist/es/components/Resizer/ResizerButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { HorizontalEndResizerButtonInner, HorizontalStartResizerButtonInner, VerticalEndResizerButtonInner, VerticalStartResizerButtonInner, } from './ResizerButtonInner';
 const inners = {
@@ -10,14 +11,9 @@ const inners = {
         start: HorizontalStartResizerButtonInner,
     },
 };
-export class ResizerButton extends React.PureComponent {
-    render() {
-        const { buttonInner, direction, side, isCollapsed, onClick, isVisible } = this.props;
-        const ResizerButtonInner = buttonInner || inners[direction][side];
-        return (React.createElement(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: (event) => event.preventDefault() }));
-    }
-}
-ResizerButton.defaultProps = {
-    isCollapsed: false,
-    isVisible: false,
-};
+export const ResizerButton = React.memo(({ buttonInner, direction, side, isCollapsed = false, onClick, isVisible = false, }) => {
+    const ResizerButtonInner = (buttonInner ||
+        inners[direction][side]);
+    return (_jsx(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: (event) => event.preventDefault() }));
+});
+ResizerButton.displayName = 'ResizerButton';

package/dist/es/components/RichText/RichText.js

@@ -1,6 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { EditorState } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { parseRichText, schema } from './schema';
 export const RichText = ({ className, value }) => {
     const editorRef = useRef(null);
@@ -15,5 +16,5 @@ export const RichText = ({ className, value }) => {
         });
         editorRef.current && editorRef.current.replaceChildren(view.dom);
     }, [value]);
-    return React.createElement("div", { className: className, ref: editorRef });
+    return _jsx("div", { className: className, ref: editorRef });
 };