react-science 0.19.1

package/lib/components/color-picker/react-color/common/useOnChange.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnChange = void 0;
+const react_1 = require("react");
+function useOnChange(onChange) {
+    return (0, react_1.useCallback)((e) => {
+        onChange(e);
+        function handleMouseUp() {
+            window.removeEventListener('mousemove', onChange);
+            window.removeEventListener('mouseup', handleMouseUp);
+        }
+        window.addEventListener('mousemove', onChange);
+        window.addEventListener('mouseup', handleMouseUp);
+    }, [onChange]);
+}
+exports.useOnChange = useOnChange;

package/lib/components/color-picker/react-color/helpers/alpha.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateChange = void 0;
+function calculateChange(e, hsl, direction, initialA, container) {
+    const containerWidth = container.clientWidth;
+    const containerHeight = container.clientHeight;
+    const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
+    const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
+    const left = x - (container.getBoundingClientRect().left + window.pageXOffset);
+    const top = y - (container.getBoundingClientRect().top + window.pageYOffset);
+    if (direction === 'vertical') {
+        let a;
+        if (top < 0) {
+            a = 0;
+        }
+        else if (top > containerHeight) {
+            a = 1;
+        }
+        else {
+            a = Math.round((top * 100) / containerHeight) / 100;
+        }
+        if (hsl.a !== a) {
+            return {
+                h: hsl.h,
+                s: hsl.s,
+                l: hsl.l,
+                a,
+                source: 'rgb',
+            };
+        }
+    }
+    else {
+        let a;
+        if (left < 0) {
+            a = 0;
+        }
+        else if (left > containerWidth) {
+            a = 1;
+        }
+        else {
+            a = Math.round((left * 100) / containerWidth) / 100;
+        }
+        if (initialA !== a) {
+            return {
+                h: hsl.h,
+                s: hsl.s,
+                l: hsl.l,
+                a,
+                source: 'rgb',
+            };
+        }
+    }
+    return null;
+}
+exports.calculateChange = calculateChange;

package/lib/components/color-picker/react-color/helpers/checkBoard.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.get = exports.render = void 0;
+const checkBoardCache = {};
+function render(c1, c2, size, ServerCanvas) {
+    if (typeof document === 'undefined' && !ServerCanvas) {
+        return null;
+    }
+    const canvas = ServerCanvas
+        ? new ServerCanvas()
+        : document.createElement('canvas');
+    canvas.width = size * 2;
+    canvas.height = size * 2;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        return null;
+    } // If no context can be found, return early.
+    ctx.fillStyle = c1;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = c2;
+    ctx.fillRect(0, 0, size, size);
+    ctx.translate(size, size);
+    ctx.fillRect(0, 0, size, size);
+    return canvas.toDataURL();
+}
+exports.render = render;
+function get(c1, c2, size, ServerCanvas) {
+    const key = `${c1}-${c2}-${size}${ServerCanvas ? '-server' : ''}`;
+    if (checkBoardCache[key]) {
+        return checkBoardCache[key];
+    }
+    const checkBoard = render(c1, c2, size, ServerCanvas);
+    checkBoardCache[key] = checkBoard;
+    return checkBoard;
+}
+exports.get = get;

