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

package/Alert/Alert.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "Alert", {
     }
 });
 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 AlertRoot = _styledcomponents.default.div`
   font-size: 12px;
@@ -22,8 +23,11 @@ const AlertInner = _styledcomponents.default.div`
   /* color: red; */
 `;
 const Alert = ({ $danger, children, ...props })=>{
-    return /*#__PURE__*/ React.createElement(AlertRoot, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(AlertRoot, {
         $danger: $danger,
-        ...props
-    }, /*#__PURE__*/ React.createElement(AlertInner, null, children));
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(AlertInner, {
+            children: children
+        })
+    });
 };

package/Alert/Alert.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 const AlertRoot = styled.div`
   font-size: 12px;
@@ -11,8 +12,11 @@ const AlertInner = styled.div`
   /* color: red; */
 `;
 export const Alert = ({ $danger, children, ...props })=>{
-    return /*#__PURE__*/ React.createElement(AlertRoot, {
+    return /*#__PURE__*/ _jsx(AlertRoot, {
         $danger: $danger,
-        ...props
-    }, /*#__PURE__*/ React.createElement(AlertInner, null, children));
+        ...props,
+        children: /*#__PURE__*/ _jsx(AlertInner, {
+            children: children
+        })
+    });
 };

package/Alert/Alert.stories.js

@@ -19,12 +19,15 @@ _export(exports, {
         return danger;
     }
 });
+const _jsxruntime = require("react/jsx-runtime");
 const _Alert = require("./Alert");
 const _default = {
     component: _Alert.Alert,
     title: "Base/Alert"
 };
-const Template = (args)=>/*#__PURE__*/ React.createElement(_Alert.Alert, args);
+const Template = (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.Alert, {
+        ...args
+    });
 const bare = Template.bind({});
 bare.args = {
     children: "An alert message"

package/Alert/Alert.stories.mjs

@@ -1,9 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert } from "./Alert";
 export default {
     component: Alert,
     title: "Base/Alert"
 };
-const Template = (args)=>/*#__PURE__*/ React.createElement(Alert, args);
+const Template = (args)=>/*#__PURE__*/ _jsx(Alert, {
+        ...args
+    });
 export const bare = Template.bind({});
 bare.args = {
     children: "An alert message"

package/Animations/Reveal.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "Reveal", {
         return Reveal;
     }
 });
+const _jsxruntime = require("react/jsx-runtime");
 const _framermotion = require("framer-motion");
 const _useReveal = require("./useReveal");
 const Reveal = ({ children, direction, offsetStartY, offsetEndY, offsetStartX, ...props })=>{
@@ -40,12 +41,13 @@ const Reveal = ({ children, direction, offsetStartY, offsetEndY, offsetStartX, .
     });
     const opacity = (0, _framermotion.useSpring)(opacityRange);
     // console.log("start, end", startY, endY)
-    return /*#__PURE__*/ React.createElement(_framermotion.motion.div, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_framermotion.motion.div, {
         ...props,
         ref: ref,
         style: prefersReducedMotion ? {} : {
             x,
             opacity
-        }
-    }, children);
+        },
+        children: children
+    });
 };

package/Animations/Reveal.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { motion, useReducedMotion, useSpring, useTransform, useViewportScroll } from "framer-motion";
 import { useReveal } from "./useReveal";
 export const Reveal = ({ children, direction, offsetStartY, offsetEndY, offsetStartX, ...props })=>{
@@ -30,12 +31,13 @@ export const Reveal = ({ children, direction, offsetStartY, offsetEndY, offsetSt
     });
     const opacity = useSpring(opacityRange);
     // console.log("start, end", startY, endY)
-    return /*#__PURE__*/ React.createElement(motion.div, {
+    return /*#__PURE__*/ _jsx(motion.div, {
         ...props,
         ref: ref,
         style: prefersReducedMotion ? {} : {
             x,
             opacity
-        }
-    }, children);
+        },
+        children: children
+    });
 };

package/Animations/Underline.d.ts

@@ -1 +1 @@
-export declare const UnderlineSkewed: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"i">>, import("styled-components").DefaultTheme, {}, never>;
+export declare const UnderlineSkewed: any;

