@rojaostudio/ds 1.0.0 → 1.0.2

package/dist/components/toggle-card.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 function ToggleCard({
   label,
   description,
@@ -8,67 +9,74 @@ function ToggleCard({
   name,
   children
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: [
         "rounded-(--radius-card) overflow-hidden transition-colors border",
         checked ? "[border-color:var(--section-card-border-active)]" : "[border-color:var(--section-card-border)]"
-      ].join(" ")
-    },
-    name && /* @__PURE__ */ React.createElement("input", { type: "hidden", name, value: checked ? "on" : "" }),
-    /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        role: "switch",
-        "aria-checked": checked,
-        onClick: () => onCheckedChange(!checked),
-        className: [
-          "w-full flex items-center justify-between gap-3 px-4 py-3 text-left transition-colors",
-          checked ? "[background:var(--section-card-header-bg-active)]" : "hover:[background:var(--section-card-header-bg-hover)]"
-        ].join(" ")
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5 min-w-0 flex-1" }, /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: [
-            "text-caption font-semibold uppercase tracking-wide",
-            checked ? "[color:var(--section-card-label-active)]" : "[color:var(--section-card-label)]"
-          ].join(" ")
-        },
-        label
-      ), description && /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: [
-            "text-caption leading-snug",
-            checked ? "[color:var(--section-card-badge-active)]" : "[color:var(--section-card-badge)]"
-          ].join(" ")
-        },
-        description
-      )),
-      /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          "aria-hidden": true,
-          className: [
-            "relative inline-flex shrink-0 h-5 w-9 rounded-full transition-colors",
-            checked ? "bg-(--surface-default)/30" : "bg-(--surface-raised) border border-stroke-default"
-          ].join(" ")
-        },
-        /* @__PURE__ */ React.createElement(
-          "span",
+      ].join(" "),
+      children: [
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: checked ? "on" : "" }),
+        /* @__PURE__ */ jsxs(
+          "button",
           {
+            type: "button",
+            role: "switch",
+            "aria-checked": checked,
+            onClick: () => onCheckedChange(!checked),
             className: [
-              "absolute top-0.5 inline-block h-4 w-4 rounded-full bg-(--surface-default) shadow-sm transition-transform",
-              checked ? "translate-x-[18px]" : "translate-x-0.5"
-            ].join(" ")
+              "w-full flex items-center justify-between gap-3 px-4 py-3 text-left transition-colors",
+              checked ? "[background:var(--section-card-header-bg-active)]" : "hover:[background:var(--section-card-header-bg-hover)]"
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: [
+                      "text-caption font-semibold uppercase tracking-wide",
+                      checked ? "[color:var(--section-card-label-active)]" : "[color:var(--section-card-label)]"
+                    ].join(" "),
+                    children: label
+                  }
+                ),
+                description && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: [
+                      "text-caption leading-snug",
+                      checked ? "[color:var(--section-card-badge-active)]" : "[color:var(--section-card-badge)]"
+                    ].join(" "),
+                    children: description
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: [
+                    "relative inline-flex shrink-0 h-5 w-9 rounded-full transition-colors",
+                    checked ? "bg-(--surface-default)/30" : "bg-(--surface-raised) border border-stroke-default"
+                  ].join(" "),
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: [
+                        "absolute top-0.5 inline-block h-4 w-4 rounded-full bg-(--surface-default) shadow-sm transition-transform",
+                        checked ? "translate-x-[18px]" : "translate-x-0.5"
+                      ].join(" ")
+                    }
+                  )
+                }
+              )
+            ]
           }
-        )
-      )
-    ),
-    checked && children && /* @__PURE__ */ React.createElement("div", { className: "px-4 pb-4 pt-4 space-y-4 [border-top:1px_solid_var(--section-card-divider)] [background:var(--surface-default)]" }, children)
+        ),
+        checked && children && /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 pt-4 space-y-4 [border-top:1px_solid_var(--section-card-divider)] [background:var(--surface-default)]", children })
+      ]
+    }
   );
 }
 export {

package/dist/components/toggle-group.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 const SIZE_CLASS = {
   sm: "h-control-sm text-caption px-2.5 gap-1",
@@ -34,7 +35,7 @@ function ToggleGroup(props) {
       }
     }
   }