package/lib/components/color-picker/react-color/helpers/color.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toState = exports.simpleCheckForValidColor = exports.isValidHex = exports.getContrastingColor = exports.isvalidColorString = exports.red = void 0;
+const each_1 = __importDefault(require("lodash/each"));
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+function simpleCheckForValidColor(data) {
+    const keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v'];
+    let checked = 0;
+    let passed = 0;
+    (0, each_1.default)(keysToCheck, (letter) => {
+        if (data[letter]) {
+            checked += 1;
+            if (!Number.isNaN(Number(data[letter]))) {
+                passed += 1;
+            }
+            if (letter === 's' || letter === 'l') {
+                const percentPatt = /^\d+%$/;
+                if (percentPatt.test(data[letter])) {
+                    passed += 1;
+                }
+            }
+        }
+    });
+    return checked === passed ? data : false;
+}
+exports.simpleCheckForValidColor = simpleCheckForValidColor;
+function toState(data, oldHue) {
+    const color = data.hex ? (0, tinycolor2_1.default)(data.hex) : (0, tinycolor2_1.default)(data);
+    const hsl = color.toHsl();
+    const hsv = color.toHsv();
+    const rgb = color.toRgb();
+    const hex = color.toHex();
+    if (hsl.s === 0) {
+        hsl.h = oldHue || 0;
+        hsv.h = oldHue || 0;
+    }
+    const transparent = hex === '000000' && rgb.a === 0;
+    return {
+        hsl,
+        hex: transparent ? 'transparent' : `#${hex}`,
+        rgb,
+        hsv,
+        oldHue: data.h || oldHue || hsl.h,
+        source: data.source,
+    };
+}
+exports.toState = toState;
+function isValidHex(hex) {
+    if (hex === 'transparent') {
+        return true;
+    }
+    // disable hex4 and hex8
+    const lh = String(hex).charAt(0) === '#' ? 1 : 0;
+    return (hex.length !== 4 + lh && hex.length < 7 + lh && (0, tinycolor2_1.default)(hex).isValid());
+}
+exports.isValidHex = isValidHex;
+function getContrastingColor(data) {
+    if (!data) {
+        return '#fff';
+    }
+    const col = toState(data);
+    if (col.hex === 'transparent') {
+        return 'rgba(0,0,0,0.4)';
+    }
+    const yiq = (col.rgb.r * 299 + col.rgb.g * 587 + col.rgb.b * 114) / 1000;
+    return yiq >= 128 ? '#000' : '#fff';
+}
+exports.getContrastingColor = getContrastingColor;
+function isvalidColorString(string, type) {
+    const stringWithoutDegree = string.replace('°', '');
+    return (0, tinycolor2_1.default)(`${type} (${stringWithoutDegree})`)._ok;
+}
+exports.isvalidColorString = isvalidColorString;
+const red = {
+    hsl: { a: 1, h: 0, l: 0.5, s: 1 },
+    hex: '#ff0000',
+    rgb: { r: 255, g: 0, b: 0, a: 1 },
+    hsv: { h: 0, s: 1, v: 1, a: 1 },
+};
+exports.red = red;

package/lib/components/color-picker/react-color/helpers/hue.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateChange = void 0;
+function calculateChange(e, direction, hsl, container) {
+    const containerWidth = container.clientWidth;
+    const containerHeight = container.clientHeight;
+    const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
+    const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
+    const left = x - (container.getBoundingClientRect().left + window.pageXOffset);
+    const top = y - (container.getBoundingClientRect().top + window.pageYOffset);
+    if (direction === 'vertical') {
+        let h;
+        if (top < 0) {
+            h = 359;
+        }
+        else if (top > containerHeight) {
+            h = 0;
+        }
+        else {
+            const percent = -((top * 100) / containerHeight) + 100;
+            h = (360 * percent) / 100;
+        }
+        if (hsl.h !== h) {
+            return {
+                h,
+                s: hsl.s,
+                l: hsl.l,
+                a: hsl.a,
+                source: 'hsl',
+            };
+        }
+    }
+    else {
+        let h;
+        if (left < 0) {
+            h = 0;
+        }
+        else if (left > containerWidth) {
+            h = 359;
+        }
+        else {
+            const percent = (left * 100) / containerWidth;
+            h = (360 * percent) / 100;
+        }
+        if (hsl.h !== h) {
+            return {
+                h,
+                s: hsl.s,
+                l: hsl.l,
+                a: hsl.a,
+                source: 'hsl',
+            };
+        }
+    }
+    return null;
+}
+exports.calculateChange = calculateChange;

package/lib/components/color-picker/react-color/helpers/saturation.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateChange = void 0;
+function calculateChange(e, hsl, container) {
+    const { width: containerWidth, height: containerHeight } = container.getBoundingClientRect();
+    const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
+    const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
+    let left = x - (container.getBoundingClientRect().left + window.pageXOffset);
+    let top = y - (container.getBoundingClientRect().top + window.pageYOffset);
+    if (left < 0) {
+        left = 0;
+    }
+    else if (left > containerWidth) {
+        left = containerWidth;
+    }
+    if (top < 0) {
+        top = 0;
+    }
+    else if (top > containerHeight) {
+        top = containerHeight;
+    }
+    const saturation = left / containerWidth;
+    const bright = 1 - top / containerHeight;
+    return {
+        h: hsl.h,
+        s: saturation,
+        v: bright,
+        a: hsl.a,
+        source: 'hsv',
+    };
+}
+exports.calculateChange = calculateChange;

package/lib/components/color-picker/react-color/sketch/SketchFields.js

