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

package/Forms/InputGroup/InputGroup.js

@@ -26,6 +26,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 _Buttons = require("../../Buttons");
 const _media = require("../../styles/media");
@@ -65,11 +66,20 @@ const InputGroupButtonPost = (0, _styledcomponents.default)(_Buttons.KoineButton
   }
 `;
 const InputGroup = ({ pre, post, Button = _Buttons.KoineButton, btnProps = {}, children, ...props })=>{
-    return /*#__PURE__*/ React.createElement(InputGroupRoot, props, pre && /*#__PURE__*/ React.createElement(InputGroupButtonPre, {
-        as: Button,
-        ...btnProps
-    }), /*#__PURE__*/ React.createElement(InputGroupMain, null, children), post && /*#__PURE__*/ React.createElement(InputGroupButtonPost, {
-        as: Button,
-        ...btnProps
-    }));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(InputGroupRoot, {
+        ...props,
+        children: [
+            pre && /*#__PURE__*/ (0, _jsxruntime.jsx)(InputGroupButtonPre, {
+                as: Button,
+                ...btnProps
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(InputGroupMain, {
+                children: children
+            }),
+            post && /*#__PURE__*/ (0, _jsxruntime.jsx)(InputGroupButtonPost, {
+                as: Button,
+                ...btnProps
+            })
+        ]
+    });
 };

package/Forms/InputGroup/InputGroup.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { KoineButton } from "../../Buttons";
 import { max, min } from "../../styles/media";
@@ -37,11 +38,20 @@ export const InputGroupButtonPost = styled(KoineButton)`
   }
 `;
 export const InputGroup = ({ pre, post, Button = KoineButton, btnProps = {}, children, ...props })=>{
-    return /*#__PURE__*/ React.createElement(InputGroupRoot, props, pre && /*#__PURE__*/ React.createElement(InputGroupButtonPre, {
-        as: Button,
-        ...btnProps
-    }), /*#__PURE__*/ React.createElement(InputGroupMain, null, children), post && /*#__PURE__*/ React.createElement(InputGroupButtonPost, {
-        as: Button,
-        ...btnProps
-    }));
+    return /*#__PURE__*/ _jsxs(InputGroupRoot, {
+        ...props,
+        children: [
+            pre && /*#__PURE__*/ _jsx(InputGroupButtonPre, {
+                as: Button,
+                ...btnProps
+            }),
+            /*#__PURE__*/ _jsx(InputGroupMain, {
+                children: children
+            }),
+            post && /*#__PURE__*/ _jsx(InputGroupButtonPost, {
+                as: Button,
+                ...btnProps
+            })
+        ]
+    });
 };

package/Forms/Label/Label.d.ts

@@ -1,3 +1,3 @@
 export declare const label = "\n  display: flex;\n  font-size: 13px;\n  cursor: pointer;\n";
 export declare const labelMaterial = "\n  z-index: 2;\n  position: relative;\n  display: inline-block;\n  padding: 0 5px;\n  font-weight: 100;\n  font-size: 10px;\n  background: var(--bodyBg);\n  transform: translateY(-0.3em) translateX(1em);\n  cursor: pointer;\n\n  + * {\n    margin-top: -1em;\n  }\n";
-export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
+export declare const Label: any;

package/Forms/Password/Password.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { FormControl } from "../helpers";
-export declare const PasswordInputNative: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const PasswordInputNative: any;
 export type PasswordProps = FormControl;
 export declare const Password: import("react").ForwardRefExoticComponent<Omit<PasswordProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/Forms/Password/Password.js

@@ -17,6 +17,7 @@ _export(exports, {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _im = require("react-icons/im");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
@@ -44,15 +45,28 @@ const PasswordIcon = _styledcomponents.default.span`
 `;
 const Password = /*#__PURE__*/ (0, _react.forwardRef)(function Password({ register, name, label, ...props }, ref) {
     const [visible, setVisible] = (0, _react.useState)(false);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, label && /*#__PURE__*/ React.createElement(_Label.Label, null, label), /*#__PURE__*/ React.createElement(PasswordInputWrap, null, /*#__PURE__*/ React.createElement(PasswordInputNative, {
-        type: visible ? "text" : "password",
-        autoComplete: "new-password",
-        ...register ? register(name) : {
-            name,
-            ref
-        },
-        ...props
-    }), /*#__PURE__*/ React.createElement(PasswordIcon, {
-        onClick: ()=>setVisible((prev)=>!prev)
-    }, visible ? /*#__PURE__*/ React.createElement(_im.ImEyeBlocked, null) : /*#__PURE__*/ React.createElement(_im.ImEye, null))));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(PasswordInputWrap, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(PasswordInputNative, {
+                        type: visible ? "text" : "password",
+                        autoComplete: "new-password",
+                        ...register ? register(name) : {
+                            name,
+                            ref
+                        },
+                        ...props
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(PasswordIcon, {
+                        onClick: ()=>setVisible((prev)=>!prev),
+                        children: visible ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_im.ImEyeBlocked, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_im.ImEye, {})
+                    })
+                ]
+            })
+        ]
+    });
 });

package/Forms/Password/Password.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
 import { ImEyeBlocked as IconInvisible, ImEye as IconVisible } from "react-icons/im";
 import styled from "styled-components";
@@ -25,15 +26,28 @@ const PasswordIcon = styled.span`
 `;
 export const Password = /*#__PURE__*/ forwardRef(function Password({ register, name, label, ...props }, ref) {
     const [visible, setVisible] = useState(false);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, label && /*#__PURE__*/ React.createElement(Label, null, label), /*#__PURE__*/ React.createElement(PasswordInputWrap, null, /*#__PURE__*/ React.createElement(PasswordInputNative, {
-        type: visible ? "text" : "password",
-        autoComplete: "new-password",
-        ...register ? register(name) : {
-            name,
-            ref
-        },
-        ...props
-    }), /*#__PURE__*/ React.createElement(PasswordIcon, {
-        onClick: ()=>setVisible((prev)=>!prev)
-    }, visible ? /*#__PURE__*/ React.createElement(IconInvisible, null) : /*#__PURE__*/ React.createElement(IconVisible, null))));
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            label && /*#__PURE__*/ _jsx(Label, {
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs(PasswordInputWrap, {
+                children: [
+                    /*#__PURE__*/ _jsx(PasswordInputNative, {
+                        type: visible ? "text" : "password",
+                        autoComplete: "new-password",
+                        ...register ? register(name) : {
+                            name,
+                            ref
+                        },
+                        ...props
+                    }),
+                    /*#__PURE__*/ _jsx(PasswordIcon, {
+                        onClick: ()=>setVisible((prev)=>!prev),
+                        children: visible ? /*#__PURE__*/ _jsx(IconInvisible, {}) : /*#__PURE__*/ _jsx(IconVisible, {})
+                    })
+                ]
+            })
+        ]
+    });
 });

package/Forms/Radio/Radio.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "Radio", {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const _Label = require("../Label/Label");
@@ -32,18 +33,36 @@ const RadioOption = /*#__PURE__*/ (0, _react.forwardRef)(function RadioOption({
         name,
         ref: $ref || ref
     };
-    return /*#__PURE__*/ React.createElement(RadioOptionRoot, null, /*#__PURE__*/ React.createElement(RadioToggle, null, /*#__PURE__*/ React.createElement(_styles.InputInvisible, {
-        type: "radio",
-        ...inputProps,
-        ...props
-    }), /*#__PURE__*/ React.createElement(RadioIndicator, null)), /*#__PURE__*/ React.createElement(RadioOptionLabel, null, label));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(RadioOptionRoot, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(RadioToggle, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_styles.InputInvisible, {
+                        type: "radio",
+                        ...inputProps,
+                        ...props
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(RadioIndicator, {})
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(RadioOptionLabel, {
+                children: label
+            })
+        ]
+    });
 });
 const Radio = /*#__PURE__*/ (0, _react.forwardRef)(function Radio({ label, options, ...props }, ref) {
     if (!options) return null;
-    return /*#__PURE__*/ React.createElement(RadioRoot, null, label && /*#__PURE__*/ React.createElement(RadioLabel, null, label), options.map((option, idx)=>/*#__PURE__*/ React.createElement(RadioOption, {
-            key: idx,
-            ...option,
-            ...props,
-            $ref: ref
-        })));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(RadioRoot, {
+        children: [
+            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(RadioLabel, {
+                children: label
+            }),
+            options.map((option, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(RadioOption, {
+                    ...option,
+                    ...props,
+                    $ref: ref
+                }, idx))
+        ]
+    });
 });

package/Forms/Radio/Radio.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
 import { label } from "../Label/Label";
@@ -21,18 +22,36 @@ const RadioOption = /*#__PURE__*/ forwardRef(function RadioOption({ register, na
         name,
         ref: $ref || ref
     };
-    return /*#__PURE__*/ React.createElement(RadioOptionRoot, null, /*#__PURE__*/ React.createElement(RadioToggle, null, /*#__PURE__*/ React.createElement(InputInvisible, {
-        type: "radio",
-        ...inputProps,
-        ...props
-    }), /*#__PURE__*/ React.createElement(RadioIndicator, null)), /*#__PURE__*/ React.createElement(RadioOptionLabel, null, label));
+    return /*#__PURE__*/ _jsxs(RadioOptionRoot, {
+        children: [
+            /*#__PURE__*/ _jsxs(RadioToggle, {
+                children: [
+                    /*#__PURE__*/ _jsx(InputInvisible, {
+                        type: "radio",
+                        ...inputProps,
+                        ...props
+                    }),
+                    /*#__PURE__*/ _jsx(RadioIndicator, {})
+                ]
+            }),
+            /*#__PURE__*/ _jsx(RadioOptionLabel, {
+                children: label
+            })
+        ]
+    });
 });
 export const Radio = /*#__PURE__*/ forwardRef(function Radio({ label, options, ...props }, ref) {
     if (!options) return null;
-    return /*#__PURE__*/ React.createElement(RadioRoot, null, label && /*#__PURE__*/ React.createElement(RadioLabel, null, label), options.map((option, idx)=>/*#__PURE__*/ React.createElement(RadioOption, {
-            key: idx,
-            ...option,
-            ...props,
-            $ref: ref
-        })));
+    return /*#__PURE__*/ _jsxs(RadioRoot, {
+        children: [
+            label && /*#__PURE__*/ _jsx(RadioLabel, {
+                children: label
+            }),
+            options.map((option, idx)=>/*#__PURE__*/ _jsx(RadioOption, {
+                    ...option,
+                    ...props,
+                    $ref: ref
+                }, idx))
+        ]
+    });
 });

package/Forms/Switch/Switch.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { UseToggleProps } from "../Toggle/useToggle";
-export declare const SwitchTrack: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const SwitchHandle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const SwitchTrack: any;
+export declare const SwitchHandle: any;
 export type SwitchProps = UseToggleProps;
 /**
  * All logic and invisible Inputs come from the `useToggle` hook

package/Forms/Switch/Switch.js

@@ -20,6 +20,7 @@ _export(exports, {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const _styled = require("../../styles/styled");
@@ -64,5 +65,16 @@ const SwitchHandle = _styledcomponents.default.span`
 `;
 const Switch = /*#__PURE__*/ (0, _react.forwardRef)(function Switch(props, ref) {
     const { rootProps, Inputs, label } = (0, _useToggle.useToggle)(props, ref);
-    return /*#__PURE__*/ React.createElement(_Checkbox.CheckboxRoot, rootProps, Inputs, /*#__PURE__*/ React.createElement(SwitchTrack, null, /*#__PURE__*/ React.createElement(SwitchHandle, null)), label && /*#__PURE__*/ React.createElement(_Checkbox.CheckboxLabel, null, label));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Checkbox.CheckboxRoot, {
+        ...rootProps,
+        children: [
+            Inputs,
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(SwitchTrack, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(SwitchHandle, {})
+            }),
+            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.CheckboxLabel, {
+                children: label
+            })
+        ]
+    });
 });

package/Forms/Switch/Switch.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
 import { stateFocus } from "../../styles/styled";
@@ -44,5 +45,16 @@ export const SwitchHandle = styled.span`
  * All logic and invisible Inputs come from the `useToggle` hook
  */ export const Switch = /*#__PURE__*/ forwardRef(function Switch(props, ref) {
     const { rootProps, Inputs, label } = useToggle(props, ref);
-    return /*#__PURE__*/ React.createElement(CheckboxRoot, rootProps, Inputs, /*#__PURE__*/ React.createElement(SwitchTrack, null, /*#__PURE__*/ React.createElement(SwitchHandle, null)), label && /*#__PURE__*/ React.createElement(CheckboxLabel, null, label));
+    return /*#__PURE__*/ _jsxs(CheckboxRoot, {
+        ...rootProps,
+        children: [
+            Inputs,
+            /*#__PURE__*/ _jsx(SwitchTrack, {
+                children: /*#__PURE__*/ _jsx(SwitchHandle, {})
+            }),
+            label && /*#__PURE__*/ _jsx(CheckboxLabel, {
+                children: label
+            })
+        ]
+    });
 });

