@mohasinac/appkit 4.52.5 → 4.53.0

package/dist/features/account/components/UserSupportView.js

@@ -1,166 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Li, useApiMutation } from "@mohasinac/appkit/client";
-import { useMemo, useState } from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { Button, Div, Row, SideDrawer, Span, Stack, Text, Ul, useToast } from "../../../ui/index.js";
-import { FieldTextarea } from "../../../ui/forms/FieldTextarea.js";
-import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary.js";
-import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell.js";
-import { applyZodIssues } from "../../../ui/forms/apply-zod-issues.js";
-import { buildSectionsFromSchema, visibleValues } from "../../shell/build-sections.js";
-import { SectionForm, useSectionFormNav } from "../../shell/SectionForm.js";
-import { apiClient } from "../../../http/index.js";
-import { supportTicketCreateSchema } from "../../support/schemas/ticket-create-form.js";
-import { TicketCategoryValues } from "../../support/schemas/firestore.js";
-import { SUPPORT_ENDPOINTS } from "../../../constants/api-endpoints.js";
-const __P = {
-    p3: "p-[var(--appkit-space-3)]",
-    p4: "p-[var(--appkit-space-4)]",
-};
-const __O = {
-    yAuto: "overflow-y-auto",
-};
-// --- Constants ---------------------------------------------------------------
-/**
- * Category labels.
- *
- * Keyed off `TicketCategoryValues` rather than written as a parallel array, so
- * a twelfth category cannot be added to the schema and silently omitted here —
- * Root Cause #61, which the schema itself already guards on its own side.
- *
- * There are ten, so the generator renders this as a `PaginatedSelect`: it was
- * a native `<Select>` with no `name`, which is over the five-option threshold
- * AND unreachable by `applyZodIssues`.
- */
-const CATEGORY_LABELS = {
-    [TicketCategoryValues.ORDER_ISSUE]: "Order issue",
-    [TicketCategoryValues.BILLING_PAYMENT]: "Billing / payment",
-    [TicketCategoryValues.ACCOUNT]: "Account",
-    [TicketCategoryValues.LISTING_DISPUTE]: "Listing dispute",
-    /*
-     * The hand-written array this replaced had TEN entries and the schema has
-     * ELEVEN — `scam_report` was simply missing, so a user could never file one
-     * from this drawer even though the route accepts it.
-     */
-    [TicketCategoryValues.SCAM_REPORT]: "Report a scam",
-    [TicketCategoryValues.REFUND_REQUEST]: "Refund request",
-    [TicketCategoryValues.AUCTION_DISPUTE]: "Auction dispute",
-    // ST-4 — sellers use this to request changes to admin-controlled
-    // store fields (status, capabilities, verification badge).
-    [TicketCategoryValues.STORE_CHANGE_REQUEST]: "Store change request (sellers)",
-    // ST-3 — buyers/sellers request mutation of order line items
-    [TicketCategoryValues.ORDER_MODIFICATION_REQUEST]: "Order modification request",
-    // ST-5 — appeal a soft or hard ban; bypasses the create_support_tickets
-    // soft-ban guard server-side.
-    [TicketCategoryValues.UNBAN_REQUEST]: "Appeal a ban (unban request)",
-    [TicketCategoryValues.GENERAL]: "General",
-};
-const CATEGORY_OPTIONS = Object.values(TicketCategoryValues).map((value) => ({
-    value,
-    label: CATEGORY_LABELS[value] ?? value.replace(/_/g, " "),
-}));
-const CLS_MSG_USER = "border bg-[var(--appkit-color-surface)]/40 border-[var(--appkit-color-border)]";
-const CLS_MSG_STAFF = "bg-info-surface border border-info dark:bg-info-surface dark:border-info";
-const STATUS_BADGE = {
-    open: "bg-info-surface text-info",
-    in_progress: "bg-warning-surface text-warning",
-    waiting_on_user: "bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300",
-    resolved: "bg-success-surface text-success",
-    closed: "bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text-muted)] bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)]",
-};
-const ROLE_LABEL = {
-    user: "You",
-    support: "Support",
-    admin: "Admin",
-};
-const EMPTY_TICKET = {
-    category: TicketCategoryValues.GENERAL,
-    subject: "",
-    description: "",
-    orderId: "",
-};
-export function UserSupportView(_props) {
-    const queryClient = useQueryClient();
-    const { showToast } = useToast();
-    const [detailOpen, setDetailOpen] = useState(false);
-    const [selectedTicket, setSelectedTicket] = useState(null);
-    const [newTicketOpen, setNewTicketOpen] = useState(false);
-    const [newTicket, setNewTicket] = useState(EMPTY_TICKET);
-    const patchTicket = (partial) => setNewTicket((prev) => Object.assign({}, prev, partial));
-    // Reply state
-    const [replyBody, setReplyBody] = useState("");
-    const { data, isLoading, error } = useQuery({
-        queryKey: ["user", "support-tickets"],
-        queryFn: () => apiClient.get(SUPPORT_ENDPOINTS.TICKETS),
-    });
-    const tickets = data?.tickets ?? [];
-    const invalidate = () => queryClient.invalidateQueries({ queryKey: ["user", "support-tickets"] });
-    const createMutation = useApiMutation({
-        errorMessage: "Failed to create ticket.",
-        mutationFn: async (values) => apiClient.post(SUPPORT_ENDPOINTS.TICKETS, values),
-        onSuccess: () => {
-            showToast("Support ticket created.", "success");
-            setNewTicketOpen(false);
-            setNewTicket(EMPTY_TICKET);
-            invalidate();
-        },
-    });
-    /*
-     * This drawer validated NOTHING before the schema landed, and its sibling
-     * page (`/user/support/new`) hand-rolled a `canSubmit` that required an
-     * order id for an `order_issue` ticket — a real rule the route did not
-     * enforce either, so the same ticket was acceptable or not depending purely
-     * on which surface the user opened. One schema now covers both and the
-     * route; the parse below is what reports it, per field.
-     */
-    const sections = useMemo(() => buildSectionsFromSchema(supportTicketCreateSchema, {
-        options: { category: CATEGORY_OPTIONS },
-    }), []);
-    const nav = useSectionFormNav(sections, newTicket, { scope: "user:support-ticket" });
-    const { shellCtx, setFieldError, clearErrors } = useFormShellState(supportTicketCreateSchema, {
-        sections: nav.sectionMeta,
-        onGoToSection: nav.goToSection,
-        fieldToSectionIndex: nav.fieldToSectionIndex,
-    });
-    const submitTicket = () => {
-        clearErrors();
-        /*
-         * `visibleValues` is what keeps an order id typed before switching
-         * category out of a ticket that has nothing to do with an order — the
-         * `when` on that field hides the control and never clears it.
-         */
-        const parsed = supportTicketCreateSchema.safeParse(visibleValues(supportTicketCreateSchema, newTicket));
-        if (!parsed.success) {
-            applyZodIssues(parsed.error.issues, setFieldError);
-            return;
-        }
-        createMutation.mutate(parsed.data);
-    };
-    const replyMutation = useApiMutation({
-        errorMessage: "Failed to send reply.",
-        mutationFn: async () => {
-            await apiClient.post(SUPPORT_ENDPOINTS.TICKET_MESSAGES(selectedTicket.id), { body: replyBody.trim() });
-        },
-        onSuccess: () => {
-            showToast("Reply sent.", "success");
-            setReplyBody("");
-            invalidate();
-        },
-    });
-    return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: "mx-auto max-w-2xl", paddingY: "y-lg", paddingX: "x-md", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", children: [_jsx(Text, { size: "xl", weight: "semibold", color: "primary", children: "Support Tickets" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => setNewTicketOpen(true), children: "New ticket" })] }), renderTicketListArea({ isLoading, error, tickets, setSelectedTicket, setDetailOpen })] }), _jsx(SideDrawer, { isOpen: newTicketOpen, onClose: () => setNewTicketOpen(false), title: "Open a support ticket", children: _jsx(Stack, { className: `${__P.p4}`, gap: "md", children: _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: newTicket, onChange: patchTicket, onSubmit: submitTicket, schema: supportTicketCreateSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: createMutation.isPending, submitLabel: "Submit ticket", onCancel: () => setNewTicketOpen(false), 
-                                /*
-                                 * A drawer owns its own footer — `useIsInsideOverlay` already
-                                 * suppresses the viewport-fixed bar, which would otherwise
-                                 * render BEHIND the backdrop. Stated rather than relied on.
-                                 */
-                                bottomBar: false })] }) }) }), renderTicketDetailDrawer({ detailOpen, setDetailOpen, selectedTicket, replyBody, setReplyBody, replyMutation })] }));
-}
-function renderTicketListArea(props) {
-    const { isLoading, error, tickets, setSelectedTicket, setDetailOpen } = props;
-    return (_jsxs(_Fragment, { children: [isLoading && (_jsx(Stack, { gap: "3", children: [1, 2, 3].map((i) => _jsx(Div, { className: "h-16 animate-pulse", surface: "subtle", rounded: "lg" }, i)) })), error && (_jsx(Div, { textSize: "sm", className: "border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: "Failed to load support tickets." })), !isLoading && tickets.length === 0 && (_jsx(Div, { className: "text-left", surface: "muted", paddingY: "y-2xl", paddingX: "x-lg", rounded: "xl", border: "default", children: _jsx(Text, { size: "sm", color: "muted", children: "You haven't opened any support tickets yet." }) })), _jsx(Ul, { spacing: "loose", children: tickets.map((ticket) => (_jsx(Li, { children: _jsx(Button, { rounded: "xl", variant: "ghost", type: "button", shadow: "sm", border: "default", paddingX: "md", paddingY: "md", className: "w-full bg-[var(--appkit-color-surface)] text-left hover:border-[var(--appkit-color-primary-300)] transition-colors", onClick: () => { setSelectedTicket(ticket); setDetailOpen(true); }, children: _jsxs(Row, { align: "start", justify: "between", gap: "sm", children: [_jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "truncate", color: "primary", weight: "medium", children: ticket.subject }), _jsxs(Text, { size: "xs", color: "muted", children: [ticket.category.replace(/_/g, " "), ticket.orderId ? ` · Order: ${ticket.orderId}` : ""] })] }), _jsx(Span, { size: "xs", weight: "medium", className: `shrink-0 inline-flex ${STATUS_BADGE[ticket.status] ?? STATUS_BADGE.open}`, padding: "pill-sm", rounded: "full", children: ticket.status.replace(/_/g, " ") })] }) }) }, ticket.id))) })] }));
-}
-function renderTicketDetailDrawer(props) {
-    const { detailOpen, setDetailOpen, selectedTicket, replyBody, setReplyBody, replyMutation } = props;
-    return (_jsx(SideDrawer, { isOpen: detailOpen, onClose: () => setDetailOpen(false), title: selectedTicket?.subject ?? "Ticket", children: selectedTicket && (_jsxs(Stack, { className: `${__P.p4}`, gap: "md", children: [_jsxs(Row, { wrap: true, gap: "sm", children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-flex ${STATUS_BADGE[selectedTicket.status] ?? STATUS_BADGE.open}`, rounded: "full", padding: "pill-sm-tall", children: selectedTicket.status.replace(/_/g, " ") }), _jsx(Span, { size: "xs", rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", children: selectedTicket.category.replace(/_/g, " ") }), selectedTicket.orderId && _jsxs(Span, { size: "xs", rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", children: ["Order: ", selectedTicket.orderId] })] }), selectedTicket.description && (_jsxs(Div, { className: `${__P.p3}`, rounded: "lg", surface: "muted", border: "default", children: [_jsx(Text, { className: "mb-1 tracking-wide", size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Your description" }), _jsx(Text, { className: "whitespace-pre-wrap", color: "primary", size: "sm", children: selectedTicket.description })] })), (selectedTicket.messages ?? []).length > 0 && (_jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Messages" }), _jsx(Stack, { className: `max-h-72 ${__O.yAuto}`, gap: "sm", children: (selectedTicket.messages ?? []).map((msg, i) => (_jsxs(Div, { textSize: "sm", className: `${__P.p3} ${msg.authorRole === "user" ? CLS_MSG_USER : CLS_MSG_STAFF}`, rounded: "lg", children: [_jsxs(Row, { color: "muted", textSize: "xs", className: "mb-1", align: "center", gap: "sm", children: [_jsx(Span, { weight: "medium", color: "muted", children: ROLE_LABEL[msg.authorRole ?? "user"] ?? msg.authorRole }), msg.createdAt && _jsx(Span, { children: new Date(msg.createdAt).toLocaleString() })] }), _jsx(Text, { className: "whitespace-pre-wrap", color: "primary", children: msg.body })] }, msg.id ?? i))) })] })), selectedTicket.status !== "closed" && selectedTicket.status !== "resolved" && (_jsxs(Stack, { gap: "sm", children: [_jsx(FieldTextarea, { name: "reply", label: "Reply", value: replyBody, onChange: setReplyBody, rows: 3, placeholder: "Add a message to your ticket\u2026" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", isLoading: replyMutation.isPending, disabled: !replyBody.trim() || replyMutation.isPending, onClick: () => replyMutation.mutate(), children: "Send reply" })] }))] })) }));
-}

package/dist/features/admin/components/DemoSeedView.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import type { StackedViewShellProps } from "../../../ui";
-export interface DemoSeedViewProps extends Omit<StackedViewShellProps, "sections"> {
-    labels?: {
-        title?: string;
-    };
-    renderActions?: (isLoading: boolean) => React.ReactNode;
-    renderLog?: () => React.ReactNode;
-    isLoading?: boolean;
-}
-export declare function DemoSeedView({ labels, renderActions, renderLog, isLoading, ...rest }: DemoSeedViewProps): React.JSX.Element;

package/dist/features/admin/components/DemoSeedView.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { StackedViewShell } from "../../../ui/index.js";
-export function DemoSeedView({ labels = {}, renderActions, renderLog, isLoading = false, ...rest }) {
-    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title, sections: [renderActions?.(isLoading), renderLog?.()] }));
-}

package/dist/features/auth/components/AuthStatusPanel.d.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-type AuthStatusTone = "success" | "error" | "loading";
-interface AuthStatusPanelProps {
-    tone: AuthStatusTone;
-    title: string;
-    message?: string;
-    actions?: ReactNode;
-}
-export declare function AuthStatusPanel({ tone, title, message, actions, }: AuthStatusPanelProps): import("react").JSX.Element;
-export {};

package/dist/features/auth/components/AuthStatusPanel.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Heading, Text } from "../../../ui/index.js";
-import { THEMED_TEXT_ERROR, THEMED_TEXT_SUCCESS } from "../../../_internal/shared/styles/themed.js";
-function toneClass(tone) {
-    if (tone === "success")
-        return THEMED_TEXT_SUCCESS;
-    if (tone === "error")
-        return THEMED_TEXT_ERROR;
-    return "text-primary";
-}
-function iconPath(tone) {
-    if (tone === "success") {
-        return "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z";
-    }
-    if (tone === "error") {
-        return "M6 18L18 6M6 6l12 12";
-    }
-    return "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z";
-}
-export function AuthStatusPanel({ tone, title, message, actions, }) {
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { className: `mb-4 ${toneClass(tone)}`, children: _jsx("svg", { className: "w-16 h-16 mx-auto", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: iconPath(tone) }) }) }), _jsx(Heading, { level: 2, className: "mb-2", size: "xl", weight: "semibold", children: title }), message ? (_jsx(Text, { className: "mb-6", color: "muted", size: "sm", children: message })) : null, actions] }));
-}

package/dist/features/categories/components/CategoryProductsView.d.ts

@@ -1,45 +0,0 @@
-import React from "react";
-import type { CategoryItem } from "../types";
-import type { UrlTable } from "../../filters/FilterPanel";
-import type { CategoryFilterVariant } from "./CategoryFilters";
-export interface CategoryProductsViewProps {
-    /** Category slug */
-    slug: string;
-    /** Initial SSR category data */
-    initialCategory?: CategoryItem;
-    /** Initial SSR child categories */
-    initialChildren?: CategoryItem[];
-    /** Optional UrlTable-compatible state source for shared filter/sort controls */
-    table?: UrlTable;
-    /** Filter/sort preset for admin/seller/public listing behavior */
-    filterVariant?: CategoryFilterVariant;
-    /** Controlled sort value override */
-    sortValue?: string;
-    /** Controlled sort change callback */
-    onSortChange?: (value: string) => void;
-    /** Render breadcrumb trail */
-    renderBreadcrumbs?: (category: CategoryItem | null) => React.ReactNode;
-    /** Render child category chips/tabs */
-    renderChildCategories?: (children: CategoryItem[]) => React.ReactNode;
-    /** Render filter panel */
-    renderFilters?: () => React.ReactNode;
-    /** Render active filter chips */
-    renderActiveFilters?: () => React.ReactNode;
-    /** Render search */
-    renderSearch?: (value: string, onChange: (v: string) => void) => React.ReactNode;
-    /** Render sort dropdown */
-    renderSort?: (value: string, onChange: (v: string) => void) => React.ReactNode;
-    /** Render view mode toggle */
-    renderViewToggle?: (mode: string, onToggle: (m: string) => void) => React.ReactNode;
-    /** Render the products grid */
-    renderProducts: (isLoading: boolean) => React.ReactNode;
-    /** Render pagination */
-    renderPagination?: (total: number) => React.ReactNode;
-    /** Provide category (when fetched externally / SSR) */
-    category?: CategoryItem | null;
-    children?: CategoryItem[];
-    total?: number;
-    isLoading?: boolean;
-    className?: string;
-}
-export declare function CategoryProductsView({ table, filterVariant, sortValue, onSortChange, renderBreadcrumbs, renderChildCategories, renderFilters, renderActiveFilters, renderSearch, renderSort, renderViewToggle, renderProducts, renderPagination, category, children: childCategories, total, isLoading, className, }: CategoryProductsViewProps): React.JSX.Element;

package/dist/features/categories/components/CategoryProductsView.js

@@ -1,21 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Div, Heading, Input, SlottedListingView, Stack, Text } from "../../../ui/index.js";
-import { CategoryFilters } from "./CategoryFilters.js";
-import { CategorySortSelect } from "./CategorySortSelect.js";
-export function CategoryProductsView({ table, filterVariant = "public", sortValue, onSortChange, renderBreadcrumbs, renderChildCategories, renderFilters, renderActiveFilters, renderSearch, renderSort, renderViewToggle, renderProducts, renderPagination, category = null, children: childCategories = [], total = 0, isLoading = false, className = "", }) {
-    const [search, setSearch] = React.useState("");
-    const [sort, setSort] = React.useState("-createdAt");
-    const [viewMode, setViewMode] = React.useState("grid");
-    const resolvedSort = sortValue ?? table?.get("sorts") ?? sort;
-    const handleSortChange = (next) => {
-        onSortChange?.(next);
-        if (!sortValue) {
-            setSort(next);
-        }
-        table?.set("sorts", next);
-    };
-    return (_jsx(Div, { className: `min-h-screen ${className}`, children: _jsxs(Stack, { className: "max-w-screen-xl mx-auto", gap: "md", paddingY: "y-lg", paddingX: "x-md", children: [category && renderBreadcrumbs?.(category), category && (_jsxs(Div, { children: [_jsx(Heading, { level: 1, weight: "bold", size: "2xl", children: category.name }), category.description && (_jsx(Text, { className: "mt-1", color: "muted", children: category.description }))] })), childCategories.length > 0 && renderChildCategories?.(childCategories), _jsx(SlottedListingView, { portal: "public", inlineToolbar: true, className: "space-y-4", renderSearch: () => renderSearch?.(search, setSearch) ?? (_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: "Search in category", className: "max-w-sm" })), renderSort: () => renderSort ? (renderSort(resolvedSort, handleSortChange)) : (_jsx(CategorySortSelect, { value: resolvedSort, onChange: handleSortChange, variant: filterVariant })), renderFilters: () => renderFilters?.() ??
-                        (table ? _jsx(CategoryFilters, { table: table, variant: filterVariant }) : null), renderActiveFilters: renderActiveFilters, renderBulkActions: () => renderViewToggle?.(viewMode, setViewMode) ?? null, renderTable: () => renderProducts(isLoading), renderPagination: () => renderPagination?.(total) ?? null, total: total, isLoading: isLoading })] }) }));
-}

package/dist/features/homepage/components/HowItWorksInfoView.d.ts

@@ -1,36 +0,0 @@
-import { ReactNode } from "react";
-export interface HowItWorksInfoStep {
-    number: number;
-    icon: string;
-    title: string;
-    text: string;
-    /** Optional accent colour class for the step number badge, e.g. "bg-success-surface …" */
-    accentClass?: string;
-    /** Optional text colour class for the number */
-    textClass?: string;
-}
-export interface HowItWorksInfoDetail {
-    title: string;
-    text: string;
-}
-export interface HowItWorksInfoViewProps {
-    /** Page hero heading */
-    title: string;
-    subtitle?: string;
-    /** Extra className for the hero <Section>. The themed brand-banner gradient is applied automatically via tone="accent-banner". */
-    heroClass?: string;
-    /** Step-by-step section heading */
-    stepsTitle?: string;
-    steps: HowItWorksInfoStep[];
-    /** "Important things to know" or similar detail cards below the steps */
-    detailsSectionTitle?: string;
-    details?: HowItWorksInfoDetail[];
-    /** Optional: render the flow/status diagram above the steps list */
-    renderDiagram?: () => ReactNode;
-    /** Optional extra content at the bottom (CTAs, links, etc.) */
-    renderFooter?: () => ReactNode;
-    /** Accent colour for the step number badges (default: cobalt/blue) */
-    accentClass?: string;
-    className?: string;
-}
-export declare function HowItWorksInfoView({ title, subtitle, heroClass, stepsTitle, steps, detailsSectionTitle, details, renderDiagram, renderFooter, accentClass, className, }: HowItWorksInfoViewProps): import("react").JSX.Element;

package/dist/features/homepage/components/HowItWorksInfoView.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { THEMED_BG_SECONDARY, THEMED_BORDER } from "../../../_internal/shared/styles/themed.js";
-import { SPACING_STACK } from "../../../_internal/shared/styles/grid.js";
-import { Div, Grid, Heading, Row, Section, Span, Text } from "../../../ui/index.js";
-// --- View ---------------------------------------------------------------------
-export function HowItWorksInfoView({ title, subtitle, heroClass = "", stepsTitle, steps, detailsSectionTitle, details = [], renderDiagram, renderFooter, accentClass = "bg-info-surface dark:bg-info-surface text-info dark:text-info", className = "", }) {
-    const themed = { bgSecondary: THEMED_BG_SECONDARY, border: THEMED_BORDER };
-    const spacing = { stack: SPACING_STACK };
-    return (_jsxs(Div, { className: `-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10 ${className}`, children: [_jsx(Section, { color: "inverse", tone: "accent-banner", className: heroClass, paddingY: "y-5xl", children: _jsxs(Div, { paddingX: "x-page", className: "max-w-4xl mx-auto text-left", children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: title }), subtitle && (_jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl", children: subtitle }))] }) }), _jsxs(Div, { paddingX: "x-page", className: "max-w-4xl mx-auto", padding: "content-banner", children: [renderDiagram?.(), stepsTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: stepsTitle })), _jsx(Div, { className: `${spacing.stack} mb-14`, children: steps.map(({ number, icon, title: stepTitle, text, accentClass: stepAccent, textClass, }) => (_jsxs(Section, { layout: "flex", gap: "md", align: "start", border: "default", surface: "subtle", rounded: "xl", padding: "lg", children: [_jsx(Row, { textWeight: "bold", align: "center", justify: "center", textSize: "sm", className: `shrink-0 w-10 h-10 ${stepAccent ?? accentClass}`, rounded: "xl", children: _jsx(Span, { className: textClass, children: number }) }), _jsxs(Div, { children: [_jsxs(Heading, { level: 3, className: "mb-1", weight: "semibold", children: [icon, " ", stepTitle] }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: text })] })] }, number))) }), details.length > 0 && (_jsxs(_Fragment, { children: [detailsSectionTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: detailsSectionTitle })), _jsx(Grid, { className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 mb-12", children: details.map(({ title: dt, text: dx }) => (_jsxs(Div, { rounded: "xl", padding: "5", className: `${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 3, className: "mb-2", weight: "semibold", children: dt }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: dx })] }, dt))) })] })), renderFooter?.()] })] }));
-}

package/dist/features/layout/BottomActions.d.ts

@@ -1 +0,0 @@
-export default function BottomActions(): import("react").JSX.Element;