package/Autocomplete/AutocompleteMui.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "Autocomplete", {
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _jsxruntime = require("react/jsx-runtime");
 const _useAutocomplete = /*#__PURE__*/ _interop_require_default._(require("@mui/base/useAutocomplete"));
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _isString = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isString"));
@@ -122,33 +123,61 @@ name, onChange, $ref, children, ...props })=>{
     //     inputProps.ref.current.focus();
     //   }
     // }, [errors, name, inputProps.ref]);
-    return /*#__PURE__*/ _react.default.createElement(_components.AutocompleteRoot, null, label && /*#__PURE__*/ _react.default.createElement(_components.AutocompleteLabel, getInputLabelProps(), label), /*#__PURE__*/ _react.default.createElement(_components.AutocompleteWrap, {
-        ...getRootProps(),
-        "data-focus": focused
-    }, /*#__PURE__*/ _react.default.createElement(_components.AutocompleteInner, {
-        ref: setAnchorEl
-    }, multiple && value.map((valueItem, index)=>{
-        const { onDelete, key, ...tagProps } = getTagProps({
-            index
-        });
-        return /*#__PURE__*/ _react.default.createElement(_components.AutocompleteItem, {
-            key: key,
-            ...tagProps
-        }, /*#__PURE__*/ _react.default.createElement(_components.AutocompleteItemLabel, null, (0, _isString.default)(valueItem) ? valueItem : valueItem.Label || valueItem.label), /*#__PURE__*/ _react.default.createElement(_components.AutocompleteItemRemove, {
-            onClick: onDelete
-        }, "✕"));
-    }), /*#__PURE__*/ _react.default.createElement(_components.AutocompleteInput, {
-        ...inputProps(),
-        placeholder: placeholder
-    })), !!options.length && /*#__PURE__*/ _react.default.createElement(_components.AutocompleteInputArrow, {
-        ...getPopupIndicatorProps(),
-        isOpen: popupOpen
-    }), loading && /*#__PURE__*/ _react.default.createElement(_styles.InputProgress, null)), groupedOptions.length ? /*#__PURE__*/ _react.default.createElement(_components.AutocompleteMenu, getListboxProps(), groupedOptions.map((option, index)=>/*#__PURE__*/ _react.default.createElement(_components.AutocompleteMenuItem, {
-            key: index,
-            ...getOptionProps({
-                option,
-                index
-            })
-        }, (0, _isString.default)(option) ? option : option.Label || option.label))) : null, children);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.AutocompleteRoot, {
+        children: [
+            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.AutocompleteLabel, {
+                ...getInputLabelProps(),
+                children: label
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.AutocompleteWrap, {
+                ...getRootProps(),
+                "data-focus": focused,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.AutocompleteInner, {
+                        ref: setAnchorEl,
+                        children: [
+                            multiple && value.map((valueItem, index)=>{
+                                const { onDelete, key, ...tagProps } = getTagProps({
+                                    index
+                                });
+                                return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.AutocompleteItem, {
+                                    ...tagProps,
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.AutocompleteItemLabel, {
+                                            children: (0, _isString.default)(valueItem) ? valueItem : valueItem.Label || valueItem.label
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.AutocompleteItemRemove, {
+                                            onClick: onDelete,
+                                            children: "✕"
+                                        })
+                                    ]
+                                }, key);
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.AutocompleteInput, {
+                                ...inputProps(),
+                                placeholder: placeholder
+                            })
+                        ]
+                    }),
+                    !!options.length && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.AutocompleteInputArrow, {
+                        ...getPopupIndicatorProps(),
+                        isOpen: popupOpen
+                    }),
+                    loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_styles.InputProgress, {})
+                ]
+            }),
+            groupedOptions.length ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.AutocompleteMenu, {
+                ...getListboxProps(),
+                children: groupedOptions.map((option, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_components.AutocompleteMenuItem, {
+                        ...getOptionProps({
+                            option,
+                            index
+                        }),
+                        children: (0, _isString.default)(option) ? option : option.Label || option.label
+                    }, index))
+            }) : null,
+            children
+        ]
+    });
 // });
 };

package/Autocomplete/AutocompleteMui.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useAutocomplete from "@mui/base/useAutocomplete";
 import React, { useCallback, useMemo, useState } from "react";
 // forwardRef,
