@aivenio/aquarium 5.0.0 → 5.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/atoms.cjs +5 -6
- package/dist/atoms.mjs +12 -13
- package/dist/src/atoms/Popover/Popover.d.ts +1 -1
- package/dist/src/atoms/Popover/Popover.js +3 -2
- package/dist/src/molecules/Drawer/Drawer.js +4 -12
- package/dist/src/molecules/Modal/Modal.js +4 -12
- package/dist/styles.css +3 -0
- package/dist/system.cjs +20 -33
- package/dist/system.mjs +30 -43
- package/dist/tsconfig.module.tsbuildinfo +1 -1
- package/package.json +1 -1
package/dist/atoms.cjs
CHANGED
|
@@ -6569,7 +6569,7 @@ var tailwind_theme_default = {
|
|
|
6569
6569
|
// src/molecules/Context/Context.tsx
|
|
6570
6570
|
var import_react139 = __toESM(require("react"));
|
|
6571
6571
|
var import_i18n = require("@react-aria/i18n");
|
|
6572
|
-
var
|
|
6572
|
+
var import_overlays8 = require("@react-aria/overlays");
|
|
6573
6573
|
|
|
6574
6574
|
// src/utils/breakpoints.ts
|
|
6575
6575
|
var import_lodash_es = require("lodash-es");
|
|
@@ -8976,7 +8976,8 @@ var import_react55 = __toESM(require("react"));
|
|
|
8976
8976
|
var import_react_aria_components = require("react-aria-components");
|
|
8977
8977
|
var import_tailwind_variants13 = require("tailwind-variants");
|
|
8978
8978
|
var popoverStyles = (0, import_tailwind_variants13.tv)({
|
|
8979
|
-
|
|
8979
|
+
// z-[101] ensures popover appears above modal (z-modal: 100)
|
|
8980
|
+
base: "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none z-[101]"
|
|
8980
8981
|
});
|
|
8981
8982
|
var Popover = import_react55.default.forwardRef(
|
|
8982
8983
|
({ children, offset = 0, className, placement: _placement = "bottom-left", ...props }, ref) => {
|
|
@@ -14702,7 +14703,6 @@ Modal.Actions = ({ children, className, ...rest }) => {
|
|
|
14702
14703
|
// src/molecules/Drawer/Drawer.tsx
|
|
14703
14704
|
var import_react96 = __toESM(require("react"));
|
|
14704
14705
|
var import_react_aria_components15 = require("react-aria-components");
|
|
14705
|
-
var import_overlays7 = require("@react-aria/overlays");
|
|
14706
14706
|
var import_web4 = require("@react-spring/web");
|
|
14707
14707
|
var import_clsx30 = require("clsx");
|
|
14708
14708
|
var import_lodash_es34 = require("lodash-es");
|
|
@@ -15269,7 +15269,6 @@ var import_react103 = __toESM(require("react"));
|
|
|
15269
15269
|
// src/molecules/Modal/Modal.tsx
|
|
15270
15270
|
var import_react104 = __toESM(require("react"));
|
|
15271
15271
|
var import_react_aria_components19 = require("react-aria-components");
|
|
15272
|
-
var import_overlays8 = require("@react-aria/overlays");
|
|
15273
15272
|
var import_clsx34 = require("clsx");
|
|
15274
15273
|
var import_lodash_es35 = require("lodash-es");
|
|
15275
15274
|
var import_cross7 = __toESM(require_cross());
|
|
@@ -15535,7 +15534,7 @@ MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
|
|
|
15535
15534
|
|
|
15536
15535
|
// src/molecules/MultiSelect/MultiSelect.tsx
|
|
15537
15536
|
var import_react107 = __toESM(require("react"));
|
|
15538
|
-
var
|
|
15537
|
+
var import_overlays7 = require("@react-aria/overlays");
|
|
15539
15538
|
var import_utils33 = require("@react-aria/utils");
|
|
15540
15539
|
var import_downshift3 = require("downshift");
|
|
15541
15540
|
var import_lodash_es37 = require("lodash-es");
|
|
@@ -15649,7 +15648,7 @@ var MultiSelectBase = ({
|
|
|
15649
15648
|
});
|
|
15650
15649
|
(0, import_react107.useEffect)(() => {
|
|
15651
15650
|
if (isOpen && inputRef.current && popoverRef.current) {
|
|
15652
|
-
return (0,
|
|
15651
|
+
return (0, import_overlays7.ariaHideOutside)([inputRef.current, popoverRef.current]);
|
|
15653
15652
|
}
|
|
15654
15653
|
}, [isOpen, inputRef, popoverRef]);
|
|
15655
15654
|
const renderItem = (item, index) => /* @__PURE__ */ import_react107.default.createElement(
|
package/dist/atoms.mjs
CHANGED
|
@@ -8916,7 +8916,8 @@ import {
|
|
|
8916
8916
|
} from "react-aria-components";
|
|
8917
8917
|
import { tv as tv13 } from "tailwind-variants";
|
|
8918
8918
|
var popoverStyles = tv13({
|
|
8919
|
-
|
|
8919
|
+
// z-[101] ensures popover appears above modal (z-modal: 100)
|
|
8920
|
+
base: "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none z-[101]"
|
|
8920
8921
|
});
|
|
8921
8922
|
var Popover = React49.forwardRef(
|
|
8922
8923
|
({ children, offset = 0, className, placement: _placement = "bottom-left", ...props }, ref) => {
|
|
@@ -14685,9 +14686,8 @@ Modal.Actions = ({ children, className, ...rest }) => {
|
|
|
14685
14686
|
};
|
|
14686
14687
|
|
|
14687
14688
|
// src/molecules/Drawer/Drawer.tsx
|
|
14688
|
-
import React88
|
|
14689
|
+
import React88 from "react";
|
|
14689
14690
|
import { Dialog as AriaDialog2, Modal as AriaModal, ModalOverlay as AriaModalOverlay } from "react-aria-components";
|
|
14690
|
-
import { UNSTABLE_PortalProvider } from "@react-aria/overlays";
|
|
14691
14691
|
import { animated as animated4, useSpring as useSpring3 } from "@react-spring/web";
|
|
14692
14692
|
import { clsx as clsx30 } from "clsx";
|
|
14693
14693
|
import { castArray as castArray4, omit as omit10 } from "lodash-es";
|
|
@@ -15257,9 +15257,8 @@ import React94 from "react";
|
|
|
15257
15257
|
import React95 from "react";
|
|
15258
15258
|
|
|
15259
15259
|
// src/molecules/Modal/Modal.tsx
|
|
15260
|
-
import React96
|
|
15260
|
+
import React96 from "react";
|
|
15261
15261
|
import { Dialog as AriaDialog3, Modal as AriaModal2, ModalOverlay as AriaModalOverlay2 } from "react-aria-components";
|
|
15262
|
-
import { UNSTABLE_PortalProvider as UNSTABLE_PortalProvider2 } from "@react-aria/overlays";
|
|
15263
15262
|
import { clsx as clsx34 } from "clsx";
|
|
15264
15263
|
import { castArray as castArray5, isEmpty as isEmpty2, omit as omit11 } from "lodash-es";
|
|
15265
15264
|
var import_cross7 = __toESM(require_cross());
|
|
@@ -15273,7 +15272,7 @@ var ModalTabs = createTabsComponent(
|
|
|
15273
15272
|
);
|
|
15274
15273
|
|
|
15275
15274
|
// src/molecules/MultiInput/MultiInput.tsx
|
|
15276
|
-
import React98, { useEffect as useEffect8, useRef as
|
|
15275
|
+
import React98, { useEffect as useEffect8, useRef as useRef12, useState as useState11 } from "react";
|
|
15277
15276
|
import { useId as useId12 } from "@react-aria/utils";
|
|
15278
15277
|
import { castArray as castArray6, identity, omit as omit12 } from "lodash-es";
|
|
15279
15278
|
|
|
@@ -15355,7 +15354,7 @@ var MultiInputBase = ({
|
|
|
15355
15354
|
valid = true,
|
|
15356
15355
|
...props
|
|
15357
15356
|
}) => {
|
|
15358
|
-
const inputRef =
|
|
15357
|
+
const inputRef = useRef12(null);
|
|
15359
15358
|
const [items, setItems] = useState11(value ?? defaultValue ?? []);
|
|
15360
15359
|
const [hasFocus, setFocus] = useState11(false);
|
|
15361
15360
|
const keyCodes = [delimiter !== "enter" ? " " : null, delimiter !== "space" ? "Enter" : null].filter(identity);
|
|
@@ -15524,7 +15523,7 @@ MultiInput.Skeleton = MultiInputSkeleton;
|
|
|
15524
15523
|
MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
|
|
15525
15524
|
|
|
15526
15525
|
// src/molecules/MultiSelect/MultiSelect.tsx
|
|
15527
|
-
import React99, { useEffect as useEffect9, useRef as
|
|
15526
|
+
import React99, { useEffect as useEffect9, useRef as useRef13, useState as useState12 } from "react";
|
|
15528
15527
|
import { ariaHideOutside as ariaHideOutside3 } from "@react-aria/overlays";
|
|
15529
15528
|
import { useId as useId13 } from "@react-aria/utils";
|
|
15530
15529
|
import { useCombobox as useCombobox2, useMultipleSelection } from "downshift";
|
|
@@ -15554,10 +15553,10 @@ var MultiSelectBase = ({
|
|
|
15554
15553
|
children,
|
|
15555
15554
|
...props
|
|
15556
15555
|
}) => {
|
|
15557
|
-
const popoverRef =
|
|
15558
|
-
const targetRef =
|
|
15559
|
-
const menuRef =
|
|
15560
|
-
const inputRef =
|
|
15556
|
+
const popoverRef = useRef13(null);
|
|
15557
|
+
const targetRef = useRef13(null);
|
|
15558
|
+
const menuRef = useRef13(null);
|
|
15559
|
+
const inputRef = useRef13(null);
|
|
15561
15560
|
const [inputValue, setInputValue] = useState12("");
|
|
15562
15561
|
const [hasFocus, setFocus] = useState12(false);
|
|
15563
15562
|
const { selectedItems, addSelectedItem, removeSelectedItem, getDropdownProps, getSelectedItemProps } = useMultipleSelection(
|
|
@@ -16266,7 +16265,7 @@ RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
|
|
|
16266
16265
|
RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
|
|
16267
16266
|
|
|
16268
16267
|
// src/molecules/Section/Section.tsx
|
|
16269
|
-
import React115, { useRef as
|
|
16268
|
+
import React115, { useRef as useRef14 } from "react";
|
|
16270
16269
|
import { useButton as useButton4 } from "@react-aria/button";
|
|
16271
16270
|
import { useId as useId16 } from "@react-aria/utils";
|
|
16272
16271
|
import { animated as animated5, useSpring as useSpring4 } from "@react-spring/web";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type PopoverProps as AriaPopoverProps } from 'react-aria-components';
|
|
3
3
|
import type { Simplify } from '../../../types/utils';
|
|
4
|
-
export declare const popoverStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
|
|
4
|
+
export declare const popoverStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none z-[101]", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none z-[101]", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
|
|
5
5
|
export type PopoverPlacement = 'bottom-end' | 'bottom-left' | 'bottom-right' | 'bottom-start' | 'bottom' | 'end-bottom' | 'end-top' | 'end' | 'left-bottom' | 'left-top' | 'left' | 'right-bottom' | 'right-top' | 'right' | 'start-bottom' | 'start-top' | 'start' | 'top-end' | 'top-left' | 'top-right' | 'top-start' | 'top';
|
|
6
6
|
export type PopoverProps = Simplify<Omit<AriaPopoverProps, 'children' | 'placement'> & {
|
|
7
7
|
offset?: number;
|
|
@@ -13,7 +13,8 @@ import React from 'react';
|
|
|
13
13
|
import { composeRenderProps, OverlayArrow, Popover as AriaPopover, } from 'react-aria-components';
|
|
14
14
|
import { tv } from 'tailwind-variants';
|
|
15
15
|
export const popoverStyles = tv({
|
|
16
|
-
|
|
16
|
+
// z-[101] ensures popover appears above modal (z-modal: 100)
|
|
17
|
+
base: 'rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none z-[101]',
|
|
17
18
|
});
|
|
18
19
|
export const Popover = React.forwardRef((_a, ref) => {
|
|
19
20
|
var { children, offset = 0, className, placement: _placement = 'bottom-left' } = _a, props = __rest(_a, ["children", "offset", "className", "placement"]);
|
|
@@ -25,4 +26,4 @@ const PopoverArrow = () => (React.createElement(OverlayArrow, { className: "grou
|
|
|
25
26
|
React.createElement("path", { d: "M0 0 L6 6 L12 0" }))));
|
|
26
27
|
PopoverArrow.displayName = 'Popover.Arrow';
|
|
27
28
|
Popover.Arrow = PopoverArrow;
|
|
28
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
29
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUG9wb3Zlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9Qb3BvdmVyL1BvcG92ZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFDTCxrQkFBa0IsRUFDbEIsWUFBWSxFQUNaLE9BQU8sSUFBSSxXQUFXLEdBRXZCLE1BQU0sdUJBQXVCLENBQUM7QUFDL0IsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBS3ZDLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxFQUFFLENBQUM7SUFDOUIsNkRBQTZEO0lBQzdELElBQUksRUFBRSx5SEFBeUg7Q0FDaEksQ0FBQyxDQUFDO0FBMENILE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBcUIsS0FBSyxDQUFDLFVBQVUsQ0FDdkQsQ0FBQyxFQUFvRixFQUFFLEdBQUcsRUFBRSxFQUFFO1FBQTdGLEVBQUUsUUFBUSxFQUFFLE1BQU0sR0FBRyxDQUFDLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxVQUFVLEdBQUcsYUFBYSxPQUFZLEVBQVAsS0FBSyxjQUFsRixnREFBb0YsQ0FBRjtJQUNqRixNQUFNLFNBQVMsR0FBRyxVQUFVLENBQUMsT0FBTyxDQUFDLEdBQUcsRUFBRSxHQUFHLENBQWMsQ0FBQztJQUU1RCxPQUFPLENBQ0wsb0JBQUMsV0FBVyxrQkFDVixHQUFHLEVBQUUsR0FBRyxFQUNSLE1BQU0sRUFBRSxNQUFNLEVBQ2QsU0FBUyxFQUFFLFNBQVMsSUFDaEIsS0FBSyxJQUNULFNBQVMsRUFBRSxrQkFBa0IsQ0FBQyxTQUFTLEVBQUUsQ0FBQyxTQUFTLEVBQUUsV0FBVyxFQUFFLEVBQUUsQ0FDbEUsYUFBYSxpQ0FBTSxXQUFXLEtBQUUsU0FBUyxJQUFHLENBQzdDLEtBRUEsUUFBUSxDQUNHLENBQ2YsQ0FBQztBQUNKLENBQUMsQ0FDa0IsQ0FBQztBQUV0QixNQUFNLFlBQVksR0FBYSxHQUFHLEVBQUUsQ0FBQyxDQUNuQyxvQkFBQyxZQUFZLElBQUMsU0FBUyxFQUFDLE9BQU87SUFDN0IsNkJBQ0UsS0FBSyxFQUFFLEVBQUUsRUFDVCxNQUFNLEVBQUUsRUFBRSxFQUNWLE9BQU8sRUFBQyxXQUFXLEVBQ25CLFNBQVMsRUFBQywwSUFBMEk7UUFFcEosOEJBQU0sQ0FBQyxFQUFDLGlCQUFpQixHQUFHLENBQ3hCLENBQ08sQ0FDaEIsQ0FBQztBQUNGLFlBQVksQ0FBQyxXQUFXLEdBQUcsZUFBZSxDQUFDO0FBRTNDLE9BQU8sQ0FBQyxLQUFLLEdBQUcsWUFBWSxDQUFDIn0=
|
|
@@ -9,9 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import React
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import { Dialog as AriaDialog, Modal as AriaModal, ModalOverlay as AriaModalOverlay } from 'react-aria-components';
|
|
14
|
-
import { UNSTABLE_PortalProvider } from '@react-aria/overlays';
|
|
15
14
|
import { animated, useSpring } from '@react-spring/web';
|
|
16
15
|
import { clsx } from 'clsx';
|
|
17
16
|
import { castArray, omit } from 'lodash-es';
|
|
@@ -32,7 +31,6 @@ const WIDTHS = {
|
|
|
32
31
|
lg: 1080,
|
|
33
32
|
};
|
|
34
33
|
export const Drawer = ({ open, onClose, size = 'sm', children, title, menu, menuAriaLabel, onMenuOpenChange, onAction, primaryAction, secondaryActions, closeOnEsc = true, }) => {
|
|
35
|
-
const portalContainerRef = useRef(null);
|
|
36
34
|
/*
|
|
37
35
|
* We need a local state to keep track of the drawer being open or not. This is needed
|
|
38
36
|
* because the drawer is animated and we need to wait for the animation to finish before
|
|
@@ -71,18 +69,12 @@ export const Drawer = ({ open, onClose, size = 'sm', children, title, menu, menu
|
|
|
71
69
|
React.createElement(AnimatedBackDrop, { style: { opacity } }),
|
|
72
70
|
React.createElement(AriaModal, null,
|
|
73
71
|
React.createElement(AnimatedDialog, { kind: "drawer", "aria-modal": "true", size: dialogSize, style: { position: 'fixed', right } },
|
|
74
|
-
React.createElement(AriaDialog, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => (
|
|
75
|
-
// Create a portal provider to allow nested overlays (Select, Combobox, DatePicker, etc.) to
|
|
76
|
-
// be rendered inside the modal.
|
|
77
|
-
// See: https://react-aria.adobe.com/PortalProvider
|
|
78
|
-
React.createElement(UNSTABLE_PortalProvider, { getContainer: () => portalContainerRef.current },
|
|
72
|
+
React.createElement(AriaDialog, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => (React.createElement(React.Fragment, null,
|
|
79
73
|
React.createElement(BaseModal.CloseButtonContainer, null,
|
|
80
74
|
React.createElement(Button.Icon, { "aria-label": "Close", icon: cross, onClick: close })),
|
|
81
75
|
React.createElement(BaseModal.Header, { className: clsx({ 'pb-3': hasTabs }) },
|
|
82
76
|
React.createElement(ModalTitle, { kind: "drawer" }, title)),
|
|
83
|
-
hasTabs ? (React.createElement(DrawerTabs, Object.assign({}, onlyChild.props, { className: "[&>div:first-child]:px-5 grow flex flex-col overflow-y-auto" }))) : (React.createElement(BaseModal.Body, { tabIndex: 0, noFooter: !(secondaryActions !== null && secondaryActions !== void 0 ? secondaryActions : primaryAction) },
|
|
84
|
-
children,
|
|
85
|
-
React.createElement("div", { ref: portalContainerRef, className: "relative" }))),
|
|
77
|
+
hasTabs ? (React.createElement(DrawerTabs, Object.assign({}, onlyChild.props, { className: "[&>div:first-child]:px-5 grow flex flex-col overflow-y-auto" }))) : (React.createElement(BaseModal.Body, { tabIndex: 0, noFooter: !(secondaryActions !== null && secondaryActions !== void 0 ? secondaryActions : primaryAction) }, children)),
|
|
86
78
|
(secondaryActions !== null && secondaryActions !== void 0 ? secondaryActions : primaryAction) && (React.createElement(BaseModal.Footer, null,
|
|
87
79
|
React.createElement(BaseModal.Actions, { className: size === 'sm' ? 'flex-col' : undefined },
|
|
88
80
|
size !== 'sm' && menu && (React.createElement(Box.Flex, { alignItems: "center" },
|
|
@@ -101,4 +93,4 @@ export const Drawer = ({ open, onClose, size = 'sm', children, title, menu, menu
|
|
|
101
93
|
};
|
|
102
94
|
const DrawerTabs = createTabsComponent(ModalTab, TabItem, 'DrawerTabs', (children, selected) => (React.createElement(BaseModal.Body, { className: "h-full" },
|
|
103
95
|
React.createElement(ModalTabContainer, { className: "!py-4" }, children.find((node, index) => (node === null || node === void 0 ? void 0 : node.props.value) === selected || index === selected)))));
|
|
104
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
96
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRHJhd2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL21vbGVjdWxlcy9EcmF3ZXIvRHJhd2VyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUUsTUFBTSxJQUFJLFVBQVUsRUFBRSxLQUFLLElBQUksU0FBUyxFQUFFLFlBQVksSUFBSSxnQkFBZ0IsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ25ILE9BQU8sRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDeEQsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUM1QixPQUFPLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUU1QyxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDNUMsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3JELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUN2RSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDNUQsT0FBTyxFQUNMLG1CQUFtQixFQUNuQixRQUFRLEVBQ1IsWUFBWSxJQUFJLGlCQUFpQixFQUNqQyxPQUFPLEVBRVAsSUFBSSxHQUNMLE1BQU0seUJBQXlCLENBQUM7QUFFakMsT0FBTyxFQUFFLEtBQUssSUFBSSxTQUFTLEVBQUUsV0FBVyxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFFeEUsT0FBTyxFQUFrQixlQUFlLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFFOUQsT0FBTyxLQUFLLE1BQU0saUJBQWlCLENBQUM7QUFDcEMsT0FBTyxJQUFJLE1BQU0sZ0JBQWdCLENBQUM7QUFhbEMsTUFBTSxnQkFBZ0IsR0FBRyxRQUFRLENBQUMsU0FBUyxDQUFDLFFBQVEs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
|
|
@@ -9,9 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import React
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import { Dialog as AriaDialog, Modal as AriaModal, ModalOverlay as AriaModalOverlay } from 'react-aria-components';
|
|
14
|
-
import { UNSTABLE_PortalProvider } from '@react-aria/overlays';
|
|
15
14
|
import { clsx } from 'clsx';
|
|
16
15
|
import { castArray, isEmpty, omit } from 'lodash-es';
|
|
17
16
|
import { Button } from '../../../src/molecules/Button/Button';
|
|
@@ -21,7 +20,6 @@ import { isComponentType } from '../../../types/utils';
|
|
|
21
20
|
import cross from '../../../src/icons/cross';
|
|
22
21
|
import { ModalTitle } from './ModalTitle';
|
|
23
22
|
export const Modal = ({ open, onClose, closeOnEsc = true, size = 'md', headerImage, children, title, subtitle, primaryAction, secondaryActions, }) => {
|
|
24
|
-
const portalContainerRef = useRef(null);
|
|
25
23
|
if (!open) {
|
|
26
24
|
return null;
|
|
27
25
|
}
|
|
@@ -31,11 +29,7 @@ export const Modal = ({ open, onClose, closeOnEsc = true, size = 'md', headerIma
|
|
|
31
29
|
return (React.createElement(AriaModalOverlay, { isOpen: open, onOpenChange: (isOpen) => !isOpen && onClose(), isDismissable: false, isKeyboardDismissDisabled: !closeOnEsc, className: styles.overlay({ className: 'Aquarium-Modal' }) },
|
|
32
30
|
size !== 'screen' && React.createElement(BaseModal.BackDrop, { className: styles.backdrop() }),
|
|
33
31
|
React.createElement(AriaModal, { className: styles.dialog() },
|
|
34
|
-
React.createElement(AriaDialog, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => (
|
|
35
|
-
// Create a portal provider to allow nested overlays (Select, Combobox, DatePicker, etc.) to
|
|
36
|
-
// be rendered inside the modal.
|
|
37
|
-
// See: https://react-aria.adobe.com/PortalProvider
|
|
38
|
-
React.createElement(UNSTABLE_PortalProvider, { getContainer: () => portalContainerRef.current },
|
|
32
|
+
React.createElement(AriaDialog, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => (React.createElement(React.Fragment, null,
|
|
39
33
|
React.createElement(BaseModal.CloseButtonContainer, null,
|
|
40
34
|
React.createElement(Button.Icon, { "aria-label": "Close", icon: cross, onClick: close })),
|
|
41
35
|
headerImage !== undefined && React.createElement(BaseModal.HeaderImage, { backgroundImage: headerImage }),
|
|
@@ -43,9 +37,7 @@ export const Modal = ({ open, onClose, closeOnEsc = true, size = 'md', headerIma
|
|
|
43
37
|
React.createElement(BaseModal.TitleContainer, null,
|
|
44
38
|
React.createElement(ModalTitle, { kind: "dialog" }, title),
|
|
45
39
|
subtitle && React.createElement(BaseModal.Subtitle, null, subtitle))),
|
|
46
|
-
hasTabs ? (React.cloneElement(children, { className: '[&>div:first-child]:px-5 grow' })) : (React.createElement(BaseModal.Body, { tabIndex: 0, noFooter: !hasActions, size: size },
|
|
47
|
-
children,
|
|
48
|
-
React.createElement("div", { ref: portalContainerRef, className: "relative" }))),
|
|
40
|
+
hasTabs ? (React.cloneElement(children, { className: '[&>div:first-child]:px-5 grow' })) : (React.createElement(BaseModal.Body, { tabIndex: 0, noFooter: !hasActions, size: size }, children)),
|
|
49
41
|
hasActions && (React.createElement(BaseModal.Footer, null,
|
|
50
42
|
React.createElement(BaseModal.Actions, null,
|
|
51
43
|
secondaryActions &&
|
|
@@ -59,4 +51,4 @@ export const Modal = ({ open, onClose, closeOnEsc = true, size = 'md', headerIma
|
|
|
59
51
|
};
|
|
60
52
|
export const ModalTabs = createTabsComponent(ModalTab, TabItem, 'ModalTabs', (children, selected, props) => (React.createElement(BaseModal.Body, { maxHeight: props.maxHeight },
|
|
61
53
|
React.createElement(ModalTabContainer, { className: "!py-4" }, children.find((node, index) => (node === null || node === void 0 ? void 0 : node.props.value) === selected || index === selected)))));
|
|
62
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
54
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL01vZGFsL01vZGFsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUUsTUFBTSxJQUFJLFVBQVUsRUFBRSxLQUFLLElBQUksU0FBUyxFQUFFLFlBQVksSUFBSSxnQkFBZ0IsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ25ILE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDNUIsT0FBTyxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBRXJELE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUNyRCxPQUFPLEVBQ0wsbUJBQW1CLEVBQ25CLFFBQVEsRUFDUixZQUFZLElBQUksaUJBQWlCLEVBQ2pDLE9BQU8sR0FJUixNQUFNLHlCQUF5QixDQUFDO0FBRWpDLE9BQU8sRUFBRSxLQUFLLElBQUksU0FBUyxFQUFrQixXQUFXLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUV4RixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBRTlDLE9BQU8sS0FBSyxNQUFNLGlCQUFpQixDQUFDO0FBRXBDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUEyQzFDLE1BQU0sQ0FBQyxNQUFNLEtBQUssR0FBeUIsQ0FBQyxFQUMxQyxJQUFJLEVBQ0osT0FBTyxFQUNQLFVBQVUsR0FBRyxJQUFJLEVBQ2pCLElBQUksR0FBRyxJQUFJLEVBQ1gsV0FBVyxFQUNYLFFBQVEsRUFDUixLQUFLLEVBQ0wsUUFBUSxFQUNSLGFBQWEsRUFDYixnQkFBZ0IsR0FDakIsRUFBRSxFQUFFO0lBQ0gsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ1YsT0FBTyxJQUFJLENB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
|
package/dist/styles.css
CHANGED
package/dist/system.cjs
CHANGED
|
@@ -9793,7 +9793,8 @@ var import_react62 = __toESM(require("react"));
|
|
|
9793
9793
|
var import_react_aria_components = require("react-aria-components");
|
|
9794
9794
|
var import_tailwind_variants14 = require("tailwind-variants");
|
|
9795
9795
|
var popoverStyles = (0, import_tailwind_variants14.tv)({
|
|
9796
|
-
|
|
9796
|
+
// z-[101] ensures popover appears above modal (z-modal: 100)
|
|
9797
|
+
base: "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none z-[101]"
|
|
9797
9798
|
});
|
|
9798
9799
|
var Popover = import_react62.default.forwardRef(
|
|
9799
9800
|
({ children, offset = 0, className, placement: _placement = "bottom-left", ...props }, ref) => {
|
|
@@ -15572,7 +15573,6 @@ var DialogWrapper = ({
|
|
|
15572
15573
|
// src/molecules/Drawer/Drawer.tsx
|
|
15573
15574
|
var import_react103 = __toESM(require("react"));
|
|
15574
15575
|
var import_react_aria_components15 = require("react-aria-components");
|
|
15575
|
-
var import_overlays8 = require("@react-aria/overlays");
|
|
15576
15576
|
var import_web5 = require("@react-spring/web");
|
|
15577
15577
|
var import_clsx31 = require("clsx");
|
|
15578
15578
|
var import_lodash_es37 = require("lodash-es");
|
|
@@ -15892,7 +15892,6 @@ var Drawer = ({
|
|
|
15892
15892
|
secondaryActions,
|
|
15893
15893
|
closeOnEsc = true
|
|
15894
15894
|
}) => {
|
|
15895
|
-
const portalContainerRef = (0, import_react103.useRef)(null);
|
|
15896
15895
|
const [hidden, setHidden] = import_react103.default.useState(!open);
|
|
15897
15896
|
if (open && hidden) {
|
|
15898
15897
|
setHidden(!open);
|
|
@@ -15929,18 +15928,13 @@ var Drawer = ({
|
|
|
15929
15928
|
className: styles.overlay({ className: "Aquarium-Drawer" })
|
|
15930
15929
|
},
|
|
15931
15930
|
/* @__PURE__ */ import_react103.default.createElement(AnimatedBackDrop, { style: { opacity } }),
|
|
15932
|
-
/* @__PURE__ */ import_react103.default.createElement(import_react_aria_components15.Modal, null, /* @__PURE__ */ import_react103.default.createElement(AnimatedDialog, { kind: "drawer", "aria-modal": "true", size: dialogSize, style: { position: "fixed", right } }, /* @__PURE__ */ import_react103.default.createElement(import_react_aria_components15.Dialog, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => (
|
|
15933
|
-
|
|
15934
|
-
|
|
15935
|
-
|
|
15936
|
-
|
|
15937
|
-
|
|
15938
|
-
|
|
15939
|
-
...onlyChild.props,
|
|
15940
|
-
className: "[&>div:first-child]:px-5 grow flex flex-col overflow-y-auto"
|
|
15941
|
-
}
|
|
15942
|
-
) : /* @__PURE__ */ import_react103.default.createElement(Modal.Body, { tabIndex: 0, noFooter: !(secondaryActions ?? primaryAction) }, children, /* @__PURE__ */ import_react103.default.createElement("div", { ref: portalContainerRef, className: "relative" })), (secondaryActions ?? primaryAction) && /* @__PURE__ */ import_react103.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react103.default.createElement(Modal.Actions, { className: size === "sm" ? "flex-col" : void 0 }, size !== "sm" && menu && /* @__PURE__ */ import_react103.default.createElement(Box.Flex, { alignItems: "center" }, /* @__PURE__ */ import_react103.default.createElement(DropdownMenu2, { onAction: (action) => onAction(action), onOpenChange: onMenuOpenChange }, /* @__PURE__ */ import_react103.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react103.default.createElement(Button2.Icon, { "aria-label": menuAriaLabel ?? "Context menu", icon: import_more4.default })), menu)), secondaryActions && (0, import_lodash_es37.castArray)(secondaryActions).filter(Boolean).map(({ text, ...action }) => /* @__PURE__ */ import_react103.default.createElement(Button2.Secondary, { key: text, ...action }, text)), primaryAction && /* @__PURE__ */ import_react103.default.createElement(Button2.Primary, { key: primaryAction.text, ...(0, import_lodash_es37.omit)(primaryAction, "text") }, primaryAction.text))))
|
|
15943
|
-
))))
|
|
15931
|
+
/* @__PURE__ */ import_react103.default.createElement(import_react_aria_components15.Modal, null, /* @__PURE__ */ import_react103.default.createElement(AnimatedDialog, { kind: "drawer", "aria-modal": "true", size: dialogSize, style: { position: "fixed", right } }, /* @__PURE__ */ import_react103.default.createElement(import_react_aria_components15.Dialog, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => /* @__PURE__ */ import_react103.default.createElement(import_react103.default.Fragment, null, /* @__PURE__ */ import_react103.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react103.default.createElement(Button2.Icon, { "aria-label": "Close", icon: import_cross6.default, onClick: close })), /* @__PURE__ */ import_react103.default.createElement(Modal.Header, { className: (0, import_clsx31.clsx)({ "pb-3": hasTabs }) }, /* @__PURE__ */ import_react103.default.createElement(ModalTitle, { kind: "drawer" }, title)), hasTabs ? /* @__PURE__ */ import_react103.default.createElement(
|
|
15932
|
+
DrawerTabs,
|
|
15933
|
+
{
|
|
15934
|
+
...onlyChild.props,
|
|
15935
|
+
className: "[&>div:first-child]:px-5 grow flex flex-col overflow-y-auto"
|
|
15936
|
+
}
|
|
15937
|
+
) : /* @__PURE__ */ import_react103.default.createElement(Modal.Body, { tabIndex: 0, noFooter: !(secondaryActions ?? primaryAction) }, children), (secondaryActions ?? primaryAction) && /* @__PURE__ */ import_react103.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react103.default.createElement(Modal.Actions, { className: size === "sm" ? "flex-col" : void 0 }, size !== "sm" && menu && /* @__PURE__ */ import_react103.default.createElement(Box.Flex, { alignItems: "center" }, /* @__PURE__ */ import_react103.default.createElement(DropdownMenu2, { onAction: (action) => onAction(action), onOpenChange: onMenuOpenChange }, /* @__PURE__ */ import_react103.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react103.default.createElement(Button2.Icon, { "aria-label": menuAriaLabel ?? "Context menu", icon: import_more4.default })), menu)), secondaryActions && (0, import_lodash_es37.castArray)(secondaryActions).filter(Boolean).map(({ text, ...action }) => /* @__PURE__ */ import_react103.default.createElement(Button2.Secondary, { key: text, ...action }, text)), primaryAction && /* @__PURE__ */ import_react103.default.createElement(Button2.Primary, { key: primaryAction.text, ...(0, import_lodash_es37.omit)(primaryAction, "text") }, primaryAction.text)))))))
|
|
15944
15938
|
);
|
|
15945
15939
|
};
|
|
15946
15940
|
var DrawerTabs = createTabsComponent(ModalTab, TabItem, "DrawerTabs", (children, selected) => /* @__PURE__ */ import_react103.default.createElement(Modal.Body, { className: "h-full" }, /* @__PURE__ */ import_react103.default.createElement(TabContainer, { className: "!py-4" }, children.find(
|
|
@@ -16344,7 +16338,6 @@ var ListItem = ({ name, icon, active = false }) => {
|
|
|
16344
16338
|
// src/molecules/Modal/Modal.tsx
|
|
16345
16339
|
var import_react111 = __toESM(require("react"));
|
|
16346
16340
|
var import_react_aria_components19 = require("react-aria-components");
|
|
16347
|
-
var import_overlays9 = require("@react-aria/overlays");
|
|
16348
16341
|
var import_clsx35 = require("clsx");
|
|
16349
16342
|
var import_lodash_es38 = require("lodash-es");
|
|
16350
16343
|
var import_cross8 = __toESM(require_cross());
|
|
@@ -16360,7 +16353,6 @@ var Modal2 = ({
|
|
|
16360
16353
|
primaryAction,
|
|
16361
16354
|
secondaryActions
|
|
16362
16355
|
}) => {
|
|
16363
|
-
const portalContainerRef = (0, import_react111.useRef)(null);
|
|
16364
16356
|
if (!open) {
|
|
16365
16357
|
return null;
|
|
16366
16358
|
}
|
|
@@ -16377,20 +16369,15 @@ var Modal2 = ({
|
|
|
16377
16369
|
className: styles.overlay({ className: "Aquarium-Modal" })
|
|
16378
16370
|
},
|
|
16379
16371
|
size !== "screen" && /* @__PURE__ */ import_react111.default.createElement(Modal.BackDrop, { className: styles.backdrop() }),
|
|
16380
|
-
/* @__PURE__ */ import_react111.default.createElement(import_react_aria_components19.Modal, { className: styles.dialog() }, /* @__PURE__ */ import_react111.default.createElement(import_react_aria_components19.Dialog, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => (
|
|
16381
|
-
|
|
16382
|
-
|
|
16383
|
-
|
|
16384
|
-
|
|
16385
|
-
|
|
16386
|
-
|
|
16387
|
-
|
|
16388
|
-
|
|
16389
|
-
className: (0, import_clsx35.clsx)({ "pb-3": isComponentType(children, ModalTabs) })
|
|
16390
|
-
},
|
|
16391
|
-
/* @__PURE__ */ import_react111.default.createElement(Modal.TitleContainer, null, /* @__PURE__ */ import_react111.default.createElement(ModalTitle, { kind: "dialog" }, title), subtitle && /* @__PURE__ */ import_react111.default.createElement(Modal.Subtitle, null, subtitle))
|
|
16392
|
-
), hasTabs ? import_react111.default.cloneElement(children, { className: "[&>div:first-child]:px-5 grow" }) : /* @__PURE__ */ import_react111.default.createElement(Modal.Body, { tabIndex: 0, noFooter: !hasActions, size }, children, /* @__PURE__ */ import_react111.default.createElement("div", { ref: portalContainerRef, className: "relative" })), hasActions && /* @__PURE__ */ import_react111.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react111.default.createElement(Modal.Actions, null, secondaryActions && (0, import_lodash_es38.castArray)(secondaryActions).filter(Boolean).map(({ text, ...action }) => /* @__PURE__ */ import_react111.default.createElement(Button2.Secondary, { key: text, ...action }, text)), primaryAction && /* @__PURE__ */ import_react111.default.createElement(Button2.Primary, { key: primaryAction.text, ...(0, import_lodash_es38.omit)(primaryAction, "text") }, primaryAction.text))))
|
|
16393
|
-
)))
|
|
16372
|
+
/* @__PURE__ */ import_react111.default.createElement(import_react_aria_components19.Modal, { className: styles.dialog() }, /* @__PURE__ */ import_react111.default.createElement(import_react_aria_components19.Dialog, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => /* @__PURE__ */ import_react111.default.createElement(import_react111.default.Fragment, null, /* @__PURE__ */ import_react111.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react111.default.createElement(Button2.Icon, { "aria-label": "Close", icon: import_cross8.default, onClick: close })), headerImage !== void 0 && /* @__PURE__ */ import_react111.default.createElement(Modal.HeaderImage, { backgroundImage: headerImage }), /* @__PURE__ */ import_react111.default.createElement(
|
|
16373
|
+
Modal.Header,
|
|
16374
|
+
{
|
|
16375
|
+
kind: "dialog",
|
|
16376
|
+
size,
|
|
16377
|
+
className: (0, import_clsx35.clsx)({ "pb-3": isComponentType(children, ModalTabs) })
|
|
16378
|
+
},
|
|
16379
|
+
/* @__PURE__ */ import_react111.default.createElement(Modal.TitleContainer, null, /* @__PURE__ */ import_react111.default.createElement(ModalTitle, { kind: "dialog" }, title), subtitle && /* @__PURE__ */ import_react111.default.createElement(Modal.Subtitle, null, subtitle))
|
|
16380
|
+
), hasTabs ? import_react111.default.cloneElement(children, { className: "[&>div:first-child]:px-5 grow" }) : /* @__PURE__ */ import_react111.default.createElement(Modal.Body, { tabIndex: 0, noFooter: !hasActions, size }, children), hasActions && /* @__PURE__ */ import_react111.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react111.default.createElement(Modal.Actions, null, secondaryActions && (0, import_lodash_es38.castArray)(secondaryActions).filter(Boolean).map(({ text, ...action }) => /* @__PURE__ */ import_react111.default.createElement(Button2.Secondary, { key: text, ...action }, text)), primaryAction && /* @__PURE__ */ import_react111.default.createElement(Button2.Primary, { key: primaryAction.text, ...(0, import_lodash_es38.omit)(primaryAction, "text") }, primaryAction.text))))))
|
|
16394
16381
|
);
|
|
16395
16382
|
};
|
|
16396
16383
|
var ModalTabs = createTabsComponent(
|
|
@@ -16655,7 +16642,7 @@ MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
|
|
|
16655
16642
|
|
|
16656
16643
|
// src/molecules/MultiSelect/MultiSelect.tsx
|
|
16657
16644
|
var import_react114 = __toESM(require("react"));
|
|
16658
|
-
var
|
|
16645
|
+
var import_overlays8 = require("@react-aria/overlays");
|
|
16659
16646
|
var import_utils34 = require("@react-aria/utils");
|
|
16660
16647
|
var import_downshift3 = require("downshift");
|
|
16661
16648
|
var import_lodash_es40 = require("lodash-es");
|
|
@@ -16769,7 +16756,7 @@ var MultiSelectBase = ({
|
|
|
16769
16756
|
});
|
|
16770
16757
|
(0, import_react114.useEffect)(() => {
|
|
16771
16758
|
if (isOpen && inputRef.current && popoverRef.current) {
|
|
16772
|
-
return (0,
|
|
16759
|
+
return (0, import_overlays8.ariaHideOutside)([inputRef.current, popoverRef.current]);
|
|
16773
16760
|
}
|
|
16774
16761
|
}, [isOpen, inputRef, popoverRef]);
|
|
16775
16762
|
const renderItem = (item, index) => /* @__PURE__ */ import_react114.default.createElement(
|