-  const group = /* @__PURE__ */ React.createElement(
+  const group = /* @__PURE__ */ jsx(
     "div",
     {
       id: groupId,
@@ -44,36 +45,41 @@ function ToggleGroup(props) {
         stretch ? "flex w-full" : "inline-flex",
         "rounded-(--radius-control) border border-stroke-default bg-surface-default p-0.5 gap-0.5",
         label ? "" : className
-      ].join(" ")
-    },
-    options.map((opt) => {
-      const active = isActive(opt);
-      return /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          key: opt.value,
-          type: "button",
-          role: isMulti ? "switch" : "radio",
-          "aria-checked": active,
-          disabled: opt.disabled,
-          style: opt.style,
-          onClick: () => handleClick(opt),
-          className: [
-            "inline-flex items-center justify-center rounded-(--radius-control) font-medium transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:z-10",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            stretch ? "flex-1" : "",
-            SIZE_CLASS[size],
-            active ? selectedTone === "neutral" ? "bg-surface-invert text-fg-inverse" : "bg-brand-primary text-brand-on-primary" : "text-fg-secondary hover:text-fg-primary hover:bg-surface-raised"
-          ].join(" ")
-        },
-        opt.icon && /* @__PURE__ */ React.createElement("span", { className: "[&_svg]:size-4 shrink-0" }, opt.icon),
-        opt.label && /* @__PURE__ */ React.createElement("span", null, opt.label)
-      );
-    })
+      ].join(" "),
+      children: options.map((opt) => {
+        const active = isActive(opt);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: isMulti ? "switch" : "radio",
+            "aria-checked": active,
+            disabled: opt.disabled,
+            style: opt.style,
+            onClick: () => handleClick(opt),
+            className: [
+              "inline-flex items-center justify-center rounded-(--radius-control) font-medium transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:z-10",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              stretch ? "flex-1" : "",
+              SIZE_CLASS[size],
+              active ? selectedTone === "neutral" ? "bg-surface-invert text-fg-inverse" : "bg-brand-primary text-brand-on-primary" : "text-fg-secondary hover:text-fg-primary hover:bg-surface-raised"
+            ].join(" "),
+            children: [
+              opt.icon && /* @__PURE__ */ jsx("span", { className: "[&_svg]:size-4 shrink-0", children: opt.icon }),
+              opt.label && /* @__PURE__ */ jsx("span", { children: opt.label })
+            ]
+          },
+          opt.value
+        );
+      })
+    }
   );
   if (!label) return group;
