@jirawatpyk/aura-react 4.5.0 → 4.5.1

package/dist/esm/feedback.js

@@ -5,30 +5,32 @@ import { createPortal } from "react-dom";
 import { cx, uid, useMounted, useIsoLayoutEffect, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
-const h = React.createElement;
-var ALERT_ICON = { info: "info", success: "circle-check", warning: "triangle-alert", danger: "circle-alert" };
+const ALERT_ICON = {
+  info: "info",
+  success: "circle-check",
+  warning: "triangle-alert",
+  danger: "circle-alert"
+};
 const Alert = React.forwardRef(function Alert2(props, ref) {
-  var t = useStrings();
-  var tone = props.tone || "info";
-  return h(
+  const t = useStrings();
+  const tone = props.tone || "info";
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ref,
       className: cx("aura-alert", "aura-alert--" + tone, props.className),
       role: tone === "danger" || tone === "warning" ? "alert" : "status"
     },
-    h(Icon, { name: ALERT_ICON[tone], className: "aura-alert__icon" }),
-    h(
-      "div",
-      { className: "aura-alert__body" },
-      props.title ? h("p", { className: "aura-alert__title" }, props.title) : null,
-      props.children ? h("div", { className: "aura-alert__text" }, props.children) : null,
-      props.action ? h("div", { className: "aura-alert__action" }, props.action) : null
-    ),
-    props.onDismiss ? h(IconButton, { icon: "x", label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null
+    /* @__PURE__ */ React.createElement(Icon, { name: ALERT_ICON[tone], className: "aura-alert__icon" }),
+    /* @__PURE__ */ React.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React.createElement("p", { className: "aura-alert__title" }, props.title) : null, props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__action" }, props.action) : null),
+    props.onDismiss ? /* @__PURE__ */ React.createElement(IconButton, { icon: "x", label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null
   );
 });
-var toastState = { list: [], subs: [], n: 0 };
+const toastState = {
+  list: [],
+  subs: [],
+  n: 0
+};
 function emitToasts() {
   toastState.subs.forEach(function(f) {
     f(toastState.list.slice());
@@ -36,7 +38,7 @@ function emitToasts() {
 }
 function toast(opts) {
   if (typeof opts === "string") opts = { title: opts };
-  var id = opts.id || "t" + ++toastState.n;
+  const id = opts.id || "t" + ++toastState.n;
   toastState.list = toastState.list.filter(function(t) {
     return t.id !== id;
   }).concat([Object.assign({ tone: "info" }, opts, { id })]).slice(-3);
@@ -50,8 +52,8 @@ toast.dismiss = function(id) {
   emitToasts();
 };
 function ToastItem(props) {
-  var str = useStrings();
-  var t = props.toast, timer = React.useRef(null), left = React.useRef(t.duration || 5e3), since = React.useRef(0);
+  const str = useStrings();
+  const t = props.toast, timer = React.useRef(null), left = React.useRef(t.duration || 5e3), since = React.useRef(0);
   function start() {
     if (left.current === Infinity) return;
     since.current = Date.now();
@@ -70,7 +72,7 @@ function ToastItem(props) {
     start();
     return pause;
   }, []);
-  return h(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cx("aura-toast", "aura-toast--" + t.tone),
@@ -80,30 +82,37 @@ function ToastItem(props) {
       onFocus: pause,
       onBlur: start
     },
-    h(Icon, { name: ALERT_ICON[t.tone] || "info", className: "aura-toast__icon" }),
-    h(
-      "div",
-      { className: "aura-toast__body" },
-      h("p", { className: "aura-toast__title" }, t.title),
-      t.description ? h("p", { className: "aura-toast__text" }, t.description) : null
-    ),
-    t.action ? h("button", {
-      type: "button",
-      className: "aura-toast__action",
-      onClick: function() {
-        t.action.onClick && t.action.onClick();
-        toast.dismiss(t.id);
+    /* @__PURE__ */ React.createElement(Icon, { name: ALERT_ICON[t.tone] || "info", className: "aura-toast__icon" }),
+    /* @__PURE__ */ React.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React.createElement("p", { className: "aura-toast__title" }, t.title), t.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-toast__text" }, t.description) : null),
+    t.action ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "aura-toast__action",
+        onClick: function() {
+          t.action.onClick && t.action.onClick();
+          toast.dismiss(t.id);
+        }
+      },
+      t.action.label
+    ) : null,
+    /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        icon: "x",
+        label: str.dismissToast,
+        className: "aura-toast__close",
+        onClick: function() {
+          toast.dismiss(t.id);
+        }
       }
-    }, t.action.label) : null,
-    h(IconButton, { icon: "x", label: str.dismissToast, className: "aura-toast__close", onClick: function() {
-      toast.dismiss(t.id);
-    } })
+    )
   );
 }
 function Toaster(props) {
-  var t = useStrings();
-  var mounted = useMounted();
-  var s = React.useState(toastState.list);
+  const t = useStrings();
+  const mounted = useMounted();
+  const s = React.useState(toastState.list);
   React.useEffect(function() {
     toastState.subs.push(s[1]);
     return function() {
@@ -113,48 +122,65 @@ function Toaster(props) {
     };
   }, []);
   if (!mounted) return null;
-  return createPortal(h(
-    "div",
-    { className: cx("aura-toaster", props && props.position === "top" && "is-top"), role: "region", "aria-live": "polite", "aria-label": t.notifications },
-    s[0].map(function(t2) {
-      return h(ToastItem, { key: t2.id, toast: t2 });
-    })
-  ), document.body);
+  return createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cx("aura-toaster", props && props.position === "top" && "is-top"),
+        role: "region",
+        "aria-live": "polite",
+        "aria-label": t.notifications
+      },
+      s[0].map(function(t2) {
+        return /* @__PURE__ */ React.createElement(ToastItem, { key: t2.id, toast: t2 });
+      })
+    ),
+    document.body
+  );
 }
 const Tooltip = React.forwardRef(function Tooltip2(props, ref) {
-  var id = uid(), st = React.useState(false), open = props.open !== void 0 ? props.open : st[0], set = st[1];
-  var anchor = React.useRef(null), anchorMerged = useMergedRef(ref, anchor), tip = React.useRef(null), timer = React.useRef(void 0);
-  var pos = React.useState(null);
+  const id = uid(), st = React.useState(false), open = props.open !== void 0 ? props.open : st[0], set = st[1];
+  const anchor = React.useRef(null), anchorMerged = useMergedRef(ref, anchor), tip = React.useRef(null), timer = React.useRef(void 0);
+  const pos = React.useState(null);
   function show(now) {
     clearTimeout(timer.current);
-    timer.current = setTimeout(function() {
-      set(true);
-    }, now ? 0 : props.delay == null ? 400 : props.delay);
+    timer.current = setTimeout(
+      function() {
+        set(true);
+      },
+      now ? 0 : props.delay == null ? 400 : props.delay
+    );
   }
   function hide() {
     clearTimeout(timer.current);
     set(false);
   }
-  useIsoLayoutEffect(function() {
-    if (!open || !anchor.current || !tip.current) return;
-    var r = anchor.current.getBoundingClientRect(), t = tip.current.getBoundingClientRect();
-    var side = props.side || "top", top = side === "top" ? r.top - t.height - 8 : r.bottom + 8;
-    if (side === "top" && top < 8) top = r.bottom + 8;
-    var left = Math.max(8, Math.min(r.left + r.width / 2 - t.width / 2, window.innerWidth - t.width - 8));
-    pos[1]({ top, left });
-  }, [open]);
-  React.useEffect(function() {
-    if (!open) return;
-    function esc(e) {
-      if (e.key === "Escape") hide();
-    }
-    document.addEventListener("keydown", esc);
-    return function() {
-      document.removeEventListener("keydown", esc);
-    };
-  }, [open]);
-  var child = React.Children.only(props.children);
-  var trigger = h(
+  useIsoLayoutEffect(
+    function() {
+      if (!open || !anchor.current || !tip.current) return;
+      const r = anchor.current.getBoundingClientRect(), t = tip.current.getBoundingClientRect();
+      let side = props.side || "top", top = side === "top" ? r.top - t.height - 8 : r.bottom + 8;
+      if (side === "top" && top < 8) top = r.bottom + 8;
+      const left = Math.max(8, Math.min(r.left + r.width / 2 - t.width / 2, window.innerWidth - t.width - 8));
+      pos[1]({ top, left });
+    },
+    [open]
+  );
+  React.useEffect(
+    function() {
+      if (!open) return;
+      function esc(e) {
+        if (e.key === "Escape") hide();
+      }
+      document.addEventListener("keydown", esc);
+      return function() {
+        document.removeEventListener("keydown", esc);
+      };
+    },
+    [open]
+  );
+  const child = React.Children.only(props.children);
+  const trigger = /* @__PURE__ */ React.createElement(
     "span",
     {
       ref: anchorMerged,
@@ -170,18 +196,20 @@ const Tooltip = React.forwardRef(function Tooltip2(props, ref) {
     },
     React.cloneElement(child, { "aria-describedby": open ? id : child.props["aria-describedby"] })
   );
-  return h(
-    React.Fragment,
-    null,
-    trigger,
-    open ? createPortal(h("div", {
-      ref: tip,
-      id,
-      role: "tooltip",
-      className: "aura-tooltip",
-      style: { top: pos[0] ? pos[0].top : -9999, left: pos[0] ? pos[0].left : -9999 }
-    }, props.content), document.body) : null
-  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, trigger, open ? createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: tip,
+        id,
+        role: "tooltip",
+        className: "aura-tooltip",
+        style: { top: pos[0] ? pos[0].top : -9999, left: pos[0] ? pos[0].left : -9999 }
+      },
+      props.content
+    ),
+    document.body
+  ) : null);
 });
 export {
   ALERT_ICON,

package/dist/esm/forms.js

@@ -5,36 +5,60 @@ import { cx, omit, useMaybeControlled, uid } from "./internal.js";
 import { Icon } from "./Icon.js";
 const h = React.createElement;
 const Field = React.forwardRef(function Field2(props, ref) {
-  var t = useStrings();
-  return h(
+  const t = useStrings();
+  return /* @__PURE__ */ React.createElement(
     "div",
-    { ref, className: cx("aura-field", props.error && "is-invalid", props.disabled && "is-disabled", props.className) },
+    {
+      ref,
+      className: cx("aura-field", props.error && "is-invalid", props.disabled && "is-disabled", props.className)
+    },
     props.label ? h(
       props.labelAs || "label",
       { className: "aura-field__label", htmlFor: props.labelAs ? void 0 : props.id, id: props.labelId },
       props.label,
-      props.required ? h("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null,
-      props.optional ? h("span", { className: "aura-field__opt" }, " (" + t.optional + ")") : null
+      props.required ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null,
+      props.optional ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__opt" }, " (" + t.optional + ")") : null
     ) : null,
     props.children,
-    props.error ? h("p", { className: "aura-field__error", id: props.id + "-error" }, h(Icon, { name: "circle-alert", size: 14 }), props.error) : props.hint ? h("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
+    props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: props.id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: "circle-alert", size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
   );
 });
 function describedBy(id, p) {
   return p.error ? id + "-error" : p.hint ? id + "-hint" : void 0;
 }
-var FIELD_KEYS = ["label", "hint", "error", "required", "optional", "icon", "className", "id", "suffix", "options", "placeholder"];
+const FIELD_KEYS = [
+  "label",
+  "hint",
+  "error",
+  "required",
+  "optional",
+  "icon",
+  "className",
+  "id",
+  "suffix",
+  "options",
+  "placeholder"
+];
 const TextField = React.forwardRef(function TextField2(props, ref) {
-  var auto = uid(), id = props.id || auto;
-  var rest = omit(props, FIELD_KEYS);
-  return h(
+  const auto = uid(), id = props.id || auto;
+  const rest = omit(props, FIELD_KEYS);
+  return /* @__PURE__ */ React.createElement(
     Field,
-    { id, label: props.label, hint: props.hint, error: props.error, required: props.required, optional: props.optional, disabled: props.disabled, className: props.className },
-    h(
-      "div",
-      { className: cx("aura-input", props.icon && "has-icon", props.suffix && "has-suffix") },
-      props.icon ? h(Icon, { name: props.icon, className: "aura-input__icon" }) : null,
-      h("input", Object.assign({ type: "text" }, rest, {
+    {
+      id,
+      label: props.label,
+      hint: props.hint,
+      error: props.error,
+      required: props.required,
+      optional: props.optional,
+      disabled: props.disabled,
+      className: props.className
+    },
+    /* @__PURE__ */ React.createElement("div", { className: cx("aura-input", props.icon && "has-icon", props.suffix && "has-suffix") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "text",
+        ...rest,
         ref,
         id,
         className: "aura-input__control",
@@ -42,61 +66,89 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
         required: props.required,
         "aria-invalid": props.error ? true : void 0,
         "aria-describedby": describedBy(id, props)
-      })),
-      props.suffix ? h("span", { className: "aura-input__suffix" }, props.suffix) : null
-    )
+      }
+    ), props.suffix ? /* @__PURE__ */ React.createElement("span", { className: "aura-input__suffix" }, props.suffix) : null)
   );
 });
 const Textarea = React.forwardRef(function Textarea2(props, ref) {
-  var auto = uid(), id = props.id || auto;
-  var rest = omit(props, FIELD_KEYS);
-  return h(
+  const auto = uid(), id = props.id || auto;
+  const rest = omit(props, FIELD_KEYS);
+  return /* @__PURE__ */ React.createElement(
     Field,
-    { id, label: props.label, hint: props.hint, error: props.error, required: props.required, optional: props.optional, disabled: props.disabled, className: props.className },
-    h("textarea", Object.assign({ rows: 4 }, rest, {
-      ref,
+    {
       id,
-      className: "aura-input aura-textarea",
-      placeholder: props.placeholder,
+      label: props.label,
+      hint: props.hint,
+      error: props.error,
       required: props.required,
-      "aria-invalid": props.error ? true : void 0,
-      "aria-describedby": describedBy(id, props)
-    }))
+      optional: props.optional,
+      disabled: props.disabled,
+      className: props.className
+    },
+    /* @__PURE__ */ React.createElement(
+      "textarea",
+      {
+        rows: 4,
+        ...rest,
+        ref,
+        id,
+        className: "aura-input aura-textarea",
+        placeholder: props.placeholder,
+        required: props.required,
+        "aria-invalid": props.error ? true : void 0,
+        "aria-describedby": describedBy(id, props)
+      }
+    )
   );
 });
 const Select = React.forwardRef(function Select2(props, ref) {
-  var auto = uid(), id = props.id || auto;
-  var rest = omit(props, FIELD_KEYS.concat(["children"]));
-  var opts = (props.options || []).map(function(o) {
-    var v = typeof o === "object" ? o : { value: o, label: o };
-    return h("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
+  const auto = uid(), id = props.id || auto;
+  const rest = omit(props, FIELD_KEYS.concat(["children"]));
+  const opts = (props.options || []).map(function(o) {
+    const v = typeof o === "object" ? o : { value: o, label: o };
+    return /* @__PURE__ */ React.createElement("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
   });
-  if (props.placeholder) opts.unshift(h("option", { key: "__ph", value: "", disabled: true }, props.placeholder));
-  var extra = props.value === void 0 && props.defaultValue === void 0 && props.placeholder ? { defaultValue: "" } : {};
-  return h(
+  if (props.placeholder)
+    opts.unshift(
+      /* @__PURE__ */ React.createElement("option", { key: "__ph", value: "", disabled: true }, props.placeholder)
+    );
+  const extra = props.value === void 0 && props.defaultValue === void 0 && props.placeholder ? { defaultValue: "" } : {};
+  return /* @__PURE__ */ React.createElement(
     Field,
-    { id, label: props.label, hint: props.hint, error: props.error, required: props.required, optional: props.optional, disabled: props.disabled, className: props.className },
-    h(
-      "div",
-      { className: cx("aura-input aura-select", props.icon && "has-icon") },
-      props.icon ? h(Icon, { name: props.icon, className: "aura-input__icon" }) : null,
-      h("select", Object.assign(extra, rest, {
+    {
+      id,
+      label: props.label,
+      hint: props.hint,
+      error: props.error,
+      required: props.required,
+      optional: props.optional,
+      disabled: props.disabled,
+      className: props.className
+    },
+    /* @__PURE__ */ React.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h(
+      "select",
+      Object.assign(extra, rest, {
         ref,
         id,
         className: "aura-input__control",
         required: props.required,
         "aria-invalid": props.error ? true : void 0,
         "aria-describedby": describedBy(id, props)
-      }), opts, props.children),
-      h(Icon, { name: "chevron-down", className: "aura-select__chevron" })
-    )
+      }),
+      opts,
+      props.children
+    ), /* @__PURE__ */ React.createElement(Icon, { name: "chevron-down", className: "aura-select__chevron" }))
   );
 });
 const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
-  var auto = uid(), id = props.id || auto;
-  var st = useMaybeControlled(props.value, props.defaultValue, props.onChange);
-  var name = props.name || id;
-  return h(
+  const auto = uid(), id = props.id || auto;
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue,
+    props.onChange
+  );
+  const name = props.name || id;
+  return /* @__PURE__ */ React.createElement(
     "fieldset",
     {
       ref,
@@ -105,71 +157,50 @@ const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
       "aria-invalid": props.error ? true : void 0,
       disabled: props.disabled
     },
-    props.label ? h("legend", { className: "aura-field__label" }, props.label, props.required ? h("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null) : null,
-    h(
-      "div",
-      { className: cx("aura-radio-group__list", props.orientation === "horizontal" && "is-horizontal") },
-      (props.options || []).map(function(o) {
-        var v = typeof o === "object" ? o : { value: o, label: o };
-        return h(
-          "label",
-          { key: v.value, className: cx("aura-choice", v.disabled && "is-disabled") },
-          h("input", {
-            type: "radio",
-            className: "aura-radio",
-            name,
-            value: v.value,
-            disabled: v.disabled,
-            checked: st[0] === v.value,
-            onChange: function() {
-              st[1](v.value);
-            }
-          }),
-          h(
-            "span",
-            { className: "aura-choice__text" },
-            h("span", { className: "aura-choice__label" }, v.label),
-            v.description ? h("span", { className: "aura-choice__desc" }, v.description) : null
-          )
-        );
-      })
-    ),
-    props.error ? h("p", { className: "aura-field__error", id: id + "-error" }, h(Icon, { name: "circle-alert", size: 14 }), props.error) : props.hint ? h("p", { className: "aura-field__hint", id: id + "-hint" }, props.hint) : null
+    props.label ? /* @__PURE__ */ React.createElement("legend", { className: "aura-field__label" }, props.label, props.required ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null) : null,
+    /* @__PURE__ */ React.createElement("div", { className: cx("aura-radio-group__list", props.orientation === "horizontal" && "is-horizontal") }, (props.options || []).map(function(o) {
+      const v = typeof o === "object" ? o : { value: o, label: o };
+      return /* @__PURE__ */ React.createElement("label", { key: v.value, className: cx("aura-choice", v.disabled && "is-disabled") }, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type: "radio",
+          className: "aura-radio",
+          name,
+          value: v.value,
+          disabled: v.disabled,
+          checked: st[0] === v.value,
+          onChange: function() {
+            st[1](v.value);
+          }
+        }
+      ), /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-choice__label" }, v.label), v.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc" }, v.description) : null));
+    })),
+    props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: "circle-alert", size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, props.hint) : null
   );
 });
 const Switch = React.forwardRef(function Switch2(props, ref) {
-  var auto = uid(), id = props.id || auto;
-  var st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
-  var on = !!st[0];
-  return h(
-    "div",
-    { className: cx("aura-switch-row", props.disabled && "is-disabled", props.className) },
-    h(
-      "button",
-      {
-        ref,
-        type: "button",
-        role: "switch",
-        id,
-        "aria-checked": on,
-        disabled: props.disabled,
-        "aria-labelledby": props.label ? id + "-label" : void 0,
-        "aria-label": props.label ? void 0 : props["aria-label"],
-        "aria-describedby": props.description ? id + "-desc" : void 0,
-        className: cx("aura-switch", on && "is-on"),
-        onClick: function() {
-          st[1](!on);
-        }
-      },
-      h("span", { className: "aura-switch__thumb" })
-    ),
-    props.label ? h(
-      "span",
-      { className: "aura-choice__text" },
-      h("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label),
-      props.description ? h("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null
-    ) : null
-  );
+  const auto = uid(), id = props.id || auto;
+  const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
+  const on = !!st[0];
+  return /* @__PURE__ */ React.createElement("div", { className: cx("aura-switch-row", props.disabled && "is-disabled", props.className) }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "switch",
+      id,
+      "aria-checked": on,
+      disabled: props.disabled,
+      "aria-labelledby": props.label ? id + "-label" : void 0,
+      "aria-label": props.label ? void 0 : props["aria-label"],
+      "aria-describedby": props.description ? id + "-desc" : void 0,
+      className: cx("aura-switch", on && "is-on"),
+      onClick: function() {
+        st[1](!on);
+      }
+    },
+    /* @__PURE__ */ React.createElement("span", { className: "aura-switch__thumb" })
+  ), props.label ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : null);
 });
 export {
   Field,