@koine/react 1.1.10 → 1.1.11

package/Forms/Field/Field.js

@@ -1,15 +1,18 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from "styled-components";
-import { Feedback } from "../Feedback";
-export var field = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-bottom: 20px;\n"], ["\n  padding-bottom: 20px;\n"])));
-export var FieldBase = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), field);
-export var FieldRoot = styled(FieldBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Field = exports.FieldRoot = exports.FieldBase = exports.field = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importStar(require("styled-components"));
+var Feedback_1 = require("../Feedback");
+exports.field = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  padding-bottom: 20px;\n"], ["\n  padding-bottom: 20px;\n"])));
+exports.FieldBase = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.field);
+exports.FieldRoot = (0, styled_components_1.default)(exports.FieldBase)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
     return (p.$danger &&
         "\n    color: var(--danger);\n    \n    textarea,\n    input,\n    select {\n      color: var(--danger);\n    }\n  ");
 });
-export var Field = function (_a) {
-    var name = _a.name, t = _a.t, error = _a.error, errors = _a.errors, children = _a.children, props = __rest(_a, ["name", "t", "error", "errors", "children"]);
+var Field = function (_a) {
+    var name = _a.name, t = _a.t, error = _a.error, errors = _a.errors, children = _a.children, props = tslib_1.__rest(_a, ["name", "t", "error", "errors", "children"]);
     var err = (errors && name ? errors[name] : error);
     var msg = "";
     if (err) {
@@ -26,6 +29,7 @@ export var Field = function (_a) {
     // useEffect(() => {
     //   i18n.addResourceBundle(locale, "core.Forms", null);
     // }, []);
-    return (_jsxs(FieldRoot, __assign({ "$danger": !!err }, props, { children: [children, msg && _jsx(Feedback, __assign({ "$danger": true }, { children: msg }))] })));
+    return ((0, jsx_runtime_1.jsxs)(exports.FieldRoot, tslib_1.__assign({ "$danger": !!err }, props, { children: [children, msg && (0, jsx_runtime_1.jsx)(Feedback_1.Feedback, tslib_1.__assign({ "$danger": true }, { children: msg }))] })));
 };
+exports.Field = Field;
 var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Field/Field.mjs

@@ -0,0 +1,31 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { Feedback } from "../Feedback";
+export var field = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-bottom: 20px;\n"], ["\n  padding-bottom: 20px;\n"])));
+export var FieldBase = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), field);
+export var FieldRoot = styled(FieldBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+    return (p.$danger &&
+        "\n    color: var(--danger);\n    \n    textarea,\n    input,\n    select {\n      color: var(--danger);\n    }\n  ");
+});
+export var Field = function (_a) {
+    var name = _a.name, t = _a.t, error = _a.error, errors = _a.errors, children = _a.children, props = __rest(_a, ["name", "t", "error", "errors", "children"]);
+    var err = (errors && name ? errors[name] : error);
+    var msg = "";
+    if (err) {
+        if (name && t && err.type !== "plain") {
+            msg = t("errors.".concat(name, ".").concat(err.type || err.message));
+        }
+        else {
+            msg = err.message;
+        }
+    }
+    // dynamic i18n namespace loading does not seem to work yet
+    // const t = useT("core.Forms");
+    // const { locale } = useRouter();
+    // useEffect(() => {
+    //   i18n.addResourceBundle(locale, "core.Forms", null);
+    // }, []);
+    return (_jsxs(FieldRoot, __assign({ "$danger": !!err }, props, { children: [children, msg && _jsx(Feedback, __assign({ "$danger": true }, { children: msg }))] })));
+};
+var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Field/FieldControl.js

@@ -1,11 +1,14 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useFormState } from "react-hook-form";
-import decode from "@koine/utils/decode";
-import { Field } from "./Field";
-import { FieldHint } from "./FieldHint";
-import { InputHoneypot } from "../styles";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldControl = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_hook_form_1 = require("react-hook-form");
+var decode_1 = tslib_1.__importDefault(require("@koine/utils/decode"));
+var Field_1 = require("./Field");
+var FieldHint_1 = require("./FieldHint");
+var styles_1 = require("../styles");
 /**
  *
  * - it expects the `field` object from our `useForm` wrapper around react-hook-form
@@ -16,12 +19,12 @@ import { InputHoneypot } from "../styles";
  * ```json
  * ```
  */
