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

package/Carousel/CarouselCss.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { RowProps, ColProps } from "../Grid";
+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;

package/Carousel/CarouselCss.js

@@ -1,26 +1,62 @@
+/// <reference types="csstype" />
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineCarouselCss = exports.CarouselCssCol = exports.CarouselCssRow = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var Grid_1 = require("../Grid");
-exports.CarouselCssRow = (0, styled_components_1.default)(Grid_1.Row)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n\n  scroll-behavior: smooth;\n  scroll-snap-type: x;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  ", "\n\n  scroll-behavior: smooth;\n  scroll-snap-type: x;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])), function (_a) {
-    var cs = _a.$gutter, gutter = _a.theme.gutter;
-    return "\n    margin-left: -".concat(cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : (gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs]) * 2, "px;\n    margin-right: -").concat(cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : (gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs]) * 2, "px;\n    padding-left: ").concat(cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs], "px;\n    padding-right: ").concat(cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs], "px;\n  ");
+Object.defineProperty(exports, "__esModule", {
+    value: true
 });
-exports.CarouselCssCol = (0, styled_components_1.default)(Grid_1.Col)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n  position: relative;\n  scroll-snap-align: ", ";\n"], ["\n  ", "\n  position: relative;\n  scroll-snap-align: ", ";\n"])), function (p) { return p.$width && "flex-basis: ".concat(p.$width, "px; min-width: ").concat(p.$width, "px;"); }, function (p) { return p.$snap; });
-/**
- * For programmatic usage an example here @see https://stackoverflow.com/a/65902068/9122820
- */
-var KoineCarouselCss = function (_a) {
-    var items = _a.items, $gutterRow = _a.$gutterRow, $gutterCol = _a.$gutterCol, _b = _a.$gutter, $gutter = _b === void 0 ? "quarter" : _b, $proportion = _a.$proportion, _c = _a.$snap, $snap = _c === void 0 ? "center" : _c, width = _a.width, children = _a.children, colProps = tslib_1.__rest(_a, ["items", "$gutterRow", "$gutterCol", "$gutter", "$proportion", "$snap", "width", "children"]);
-    var slides = children ? react_1.Children.toArray(children) : items;
-    var id = (0, react_1.useId)();
-    if (!slides)
-        return null;
-    return ((0, jsx_runtime_1.jsx)(exports.CarouselCssRow, { "$noWrap": true, "$gutter": $gutterRow || $gutter, children: slides.map(function (_slide, idx) { return ((0, jsx_runtime_1.jsx)(exports.CarouselCssCol, tslib_1.__assign({}, colProps, { "$gutter": $gutterCol || $gutter, "$width": width, children: slides[idx] }), "CarouselCssCol-".concat(id, "-").concat(idx))); }) }));
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    CarouselCssRow: function() {
+        return CarouselCssRow;
+    },
+    CarouselCssCol: function() {
+        return CarouselCssCol;
+    },
+    KoineCarouselCss: function() {
+        return KoineCarouselCss;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _react = require("react");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _Grid = require("../Grid");
+const CarouselCssRow = (0, _styledcomponents.default)(_Grid.Row)`
+  ${({ $gutter: cs, theme: { gutter } })=>`
+    margin-left: -${cs === _Grid.GRID_GUTTER_DEFAULT ? gutter[_Grid.GRID_GUTTER_DEFAULT] : (gutter[_Grid.GRID_GUTTER_DEFAULT] - gutter[cs]) * 2}px;
+    margin-right: -${cs === _Grid.GRID_GUTTER_DEFAULT ? gutter[_Grid.GRID_GUTTER_DEFAULT] : (gutter[_Grid.GRID_GUTTER_DEFAULT] - gutter[cs]) * 2}px;
+    padding-left: ${cs === _Grid.GRID_GUTTER_DEFAULT ? gutter[_Grid.GRID_GUTTER_DEFAULT] : gutter[_Grid.GRID_GUTTER_DEFAULT] - gutter[cs]}px;
+    padding-right: ${cs === _Grid.GRID_GUTTER_DEFAULT ? gutter[_Grid.GRID_GUTTER_DEFAULT] : gutter[_Grid.GRID_GUTTER_DEFAULT] - gutter[cs]}px;
+  `}
+
+  scroll-behavior: smooth;
+  scroll-snap-type: x;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const CarouselCssCol = (0, _styledcomponents.default)(_Grid.Col)`
+  ${(p)=>p.$width && `flex-basis: ${p.$width}px; min-width: ${p.$width}px;`}
+  position: relative;
+  scroll-snap-align: ${(p)=>p.$snap};
+`;
+const KoineCarouselCss = ({ items, $gutterRow, $gutterCol, $gutter = "quarter", $proportion, $snap = "center", width, children, ...colProps })=>{
+    const slides = children ? _react.Children.toArray(children) : items;
+    const id = (0, _react.useId)();
+    if (!slides) return null;
+    return /*#__PURE__*/ React.createElement(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])));
 };
-exports.KoineCarouselCss = KoineCarouselCss;
-var templateObject_1, templateObject_2;

package/Carousel/CarouselCss.mjs

@@ -1,22 +1,42 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="csstype" />
 import { Children, useId } from "react";
 import styled from "styled-components";
-import { Row, Col, GRID_GUTTER_DEFAULT as DF, } from "../Grid";
-export var CarouselCssRow = styled(Row)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  scroll-behavior: smooth;\n  scroll-snap-type: x;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  ", "\n\n  scroll-behavior: smooth;\n  scroll-snap-type: x;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])), function (_a) {
-    var cs = _a.$gutter, gutter = _a.theme.gutter;
-    return "\n    margin-left: -".concat(cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2, "px;\n    margin-right: -").concat(cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2, "px;\n    padding-left: ").concat(cs === DF ? gutter[DF] : gutter[DF] - gutter[cs], "px;\n    padding-right: ").concat(cs === DF ? gutter[DF] : gutter[DF] - gutter[cs], "px;\n  ");
-});
-export var CarouselCssCol = styled(Col)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  scroll-snap-align: ", ";\n"], ["\n  ", "\n  position: relative;\n  scroll-snap-align: ", ";\n"])), function (p) { return p.$width && "flex-basis: ".concat(p.$width, "px; min-width: ").concat(p.$width, "px;"); }, function (p) { return p.$snap; });
+import { Col, GRID_GUTTER_DEFAULT as DF, Row } from "../Grid";
+export const CarouselCssRow = styled(Row)`
+  ${({ $gutter: cs, theme: { gutter } })=>`
+    margin-left: -${cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2}px;
+    margin-right: -${cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2}px;
+    padding-left: ${cs === DF ? gutter[DF] : gutter[DF] - gutter[cs]}px;
+    padding-right: ${cs === DF ? gutter[DF] : gutter[DF] - gutter[cs]}px;
+  `}
+
+  scroll-behavior: smooth;
+  scroll-snap-type: x;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+export const CarouselCssCol = styled(Col)`
+  ${(p)=>p.$width && `flex-basis: ${p.$width}px; min-width: ${p.$width}px;`}
+  position: relative;
+  scroll-snap-align: ${(p)=>p.$snap};
+`;
 /**
  * For programmatic usage an example here @see https://stackoverflow.com/a/65902068/9122820
- */
-export var KoineCarouselCss = function (_a) {
-    var items = _a.items, $gutterRow = _a.$gutterRow, $gutterCol = _a.$gutterCol, _b = _a.$gutter, $gutter = _b === void 0 ? "quarter" : _b, $proportion = _a.$proportion, _c = _a.$snap, $snap = _c === void 0 ? "center" : _c, width = _a.width, children = _a.children, colProps = __rest(_a, ["items", "$gutterRow", "$gutterCol", "$gutter", "$proportion", "$snap", "width", "children"]);
-    var slides = children ? Children.toArray(children) : items;
-    var id = useId();
-    if (!slides)
-        return null;
-    return (_jsx(CarouselCssRow, { "$noWrap": true, "$gutter": $gutterRow || $gutter, children: slides.map(function (_slide, idx) { return (_jsx(CarouselCssCol, __assign({}, colProps, { "$gutter": $gutterCol || $gutter, "$width": width, children: slides[idx] }), "CarouselCssCol-".concat(id, "-").concat(idx))); }) }));
+ */ export const KoineCarouselCss = ({ items, $gutterRow, $gutterCol, $gutter = "quarter", $proportion, $snap = "center", width, children, ...colProps })=>{
+    const slides = children ? Children.toArray(children) : items;
+    const id = useId();
+    if (!slides) return null;
+    return /*#__PURE__*/ React.createElement(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])));
 };