-  return /* @__PURE__ */ React.createElement("div", { className: ["flex flex-col gap-1.5", className].join(" ") }, /* @__PURE__ */ React.createElement("label", { htmlFor: groupId, className: "text-label font-medium text-fg-primary" }, label), group);
+  return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col gap-1.5", className].join(" "), children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: groupId, className: "text-label font-medium text-fg-primary", children: label }),
+    group
+  ] });
 }
 export {
   ToggleGroup

package/dist/components/toggle.js

@@ -3,6 +3,7 @@ import {
   __objRest,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
 const SIZE = {
   sm: { track: "h-4 w-7", thumb: "size-3 peer-checked:translate-x-3.5", text: "text-caption" },
@@ -14,37 +15,44 @@ const Toggle = forwardRef(function Toggle2(_a, ref) {
   const generatedId = useId();
   const inputId = id != null ? id : generatedId;
   const sz = SIZE[size];
-  const labelEl = (label || description) && /* @__PURE__ */ React.createElement("span", { className: "flex flex-col gap-0.5 select-none" }, label && /* @__PURE__ */ React.createElement("span", { className: [sz.text, "text-fg-primary leading-snug"].join(" ") }, label), description && /* @__PURE__ */ React.createElement("span", { className: "text-caption text-fg-muted leading-snug" }, description));
-  const switchEl = /* @__PURE__ */ React.createElement("span", { className: ["relative inline-flex shrink-0 items-center", sz.track].join(" ") }, /* @__PURE__ */ React.createElement(
-    "input",
-    __spreadValues({
-      ref,
-      type: "checkbox",
-      role: "switch",
-      id: inputId,
-      className: "peer sr-only"
-    }, props)
-  ), /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: [
-        "absolute inset-0 rounded-full transition-colors",
-        "bg-surface-raised border border-stroke-control",
-        "peer-checked:bg-(--toggle-track-active) peer-checked:border-transparent",
-        "peer-focus-visible:ring-2 peer-focus-visible:ring-stroke-focus/30",
-        "peer-disabled:cursor-not-allowed"
-      ].join(" ")
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: [
-        "relative rounded-full bg-surface-default shadow-sm transition-transform translate-x-0.5",
-        sz.thumb
-      ].join(" ")
-    }
-  ));
-  return /* @__PURE__ */ React.createElement(
+  const labelEl = (label || description) && /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5 select-none", children: [
+    label && /* @__PURE__ */ jsx("span", { className: [sz.text, "text-fg-primary leading-snug"].join(" "), children: label }),
+    description && /* @__PURE__ */ jsx("span", { className: "text-caption text-fg-muted leading-snug", children: description })
+  ] });
+  const switchEl = /* @__PURE__ */ jsxs("span", { className: ["relative inline-flex shrink-0 items-center", sz.track].join(" "), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      __spreadValues({
+        ref,
+        type: "checkbox",
+        role: "switch",
+        id: inputId,
+        className: "peer sr-only"
+      }, props)
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: [
+          "absolute inset-0 rounded-full transition-colors",
+          "bg-surface-raised border border-stroke-control",
+          "peer-checked:bg-(--toggle-track-active) peer-checked:border-transparent",
+          "peer-focus-visible:ring-2 peer-focus-visible:ring-stroke-focus/30",
+          "peer-disabled:cursor-not-allowed"
+        ].join(" ")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: [
+          "relative rounded-full bg-surface-default shadow-sm transition-transform translate-x-0.5",
+          sz.thumb
+        ].join(" ")
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(
     "label",
     {
       htmlFor: inputId,
@@ -52,11 +60,13 @@ const Toggle = forwardRef(function Toggle2(_a, ref) {
         "inline-flex items-start gap-2.5 cursor-pointer",
         "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
         className
-      ].filter(Boolean).join(" ")
-    },
-    labelPosition === "left" && labelEl,
-    /* @__PURE__ */ React.createElement("span", { className: "flex items-center pt-0.5" }, switchEl),
-    labelPosition === "right" && labelEl
+      ].filter(Boolean).join(" "),
+      children: [
+        labelPosition === "left" && labelEl,
+        /* @__PURE__ */ jsx("span", { className: "flex items-center pt-0.5", children: switchEl }),
+        labelPosition === "right" && labelEl
+      ]
+    }
   );
 });
 export {

package/dist/components/tooltip.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useId } from "react";
 const GAP = 8;
 function getFixedPos(rect, side) {
@@ -49,7 +50,7 @@ function Tooltip({ content, children, side = "top", delay = 300, className, wrap
   useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "span",
     {
       ref,
@@ -58,30 +59,34 @@ function Tooltip({ content, children, side = "top", delay = 300, className, wrap
       onMouseLeave: hide,
       onFocus: show,
       onBlur: hide,
-      "aria-describedby": pos ? id : void 0
-    },
-    children,
-    pos && /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        id,
-        role: "tooltip",
-        style: { position: "fixed", top: pos.top, left: pos.left, transform: pos.transform },
-        className: `z-[9999] px-2.5 py-1.5 bg-[var(--tooltip-bg)] text-[var(--tooltip-text)] text-caption font-medium rounded-(--radius-tooltip) whitespace-nowrap pointer-events-none shadow-md${className ? ` ${className}` : ""}`
-      },
-      /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: [
-            "absolute border-[5px]",
-            ARROW_CLASSES[side]
-          ].join(" "),
-          style: { width: 0, height: 0 }
-        }
-      ),
-      content
-    )
+      "aria-describedby": pos ? id : void 0,
+      children: [
+        children,
+        pos && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            id,
+            role: "tooltip",
+            style: { position: "fixed", top: pos.top, left: pos.left, transform: pos.transform },
+            className: `z-[9999] px-2.5 py-1.5 bg-[var(--tooltip-bg)] text-[var(--tooltip-text)] text-caption font-medium rounded-(--radius-tooltip) whitespace-nowrap pointer-events-none shadow-md${className ? ` ${className}` : ""}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: [
+                    "absolute border-[5px]",
+                    ARROW_CLASSES[side]
+                  ].join(" "),
+                  style: { width: 0, height: 0 }
+                }
+              ),
+              content
+            ]
+          }
+        )
+      ]
+    }
   );
 }
 export {

package/dist/components/typing-indicator.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ChatBubble } from "./chat-bubble.js";
 function TypingIndicator({ ariaLabel = "Digitando" }) {
   const dotStyle = (delay) => ({
@@ -10,17 +11,19 @@ function TypingIndicator({ ariaLabel = "Digitando" }) {
     animation: "rojao-typing-pulse 1400ms infinite",
     animationDelay: delay
   });
-  return /* @__PURE__ */ React.createElement(ChatBubble, { variant: "bot", ariaLabel }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(ChatBubble, { variant: "bot", ariaLabel, children: /* @__PURE__ */ jsxs(
     "span",
     {
       className: "inline-flex items-center",
       style: { gap: "var(--typing-dot-gap)" },
-      "aria-live": "polite"
-    },
-    /* @__PURE__ */ React.createElement("span", { style: dotStyle("0ms") }),
-    /* @__PURE__ */ React.createElement("span", { style: dotStyle("200ms") }),
-    /* @__PURE__ */ React.createElement("span", { style: dotStyle("400ms") })
-  ));
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ jsx("span", { style: dotStyle("0ms") }),
+        /* @__PURE__ */ jsx("span", { style: dotStyle("200ms") }),
+        /* @__PURE__ */ jsx("span", { style: dotStyle("400ms") })
+      ]
+    }
+  ) });
 }
 export {
   TypingIndicator

package/dist/targets/native/components/accordion.js

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react-native";
 import {
   createContext,
@@ -33,16 +34,16 @@ function Accordion({ children, allowMultiple = false }) {
     },
     [allowMultiple]
   );
-  return /* @__PURE__ */ React.createElement(AccordionContext.Provider, { value: { notifyOpen, register, allowMultiple } }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { notifyOpen, register, allowMultiple }, children: /* @__PURE__ */ jsx(
     View,
     {
       style: [
         styles.group,
         { borderColor: t["--border-default"], backgroundColor: t["--surface-default"] }
-      ]
-    },
-    children
-  ));
+      ],
+      children
+    }
+  ) });
 }
 let nextId = 0;
 function AccordionItem({ title, children, defaultOpen = false, disabled = false }) {
@@ -72,26 +73,31 @@ function AccordionItem({ title, children, defaultOpen = false, disabled = false
     });
   }, [ctx]);
   const spin = rotate.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] });
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.item, { borderBottomColor: t["--border-default"] }] }, /* @__PURE__ */ React.createElement(
-    Pressable,
-    {
-      accessibilityRole: "button",
-      accessibilityState: { expanded: open, disabled },
-      accessibilityLabel: title,
-      disabled,
-      hitSlop: 4,
-      onPress: toggle,
-      style: ({ pressed }) => [
-        styles.header,
-        {
-          backgroundColor: pressed && !disabled ? t["--surface-raised"] : "transparent",
-          opacity: disabled ? 0.5 : 1
-        }
-      ]
-    },
-    /* @__PURE__ */ React.createElement(Text, { variant: "label", style: styles.title, numberOfLines: 1 }, title),
-    /* @__PURE__ */ React.createElement(Animated.View, { style: { transform: [{ rotate: spin }] } }, /* @__PURE__ */ React.createElement(ChevronDown, { size: 20, color: t["--text-muted"] }))
-  ), open ? /* @__PURE__ */ React.createElement(View, { style: styles.body }, typeof children === "string" ? /* @__PURE__ */ React.createElement(Text, { variant: "body-sm", color: "secondary" }, children) : children) : null);
+  return /* @__PURE__ */ jsxs(View, { style: [styles.item, { borderBottomColor: t["--border-default"] }], children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityState: { expanded: open, disabled },
+        accessibilityLabel: title,
+        disabled,
+        hitSlop: 4,
+        onPress: toggle,
+        style: ({ pressed }) => [
+          styles.header,
+          {
+            backgroundColor: pressed && !disabled ? t["--surface-raised"] : "transparent",
+            opacity: disabled ? 0.5 : 1
+          }
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Text, { variant: "label", style: styles.title, numberOfLines: 1, children: title }),
+          /* @__PURE__ */ jsx(Animated.View, { style: { transform: [{ rotate: spin }] }, children: /* @__PURE__ */ jsx(ChevronDown, { size: 20, color: t["--text-muted"] }) })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(View, { style: styles.body, children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, { variant: "body-sm", color: "secondary", children }) : children }) : null
+  ] });
 }
 const styles = StyleSheet.create({
   group: {

package/dist/targets/native/components/alert.js

@@ -1,4 +1,5 @@
 import "../../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckCircle, AlertCircle, AlertTriangle, Info, X } from "lucide-react-native";
 import { Pressable, StyleSheet, View } from "react-native";
 import { Text } from "./text.js";
@@ -17,25 +18,30 @@ function Alert({ variant = "info", title, children, onClose, hideIcon = false })
   const border = (_b = t[spec.border]) != null ? _b : t["--border-default"];
   const fg = (_c = t[spec.text]) != null ? _c : t["--text-primary"];
   const Icon = spec.icon;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     View,
     {
       accessibilityRole: variant === "danger" ? "alert" : "summary",
-      style: [styles.container, { backgroundColor: bg, borderColor: border }]
-    },
-    !hideIcon && /* @__PURE__ */ React.createElement(Icon, { size: 18, color: fg, style: styles.icon }),
-    /* @__PURE__ */ React.createElement(View, { style: styles.body }, title != null && /* @__PURE__ */ React.createElement(Text, { variant: "label", style: { color: fg } }, title), children != null && (typeof children === "string" ? /* @__PURE__ */ React.createElement(Text, { variant: "body-sm", style: [{ color: fg }, title != null && styles.childrenSpacing] }, children) : /* @__PURE__ */ React.createElement(View, { style: title != null ? styles.childrenSpacing : void 0 }, children))),
-    onClose != null && /* @__PURE__ */ React.createElement(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: "Fechar",
-        hitSlop: 12,
-        onPress: onClose,
-        style: ({ pressed }) => [styles.close, { opacity: pressed ? 0.6 : 1 }]
-      },
-      /* @__PURE__ */ React.createElement(X, { size: 16, color: fg })
-    )
+      style: [styles.container, { backgroundColor: bg, borderColor: border }],
+      children: [
+        !hideIcon && /* @__PURE__ */ jsx(Icon, { size: 18, color: fg, style: styles.icon }),
+        /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
+          title != null && /* @__PURE__ */ jsx(Text, { variant: "label", style: { color: fg }, children: title }),
+          children != null && (typeof children === "string" ? /* @__PURE__ */ jsx(Text, { variant: "body-sm", style: [{ color: fg }, title != null && styles.childrenSpacing], children }) : /* @__PURE__ */ jsx(View, { style: title != null ? styles.childrenSpacing : void 0, children }))
+        ] }),
+        onClose != null && /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: "Fechar",
+            hitSlop: 12,
+            onPress: onClose,
+            style: ({ pressed }) => [styles.close, { opacity: pressed ? 0.6 : 1 }],
+            children: /* @__PURE__ */ jsx(X, { size: 16, color: fg })
+          }
+        )
+      ]
+    }
   );
 }
 const styles = StyleSheet.create({