@@ -0,0 +1,104 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const common_1 = require("../common");
+const color = __importStar(require("../helpers/color"));
+const styles = {
+    fields: {
+        display: 'flex',
+        paddingTop: '4px',
+    },
+    single: {
+        flex: '1',
+        paddingLeft: '6px',
+    },
+    alpha: (disableAlpha) => ({
+        flex: '1',
+        paddingLeft: '6px',
+        ...(disableAlpha && { display: 'none' }),
+    }),
+    double: {
+        flex: '2',
+    },
+    input: {
+        width: '100%',
+        padding: '4px 10% 3px',
+        border: 'none',
+        boxShadow: 'inset 0 0 0 1px #ccc',
+        fontSize: '1em',
+        textAlign: 'center',
+        borderRadius: '3px',
+    },
+    label: {
+        display: 'block',
+        textAlign: 'center',
+        fontSize: '1em',
+        color: '#222',
+        paddingTop: '3px',
+        paddingBottom: '4px',
+        textTransform: 'capitalize',
+    },
+};
+const SketchFields = ({ onChange, rgb, hsl, hex, disableAlpha, }) => {
+    const handleChange = (0, react_1.useCallback)((data, e) => {
+        if (data.hex) {
+            if (color.isValidHex(data.hex)) {
+                onChange({
+                    hex: data.hex,
+                    source: 'hex',
+                }, e);
+            }
+        }
+        else if (data.r || data.g || data.b) {
+            onChange({
+                r: data.r || rgb.r,
+                g: data.g || rgb.g,
+                b: data.b || rgb.b,
+                a: rgb.a,
+                source: 'rgb',
+            }, e);
+        }
+        else if (data.a) {
+            if (data.a < 0) {
+                data.a = 0;
+            }
+            else if (data.a > 100) {
+                data.a = 100;
+            }
+            data.a /= 100;
+            onChange({
+                h: hsl.h,
+                s: hsl.s,
+                l: hsl.l,
+                a: data.a,
+                source: 'rgb',
+            }, e);
+        }
+    }, [hsl.h, hsl.l, hsl.s, onChange, rgb.a, rgb.b, rgb.g, rgb.r]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: styles.fields, children: [(0, jsx_runtime_1.jsx)("div", { style: styles.double, children: (0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: { input: styles.input, label: styles.label }, label: "hex", value: hex.replace('#', ''), onChange: handleChange }) }), (0, jsx_runtime_1.jsx)("div", { style: styles.single, children: (0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: { input: styles.input, label: styles.label }, label: "r", value: rgb.r, onChange: handleChange, dragLabel: "true", dragMax: "255" }) }), (0, jsx_runtime_1.jsx)("div", { style: styles.single, children: (0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: { input: styles.input, label: styles.label }, label: "g", value: rgb.g, onChange: handleChange, dragLabel: "true", dragMax: "255" }) }), (0, jsx_runtime_1.jsx)("div", { style: styles.single, children: (0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: { input: styles.input, label: styles.label }, label: "b", value: rgb.b, onChange: handleChange, dragLabel: "true", dragMax: "255" }) }), (0, jsx_runtime_1.jsx)("div", { style: styles.alpha(disableAlpha), children: (0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: { input: styles.input, label: styles.label }, label: "a", value: Math.round(rgb.a * 100), onChange: handleChange, dragLabel: "true", dragMax: "100" }) })] }));
+};
+exports.default = SketchFields;

