basefn 1.9.1 → 1.11.0

package/src/components/Basefn__Slider.res.mjs

@@ -1,9 +1,10 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote from "xote/src/Xote.res.mjs";
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Node$Xote from "xote/src/Node.res.mjs";
 import * as Core__Float from "@rescript/core/src/Core__Float.res.mjs";
+import * as Signal$Xote from "xote/src/Signal.res.mjs";
 import * as Core__Option from "@rescript/core/src/Core__Option.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
 
 import './Basefn__Slider.css'
 ;
@@ -26,7 +27,7 @@ function Basefn__Slider(props) {
   let handleInput = evt => {
     let target = evt.target;
     let newValue = Core__Option.getOr(Core__Float.fromString(target.value), 0.0);
-    Xote.Signal.set(value, newValue);
+    Signal$Xote.set(value, newValue);
     if (onChange !== undefined) {
       return onChange(newValue);
     }
@@ -36,30 +37,30 @@ function Basefn__Slider(props) {
   if (label !== undefined || showValue) {
     exit = 1;
   } else {
-    tmp = Xote__JSX.jsx(Xote__JSX.jsxFragment, {});
+    tmp = XoteJSX$Xote.jsx(XoteJSX$Xote.jsxFragment, {});
   }
   if (exit === 1) {
-    tmp = Xote__JSX.Elements.jsxs("div", {
+    tmp = XoteJSX$Xote.Elements.jsxs("div", {
       class: "basefn-slider__header",
-      children: Xote__JSX.array([
-        label !== undefined ? Xote__JSX.Elements.jsx("span", {
+      children: XoteJSX$Xote.array([
+        label !== undefined ? XoteJSX$Xote.Elements.jsx("span", {
             class: "basefn-slider__label",
-            children: Xote.Component.text(label)
-          }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
-        showValue ? Xote__JSX.Elements.jsx("span", {
+            children: Node$Xote.text(label)
+          }) : XoteJSX$Xote.jsx(XoteJSX$Xote.jsxFragment, {}),
+        showValue ? XoteJSX$Xote.Elements.jsx("span", {
             class: "basefn-slider__value",
-            children: Xote.Component.textSignal(() => Xote.Signal.get(value).toString())
-          }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+            children: Node$Xote.signalText(() => Signal$Xote.get(value).toString())
+          }) : XoteJSX$Xote.jsx(XoteJSX$Xote.jsxFragment, {})
       ])
     });
   }
-  return Xote__JSX.Elements.jsx("div", {
+  return XoteJSX$Xote.Elements.jsx("div", {
     class: "basefn-slider",
-    children: Xote__JSX.Elements.jsxs("div", {
+    children: XoteJSX$Xote.Elements.jsxs("div", {
       class: "basefn-slider__wrapper",
-      children: Xote__JSX.array([
+      children: XoteJSX$Xote.array([
         tmp,
-        Xote__JSX.Elements.jsx("input", {
+        XoteJSX$Xote.Elements.jsx("input", {
           class: "basefn-slider__input",
           type: "range",
           value: value,
@@ -69,13 +70,13 @@ function Basefn__Slider(props) {
           step: step.toString(),
           onInput: handleInput
         }),
-        markers !== undefined ? Xote__JSX.Elements.jsx("div", {
+        markers !== undefined ? XoteJSX$Xote.Elements.jsx("div", {
             class: "basefn-slider__markers",
-            children: Xote.Component.fragment(markers.map(marker => Xote__JSX.Elements.jsx("span", {
+            children: Node$Xote.fragment(markers.map(marker => XoteJSX$Xote.Elements.jsx("span", {
               class: "basefn-slider__marker",
-              children: Xote.Component.text(marker)
+              children: Node$Xote.text(marker)
             })))
-          }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+          }) : XoteJSX$Xote.jsx(XoteJSX$Xote.jsxFragment, {})
       ])
     })
   });

package/src/components/Basefn__Spinner.res

@@ -36,7 +36,7 @@ let make = (~size: size=Md, ~variant: variant=Default, ~label: string="") => {
   <div class="basefn-spinner-container">
     <div class={getClassName()} role="status" ariaLabel="Loading" />
     {if showLabel {
-      <span class="basefn-spinner__label"> {Component.text(label)} </span>
+      <span class="basefn-spinner__label"> {Node.text(label)} </span>
     } else {
       <empty />
     }}

package/src/components/Basefn__Spinner.res.mjs

@@ -1,7 +1,7 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote from "xote/src/Xote.res.mjs";
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Node$Xote from "xote/src/Node.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
 
 import './Basefn__Spinner.css'
 ;
@@ -43,18 +43,18 @@ function Basefn__Spinner(props) {
     return "basefn-spinner " + sizeClass + " " + variantClass;
   };
   let showLabel = label !== "";
-  return Xote__JSX.Elements.jsxs("div", {
+  return XoteJSX$Xote.Elements.jsxs("div", {
     class: "basefn-spinner-container",
-    children: Xote__JSX.array([
-      Xote__JSX.Elements.jsx("div", {
+    children: XoteJSX$Xote.array([
+      XoteJSX$Xote.Elements.jsx("div", {
         class: getClassName(),
         role: "status",
         "aria-label": "Loading"
       }),
-      showLabel ? Xote__JSX.Elements.jsx("span", {
+      showLabel ? XoteJSX$Xote.Elements.jsx("span", {
           class: "basefn-spinner__label",
-          children: Xote.Component.text(label)
-        }) : Xote__JSX.Elements.jsx("empty", {})
+          children: Node$Xote.text(label)
+        }) : XoteJSX$Xote.Elements.jsx("empty", {})
     ])
   });
 }

package/src/components/Basefn__Spotlight.res

@@ -65,10 +65,18 @@ let make = (
     | "ArrowDown" => {
         let _ = Basefn__Dom.preventDefault(evt)
         Signal.update(activeIndex, i => mod(i + 1, max(len, 1)))
+        let _ = %raw(`requestAnimationFrame(() => {
+          const el = document.querySelector(".basefn-spotlight__item--active");
+          if (el) el.scrollIntoView({ block: "nearest" });
+        })`)
       }
     | "ArrowUp" => {
         let _ = Basefn__Dom.preventDefault(evt)
         Signal.update(activeIndex, i => mod(i - 1 + max(len, 1), max(len, 1)))
+        let _ = %raw(`requestAnimationFrame(() => {
+          const el = document.querySelector(".basefn-spotlight__item--active");
+          if (el) el.scrollIntoView({ block: "nearest" });
+        })`)
       }
     | "Enter" =>
       if len > 0 {
@@ -120,10 +128,10 @@ let make = (
     let currentItems = Signal.get(filteredItems)
 
     if Array.length(currentItems) === 0 {
-      <div class="basefn-spotlight__empty"> {Component.text(emptyMessage)} </div>
+      <div class="basefn-spotlight__empty"> {Node.text(emptyMessage)} </div>
     } else {
       let lastGroup: ref<option<string>> = ref(None)
-      let elements: array<Component.node> = []
+      let elements: array<Node.node> = []
 
       currentItems->Array.forEachWithIndex((item, index) => {
         switch item.group {
@@ -131,7 +139,7 @@ let make = (
             lastGroup := Some(group)
             let _ = elements->Array.push(
               <div key={"group-" ++ group} class="basefn-spotlight__group-label">
-                {Component.text(group)}
+                {Node.text(group)}
               </div>,
             )
           }
@@ -145,10 +153,10 @@ let make = (
         let _ = elements->Array.push(
           <button key={item.id} class={itemClass} onClick={_ => handleSelect(item)}>
             <div class="basefn-spotlight__item-content">
-              <div class="basefn-spotlight__item-label"> {Component.text(item.label)} </div>
+              <div class="basefn-spotlight__item-label"> {Node.text(item.label)} </div>
               {switch item.description {
               | Some(desc) =>
-                <div class="basefn-spotlight__item-description"> {Component.text(desc)} </div>
+                <div class="basefn-spotlight__item-description"> {Node.text(desc)} </div>
               | None => <> </>
               }}
             </div>
@@ -156,7 +164,7 @@ let make = (
         )
       })
 
-      elements->Component.fragment
+      elements->Node.fragment
     }
   }
 
@@ -178,17 +186,17 @@ let make = (
             <div class="basefn-spotlight__results"> {renderResults()} </div>
             <div class="basefn-spotlight__footer">
               <span class="basefn-spotlight__footer-hint">
-                <span class="basefn-spotlight__footer-key"> {Component.text("\u2191")} </span>
-                <span class="basefn-spotlight__footer-key"> {Component.text("\u2193")} </span>
-                {Component.text("to navigate")}
+                <span class="basefn-spotlight__footer-key"> {Node.text("\u2191")} </span>
+                <span class="basefn-spotlight__footer-key"> {Node.text("\u2193")} </span>
+                {Node.text("to navigate")}
               </span>
               <span class="basefn-spotlight__footer-hint">
-                <span class="basefn-spotlight__footer-key"> {Component.text("\u21b5")} </span>
-                {Component.text("to select")}
+                <span class="basefn-spotlight__footer-key"> {Node.text("\u21b5")} </span>
+                {Node.text("to select")}
               </span>
               <span class="basefn-spotlight__footer-hint">
-                <span class="basefn-spotlight__footer-key"> {Component.text("esc")} </span>
-                {Component.text("to close")}
+                <span class="basefn-spotlight__footer-key"> {Node.text("esc")} </span>
+                {Node.text("to close")}
               </span>
             </div>
           </div>
@@ -199,5 +207,5 @@ let make = (
     }
   })
 
-  Component.signalFragment(content)
+  Node.signalFragment(content)
 }

package/src/components/Basefn__Spotlight.res.mjs

@@ -1,10 +1,14 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote from "xote/src/Xote.res.mjs";
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Node$Xote from "xote/src/Node.res.mjs";
 import * as Basefn__Dom from "../Basefn__Dom.res.mjs";
+import * as Effect$Xote from "xote/src/Effect.res.mjs";
+import * as Signal$Xote from "xote/src/Signal.res.mjs";
 import * as Basefn__Icon from "./Basefn__Icon.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
+import * as Computed$Xote from "xote/src/Computed.res.mjs";
 import * as Primitive_int from "@rescript/runtime/lib/es6/Primitive_int.js";
+import * as ReactiveProp$Xote from "xote/src/ReactiveProp.res.mjs";
 
 import './Basefn__Spotlight.css'
 ;
@@ -18,8 +22,8 @@ function Basefn__Spotlight(props) {
   let isOpen = props.isOpen;
   let placeholder = __placeholder !== undefined ? __placeholder : "Search...";
   let emptyMessage = __emptyMessage !== undefined ? __emptyMessage : "No results found.";
-  let query = Xote.Signal.make("", undefined, undefined);
-  let activeIndex = Xote.Signal.make(0, undefined, undefined);
+  let query = Signal$Xote.make("", undefined, undefined);
+  let activeIndex = Signal$Xote.make(0, undefined, undefined);
   let defaultFilter = (q, item) => {
     let q$1 = q.toLowerCase();
     if (item.label.toLowerCase().includes(q$1)) {
@@ -33,8 +37,8 @@ function Basefn__Spotlight(props) {
     }
   };
   let filterItem = filterFn !== undefined ? filterFn : defaultFilter;
-  let filteredItems = Xote.Computed.make(() => {
-    let q = Xote.Signal.get(query);
+  let filteredItems = Computed$Xote.make(() => {
+    let q = Signal$Xote.get(query);
     if (q === "") {
       return items;
     } else {
@@ -43,26 +47,36 @@ function Basefn__Spotlight(props) {
   }, undefined);
   let handleSelect = item => {
     item.onSelect();
-    Xote.Signal.set(query, "");
-    Xote.Signal.set(activeIndex, 0);
+    Signal$Xote.set(query, "");
+    Signal$Xote.set(activeIndex, 0);
     onClose();
   };
   let handleKeyDown = evt => {
     let k = evt.key;
-    let currentItems = Xote.Signal.get(filteredItems);
+    let currentItems = Signal$Xote.get(filteredItems);
     let len = currentItems.length;
     switch (k) {
       case "ArrowDown" :
         Basefn__Dom.preventDefault(evt);
-        return Xote.Signal.update(activeIndex, i => Primitive_int.mod_(i + 1 | 0, Primitive_int.max(len, 1)));
+        Signal$Xote.update(activeIndex, i => Primitive_int.mod_(i + 1 | 0, Primitive_int.max(len, 1)));
+        ((requestAnimationFrame(() => {
+          const el = document.querySelector(".basefn-spotlight__item--active");
+          if (el) el.scrollIntoView({ block: "nearest" });
+        })));
+        return;
       case "ArrowUp" :
         Basefn__Dom.preventDefault(evt);
-        return Xote.Signal.update(activeIndex, i => Primitive_int.mod_((i - 1 | 0) + Primitive_int.max(len, 1) | 0, Primitive_int.max(len, 1)));
+        Signal$Xote.update(activeIndex, i => Primitive_int.mod_((i - 1 | 0) + Primitive_int.max(len, 1) | 0, Primitive_int.max(len, 1)));
+        ((requestAnimationFrame(() => {
+          const el = document.querySelector(".basefn-spotlight__item--active");
+          if (el) el.scrollIntoView({ block: "nearest" });
+        })));
+        return;
       case "Enter" :
         if (len <= 0) {
           return;
         }
-        let idx = Xote.Signal.get(activeIndex);
+        let idx = Signal$Xote.get(activeIndex);
         let item = currentItems[idx];
         if (item !== undefined) {
           return handleSelect(item);
@@ -70,8 +84,8 @@ function Basefn__Spotlight(props) {
           return;
         }
       case "Escape" :
-        Xote.Signal.set(query, "");
-        Xote.Signal.set(activeIndex, 0);
+        Signal$Xote.set(query, "");
+        Signal$Xote.set(activeIndex, 0);
         return onClose();
       default:
         return;
@@ -79,20 +93,20 @@ function Basefn__Spotlight(props) {
   };
   let handleInput = evt => {
     let value = Basefn__Dom.target(evt).value;
-    Xote.Signal.set(query, value);
-    Xote.Signal.set(activeIndex, 0);
+    Signal$Xote.set(query, value);
+    Signal$Xote.set(activeIndex, 0);
   };
   let handleBackdropClick = evt => {
     let target = evt.target;
     let currentTarget = evt.currentTarget;
     if (target === currentTarget) {
-      Xote.Signal.set(query, "");
-      Xote.Signal.set(activeIndex, 0);
+      Signal$Xote.set(query, "");
+      Signal$Xote.set(activeIndex, 0);
       return onClose();
     }
   };
-  Xote.Effect.run(() => {
-    if (Xote.Signal.get(isOpen)) {
+  Effect$Xote.run(() => {
+    if (Signal$Xote.get(isOpen)) {
       ((requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           const el = document.querySelector(".basefn-spotlight__input");
@@ -102,11 +116,11 @@ function Basefn__Spotlight(props) {
     }
   }, undefined);
   let renderResults = () => {
-    let currentItems = Xote.Signal.get(filteredItems);
+    let currentItems = Signal$Xote.get(filteredItems);
     if (currentItems.length === 0) {
-      return Xote__JSX.Elements.jsx("div", {
+      return XoteJSX$Xote.Elements.jsx("div", {
         class: "basefn-spotlight__empty",
-        children: Xote.Component.text(emptyMessage)
+        children: Node$Xote.text(emptyMessage)
       });
     }
     let lastGroup = {
@@ -117,99 +131,99 @@ function Basefn__Spotlight(props) {
       let group = item.group;
       if (group !== undefined && group !== lastGroup.contents) {
         lastGroup.contents = group;
-        elements.push(Xote__JSX.Elements.jsxKeyed("div", {
+        elements.push(XoteJSX$Xote.Elements.jsxKeyed("div", {
           class: "basefn-spotlight__group-label",
-          children: Xote.Component.text(group)
+          children: Node$Xote.text(group)
         }, "group-" + group, undefined));
       }
       let itemClass = "basefn-spotlight__item" + (
-        index === Xote.Signal.get(activeIndex) ? " basefn-spotlight__item--active" : ""
+        index === Signal$Xote.get(activeIndex) ? " basefn-spotlight__item--active" : ""
       );
       let desc = item.description;
-      elements.push(Xote__JSX.Elements.jsxKeyed("button", {
+      elements.push(XoteJSX$Xote.Elements.jsxKeyed("button", {
         class: itemClass,
         onClick: param => handleSelect(item),
-        children: Xote__JSX.Elements.jsxs("div", {
+        children: XoteJSX$Xote.Elements.jsxs("div", {
           class: "basefn-spotlight__item-content",
-          children: Xote__JSX.array([
-            Xote__JSX.Elements.jsx("div", {
+          children: XoteJSX$Xote.array([
+            XoteJSX$Xote.Elements.jsx("div", {
               class: "basefn-spotlight__item-label",
-              children: Xote.Component.text(item.label)
+              children: Node$Xote.text(item.label)
             }),
-            desc !== undefined ? Xote__JSX.Elements.jsx("div", {
+            desc !== undefined ? XoteJSX$Xote.Elements.jsx("div", {
                 class: "basefn-spotlight__item-description",
-                children: Xote.Component.text(desc)
-              }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+                children: Node$Xote.text(desc)
+              }) : XoteJSX$Xote.jsx(XoteJSX$Xote.jsxFragment, {})
           ])
         })
       }, item.id, undefined));
     });
-    return Xote.Component.fragment(elements);
+    return Node$Xote.fragment(elements);
   };
-  return Xote.Component.signalFragment(Xote.Computed.make(() => {
-    if (Xote.Signal.get(isOpen)) {
-      return [Xote__JSX.Elements.jsx("div", {
+  return Node$Xote.signalFragment(Computed$Xote.make(() => {
+    if (Signal$Xote.get(isOpen)) {
+      return [XoteJSX$Xote.Elements.jsx("div", {
           class: "basefn-spotlight-backdrop",
           onClick: handleBackdropClick,
-          children: Xote__JSX.Elements.jsxs("div", {
+          children: XoteJSX$Xote.Elements.jsxs("div", {
             class: "basefn-spotlight",
             onKeyDown: handleKeyDown,
-            children: Xote__JSX.array([
-              Xote__JSX.Elements.jsxs("div", {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.Elements.jsxs("div", {
                 class: "basefn-spotlight__input-wrapper",
-                children: Xote__JSX.array([
-                  Xote__JSX.jsx(Basefn__Icon.make, {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.jsx(Basefn__Icon.make, {
                     name: "Search",
                     size: "Sm"
                   }),
-                  Xote__JSX.Elements.jsx("input", {
+                  XoteJSX$Xote.Elements.jsx("input", {
                     class: "basefn-spotlight__input",
                     type: "text",
-                    value: Xote.ReactiveProp.reactive(query),
+                    value: ReactiveProp$Xote.reactive(query),
                     placeholder: placeholder,
                     onInput: handleInput
                   })
                 ])
               }),
-              Xote__JSX.Elements.jsx("div", {
+              XoteJSX$Xote.Elements.jsx("div", {
                 class: "basefn-spotlight__results",
                 children: renderResults()
               }),
-              Xote__JSX.Elements.jsxs("div", {
+              XoteJSX$Xote.Elements.jsxs("div", {
                 class: "basefn-spotlight__footer",
-                children: Xote__JSX.array([
-                  Xote__JSX.Elements.jsxs("span", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.Elements.jsxs("span", {
                     class: "basefn-spotlight__footer-hint",
-                    children: Xote__JSX.array([
-                      Xote__JSX.Elements.jsx("span", {
+                    children: XoteJSX$Xote.array([
+                      XoteJSX$Xote.Elements.jsx("span", {
                         class: "basefn-spotlight__footer-key",
-                        children: Xote.Component.text("\u2191")
+                        children: Node$Xote.text("\u2191")
                       }),
-                      Xote__JSX.Elements.jsx("span", {
+                      XoteJSX$Xote.Elements.jsx("span", {
                         class: "basefn-spotlight__footer-key",
-                        children: Xote.Component.text("\u2193")
+                        children: Node$Xote.text("\u2193")
                       }),
-                      Xote.Component.text("to navigate")
+                      Node$Xote.text("to navigate")
                     ])
                   }),
-                  Xote__JSX.Elements.jsxs("span", {
+                  XoteJSX$Xote.Elements.jsxs("span", {
                     class: "basefn-spotlight__footer-hint",
-                    children: Xote__JSX.array([
-                      Xote__JSX.Elements.jsx("span", {
+                    children: XoteJSX$Xote.array([
+                      XoteJSX$Xote.Elements.jsx("span", {
                         class: "basefn-spotlight__footer-key",
-                        children: Xote.Component.text("\u21b5")
+                        children: Node$Xote.text("\u21b5")
                       }),
-                      Xote.Component.text("to select")
+                      Node$Xote.text("to select")
                     ])
                   }),
-                  Xote__JSX.Elements.jsxs("span", {
+                  XoteJSX$Xote.Elements.jsxs("span", {
                     class: "basefn-spotlight__footer-hint",
-                    children: Xote__JSX.array([
-                      Xote__JSX.Elements.jsx("span", {
+                    children: XoteJSX$Xote.array([
+                      XoteJSX$Xote.Elements.jsx("span", {
                         class: "basefn-spotlight__footer-key",
-                        children: Xote.Component.text("esc")
+                        children: Node$Xote.text("esc")
                       }),
-                      Xote.Component.text("to close")
+                      Node$Xote.text("to close")
                     ])
                   })
                 ])

package/src/components/Basefn__Stepper.res

@@ -64,16 +64,16 @@ let make = (
         <div class="basefn-stepper__step-header" onClick={_ => handleStepClick(index, step.status)}>
           <div class="basefn-stepper__step-indicator">
             {switch step.status {
-            | Completed => Component.text("\u2713")
-            | Error => Component.text("\u00d7")
-            | _ => Component.text(Int.toString(index + 1))
+            | Completed => Node.text("\u2713")
+            | Error => Node.text("\u00d7")
+            | _ => Node.text(Int.toString(index + 1))
             }}
           </div>
           <div class="basefn-stepper__step-content">
-            <div class="basefn-stepper__step-title"> {Component.text(step.title)} </div>
+            <div class="basefn-stepper__step-title"> {Node.text(step.title)} </div>
             {switch step.description {
             | Some(desc) =>
-              <div class="basefn-stepper__step-description"> {Component.text(desc)} </div>
+              <div class="basefn-stepper__step-description"> {Node.text(desc)} </div>
             | None => <> </>
             }}
           </div>
@@ -81,6 +81,6 @@ let make = (
         <div class="basefn-stepper__connector" />
       </div>
     })
-    ->Component.fragment}
+    ->Node.fragment}
   </div>
 }

package/src/components/Basefn__Stepper.res.mjs

@@ -1,8 +1,8 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote from "xote/src/Xote.res.mjs";
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Node$Xote from "xote/src/Node.res.mjs";
 import * as Core__Option from "@rescript/core/src/Core__Option.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
 
 import './Basefn__Stepper.css'
 ;
@@ -34,33 +34,29 @@ function Basefn__Stepper(props) {
     let clickableClass = clickable ? " basefn-stepper__step--clickable" : "";
     return "basefn-stepper__step " + statusClass + clickableClass;
   };
-  return Xote__JSX.Elements.jsx("div", {
+  return XoteJSX$Xote.Elements.jsx("div", {
     class: getStepperClass(),
-    children: Xote.Component.fragment(props.steps.map((step, index) => {
+    children: Node$Xote.fragment(props.steps.map((step, index) => {
       let isClickable = Core__Option.isSome(onStepClick) && (step.status === "Completed" || step.status === "Active");
       let match = step.status;
       let tmp;
-      let exit = 0;
       switch (match) {
         case "Inactive" :
         case "Active" :
-          exit = 1;
+          tmp = Node$Xote.text((index + 1 | 0).toString());
           break;
         case "Completed" :
-          tmp = Xote.Component.text("\u2713");
+          tmp = Node$Xote.text("\u2713");
           break;
         case "Error" :
-          tmp = Xote.Component.text("\u00d7");
+          tmp = Node$Xote.text("\u00d7");
           break;
       }
-      if (exit === 1) {
-        tmp = Xote.Component.text((index + 1 | 0).toString());
-      }
       let desc = step.description;
-      return Xote__JSX.Elements.jsxsKeyed("div", {
+      return XoteJSX$Xote.Elements.jsxsKeyed("div", {
         class: getStepClass(step.status, isClickable),
-        children: Xote__JSX.array([
-          Xote__JSX.Elements.jsxs("div", {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.Elements.jsxs("div", {
             class: "basefn-stepper__step-header",
             onClick: param => {
               let status = step.status;
@@ -76,27 +72,27 @@ function Basefn__Stepper(props) {
                   return;
               }
             },
-            children: Xote__JSX.array([
-              Xote__JSX.Elements.jsx("div", {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.Elements.jsx("div", {
                 class: "basefn-stepper__step-indicator",
                 children: tmp
               }),
-              Xote__JSX.Elements.jsxs("div", {
+              XoteJSX$Xote.Elements.jsxs("div", {
                 class: "basefn-stepper__step-content",
-                children: Xote__JSX.array([
-                  Xote__JSX.Elements.jsx("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.Elements.jsx("div", {
                     class: "basefn-stepper__step-title",
-                    children: Xote.Component.text(step.title)
+                    children: Node$Xote.text(step.title)
                   }),
-                  desc !== undefined ? Xote__JSX.Elements.jsx("div", {
+                  desc !== undefined ? XoteJSX$Xote.Elements.jsx("div", {
                       class: "basefn-stepper__step-description",
-                      children: Xote.Component.text(desc)
-                    }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+                      children: Node$Xote.text(desc)
+                    }) : XoteJSX$Xote.jsx(XoteJSX$Xote.jsxFragment, {})
                 ])
               })
             ])
           }),
-          Xote__JSX.Elements.jsx("div", {
+          XoteJSX$Xote.Elements.jsx("div", {
             class: "basefn-stepper__connector"
           })
         ])

package/src/components/Basefn__Switch.res

@@ -55,7 +55,7 @@ let make = (
       <div class="basefn-switch__slider" />
     </div>
     {switch label {
-    | Some(labelText) => <span class="basefn-switch-label"> {Component.text(labelText)} </span>
+    | Some(labelText) => <span class="basefn-switch-label"> {Node.text(labelText)} </span>
     | None => <> </>
     }}
   </label>