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

package/Carousel/CarouselCss.js

@@ -1,26 +1,19 @@
-"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) {
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+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/index.js";
+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 === 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  ");
+    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  ");
 });
-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)();
+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; });
+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 ((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))); }) }));
+    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))); }) }));
 };
-exports.KoineCarouselCss = KoineCarouselCss;
 var templateObject_1, templateObject_2;

package/Carousel/index.d.ts

@@ -1 +1 @@
-export * from "./CarouselCss";
+export * from "./CarouselCss.js";

package/Carousel/index.js

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./CarouselCss"), exports);
+export * from "./CarouselCss.js";

package/Collapsable/Collapsable.js

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Collapsable = void 0;
-exports.Collapsable = null;
+export var Collapsable = null;

package/Collapsable/CollapsableReach.d.ts

@@ -1,6 +0,0 @@
-/**
- * @file
- *
- * Maybe do a simplified version following this example:
- * https://codesandbox.io/s/framer-motion-accordion-qx958?file=/src/Example.tsx
- */

package/Collapsable/CollapsableReach.js

@@ -1,252 +1 @@
 "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 styled from "styled-components";
-// import { MotionProps, m } from "framer-motion";
-// import {
-//   Disclosure,
-//   DisclosureButton,
-//   DisclosurePanel,
-// } from "@reach/disclosure";
-// import { BsBoxArrowInDown as IconCollapse } from "react-icons/bs";
-// import { btnStyleReset } from "../Buttons";
-// import { useWindowSize } from "../hooks/useWindowSize";
-// import { InputInvisible } from "../Forms/styles";
-// export type CollapsableStyledProps = {
-//   $expanded?: boolean;
-// };
-// /**
-//  * `overflow-anchor: none;` keeps the same scrolling position
-//  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Accordion/Accordion.js#L54
-//  */
-// export const CollapsableRoot = styled(Disclosure)`
-//   overflow-anchor: none;
-// `;
-// export const CollapsableHeadRoot = styled(m.label).attrs(
-//   (props: Pick<CollapsableHeadProps, "id">) => ({
-//     htmlFor: `${props.id}-input`,
-//   })
-// )<Pick<CollapsableStyledProps, "$expanded">>`
-//   ${btnStyleReset}
-//   width: 100%;
-//   padding: 0;
-//   text-align: left;
-//   display: flex;
-//   justify-content: space-between;
-//   align-items: center;
-//   cursor: pointer;
-// `;
-// export const CollapsableHeadSpace = styled.div`
-//   flex: 1;
-//   padding-left: 20px;
-// `;
-// export const CollapsableHeadAction = styled.div`
-//   padding-left: 20px;
-// `;
-// export const CollaspableHeadLine = styled(m.div)`
-//   width: 0%;
-//   height: 1px;
-//   background: #bbb;
-// `;
-// export const collapsableHeadLineMotion = {
-//   hover: {
-//     width: "100%",
-//     transition: {
-//       duration: 0.4,
-//     },
-//   },
-// };
-// export const CollapsableHeadText = styled.div``;
-// export const CollapsableHeadIcon = styled(m.div)``;
-// export type CollapsableHeadProps = React.PropsWithChildren<
-//   Pick<CollapsableStyledProps, "$expanded"> &
-//     CollapsableComponents & {
-//       id: CollapsableProps["id"];
-//       onClick: (...args: any) => any;
-//     }
-// >;
-// export const CollapsableHead = ({
-//   $expanded,
-//   id,
-//   onClick,
-//   HeadRoot = CollapsableHeadRoot,
-//   HeadAction = CollapsableHeadAction,
-//   HeadIcon = CollapsableHeadIcon,
-//   children,
-// }: CollapsableHeadProps) => {
-//   return (
-//     <DisclosureButton
-//       onClick={onClick}
-//       // tabIndex={0}
-//       // role="tab"
-//       initial="rest"
-//       whileHover="hover"
-//       $expanded={$expanded}
-//       as={HeadRoot}
-//       id={id}
-//     >
-//       <CollapsableHeadText>{children}</CollapsableHeadText>
-//       <CollapsableHeadSpace>
-//         <CollaspableHeadLine
-//           variants={collapsableHeadLineMotion}
-//           animate={$expanded ? "hover" : ""}
-//         />
-//       </CollapsableHeadSpace>
-//       {HeadAction && (
-//         <HeadAction>
-//           {HeadIcon && (
-//             <HeadIcon animate={{ rotate: $expanded ? 180 : 0 }}>
-//               <IconCollapse />
-//             </HeadIcon>
-//           )}
-//         </HeadAction>
-//       )}
-//     </DisclosureButton>
-//   );
-// };
-// export const CollapsableInput = styled(InputInvisible).attrs({
-//   type: "checkbox",
-// })``;
-// export const CollasableBodyWrap = styled(
-//   DisclosurePanel
-// )<CollapsableStyledProps>`
-//   /* this is because @reach adds the "hidden" attribute */
-//   &[hidden] {
-//     display: block;
-//   }
-// `;
-// export const CollapsableBodyRoot = styled(m.div)`
-//   .no-js & {
-//     transition: margin-top 0.2s ease;
-//   }
-//   .no-js ${CollapsableInput}:checked + ${CollasableBodyWrap} & {
-//     margin-top: 0 !important;
-//     opacity: 1 !important;
-//   }
-// `;
-// export type CollapsableBodyProps = MotionProps &
-//   Pick<CollapsableStyledProps, "$expanded"> & {
-//     children?: React.ReactNode;
-//     style?: React.CSSProperties;
-//   };
-// export const CollapsableBody = forwardRef<HTMLDivElement, CollapsableBodyProps>(
-//   function CollapsableBody(props, ref) {
-//     return <CollapsableBodyRoot ref={ref} {...props} />;
-//   }
-// );
-// export type CollapsableComponents = {
-//   HeadRoot?: typeof CollapsableHeadRoot;
-//   HeadAction?: null | typeof CollapsableHeadAction | React.FC<any>;
-//   HeadIcon?: null | typeof CollapsableHeadIcon | React.FC<any>;
-// };
-// export type CollapsableProps = React.ComponentPropsWithoutRef<"div"> & {
-//   id?: string;
-//   expanded?: boolean;
-//   /** Used to trigger a recalculation effect */
-//   recalc?: any;
-//   onChange?: () => any;
-//   head: null | React.ReactNode;
-//   body: React.ReactNode;
-//   /** Amount of milliseconds after which the component collapses */
-//   // autoCollapse?: number;
-//   components?: CollapsableComponents;
-//   /** @default "Expand" */
-//   ariaExpand?: string;
-//   /** @default "Collapse" */
-//   ariaCollapse?: string;
-// };
-// export const Collapsable = ({
-//   expanded: propExpanded,
-//   recalc,
-//   onChange,
-//   id,
-//   head,
-//   body,
-//   // autoCollapse,
-//   components = {},
-//   ariaExpand = "Expand",
-//   ariaCollapse = "Collapse",
-//   ...props
-// }: CollapsableProps) => {
-//   const isControlled = typeof propExpanded !== "undefined";
-//   const [stateExpanded, setStateExpanded] = useState(propExpanded);
-//   const [height, setHeight] = useState(0);
-//   const hash = id ? `#${id}` : "";
-//   const winSize = useWindowSize();
-//   const expanded = isControlled ? propExpanded : stateExpanded;
-//   const [overflow, setOverflow] = useState(expanded ? "unset" : "hidden");
-//   const content = useRef<HTMLDivElement>(null);
-//   const defaultId = useId();
-//   id = id || defaultId;
-//   const handleClick = useCallback(() => {
-//     if (hash) {
-//       window.history.replaceState(
-//         null,
-//         "",
-//         expanded ? window.location.pathname + window.location.search : hash
-//       );
-//     }
-//     if (onChange) {
-//       onChange();
-//     }
-//     if (!isControlled) {
-//       setStateExpanded((prevExpanded) => !prevExpanded);
-//     }
-//   }, [expanded, hash, onChange, isControlled]);
-//   const handleAnimationStart = useCallback(() => {
-//     setOverflow("hidden");
-//   }, []);
-//   const handleAnimationComplete = useCallback(() => {
-//     setOverflow(expanded ? "unset" : "hidden");
-//   }, [expanded]);
-//   useEffect(() => {
-//     if (content.current) {
-//       setHeight(Math.ceil(content.current.offsetHeight));
-//     }
-//   }, [winSize, recalc]);
-//   // deeplink on mount
-//   useEffect(() => {
-//     if (!isControlled && hash && window.location.hash === hash) {
-//       setStateExpanded(true);
-//     }
-//   }, [hash, isControlled]);
-//   return (
-//     <CollapsableRoot id={id} {...props} open={expanded || false}>
-//       {head !== null && (
-//         <CollapsableHead
-//           id={id}
-//           $expanded={expanded}
-//           onClick={handleClick}
-//           {...components}
-//         >
-//           {head}
-//         </CollapsableHead>
-//       )}
-//       <CollapsableInput id={`${id}-input`} />
-//       <CollasableBodyWrap $expanded={expanded} style={{ overflow }}>
-//         <CollapsableBody
-//           ref={content}
-//           $expanded={expanded}
-//           // aria-expanded={expanded}
-//           // aria-label={expanded ? ariaCollapse : ariaExpand}
-//           style={{
-//             pointerEvents: expanded ? "all" : "none",
-//           }}
-//           onAnimationStart={handleAnimationStart}
-//           onAnimationComplete={handleAnimationComplete}
-//           animate={{
-//             marginTop: expanded ? 0 : height ? `-${height}px` : "-100vh",
-//             opacity: expanded ? 1 : 0.4,
-//           }}
-//         >
-//           {body}
-//         </CollapsableBody>
-//       </CollasableBodyWrap>
-//     </CollapsableRoot>
-//   );
-// };