package/Forms/Textarea/Textarea.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { FormControl } from "../helpers";
-export declare const TextareaNative: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, {}, never>;
+export declare const TextareaNative: any;
 export type TextareaProps = FormControl<"textarea">;
 export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/Forms/Textarea/Textarea.js

@@ -17,6 +17,7 @@ _export(exports, {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const _Label = require("../Label/Label");
@@ -27,11 +28,18 @@ const TextareaNative = _styledcomponents.default.textarea`
   resize: vertical;
 `;
 const Textarea = /*#__PURE__*/ (0, _react.forwardRef)(function Textarea({ register, name, label, ...props }, ref) {
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, label && /*#__PURE__*/ React.createElement(_Label.Label, null, label), /*#__PURE__*/ React.createElement(TextareaNative, {
-        ...register ? register(name) : {
-            name,
-            ref
-        },
-        ...props
-    }));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(TextareaNative, {
+                ...register ? register(name) : {
+                    name,
+                    ref
+                },
+                ...props
+            })
+        ]
+    });
 });

package/Forms/Textarea/Textarea.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
 import { Label } from "../Label/Label";
@@ -8,11 +9,18 @@ export const TextareaNative = styled.textarea`
   resize: vertical;
 `;
 export const Textarea = /*#__PURE__*/ forwardRef(function Textarea({ register, name, label, ...props }, ref) {
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, label && /*#__PURE__*/ React.createElement(Label, null, label), /*#__PURE__*/ React.createElement(TextareaNative, {
-        ...register ? register(name) : {
-            name,
-            ref
-        },
-        ...props
-    }));
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            label && /*#__PURE__*/ _jsx(Label, {
+                children: label
+            }),
+            /*#__PURE__*/ _jsx(TextareaNative, {
+                ...register ? register(name) : {
+                    name,
+                    ref
+                },
+                ...props
+            })
+        ]
+    });
 });

