format all the things

.prettierrc

@@ -3,4 +3,4 @@
   "useTabs": false,
   "jsxSingleQuote": false,
   "singleQuote": false
-}
+}

lib/catalyst/alert.jsx

@@ -5,24 +5,31 @@ import {
   DialogTitle as HeadlessDialogTitle,
   Transition as HeadlessTransition,
   TransitionChild as HeadlessTransitionChild,
-} from '@headlessui/react'
-import clsx from 'clsx'
-import { Fragment } from 'react'
-import { Text } from './text'
+} from "@headlessui/react";
+import clsx from "clsx";
+import { Fragment } from "react";
+import { Text } from "./text";
 
 const sizes = {
-  xs: 'sm:max-w-xs',
-  sm: 'sm:max-w-sm',
-  md: 'sm:max-w-md',
-  lg: 'sm:max-w-lg',
-  xl: 'sm:max-w-xl',
-  '2xl': 'sm:max-w-2xl',
-  '3xl': 'sm:max-w-3xl',
-  '4xl': 'sm:max-w-4xl',
-  '5xl': 'sm:max-w-5xl',
-}
+  xs: "sm:max-w-xs",
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg",
+  xl: "sm:max-w-xl",
+  "2xl": "sm:max-w-2xl",
+  "3xl": "sm:max-w-3xl",
+  "4xl": "sm:max-w-4xl",
+  "5xl": "sm:max-w-5xl",
+};
 
-export function Alert({ open, onClose, size = 'md', className, children, ...props }) {
+export function Alert({
+  open,
+  onClose,
+  size = "md",
+  className,
+  children,
+  ...props
+}) {
   return (
     <HeadlessTransition appear as={Fragment} show={open} {...props}>
       <HeadlessDialog onClose={onClose}>
@@ -53,7 +60,7 @@ export function Alert({ open, onClose, size = 'md', className, children, ...prop
               className={clsx(
                 className,
                 sizes[size],
-                'row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 sm:rounded-2xl sm:p-6 dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline'
+                "row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 sm:rounded-2xl sm:p-6 dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline",
               )}
               enter="ease-out duration-100"
               enterFrom="scale-95"
@@ -68,7 +75,7 @@ export function Alert({ open, onClose, size = 'md', className, children, ...prop
         </HeadlessTransitionChild>
       </HeadlessDialog>
     </HeadlessTransition>
-  )
+  );
 }
 
 export function AlertTitle({ className, ...props }) {
@@ -77,24 +84,24 @@ export function AlertTitle({ className, ...props }) {
       {...props}
       className={clsx(
         className,
-        'text-balance text-center text-base/6 font-semibold text-zinc-950 sm:text-wrap sm:text-left sm:text-sm/6 dark:text-white'
+        "text-balance text-center text-base/6 font-semibold text-zinc-950 sm:text-wrap sm:text-left sm:text-sm/6 dark:text-white",
       )}
     />
-  )
+  );
 }
 
 export function AlertDescription({ className, ...props }) {
   return (
     <HeadlessDescription
       as={Text}
       {...props}
-      className={clsx(className, 'mt-2 text-pretty text-center sm:text-left')}
+      className={clsx(className, "mt-2 text-pretty text-center sm:text-left")}
     />
-  )
+  );
 }
 
 export function AlertBody({ className, ...props }) {
-  return <div {...props} className={clsx(className, 'mt-4')} />
+  return <div {...props} className={clsx(className, "mt-4")} />;
 }
 
 export function AlertActions({ className, ...props }) {
@@ -103,8 +110,8 @@ export function AlertActions({ className, ...props }) {
       {...props}
       className={clsx(
         className,
-        'mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto'
+        "mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto",
       )}
     />
-  )
+  );
 }

lib/catalyst/avatar.jsx

@@ -1,54 +1,73 @@
-import { Button as HeadlessButton } from '@headlessui/react'
-import clsx from 'clsx'
-import React from 'react'
-import { TouchTarget } from './button'
-import { Link } from './link'
+import { Button as HeadlessButton } from "@headlessui/react";
+import clsx from "clsx";
+import React from "react";
+import { TouchTarget } from "./button";
+import { Link } from "./link";
 
-export function Avatar({ src = null, square = false, initials, alt = '', className, ...props }) {
+export function Avatar({
+  src = null,
+  square = false,
+  initials,
+  alt = "",
+  className,
+  ...props
+}) {
   return (
     <span
       data-slot="avatar"
       className={clsx(
         className,
 
         // Basic layout
-        'inline-grid align-middle *:col-start-1 *:row-start-1',
+        "inline-grid align-middle *:col-start-1 *:row-start-1",
 
         // Add the correct border radius
-        square ? 'rounded-[20%] *:rounded-[20%]' : 'rounded-full *:rounded-full'
+        square
+          ? "rounded-[20%] *:rounded-[20%]"
+          : "rounded-full *:rounded-full",
       )}
       {...props}
     >
       {initials && (
         <svg
           className="gw-select-none gw-fill-current gw-text-[48px] gw-font-medium gw-uppercase"
           viewBox="0 0 100 100"
-          aria-hidden={alt ? undefined : 'true'}
+          aria-hidden={alt ? undefined : "true"}
         >
           {alt && <title>{alt}</title>}
-          <text x="50%" y="50%" alignmentBaseline="middle" dominantBaseline="middle" textAnchor="middle" dy=".125em">
+          <text
+            x="50%"
+            y="50%"
+            alignmentBaseline="middle"
+            dominantBaseline="middle"
+            textAnchor="middle"
+            dy=".125em"
+          >
             {initials}
           </text>
         </svg>
       )}
       {src && <img aria-label={alt} src={src} alt={alt} />}
       {/* Add an inset border that sits on top of the image */}
-      <span className="gw-ring-1 gw-ring-inset gw-ring-black/5 gw-dark:gw-ring-white/5 gw-forced-colors:gw-outline" gw-aria-hidden="gw-true" />
+      <span
+        className="gw-ring-1 gw-ring-inset gw-ring-black/5 gw-dark:gw-ring-white/5 gw-forced-colors:gw-outline"
+        gw-aria-hidden="gw-true"
+      />
     </span>
-  )
+  );
 }
 
 export const AvatarButton = React.forwardRef(function AvatarButton(
   { src, square = false, initials, alt, className, ...props },
-  ref
+  ref,
 ) {
   let classes = clsx(
     className,
-    square ? 'rounded-lg' : 'rounded-full',
-    'relative focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500'
-  )
+    square ? "rounded-lg" : "rounded-full",
+    "relative focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500",
+  );
 
-  return 'href' in props ? (
+  return "href" in props ? (
     <Link {...props} className={classes} ref={ref}>
       <TouchTarget>
         <Avatar src={src} square={square} initials={initials} alt={alt} />
@@ -60,5 +79,5 @@ export const AvatarButton = React.forwardRef(function AvatarButton(
         <Avatar src={src} square={square} initials={initials} alt={alt} />
       </TouchTarget>
     </HeadlessButton>
-  )
-})
+  );
+});