-export var FieldControl = function (_a) {
-    var control = _a.control, register = _a.register, setValue = _a.setValue, maybeEncodedName = _a.name, label = _a.label, placeholder = _a.placeholder, hint = _a.hint, t = _a.t, _b = _a.showError, showError = _b === void 0 ? true : _b, children = _a.children, encode = _a.encode, props = __rest(_a, ["control", "register", "setValue", "name", "label", "placeholder", "hint", "t", "showError", "children", "encode"]);
-    var name = encode ? decode(maybeEncodedName) : maybeEncodedName;
-    var errors = useFormState({ name: name, control: control }).errors;
+var FieldControl = function (_a) {
+    var control = _a.control, register = _a.register, setValue = _a.setValue, maybeEncodedName = _a.name, label = _a.label, placeholder = _a.placeholder, hint = _a.hint, t = _a.t, _b = _a.showError, showError = _b === void 0 ? true : _b, children = _a.children, encode = _a.encode, props = tslib_1.__rest(_a, ["control", "register", "setValue", "name", "label", "placeholder", "hint", "t", "showError", "children", "encode"]);
+    var name = encode ? (0, decode_1.default)(maybeEncodedName) : maybeEncodedName;
+    var errors = (0, react_hook_form_1.useFormState)({ name: name, control: control }).errors;
     var error = showError && errors[name] ? errors[name] : null;
-    var FormFieldContent = useMemo(function () {
+    var FormFieldContent = (0, react_1.useMemo)(function () {
         return children({
             control: control,
             register: register,
@@ -43,5 +46,6 @@ export var FieldControl = function (_a) {
         maybeEncodedName,
         placeholder,
     ]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Field, __assign({ name: maybeEncodedName, t: t, error: error }, props, { children: [FormFieldContent, hint && _jsx(FieldHint, { children: hint })] })), encode && register && _jsx(InputHoneypot, __assign({}, register(name)))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Field_1.Field, tslib_1.__assign({ name: maybeEncodedName, t: t, error: error }, props, { children: [FormFieldContent, hint && (0, jsx_runtime_1.jsx)(FieldHint_1.FieldHint, { children: hint })] })), encode && register && (0, jsx_runtime_1.jsx)(styles_1.InputHoneypot, tslib_1.__assign({}, register(name)))] }));
 };
+exports.FieldControl = FieldControl;

package/Forms/Field/FieldControl.mjs

@@ -0,0 +1,47 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useFormState } from "react-hook-form";
+import decode from "@koine/utils/decode";
+import { Field } from "./Field";
+import { FieldHint } from "./FieldHint";
+import { InputHoneypot } from "../styles";
+/**
+ *
+ * - it expects the `field` object from our `useForm` wrapper around react-hook-form
+ * - automatically get translated strings from the given `t` function` for the
+ * field `label`, `placeholder` and `errors`. The .json expected by the `t` function
+ * look like this:
+ *
+ * ```json
+ * ```
+ */
+export var FieldControl = function (_a) {
+    var control = _a.control, register = _a.register, setValue = _a.setValue, maybeEncodedName = _a.name, label = _a.label, placeholder = _a.placeholder, hint = _a.hint, t = _a.t, _b = _a.showError, showError = _b === void 0 ? true : _b, children = _a.children, encode = _a.encode, props = __rest(_a, ["control", "register", "setValue", "name", "label", "placeholder", "hint", "t", "showError", "children", "encode"]);
+    var name = encode ? decode(maybeEncodedName) : maybeEncodedName;
+    var errors = useFormState({ name: name, control: control }).errors;
+    var error = showError && errors[name] ? errors[name] : null;
+    var FormFieldContent = useMemo(function () {
+        return children({
+            control: control,
+            register: register,
+            setValue: setValue,
+            name: maybeEncodedName,
+            // @see https://github.com/vinissimus/next-translate/pull/461
+            // @see https://github.com/vinissimus/next-translate/issues/429
+            label: label || t("labels.".concat(name), undefined, { default: "" }),
+            placeholder: placeholder || t("placeholders.".concat(name), undefined, { fallback: "" }),
+        });
+    }, [
+        children,
+        control,
+        register,
+        setValue,
+        name,
+        label,
+        t,
+        maybeEncodedName,
+        placeholder,
+    ]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Field, __assign({ name: maybeEncodedName, t: t, error: error }, props, { children: [FormFieldContent, hint && _jsx(FieldHint, { children: hint })] })), encode && register && _jsx(InputHoneypot, __assign({}, register(name)))] }));
+};

package/Forms/Field/FieldHint.js

@@ -1,4 +1,7 @@
-import { __makeTemplateObject } from "tslib";
-import styled from "styled-components";
-export var FieldHint = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-top: 0.6em;\n  opacity: 0.7;\n  font-size: 75%;\n"], ["\n  padding-top: 0.6em;\n  opacity: 0.7;\n  font-size: 75%;\n"])));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldHint = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.FieldHint = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  padding-top: 0.6em;\n  opacity: 0.7;\n  font-size: 75%;\n"], ["\n  padding-top: 0.6em;\n  opacity: 0.7;\n  font-size: 75%;\n"])));
 var templateObject_1;

package/Forms/Field/FieldHint.mjs

@@ -0,0 +1,4 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+export var FieldHint = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-top: 0.6em;\n  opacity: 0.7;\n  font-size: 75%;\n"], ["\n  padding-top: 0.6em;\n  opacity: 0.7;\n  font-size: 75%;\n"])));
+var templateObject_1;

