// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" aria-label="Aria label">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with as correctly 1`] = `
"<section role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</section>"
`;

exports[`RadioGroup > renders with class correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="absolute">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with defaultValue correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full bg-(--ui-primary) after:size-1.5"></span>
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with description correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <p class="text-(--ui-text-muted)">Description 0</p>
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <p class="text-(--ui-text-muted)">Description 1</p>
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <p class="text-(--ui-text-muted)">Description 2</p>
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with description slot correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Description slot</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Description slot</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Description slot</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <p class="text-(--ui-text-muted)">1</p>
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <p class="text-(--ui-text-muted)">2</p>
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <p class="text-(--ui-text-muted)">3</p>
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with disabled correctly 1`] = `
"<div role="radiogroup" data-disabled="" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-disabled="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text) cursor-not-allowed opacity-75" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-disabled="" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text) cursor-not-allowed opacity-75" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-disabled="" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text) cursor-not-allowed opacity-75" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with horizontal variant card correctly 1`] = `
"<div role="radiogroup" aria-orientation="horizontal" aria-required="false" dir="ltr" tabindex="0" data-orientation="horizontal" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-row gap-1">
    <!--v-if--><label class="flex items-center border border-(--ui-border-muted) rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-(--ui-primary)">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="horizontal" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full bg-(--ui-primary) after:size-1.5"></span>
          <!---->
        </button></div>
      <div class="w-full me-2">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-center border border-(--ui-border-muted) rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-(--ui-primary)">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="horizontal" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full me-2">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-center border border-(--ui-border-muted) rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-(--ui-primary)">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="horizontal" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full me-2">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
"<div role="radiogroup" aria-orientation="horizontal" aria-required="false" dir="ltr" tabindex="0" data-orientation="horizontal" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-row gap-1">
    <!--v-if-->
    <div class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="horizontal" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full bg-(--ui-primary) after:size-1.5"></span>
          <!---->
        </button></div>
      <div class="w-full me-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
        <!--v-if-->
      </div>
    </div>
    <div class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="horizontal" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full me-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
        <!--v-if-->
      </div>
    </div>
    <div class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="horizontal" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full me-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
        <!--v-if-->
      </div>
    </div>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
