@koine/react 2.0.0-beta.1 → 2.0.0-beta.10

package/Forms/InputGroup/InputGroup.js

@@ -1,19 +1,85 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputGroup = exports.InputGroupButtonPost = exports.InputGroupButtonPre = exports.InputGroupMain = exports.InputGroupRoot = 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 Buttons_1 = require("../../Buttons");
-var Field_1 = require("../Field");
-var media_1 = require("../../styles/media");
-exports.InputGroupRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n  display: flex;\n  ", " {\n    flex-direction: column;\n  }\n"], ["\n  ", "\n  display: flex;\n  ", " {\n    flex-direction: column;\n  }\n"])), Field_1.field, media_1.max.sm);
-exports.InputGroupMain = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-exports.InputGroupButtonPre = (0, styled_components_1.default)(Buttons_1.KoineButton)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  ", " {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  ", " {\n    border-right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n"], ["\n  ", " {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  ", " {\n    border-right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n"])), media_1.max.sm, media_1.min.sm);
-exports.InputGroupButtonPost = (0, styled_components_1.default)(Buttons_1.KoineButton)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  ", " {\n    border-top: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  ", " {\n    border-left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n"], ["\n  ", " {\n    border-top: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  ", " {\n    border-left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n"])), media_1.max.sm, media_1.min.sm);
-var InputGroup = function (_a) {
-    var pre = _a.pre, post = _a.post, _b = _a.Button, Button = _b === void 0 ? Buttons_1.KoineButton : _b, _c = _a.btnProps, btnProps = _c === void 0 ? {} : _c, children = _a.children, props = tslib_1.__rest(_a, ["pre", "post", "Button", "btnProps", "children"]);
-    return ((0, jsx_runtime_1.jsxs)(exports.InputGroupRoot, tslib_1.__assign({}, props, { children: [pre && (0, jsx_runtime_1.jsx)(exports.InputGroupButtonPre, tslib_1.__assign({ as: Button }, btnProps)), (0, jsx_runtime_1.jsx)(exports.InputGroupMain, { children: children }), post && (0, jsx_runtime_1.jsx)(exports.InputGroupButtonPost, tslib_1.__assign({ as: Button }, btnProps))] })));
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    InputGroupRoot: function() {
+        return InputGroupRoot;
+    },
+    InputGroupMain: function() {
+        return InputGroupMain;
+    },
+    InputGroupButtonPre: function() {
+        return InputGroupButtonPre;
+    },
+    InputGroupButtonPost: function() {
+        return InputGroupButtonPost;
+    },
+    InputGroup: function() {
+        return InputGroup;
+    }
+});
+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");
+const _Field = require("../Field");
+const InputGroupRoot = _styledcomponents.default.div`
+  ${_Field.field}
+  display: flex;
+  ${_media.max.sm} {
+    flex-direction: column;
+  }
+`;
+const InputGroupMain = _styledcomponents.default.div`
+  flex: 1;
+`;
+const InputGroupButtonPre = (0, _styledcomponents.default)(_Buttons.KoineButton)`
+  ${_media.max.sm} {
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  ${_media.min.sm} {
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+`;
+const InputGroupButtonPost = (0, _styledcomponents.default)(_Buttons.KoineButton)`
+  ${_media.max.sm} {
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  ${_media.min.sm} {
+    border-left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+`;
+const InputGroup = ({ pre, post, Button = _Buttons.KoineButton, btnProps = {}, children, ...props })=>{
+    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
+            })
+        ]
+    });
 };
-exports.InputGroup = InputGroup;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Forms/InputGroup/InputGroup.mjs

@@ -1,15 +1,57 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { KoineButton } from "../../Buttons";
-import { field } from "../Field";
 import { max, min } from "../../styles/media";
-export var InputGroupRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  ", " {\n    flex-direction: column;\n  }\n"], ["\n  ", "\n  display: flex;\n  ", " {\n    flex-direction: column;\n  }\n"])), field, max.sm);
-export var InputGroupMain = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-export var InputGroupButtonPre = styled(KoineButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", " {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  ", " {\n    border-right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n"], ["\n  ", " {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  ", " {\n    border-right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n"])), max.sm, min.sm);
-export var InputGroupButtonPost = styled(KoineButton)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", " {\n    border-top: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  ", " {\n    border-left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n"], ["\n  ", " {\n    border-top: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  ", " {\n    border-left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n"])), max.sm, min.sm);
-export var InputGroup = function (_a) {
-    var pre = _a.pre, post = _a.post, _b = _a.Button, Button = _b === void 0 ? KoineButton : _b, _c = _a.btnProps, btnProps = _c === void 0 ? {} : _c, children = _a.children, props = __rest(_a, ["pre", "post", "Button", "btnProps", "children"]);
-    return (_jsxs(InputGroupRoot, __assign({}, props, { children: [pre && _jsx(InputGroupButtonPre, __assign({ as: Button }, btnProps)), _jsx(InputGroupMain, { children: children }), post && _jsx(InputGroupButtonPost, __assign({ as: Button }, btnProps))] })));
+import { field } from "../Field";
+export const InputGroupRoot = styled.div`
+  ${field}
+  display: flex;
+  ${max.sm} {
+    flex-direction: column;
+  }
+`;
+export const InputGroupMain = styled.div`
+  flex: 1;
+`;
+export const InputGroupButtonPre = styled(KoineButton)`
+  ${max.sm} {
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  ${min.sm} {
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+`;
+export const InputGroupButtonPost = styled(KoineButton)`
+  ${max.sm} {
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  ${min.sm} {
+    border-left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+`;
+export const InputGroup = ({ pre, post, Button = KoineButton, btnProps = {}, children, ...props })=>{
+    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
+            })
+        ]
+    });
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Forms/InputGroup/index.js

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

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/Label/Label.js

@@ -1,9 +1,46 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Label = exports.labelMaterial = exports.label = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.label = "\n  display: flex;\n  font-size: 13px;\n  cursor: pointer;\n";
-exports.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";
-exports.Label = styled_components_1.default.label(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.labelMaterial);
-var templateObject_1;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    label: function() {
+        return label;
+    },
+    labelMaterial: function() {
+        return labelMaterial;
+    },
+    Label: function() {
+        return Label;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const label = `
+  display: flex;
+  font-size: 13px;
+  cursor: pointer;
+`;
+const labelMaterial = `
+  z-index: 2;
+  position: relative;
+  display: inline-block;
+  padding: 0 5px;
+  font-weight: 100;
+  font-size: 10px;
+  background: var(--bodyBg);
+  transform: translateY(-0.3em) translateX(1em);
+  cursor: pointer;
+
+  + * {
+    margin-top: -1em;
+  }
+`;
+const Label = _styledcomponents.default.label`
+  ${labelMaterial}
+`;

package/Forms/Label/Label.mjs

@@ -1,6 +1,24 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export var label = "\n  display: flex;\n  font-size: 13px;\n  cursor: pointer;\n";
-export var 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 var Label = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), labelMaterial);
-var templateObject_1;
+export const label = `
+  display: flex;
+  font-size: 13px;
+  cursor: pointer;
+`;
+export const labelMaterial = `
+  z-index: 2;
+  position: relative;
+  display: inline-block;
+  padding: 0 5px;
+  font-weight: 100;
+  font-size: 10px;
+  background: var(--bodyBg);
+  transform: translateY(-0.3em) translateX(1em);
+  cursor: pointer;
+
+  + * {
+    margin-top: -1em;
+  }
+`;
+export const Label = styled.label`
+  ${labelMaterial}
+`;

package/Forms/Label/index.js

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

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

@@ -1,20 +1,72 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Password = exports.PasswordInputNative = 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 im_1 = require("react-icons/im");
-var Label_1 = require("../Label/Label");
-var Input_1 = require("../Input/Input");
-var ICON_WIDTH = "2em";
-var PasswordInputWrap = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-exports.PasswordInputNative = (0, styled_components_1.default)(Input_1.InputNative)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  padding-right: ", ";\n"], ["\n  position: relative;\n  padding-right: ", ";\n"])), ICON_WIDTH);
-var PasswordIcon = styled_components_1.default.span(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.5;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.5;\n"])), ICON_WIDTH);
-exports.Password = (0, react_1.forwardRef)(function Password(_a, ref) {
-    var register = _a.register, name = _a.name, label = _a.label, props = tslib_1.__rest(_a, ["register", "name", "label"]);
-    var _b = (0, react_1.useState)(false), visible = _b[0], setVisible = _b[1];
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsxs)(PasswordInputWrap, { children: [(0, jsx_runtime_1.jsx)(exports.PasswordInputNative, tslib_1.__assign({ type: visible ? "text" : "password", autoComplete: "new-password" }, (register ? register(name) : { name: name, ref: ref }), props)), (0, jsx_runtime_1.jsx)(PasswordIcon, { onClick: function () { return setVisible(function (prev) { return !prev; }); }, children: visible ? (0, jsx_runtime_1.jsx)(im_1.ImEyeBlocked, {}) : (0, jsx_runtime_1.jsx)(im_1.ImEye, {}) })] })] }));
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PasswordInputNative: function() {
+        return PasswordInputNative;
+    },
+    Password: function() {
+        return Password;
+    }
+});
+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"));
+const _Input = require("../Input/Input");
+const _Label = require("../Label/Label");
+const ICON_WIDTH = "2em";
+const PasswordInputWrap = _styledcomponents.default.div`
+  position: relative;
+`;
+const PasswordInputNative = (0, _styledcomponents.default)(_Input.InputNative)`
+  position: relative;
+  padding-right: ${ICON_WIDTH};
+`;
+const PasswordIcon = _styledcomponents.default.span`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: ${ICON_WIDTH};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0.5;
+`;
+const Password = /*#__PURE__*/ (0, _react.forwardRef)(function Password({ register, name, label, ...props }, ref) {
+    const [visible, setVisible] = (0, _react.useState)(false);
+    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, {})
+                    })
+                ]
+            })
+        ]
+    });
 });