package/Forms/Textarea/TextareaRich.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "TextareaRich", {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const _Editor = require("../../Editor");
@@ -35,16 +36,23 @@ const Root = _styledcomponents.default.div`
 `;
 const TextareaRich = /*#__PURE__*/ (0, _react.forwardRef)(function TextareaRich({ register, setValue, name, label, defaultValue = "", onChange, ...props }, ref) {
     if (register) register(name);
-    return /*#__PURE__*/ React.createElement(Root, null, label && /*#__PURE__*/ React.createElement(_Label.Label, null, label), /*#__PURE__*/ React.createElement(_Editor.Editor, {
-        options: {
-            // element: <TextareaAutosize />,
-            content: defaultValue,
-            onUpdate: (onChange || setValue) && name ? ({ editor })=>{
-                const value = editor.getHTML();
-                if (setValue) setValue(name, value);
-                (0, _helpers.triggerOnChange)(onChange, name, value);
-            } : undefined
-        },
-        ...props
-    }));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(Root, {
+        children: [
+            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Editor.Editor, {
+                options: {
+                    // element: <TextareaAutosize />,
+                    content: defaultValue,
+                    onUpdate: (onChange || setValue) && name ? ({ editor })=>{
+                        const value = editor.getHTML();
+                        if (setValue) setValue(name, value);
+                        (0, _helpers.triggerOnChange)(onChange, name, value);
+                    } : undefined
+                },
+                ...props
+            })
+        ]
+    });
 });