@@ -158,33 +159,61 @@ name, onChange, $ref, children, ...props })=>{
     //     inputProps.ref.current.focus();
     //   }
     // }, [errors, name, inputProps.ref]);
-    return /*#__PURE__*/ React.createElement(AutocompleteRoot, null, label && /*#__PURE__*/ React.createElement(AutocompleteLabel, getInputLabelProps(), label), /*#__PURE__*/ React.createElement(AutocompleteWrap, {
-        ...getRootProps(),
-        "data-focus": focused
-    }, /*#__PURE__*/ React.createElement(AutocompleteInner, {
-        ref: setAnchorEl
-    }, multiple && value.map((valueItem, index)=>{
-        const { onDelete, key, ...tagProps } = getTagProps({
-            index
-        });
-        return /*#__PURE__*/ React.createElement(AutocompleteItem, {
-            key: key,
-            ...tagProps
-        }, /*#__PURE__*/ React.createElement(AutocompleteItemLabel, null, isString(valueItem) ? valueItem : valueItem.Label || valueItem.label), /*#__PURE__*/ React.createElement(AutocompleteItemRemove, {
-            onClick: onDelete
-        }, "✕"));
-    }), /*#__PURE__*/ React.createElement(AutocompleteInput, {
-        ...inputProps(),
-        placeholder: placeholder
-    })), !!options.length && /*#__PURE__*/ React.createElement(AutocompleteInputArrow, {
-        ...getPopupIndicatorProps(),
-        isOpen: popupOpen
-    }), loading && /*#__PURE__*/ React.createElement(InputProgress, null)), groupedOptions.length ? /*#__PURE__*/ React.createElement(AutocompleteMenu, getListboxProps(), groupedOptions.map((option, index)=>/*#__PURE__*/ React.createElement(AutocompleteMenuItem, {
-            key: index,
-            ...getOptionProps({
-                option,
-                index
-            })
-        }, isString(option) ? option : option.Label || option.label))) : null, children);
+    return /*#__PURE__*/ _jsxs(AutocompleteRoot, {
+        children: [
+            label && /*#__PURE__*/ _jsx(AutocompleteLabel, {
+                ...getInputLabelProps(),
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs(AutocompleteWrap, {
+                ...getRootProps(),
+                "data-focus": focused,
+                children: [
+                    /*#__PURE__*/ _jsxs(AutocompleteInner, {
+                        ref: setAnchorEl,
+                        children: [
+                            multiple && value.map((valueItem, index)=>{
+                                const { onDelete, key, ...tagProps } = getTagProps({
+                                    index
+                                });
+                                return /*#__PURE__*/ _jsxs(AutocompleteItem, {
+                                    ...tagProps,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(AutocompleteItemLabel, {
+                                            children: isString(valueItem) ? valueItem : valueItem.Label || valueItem.label
+                                        }),
+                                        /*#__PURE__*/ _jsx(AutocompleteItemRemove, {
+                                            onClick: onDelete,
+                                            children: "✕"
+                                        })
+                                    ]
+                                }, key);
+                            }),
+                            /*#__PURE__*/ _jsx(AutocompleteInput, {
+                                ...inputProps(),
+                                placeholder: placeholder
+                            })
+                        ]
+                    }),
+                    !!options.length && /*#__PURE__*/ _jsx(AutocompleteInputArrow, {
+                        ...getPopupIndicatorProps(),
+                        isOpen: popupOpen
+                    }),
+                    loading && /*#__PURE__*/ _jsx(InputProgress, {})
+                ]
+            }),
+            groupedOptions.length ? /*#__PURE__*/ _jsx(AutocompleteMenu, {
+                ...getListboxProps(),
+                children: groupedOptions.map((option, index)=>/*#__PURE__*/ _jsx(AutocompleteMenuItem, {
+                        ...getOptionProps({
+                            option,
+                            index
+                        }),
+                        children: isString(option) ? option : option.Label || option.label
+                    }, index))
+            }) : null,
+            children
+        ]
+    });
 // });
 };

package/Autocomplete/components.d.ts

@@ -1,21 +1,17 @@
-/// <reference types="react" />
-export declare const AutocompleteRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteItem: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteItemLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteItemRemove: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteInputWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const AutocompleteRoot: any;
+export declare const AutocompleteLabel: any;
+export declare const AutocompleteWrap: any;
+export declare const AutocompleteInner: any;
+export declare const AutocompleteItem: any;
+export declare const AutocompleteItemLabel: any;
+export declare const AutocompleteItemRemove: any;
+export declare const AutocompleteInputWrap: any;
+export declare const AutocompleteInput: any;
 /**
  * This cannot be a button otherwise on `Enter` the form would submit instead
  * of opening the dropdown or adding the selection. There are too many events
  * to prevent if we were using a standard HTML `<button>`
  */
-export declare const AutocompleteInputArrow: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Select/components").SelectArrowProps & import("react").RefAttributes<HTMLSpanElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteMenu: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteMenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
-    $active?: boolean | undefined;
-    disabled?: boolean | undefined;
-}, never>;
+export declare const AutocompleteInputArrow: any;
+export declare const AutocompleteMenu: any;
+export declare const AutocompleteMenuItem: any;