package/Collapsable/index.d.ts

@@ -1 +1 @@
-export * from "./Collapsable";
+export * from "./Collapsable.js";

package/Collapsable/index.js

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

package/Debug/Debug.js

@@ -1,13 +1,9 @@
-"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) {
+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 (0, jsx_runtime_1.jsx)(Root, { children: JSON.stringify(data, undefined, 2) });
+    return _jsx(Root, { children: JSON.stringify(data, undefined, 2) });
 };
-exports.Debug = Debug;
 var templateObject_1;

package/Debug/index.d.ts

@@ -1 +1 @@
-export * from "./Debug";
+export * from "./Debug.js";

package/Debug/index.js

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Debug"), exports);
+export * from "./Debug.js";

package/Details/Details.d.ts

@@ -1,18 +1,12 @@
-/// <reference types="react" />
-/// <reference types="react" />
 import type { Simplify } from "@koine/utils";
-import { type WithComponents } from "../helpers";
+import { type WithComponents } from "../extendComponent";
 export type OwnProps = React.ComponentPropsWithoutRef<"details"> & {
     open?: boolean;
     onChange?: () => any;
     summary: null | React.ReactNode;
-    /** Amount of milliseconds after which the component collapses */
-    /** @default "Expand" */
     ariaExpand?: string;
-    /** @default "Collapse" */
     ariaCollapse?: string;
     id?: string;
-    /** Used to trigger a recalculation effect */
     recalc?: any;
 };
 export type Components = {
@@ -55,12 +49,12 @@ export declare const Summary: NonNullable<import("react").ElementType<Omit<impor
 } & Pick<OwnProps, "onChange"> & {
     children?: import("react").ReactNode;
 }>>;
