@atproto/oauth-provider-ui 0.0.2 → 0.1.0

package/src/views/authorize/sign-in/sign-in-form.tsx

@@ -135,7 +135,7 @@ export function SignInForm({
       submitLabel={secondFactor ? t`Confirm` : t`Sign in`}
       onSubmit={doSubmit}
     >
-      <Fieldset disabled={loading} label={<Trans>Account</Trans>}>
+      <Fieldset disabled={loading} label={<Trans>Identifier</Trans>}>
         <InputText
           icon={<AtSymbolIcon className="w-5" />}
           name="username"
@@ -159,33 +159,37 @@ export function SignInForm({
         />
       </Fieldset>
 
-      <InputPassword
-        name="password"
-        onChange={(event) => {
-          resetState()
-          setPassword(event.target.value)
-        }}
-        append={
-          onForgotPassword && (
-            <Button
-              className="text-sm"
-              type="button"
-              onClick={() => {
-                onForgotPassword(username?.includes('@') ? username : undefined)
-              }}
-              aria-label={t`Reset your password`}
-            >
-              <Trans>Forgot?</Trans>
-            </Button>
-          )
-        }
-        enterKeyHint={secondFactor ? 'next' : 'done'}
-        disabled={loading}
-        required
-      />
+      <Fieldset disabled={loading} label={<Trans>Password</Trans>}>
+        <InputPassword
+          name="password"
+          onChange={(event) => {
+            resetState()
+            setPassword(event.target.value)
+          }}
+          append={
+            onForgotPassword && (
+              <Button
+                className="text-sm"
+                type="button"
+                onClick={() => {
+                  onForgotPassword(
+                    username?.includes('@') ? username : undefined,
+                  )
+                }}
+                aria-label={t`Reset your password`}
+              >
+                <Trans>Forgot?</Trans>
+              </Button>
+            )
+          }
+          enterKeyHint={secondFactor ? 'next' : 'done'}
+          disabled={loading}
+          required
+        />
+      </Fieldset>
 
       <Admonition role="status">
-        <p className="font-bold text-md text-brand pb-1">
+        <p className="text-md text-primary pb-1 font-bold">
           <Trans>Warning</Trans>
         </p>
         <p className="text-sm">
@@ -196,21 +200,15 @@ export function SignInForm({
         </p>
       </Admonition>
 
-      <Fieldset
-        key="remember"
-        disabled={loading}
-        label={<Trans>Session</Trans>}
+      <InputCheckbox
+        name="remember"
+        title={t`Remember this account on this device`}
+        enterKeyHint={secondFactor ? 'next' : 'done'}
+        checked={remember}
+        onChange={(event) => setRemember(event.target.checked)}
       >
-        <InputCheckbox
-          name="remember"
-          title={t`Remember this account on this device`}
-          enterKeyHint={secondFactor ? 'next' : 'done'}
-          checked={remember}
-          onChange={(event) => setRemember(event.target.checked)}
-        >
-          <Trans>Remember this account on this device</Trans>
-        </InputCheckbox>
-      </Fieldset>
+        <Trans>Remember this account on this device</Trans>
+      </InputCheckbox>
 
       {secondFactor && (
         <Fieldset
@@ -228,7 +226,7 @@ export function SignInForm({
               onToken={setOtp}
             />
 
-            <p className="text-slate-600 dark:text-slate-400 text-sm">
+            <p className="text-sm text-slate-600 dark:text-slate-400">
               <Trans>
                 Check your {secondFactor.hint} email for a login code and enter
                 it here.

package/src/views/authorize/sign-in/sign-in-picker.tsx

@@ -49,7 +49,7 @@ export function SignInPicker({
         )
       }
     >
-      <p className="text-slate-600 dark:text-slate-400 text-sm font-medium">
+      <p className="text-sm font-medium text-slate-600 dark:text-slate-400">
         <Trans>Sign in as...</Trans>
       </p>
 
@@ -77,12 +77,12 @@ export function SignInPicker({
             append={<CaretRightIcon aria-hidden className="h-4" />}
           >
             <span className="flex flex-wrap items-center">
-              <span className="font-medium truncate mr-2" arial-label={t`Name`}>
+              <span className="mr-2 truncate font-medium" arial-label={t`Name`}>
                 {name}
               </span>
               {identifier && (
                 <span
-                  className="text-sm text-neutral-500 dark:text-neutral-400 truncate"
+                  className="truncate text-sm text-neutral-500 dark:text-neutral-400"
                   arial-label={t`Identifier`}
                 >
                   {identifier}

package/src/views/authorize/sign-up/sign-up-disclaimer.tsx

@@ -1,8 +1,8 @@
 import { Trans } from '@lingui/react/macro'
+import { clsx } from 'clsx'
 import { JSX } from 'react'
 import type { LinkDefinition } from '@atproto/oauth-provider-api'
 import { LinkAnchor } from '../../../components/utils/link-anchor.tsx'
-import { clsx } from '../../../lib/clsx.ts'
 import { Override } from '../../../lib/util.ts'
 
 export type SignUpDisclaimerProps = Override<
@@ -30,7 +30,7 @@ export function SignUpDisclaimer({
       <Trans>
         By creating an account you agree to the{' '}
         {tosLink ? (
-          <LinkAnchor className="text-brand underline" link={tosLink}>
+          <LinkAnchor className="text-primary underline" link={tosLink}>
             <Trans>Terms of Service</Trans>
           </LinkAnchor>
         ) : (
@@ -38,7 +38,7 @@ export function SignUpDisclaimer({
         )}
         {' and the '}
         {ppLink ? (
-          <LinkAnchor className="text-brand underline" link={ppLink}>
+          <LinkAnchor className="text-primary underline" link={ppLink}>
             <Trans>Privacy Policy</Trans>
           </LinkAnchor>
         ) : (

package/src/views/authorize/sign-up/sign-up-handle-form.tsx

@@ -1,4 +1,5 @@
 import { Trans, useLingui } from '@lingui/react/macro'
+import { clsx } from 'clsx'
 import { JSX, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import {
   AsyncActionController,
@@ -12,7 +13,6 @@ import {
   CheckMarkIcon,
   XMarkIcon,
 } from '../../../components/utils/icons.tsx'
-import { clsx } from '../../../lib/clsx.ts'
 import { mergeRefs } from '../../../lib/ref.ts'
 import { Override } from '../../../lib/util.ts'
 
@@ -223,7 +223,7 @@ export function SignUpHandleForm({
             ) : (
               <span
                 aria-hidden
-                className="bg-gray-300 dark:bg-slate-600 rounded-md p-2 w-24"
+                className="w-24 rounded-md bg-gray-300 p-2 dark:bg-slate-600"
               />
             )}
           </Trans>
@@ -266,19 +266,19 @@ function ValidationMessage({
         <>
           {valid ? (
             <CheckMarkIcon
-              className="inline-block w-4 h-4 text-success"
+              className="text-success inline-block h-4 w-4"
               title={t`Valid`}
             />
           ) : (
             <XMarkIcon
-              className="inline-block w-4 h-4 text-error"
+              className="text-error inline-block h-4 w-4"
               title={t`Invalid`}
             />
           )}
         </>
       ) : (
-        <div aria-hidden className="w-4 h-4 flex items-center justify-center">
-          <div className="bg-gray-300 dark:bg-slate-600 rounded-full w-2 h-2" />
+        <div aria-hidden className="flex h-4 w-4 items-center justify-center">
+          <div className="h-2 w-2 rounded-full bg-gray-300 dark:bg-slate-600" />
         </div>
       )}
       <div className="text-sm">{children}</div>

package/src/views/authorize/sign-up/sign-up-view.tsx

@@ -94,7 +94,7 @@ export function SignUpView({
             titleRender: () => <Trans>Choose a username</Trans>,
             contentRender: ({ prev, prevLabel, next, nextLabel, invalid }) => (
               <SignUpHandleForm
-                className="flex-grow"
+                className="grow"
                 invalid={invalid}
                 domains={availableUserDomains}
                 handle={handle}
@@ -116,7 +116,7 @@ export function SignUpView({
             titleRender: () => <Trans>Your account</Trans>,
             contentRender: ({ prev, prevLabel, next, nextLabel, invalid }) => (
               <SignUpAccountForm
-                className="flex-grow"
+                className="grow"
                 invalid={invalid}
                 prevLabel={prevLabel}
                 onPrev={prev}
@@ -135,7 +135,7 @@ export function SignUpView({
             titleRender: () => <Trans>Verify you are human</Trans>,
             contentRender: ({ prev, prevLabel, next, nextLabel, invalid }) => (
               <SignUpHcaptchaForm
-                className="flex-grow"
+                className="grow"
                 invalid={invalid}
                 siteKey={hcaptchaSiteKey}
                 token={hcaptcha}

package/src/views/authorize/welcome/welcome-view.tsx

@@ -28,8 +28,8 @@ export function WelcomeView({
     <LayoutWelcome {...props} title={props.title ?? t`Authenticate`}>
       {onSignUp && (
         <Button
-          className={'m-1 w-60 max-w-full min-w-min'}
-          color={onSignIn ? 'brand' : undefined}
+          className={'m-1 w-60 min-w-min max-w-full'}
+          color={onSignIn ? 'primary' : undefined}
           onClick={onSignUp}
         >
           <Trans>Create a new account</Trans>
@@ -38,8 +38,8 @@ export function WelcomeView({
 
       {onSignIn && (
         <Button
-          className={'m-1 w-60 max-w-full min-w-min'}
-          color={onSignUp ? undefined : 'brand'}
+          className={'m-1 w-60 min-w-min max-w-full'}
+          color={onSignUp ? undefined : 'primary'}
           onClick={onSignIn}
         >
           <Trans>Sign in</Trans>
@@ -47,7 +47,7 @@ export function WelcomeView({
       )}
 
       {onCancel && (
-        <Button className="m-1 w-60 max-w-full min-w-min" onClick={onCancel}>
+        <Button className="m-1 w-60 min-w-min max-w-full" onClick={onCancel}>
           <Trans>Cancel</Trans>
         </Button>
       )}

package/tsconfig.json

@@ -1,8 +1,7 @@
 {
   "include": [],
   "references": [
-    { "path": "./tsconfig.backend.json" },
-    { "path": "./tsconfig.frontend.json" },
+    { "path": "./tsconfig.src.json" },
     { "path": "./tsconfig.tools.json" }
   ]
 }

package/{tsconfig.frontend.json → tsconfig.src.json}

@@ -4,7 +4,10 @@
     "../../../tsconfig/bundler.json"
   ],
   "compilerOptions": {
-    "rootDir": "src"
+    "rootDir": "src",
+    "paths": {
+      "#/*": ["./src/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"]
 }

package/tsconfig.src.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/hydration-data.d.ts","./src/hooks/use-api.ts","./src/hooks/use-async-action.ts","./src/hooks/use-bound-dispatch.ts","./src/hooks/use-browser-color-scheme.ts","./src/hooks/use-random-string.ts","./src/hooks/use-stepper.ts","./src/lib/api.ts","./src/lib/cookies.ts","./src/lib/json-client.ts","./src/lib/password.ts","./src/lib/ref.ts","./src/lib/util.ts","./src/locales/load.ts","./src/locales/locales.ts","./src/locales/an/messages.ts","./src/locales/ast/messages.ts","./src/locales/ca/messages.ts","./src/locales/da/messages.ts","./src/locales/de/messages.ts","./src/locales/el/messages.ts","./src/locales/en/messages.ts","./src/locales/en-GB/messages.ts","./src/locales/es/messages.ts","./src/locales/eu/messages.ts","./src/locales/fi/messages.ts","./src/locales/fr/messages.ts","./src/locales/ga/messages.ts","./src/locales/gl/messages.ts","./src/locales/hi/messages.ts","./src/locales/hu/messages.ts","./src/locales/ia/messages.ts","./src/locales/id/messages.ts","./src/locales/it/messages.ts","./src/locales/ja/messages.ts","./src/locales/km/messages.ts","./src/locales/ko/messages.ts","./src/locales/ne/messages.ts","./src/locales/nl/messages.ts","./src/locales/pl/messages.ts","./src/locales/pt-BR/messages.ts","./src/locales/ro/messages.ts","./src/locales/ru/messages.ts","./src/locales/sv/messages.ts","./src/locales/th/messages.ts","./src/locales/tr/messages.ts","./src/locales/uk/messages.ts","./src/locales/vi/messages.ts","./src/locales/zh-CN/messages.ts","./src/locales/zh-HK/messages.ts","./src/locales/zh-TW/messages.ts","./src/authorization-page.tsx","./src/error-page.tsx","./src/components/forms/button-toggle-visibility.tsx","./src/components/forms/button.tsx","./src/components/forms/fieldset.tsx","./src/components/forms/form-card-async.tsx","./src/components/forms/form-card.tsx","./src/components/forms/input-checkbox.tsx","./src/components/forms/input-container.tsx","./src/components/forms/input-email-address.tsx","./src/components/forms/input-new-password.tsx","./src/components/forms/input-password.tsx","./src/components/forms/input-text.tsx","./src/components/forms/input-token.tsx","./src/components/forms/wizard-card.tsx","./src/components/layouts/layout-title-page.tsx","./src/components/layouts/layout-welcome.tsx","./src/components/utils/account-identifier.tsx","./src/components/utils/account-image.tsx","./src/components/utils/admonition.tsx","./src/components/utils/client-name.tsx","./src/components/utils/error-card.tsx","./src/components/utils/error-message.tsx","./src/components/utils/help-card.tsx","./src/components/utils/icons.tsx","./src/components/utils/link-anchor.tsx","./src/components/utils/link-title.tsx","./src/components/utils/multi-lang-string.tsx","./src/components/utils/password-strength-label.tsx","./src/components/utils/password-strength-meter.tsx","./src/components/utils/url-viewer.tsx","./src/locales/locale-provider.tsx","./src/locales/locale-selector.tsx","./src/views/authorize/authorize-view.tsx","./src/views/authorize/accept/accept-form.tsx","./src/views/authorize/accept/accept-view.tsx","./src/views/authorize/reset-password/reset-password-confirm-form.tsx","./src/views/authorize/reset-password/reset-password-request-form.tsx","./src/views/authorize/reset-password/reset-password-view.tsx","./src/views/authorize/sign-in/sign-in-form.tsx","./src/views/authorize/sign-in/sign-in-picker.tsx","./src/views/authorize/sign-in/sign-in-view.tsx","./src/views/authorize/sign-up/sign-up-account-form.tsx","./src/views/authorize/sign-up/sign-up-disclaimer.tsx","./src/views/authorize/sign-up/sign-up-handle-form.tsx","./src/views/authorize/sign-up/sign-up-hcaptcha-form.tsx","./src/views/authorize/sign-up/sign-up-view.tsx","./src/views/authorize/welcome/welcome-view.tsx","./src/views/error/error-view.tsx"],"version":"5.8.2"}

package/tsconfig.tools.json

@@ -4,5 +4,5 @@
     "rootDir": ".",
     "noEmit": true
   },
-  "include": ["./*.js", "./*.cjs", "./*.mjs", "./*.ts"]
+  "include": ["./*.js", "./*.cjs", "./*.mjs", "./*.ts", "./*.cts", "./*.mts"]
 }

package/tsconfig.tools.tsbuildinfo

@@ -1 +1 @@
-{"root":["./rollup.config.js","./tailwind.config.js","./vite.config.mjs"],"version":"5.6.3"}
+{"root":["./vite.config.mjs"],"version":"5.8.2"}

package/vite.config.mjs

@@ -1,16 +1,47 @@
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { lingui } from '@lingui/vite-plugin'
+import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite'
+import { bundleManifest } from '@atproto-labs/rollup-plugin-bundle-manifest'
 
-/**
- * @see {@link https://vitejs.dev/config/}
- * @type {import('vite').UserConfig}
- */
-export default {
-  root: './src',
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '#': resolve(__dirname, './src'),
+    },
+  },
   plugins: [
     react({
       plugins: [['@lingui/swc-plugin', {}]],
     }),
     lingui(),
+    tailwindcss(),
   ],
-}
+  build: {
+    emptyOutDir: false,
+    outDir: './dist',
+    sourcemap: true,
+    rollupOptions: {
+      input: ['./src/authorization-page.tsx', './src/error-page.tsx'],
+      output: {
+        manualChunks: undefined,
+        format: 'module',
+        entryFileNames: '[name]-[hash].js',
+        chunkFileNames: '[name]-[hash].js',
+        assetFileNames: '[name]-[hash][extname]',
+      },
+      plugins: [bundleManifest()],
+    },
+    commonjsOptions: {
+      include: [/node_modules/, /oauth-provider-api/],
+    },
+  },
+  optimizeDeps: {
+    // Needed because this is a monorepo and it exposes CommonJS
+    include: ['@atproto/oauth-provider-api'],
+  },
+})

package/dist/assets/COdVzed-.css

@@ -1,3 +0,0 @@
-/*
-! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
-*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:Monaco,mono;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}:root{--color-brand:255 115 179;--color-brand-c:0 0 0;--color-error:218 44 67;--color-error-c:255 255 255;--color-warning:255 201 73;--color-warning-c:0 0 0;--color-success:0 191 165;--color-success-c:255 255 255}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.static{position:static}.relative{position:relative}.m-1{margin:.25rem}.m-2{margin:.5rem}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-4{margin-left:1rem;margin-right:1rem}.my-5{margin-bottom:1.25rem;margin-top:1.25rem}.-mb-1{margin-bottom:-.25rem}.-ml-1{margin-left:-.25rem}.mb-1{margin-bottom:.25rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.mr-2{margin-right:.5rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-1{height:.25rem}.h-16{height:4rem}.h-2{height:.5rem}.h-4{height:1rem}.h-6{height:1.5rem}.min-h-12{min-height:3rem}.min-h-screen{min-height:100vh}.w-1\/4{width:25%}.w-16{width:4rem}.w-2{width:.5rem}.w-24{width:6rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-60{width:15rem}.w-full{width:100%}.min-w-max{min-width:-moz-max-content;min-width:max-content}.min-w-min{min-width:-moz-min-content;min-width:min-content}.max-w-full{max-width:100%}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.grow-0{flex-grow:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.touch-manipulation{touch-action:manipulation}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-\[auto\2c 1fr\]{grid-template-columns:auto 1fr}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-stretch{justify-content:stretch}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.space-x-reverse>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}.overflow-hidden,.truncate{overflow:hidden}.truncate{white-space:nowrap}.text-ellipsis,.truncate{text-overflow:ellipsis}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-bl-none{border-bottom-left-radius:0}.rounded-br-none{border-bottom-right-radius:0}.border{border-width:1px}.border-2{border-width:2px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-brand{--tw-border-opacity:1;border-color:rgb(var(--color-brand)/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-transparent{border-color:transparent}.border-t-slate-200{--tw-border-opacity:1;border-top-color:rgb(226 232 240/var(--tw-border-opacity))}.bg-brand{--tw-bg-opacity:1;background-color:rgb(var(--color-brand)/var(--tw-bg-opacity))}.bg-error{--tw-bg-opacity:1;background-color:rgb(var(--color-error)/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-success{--tw-bg-opacity:1;background-color:rgb(var(--color-success)/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-warning{--tw-bg-opacity:1;background-color:rgb(var(--color-warning)/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-clip-padding{background-clip:padding-box}.fill-current{fill:currentColor}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.lowercase{text-transform:lowercase}.italic{font-style:italic}.leading-\[1\.6\]{line-height:1.6}.tracking-wide{letter-spacing:.025em}.text-brand{--tw-text-opacity:1;color:rgb(var(--color-brand)/var(--tw-text-opacity))}.text-brand-c{--tw-text-opacity:1;color:rgb(var(--color-brand-c)/var(--tw-text-opacity))}.text-error{--tw-text-opacity:1;color:rgb(var(--color-error)/var(--tw-text-opacity))}.text-error-c{--tw-text-opacity:1;color:rgb(var(--color-error-c)/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-inherit{color:inherit}.text-neutral-500{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity))}.text-success{--tw-text-opacity:1;color:rgb(var(--color-success)/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.accent-brand{accent-color:rgb(var(--color-brand)/1)}.accent-slate-100{accent-color:#f1f5f9}.opacity-50{opacity:.5}.outline-none{outline:2px solid transparent;outline-offset:2px}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:border-gray-400:hover{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.hover\:underline:hover{text-decoration-line:underline}.focus\:border-brand:focus{--tw-border-opacity:1;border-color:rgb(var(--color-brand)/var(--tw-border-opacity))}.focus\:bg-slate-200:focus{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.hover\:focus\:border-gray-400:focus:hover{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.disabled\:opacity-50:disabled{opacity:.5}.has-\[\:focus\]\:border-brand:has(:focus){--tw-border-opacity:1;border-color:rgb(var(--color-brand)/var(--tw-border-opacity))}.has-\[\:focus\]\:bg-slate-200:has(:focus){--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}@media (min-width:768px){.md\:m-2{margin:.5rem}.md\:m-4{margin:1rem}.md\:my-4{margin-bottom:1rem;margin-top:1rem}.md\:mb-8{margin-bottom:2rem}.md\:block{display:block}.md\:flex{display:flex}.md\:h-24{height:6rem}.md\:w-1\/2{width:50%}.md\:w-24{width:6rem}.md\:max-w-3xl{max-width:48rem}.md\:max-w-lg{max-width:32rem}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:items-center{align-items:center}.md\:justify-stretch{justify-content:stretch}.md\:justify-items-end{justify-items:end}.md\:self-stretch{align-self:stretch}.md\:bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.md\:p-4{padding:1rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:text-right{text-align:right}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:1024px){.lg\:text-5xl{font-size:3rem;line-height:1}}@media (prefers-color-scheme:dark){.dark\:border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity))}.dark\:border-t-slate-700{--tw-border-opacity:1;border-top-color:rgb(51 65 85/var(--tw-border-opacity))}.dark\:bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.dark\:bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139/var(--tw-bg-opacity))}.dark\:bg-slate-600{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity))}.dark\:bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity))}.dark\:bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}.dark\:bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.dark\:text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}.dark\:text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.dark\:text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}.dark\:text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity))}.dark\:text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity))}.dark\:text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.dark\:text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.dark\:placeholder-gray-500::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity))}.dark\:placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity))}.dark\:hover\:border-gray-500:hover{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}.dark\:hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.dark\:focus\:bg-slate-700:focus{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity))}.dark\:hover\:focus\:border-gray-500:focus:hover{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}.dark\:has-\[\:focus\]\:bg-slate-700:has(:focus){--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity))}}@media (min-width:768px){@media (prefers-color-scheme:dark){.md\:dark\:border-r{border-right-width:1px}.md\:dark\:border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity))}.md\:dark\:bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}}}