package/Forms/Textarea/TextareaRich.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
 import { Editor } from "../../Editor";
@@ -25,16 +26,23 @@ const Root = styled.div`
 `;
 export const TextareaRich = /*#__PURE__*/ forwardRef(function TextareaRich({ register, setValue, name, label, defaultValue = "", onChange, ...props }, ref) {
     if (register) register(name);
-    return /*#__PURE__*/ React.createElement(Root, null, label && /*#__PURE__*/ React.createElement(Label, null, label), /*#__PURE__*/ React.createElement(Editor, {
-        options: {
-            // element: <TextareaAutosize />,
-            content: defaultValue,
-            onUpdate: (onChange || setValue) && name ? ({ editor })=>{
-                const value = editor.getHTML();
-                if (setValue) setValue(name, value);
-                triggerOnChange(onChange, name, value);
-            } : undefined
-        },
-        ...props
-    }));
+    return /*#__PURE__*/ _jsxs(Root, {
+        children: [
+            label && /*#__PURE__*/ _jsx(Label, {
+                children: label
+            }),
+            /*#__PURE__*/ _jsx(Editor, {
+                options: {
+                    // element: <TextareaAutosize />,
+                    content: defaultValue,
+                    onUpdate: (onChange || setValue) && name ? ({ editor })=>{
+                        const value = editor.getHTML();
+                        if (setValue) setValue(name, value);
+                        triggerOnChange(onChange, name, value);
+                    } : undefined
+                },
+                ...props
+            })
+        ]
+    });
 });