-export declare const Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+export declare const Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
     $open: OwnProps["open"];
 } & Pick<OwnProps, "onChange"> & {
     children?: import("react").ReactNode;
 }>>;
-export declare const Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+export declare const Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
     $open: OwnProps["open"];
     "aria-expanded"?: React.AriaAttributes["aria-expanded"];
     "aria-label"?: React.AriaAttributes["aria-label"];
@@ -69,55 +63,22 @@ 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;
-    defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    accessKey?: string | undefined;
-    autoFocus?: boolean | undefined;
+    title?: string | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
-    contextMenu?: string | undefined;
-    dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    hidden?: boolean | undefined;
+    children?: import("react").ReactNode;
+    suppressHydrationWarning?: boolean | undefined;
+    color?: string | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
-    nonce?: string | undefined;
-    placeholder?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
-    radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
-    about?: string | undefined;
-    content?: string | undefined;
-    datatype?: string | undefined;
-    inlist?: any;
-    prefix?: string | undefined;
-    property?: string | undefined;
-    rel?: string | undefined;
-    resource?: string | undefined;
-    rev?: string | undefined;
-    typeof?: string | undefined;
-    vocab?: string | undefined;
-    autoCapitalize?: string | undefined;
-    autoCorrect?: string | undefined;
-    autoSave?: string | undefined;
-    itemProp?: string | undefined;
-    itemScope?: boolean | undefined;
-    itemType?: string | undefined;
-    itemID?: string | undefined;
-    itemRef?: string | undefined;
-    results?: number | undefined;
-    security?: string | undefined;
-    unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
-    is?: string | undefined;
+    tabIndex?: number | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
@@ -130,12 +91,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" | "step" | "true" | "false" | "page" | "location" | "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;
@@ -157,7 +118,7 @@ export declare const KoineDetails: ((props: {
     'aria-posinset'?: number | undefined;
     'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-readonly'?: (boolean | "true" | "false") | undefined;
-    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     'aria-required'?: (boolean | "true" | "false") | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
@@ -171,7 +132,6 @@ export declare const KoineDetails: ((props: {
     'aria-valuemin'?: number | undefined;
     'aria-valuenow'?: number | undefined;
     'aria-valuetext'?: string | undefined;
-    children?: import("react").ReactNode;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
@@ -267,9 +227,7 @@ export declare const KoineDetails: ((props: {
     onContextMenuCapture?: import("react").MouseEventHandler<HTMLDetailsElement> | undefined;
     onDoubleClick?: import("react").MouseEventHandler<HTMLDetailsElement> | undefined;
     onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDetailsElement> | undefined;
-    onDrag?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDragCapture?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
-    onDragEnd?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDragEndCapture?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDragEnter?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDragEnterCapture?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
@@ -279,7 +237,6 @@ export declare const KoineDetails: ((props: {
     onDragLeaveCapture?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDragOver?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDragOverCapture?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
-    onDragStart?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDragStartCapture?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDrop?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDropCapture?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
@@ -329,14 +286,51 @@ export declare const KoineDetails: ((props: {
     onScrollCapture?: import("react").UIEventHandler<HTMLDetailsElement> | undefined;
     onWheel?: import("react").WheelEventHandler<HTMLDetailsElement> | undefined;
     onWheelCapture?: import("react").WheelEventHandler<HTMLDetailsElement> | undefined;
-    onAnimationStart?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
     onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
-    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
     onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
     onAnimationIteration?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    nonce?: string | undefined;
+    placeholder?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
     open?: boolean | undefined;
     onToggle?: import("react").ReactEventHandler<HTMLDetailsElement> | undefined;
     summary: null | React.ReactNode;
@@ -349,12 +343,12 @@ export declare const KoineDetails: ((props: {
     } & Pick<OwnProps, "onChange"> & {
         children?: import("react").ReactNode;
     }>>;
-    Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         $open: OwnProps["open"];
     } & Pick<OwnProps, "onChange"> & {
         children?: import("react").ReactNode;
     }>>;
-    Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         $open: OwnProps["open"];
         "aria-expanded"?: React.AriaAttributes["aria-expanded"];
         "aria-label"?: React.AriaAttributes["aria-label"];
@@ -368,12 +362,12 @@ export declare const KoineDetails: ((props: {
     } & Pick<OwnProps, "onChange"> & {
         children?: import("react").ReactNode;
     }>>;
-    Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         $open: OwnProps["open"];
     } & Pick<OwnProps, "onChange"> & {
         children?: import("react").ReactNode;
     }>>;
-    Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         $open: OwnProps["open"];
         "aria-expanded"?: React.AriaAttributes["aria-expanded"];
         "aria-label"?: React.AriaAttributes["aria-label"];
@@ -388,12 +382,12 @@ export declare const KoineDetails: ((props: {
         } & Pick<OwnProps, "onChange"> & {
             children?: import("react").ReactNode;
         }>>;
-        Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+        Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
             $open: OwnProps["open"];
         } & Pick<OwnProps, "onChange"> & {
             children?: import("react").ReactNode;
         }>>;
-        Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+        Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
             $open: OwnProps["open"];
             "aria-expanded"?: React.AriaAttributes["aria-expanded"];
             "aria-label"?: React.AriaAttributes["aria-label"];