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

package/Rating/Rating.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useState } from "react";
 import styled from "styled-components";
 export const RatingStarRoot = styled.svg`
@@ -7,33 +8,44 @@ export const RatingStarRoot = styled.svg`
 `;
 export const RatingStar = ({ value, colorBg = "#FFD84C", colorStroke = "#947813", size, ...props })=>{
     const id = useId();
-    return /*#__PURE__*/ React.createElement(RatingStarRoot, {
+    return /*#__PURE__*/ _jsxs(RatingStarRoot, {
         viewBox: "0 0 16 16",
         "data-value": value,
         width: size + "px",
         height: size + "px",
-        ...props
-    }, /*#__PURE__*/ React.createElement("defs", null, /*#__PURE__*/ React.createElement("linearGradient", {
-        id: id,
-        x1: "0",
-        y1: "0",
-        x2: "1",
-        y2: "0"
-    }, /*#__PURE__*/ React.createElement("stop", {
-        offset: "0",
-        stopColor: colorBg
-    }), /*#__PURE__*/ React.createElement("stop", {
-        offset: value,
-        stopColor: colorBg
-    }), /*#__PURE__*/ React.createElement("stop", {
-        offset: value,
-        stopColor: "rgba(255, 255, 255, 0)"
-    }))), /*#__PURE__*/ React.createElement("path", {
-        stroke: colorStroke,
-        strokeWidth: "0.5",
-        fill: `url(#${id})`,
-        d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
-    }));
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("defs", {
+                children: /*#__PURE__*/ _jsxs("linearGradient", {
+                    id: id,
+                    x1: "0",
+                    y1: "0",
+                    x2: "1",
+                    y2: "0",
+                    children: [
+                        /*#__PURE__*/ _jsx("stop", {
+                            offset: "0",
+                            stopColor: colorBg
+                        }),
+                        /*#__PURE__*/ _jsx("stop", {
+                            offset: value,
+                            stopColor: colorBg
+                        }),
+                        /*#__PURE__*/ _jsx("stop", {
+                            offset: value,
+                            stopColor: "rgba(255, 255, 255, 0)"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                stroke: colorStroke,
+                strokeWidth: "0.5",
+                fill: `url(#${id})`,
+                d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
+            })
+        ]
+    });
 };
 export const RatingDetails = styled.span`
   padding-left: 0.5em;
@@ -113,16 +125,30 @@ export const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true,
     //     onChange(value);
     //   }
     // }, [onChange];
-    return /*#__PURE__*/ React.createElement(RatingRoot, null, stars.map((star, idx)=>/*#__PURE__*/ React.createElement(RatingStar, {
-            key: id + idx,
-            idx: idx,
-            dataIdx: idx,
-            size: starSize,
-            // onMouseOver={handleMouseOver}
-            // onMouseLeave={handleMouseLeave}
-            // onClick={handleClick}
-            value: star.value,
-            colorBg: colorBg,
-            colorStroke: colorStroke
-        })), " ", showDetails && count && /*#__PURE__*/ React.createElement(RatingDetails, null, /*#__PURE__*/ React.createElement(RatingCount, null, count), /*#__PURE__*/ React.createElement(RatingValue, null, ` - ${value}`)));
+    return /*#__PURE__*/ _jsxs(RatingRoot, {
+        children: [
+            stars.map((star, idx)=>/*#__PURE__*/ _jsx(RatingStar, {
+                    idx: idx,
+                    dataIdx: idx,
+                    size: starSize,
+                    // onMouseOver={handleMouseOver}
+                    // onMouseLeave={handleMouseLeave}
+                    // onClick={handleClick}
+                    value: star.value,
+                    colorBg: colorBg,
+                    colorStroke: colorStroke
+                }, id + idx)),
+            " ",
+            showDetails && count && /*#__PURE__*/ _jsxs(RatingDetails, {
+                children: [
+                    /*#__PURE__*/ _jsx(RatingCount, {
+                        children: count
+                    }),
+                    /*#__PURE__*/ _jsx(RatingValue, {
+                        children: ` - ${value}`
+                    })
+                ]
+            })
+        ]
+    });
 };

package/Select/components.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const SelectArrowStyled: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLSpanElement, import("framer-motion").HTMLMotionProps<"span">>, import("styled-components").DefaultTheme, {}, never>;
+export declare const SelectArrowStyled: any;
 export type SelectArrowProps = {
     isOpen?: boolean;
 };

package/Select/components.js

@@ -17,6 +17,7 @@ _export(exports, {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _framermotion = require("framer-motion");
 const _react = require("react");
 const _bs = require("react-icons/bs");
@@ -32,11 +33,12 @@ const SelectArrowStyled = (0, _styledcomponents.default)(_framermotion.m.span)`
   }
 `;
 const SelectArrow = /*#__PURE__*/ (0, _react.forwardRef)(function SelectArrow({ isOpen, ...props }, ref) {
-    return /*#__PURE__*/ React.createElement(SelectArrowStyled, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(SelectArrowStyled, {
         animate: {
             rotate: isOpen ? 180 : 0
         },
         ref: ref,
-        ...props
-    }, /*#__PURE__*/ React.createElement(_bs.BsBoxArrowInDown, null));
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_bs.BsBoxArrowInDown, {})
+    });
 });

package/Select/components.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { m } from "framer-motion";
 import { forwardRef } from "react";
 import { BsBoxArrowInDown as IconCollapse } from "react-icons/bs";
@@ -13,11 +14,12 @@ export const SelectArrowStyled = styled(m.span)`
   }
 `;
 export const SelectArrow = /*#__PURE__*/ forwardRef(function SelectArrow({ isOpen, ...props }, ref) {
-    return /*#__PURE__*/ React.createElement(SelectArrowStyled, {
+    return /*#__PURE__*/ _jsx(SelectArrowStyled, {
         animate: {
             rotate: isOpen ? 180 : 0
         },
         ref: ref,
-        ...props
-    }, /*#__PURE__*/ React.createElement(IconCollapse, null));
+        ...props,
+        children: /*#__PURE__*/ _jsx(IconCollapse, {})
+    });
 });

package/Sidebar/Sidebar.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "Sidebar", {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _cg = require("react-icons/cg");
 const _gr = require("react-icons/gr");
@@ -54,12 +55,20 @@ const Sidebar = ({ children })=>{
     const handleClickToggle = (0, _react.useCallback)(()=>{
         setOpen((prevOpen)=>!prevOpen);
     }, []);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(SidebarToggle, {
-        onClick: handleClickToggle
-    }, /*#__PURE__*/ React.createElement(_Buttons.IconButtonFab, {
-        $variant: "contained"
-    }, open ? /*#__PURE__*/ React.createElement(_cg.CgCloseR, null) : /*#__PURE__*/ React.createElement(_gr.GrFolderOpen, null))), /*#__PURE__*/ React.createElement(SidebarWrapper, {
-        $open: open,
-        $top: headerHeight
-    }, children));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(SidebarToggle, {
+                onClick: handleClickToggle,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Buttons.IconButtonFab, {
+                    $variant: "contained",
+                    children: open ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_cg.CgCloseR, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_gr.GrFolderOpen, {})
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(SidebarWrapper, {
+                $open: open,
+                $top: headerHeight,
+                children: children
+            })
+        ]
+    });
 };

package/Sidebar/Sidebar.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import { CgCloseR as IconClose } from "react-icons/cg";
 import { GrFolderOpen as IconOpen } from "react-icons/gr";
@@ -43,12 +44,20 @@ export const Sidebar = ({ children })=>{
     const handleClickToggle = useCallback(()=>{
         setOpen((prevOpen)=>!prevOpen);
     }, []);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(SidebarToggle, {
-        onClick: handleClickToggle
-    }, /*#__PURE__*/ React.createElement(IconButtonFab, {
-        $variant: "contained"
-    }, open ? /*#__PURE__*/ React.createElement(IconClose, null) : /*#__PURE__*/ React.createElement(IconOpen, null))), /*#__PURE__*/ React.createElement(SidebarWrapper, {
-        $open: open,
-        $top: headerHeight
-    }, children));
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(SidebarToggle, {
+                onClick: handleClickToggle,
+                children: /*#__PURE__*/ _jsx(IconButtonFab, {
+                    $variant: "contained",
+                    children: open ? /*#__PURE__*/ _jsx(IconClose, {}) : /*#__PURE__*/ _jsx(IconOpen, {})
+                })
+            }),
+            /*#__PURE__*/ _jsx(SidebarWrapper, {
+                $open: open,
+                $top: headerHeight,
+                children: children
+            })
+        ]
+    });
 };

package/Spacing/Spacing.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "Spacing", {
     }
 });
 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 _isUndefined = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isUndefined"));
 const _spacing = require("../styles/spacing");
@@ -42,9 +43,11 @@ const Spacing = ({ top, bottom, vertical, ...props })=>{
     }
     if (!$top && !$bottom && !vertical) {
         // eslint-disable-next-line react/jsx-no-useless-fragment
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, props.children);
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+            children: props.children
+        });
     }
-    return /*#__PURE__*/ React.createElement(Root, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Root, {
         $top: $top,
         $bottom: $bottom,
         ...props

package/Spacing/Spacing.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from "styled-components";
 import isUndefined from "@koine/utils/isUndefined";
 import { spacingBottom, spacingTop } from "../styles/spacing";
@@ -42,9 +43,11 @@ const extractDirectionArgs = (raw)=>{
     }
     if (!$top && !$bottom && !vertical) {
         // eslint-disable-next-line react/jsx-no-useless-fragment
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, props.children);
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: props.children
+        });
     }
-    return /*#__PURE__*/ React.createElement(Root, {
+    return /*#__PURE__*/ _jsx(Root, {
         $top: $top,
         $bottom: $bottom,
         ...props

package/Sticky/StickyCss.js

@@ -8,8 +8,9 @@ Object.defineProperty(exports, "StickyCss", {
         return StickyCss;
     }
 });
+const _jsxruntime = require("react/jsx-runtime");
 const StickyCss = ({ top, ...props })=>{
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         style: {
             position: "sticky",
             top: 100

package/Sticky/StickyCss.mjs

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 export const StickyCss = ({ top, ...props })=>{
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsx("div", {
         style: {
             position: "sticky",
             top: 100