@indietabletop/appkit 6.1.5 → 7.0.0-0

package/dist/account/LoginCard.stories.d.ts

@@ -0,0 +1,217 @@
+/**
+ * The majority case where no user is stored locally, proactive user session
+ * check returns 401, and subsequently correct credentials are provided.
+ */
+export declare const Default: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        description: import('react').ReactNode;
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+        onLogin?: import('./types.ts').AuthEventHandler | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+                createNewSession: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * Similar to the default case, but invalid credentials are provided to when
+ * attempting to create a new session.
+ */
+export declare const InvalidCredentialsOnSubmit: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        description: import('react').ReactNode;
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+        onLogin?: import('./types.ts').AuthEventHandler | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+                createNewSession: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * Similar to the default case, but when credentials are provided, an account
+ * email is used that is not currently in the database.
+ */
+export declare const UserNotFoundOnSubmit: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        description: import('react').ReactNode;
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+        onLogin?: import('./types.ts').AuthEventHandler | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+                createNewSession: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * Similar to the default case, but the session creation call returns an error
+ * that doesn't have a specific meaning in the context of the login page.
+ */
+export declare const UnknownFailureOnSubmit: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        description: import('react').ReactNode;
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+        onLogin?: import('./types.ts').AuthEventHandler | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+                createNewSession: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * A case when user is stored locally, but their server session has expired.
+ */
+export declare const ReauthenticateSession: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        description: import('react').ReactNode;
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+        onLogin?: import('./types.ts').AuthEventHandler | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+                createNewSession: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * The user is already stored in the app, and proactive user-session check
+ * returns the same user (based on ID).
+ *
+ * The user is directed to app without any further steps.
+ */
+export declare const AlreadyLoggedIn: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        description: import('react').ReactNode;
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+        onLogin?: import('./types.ts').AuthEventHandler | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * A user is provided, and proactive user session check returns a different
+ * user. This can happen when different users log into separate apps with
+ * different credentials.
+ */
+export declare const UserMismatch: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        description: import('react').ReactNode;
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+        onLogin?: import('./types.ts').AuthEventHandler | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * During the proactive user session check, the user is reportd as not found.
+ * This means that the tokens are still valid, but the user DB entity is gone.
+ * This can happen if a user closed their account.
+ */
+export declare const UserNotFound: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        description: import('react').ReactNode;
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+        onLogin?: import('./types.ts').AuthEventHandler | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * The proactive user session check has failed due to connection issues.
+ */
+export declare const NoConnection: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        description: import('react').ReactNode;
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+        onLogin?: import('./types.ts').AuthEventHandler | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * The proactive user session check has failed due to an error that doesn't
+ * carry any special meaning.
+ */
+export declare const UnknownFailure: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        description: import('react').ReactNode;
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+        onLogin?: import('./types.ts').AuthEventHandler | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;

