kaze 0.7.0 → 0.9.0

data/stubs/inertia-react-ts/app/javascript/Components/InputLabel.tsx

@@ -7,10 +7,7 @@ export default function InputLabel({
   ...props
 }: LabelHTMLAttributes<HTMLLabelElement> & { value?: string }) {
   return (
-    <label
-      {...props}
-      className={`block font-medium text-sm text-gray-700 dark:text-gray-300 ${className}`}
-    >
+    <label {...props} className={`block font-medium text-sm text-gray-700 dark:text-gray-300 ${className}`}>
       {value ? value : children}
     </label>
   )

data/stubs/inertia-react-ts/app/javascript/Components/NavLink.tsx

@@ -9,13 +9,11 @@ export default function NavLink({
   return (
     <Link
       {...props}
-      className={
-        `inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-none ${
-          active
+      className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-none ${
+        active
           ? 'border-indigo-400 dark:border-indigo-600 text-gray-900 dark:text-gray-100 focus:border-indigo-700 '
           : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 '
-        } ${className}`
-      }
+      } ${className}`}
     >
       {children}
     </Link>

data/stubs/inertia-react-ts/app/javascript/Components/PrimaryButton.tsx

@@ -9,11 +9,9 @@ export default function PrimaryButton({
   return (
     <button
       {...props}
-      className={
-        `inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 ${
-          disabled && 'opacity-25'
-        } ${className}`
-      }
+      className={`inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 ${
+        disabled && 'opacity-25'
+      } ${className}`}
       disabled={disabled}
     >
       {children}

data/stubs/inertia-react-ts/app/javascript/Components/SecondaryButton.tsx

@@ -11,11 +11,9 @@ export default function SecondaryButton({
     <button
       {...props}
       type={type}
-      className={
-        `inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150 ${
-          disabled && 'opacity-25'
-        } ${className}`
-      }
+      className={`inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150 ${
+        disabled && 'opacity-25'
+      } ${className}`}
       disabled={disabled}
     >
       {children}

data/stubs/inertia-react-ts/app/javascript/Components/TextInput.tsx

@@ -1,10 +1,4 @@
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  InputHTMLAttributes,
-} from 'react'
+import { forwardRef, useEffect, useImperativeHandle, useRef, InputHTMLAttributes } from 'react'
 
 export default forwardRef(function TextInput(
   {

data/stubs/inertia-react-ts/app/javascript/Layouts/AuthenticatedLayout.tsx

@@ -12,8 +12,7 @@ export default function Authenticated({
   header,
   children,
 }: PropsWithChildren<{ user: User; header?: ReactNode }>) {
-  const [showingNavigationDropdown, setShowingNavigationDropdown] =
-    useState(false)
+  const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false)
 
   const { pathname = '' } = typeof window !== 'undefined' ? window.location : {}
 
@@ -25,15 +24,12 @@ export default function Authenticated({
             <div className="flex">
               <div className="shrink-0 flex items-center">
                 <Link href="/">
-                  <ApplicationLogo className="block h-9 w-auto fill-current text-gray-800" />
+                  <ApplicationLogo className="block h-9 w-auto fill-current text-red-800" />
                 </Link>
               </div>
 
               <div className="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
-                <NavLink
-                  href={dashboard_path()}
-                  active={pathname.match(/dashboard/) != null}
-                >
+                <NavLink href={dashboard_path()} active={pathname.match(/dashboard/) != null}>
                   Dashboard
                 </NavLink>
               </div>
@@ -67,14 +63,8 @@ export default function Authenticated({
                   </Dropdown.Trigger>
 
                   <Dropdown.Content>
-                    <Dropdown.Link href={profile_edit_path()}>
-                      Profile
-                    </Dropdown.Link>
-                    <Dropdown.Link
-                      href={logout_path()}
-                      method="post"
-                      as="button"
-                    >
+                    <Dropdown.Link href={profile_edit_path()}>Profile</Dropdown.Link>
+                    <Dropdown.Link href={logout_path()} method="post" as="button">
                       Log Out
                     </Dropdown.Link>
                   </Dropdown.Content>
@@ -84,32 +74,19 @@ export default function Authenticated({
 
             <div className="-me-2 flex items-center sm:hidden">
               <button
-                onClick={() =>
-                  setShowingNavigationDropdown(
-                    (previousState) => !previousState,
-                  )
-                }
+                onClick={() => setShowingNavigationDropdown((previousState) => !previousState)}
                 className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
               >
-                <svg
-                  className="h-6 w-6"
-                  stroke="currentColor"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                >
+                <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                   <path
-                    className={
-                      !showingNavigationDropdown ? 'inline-flex' : 'hidden'
-                    }
+                    className={!showingNavigationDropdown ? 'inline-flex' : 'hidden'}
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth="2"
                     d="M4 6h16M4 12h16M4 18h16"
                   />
                   <path
-                    className={
-                      showingNavigationDropdown ? 'inline-flex' : 'hidden'
-                    }
+                    className={showingNavigationDropdown ? 'inline-flex' : 'hidden'}
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth="2"
@@ -121,34 +98,21 @@ export default function Authenticated({
           </div>
         </div>
 
-        <div
-          className={
-            (showingNavigationDropdown ? 'block' : 'hidden') + ' sm:hidden'
-          }
-        >
+        <div className={(showingNavigationDropdown ? 'block' : 'hidden') + ' sm:hidden'}>
           <div className="pt-2 pb-3 space-y-1">
-            <ResponsiveNavLink
-              href={dashboard_path()}
-              active={pathname.match(/dashboard/) != null}
-            >
+            <ResponsiveNavLink href={dashboard_path()} active={pathname.match(/dashboard/) != null}>
               Dashboard
             </ResponsiveNavLink>
           </div>
 
           <div className="pt-4 pb-1 border-t border-gray-200">
             <div className="px-4">
-              <div className="font-medium text-base text-gray-800">
-                {user.name}
-              </div>
-              <div className="font-medium text-sm text-gray-500">
-                {user.email}
-              </div>
+              <div className="font-medium text-base text-gray-800">{user.name}</div>
+              <div className="font-medium text-sm text-gray-500">{user.email}</div>
             </div>
 
             <div className="mt-3 space-y-1">
-              <ResponsiveNavLink href={profile_edit_path()}>
-                Profile
-              </ResponsiveNavLink>
+              <ResponsiveNavLink href={profile_edit_path()}>Profile</ResponsiveNavLink>
               <ResponsiveNavLink method="post" href={logout_path()} as="button">
                 Log Out
               </ResponsiveNavLink>
@@ -159,9 +123,7 @@ export default function Authenticated({
 
       {header && (
         <header className="bg-white shadow">
-          <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-            {header}
-          </div>
+          <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">{header}</div>
         </header>
       )}
 

data/stubs/inertia-react-ts/app/javascript/Layouts/GuestLayout.tsx

@@ -7,7 +7,7 @@ export default function Guest({ children }: PropsWithChildren) {
     <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
       <div>
         <Link href="/">
-          <ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
+          <ApplicationLogo className="w-20 h-20 fill-current text-red-500" />
         </Link>
       </div>
 

data/stubs/inertia-react-ts/app/javascript/Pages/Auth/ForgotPassword.tsx

@@ -22,14 +22,11 @@ export default function ForgotPassword({ status }: { status?: string }) {
       <Head title="Forgot Password" />
 
       <div className="mb-4 text-sm text-gray-600">
-        Forgot your password? No problem. Just let us know your email address
-        and we will email you a password reset link that will allow you to
-        choose a new one.
+        Forgot your password? No problem. Just let us know your email address and we will email you a password reset
+        link that will allow you to choose a new one.
       </div>
 
-      {status && (
-        <div className="mb-4 font-medium text-sm text-green-600">{status}</div>
-      )}
+      {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
 
       <form onSubmit={submit}>
         <TextInput

data/stubs/inertia-react-ts/app/javascript/Pages/Auth/Login.tsx

@@ -8,13 +8,7 @@ import TextInput from '@/Components/TextInput'
 import { Head, Link, useForm } from '@inertiajs/react'
 import { login_path, password_request_path } from '@/routes'
 
-export default function Login({
-  status,
-  canResetPassword,
-}: {
-  status?: string
-  canResetPassword: boolean
-}) {
+export default function Login({ status }: { status?: string }) {
   const { data, setData, post, processing, errors, reset } = useForm({
     email: '',
     password: '',
@@ -37,9 +31,7 @@ export default function Login({
     <GuestLayout>
       <Head title="Log in" />
 
-      {status && (
-        <div className="mb-4 font-medium text-sm text-green-600">{status}</div>
-      )}
+      {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
 
       <form onSubmit={submit}>
         <div>
@@ -77,24 +69,18 @@ export default function Login({
 
         <div className="block mt-4">
           <label className="flex items-center">
-            <Checkbox
-              name="remember"
-              checked={data.remember}
-              onChange={(e) => setData('remember', e.target.checked)}
-            />
+            <Checkbox name="remember" checked={data.remember} onChange={(e) => setData('remember', e.target.checked)} />
             <span className="ms-2 text-sm text-gray-600">Remember me</span>
           </label>
         </div>
 
         <div className="flex items-center justify-end mt-4">
-          {canResetPassword && (
-            <Link
-              href={password_request_path()}
-              className="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-            >
-              Forgot your password?
-            </Link>
-          )}
+          <Link
+            href={password_request_path()}
+            className="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          >
+            Forgot your password?
+          </Link>
 
           <PrimaryButton className="ms-4" disabled={processing}>
             Log in

data/stubs/inertia-react-ts/app/javascript/Pages/Auth/Register.tsx

@@ -84,10 +84,7 @@ export default function Register() {
         </div>
 
         <div className="mt-4">
-          <InputLabel
-            htmlFor="password_confirmation"
-            value="Confirm Password"
-          />
+          <InputLabel htmlFor="password_confirmation" value="Confirm Password" />
 
           <TextInput
             id="password_confirmation"

data/stubs/inertia-react-ts/app/javascript/Pages/Auth/ResetPassword.tsx

@@ -49,10 +49,7 @@ export default function ResetPassword({ token }: { token: string }) {
         </div>
 
         <div className="mt-4">
-          <InputLabel
-            htmlFor="password_confirmation"
-            value="Confirm Password"
-          />
+          <InputLabel htmlFor="password_confirmation" value="Confirm Password" />
 
           <TextInput
             type="password"

data/stubs/inertia-react-ts/app/javascript/Pages/Auth/VerifyEmail.tsx

@@ -0,0 +1,47 @@
+import GuestLayout from '@/Layouts/GuestLayout'
+import PrimaryButton from '@/Components/PrimaryButton'
+import { Head, Link, useForm } from '@inertiajs/react'
+import { FormEventHandler } from 'react'
+import { logout_path, verification_send_path } from '@/routes'
+
+export default function VerifyEmail({ status }: { status?: string }) {
+  const { post, processing } = useForm({})
+
+  const submit: FormEventHandler = (e) => {
+    e.preventDefault()
+
+    post(verification_send_path())
+  }
+
+  return (
+    <GuestLayout>
+      <Head title="Email Verification" />
+
+      <div className="mb-4 text-sm text-gray-600 dark:text-gray-400">
+        Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we
+        just emailed to you? If you didn't receive the email, we will gladly send you another.
+      </div>
+
+      {status === 'verification-link-sent' && (
+        <div className="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
+          A new verification link has been sent to the email address you provided during registration.
+        </div>
+      )}
+
+      <form onSubmit={submit}>
+        <div className="mt-4 flex items-center justify-between">
+          <PrimaryButton disabled={processing}>Resend Verification Email</PrimaryButton>
+
+          <Link
+            href={logout_path()}
+            method="post"
+            as="button"
+            className="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
+          >
+            Log Out
+          </Link>
+        </div>
+      </form>
+    </GuestLayout>
+  )
+}

data/stubs/inertia-react-ts/app/javascript/Pages/Dashboard.tsx

@@ -6,20 +6,14 @@ export default function Dashboard({ auth }: PageProps) {
   return (
     <AuthenticatedLayout
       user={auth.user}
-      header={
-        <h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-          Dashboard
-        </h2>
-      }
+      header={<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Dashboard</h2>}
     >
       <Head title="Dashboard" />
 
       <div className="py-12">
         <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
           <div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-            <div className="p-6 text-gray-900 dark:text-gray-100">
-              You're logged in!
-            </div>
+            <div className="p-6 text-gray-900 dark:text-gray-100">You're logged in!</div>
           </div>
         </div>
       </div>

data/stubs/inertia-react-ts/app/javascript/Pages/Profile/Edit.tsx

@@ -9,11 +9,7 @@ export default function Edit({ auth }: PageProps) {
   return (
     <AuthenticatedLayout
       user={auth.user}
-      header={
-        <h2 className="font-semibold text-xl text-gray-800 leading-tight">
-          Profile
-        </h2>
-      }
+      header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Profile</h2>}
     >
       <Head title="Profile" />
 

data/stubs/inertia-react-ts/app/javascript/Pages/Profile/Partials/DeleteUserForm.tsx

@@ -8,11 +8,7 @@ import TextInput from '@/Components/TextInput'
 import { useForm } from '@inertiajs/react'
 import { profile_destroy_path } from '@/routes'
 
-export default function DeleteUserForm({
-  className = '',
-}: {
-  className?: string
-}) {
+export default function DeleteUserForm({ className = '' }: { className?: string }) {
   const [confirmingUserDeletion, setConfirmingUserDeletion] = useState(false)
   const passwordInput = useRef<HTMLInputElement>(null)
 
@@ -54,9 +50,8 @@ export default function DeleteUserForm({
         <h2 className="text-lg font-medium text-gray-900">Delete Account</h2>
 
         <p className="mt-1 text-sm text-gray-600">
-          Once your account is deleted, all of its resources and data will be
-          permanently deleted. Before deleting your account, please download any
-          data or information that you wish to retain.
+          Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your
+          account, please download any data or information that you wish to retain.
         </p>
       </header>
 
@@ -64,22 +59,15 @@ export default function DeleteUserForm({
 
       <Modal show={confirmingUserDeletion} onClose={closeModal}>
         <form onSubmit={deleteUser} className="p-6">
-          <h2 className="text-lg font-medium text-gray-900">
-            Are you sure you want to delete your account?
-          </h2>
+          <h2 className="text-lg font-medium text-gray-900">Are you sure you want to delete your account?</h2>
 
           <p className="mt-1 text-sm text-gray-600">
-            Once your account is deleted, all of its resources and data will be
-            permanently deleted. Please enter your password to confirm you would
-            like to permanently delete your account.
+            Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your
+            password to confirm you would like to permanently delete your account.
           </p>
 
           <div className="mt-6">
-            <InputLabel
-              htmlFor="password"
-              value="Password"
-              className="sr-only"
-            />
+            <InputLabel htmlFor="password" value="Password" className="sr-only" />
 
             <TextInput
               id="password"

data/stubs/inertia-react-ts/app/javascript/Pages/Profile/Partials/UpdatePasswordForm.tsx

@@ -7,20 +7,15 @@ import { useForm } from '@inertiajs/react'
 import { Transition } from '@headlessui/react'
 import { password_update_path } from '@/routes'
 
-export default function UpdatePasswordForm({
-  className = '',
-}: {
-  className?: string
-}) {
+export default function UpdatePasswordForm({ className = '' }: { className?: string }) {
   const passwordInput = useRef<HTMLInputElement>(null)
   const currentPasswordInput = useRef<HTMLInputElement>(null)
 
-  const { data, setData, errors, put, reset, processing, recentlySuccessful } =
-    useForm({
-      current_password: '',
-      password: '',
-      password_confirmation: '',
-    })
+  const { data, setData, errors, put, reset, processing, recentlySuccessful } = useForm({
+    current_password: '',
+    password: '',
+    password_confirmation: '',
+  })
 
   const updatePassword: FormEventHandler = (e) => {
     e.preventDefault()
@@ -86,10 +81,7 @@ export default function UpdatePasswordForm({
         </div>
 
         <div>
-          <InputLabel
-            htmlFor="password_confirmation"
-            value="Confirm Password"
-          />
+          <InputLabel htmlFor="password_confirmation" value="Confirm Password" />
 
           <TextInput
             id="password_confirmation"

data/stubs/inertia-react-ts/app/javascript/Pages/Profile/Partials/UpdateProfileInformationForm.tsx

@@ -8,18 +8,13 @@ import { FormEventHandler } from 'react'
 import { PageProps } from '@/types'
 import { profile_update_path } from '@/routes'
 
-export default function UpdateProfileInformation({
-  className = '',
-}: {
-  className?: string
-}) {
+export default function UpdateProfileInformation({ className = '' }: { className?: string }) {
   const user = usePage<PageProps>().props.auth.user
 
-  const { data, setData, patch, errors, processing, recentlySuccessful } =
-    useForm({
-      name: user.name,
-      email: user.email,
-    })
+  const { data, setData, patch, errors, processing, recentlySuccessful } = useForm({
+    name: user.name,
+    email: user.email,
+  })
 
   const submit: FormEventHandler = (e) => {
     e.preventDefault()
@@ -30,13 +25,9 @@ export default function UpdateProfileInformation({
   return (
     <section className={className}>
       <header>
-        <h2 className="text-lg font-medium text-gray-900">
-          Profile Information
-        </h2>
+        <h2 className="text-lg font-medium text-gray-900">Profile Information</h2>
 
-        <p className="mt-1 text-sm text-gray-600">
-          Update your account's profile information and email address.
-        </p>
+        <p className="mt-1 text-sm text-gray-600">Update your account's profile information and email address.</p>
       </header>
 
       <form onSubmit={submit} className="mt-6 space-y-6">

data/stubs/inertia-react-ts/app/javascript/Pages/Welcome.tsx

@@ -64,8 +64,7 @@ export default function Welcome({
             target="_blank"
             style={{
               transition: 'background 0.25s cubic-bezier(0.33, 1, 0.68, 1)',
-              filter:
-                'drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))',
+              filter: 'drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))',
             }}
           >
             <img

data/stubs/inertia-react-ts/app/javascript/entrypoints/application.tsx

@@ -25,11 +25,7 @@ const appName = import.meta.env.VITE_APP_NAME || 'Rails'
 
 createInertiaApp({
   title: (title) => `${title} - ${appName}`,
-  resolve: (name) =>
-    resolvePageComponent(
-      `../Pages/${name}.tsx`,
-      import.meta.glob('../Pages/**/*.tsx'),
-    ),
+  resolve: (name) => resolvePageComponent(`../Pages/${name}.tsx`, import.meta.glob('../Pages/**/*.tsx')),
   setup({ el, App, props }) {
     const root = createRoot(el)
 

data/stubs/inertia-react-ts/config/tailwind.config.js

@@ -3,12 +3,7 @@ import forms from '@tailwindcss/forms'
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    './public/*.html',
-    './app/helpers/**/*.rb',
-    './app/views/**/*',
-    './app/javascript/**/*.tsx',
-  ],
+  content: ['./public/*.html', './app/helpers/**/*.rb', './app/views/**/*', './app/javascript/**/*.tsx'],
 
   theme: {
     extend: {

data/stubs/inertia-vue-ts/app/javascript/Components/ApplicationLogo.vue

@@ -1,12 +1,7 @@
 <template>
-  <svg viewBox="0 -6 32 32" xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd">
-      <path d="M0-6h32v32H0z" />
-      <path
-        fill="#c00"
-        fill-rule="nonzero"
-        d="M.985 19.636s.422-4.163 3.375-9.087c2.954-4.924 7.99-8.65 12.083-9.017 8.144-.816 15.46 6.485 15.46 6.485s-.24.168-.494.38C23.42 2.49 18.54 5.274 17.005 6.02c-7.033 3.925-4.91 13.616-4.91 13.616H.987zM24.137 2.32c-.45-.182-.9-.35-1.364-.505l.056-.93c.885.254 1.237.423 1.363.493l-.056.943zM22.8 5.304c.45.028.915.084 1.393.183l-.056.872c-.464-.1-.928-.155-1.392-.17l.056-.885zM17.597.913c-.407 0-.815.015-1.223.058l-.268-.83c.465-.056.915-.084 1.35-.084l.282.858h-.14zm.676 5.178c.35-.154.76-.31 1.237-.45l.31.93c-.41.125-.817.294-1.225.49l-.323-.97zm-6.386-3.7c-.366.184-.718.395-1.083.62l-.647-.985c.38-.225.745-.42 1.097-.604l.633.97zm2.883 6.33c.252-.323.548-.646.87-.942l.634.957c-.31.323-.59.647-.83 1L14.77 8.72zm-2.04 4.53c.112-.506.24-1.027.422-1.547l1.012.802c-.14.548-.24 1.097-.295 1.645l-1.14-.9zM6.57 6.57c-.34.35-.662.73-.958 1.11L4.53 6.752c.323-.352.674-.704 1.04-1.055l1 .872zm-4.25 6.286c-.224.52-.52 1.21-.702 1.688L0 13.954c.14-.38.436-1.084.703-1.69l1.618.592zm10.2 3.967l1.518.548c.084.663.21 1.28.337 1.83l-1.688-.605c-.07-.422-.14-1.027-.168-1.772z"
-      />
-    </g>
+  <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m 237.03985,281.43515 c -1.54085,-2.49315 -1.43016,-32.97159 0.24592,-67.72985 3.02813,-62.79557 2.98467,-63.24086 -6.84044,-70.12264 -5.43834,-3.80913 -16.32202,-6.92574 -24.18594,-6.92574 -22.00734,0 -30.84257,-6.63121 -30.84257,-23.14872 0,-18.460367 5.31742,-22.209117 35.7331,-25.191397 27.97004,-2.74248 30.5663,-4.04226 26.94175,-13.48771 -2.14986,-5.6024 -13.90805,-6.59952 -77.8227,-6.59952 -69.400535,0 -75.177944,-0.58548 -73.8551,-7.48424 1.284851,-6.700534 9.490461,-7.708169 78.36353,-9.622595 42.31063,-1.176095 74.04161,-3.44104 70.51333,-5.033217 -11.28272,-5.091508 -103.7232,-12.917843 -134.65799,-11.40068 l -29.878628,1.465415 -3.171696,17.106837 c -1.744436,9.40876 -4.948521,63.009007 -7.120182,119.111597 -2.277699,58.84196 -5.815243,103.87156 -8.360116,106.41647 -2.4264,2.42639 -7.676475,3.15877 -11.666833,1.62754 -5.877786,-2.25554 -6.747202,-6.22009 -4.579445,-20.88223 1.471667,-9.954 3.74014,-63.32438 5.041047,-118.60085 2.647925,-112.511911 3.2489,-117.857541 13.890324,-123.552663 4.513472,-2.415528 45.033525,-3.067128 100.341569,-1.613517 109.0299,2.86548 110.09891,3.263428 110.09891,40.985371 0,30.923222 -7.28516,39.906492 -35.24013,43.454229 -29.06687,3.68892 -37.46391,6.17185 -37.46391,11.07783 0,2.19365 11.40965,3.98851 25.35478,3.98851 37.65833,0 38.79584,2.06051 38.79584,70.27428 0,31.25825 -1.20855,65.65073 -2.68573,76.42778 -2.59506,18.93304 -11.18137,28.79145 -16.94872,19.45971 z M 102.84208,259.48743 c -5.809371,-2.9396 -13.184926,-10.12819 -16.390123,-15.97462 -8.396565,-15.3158 2.912296,-41.49358 19.494463,-45.12587 20.60401,-4.51326 22.42665,-5.69589 22.42665,-14.55198 0,-6.8018 -2.78507,-8.68766 -12.83013,-8.68766 -16.253558,0 -29.936969,-13.44405 -29.936969,-29.41328 0,-14.42513 5.553783,-19.82093 24.591079,-23.89154 9.82484,-2.1008 13.8993,-5.37975 13.8993,-11.1856 0,-6.50902 -3.05408,-8.21363 -14.71608,-8.21363 -16.019022,0 -24.105594,-7.285117 -14.699611,-13.242787 3.241585,-2.05321 12.812471,-3.76252 21.268621,-3.79858 19.92576,-0.0847 30.60952,11.25947 28.76224,30.540617 -1.22046,12.73879 -3.23695,14.76612 -18.47681,18.57607 -30.922304,7.73057 -36.377959,19.24518 -9.11843,19.24518 22.57064,0 29.1179,7.65172 27.56665,32.21701 l -1.34139,21.24186 -20.81946,5.13821 c -11.45071,2.826 -21.79219,6.1109 -22.981063,7.29978 -4.590664,4.59067 3.475793,15.68791 14.430943,19.85304 16.19851,6.15868 88.0503,3.43548 90.32313,-3.42324 1.28741,-3.88501 -5.33813,-5.34589 -24.24513,-5.34589 -19.38669,0 -26.01664,-1.51819 -26.01664,-5.9575 0,-8.34429 9.63998,-11.14934 38.3165,-11.14934 28.67934,0 35.63045,5.45011 33.61018,26.35253 -0.96086,9.94142 -4.50427,15.66293 -12.05276,19.46151 -14.27136,7.1817 -96.89032,7.20826 -111.06516,0.0342 z m 57.07409,-60.66299 c -4.41463,-11.5043 3.01548,-16.23905 21.50632,-13.70463 20.26375,2.77747 30.64103,-1.74032 26.8271,-11.67922 -1.8078,-4.7111 -8.00515,-6.84671 -19.86838,-6.84671 -19.48707,0 -22.72529,-6.68 -6.27087,-12.93598 25.01034,-9.50892 44.62703,0.19588 44.62703,22.07791 0,17.75258 -8.58709,23.84253 -37.57444,26.6478 -21.20481,2.05209 -27.38199,1.30033 -29.24676,-3.55917 z"
+    />
   </svg>
 </template>

data/stubs/inertia-vue-ts/app/javascript/Components/Dropdown.vue

@@ -66,10 +66,7 @@ const open = ref(false)
         style="display: none"
         @click="open = false"
       >
-        <div
-          class="rounded-md ring-1 ring-black ring-opacity-5"
-          :class="contentClasses"
-        >
+        <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
           <slot name="content" />
         </div>
       </div>

data/stubs/inertia-vue-ts/app/javascript/Components/Modal.vue

@@ -60,11 +60,7 @@ const maxWidthClass = computed(() => {
 <template>
   <Teleport to="body">
     <Transition leave-active-class="duration-200">
-      <div
-        v-show="show"
-        class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
-        scroll-region
-      >
+      <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
         <Transition
           enter-active-class="ease-out duration-300"
           enter-from-class="opacity-0"
@@ -73,14 +69,8 @@ const maxWidthClass = computed(() => {
           leave-from-class="opacity-100"
           leave-to-class="opacity-0"
         >
-          <div
-            v-show="show"
-            class="fixed inset-0 transform transition-all"
-            @click="close"
-          >
-            <div
-              class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"
-            />
+          <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
+            <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75" />
           </div>
         </Transition>