"<div role="radiogroup" aria-orientation="horizontal" aria-required="false" dir="ltr" tabindex="0" data-orientation="horizontal" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-row gap-0 -space-x-px">
    <!--v-if--><label class="flex items-start border border-(--ui-border-muted) flex-row text-sm p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-(--ui-primary)/10 has-data-[state=checked]:border-(--ui-primary)/50 has-data-[state=checked]:z-[1]">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="horizontal" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full bg-(--ui-primary) after:size-1.5"></span>
          <!---->
        </button></div>
      <div class="w-full me-2">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start border border-(--ui-border-muted) flex-row text-sm p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-(--ui-primary)/10 has-data-[state=checked]:border-(--ui-primary)/50 has-data-[state=checked]:z-[1]">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="horizontal" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full me-2">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start border border-(--ui-border-muted) flex-row text-sm p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-(--ui-primary)/10 has-data-[state=checked]:border-(--ui-primary)/50 has-data-[state=checked]:z-[1]">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="horizontal" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full me-2">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with indicator end correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row-reverse text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) ms-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row-reverse text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) ms-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row-reverse text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) ms-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) sr-only size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full text-center">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) sr-only size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full text-center">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) sr-only size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full text-center">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with indicator start correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with items correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with label slot correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Label slot</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Label slot</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Label slot</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with labelKey correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with legend slot correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Legend slot</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Legend slot</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Legend slot</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with modelValue correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full bg-(--ui-primary) after:size-1.5"></span>
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with neutral variant card correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-center border border-(--ui-border-muted) rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-(--ui-border-elevated)">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted) me-2 size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full bg-(--ui-bg-inverted) after:size-1.5"></span>
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-center border border-(--ui-border-muted) rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-(--ui-border-elevated)">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-center border border-(--ui-border-muted) rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-(--ui-border-elevated)">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with neutral variant list correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if-->
    <div class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted) me-2 size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full bg-(--ui-bg-inverted) after:size-1.5"></span>
          <!---->
        </button></div>
      <div class="w-full"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
        <!--v-if-->
      </div>
    </div>
    <div class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
        <!--v-if-->
      </div>
    </div>
    <div class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
        <!--v-if-->
      </div>
    </div>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with neutral variant table correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-0 -space-y-px">
    <!--v-if--><label class="flex items-start border border-(--ui-border-muted) flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-(--ui-bg-elevated) has-data-[state=checked]:border-(--ui-border-inverted)/25 has-data-[state=checked]:z-[1]">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted) me-2 size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full bg-(--ui-bg-inverted) after:size-1.5"></span>
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start border border-(--ui-border-muted) flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-(--ui-bg-elevated) has-data-[state=checked]:border-(--ui-border-inverted)/25 has-data-[state=checked]:z-[1]">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start border border-(--ui-border-muted) flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-(--ui-bg-elevated) has-data-[state=checked]:border-(--ui-border-inverted)/25 has-data-[state=checked]:z-[1]">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with primary variant card correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-center border border-(--ui-border-muted) rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-(--ui-primary)">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full bg-(--ui-primary) after:size-1.5"></span>
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-center border border-(--ui-border-muted) rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-(--ui-primary)">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-center border border-(--ui-border-muted) rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-(--ui-primary)">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with primary variant list correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if-->
    <div class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full bg-(--ui-primary) after:size-1.5"></span>
          <!---->
        </button></div>
      <div class="w-full"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
        <!--v-if-->
      </div>
    </div>
    <div class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
        <!--v-if-->
      </div>
    </div>
    <div class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
        <!--v-if-->
      </div>
    </div>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with primary variant table correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-0 -space-y-px">
    <!--v-if--><label class="flex items-start border border-(--ui-border-muted) flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-(--ui-primary)/10 has-data-[state=checked]:border-(--ui-primary)/50 has-data-[state=checked]:z-[1]">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full bg-(--ui-primary) after:size-1.5"></span>
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start border border-(--ui-border-muted) flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-(--ui-primary)/10 has-data-[state=checked]:border-(--ui-primary)/50 has-data-[state=checked]:z-[1]">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start border border-(--ui-border-muted) flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-(--ui-primary)/10 has-data-[state=checked]:border-(--ui-primary)/50 has-data-[state=checked]:z-[1]">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with required correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="true" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <legend class="mb-1 block font-medium text-(--ui-text) text-sm after:content-['*'] after:ms-0.5 after:text-(--ui-error)">Legend</legend><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with size lg correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4.5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4.5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4.5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with size md correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with size sm correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-0.5">
    <!--v-if--><label class="flex items-start flex-row text-xs">
      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-3.5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-xs">
      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-3.5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-xs">
      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-3.5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with size xl correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1.5">
    <!--v-if--><label class="flex items-start flex-row text-base">
      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-base">
      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-base">
      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with size xs correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-0.5">
    <!--v-if--><label class="flex items-start flex-row text-xs">
      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-3" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-xs">
      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-3" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-xs">
      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-3" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with ui correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full ms-4">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full ms-4">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full ms-4">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;

exports[`RadioGroup > renders with valueKey correctly 1`] = `
"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if--><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 1" aria-label="Option 1">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:Option 1">Option 1</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 2" aria-label="Option 2">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:Option 2">Option 2</p>
        <!--v-if-->
      </div>
    </label><label class="flex items-start flex-row text-sm">
      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) me-2 size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 3" aria-label="Option 3">
          <!---->
          <!---->
        </button></div>
      <div class="w-full">
        <p class="block font-medium text-(--ui-text)" for="v-0-0:Option 3">Option 3</p>
        <!--v-if-->
      </div>
    </label>
  </fieldset>
  <!---->
</div>"
`;
