ui/test/components/__snapshots__/PinInput-vue.spec.ts.snap

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

exports[`PinInput > renders with ariaLabel correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" aria-label="Aria label" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with as correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with class correctly 1`] = `"<div class="inline-flex items-center gap-1.5 absolute" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with defaultValue correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value="1"></div>"`;

exports[`PinInput > renders with disabled correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr" data-disabled=""><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" disabled="" value=""></div>"`;

exports[`PinInput > renders with id correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" id="pin-input-id" value=""></div>"`;

exports[`PinInput > renders with length correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 6 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with mask correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with modelValue correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value="1"></div>"`;

exports[`PinInput > renders with name correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="pin-input-name" value=""></div>"`;

exports[`PinInput > renders with neutral variant ghost correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with neutral variant ghost highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with neutral variant none correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with neutral variant none highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with neutral variant outline correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with neutral variant outline highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with neutral variant soft correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with neutral variant soft highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with neutral variant subtle correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with neutral variant subtle highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with otp correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with placeholder correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with primary variant ghost correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with primary variant ghost highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with primary variant none correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with primary variant none highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with primary variant outline correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with primary variant outline highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with primary variant soft correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with primary variant soft highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with primary variant subtle correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with primary variant subtle highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with required correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" required="" value=""></div>"`;

exports[`PinInput > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with type correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

exports[`PinInput > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;