package/Forms/Field/index.js

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

package/Forms/Field/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Field";
+export * from "./FieldControl";

package/Forms/Field/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../../node/Forms/Field/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Forms/Input/Input.js

@@ -1,17 +1,20 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import styled from "styled-components";
-import { Label } from "../Label/Label";
-import { inputBase, inputFocus } from "../styles";
-export var InputWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
-export var InputMain = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-export var InputPre = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
-export var InputPost = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
-export var InputNative = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), inputBase, inputFocus);
-export var Input = forwardRef(function Input(_a, ref) {
-    var register = _a.register, name = _a.name, label = _a.label, props = __rest(_a, ["register", "name", "label"]);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = exports.InputNative = exports.InputPost = exports.InputPre = exports.InputMain = exports.InputWrap = 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 styles_1 = require("../styles");
+exports.InputWrap = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+exports.InputMain = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+exports.InputPre = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject([""], [""])));
+exports.InputPost = styled_components_1.default.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject([""], [""])));
+exports.InputNative = styled_components_1.default.input(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), styles_1.inputBase, styles_1.inputFocus);
+exports.Input = (0, react_1.forwardRef)(function Input(_a, ref) {
+    var register = _a.register, name = _a.name, label = _a.label, props = tslib_1.__rest(_a, ["register", "name", "label"]);
     // console.log("Input: render");
-    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsx(InputNative, __assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
+    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.jsx)(exports.InputNative, tslib_1.__assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Forms/Input/Input.mjs

@@ -0,0 +1,17 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { Label } from "../Label/Label";
+import { inputBase, inputFocus } from "../styles";
+export var InputWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+export var InputMain = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+export var InputPre = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var InputPost = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
+export var InputNative = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), inputBase, inputFocus);
+export var Input = forwardRef(function Input(_a, ref) {
+    var register = _a.register, name = _a.name, label = _a.label, props = __rest(_a, ["register", "name", "label"]);
+    // console.log("Input: render");
+    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsx(InputNative, __assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Forms/Input/index.js

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

package/Forms/Input/index.mjs

@@ -0,0 +1 @@
+export * from "./Input";

package/Forms/Input/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../../node/Forms/Input/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Forms/InputGroup/InputGroup.js

@@ -1,15 +1,19 @@
-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))] })));
+"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))] })));
 };
+exports.InputGroup = InputGroup;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Forms/InputGroup/InputGroup.mjs

@@ -0,0 +1,15 @@
+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))] })));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Forms/InputGroup/index.js

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

package/Forms/InputGroup/index.mjs

@@ -0,0 +1 @@
+export * from "./InputGroup";

package/Forms/InputGroup/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../../node/Forms/InputGroup/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Forms/Label/Label.js

@@ -1,6 +1,9 @@
-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);
+"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;

package/Forms/Label/Label.mjs

@@ -0,0 +1,6 @@
+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;

package/Forms/Label/index.js

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

package/Forms/Label/index.mjs

@@ -0,0 +1 @@
+export * from "./Label";

package/Forms/Label/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../../node/Forms/Label/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Forms/Password/Password.js

@@ -1,17 +1,20 @@
-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 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";
+"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.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, __assign({ onClick: function () { return setVisible(function (prev) { return !prev; }); } }, { children: visible ? _jsx(IconInvisible, {}) : _jsx(IconVisible, {}) }))] })] }));
+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, tslib_1.__assign({ 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, {}) }))] })] }));
 });
 var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Password/Password.mjs

@@ -0,0 +1,17 @@
+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 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, __assign({ onClick: function () { return setVisible(function (prev) { return !prev; }); } }, { children: visible ? _jsx(IconInvisible, {}) : _jsx(IconVisible, {}) }))] })] }));
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Password/index.js

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

package/Forms/Password/index.mjs

@@ -0,0 +1 @@
+export * from "./Password";

package/Forms/Password/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../../node/Forms/Password/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Forms/Radio/Radio.js

@@ -1,25 +1,28 @@
-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 { 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"]);
+"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 (_jsxs(RadioOptionRoot, { children: [_jsxs(RadioToggle, { children: [_jsx(InputInvisible, __assign({ type: "radio" }, inputProps, props)), _jsx(RadioIndicator, {})] }), _jsx(RadioOptionLabel, { children: label })] }));
+    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 })] }));
 });
-export var Radio = forwardRef(function Radio(_a, ref) {
-    var label = _a.label, options = _a.options, props = __rest(_a, ["label", "options"]);
+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 (_jsxs(RadioRoot, { children: [label && _jsx(RadioLabel, { children: label }), options.map(function (option, idx) { return (_jsx(RadioOption, __assign({}, option, props, { "$ref": ref }), idx)); })] }));
+    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)); })] }));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Forms/Radio/Radio.mjs

@@ -0,0 +1,25 @@
+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 { 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 })] }));
+});
+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)); })] }));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;