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

exports[`Modal > renders with body slot correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-33" aria-labelledby="radix-vue-dialog-title-32" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
  <div class="px-4 py-5 sm:px-6">
    <!--v-if-->
    <!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
      <!---->
      <!--v-if-->
      <!--v-if-->
    </button>
  </div>
  <div class="flex-1 p-4 sm:p-6">Body slot</div>
  <!--v-if-->
</div>


<!--teleport end-->"
`;

exports[`Modal > renders with class correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-16" aria-labelledby="radix-vue-dialog-title-15" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800 bg-gray-50 dark:bg-gray-800">
  <div class="px-4 py-5 sm:px-6">
    <!--v-if-->
    <!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
      <!---->
      <!--v-if-->
      <!--v-if-->
    </button>
  </div>
  <!--v-if-->
  <!--v-if-->
</div>


<!--teleport end-->"
`;

exports[`Modal > renders with close slot correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-31" aria-labelledby="radix-vue-dialog-title-30" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
  <div class="px-4 py-5 sm:px-6">
    <!--v-if-->
    <!--v-if-->Close slot
  </div>
  <!--v-if-->
  <!--v-if-->
</div>


<!--teleport end-->"
`;

exports[`Modal > renders with content slot correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-23" aria-labelledby="radix-vue-dialog-title-22" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">Content slot</div>


<!--teleport end-->"
`;

exports[`Modal > renders with default slot correctly 1`] = `
"Default slot
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
<div data-dismissable-layer="" style="pointer-events: auto;" id="radix-vue-dialog-content-19" role="dialog" aria-describedby="radix-vue-dialog-description-21" aria-labelledby="radix-vue-dialog-title-20" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
  <div class="px-4 py-5 sm:px-6">
    <!--v-if-->
    <!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
      <!---->
      <!--v-if-->
      <!--v-if-->
    </button>
  </div>
  <!--v-if-->
  <!--v-if-->
</div>


<!--teleport end-->"
`;

exports[`Modal > renders with description correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-6" aria-labelledby="radix-vue-dialog-title-5" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
  <div class="px-4 py-5 sm:px-6">
    <h2 id="radix-vue-dialog-title-5" class="text-gray-900 dark:text-white font-semibold">Title</h2>
    <p id="radix-vue-dialog-description-6" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
      <!---->
      <!--v-if-->
      <!--v-if-->
    </button>
  </div>
  <!--v-if-->
  <!--v-if-->
</div>


<!--teleport end-->"
`;

exports[`Modal > renders with description slot correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-29" aria-labelledby="radix-vue-dialog-title-28" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
  <div class="px-4 py-5 sm:px-6">
    <!--v-if-->
    <p id="radix-vue-dialog-description-29" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description slot</p><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
      <!---->
      <!--v-if-->
      <!--v-if-->
    </button>
  </div>
  <!--v-if-->
  <!--v-if-->
</div>


<!--teleport end-->"
`;

exports[`Modal > renders with footer slot correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-35" aria-labelledby="radix-vue-dialog-title-34" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
  <div class="px-4 py-5 sm:px-6">
    <!--v-if-->
    <!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
      <!---->
      <!--v-if-->
      <!--v-if-->
    </button>
  </div>
  <!--v-if-->
  <div class="flex items-center gap-1.5 p-4 sm:px-6">Footer slot</div>
</div>


<!--teleport end-->"
`;

exports[`Modal > renders with fullscreen correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-8" aria-labelledby="radix-vue-dialog-title-7" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0">
  <div class="px-4 py-5 sm:px-6">
    <h2 id="radix-vue-dialog-title-7" class="text-gray-900 dark:text-white font-semibold">Title</h2>
    <p id="radix-vue-dialog-description-8" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
      <!---->
      <!--v-if-->
      <!--v-if-->
    </button>
  </div>
  <!--v-if-->
  <!--v-if-->
</div>


<!--teleport end-->"
`;

exports[`Modal > renders with header slot correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-25" aria-labelledby="radix-vue-dialog-title-24" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
  <div class="px-4 py-5 sm:px-6">Header slot</div>
  <!--v-if-->
  <!--v-if-->
</div>


<!--teleport end-->"
`;

exports[`Modal > renders with open correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
<div data-dismissable-layer="" id="" role="dialog" aria-describedby="radix-vue-dialog-description-2" aria-labelledby="radix-vue-dialog-title-1" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800" style="pointer-events: auto;">
  <div class="px-4 py-5 sm:px-6">
    <!--v-if-->
    <!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
      <!---->
      <!--v-if-->
      <!--v-if-->
    </button>
  </div>
  <!--v-if-->
  <!--v-if-->
</div>


<!--teleport end-->"
`;

exports[`Modal > renders with title correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-4" aria-labelledby="radix-vue-dialog-title-3" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
  <div class="px-4 py-5 sm:px-6">
    <h2 id="radix-vue-dialog-title-3" class="text-gray-900 dark:text-white font-semibold">Title</h2>
    <!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
      <!---->
      <!--v-if-->
      <!--v-if-->
    </button>
  </div>
  <!--v-if-->
  <!--v-if-->
</div>


<!--teleport end-->"
`;

exports[`Modal > renders with title slot correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-27" aria-labelledby="radix-vue-dialog-title-26" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
  <div class="px-4 py-5 sm:px-6">
    <h2 id="radix-vue-dialog-title-26" class="text-gray-900 dark:text-white font-semibold">Title slot</h2>
    <!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
      <!---->
      <!--v-if-->
      <!--v-if-->
    </button>
  </div>
  <!--v-if-->
  <!--v-if-->
</div>


<!--teleport end-->"
`;

exports[`Modal > renders with ui correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-18" aria-labelledby="radix-vue-dialog-title-17" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
  <div class="px-4 py-5 sm:px-6">
    <!--v-if-->
    <!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-2">
      <!---->
      <!--v-if-->
      <!--v-if-->
    </button>
  </div>
  <!--v-if-->
  <!--v-if-->
</div>


<!--teleport end-->"
`;

exports[`Modal > renders without close correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-14" aria-labelledby="radix-vue-dialog-title-13" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
  <div class="px-4 py-5 sm:px-6">
    <h2 id="radix-vue-dialog-title-13" class="text-gray-900 dark:text-white font-semibold">Title</h2>
    <p id="radix-vue-dialog-description-14" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p>
  </div>
  <!--v-if-->
  <!--v-if-->
</div>


<!--teleport end-->"
`;

exports[`Modal > renders without overlay correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<!--v-if-->
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-10" aria-labelledby="radix-vue-dialog-title-9" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
  <div class="px-4 py-5 sm:px-6">
    <h2 id="radix-vue-dialog-title-9" class="text-gray-900 dark:text-white font-semibold">Title</h2>
    <p id="radix-vue-dialog-description-10" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
      <!---->
      <!--v-if-->
      <!--v-if-->
    </button>
  </div>
  <!--v-if-->
  <!--v-if-->
</div>


<!--teleport end-->"
`;

exports[`Modal > renders without transition correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-12" aria-labelledby="radix-vue-dialog-title-11" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
  <div class="px-4 py-5 sm:px-6">
    <h2 id="radix-vue-dialog-title-11" class="text-gray-900 dark:text-white font-semibold">Title</h2>
    <p id="radix-vue-dialog-description-12" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
      <!---->
      <!--v-if-->
      <!--v-if-->
    </button>
  </div>
  <!--v-if-->
  <!--v-if-->
</div>


<!--teleport end-->"
`;