package/Bg/BgColor.d.ts

@@ -1,12 +1,7 @@
 /// <reference types="react" />
 import { ContainerProps } from "../Grid";
-export declare const BgColor: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    $bg: BgContainerProps["color"];
-}, never>;
-export declare const BgColorSkewed: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    $bg: BgContainerProps["color"];
-    $transform: string;
-}, never>;
+export declare const BgColor: any;
+export declare const BgColorSkewed: any;
 export type BgContainerProps = ContainerProps & {
     color: NonNullable<React.CSSProperties["background"]>;
     /**

package/Bg/BgColor.js

@@ -20,6 +20,7 @@ _export(exports, {
     }
 });
 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 _Grid = require("../Grid");
 const _styles = require("../styles");
@@ -45,15 +46,19 @@ const BgContainer = ({ color, skewY = 0, rotate = 0, scaleY = 1, scaleX = 1, per
     if (skewY || rotate) {
         $transform = `perspective(${perspective}vw) rotateY(${rotate}deg) skewY(${skewY}deg) scaleY(${scaleY}) scaleX(${scaleX})`;
     }
-    return $transform ? /*#__PURE__*/ React.createElement(BgColorSkewed, {
+    return $transform ? /*#__PURE__*/ (0, _jsxruntime.jsx)(BgColorSkewed, {
         $bg: color,
-        $transform: $transform
-    }, /*#__PURE__*/ React.createElement(_Grid.Container, {
-        style: {
-            position: "relative"
-        },
-        ...containerProps
-    })) : /*#__PURE__*/ React.createElement(BgColor, {
-        $bg: color
-    }, /*#__PURE__*/ React.createElement(_Grid.Container, containerProps));
+        $transform: $transform,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.Container, {
+            style: {
+                position: "relative"
+            },
+            ...containerProps
+        })
+    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(BgColor, {
+        $bg: color,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.Container, {
+            ...containerProps
+        })
+    });
 };

package/Bg/BgColor.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { Container } from "../Grid";
 import { overlay } from "../styles";
@@ -23,15 +24,19 @@ export const BgContainer = ({ color, skewY = 0, rotate = 0, scaleY = 1, scaleX =
     if (skewY || rotate) {
         $transform = `perspective(${perspective}vw) rotateY(${rotate}deg) skewY(${skewY}deg) scaleY(${scaleY}) scaleX(${scaleX})`;
     }
-    return $transform ? /*#__PURE__*/ React.createElement(BgColorSkewed, {
+    return $transform ? /*#__PURE__*/ _jsx(BgColorSkewed, {
         $bg: color,
-        $transform: $transform
-    }, /*#__PURE__*/ React.createElement(Container, {
-        style: {
-            position: "relative"
-        },
-        ...containerProps
-    })) : /*#__PURE__*/ React.createElement(BgColor, {
-        $bg: color
-    }, /*#__PURE__*/ React.createElement(Container, containerProps));
+        $transform: $transform,
+        children: /*#__PURE__*/ _jsx(Container, {
+            style: {
+                position: "relative"
+            },
+            ...containerProps
+        })
+    }) : /*#__PURE__*/ _jsx(BgColor, {
+        $bg: color,
+        children: /*#__PURE__*/ _jsx(Container, {
+            ...containerProps
+        })
+    });
 };

package/Bg/BgPhoto.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "BgPhoto", {
     }
 });
 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 _Grid = require("../Grid");
 const _Hidden = require("../Hidden");
@@ -68,13 +69,14 @@ const BgPhoto = ({ src, containerSize = "xl", $overlap = 0 })=>{
         containerSize,
         $overlap
     };