-var templateObject_1, templateObject_2;

package/Carousel/index.js

@@ -1,4 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./CarouselCss"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./CarouselCss"), exports);

package/Collapsable/Collapsable.js

@@ -1,4 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Collapsable = void 0;
-exports.Collapsable = null;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Collapsable", {
+    enumerable: true,
+    get: function() {
+        return Collapsable;
+    }
+});
+const Collapsable = null;

package/Collapsable/Collapsable.mjs

@@ -1 +1 @@
-export var Collapsable = null;
+export const Collapsable = null;

package/Collapsable/CollapsableReach.js

@@ -1,11 +1,9 @@
-"use strict";
 /**
  * @file
  *
  * Maybe do a simplified version following this example:
  * https://codesandbox.io/s/framer-motion-accordion-qx958?file=/src/Example.tsx
- */
-// import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
+ */ // import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
 // import styled from "styled-components";
 // import { MotionProps, m } from "framer-motion";
 // import {
@@ -250,3 +248,4 @@
 //     </CollapsableRoot>
 //   );
 // };
+"use strict";

package/Collapsable/CollapsableReach.mjs

@@ -1,11 +1,9 @@
-"use strict";
 /**
  * @file
  *
  * Maybe do a simplified version following this example:
  * https://codesandbox.io/s/framer-motion-accordion-qx958?file=/src/Example.tsx
- */
-// import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
+ */ // import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
 // import styled from "styled-components";
 // import { MotionProps, m } from "framer-motion";
 // import {