package/dist/account/LoginView.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { CurrentUser } from '../types.ts';
+import { AuthEventHandler, DefaultFormValues } from './types.ts';
+export declare function LoginView(props: {
+    defaultValues?: DefaultFormValues;
+    onLogin?: AuthEventHandler;
+    currentUser: CurrentUser | null;
+    description: ReactNode;
+    reload: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/account/NoConnectionView.d.ts

@@ -0,0 +1,4 @@
+export declare function NoConnectionView(props: {
+    latestAttemptTs: number;
+    onRetry: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/account/PasswordResetCard.d.ts

@@ -0,0 +1,15 @@
+import { DefaultFormValues } from './types.ts';
+export type PasswordResetCardProps = {
+    /**
+     * Default values for the initial request password reset step.
+     *
+     * You might want to provide a value for history state or query param, so that
+     * if a user jumps between login and password reset, their email address
+     * is maintained between the two locations.
+     */
+    defaultValues?: DefaultFormValues;
+};
+/**
+ * Allows the user to reset their password.
+ */
+export declare function PasswordResetCard(props: PasswordResetCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/account/PasswordResetCard.stories.d.ts

@@ -0,0 +1,128 @@
+/**
+ * The default case in which all steps of the flow succeed.
+ */
+export declare const Success: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+    };
+}, {}>;
+/**
+ * In this case, the initial step fails because the email address was not
+ * found in our database.
+ */
+export declare const UserNotFoundOnRequestCode: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                request: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * In this case, the initial step fails for a reason that doesn't have any
+ * special handling in this location. E.g. network error, server error, etc.
+ */
+export declare const UnknownFailureOnRequestCode: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                request: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * In this case, the check code step fails because the token has expired,
+ * or is incorrect.
+ */
+export declare const NotFoundOrExpiredOnCheckCode: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                check: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * In this case, the check step fails for a reason that doesn't have any
+ * special handling in this location. E.g. network error, server error, etc.
+ */
+export declare const UnknownFailureOnCheckCode: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                check: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * In this case, the final set password step fails because the token has
+ * expired.
+ *
+ * Note that technically the token could also be incorrect/not found, but
+ * because the user has gotten through the check step, that would require
+ * some very strange set of circumstances.
+ */
+export declare const NotFoundOrExpiredOnSetPassword: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                set: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * In this case, the set password step fails for a reason that doesn't have any
+ * special handling in this location. E.g. network error, server error, etc.
+ */
+export declare const UnknownFailureOnSetPassword: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                set: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;

package/dist/account/UserMismatchView.d.ts

@@ -0,0 +1,6 @@
+import { CurrentUser } from '../types.ts';
+export declare function UserMismatchView(props: {
+    serverUser: CurrentUser;
+    localUser: CurrentUser;
+    reload: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/account/VerifyPage.d.ts

@@ -0,0 +1,13 @@
+import { CurrentUser } from '../types.ts';
+import { AuthEventHandler } from './types.ts';
+export declare function VerifyAccountView(props: {
+    currentUser: CurrentUser;
+    reload: () => void;
+    /**
+     * If provided, will cause the success step to render a close dialog button
+     * instead of "Go to Dashboard" button.
+     *
+     * This is useful if this view is used within a modal dialog context.
+     */
+    onClose?: AuthEventHandler;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/account/style.css.d.ts

@@ -0,0 +1,10 @@
+export declare const page: string;
+export declare const accountPicker: {
+    container: string;
+    button: string;
+    buttonLabel: string;
+    divider: string;
+};
+export declare const loadingView: {
+    container: string;
+};

package/{lib/account/types.ts → dist/account/types.d.ts}

@@ -1,11 +1,8 @@
-import type { CurrentUser } from "../types.ts";
-
+import { CurrentUser } from '../types.ts';
 export type AuthEventHandler = () => Promise<void> | void;
-
 export type ClientLogoutHandler = (options: {
-  serverUser: CurrentUser;
+    serverUser: CurrentUser;
 }) => Promise<void> | void;
-
 export type DefaultFormValues = {
-  email?: string;
+    email?: string;
 };

package/dist/account/useFetchCurrentUser.d.ts

@@ -0,0 +1,28 @@
+import { Failure, Pending, Success } from '../async-op.ts';
+import { FailurePayload } from '../types.ts';
+export declare function useFetchCurrentUser(options?: {
+    /**
+     * Optionally disable immediate fetch action.
+     *
+     * @default true
+     */
+    performFetch?: boolean;
+    /**
+     * Fetch new data every time the window is focused.
+     *
+     * Note that `performFetch` has to be enabled for this option to have an
+     * effect — we are not revalidating when there is no fetch to do!
+     *
+     * @default false
+     */
+    revalidateOnFocus?: boolean;
+}): {
+    result: Pending | Failure<FailurePayload> | Success<{
+        id: string;
+        email: string;
+        isVerified: boolean;
+        prefersScrollbarVisibility?: "ALWAYS" | undefined;
+    }>;
+    latestAttemptTs: number;
+    reload: () => void;
+};

package/dist/account/useRedirectPath.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Gets redirect path from query params and validates it.
+ *
+ * Returns `null` if no path is found, or it is invalid.
+ */
+export declare function useRedirectPath(): string | null;

package/dist/animations.css.d.ts

@@ -0,0 +1,3 @@
+export declare const fadeIn: string;
+export declare const slideUp: string;
+export declare const bounce: string;

package/dist/append-copy-to-text.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Appends " (Copy)" to the end of the input string if it doesn't already end
+ * with " (Copy)", otherwise it appends a number after "Copy", incrementing it
+ * if necessary.
+ */
+export declare function appendCopyToText(input: string): string;
+/**
+ * Works like {@link appendCopyToText}, but ignores empty strings.
+ */
+export declare function maybeAppendCopyToText(input: string): string;

package/dist/append-copy-to-text.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/appkit.css

@@ -0,0 +1 @@
+:root{--bksdto0: #ececec;--bksdto1: hsl(0 0% 50%);--bksdto2: #e7e8e8;--bksdto3: #f6f7f7;--bksdto4: #d6446e}:root{--bksdto5: 100}._1xw2g3s0{position:fixed;inset:0;z-index:var(--bksdto5);margin:auto;overflow:auto;opacity:0;background-color:#fff}._1xw2g3s1{transition:transform .2s,opacity .2s;transform:translateY(5rem);inline-size:100%;block-size:100%}._1xw2g3s1[data-enter]{opacity:1;transform:translateY(0)}._1xw2g3s1[data-leave]{opacity:0;transform:translateY(5rem)}._1xw2g3s2{transition:transform .2s,opacity .2s;transform:scale(1.1);inline-size:min(24rem,90svw);block-size:fit-content;border-radius:1rem}._1xw2g3s2[data-enter]{opacity:1;transform:scale(1)}._1xw2g3s2[data-leave]{opacity:0;transform:scale(.9)}._1xw2g3s3{background-color:#000;opacity:0;transition:opacity .2s}._1xw2g3s3[data-enter]{opacity:.4}@media(min-width:50em){._1xw2g3s1{transition:transform .2s,opacity .2s;transform:scale(1.1);block-size:fit-content;max-inline-size:40rem;max-block-size:90%;border-radius:1rem}._1xw2g3s1[data-enter]{opacity:1;transform:scale(1)}._1xw2g3s1[data-leave]{opacity:0;transform:scale(.9)}}.zuzez50{inline-size:2.5rem;block-size:2.5rem;margin:0rem auto .75rem}.zuzez51{font-family:manofa,sans-serif;font-feature-settings:"ss01";letter-spacing:-.01em}.zuzez52{font-family:minion-pro,serif}.zuzez53{background-color:#fff}.zuzez54{display:inline;text-decoration:underline;text-decoration-color:hsl(from currentcolor h s l / .3);text-underline-offset:.15em}@media(min-width:50em){.zuzez50{margin-block:-1rem 1.5rem}}@media(hover:hover)and (pointer:fine){.zuzez54{transition:text-decoration-color .2s}.zuzez54:hover{text-decoration-color:hsl(from currentcolor h s l / 1)}}@keyframes m15b5u0{0%{opacity:0}to{opacity:1}}@keyframes m15b5u1{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes m15b5u2{0%{transform:translateY(0)}20%{transform:translateY(-20%)}50%{transform:translateY(0)}}.b8zmms1{fill:currentcolor;opacity:.8;animation:m15b5u2 2s var(--b8zmms0) infinite}._1vaiehn0{text-align:start}._1vaiehn1{text-align:center}._1vaiehn2{text-align:end}._1onnux03{--_1onnux04: 1.25rem;--_1onnux05: 3rem}._1onnux06{background-color:#fff;padding:calc(var(--_1onnux04) / 2) var(--_1onnux04) var(--_1onnux04);border-radius:1rem;margin-inline:auto;max-inline-size:36rem;transition:height .2s;height:calc-size(auto)}._1onnux0a{margin-block-end:.5rem;margin-inline:auto;display:block;inline-size:2.5rem;block-size:2.5rem}._1onnux0b{font-weight:400;font-size:1.5rem;margin-block-end:1rem;line-height:1.2}._1onnux0f{margin-block-end:min(calc(var(--_1onnux04) / 2),1.5rem)}._1onnux0g{line-height:1.5}._1onnux0g+._1onnux0g{margin-top:.5lh}._1onnux0h{font-size:.875rem}._1onnux0i{font-size:1rem}._1onnux0m{letter-spacing:0;text-transform:uppercase;background-color:#000;color:#fff;width:100%;border:none;border-radius:.5rem;padding:1rem 1.5rem;font-size:.875rem;text-align:center}._1onnux0n{margin-block-start:calc(var(--_1onnux05) - .5rem)}._1onnux0o{text-align:center;margin-block-start:var(--_1onnux05);padding-block-start:2rem;border-block-start:1px solid #ececec}._1onnux0p{margin:0 auto 1.125rem}._1onnux0q{margin:0 auto;max-inline-size:25rem}@media(min-width:28em){._1onnux06{--_1onnux04: clamp(1.5rem, 8%, 4rem)}}@media(hover:hover)and (pointer:fine){._1onnux0m{transition:box-shadow .4s}._1onnux0m:hover{box-shadow:inset 0 0 0 2px #ffffff80}}._13vjtz70:empty{display:none}.lk2mmi0{border-radius:.5rem;border:1px solid var(--bksdto0)}.lk2mmi1{display:block}.lk2mmi2{display:block;text-transform:uppercase;font-size:.75rem;font-weight:600;margin-bottom:.5rem;text-align:start}.lk2mmi3{display:block;width:100%;font-size:1rem;line-height:1.25rem;padding:1rem 0 1rem 1rem;text-align:start}.lk2mmi3:read-only{background-color:#0000000d}.lk2mmi3::-ms-clear{display:none}.lk2mmi3::-ms-reveal{display:none}.lk2mmi4{text-align:start}.lk2mmi5{color:var(--bksdto4);font-size:.875rem;margin-top:.5rem;text-align:start}.lk2mmi5:empty{display:none}.lk2mmi6{color:var(--bksdto1);font-size:.875rem;margin-top:.5rem;text-align:start}.lk2mmi5:not(:empty)+.lk2mmi6{display:none}.lk2mmi7{padding:1rem;color:var(--bksdto4);background-color:var(--bksdto3);border-radius:.75rem;text-align:start}.lk2mmi8{margin-block-end:3rem}._1os01700{background-color:#fff}._1os01701{background-color:#fafafa;border-radius:.5rem}._1os01702{padding:1rem 1.5rem;text-align:start;inline-size:100%;border-radius:inherit}._1os01703{font-weight:600;font-size:1.125rem}._1os01704{margin-inline:1.5rem;background-color:#e2e2e2;block-size:1px}._1os01705{display:flex;justify-content:center;align-items:center;height:12rem}@media(min-width:28em){._1os01700{background-color:transparent;padding:clamp(1rem,5vw,5rem)}}@media(hover:hover)and (pointer:fine){._1os01702{transition:.2s background-color}._1os01702:hover{background-color:hsl(from #fafafa h s calc(l - 3))}}._4t8bcm0+._4t8bcm0:before{content:" · ";opacity:.6}._53r2z10{display:flex;flex-direction:column;gap:.75rem;background-color:#fff;padding:1.5rem;border-radius:.5rem;color:#000}._53r2z11{text-align:center}._53r2z12{text-align:start}._53r2z13{max-inline-size:11rem}._53r2z14{margin-inline:auto}._53r2z15{margin-inline:0}._53r2z16{border-block-start:1px solid hsl(0 0% 0% / .1);padding-block-start:.75rem}@layer appkit;._11bly911{inline-size:100%;block-size:auto;border-radius:inherit}@layer appkit{._11bly910{display:flex;align-items:center;justify-content:center;background-color:#fff;border-radius:.5rem;max-inline-size:12rem;aspect-ratio:1}}._1u5uin30{display:flex;align-items:center;justify-items:center;flex-direction:column;block-size:100%}._1u5uin31{background-color:#fff;border-radius:1rem;max-width:38rem;padding:clamp(1rem,5vw,3rem);margin:auto}._1u5uin32{max-width:4rem;margin-inline:auto;margin-block-end:1rem;aspect-ratio:1}._1u5uin33{margin-block-end:clamp(1.5rem,4cqw,2rem)}._1u5uin34{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));margin-block:1.5rem}._1u5uin35{text-align:center;margin-block:2rem 3rem}._1u5uin36{max-inline-size:16rem;margin:auto}._1u5uin37{margin-inline:auto}._1u5uin38{font-style:italic;color:#00000080;animation:m15b5u0 .3s .15s both;margin-block-start:.5rem;text-align:center}._1u5uin39{text-align:center;margin-block-end:.5rem}._1u5uin3a{aspect-ratio:1;border-radius:20%;box-shadow:0 .125rem .25rem #0003;width:3rem;height:auto;margin-inline:auto;margin-block-end:1rem}._1u5uin3b{padding:2rem;text-align:center}._1u5uin3c{font-size:1.25rem}._1u5uin3d{margin-block-start:.5rem}._1u5uin3e{margin-block:2rem;border-block-start:1px solid hsl(0 0% 0% / .1);text-align:left}._1u5uin3f{border-block-end:1px solid hsl(0 0% 0% / .1);list-style:decimal;list-style-position:inside;padding-block:.75rem}._1u5uin3g{display:inline-block;position:relative;inline-size:1.25rem;top:.125em}.gpdazw0{max-inline-size:20rem;margin-inline:auto}.gpdazw1{margin-block-start:2.5rem;display:flex;flex-direction:column;gap:1rem}