@koine/react 2.0.0-beta.5 → 2.0.0-beta.7

package/Calendar/CalendarDaygridNav.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "KoineCalendarDaygridNav", {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _format = /*#__PURE__*/ _interop_require_default._(require("date-fns/format"));
 const _useDateLocale = require("../hooks/useDateLocale");
 const KoineCalendarDaygridNav = ({ range, view, todayInView, handlePrev, handleNext, handleToday, handleView, locale: localeCode, NavRoot = "nav", NavTitle = "div", NavBtns = "div", NavBtnPrev = "button", NavBtnNext = "button", NavBtnToday = "button", NavBtnViewMonth = "button", NavBtnViewWeek = "button" })=>{
@@ -29,21 +30,34 @@ const KoineCalendarDaygridNav = ({ range, view, todayInView, handlePrev, handleN
             formatted = `${(0, _format.default)(start, "d MMMM", opts)} - ${(0, _format.default)(end, "d MMMM yyyy", opts)}`;
         }
     }
-    return /*#__PURE__*/ React.createElement(NavRoot, null, /*#__PURE__*/ React.createElement(NavBtns, null, /*#__PURE__*/ React.createElement(NavBtnPrev, {
-        onClick: handlePrev
-    }), /*#__PURE__*/ React.createElement(NavBtnNext, {
-        onClick: handleNext
-    }), /*#__PURE__*/ React.createElement(NavBtnToday, {
-        onClick: handleToday,
-        disabled: todayInView
-    }), /*#__PURE__*/ React.createElement(NavBtnViewMonth, {
-        onClick: ()=>handleView("month"),
-        disabled: view === "month"
-    }), /*#__PURE__*/ React.createElement(NavBtnViewWeek, {
-        onClick: ()=>handleView("week"),
-        disabled: view === "week"
-    })), /*#__PURE__*/ React.createElement(NavTitle, {
-        range: range,
-        formatted: formatted
-    }));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(NavRoot, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(NavBtns, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(NavBtnPrev, {
+                        onClick: handlePrev
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(NavBtnNext, {
+                        onClick: handleNext
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(NavBtnToday, {
+                        onClick: handleToday,
+                        disabled: todayInView
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(NavBtnViewMonth, {
+                        onClick: ()=>handleView("month"),
+                        disabled: view === "month"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(NavBtnViewWeek, {
+                        onClick: ()=>handleView("week"),
+                        disabled: view === "week"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(NavTitle, {
+                range: range,
+                formatted: formatted
+            })
+        ]
+    });
 };

package/Calendar/CalendarDaygridNav.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import format from "date-fns/format";
 import { useDateLocale } from "../hooks/useDateLocale";
 export const KoineCalendarDaygridNav = ({ range, view, todayInView, handlePrev, handleNext, handleToday, handleView, locale: localeCode, NavRoot = "nav", NavTitle = "div", NavBtns = "div", NavBtnPrev = "button", NavBtnNext = "button", NavBtnToday = "button", NavBtnViewMonth = "button", NavBtnViewWeek = "button" })=>{
@@ -18,21 +19,34 @@ export const KoineCalendarDaygridNav = ({ range, view, todayInView, handlePrev,
             formatted = `${format(start, "d MMMM", opts)} - ${format(end, "d MMMM yyyy", opts)}`;
         }
     }
-    return /*#__PURE__*/ React.createElement(NavRoot, null, /*#__PURE__*/ React.createElement(NavBtns, null, /*#__PURE__*/ React.createElement(NavBtnPrev, {
-        onClick: handlePrev
-    }), /*#__PURE__*/ React.createElement(NavBtnNext, {
-        onClick: handleNext
-    }), /*#__PURE__*/ React.createElement(NavBtnToday, {
-        onClick: handleToday,
-        disabled: todayInView
-    }), /*#__PURE__*/ React.createElement(NavBtnViewMonth, {
-        onClick: ()=>handleView("month"),
-        disabled: view === "month"
-    }), /*#__PURE__*/ React.createElement(NavBtnViewWeek, {
-        onClick: ()=>handleView("week"),
-        disabled: view === "week"
-    })), /*#__PURE__*/ React.createElement(NavTitle, {
-        range: range,
-        formatted: formatted
-    }));
+    return /*#__PURE__*/ _jsxs(NavRoot, {
+        children: [
+            /*#__PURE__*/ _jsxs(NavBtns, {
+                children: [
+                    /*#__PURE__*/ _jsx(NavBtnPrev, {
+                        onClick: handlePrev
+                    }),
+                    /*#__PURE__*/ _jsx(NavBtnNext, {
+                        onClick: handleNext
+                    }),
+                    /*#__PURE__*/ _jsx(NavBtnToday, {
+                        onClick: handleToday,
+                        disabled: todayInView
+                    }),
+                    /*#__PURE__*/ _jsx(NavBtnViewMonth, {
+                        onClick: ()=>handleView("month"),
+                        disabled: view === "month"
+                    }),
+                    /*#__PURE__*/ _jsx(NavBtnViewWeek, {
+                        onClick: ()=>handleView("week"),
+                        disabled: view === "week"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(NavTitle, {
+                range: range,
+                formatted: formatted
+            })
+        ]
+    });
 };

package/Calendar/CalendarDaygridTable.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "KoineCalendarDaygridTable", {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _eachWeekOfInterval = /*#__PURE__*/ _interop_require_default._(require("date-fns/eachWeekOfInterval"));
 const _react = require("react");
 const _reactswipeable = require("react-swipeable");
@@ -83,19 +84,43 @@ const KoineCalendarDaygridTable = ({ locale: localeCode, handlePrev, handleNext,
         locale,
         dayLabels
     ]);
-    return /*#__PURE__*/ React.createElement(Table, swipeableHandlers, /*#__PURE__*/ React.createElement(TableHead, null, /*#__PURE__*/ React.createElement("tr", null, days.map((day)=>/*#__PURE__*/ React.createElement(TableHeadCell, {
-            scope: "column",
-            key: day
-        }, day)))), /*#__PURE__*/ React.createElement(TableBody, null, weeksEvents.map((week, i)=>/*#__PURE__*/ React.createElement(TableBodyRow, week.props, week.days.map((day)=>/*#__PURE__*/ React.createElement(TableBodyCell, day.props, /*#__PURE__*/ React.createElement(TableBodyCellDate, day.props, day.label), day.events.length > 0 && /*#__PURE__*/ React.createElement(_CalendarDaygridCell.CalendarDaygridCell, {
-                eventClicked,
-                setEventClicked,
-                eventHovered,
-                setEventHovered,
-                view,
-                maxEvents,
-                events: day.events,
-                timestamp: day.timestamp,
-                calendarsMap,
-                ...restKoine
-            })))))));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(Table, {
+        ...swipeableHandlers,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(TableHead, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
+                    children: days.map((day)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(TableHeadCell, {
+                            scope: "column",
+                            children: day
+                        }, day))
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(TableBody, {
+                children: weeksEvents.map((week, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(TableBodyRow, {
+                        ...week.props,
+                        children: week.days.map((day)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(TableBodyCell, {
+                                ...day.props,
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(TableBodyCellDate, {
+                                        ...day.props,
+                                        children: day.label
+                                    }),
+                                    day.events.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_CalendarDaygridCell.CalendarDaygridCell, {
+                                        eventClicked,
+                                        setEventClicked,
+                                        eventHovered,
+                                        setEventHovered,
+                                        view,
+                                        maxEvents,
+                                        events: day.events,
+                                        timestamp: day.timestamp,
+                                        calendarsMap,
+                                        ...restKoine
+                                    })
+                                ]
+                            }))
+                    }))
+            })
+        ]
+    });
 };

package/Calendar/CalendarDaygridTable.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import eachWeekOfInterval from "date-fns/eachWeekOfInterval";
 import { useEffect, useMemo, useState } from "react";
 import { useSwipeable } from "react-swipeable";
@@ -72,19 +73,43 @@ export const KoineCalendarDaygridTable = ({ locale: localeCode, handlePrev, hand
         locale,
         dayLabels
     ]);
-    return /*#__PURE__*/ React.createElement(Table, swipeableHandlers, /*#__PURE__*/ React.createElement(TableHead, null, /*#__PURE__*/ React.createElement("tr", null, days.map((day)=>/*#__PURE__*/ React.createElement(TableHeadCell, {
-            scope: "column",
-            key: day
-        }, day)))), /*#__PURE__*/ React.createElement(TableBody, null, weeksEvents.map((week, i)=>/*#__PURE__*/ React.createElement(TableBodyRow, week.props, week.days.map((day)=>/*#__PURE__*/ React.createElement(TableBodyCell, day.props, /*#__PURE__*/ React.createElement(TableBodyCellDate, day.props, day.label), day.events.length > 0 && /*#__PURE__*/ React.createElement(CalendarDaygridCell, {
-                eventClicked,
-                setEventClicked,
-                eventHovered,
-                setEventHovered,
-                view,
-                maxEvents,
-                events: day.events,
-                timestamp: day.timestamp,
-                calendarsMap,
-                ...restKoine
-            })))))));
+    return /*#__PURE__*/ _jsxs(Table, {
+        ...swipeableHandlers,
+        children: [
+            /*#__PURE__*/ _jsx(TableHead, {
+                children: /*#__PURE__*/ _jsx("tr", {
+                    children: days.map((day)=>/*#__PURE__*/ _jsx(TableHeadCell, {
+                            scope: "column",
+                            children: day
+                        }, day))
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableBody, {
+                children: weeksEvents.map((week, i)=>/*#__PURE__*/ _jsx(TableBodyRow, {
+                        ...week.props,
+                        children: week.days.map((day)=>/*#__PURE__*/ _jsxs(TableBodyCell, {
+                                ...day.props,
+                                children: [
+                                    /*#__PURE__*/ _jsx(TableBodyCellDate, {
+                                        ...day.props,
+                                        children: day.label
+                                    }),
+                                    day.events.length > 0 && /*#__PURE__*/ _jsx(CalendarDaygridCell, {
+                                        eventClicked,
+                                        setEventClicked,
+                                        eventHovered,
+                                        setEventHovered,
+                                        view,
+                                        maxEvents,
+                                        events: day.events,
+                                        timestamp: day.timestamp,
+                                        calendarsMap,
+                                        ...restKoine
+                                    })
+                                ]
+                            }))
+                    }))
+            })
+        ]
+    });
 };

package/Calendar/CalendarLegend.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "KoineCalendarLegend", {
         return KoineCalendarLegend;
     }
 });
+const _jsxruntime = require("react/jsx-runtime");
 const KoineCalendarLegend = ({ calendarsMap = {}, toggleCalendarVisibility, LegendItem = "div", LegendItemStatus = "span", LegendItemLabel = "span", LegendItemEvents = "span" })=>{
     // const sorted = Object.entries(calendarsMap).sort((a, b) => {
     //   const { name: nameA } = a[1];
@@ -16,11 +17,23 @@ const KoineCalendarLegend = ({ calendarsMap = {}, toggleCalendarVisibility, Lege
     //   else if (nameA > nameB) return 1;
     //   else return 0;
     // });
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, Object.entries(calendarsMap).map(([id, calendar])=>/*#__PURE__*/ React.createElement(LegendItem, {
-            key: "CalendarLegend." + id,
-            onClick: ()=>toggleCalendarVisibility(id),
-            $color: calendar.color,
-            $empty: calendar.events === 0,
-            disabled: calendar.events === 0
-        }, /*#__PURE__*/ React.createElement(LegendItemStatus, null, calendar.on ? "\u2b24" : "\u2b58"), /*#__PURE__*/ React.createElement(LegendItemLabel, null, calendar.name), /*#__PURE__*/ React.createElement(LegendItemEvents, null, calendar.events))));
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: Object.entries(calendarsMap).map(([id, calendar])=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(LegendItem, {
+                onClick: ()=>toggleCalendarVisibility(id),
+                $color: calendar.color,
+                $empty: calendar.events === 0,
+                disabled: calendar.events === 0,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(LegendItemStatus, {
+                        children: calendar.on ? "\u2b24" : "\u2b58"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(LegendItemLabel, {
+                        children: calendar.name
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(LegendItemEvents, {
+                        children: calendar.events
+                    })
+                ]
+            }, "CalendarLegend." + id))
+    });
 };

package/Calendar/CalendarLegend.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const KoineCalendarLegend = ({ calendarsMap = {}, toggleCalendarVisibility, LegendItem = "div", LegendItemStatus = "span", LegendItemLabel = "span", LegendItemEvents = "span" })=>{
     // const sorted = Object.entries(calendarsMap).sort((a, b) => {
     //   const { name: nameA } = a[1];
@@ -6,11 +7,23 @@ export const KoineCalendarLegend = ({ calendarsMap = {}, toggleCalendarVisibilit
     //   else if (nameA > nameB) return 1;
     //   else return 0;
     // });
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, Object.entries(calendarsMap).map(([id, calendar])=>/*#__PURE__*/ React.createElement(LegendItem, {
-            key: "CalendarLegend." + id,
-            onClick: ()=>toggleCalendarVisibility(id),
-            $color: calendar.color,
-            $empty: calendar.events === 0,
-            disabled: calendar.events === 0
-        }, /*#__PURE__*/ React.createElement(LegendItemStatus, null, calendar.on ? "\u2b24" : "\u2b58"), /*#__PURE__*/ React.createElement(LegendItemLabel, null, calendar.name), /*#__PURE__*/ React.createElement(LegendItemEvents, null, calendar.events))));
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: Object.entries(calendarsMap).map(([id, calendar])=>/*#__PURE__*/ _jsxs(LegendItem, {
+                onClick: ()=>toggleCalendarVisibility(id),
+                $color: calendar.color,
+                $empty: calendar.events === 0,
+                disabled: calendar.events === 0,
+                children: [
+                    /*#__PURE__*/ _jsx(LegendItemStatus, {
+                        children: calendar.on ? "\u2b24" : "\u2b58"
+                    }),
+                    /*#__PURE__*/ _jsx(LegendItemLabel, {
+                        children: calendar.name
+                    }),
+                    /*#__PURE__*/ _jsx(LegendItemEvents, {
+                        children: calendar.events
+                    })
+                ]
+            }, "CalendarLegend." + id))
+    });
 };

package/Carousel/CarouselCss.d.ts

@@ -1,24 +1,7 @@
 /// <reference types="react" />
 import { ColProps, RowProps } from "../Grid";
-export declare const CarouselCssRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Grid").GridProps & {
-    $valign?: import("csstype").Property.AlignItems | undefined;
-    $reverse?: "min:xs" | "min:sm" | "min:md" | "min:lg" | "min:xl" | "min:xxl" | "max:xs" | "max:sm" | "max:md" | "max:lg" | "max:xl" | "max:xxl" | undefined;
-    $noWrap?: boolean | undefined;
-} & {
-    $valign?: import("csstype").Property.AlignItems | undefined;
-    $reverse?: "min:xs" | "min:sm" | "min:md" | "min:lg" | "min:xl" | "min:xxl" | "max:xs" | "max:sm" | "max:md" | "max:lg" | "max:xl" | "max:xxl" | undefined;
-    $noWrap?: boolean | undefined;
-    $gutter: "normal" | "double" | "quarter" | "third" | "half" | "triple";
-}, never>;
-export declare const CarouselCssCol: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Grid").GridProps & Partial<Record<import("../styles").Breakpoint, number>> & {
-    $width?: number | undefined;
-    $flex?: boolean | undefined;
-    $valign?: import("csstype").Property.AlignItems | undefined;
-    $auto?: boolean | undefined;
-    $offset?: string | undefined;
-} & Pick<KoineCarouselCssProps, "$snap"> & {
-    $width: KoineCarouselCssProps["width"];
-}, never>;
+export declare const CarouselCssRow: any;
+export declare const CarouselCssCol: any;
 export type KoineCarouselCssProps = ColProps & {
     /**
      * Override the `<Row>` gutter, if not specified `$gutter` prop is used

package/Carousel/CarouselCss.js

@@ -21,6 +21,7 @@ _export(exports, {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const _Grid = require("../Grid");
@@ -50,13 +51,14 @@ const KoineCarouselCss = ({ items, $gutterRow, $gutterCol, $gutter = "quarter",
     const slides = children ? _react.Children.toArray(children) : items;
     const id = (0, _react.useId)();
     if (!slides) return null;
-    return /*#__PURE__*/ React.createElement(CarouselCssRow, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(CarouselCssRow, {
         $noWrap: true,
-        $gutter: $gutterRow || $gutter
-    }, slides.map((_slide, idx)=>/*#__PURE__*/ React.createElement(CarouselCssCol, {
-            key: `CarouselCssCol-${id}-${idx}`,
-            ...colProps,
-            $gutter: $gutterCol || $gutter,
-            $width: width
-        }, slides[idx])));
+        $gutter: $gutterRow || $gutter,
+        children: slides.map((_slide, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(CarouselCssCol, {
+                ...colProps,
+                $gutter: $gutterCol || $gutter,
+                $width: width,
+                children: slides[idx]
+            }, `CarouselCssCol-${id}-${idx}`))
+    });
 };

package/Carousel/CarouselCss.mjs

@@ -1,4 +1,5 @@
 /// <reference types="csstype" />
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, useId } from "react";
 import styled from "styled-components";
 import { Col, GRID_GUTTER_DEFAULT as DF, Row } from "../Grid";
@@ -30,13 +31,14 @@ export const CarouselCssCol = styled(Col)`
     const slides = children ? Children.toArray(children) : items;
     const id = useId();
     if (!slides) return null;
-    return /*#__PURE__*/ React.createElement(CarouselCssRow, {
+    return /*#__PURE__*/ _jsx(CarouselCssRow, {
         $noWrap: true,
-        $gutter: $gutterRow || $gutter
-    }, slides.map((_slide, idx)=>/*#__PURE__*/ React.createElement(CarouselCssCol, {
-            key: `CarouselCssCol-${id}-${idx}`,
-            ...colProps,
-            $gutter: $gutterCol || $gutter,
-            $width: width
-        }, slides[idx])));
+        $gutter: $gutterRow || $gutter,
+        children: slides.map((_slide, idx)=>/*#__PURE__*/ _jsx(CarouselCssCol, {
+                ...colProps,
+                $gutter: $gutterCol || $gutter,
+                $width: width,
+                children: slides[idx]
+            }, `CarouselCssCol-${id}-${idx}`))
+    });
 };

package/Debug/Debug.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "Debug", {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const Root = _styledcomponents.default.div`
   background: #f4f4f4;
@@ -27,5 +28,7 @@ const Root = _styledcomponents.default.div`
   word-wrap: break-word;
 `;
 const Debug = ({ data })=>{
-    return /*#__PURE__*/ React.createElement(Root, null, JSON.stringify(data, undefined, 2));
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Root, {
+        children: JSON.stringify(data, undefined, 2)
+    });
 };

package/Debug/Debug.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 const Root = styled.div`
   background: #f4f4f4;
@@ -16,5 +17,7 @@ const Root = styled.div`
   word-wrap: break-word;
 `;
 export const Debug = ({ data })=>{
-    return /*#__PURE__*/ React.createElement(Root, null, JSON.stringify(data, undefined, 2));
+    return /*#__PURE__*/ _jsx(Root, {
+        children: JSON.stringify(data, undefined, 2)
+    });
 };

package/Details/Details.js

@@ -25,6 +25,7 @@ _export(exports, {
         return KoineDetails;
     }
 });
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _helpers = require("../helpers");
 const _useWindowSize = require("../hooks/useWindowSize");
@@ -80,26 +81,33 @@ const Content = "div";
         hash,
         isControlled
     ]);
-    return /*#__PURE__*/ React.createElement(Root, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(Root, {
         ...props,
-        open: open || false
-    }, /*#__PURE__*/ React.createElement(Summary, {
-        $open: open,
-        onClick: handleClick
-    }, summary || " "), /*#__PURE__*/ React.createElement(Body, {
-        $open: open,
-        style: {
-            overflow
-        }
-    }, /*#__PURE__*/ React.createElement(Content, {
-        // ref={content}
-        $open: open,
-        // aria-expanded={open}
-        // aria-label={open ? ariaCollapse : ariaExpand}
-        style: {
-            pointerEvents: open ? "all" : "none"
-        }
-    }, children)));
+        open: open || false,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(Summary, {
+                $open: open,
+                onClick: handleClick,
+                children: summary || " "
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(Body, {
+                $open: open,
+                style: {
+                    overflow
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Content, {
+                    // ref={content}
+                    $open: open,
+                    // aria-expanded={open}
+                    // aria-label={open ? ariaCollapse : ariaExpand}
+                    style: {
+                        pointerEvents: open ? "all" : "none"
+                    },
+                    children: children
+                })
+            })
+        ]
+    });
 });
 const KoineDetails = (0, _helpers.extendComponent)(DetailsWithRef, {
     Root,

package/Details/Details.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
 import { extendComponent } from "../helpers";
 import { useWindowSize } from "../hooks/useWindowSize";
@@ -53,26 +54,33 @@ export const Content = "div";
         hash,
         isControlled
     ]);
-    return /*#__PURE__*/ React.createElement(Root, {
+    return /*#__PURE__*/ _jsxs(Root, {
         ...props,
-        open: open || false
-    }, /*#__PURE__*/ React.createElement(Summary, {
-        $open: open,
-        onClick: handleClick
-    }, summary || " "), /*#__PURE__*/ React.createElement(Body, {
-        $open: open,
-        style: {
-            overflow
-        }
-    }, /*#__PURE__*/ React.createElement(Content, {
-        // ref={content}
-        $open: open,
-        // aria-expanded={open}
-        // aria-label={open ? ariaCollapse : ariaExpand}
-        style: {
-            pointerEvents: open ? "all" : "none"
-        }
-    }, children)));
+        open: open || false,
+        children: [
+            /*#__PURE__*/ _jsx(Summary, {
+                $open: open,
+                onClick: handleClick,
+                children: summary || " "
+            }),
+            /*#__PURE__*/ _jsx(Body, {
+                $open: open,
+                style: {
+                    overflow
+                },
+                children: /*#__PURE__*/ _jsx(Content, {
+                    // ref={content}
+                    $open: open,
+                    // aria-expanded={open}
+                    // aria-label={open ? ariaCollapse : ariaExpand}
+                    style: {
+                        pointerEvents: open ? "all" : "none"
+                    },
+                    children: children
+                })
+            })
+        ]
+    });
 });
 export const KoineDetails = extendComponent(DetailsWithRef, {
     Root,

package/Details/Details.stories.js

@@ -16,6 +16,7 @@ _export(exports, {
         return Bare;
     }
 });
+const _jsxruntime = require("react/jsx-runtime");
 const _stories = require("@koine/stories");
 const _Details = require("./Details");
 const _default = {
@@ -25,7 +26,7 @@ const _default = {
 };
 const BareTemplate = (args)=>{
     // return <StoryDetails {...args} Details={KoineDetails} />;
-    return /*#__PURE__*/ React.createElement(_stories.StoryDetails, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_stories.StoryDetails, {
         ...args,
         Details: _Details.KoineDetails
     });

package/Details/Details.stories.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { StoryDetails, storyDetailsMeta } from "@koine/stories";
 import { KoineDetails } from "./Details";
 export default {
@@ -7,7 +8,7 @@ export default {
 };
 const BareTemplate = (args)=>{
     // return <StoryDetails {...args} Details={KoineDetails} />;
-    return /*#__PURE__*/ React.createElement(StoryDetails, {
+    return /*#__PURE__*/ _jsx(StoryDetails, {
         ...args,
         Details: KoineDetails
     });