package/Collapsable/index.js

@@ -1,5 +1,7 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Collapsable"), exports);
-// export * from "./CollapsableReach";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Collapsable"), exports);
+ // export * from "./CollapsableReach";

package/Collapsable/index.mjs

@@ -1,2 +1 @@
-export * from "./Collapsable";
-// export * from "./CollapsableReach";
+export * from "./Collapsable"; // export * from "./CollapsableReach";

package/Debug/Debug.js

@@ -1,13 +1,31 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Debug = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  background: #f4f4f4;\n  border: 1px solid #ddd;\n  border-left: 3px solid #f36d33;\n  color: #666;\n  page-break-inside: avoid;\n  font-family: monospace;\n  font-size: small;\n  line-height: 1.6;\n  margin-bottom: 1.6em;\n  max-width: 100%;\n  overflow: auto;\n  padding: 1em 1.5em;\n  display: block;\n  word-wrap: break-word;\n"], ["\n  background: #f4f4f4;\n  border: 1px solid #ddd;\n  border-left: 3px solid #f36d33;\n  color: #666;\n  page-break-inside: avoid;\n  font-family: monospace;\n  font-size: small;\n  line-height: 1.6;\n  margin-bottom: 1.6em;\n  max-width: 100%;\n  overflow: auto;\n  padding: 1em 1.5em;\n  display: block;\n  word-wrap: break-word;\n"])));
-var Debug = function (_a) {
-    var data = _a.data;
-    return (0, jsx_runtime_1.jsx)(Root, { children: JSON.stringify(data, undefined, 2) });
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Debug", {
+    enumerable: true,
+    get: function() {
+        return Debug;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const Root = _styledcomponents.default.div`
+  background: #f4f4f4;
+  border: 1px solid #ddd;
+  border-left: 3px solid #f36d33;
+  color: #666;
+  page-break-inside: avoid;
+  font-family: monospace;
+  font-size: small;
+  line-height: 1.6;
+  margin-bottom: 1.6em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1em 1.5em;
+  display: block;
+  word-wrap: break-word;
+`;
+const Debug = ({ data })=>{
+    return /*#__PURE__*/ React.createElement(Root, null, JSON.stringify(data, undefined, 2));
 };
-exports.Debug = Debug;
-var templateObject_1;

package/Debug/Debug.mjs

@@ -1,9 +1,20 @@
-import { __makeTemplateObject } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: #f4f4f4;\n  border: 1px solid #ddd;\n  border-left: 3px solid #f36d33;\n  color: #666;\n  page-break-inside: avoid;\n  font-family: monospace;\n  font-size: small;\n  line-height: 1.6;\n  margin-bottom: 1.6em;\n  max-width: 100%;\n  overflow: auto;\n  padding: 1em 1.5em;\n  display: block;\n  word-wrap: break-word;\n"], ["\n  background: #f4f4f4;\n  border: 1px solid #ddd;\n  border-left: 3px solid #f36d33;\n  color: #666;\n  page-break-inside: avoid;\n  font-family: monospace;\n  font-size: small;\n  line-height: 1.6;\n  margin-bottom: 1.6em;\n  max-width: 100%;\n  overflow: auto;\n  padding: 1em 1.5em;\n  display: block;\n  word-wrap: break-word;\n"])));
-export var Debug = function (_a) {
-    var data = _a.data;
-    return _jsx(Root, { children: JSON.stringify(data, undefined, 2) });
+const Root = styled.div`
+  background: #f4f4f4;
+  border: 1px solid #ddd;
+  border-left: 3px solid #f36d33;
+  color: #666;
+  page-break-inside: avoid;
+  font-family: monospace;
+  font-size: small;
+  line-height: 1.6;
+  margin-bottom: 1.6em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1em 1.5em;
+  display: block;
+  word-wrap: break-word;
+`;
+export const Debug = ({ data })=>{
+    return /*#__PURE__*/ React.createElement(Root, null, JSON.stringify(data, undefined, 2));
 };
-var templateObject_1;

package/Debug/index.js

@@ -1,4 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Debug"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Debug"), exports);

package/Details/Details.d.ts

@@ -70,10 +70,10 @@ export declare const Content: NonNullable<import("react").ElementType<Omit<Omit<
 export declare const KoineDetails: ((props: {
     key?: import("react").Key | null | undefined;
     id?: string | undefined;
-    title?: string | undefined;
-    color?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
+    title?: string | undefined;
+    color?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -116,7 +116,7 @@ export declare const KoineDetails: ((props: {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -130,12 +130,12 @@ export declare const KoineDetails: ((props: {
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "location" | "time" | "true" | "false" | "page" | "step" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "location" | "true" | "false" | "page" | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "copy" | "none" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;

package/Details/Details.js

@@ -1,33 +1,53 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDetails = exports.Content = exports.Body = exports.Summary = exports.Root = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var useWindowSize_1 = require("../hooks/useWindowSize");
-var helpers_1 = require("../helpers");
-exports.Root = "details";
-exports.Summary = "summary";
-exports.Body = "div";
-exports.Content = "div";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Root: function() {
+        return Root;
+    },
+    Summary: function() {
+        return Summary;
+    },
+    Body: function() {
+        return Body;
+    },
+    Content: function() {
+        return Content;
+    },
+    KoineDetails: function() {
+        return KoineDetails;
+    }
+});
+const _react = require("react");
+const _helpers = require("../helpers");
+const _useWindowSize = require("../hooks/useWindowSize");
+const Root = "details";
+const Summary = "summary";
+const Body = "div";
+const Content = "div";
 /**
  * FIXME: it actually works even without forwardRef, check if we do need it
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
- */
-var DetailsWithRef = (0, react_1.forwardRef)(function Details(_a, ref) {
-    var id = _a.id, propOpen = _a.open, recalc = _a.recalc, summary = _a.summary, children = _a.children, _Root = _a.Root, _Summary = _a.Summary, _Body = _a.Body, _Content = _a.Content, onChange = _a.onChange, props = tslib_1.__rest(_a, ["id", "open", "recalc", "summary", "children", "Root", "Summary", "Body", "Content", "onChange"]);
-    var isControlled = typeof propOpen !== "undefined";
-    var _b = (0, react_1.useState)(propOpen), stateOpen = _b[0], setStateOpen = _b[1];
-    var _c = (0, react_1.useState)(0), height = _c[0], setHeight = _c[1];
-    var hash = id ? "#".concat(id) : "";
-    var winSize = (0, useWindowSize_1.useWindowSize)();
-    var open = isControlled ? propOpen : stateOpen;
-    var _d = (0, react_1.useState)(open ? "unset" : "hidden"), overflow = _d[0], setOverflow = _d[1];
-    var content = (0, react_1.useRef)(null);
-    var defaultId = (0, react_1.useId)();
+ */ const DetailsWithRef = /*#__PURE__*/ (0, _react.forwardRef)(function Details({ id, open: propOpen, recalc, summary, children, Root: _Root, Summary: _Summary, Body: _Body, Content: _Content, onChange, ...props }, ref) {
+    const isControlled = typeof propOpen !== "undefined";
+    const [stateOpen, setStateOpen] = (0, _react.useState)(propOpen);
+    const [, /* height */ setHeight] = (0, _react.useState)(0);
+    const hash = id ? `#${id}` : "";
+    const winSize = (0, _useWindowSize.useWindowSize)();
+    const open = isControlled ? propOpen : stateOpen;
+    const [overflow /* setOverflow */ ] = (0, _react.useState)(open ? "unset" : "hidden");
+    const content = (0, _react.useRef)(null);
+    const defaultId = (0, _react.useId)();
     id = id || defaultId;
-    var handleClick = (0, react_1.useCallback)(function () {
+    const handleClick = (0, _react.useCallback)(()=>{
         if (hash) {
             window.history.replaceState(null, "", open ? window.location.pathname + window.location.search : hash);
         }
@@ -35,32 +55,55 @@ var DetailsWithRef = (0, react_1.forwardRef)(function Details(_a, ref) {
             onChange();
         }
         if (!isControlled) {
-            setStateOpen(function (prevOpen) { return !prevOpen; });
+            setStateOpen((prevOpen)=>!prevOpen);
         }
-    }, [open, hash, onChange, isControlled]);
-    (0, react_1.useEffect)(function () {
+    }, [
+        open,
+        hash,
+        onChange,
+        isControlled
+    ]);
+    (0, _react.useEffect)(()=>{
         if (content.current) {
             setHeight(Math.ceil(content.current.offsetHeight));
         }
-    }, [winSize, recalc]);
+    }, [
+        winSize,
+        recalc
+    ]);
     // deeplink on mount
-    (0, react_1.useEffect)(function () {
+    (0, _react.useEffect)(()=>{
         if (!isControlled && hash && window.location.hash === hash) {
             setStateOpen(true);
         }
-    }, [hash, isControlled]);
-    return ((0, jsx_runtime_1.jsxs)(exports.Root, tslib_1.__assign({}, props, { open: open || false, children: [(0, jsx_runtime_1.jsx)(exports.Summary, { "$open": open, onClick: handleClick, children: summary || " " }), (0, jsx_runtime_1.jsx)(exports.Body, { "$open": open, style: { overflow: overflow }, children: (0, jsx_runtime_1.jsx)(exports.Content
-                // ref={content}
-                , { "$open": open, 
-                    // aria-expanded={open}
-                    // aria-label={open ? ariaCollapse : ariaExpand}
-                    style: {
-                        pointerEvents: open ? "all" : "none",
-                    }, children: children }) })] })));
-});
-exports.KoineDetails = (0, helpers_1.extendComponent)(DetailsWithRef, {
-    Root: exports.Root,
-    Summary: exports.Summary,
-    Body: exports.Body,
-    Content: exports.Content,
+    }, [
+        hash,
+        isControlled
+    ]);
+    return /*#__PURE__*/ React.createElement(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)));
 });
+const KoineDetails = (0, _helpers.extendComponent)(DetailsWithRef, {
+    Root,
+    Summary,
+    Body,
+    Content
+}); // export default Details;