@microbit/ui 0.1.0-alpha.16 → 0.1.0-alpha.18

package/src/Field.recipe.ts

@@ -0,0 +1,113 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * Field slot recipe — Chakra's FormControl parts (FormLabel/FormHelperText/
+ * FormErrorMessage, light mode), mapped onto react-aria-components'
+ * Label/Text/FieldError by `FieldLabel` and `FieldSupport`. Every labelled
+ * field in the library draws its chrome from here, including Select and
+ * ComboBox, whose own recipe styles only the dropdown pair; the input itself is
+ * styled by the `input` recipe (Input.recipe.ts).
+ *
+ * `root` is also the single owner of field-root *layout*: Select, ComboBox and
+ * NumberField wear it alongside their own recipe's root slot, which carries no
+ * layout of its own — two recipes fighting over `flexDirection` would leave
+ * `labelPosition` at the mercy of emission order. RadioGroup and CheckboxGroup
+ * deliberately don't wear it (their roots carry no layout at all).
+ *
+ * Registered in the base preset (base-preset.ts), which also has the
+ * `staticCss` entry that keeps the runtime-prop size variants generated.
+ */
+export const field = defineSlotRecipe({
+  className: "field",
+  slots: ["root", "label", "requiredIndicator", "helperText", "errorMessage"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+      width: "100%",
+    },
+    label: {
+      display: "block",
+      fontSize: "md",
+      // Deliberately not Chakra FormLabel's `medium`: no font in the family's
+      // stack has a 500 face, so the two were pixel-identical on macOS and
+      // Windows, and the only call sites that cared overrode to `normal`
+      // (settings rows). See the playbook's expected behavioural deltas.
+      fontWeight: "normal",
+      marginEnd: "3",
+      mb: "2",
+      transitionProperty: "opacity",
+      transitionDuration: "normal",
+      // RAC stamps `data-disabled` on the field root and on the control, never
+      // on the label, so an `&[data-disabled]` rule here matches nothing — it
+      // has to come down from the root (gotcha #45). Direct child rather than a
+      // descendant selector, as the select recipe's invalid rule: an app's own
+      // disabled form wrapper must not be able to dim every label inside it.
+      "[data-disabled] > &": { opacity: 0.4 },
+    },
+    requiredIndicator: {
+      marginStart: "1",
+      color: "danger.500",
+    },
+    helperText: {
+      // RAC's Text renders a span, and RadioGroup/CheckboxGroup roots are not
+      // flex containers to blockify it, where an inline box would drop the
+      // margin below (gotcha #44).
+      display: "block",
+      mt: "2",
+      fontSize: "sm",
+      lineHeight: "normal",
+      color: "gray.600",
+    },
+    errorMessage: {
+      display: "flex",
+      alignItems: "center",
+      mt: "2",
+      fontSize: "sm",
+      lineHeight: "normal",
+      color: "danger.500",
+    },
+  },
+  variants: {
+    // The label follows its control's size (the control itself is sized by
+    // the `input`/`select` recipes), so one `size` prop scales the whole row.
+    // Chakra's FormLabel never scaled — a deliberate delta; see the playbook's
+    // field-chrome notes. Helper and error text stay `sm` at every size, as
+    // Chakra's did.
+    size: {
+      lg: { label: { fontSize: "lg" } },
+      md: { label: { fontSize: "md" } },
+      sm: { label: { fontSize: "sm" } },
+    },
+    // `side` puts the label beside its control — the settings-row pattern,
+    // where the label is a preference name and absorbs the free space. The
+    // control keeps its own width; give it one at the call site. Named after
+    // React Spectrum's `labelPosition`, not `orientation`, which RAC's
+    // RadioGroup already uses for the radios' own layout.
+    labelPosition: {
+      top: {},
+      side: {
+        root: {
+          flexDirection: "row",
+          alignItems: "center",
+          // Helper and error text are full-width items, so they wrap to
+          // their own line below the label/control pair.
+          flexWrap: "wrap",
+        },
+        label: { mb: "0", flex: "1 1 auto" },
+        helperText: { width: "100%" },
+        errorMessage: { width: "100%" },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    labelPosition: "top",
+  },
+});

package/src/Field.tsx

@@ -0,0 +1,189 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { HTMLAttributes, ReactNode } from "react";
+import {
+  FieldError,
+  Label as RACLabel,
+  LabelProps as RACLabelProps,
+  Text as RACText,
+} from "react-aria-components";
+import { css, cx } from "styled-system/css";
+import { field, FieldVariantProps } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+
+/**
+ * The label/helper/error chrome every labelled form field shares — Chakra's
+ * FormControl parts, generalised out of TextField so Select, ComboBox,
+ * NumberField, RadioGroup and CheckboxGroup carry the same props
+ * (data-microbit-org's forms attach helper and error text to all of these).
+ */
+export interface FieldSupportProps {
+  /** Help text below the field (Chakra's FormHelperText). */
+  helperText?: ReactNode;
+  /** Shown below the field when invalid (Chakra's FormErrorMessage). */
+  errorMessage?: ReactNode;
+  /** Per-instance style overrides for the helper text. */
+  helperTextCss?: SystemStyleObject;
+}
+
+/**
+ * `labelPosition` for the four single-control fields (TextField, NumberField,
+ * Select, ComboBox). Deliberately not on RadioGroup/CheckboxGroup: their roots
+ * carry no layout, and RAC's own `orientation` prop is a different axis there
+ * (it lays out the radios, not the label).
+ */
+export interface FieldLayoutProps {
+  /**
+   * `side` puts the label beside the control — the settings-row pattern. The
+   * label absorbs the free space; the control keeps its own width, so give it
+   * one (`groupCss`, `wrapperCss` or `triggerCss` depending on the field).
+   * Helper and error text drop to a full-width line below the pair.
+   */
+  labelPosition?: FieldVariantProps["labelPosition"];
+}
+
+/**
+ * Helper text and error message for a react-aria field container. Render
+ * inside any RAC component with field validation context (TextField, Select,
+ * ComboBox, NumberField, RadioGroup, CheckboxGroup) — react-aria wires the
+ * description to the input's aria-describedby, and the error renders only
+ * while the field is invalid. Also exported for app-side composites built on
+ * RAC containers.
+ */
+export const FieldSupport = ({
+  helperText,
+  errorMessage,
+  helperTextCss,
+  labelPosition,
+}: FieldSupportProps & FieldLayoutProps) => {
+  const slots = field({ labelPosition });
+  return (
+    <>
+      {helperText != null && (
+        <RACText
+          slot="description"
+          className={cx(
+            slots.helperText,
+            helperTextCss ? css(helperTextCss) : undefined,
+          )}
+        >
+          {helperText}
+        </RACText>
+      )}
+      <FieldError className={slots.errorMessage}>{errorMessage}</FieldError>
+    </>
+  );
+};
+
+interface FieldTextProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  /** The field's `labelPosition`, so the text lays out to match. */
+  labelPosition?: FieldVariantProps["labelPosition"];
+  /** Per-instance style overrides. */
+  css?: SystemStyleObject;
+}
+
+/**
+ * Context-free helper text (Chakra's FormHelperText) for a control react-aria
+ * isn't wiring — a native select or a masked input. Inside a RAC field
+ * container use `FieldSupport`, which wires `aria-describedby` and validation
+ * for free; here the caller owns that wiring: give this an `id` and reference
+ * it from the control's `aria-describedby` (as `NativeSelectField` does).
+ */
+export const FieldHelperText = ({
+  children,
+  labelPosition,
+  css: cssProp,
+  ...rest
+}: FieldTextProps) => (
+  <div
+    {...rest}
+    className={cx(
+      field({ labelPosition }).helperText,
+      cssProp ? css(cssProp) : undefined,
+    )}
+  >
+    {children}
+  </div>
+);
+
+/**
+ * Context-free error message (Chakra's FormErrorMessage), the counterpart to
+ * `FieldHelperText` — see its note on the wiring the caller owns. RAC's
+ * `FieldError` renders only while its field is invalid; here that decision is
+ * the caller's too: render it conditionally.
+ */
+export const FieldErrorMessage = ({
+  children,
+  labelPosition,
+  css: cssProp,
+  ...rest
+}: FieldTextProps) => (
+  <div
+    {...rest}
+    className={cx(
+      field({ labelPosition }).errorMessage,
+      cssProp ? css(cssProp) : undefined,
+    )}
+  >
+    {children}
+  </div>
+);
+
+/**
+ * The required-field asterisk (Chakra's FormLabel indicator). Render inside
+ * the field's label when `isRequired`; aria-hidden because react-aria already
+ * announces requiredness from the input itself.
+ */
+export const FieldRequiredIndicator = () => (
+  <span aria-hidden className={field().requiredIndicator}>
+    *
+  </span>
+);
+
+export interface FieldLabelProps
+  extends Omit<RACLabelProps, "className" | "children" | "style"> {
+  children: ReactNode;
+  /** Adds the required asterisk; pass the field's `isRequired`. */
+  isRequired?: boolean;
+  /** The field's `size`, so the label scales with its control. */
+  size?: FieldVariantProps["size"];
+  /** The field's `labelPosition`, so the label lays out to match. */
+  labelPosition?: FieldVariantProps["labelPosition"];
+  /** Per-instance style overrides. */
+  css?: SystemStyleObject;
+}
+
+/**
+ * A field's visible label (Chakra's FormLabel), asterisk included. Every
+ * labelled field in the library renders its label through this, so the `field`
+ * recipe is the single answer to what a label looks like — Select and ComboBox
+ * previously carried a near-identical `label` slot on the `select` recipe,
+ * which is how the two drifted.
+ *
+ * Also exported for app-side composites: inside a RAC field container the
+ * association is automatic, and outside one (a masked or native input) pass
+ * `id` and `htmlFor` yourself.
+ */
+export const FieldLabel = ({
+  children,
+  isRequired,
+  size,
+  labelPosition,
+  css: cssProp,
+  ...rest
+}: FieldLabelProps) => (
+  <RACLabel
+    {...rest}
+    className={cx(
+      field({ size, labelPosition }).label,
+      cssProp ? css(cssProp) : undefined,
+    )}
+  >
+    {children}
+    {isRequired ? <FieldRequiredIndicator /> : null}
+  </RACLabel>
+);