-var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Password/Password.mjs

@@ -1,17 +1,53 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
 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";
-import { ImEye as IconVisible, ImEyeBlocked as IconInvisible, } from "react-icons/im";
-import { Label } from "../Label/Label";
 import { InputNative } from "../Input/Input";
-var ICON_WIDTH = "2em";
-var PasswordInputWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-export var PasswordInputNative = styled(InputNative)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  padding-right: ", ";\n"], ["\n  position: relative;\n  padding-right: ", ";\n"])), ICON_WIDTH);
-var PasswordIcon = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.5;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.5;\n"])), ICON_WIDTH);
-export var Password = forwardRef(function Password(_a, ref) {
-    var register = _a.register, name = _a.name, label = _a.label, props = __rest(_a, ["register", "name", "label"]);
-    var _b = useState(false), visible = _b[0], setVisible = _b[1];
-    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsxs(PasswordInputWrap, { children: [_jsx(PasswordInputNative, __assign({ type: visible ? "text" : "password", autoComplete: "new-password" }, (register ? register(name) : { name: name, ref: ref }), props)), _jsx(PasswordIcon, { onClick: function () { return setVisible(function (prev) { return !prev; }); }, children: visible ? _jsx(IconInvisible, {}) : _jsx(IconVisible, {}) })] })] }));
+import { Label } from "../Label/Label";
+const ICON_WIDTH = "2em";
+const PasswordInputWrap = styled.div`
+  position: relative;
+`;
+export const PasswordInputNative = styled(InputNative)`
+  position: relative;
+  padding-right: ${ICON_WIDTH};
+`;
+const PasswordIcon = styled.span`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: ${ICON_WIDTH};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0.5;
+`;
+export const Password = /*#__PURE__*/ forwardRef(function Password({ register, name, label, ...props }, ref) {
+    const [visible, setVisible] = useState(false);
+    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, {})
+                    })
+                ]
+            })
+        ]
+    });
 });