package/Forms/Toggle/Toggle.d.ts

@@ -2,13 +2,13 @@ export declare const toggleBase = "\n  border: 1px solid var(--forms-border-colo
 export declare const toggleIndicatorBg = "\n  display: inline-block;\n  flex-shrink: 0;\n  width: 100%;\n  height: 100%;\n";
 export declare const toggleIndicatorBgShape: string;
 export declare const toggleIndicatorFg = "\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  fill: currentcolor;\n";
-export declare const Toggle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const ToggleLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const ToggleLabelSub: import("styled-components").StyledComponent<"small", import("styled-components").DefaultTheme, {}, never>;
-export declare const ToggleIndicatorHolder: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const ToggleIndicatorBgSquare: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
-export declare const ToggleIndicatorBgCircle: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
-export declare const ToggleIndicatorFg: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
+export declare const Toggle: any;
+export declare const ToggleLabel: any;
+export declare const ToggleLabelSub: any;
+export declare const ToggleIndicatorHolder: any;
+export declare const ToggleIndicatorBgSquare: any;
+export declare const ToggleIndicatorBgCircle: any;
+export declare const ToggleIndicatorFg: any;
 export type ToggleIndicatorProps = unknown;
 export type ToggleIndicatorSquaredProps = ToggleIndicatorProps;
 export declare const ToggleIndicatorSquared: (props: ToggleIndicatorSquaredProps) => import("react/jsx-runtime").JSX.Element;

package/Forms/Toggle/Toggle.js

@@ -55,6 +55,7 @@ _export(exports, {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const _styled = require("../../styles/styled");
@@ -121,36 +122,54 @@ const ToggleIndicatorFg = _styledcomponents.default.svg`
   }
 `;
 const ToggleIndicatorSquared = (props)=>{
-    return /*#__PURE__*/ React.createElement(ToggleIndicatorHolder, null, /*#__PURE__*/ React.createElement(ToggleIndicatorBgSquare, {
-        viewBox: "0 0 24 24"
-    }, /*#__PURE__*/ React.createElement("rect", {
-        width: "24",
-        height: "24"
-    })), /*#__PURE__*/ React.createElement(ToggleIndicatorFg, {
-        viewBox: "0 0 24 24"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-    })));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(ToggleIndicatorHolder, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ToggleIndicatorBgSquare, {
+                viewBox: "0 0 24 24",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("rect", {
+                    width: "24",
+                    height: "24"
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ToggleIndicatorFg, {
+                viewBox: "0 0 24 24",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+                    d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+                })
+            })
+        ]
+    });
 };
 const ToggleIndicatorRounded = ({ r = 6 })=>{
     const id = (0, _react.useId)();
-    return /*#__PURE__*/ React.createElement(ToggleIndicatorHolder, null, /*#__PURE__*/ React.createElement(ToggleIndicatorBgCircle, {
-        viewBox: "0 0 24 24"
-    }, /*#__PURE__*/ React.createElement("circle", {
-        cy: "12",
-        cx: "12",
-        r: "12",
-        id: `r_${id}`,
-        clipPath: `url(#c_${id})`
-    }), /*#__PURE__*/ React.createElement("clipPath", {
-        id: `c_${id}`
-    }, /*#__PURE__*/ React.createElement("use", {
-        xlinkHref: `#r_${id}`
-    }))), /*#__PURE__*/ React.createElement(ToggleIndicatorFg, {
-        viewBox: "0 0 24 24"
-    }, /*#__PURE__*/ React.createElement("circle", {
-        r: r,
-        cx: "12",
-        cy: "12"
-    })));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(ToggleIndicatorHolder, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(ToggleIndicatorBgCircle, {
+                viewBox: "0 0 24 24",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("circle", {
+                        cy: "12",
+                        cx: "12",
+                        r: "12",
+                        id: `r_${id}`,
+                        clipPath: `url(#c_${id})`
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("clipPath", {
+                        id: `c_${id}`,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("use", {
+                            xlinkHref: `#r_${id}`
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ToggleIndicatorFg, {
+                viewBox: "0 0 24 24",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("circle", {
+                    r: r,
+                    cx: "12",
+                    cy: "12"
+                })
+            })
+        ]
+    });
 };