package/src/Heading.recipe.ts

@@ -44,6 +44,25 @@ export const heading = defineRecipe({
     // GT Walsheim in the private preset.
     variant: {
       marketing: { fontFamily: "display" },
+      // Page-title chrome in the accent colour (`headingAccent` — see
+      // base-preset.ts). Converged from classroom and data-microbit-org,
+      // which carried these two byte-identically app-side.
+      //
+      // `fontSize` goes through a doubled selector because `size` sets it too,
+      // responsively. Source order can't settle that: Panda hoists media
+      // queries below the base rules (gotcha #31) and emits variant rules in
+      // the order it meets them, so which of the two wins would depend on the
+      // breakpoint and on what other call sites exist. Two classes beat one at
+      // every width instead.
+      label: {
+        "&&": { fontSize: "4xl" },
+        color: "headingAccent",
+      },
+      subtitle: {
+        "&&": { fontSize: "xl" },
+        fontWeight: "normal",
+        color: "headingAccent",
+      },
     },
   },
   defaultVariants: {

package/src/Input.recipe.ts

@@ -17,8 +17,17 @@ const transitionCommon =
  *
  * Focus matches both native `:focus-visible` (plain inputs; browsers treat any
  * focus in a text field as focus-visible) and react-aria's `data-focused`
- * (inputs inside RAC TextField). Focus is declared after invalid so a focused
- * invalid field shows the focus ring, as in Chakra.
+ * (inputs inside RAC TextField).
+ *
+ * Hover, invalid and focus all set `borderColor`, so their precedence has to be
+ * hover < invalid < focus. Declaration order will not buy that: Panda sorts a
+ * recipe's state rules itself, ranking selectors against a fixed
+ * link/visited/focus/hover/active table, which puts `_hover` *after* focus and
+ * after anything the table doesn't mention (`[data-invalid]`). Equal-specificity
+ * rules then leave hover winning. So the ladder is spelled with repeated `&`
+ * instead — `&&` and `&&&` emit `.input.input` and `.input.input.input`, making
+ * precedence specificity rather than order, which nothing downstream can
+ * resort. Variants still override freely; they land in a later cascade layer.
  *
  * Registered in the base preset (base-preset.ts), which also has the
  * `staticCss` entry that keeps the runtime-prop size variants generated.
@@ -39,11 +48,11 @@ export const input = defineRecipe({
     bg: "inherit",
     color: "inherit",
     _hover: { borderColor: "gray.300" },
-    "&[data-invalid], &:user-invalid": {
+    "&&:is([data-invalid], :user-invalid)": {
       borderColor: "danger.500",
       boxShadow: "0 0 0 1px token(colors.danger.500)",
     },
-    "&:is(:focus-visible, [data-focused])": {
+    "&&&:is(:focus-visible, [data-focused])": {
       zIndex: 1,
       borderColor: "focusBorder",
       boxShadow: "0 0 0 1px token(colors.focusBorder)",

package/src/NativeSelect.tsx

@@ -47,7 +47,13 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
         className={cx(
           input({ size }),
           css(
-            { cursor: "pointer" },
+            // Chakra's Select field carried a 1px bottom padding its Input
+            // didn't (its option text sits a hair higher than input text).
+            {
+              cursor: "pointer",
+              paddingBottom: "1px",
+              _disabled: { cursor: "not-allowed" },
+            },
             // Room for the chevron overlay (Chakra Select's icon spacing,
             // constant across sizes).
             hideChevron ? undefined : { paddingRight: "8" },
@@ -84,6 +90,9 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
             height: "5",
             pointerEvents: "none",
             fill: "currentColor",
+            // The chevron sits outside the select so it doesn't inherit its
+            // disabled dimming; Chakra's Select icon dimmed to 0.5.
+            "select:disabled + &": { opacity: 0.5 },
           })}
         >
           <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" />

package/src/NativeSelectField.tsx

@@ -0,0 +1,81 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { forwardRef, ReactNode, useId } from "react";
+import { css, cx } from "styled-system/css";
+import { field } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+import { FieldHelperText, FieldLabel, FieldLayoutProps } from "./Field";
+import { NativeSelect, NativeSelectProps } from "./NativeSelect";
+
+export interface NativeSelectFieldProps
+  extends NativeSelectProps,
+    FieldLayoutProps {
+  /** Visible label, associated with the select via `htmlFor`. */
+  label: ReactNode;
+  /** Help text below the field, wired to the select's `aria-describedby`. */
+  helperText?: ReactNode;
+  /** Per-instance style overrides for the field root. */
+  rootCss?: SystemStyleObject;
+}
+
+/**
+ * NativeSelectField — a labelled `NativeSelect`, pairing the bare control with
+ * the field chrome the RAC fields get from react-aria, as `TextField` pairs
+ * with `Input`. The label association and `aria-describedby` are wired here,
+ * since there is no RAC context to do it; the label dims with the control
+ * exactly as the RAC fields' do. No `errorMessage` yet — no consumer needs
+ * one; render `FieldErrorMessage` beside it if yours does.
+ *
+ * With `labelPosition="side"` this is the settings row both
+ * `SelectFormControl`s hand-rolled: label beside a fixed-width select
+ * (`wrapperCss={{ width: "28ch" }}`), label absorbing the free space.
+ */
+export const NativeSelectField = forwardRef<
+  HTMLSelectElement,
+  NativeSelectFieldProps
+>(function NativeSelectField(
+  { label, helperText, labelPosition, rootCss, id, ...rest },
+  ref,
+) {
+  const generatedId = useId();
+  const selectId = id ?? generatedId;
+  const helperId = useId();
+  const describedBy =
+    [rest["aria-describedby"], helperText != null ? helperId : undefined]
+      .filter(Boolean)
+      .join(" ") || undefined;
+  return (
+    <div
+      className={cx(
+        field({ size: rest.size, labelPosition }).root,
+        rootCss ? css(rootCss) : undefined,
+      )}
+      // The field recipe's label dims off the root's data-disabled, which RAC
+      // stamps for the other fields; here it is restated from the attribute.
+      data-disabled={rest.disabled || undefined}
+    >
+      <FieldLabel
+        htmlFor={selectId}
+        size={rest.size}
+        labelPosition={labelPosition}
+        isRequired={rest.required}
+      >
+        {label}
+      </FieldLabel>
+      <NativeSelect
+        ref={ref}
+        id={selectId}
+        {...rest}
+        aria-describedby={describedBy}
+      />
+      {helperText != null && (
+        <FieldHelperText id={helperId} labelPosition={labelPosition}>
+          {helperText}
+        </FieldHelperText>
+      )}
+    </div>
+  );
+});

package/src/NumberField.recipe.ts

@@ -11,18 +11,18 @@ import { defineSlotRecipe } from "@pandacss/dev";
  * two stacked buttons. Consumed by the shared-ui NumberField
  * (react-aria-components NumberField).
  *
- * Registered in the base preset (base-preset.ts). No variants, so it needs
- * no `staticCss` entry.
+ * Registered in the base preset (base-preset.ts), which also has the
+ * `staticCss` entry that keeps the runtime-prop size variants generated.
  */
 export const numberField = defineSlotRecipe({
   className: "numberField",
   slots: ["root", "group", "stepper", "stepperButton"],
   base: {
-    root: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch",
-    },
+    // No layout here: the component wears the `field` recipe's root alongside
+    // this slot, and that recipe is the single owner of field-root layout
+    // (else `labelPosition` would fight this slot over `flexDirection`). The
+    // slot stays for apps and variants to target.
+    root: {},
     group: {
       position: "relative",
       zIndex: 0,
@@ -64,4 +64,22 @@ export const numberField = defineSlotRecipe({
       "&[data-disabled]": { opacity: 0.4, cursor: "not-allowed" },
     },
   },
+  variants: {
+    // Chakra's NumberInput: the stepper column stays 24px wide at every size
+    // (as does the input padding paired with it in NumberField.tsx); only the
+    // arrow glyphs scale, at 0.75 × the field's font size. The base's `xs` is
+    // exactly md × 0.75, so md adds nothing.
+    size: {
+      lg: {
+        stepperButton: { fontSize: "calc(token(fontSizes.lg) * 0.75)" },
+      },
+      md: {},
+      sm: {
+        stepperButton: { fontSize: "calc(token(fontSizes.sm) * 0.75)" },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
 });

package/src/NumberField.tsx

@@ -8,27 +8,41 @@ import {
   Button as RACButton,
   Group as RACGroup,
   Input as RACInput,
-  Label as RACLabel,
   NumberField as RACNumberField,
   NumberFieldProps as RACNumberFieldProps,
 } from "react-aria-components";
 import { RiArrowDownSFill, RiArrowUpSFill } from "react-icons/ri";
 import { css, cx } from "styled-system/css";
-import { field, input, numberField } from "styled-system/recipes";
+import {
+  field,
+  input,
+  InputVariantProps,
+  numberField,
+} from "styled-system/recipes";
 import { SystemStyleObject } from "styled-system/types";
+import {
+  FieldLabel,
+  FieldLayoutProps,
+  FieldSupport,
+  FieldSupportProps,
+} from "./Field";
 import { Icon } from "./Icon";
 
 export interface NumberFieldProps
-  extends Omit<RACNumberFieldProps, "className" | "children" | "style"> {
+  extends Omit<RACNumberFieldProps, "className" | "children" | "style">,
+    InputVariantProps,
+    FieldSupportProps,
+    FieldLayoutProps {
   /** Visible label (optional; otherwise pass `aria-label`). */
   label?: ReactNode;
-  /** Root style overrides (e.g. row layout for label-beside-field forms). */
-  css?: SystemStyleObject;
+  /** Root style overrides (for a label-beside-field row, prefer
+   * `labelPosition="side"`). */
+  rootCss?: SystemStyleObject;
   /** Label style overrides. */
   labelCss?: SystemStyleObject;
   /** Group (input + steppers) style overrides — set `width` here. */
   groupCss?: SystemStyleObject;
-  /** Input style overrides (e.g. a smaller size than the recipe's md). */
+  /** Input style overrides (for sizing, prefer the `size` prop). */
   inputCss?: SystemStyleObject;
 }
 
@@ -40,25 +54,43 @@ export interface NumberFieldProps
  */
 export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(
   function NumberField(
-    { label, css: cssProp, labelCss, groupCss, inputCss, ...rest },
+    {
+      label,
+      helperText,
+      errorMessage,
+      helperTextCss,
+      rootCss,
+      labelCss,
+      groupCss,
+      inputCss,
+      labelPosition,
+      ...props
+    },
     ref,
   ) {
-    const slots = numberField();
-    const fieldSlots = field();
+    // As Input: forward every recipe variant group, not just `size`, so a
+    // preset that adds one keeps working.
+    const [variantProps, rest] = input.splitVariantProps(props);
+    const slots = numberField({ size: variantProps.size });
+    const fieldSlots = field({ size: variantProps.size, labelPosition });
     return (
       <RACNumberField
         {...rest}
-        className={cx(slots.root, cssProp ? css(cssProp) : undefined)}
+        className={cx(
+          fieldSlots.root,
+          slots.root,
+          rootCss ? css(rootCss) : undefined,
+        )}
       >
         {label != null && (
-          <RACLabel
-            className={cx(
-              fieldSlots.label,
-              labelCss ? css(labelCss) : undefined,
-            )}
+          <FieldLabel
+            size={variantProps.size}
+            labelPosition={labelPosition}
+            isRequired={rest.isRequired}
+            css={labelCss}
           >
             {label}
-          </RACLabel>
+          </FieldLabel>
         )}
         <RACGroup
           className={cx(slots.group, groupCss ? css(groupCss) : undefined)}
@@ -66,8 +98,9 @@ export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(
           <RACInput
             ref={ref}
             className={cx(
-              input(),
-              // Room for the stepper column.
+              input(variantProps),
+              // Room for the stepper column (constant across sizes, as the
+              // stepper's width is).
               css({ paddingEnd: "6" }, inputCss),
             )}
           />
@@ -80,6 +113,12 @@ export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(
             </RACButton>
           </div>
         </RACGroup>
+        <FieldSupport
+          helperText={helperText}
+          errorMessage={errorMessage}
+          helperTextCss={helperTextCss}
+          labelPosition={labelPosition}
+        />
       </RACNumberField>
     );
   },

package/src/Radio.tsx

@@ -7,38 +7,11 @@ import { ReactNode } from "react";
 import {
   Radio as RACRadio,
   RadioProps as RACRadioProps,
-  RadioGroup as RACRadioGroup,
-  RadioGroupProps as RACRadioGroupProps,
 } from "react-aria-components";
 import { css, cx } from "styled-system/css";
 import { radio, RadioVariantProps } from "styled-system/recipes";
 import { SystemStyleObject } from "styled-system/types";
 
-export interface RadioGroupProps
-  extends Omit<RACRadioGroupProps, "className" | "style"> {
-  /** Per-instance style overrides, merged after the recipe. */
-  css?: SystemStyleObject;
-  className?: string;
-}
-
-/**
- * RadioGroup — react-aria-components <RadioGroup> for a set of Radios. Carries
- * no styling of its own: compose with Stack for layout, as Chakra call sites
- * did.
- */
-export const RadioGroup = ({
-  css: cssProp,
-  className,
-  ...rest
-}: RadioGroupProps) => {
-  return (
-    <RACRadioGroup
-      className={cx(cssProp ? css(cssProp) : undefined, className)}
-      {...rest}
-    />
-  );
-};
-
 export interface RadioProps
   extends Omit<RACRadioProps, "className" | "children" | "style">,
     RadioVariantProps {