-var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Password/index.js

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

package/Forms/Radio/Radio.js

@@ -1,28 +1,68 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Radio = 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 Label_1 = require("../Label/Label");
-var Toggle_1 = require("../Toggle");
-var styles_1 = require("../styles");
-var RadioRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
-var RadioLabel = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), Label_1.label);
-var RadioOptionRoot = styled_components_1.default.label(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.05em;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.05em;\n  cursor: pointer;\n"])));
-var RadioToggle = (0, styled_components_1.default)(Toggle_1.Toggle)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject([""], [""])));
-var RadioIndicator = (0, styled_components_1.default)(Toggle_1.ToggleIndicatorSquared)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject([""], [""])));
-var RadioOptionLabel = (0, styled_components_1.default)(Toggle_1.ToggleLabel)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject([""], [""])));
-var RadioOption = (0, react_1.forwardRef)(function RadioOption(_a, ref) {
-    var register = _a.register, name = _a.name, label = _a.label, $ref = _a.$ref, props = tslib_1.__rest(_a, ["register", "name", "label", "$ref"]);
-    var inputProps = register ? register(name) : { name: name, ref: $ref || ref };
-    return ((0, jsx_runtime_1.jsxs)(RadioOptionRoot, { children: [(0, jsx_runtime_1.jsxs)(RadioToggle, { children: [(0, jsx_runtime_1.jsx)(styles_1.InputInvisible, tslib_1.__assign({ type: "radio" }, inputProps, props)), (0, jsx_runtime_1.jsx)(RadioIndicator, {})] }), (0, jsx_runtime_1.jsx)(RadioOptionLabel, { children: label })] }));
+Object.defineProperty(exports, "__esModule", {
+    value: true
 });
-exports.Radio = (0, react_1.forwardRef)(function Radio(_a, ref) {
-    var label = _a.label, options = _a.options, props = tslib_1.__rest(_a, ["label", "options"]);
-    if (!options)
-        return null;
-    return ((0, jsx_runtime_1.jsxs)(RadioRoot, { children: [label && (0, jsx_runtime_1.jsx)(RadioLabel, { children: label }), options.map(function (option, idx) { return ((0, jsx_runtime_1.jsx)(RadioOption, tslib_1.__assign({}, option, props, { "$ref": ref }), idx)); })] }));
+Object.defineProperty(exports, "Radio", {
+    enumerable: true,
+    get: function() {
+        return 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");
+const _Toggle = require("../Toggle");
+const _styles = require("../styles");
+const RadioRoot = _styledcomponents.default.div``;
+const RadioLabel = _styledcomponents.default.div`
+  ${_Label.label}
+`;
+const RadioOptionRoot = _styledcomponents.default.label`
+  display: flex;
+  align-items: center;
+  padding: 0.05em;
+  cursor: pointer;
+`;
+const RadioToggle = (0, _styledcomponents.default)(_Toggle.Toggle)``;
+const RadioIndicator = (0, _styledcomponents.default)(_Toggle.ToggleIndicatorSquared)``;
+const RadioOptionLabel = (0, _styledcomponents.default)(_Toggle.ToggleLabel)``;
+const RadioOption = /*#__PURE__*/ (0, _react.forwardRef)(function RadioOption({ register, name, label, $ref, ...props }, ref) {
+    const inputProps = register ? register(name) : {
+        name,
+        ref: $ref || ref
+    };
+    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__*/ (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))
+        ]
+    });
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Forms/Radio/Radio.mjs

@@ -1,25 +1,57 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
 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";
-import { Toggle, ToggleLabel, ToggleIndicatorSquared } from "../Toggle";
+import { Toggle, ToggleIndicatorSquared, ToggleLabel } from "../Toggle";
 import { InputInvisible } from "../styles";
-var RadioRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var RadioLabel = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), label);
-var RadioOptionRoot = styled.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.05em;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.05em;\n  cursor: pointer;\n"])));
-var RadioToggle = styled(Toggle)(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
-var RadioIndicator = styled(ToggleIndicatorSquared)(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
-var RadioOptionLabel = styled(ToggleLabel)(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
-var RadioOption = forwardRef(function RadioOption(_a, ref) {
-    var register = _a.register, name = _a.name, label = _a.label, $ref = _a.$ref, props = __rest(_a, ["register", "name", "label", "$ref"]);
-    var inputProps = register ? register(name) : { name: name, ref: $ref || ref };
-    return (_jsxs(RadioOptionRoot, { children: [_jsxs(RadioToggle, { children: [_jsx(InputInvisible, __assign({ type: "radio" }, inputProps, props)), _jsx(RadioIndicator, {})] }), _jsx(RadioOptionLabel, { children: label })] }));
+const RadioRoot = styled.div``;
+const RadioLabel = styled.div`
+  ${label}
+`;
+const RadioOptionRoot = styled.label`
+  display: flex;
+  align-items: center;
+  padding: 0.05em;
+  cursor: pointer;
+`;
+const RadioToggle = styled(Toggle)``;
+const RadioIndicator = styled(ToggleIndicatorSquared)``;
+const RadioOptionLabel = styled(ToggleLabel)``;
+const RadioOption = /*#__PURE__*/ forwardRef(function RadioOption({ register, name, label, $ref, ...props }, ref) {
+    const inputProps = register ? register(name) : {
+        name,
+        ref: $ref || ref
+    };
+    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 var Radio = forwardRef(function Radio(_a, ref) {
-    var label = _a.label, options = _a.options, props = __rest(_a, ["label", "options"]);
-    if (!options)
-        return null;
-    return (_jsxs(RadioRoot, { children: [label && _jsx(RadioLabel, { children: label }), options.map(function (option, idx) { return (_jsx(RadioOption, __assign({}, option, props, { "$ref": ref }), idx)); })] }));
+export const Radio = /*#__PURE__*/ forwardRef(function Radio({ label, options, ...props }, ref) {
+    if (!options) return null;
+    return /*#__PURE__*/ _jsxs(RadioRoot, {
+        children: [
+            label && /*#__PURE__*/ _jsx(RadioLabel, {
+                children: label
+            }),
+            options.map((option, idx)=>/*#__PURE__*/ _jsx(RadioOption, {
+                    ...option,
+                    ...props,
+                    $ref: ref
+                }, idx))
+        ]
+    });
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;