package/lib/components/color-picker/react-color/sketch/SketchPresetColors.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const common_1 = require("../common");
+const styles = {
+    colors: (flag) => ({
+        margin: '0 -10px',
+        padding: '10px 0 0 10px',
+        borderTop: '1px solid #eee',
+        display: 'flex',
+        flexWrap: 'wrap',
+        position: 'relative',
+        ...(flag && { display: 'none' }),
+    }),
+    swatchWrap: {
+        width: '16px',
+        height: '16px',
+        margin: '0 10px 10px 0',
+    },
+    swatch: {
+        borderRadius: '3px',
+        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15)',
+    },
+};
+const SketchPresetColors = (props) => {
+    const { colors, onClick, onSwatchHover } = props;
+    const handleClick = (0, react_1.useCallback)((hex, e) => {
+        onClick?.({
+            hex,
+            source: 'hex',
+        }, e);
+    }, [onClick]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: styles.colors(!colors || colors.length === 0), children: colors.map((colorObjOrString) => {
+            const c = typeof colorObjOrString === 'string'
+                ? { color: colorObjOrString }
+                : colorObjOrString;
+            const key = `${c.color}${'title' in c ? c?.title : ''}`;
+            return ((0, jsx_runtime_1.jsx)("div", { style: styles.swatchWrap, children: (0, jsx_runtime_1.jsx)(common_1.Swatch, { ...c, style: styles.swatch, onClick: handleClick, onHover: onSwatchHover, focusStyle: {
+                        boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`,
+                    } }) }, key));
+        }) }));
+};
+exports.default = SketchPresetColors;

package/lib/components/drop-zone/DropZone.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropZoneContainer = exports.DropZone = 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 react_dropzone_1 = require("react-dropzone");
+const fa_1 = require("react-icons/fa");
+const dropZoneCss = {
+    root: (0, react_1.css) `
+    position: relative;
+    height: 100%;
+    width: 100%;
+  `,
+    dragActive: (0, react_1.css) `
+    font-size: 1.5em;
+    font-weight: 600;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0.7;
+    background-color: white;
+    border: 5px dashed;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  `,
+    empty: (0, react_1.css) `
+    font-size: 1.5em;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 1em;
+    border: 5px dashed;
+    cursor: pointer;
+  `,
+};
+function DropZone(props) {
+    return (0, jsx_runtime_1.jsx)(DropZoneContent, { ...props });
+}
+exports.DropZone = DropZone;
+function DropZoneContainer(props) {
+    return (0, jsx_runtime_1.jsx)(DropZoneContent, { ...props });
+}
+exports.DropZoneContainer = DropZoneContainer;
+function DropZoneContent(props) {
+    const { color = 'black', borderColor = 'gray', children = null, onDrop, emptyText = 'Click or drag and drop to add data.', onClick, fileValidator, } = props;
+    const hasChildren = children !== null;
+    const handleOnDrop = (0, react_2.useCallback)((acceptedFiles, rejectedFiles) => {
+        onDrop?.(acceptedFiles, rejectedFiles);
+    }, [onDrop]);
+    const { getRootProps, getInputProps, isDragActive } = (0, react_dropzone_1.useDropzone)({
+        noClick: hasChildren,
+        validator: fileValidator,
+        onDrop: handleOnDrop,
+    });
+    const getPropsOptions = (0, react_2.useMemo)(() => {
+        if (onClick) {
+            return { onClick };
+        }
+    }, [onClick]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...getRootProps(getPropsOptions), css: dropZoneCss.root, children: [children, isDragActive ? ((0, jsx_runtime_1.jsxs)("div", { css: dropZoneCss.dragActive, style: {
+                    borderColor,
+                    color,
+                }, children: [(0, jsx_runtime_1.jsx)(fa_1.FaCloudUploadAlt, { size: 70 }), (0, jsx_runtime_1.jsx)("p", { children: "Drop the files here." })] })) : !hasChildren ? ((0, jsx_runtime_1.jsx)("div", { css: dropZoneCss.empty, style: {
+                    borderColor,
+                    color,
+                }, children: emptyText })) : null, (0, jsx_runtime_1.jsx)("input", { ...getInputProps() })] }));
+}

package/lib/components/drop-zone/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DropZone"), exports);

package/lib/components/dropdown-menu/DropdownMenu.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@headlessui/react");
+const react_2 = require("react");
+const useModifiedPopper_1 = require("../hooks/useModifiedPopper");
+const useOnClickOutside_1 = require("../hooks/useOnClickOutside");
+const useOnOff_1 = require("../hooks/useOnOff");
+const Portal_1 = require("../root-layout/Portal");
+const MenuItems_1 = require("./MenuItems");
+const useContextMenuPlacement_1 = require("./useContextMenuPlacement");
+function DropdownMenu(props) {
+    const { trigger, ...otherProps } = props;
+    if (trigger === 'contextMenu') {
+        return (0, jsx_runtime_1.jsx)(DropdownContextMenu, { ...otherProps });
+    }
+    return ((0, jsx_runtime_1.jsx)(DropdownClickMenu, { ...otherProps, children: props.children }));
+}
+exports.DropdownMenu = DropdownMenu;
+const HandleMenuContextDiv = styled_1.default.div `
+  display: contents;
+`;
+function DropdownContextMenu(props) {
+    const { children, onSelect, ...otherProps } = props;
+    const { isPopperElementOpen, closePopperElement, handleContextMenu, setPopperElement, styles, attributes, } = (0, useContextMenuPlacement_1.useContextMenuPlacement)(otherProps.placement || 'right-start');
+    const ref = (0, react_2.useRef)(null);
+    (0, useOnClickOutside_1.useOnClickOutside)(ref, closePopperElement);
+    return ((0, jsx_runtime_1.jsxs)(HandleMenuContextDiv, { onContextMenu: handleContextMenu, children: [isPopperElementOpen && ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: (0, jsx_runtime_1.jsx)(react_1.Menu, { children: (0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { itemsStatic: true, onSelect: (selected) => {
+                                closePopperElement();
+                                onSelect(selected);
+                            }, ...otherProps }) }) }) })), children] }));
+}
+function DropdownClickMenu(props) {
+    const { placement = 'bottom-start', onSelect, ...otherProps } = props;
+    const [isOpened, , closeItems, toggle] = (0, useOnOff_1.useOnOff)(false);
+    const ref = (0, react_2.useRef)(null);
+    (0, useOnClickOutside_1.useOnClickOutside)(ref, closeItems);
+    const { setReferenceElement, setPopperElement, popperProps } = (0, useModifiedPopper_1.useModifiedPopper)({ placement, offset: 6 });
+    return ((0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Button, { ref: setReferenceElement, onClick: toggle, children: props.children }), isOpened && ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)("div", { ref: setPopperElement, ...popperProps, children: (0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { itemsStatic: true, onSelect: (selected) => {
+                                closeItems();
+                                onSelect(selected);
+                            }, ...otherProps }) }) }) }))] }));
+}

package/lib/components/dropdown-menu/MenuItems.js

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItems = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@headlessui/react");
+const ItemDiv = styled_1.default.div `
+  display: contents;
+  cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};
+  font-size: 0.875rem;
+  color: ${(props) => (!props.disabled ? 'black' : 'rgb(163, 163, 163)')};
+  & > div {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    ${(props) => props.active && 'background-color: rgb(243, 244, 246);'}
+  }
+
+  ${(props) => !props.disabled &&
+    `
+          &:hover > div {
+            background-color: rgb(243, 244, 246);
+          }
+        `}
+`;
+const Divider = styled_1.default.hr `
+  width: 100%;
+  color: rgb(229, 229, 229);
+  margin-top: 5px;
+  margin-bottom: 5px;
+  grid-column: 1 / -1;
+`;
+const ItemsDiv = styled_1.default.div `
+  display: grid;
+  grid-template-columns: [icon-start] ${(props) => props.hasOneIconOrMore ? '40px' : '0px'} [label-start] auto;
+  width: fit-content;
+  align-items: center;
+  border-radius: 6px;
+  background-color: white;
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 5px 12px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  --cell-padding: 16px;
+`;
+const LabelDiv = styled_1.default.div `
+  grid-column-start: label-start;
+  padding-right: var(--cell-padding);
+  padding-left: var(--cell-padding);
+`;
+const IconDiv = styled_1.default.div `
+  grid-column-start: icon-start;
+  width: 100%;
+  height: 100%;
+  padding-left: var(--cell-padding);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+function MenuItems(props) {
+    const { options, onSelect, itemsStatic } = props;
+    const hasOneOrMoreIcon = options.some((option) => option.type === 'option' && option.icon);
+    return ((0, jsx_runtime_1.jsx)(react_1.Menu.Items, { as: ItemsDiv, static: itemsStatic, hasOneIconOrMore: hasOneOrMoreIcon, children: options.map((option, index) => ((0, jsx_runtime_1.jsx)(Item
+        // eslint-disable-next-line react/no-array-index-key
+        , { onSelect: onSelect, option: option }, index))) }));
+}
+exports.MenuItems = MenuItems;
+function Item(props) {
+    const { option, onSelect } = props;
+    const isDivider = option.type === 'divider';
+    if (isDivider) {
+        return (0, jsx_runtime_1.jsx)(Divider, {});
+    }
+    return ((0, jsx_runtime_1.jsx)(react_1.Menu.Item, { disabled: option.disabled, children: ({ active }) => ((0, jsx_runtime_1.jsxs)(ItemDiv, { onClick: () => {
+                onSelect(option);
+            }, active: active, disabled: option.disabled || false, children: [(0, jsx_runtime_1.jsx)(IconDiv, { children: option.icon }), (0, jsx_runtime_1.jsx)(LabelDiv, { children: option.label })] })) }));
+}

package/lib/components/dropdown-menu/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DropdownMenu"), exports);