-    return /*#__PURE__*/ React.createElement(BgPhotoWrap, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(BgPhotoWrap, {
         style: {
             backgroundImage: `url(${src})`
         },
-        $max: "xxl"
-    }, /*#__PURE__*/ React.createElement(BgPhotoMask, {
-        size: containerSize,
-        ...styledProps
-    }));
+        $max: "xxl",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(BgPhotoMask, {
+            size: containerSize,
+            ...styledProps
+        })
+    });
 };

package/Bg/BgPhoto.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { Container } from "../Grid";
 import { Hidden } from "../Hidden";
@@ -57,13 +58,14 @@ export const BgPhoto = ({ src, containerSize = "xl", $overlap = 0 })=>{
         containerSize,
         $overlap
     };
-    return /*#__PURE__*/ React.createElement(BgPhotoWrap, {
+    return /*#__PURE__*/ _jsx(BgPhotoWrap, {
         style: {
             backgroundImage: `url(${src})`
         },
-        $max: "xxl"
-    }, /*#__PURE__*/ React.createElement(BgPhotoMask, {
-        size: containerSize,
-        ...styledProps
-    }));
+        $max: "xxl",
+        children: /*#__PURE__*/ _jsx(BgPhotoMask, {
+            size: containerSize,
+            ...styledProps
+        })
+    });
 };

package/Bg/BgSvg.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "BgSvg", {
     }
 });
 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.svg`
   position: fixed;
@@ -18,12 +19,13 @@ const Root = _styledcomponents.default.svg`
   opacity: 0.9;
 `;
 const BgSvg = ({ color })=>{
-    return /*#__PURE__*/ React.createElement(Root, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Root, {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 1200 120",
-        preserveAspectRatio: "none"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M1200 0L0 0 598.97 114.72 1200 0z",
-        fill: color
-    }));
+        preserveAspectRatio: "none",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+            d: "M1200 0L0 0 598.97 114.72 1200 0z",
+            fill: color
+        })
+    });
 };

package/Bg/BgSvg.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 const Root = styled.svg`
   position: fixed;
@@ -9,12 +10,13 @@ const Root = styled.svg`
 /**
  * Centered triangle shape
  */ export const BgSvg = ({ color })=>{
-    return /*#__PURE__*/ React.createElement(Root, {
+    return /*#__PURE__*/ _jsx(Root, {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 1200 120",
-        preserveAspectRatio: "none"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M1200 0L0 0 598.97 114.72 1200 0z",
-        fill: color
-    }));
+        preserveAspectRatio: "none",
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M1200 0L0 0 598.97 114.72 1200 0z",
+            fill: color
+        })
+    });
 };

package/Breadcrumbs/Breadcrumbs.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "KoineBreadcrumbs", {
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _jsxruntime = require("react/jsx-runtime");
 const _framermotion = require("framer-motion");
 const _md = require("react-icons/md");
 const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard._(require("styled-components"));
@@ -70,21 +71,33 @@ const KoineBreadcrumbs = ({ items = [], Link, ...props })=>{
     if (!items.length) {
         return null;
     }
-    return /*#__PURE__*/ React.createElement(Root, props, /*#__PURE__*/ React.createElement(Inner, null, items.map((item, idx)=>/*#__PURE__*/ React.createElement(Item, {
-            key: idx,
-            initial: {
-                opacity: 0,
-                x: 20
-            },
-            animate: {
-                opacity: 1,
-                x: 0,
-                transition: {
-                    delay: idx * 0.2
-                }
-            }
-        }, item.url && /*#__PURE__*/ React.createElement(ItemLink, {
-            as: Link,
-            href: item.url
-        }, (0, _titleCase.default)(item.title)), !item.url && /*#__PURE__*/ React.createElement(ItemCurrent, null, (0, _titleCase.default)(item.title)), idx < items.length - 1 && /*#__PURE__*/ React.createElement(ItemSeparator, null)))));
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Root, {
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Inner, {
+            children: items.map((item, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(Item, {
+                    initial: {
+                        opacity: 0,
+                        x: 20
+                    },
+                    animate: {
+                        opacity: 1,
+                        x: 0,
+                        transition: {
+                            delay: idx * 0.2
+                        }
+                    },
+                    children: [
+                        item.url && /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemLink, {
+                            as: Link,
+                            href: item.url,
+                            children: (0, _titleCase.default)(item.title)
+                        }),
+                        !item.url && /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemCurrent, {
+                            children: (0, _titleCase.default)(item.title)
+                        }),
+                        idx < items.length - 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemSeparator, {})
+                    ]
+                }, idx))
+        })
+    });
 };