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

package/dist/es/components/DraggableModal.js

@@ -1,5 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+/*!
+ * © 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 styled from 'styled-components';
 import { ModalContainer, StyledModal } from './StyledModal';
 export const DraggableModal = ({ children, isOpen, onRequestClose }) => {
@@ -33,13 +47,14 @@ export const DraggableModal = ({ children, isOpen, onRequestClose }) => {
             document.removeEventListener('mouseup', mouseup);
         };
     }, []);
-    return (_jsx(StyledModal, Object.assign({ isOpen: isOpen, onRequestClose: onRequestClose, shouldCloseOnOverlayClick: false, pointerEventsOnBackdrop: "none", style: {
+    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: onRequestClose, shouldCloseOnOverlayClick: false, pointerEventsOnBackdrop: "none", style: {
             content: {
                 left: pos.left + 'px',
                 top: pos.top + 'px',
                 transition: 'none',
             },
-        } }, { children: _jsx(DraggableModalContainer, Object.assign({ onMouseDown: mouseDown, onMouseMove: mouseMove, "data-cy": "find-replace-modal" }, { children: children })) })));
+        } },
+        React.createElement(DraggableModalContainer, { onMouseDown: mouseDown, onMouseMove: mouseMove, "data-cy": "find-replace-modal" }, children)));
 };
 const DraggableModalContainer = styled(ModalContainer) `
   padding: 0 2rem 2rem 2rem;

package/dist/es/components/Drawer.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
 import styled, { keyframes } from 'styled-components';
 import { AddedIcon, AddIcon } from './icons';
 const slideIn = keyframes `
@@ -95,5 +95,21 @@ const ItemMeta = styled.span `
   color: ${(props) => props.theme.colors.text.secondary};
 `;
 export const Drawer = ({ items, selectedIds = [], title, onSelect, onBack, width, }) => {
-    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))) })] })));
+    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)))))))));
 };

package/dist/es/components/Dropdown.js

@@ -1,7 +1,5 @@
 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,5 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+/*!
+ * © 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 styled from 'styled-components';
 import { IconButton } from './Button';
 import { ArrowDownCircleIcon } from './icons';
@@ -53,9 +67,15 @@ export const Field = styled.div `
 `;
 export const InspectorSection = ({ title, contentStyles, children, }) => {
     const [expanded, setExpanded] = useState(true);
-    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 }))] }));
+    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)));
 };
 const Line = styled.hr `
   flex: 1;

package/dist/es/components/LoadingOverlay.js

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

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

@@ -1,4 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*!
+ * © 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 styled from 'styled-components';
 import { Submenu, SubmenusContainer, SubmenusContainerWrapper, Text, } from './Submenu';
 const MenusContainer = styled.div `
@@ -23,12 +38,16 @@ const MenuContainer = styled.div `
   }
 `;
 export const Menus = ({ menus, innerRef, handleClick, }) => {
-    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}`));
-        }) })));
+    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]) }));
+                }))))));
+    })));
 };

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

@@ -1,4 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+/*!
+ * © 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 styled from 'styled-components';
 const isMac = /Mac/.test(window.navigator.platform);
 export const ShortcutContainer = styled.div `
@@ -34,9 +49,9 @@ const parts = (shortcut) => {
             nodes.push(separator);
         }
         else {
-            nodes.push(_jsx(Character, { children: part }, part));
+            nodes.push(React.createElement(Character, { key: part }, part));
         }
     }
     return nodes;
 };
-export const Shortcut = ({ shortcut }) => (_jsx(ShortcutContainer, { children: parts(shortcut) }));
+export const Shortcut = ({ shortcut }) => (React.createElement(ShortcutContainer, null, parts(shortcut)));

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

@@ -1,4 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*!
+ * © 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 styled from 'styled-components';
 import { isMenuSeparator } from '../../lib/menus';
 import { TriangleCollapsedIcon } from '../icons';
@@ -76,20 +91,26 @@ export const SubmenuLabel = ({ menu, handleClick }) => {
     if (isMenuSeparator(menu)) {
         return null;
     }
-    return (_jsxs(Container, Object.assign({ isOpen: menu.isOpen, "data-cy": 'submenu', className: menu.isEnabled ? '' : 'disabled', onMouseDown: (e) => {
+    return (React.createElement(Container, { isOpen: menu.isOpen, "data-cy": 'submenu', className: menu.isEnabled ? '' : 'disabled', onMouseDown: (e) => {
             e.preventDefault();
             handleClick([]);
-        } }, { children: [_jsx(Active, { children: activeContent(menu) }), _jsx(Text, { children: menu.label }), menu.submenu && _jsx(Arrow, {}), menu.shortcut && _jsx(Shortcut, { shortcut: menu.shortcut })] })));
+        } },
+        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 })));
 };
 export const Submenu = ({ menu, handleClick }) => {
     if (isMenuSeparator(menu)) {
-        return _jsx(Separator, {});
+        return React.createElement(Separator, null);
     }
     if (menu.component) {
-        return _jsx(menu.component, { menu: menu, handleClick: handleClick });
+        return React.createElement(menu.component, { menu: menu, handleClick: handleClick });
     }
     if (!menu.submenu) {
-        return _jsx(SubmenuLabel, { menu: menu, handleClick: handleClick });
+        return React.createElement(SubmenuLabel, { menu: menu, handleClick: handleClick });
     }
-    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}`))) }))] })));
+    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]) })))))));
 };

package/dist/es/components/MultiValueInput.js

@@ -1,5 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { commonStyles } from './TextField';
 const Container = styled.div `
@@ -115,5 +114,9 @@ export const MultiValueInput = ({ id, inputType, placeholder = '', initialValues
         : inputType === 'number'
             ? 'Enter number and press enter'
             : 'Enter text and press enter';
-    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 })] }));
+    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 })));
 };

package/dist/es/components/NavDropdown.js

@@ -1,4 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*!
+ * © 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 { NavLink } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 import { Badge } from './Badge';
@@ -98,10 +113,15 @@ export const NotificationsBadge = styled(Badge) `
   min-width: 10px;
   min-height: 10px;
 `;
-export const NavDropdownButtonContainer = styled(SecondaryButton) `
+export const NavDropdownButtonContainer = styled(SecondaryButton).attrs((props) => ({
+    selected: props.isOpen,
+})) `
   .inheritColors path {
     fill: currentColor;
     stroke: currentColor;
   }
 `;
-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' : '' })] })));
+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' : '' })));

package/dist/es/components/RadioButton.js

@@ -1,3 +1,18 @@
+/*!
+ * © 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)
@@ -9,7 +24,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import styled from 'styled-components';
 const Input = styled.input `
     position: absolute;
@@ -59,5 +74,7 @@ const Input = styled.input `
 `;
 export const RadioButton = (_a) => {
     var { checked, id, label, name } = _a, rest = __rest(_a, ["checked", "id", "label", "name"]);
-    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 }))] }));
+    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)));
 };

package/dist/es/components/RelativeDate.js

@@ -1,3 +1,18 @@
+/*!
+ * © 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)
@@ -9,7 +24,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 export const RelativeDate = (_a) => {
     var { date } = _a, props = __rest(_a, ["date"]);
     if (!date) {
@@ -22,5 +37,5 @@ export const RelativeDate = (_a) => {
         value = Math.floor(value / 24);
         unit = 'day';
     }
-    return _jsx("span", Object.assign({}, props, { children: formatter.format(value, unit) }));
+    return React.createElement("span", Object.assign({}, props), formatter.format(value, unit));
 };

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

@@ -1,5 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import { ResizerButton } from './ResizerButton';
 import { HorizontalEndResizerInner, HorizontalStartResizerInner, VerticalEndResizerInner, VerticalStartResizerInner, } from './ResizerInner';
 const inners = {
@@ -12,79 +11,92 @@ const inners = {
         start: HorizontalStartResizerInner,
     },
 };
-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';
+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 })));
+    }
+}

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

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { HorizontalEndResizerButtonInner, HorizontalStartResizerButtonInner, VerticalEndResizerButtonInner, VerticalStartResizerButtonInner, } from './ResizerButtonInner';
 const inners = {
@@ -11,9 +10,14 @@ const inners = {
         start: HorizontalStartResizerButtonInner,
     },
 };
-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';
+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,
+};

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

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