@mohasinac/appkit 4.43.0 → 4.45.0

package/dist/theme/index.js

@@ -8,5 +8,5 @@
  * `audit-appkit-reexports` rule (no `_internal/` in public barrels) stays
  * green. Mirrors the `utils/action-result.ts` pattern.
  */
-export { ThemeProvider, useTheme } from "../_internal/client/theme";
-export { buildThemeRegistry } from "../_internal/client/theme";
+export { ThemeProvider, useTheme } from "../_internal/client/theme/index.js";
+export { buildThemeRegistry } from "../_internal/client/theme/index.js";

package/dist/tokens/index.js

@@ -127,7 +127,7 @@ export const TOKENS = {
     token,
 };
 // --- LOCALE_CONFIG ---------------------------------------------------------
-import { getDefaultCurrency, getDefaultLocale, getDefaultCountry, getDefaultTimezone, getDefaultPhonePrefix, } from "../core/baseline-resolver";
+import { getDefaultCurrency, getDefaultLocale, getDefaultCountry, getDefaultTimezone, getDefaultPhonePrefix, } from "../core/baseline-resolver.js";
 /**
  * Locale and currency defaults.
  * Scalar defaults are resolved at call-time via the baseline resolver so that

package/dist/tokens/themes/cobalt-night.js

@@ -1,4 +1,4 @@
-import { DEFAULT_DARK_THEME } from "./default-dark";
+import { DEFAULT_DARK_THEME } from "./default-dark.js";
 /**
  * Theme template — Cobalt Night. Keeps a cobalt-blue primary but pairs it
  * with a deep-blue dark surface — a distinct alternate dark palette from the

package/dist/tokens/themes/index.js

@@ -1,9 +1,9 @@
-import { DEFAULT_DARK_THEME } from "./default-dark";
-import { DEFAULT_LIGHT_THEME } from "./default-light";
-import { COBALT_NIGHT_THEME } from "./cobalt-night";
-import { SUNSET_THEME } from "./sunset";
+import { DEFAULT_DARK_THEME } from "./default-dark.js";
+import { DEFAULT_LIGHT_THEME } from "./default-light.js";
+import { COBALT_NIGHT_THEME } from "./cobalt-night.js";
+import { SUNSET_THEME } from "./sunset.js";
 export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME, COBALT_NIGHT_THEME, SUNSET_THEME };
-export { REQUIRED_GRADIENT_KEYS, REQUIRED_THEME_TOKENS } from "./required";
+export { REQUIRED_GRADIENT_KEYS, REQUIRED_THEME_TOKENS } from "./required.js";
 /** Built-in themes that ship with appkit; admin cannot delete these. */
 export const BUILT_IN_THEMES = [
     DEFAULT_LIGHT_THEME,

package/dist/tokens/themes/sunset.js

@@ -1,4 +1,4 @@
-import { DEFAULT_LIGHT_THEME } from "./default-light";
+import { DEFAULT_LIGHT_THEME } from "./default-light.js";
 /**
  * Theme template — Sunset. Warm amber primary + rose secondary on a
  * deep-rose-tinted light body — a daytime warm palette alternative to the

package/dist/ui/DataTable.js

@@ -2,18 +2,18 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
 const CLS_CHECKBOX = "rounded border-zinc-300";
-import { Button } from "./components/Button";
-import { Checkbox } from "./components/Checkbox";
-import { Spinner } from "./components/Spinner";
-import { Pagination } from "./components/Pagination";
-import { Span, Text } from "./components/Typography";
-import { AnimatedList } from "./components/Motion";
-import { GRID_MAP } from "./components/Layout";
-import { Row } from "./components/Layout";
-import { Div } from "./components/Div";
-import { mergeTableConfig, DEFAULT_PAGINATION_CONFIG } from "../contracts";
-import { resolveColumnPriority } from "./columns/build-columns";
-import { COLUMN_PRIORITY_CLASS } from "../contracts/extend";
+import { Button } from "./components/Button.js";
+import { Checkbox } from "./components/Checkbox.js";
+import { Spinner } from "./components/Spinner.js";
+import { Pagination } from "./components/Pagination.js";
+import { Span, Text } from "./components/Typography.js";
+import { AnimatedList } from "./components/Motion.js";
+import { GRID_MAP } from "./components/Layout.js";
+import { Row } from "./components/Layout.js";
+import { Div } from "./components/Div.js";
+import { mergeTableConfig, DEFAULT_PAGINATION_CONFIG } from "../contracts/index.js";
+import { resolveColumnPriority } from "./columns/build-columns.js";
+import { COLUMN_PRIORITY_CLASS } from "../contracts/extend.js";
 export function DataTable({ data, columns, keyExtractor: keyExtractorProp, onRowClick, loading = false, emptyMessage, actions, mobileCardRender, emptyState, emptyIcon, emptyTitle, tableConfig, paginationConfig, externalPagination = false, 
 // Explicit flat props — override tableConfig when provided
 pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, showViewToggle: showViewToggleProp, showTableView = true, viewMode: controlledViewMode, defaultViewMode: defaultViewModeProp, onViewModeChange, selectable: selectableProp, selectedIds = [], onSelectionChange, gridCols = "cards", labels = {}, }) {

package/dist/ui/columns/cell-renderers.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge } from "../components/Badge";
-import { Row, Stack } from "../components/Layout";
-import { Div } from "../components/Div";
-import { Span, Text } from "../components/Typography";
-import { MediaImage } from "../../features/media/MediaImage";
-import { getStatusTone, renderCurrency } from "./column-renderers";
-import { listingBadgeVariant } from "../../features/products/utils/listing-badge-variant";
+import { Badge } from "../components/Badge.js";
+import { Row, Stack } from "../components/Layout.js";
+import { Div } from "../components/Div.js";
+import { Span, Text } from "../components/Typography.js";
+import { MediaImage } from "../../features/media/MediaImage.js";
+import { getStatusTone, renderCurrency } from "./column-renderers.js";
+import { listingBadgeVariant } from "../../features/products/utils/listing-badge-variant.js";
 /**
  * The single tone→class map.
  *

package/dist/ui/columns/column-renderers.js

@@ -11,8 +11,8 @@
  * never written, because it cannot be: `.ts` and `.tsx` of the same basename
  * both emit `column-renderers.js` (TS5056). Hence the distinct name.
  */
-import { formatCurrency } from "../../utils/number.formatter";
-import { getDefaultCurrency } from "../../core/baseline-resolver";
+import { formatCurrency } from "../../utils/number.formatter.js";
+import { getDefaultCurrency } from "../../core/baseline-resolver.js";
 /** Render a boolean as "Yes" / "No" (or custom labels). */
 export function renderBoolean(value, opts) {
     const trueLabel = opts?.trueLabel ?? "Yes";

package/dist/ui/columns/index.js

@@ -1,9 +1,9 @@
 /**
  * Barrel for shared column utilities.
  */
-export { buildColumns, createColumnBuilder, resolveColumnPriority } from "./build-columns";
-export { renderBoolean, renderCurrency, renderCurrencyCompact, renderCount, renderNullable, renderRating, getStatusTone, getResourceIcon, } from "./column-renderers";
+export { buildColumns, createColumnBuilder, resolveColumnPriority } from "./build-columns.js";
+export { renderBoolean, renderCurrency, renderCurrencyCompact, renderCount, renderNullable, renderRating, getStatusTone, getResourceIcon, } from "./column-renderers.js";
 // JSX renderers. Deliberately a separate module from `column-renderers.ts`:
 // that one is React-free so it can run in a server context, and mixing the two
 // would drag React into every consumer of a plain string formatter.
-export { STATUS_TONE_CLASSES, renderStatusBadge, renderThumbnail, renderAvatar, renderMoney, renderRelativeDate, renderBooleanIcon, renderCountPill, renderTypeChip, } from "./cell-renderers";
+export { STATUS_TONE_CLASSES, renderStatusBadge, renderThumbnail, renderAvatar, renderMoney, renderRelativeDate, renderBooleanIcon, renderCountPill, renderTypeChip, } from "./cell-renderers.js";

package/dist/ui/components/Accordion.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useMemo, useState } from "react";
-import { Button } from "./Button";
-import { Div } from "./Div";
-import { Span } from "./Typography";
-import { Collapse } from "./Motion";
+import { Button } from "./Button.js";
+import { Div } from "./Div.js";
+import { Span } from "./Typography.js";
+import { Collapse } from "./Motion.js";
 const AccordionContext = createContext(null);
 function toArray(value) {
     if (!value)

package/dist/ui/components/ActionRow.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { buildSurfaceClasses } from "./surface-tokens";
+import { buildSurfaceClasses } from "./surface-tokens.js";
 const ACTION_ROW_GAP_MAP = {
     xs: "appkit-gap--xs",
     sm: "appkit-gap--sm",

package/dist/ui/components/ActiveFilterChips.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Row } from "./Layout";
-import { Span } from "./Typography";
+import { Row } from "./Layout.js";
+import { Span } from "./Typography.js";
 export function ActiveFilterChips({ filters, onRemove, onClearAll, className = "", clearAllLabel = "Clear all", }) {
     if (filters.length === 0)
         return null;

package/dist/ui/components/Alert.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Heading } from "./Typography";
-import { Button } from "./Button";
+import { Heading } from "./Typography.js";
+import { Button } from "./Button.js";
 /**
  * Alert — flexible alert/notification with variant icons and optional dismiss.
  *

package/dist/ui/components/Anchor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PADDING_MAP, ROUNDED_MAP, SHADOW_MAP, SURFACE_MAP } from "./surface-tokens";
+import { PADDING_MAP, ROUNDED_MAP, SHADOW_MAP, SURFACE_MAP } from "./surface-tokens.js";
 const ANCHOR_WEIGHT_CLS = {
     normal: "font-normal",
     medium: "font-medium",

package/dist/ui/components/Avatar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MediaImage } from "../../features/media/MediaImage";
+import { MediaImage } from "../../features/media/MediaImage.js";
 const UI_AVATAR = {
     base: "appkit-avatar",
     fallback: "appkit-avatar--fallback",

package/dist/ui/components/AvatarDisplay.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Span } from "./Typography";
+import { Span } from "./Typography.js";
 const UI_AVATAR_DISPLAY = {
     base: "appkit-avatar-display",
     sizes: {

package/dist/ui/components/Badge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Span } from "./Typography";
+import { Span } from "./Typography.js";
 /**
  * Badge — compact label with ring border variants for status, roles, and categories.
  *

package/dist/ui/components/BaseListingCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MediaImage } from "../../features/media/MediaImage";
-import { Span } from "./Typography";
+import { MediaImage } from "../../features/media/MediaImage.js";
+import { Span } from "./Typography.js";
 function BaseListingCardRoot({ className = "", isSelected, isDisabled, variant = "grid", onClick, onMouseDown, onMouseUp, onMouseLeave, onTouchStart, onTouchEnd, onTouchCancel, children, }) {
     return (_jsx("div", { onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseLeave: onMouseLeave, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, onTouchCancel: onTouchCancel, className: [
             "group relative w-full min-w-0 overflow-hidden rounded-xl border bg-[var(--appkit-color-surface)] transition-shadow",

package/dist/ui/components/Breadcrumb.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
-import { Nav, Ol, Li } from "./Semantic";
-import { Span } from "./Typography";
-import { TextLink } from "./TextLink";
+import { Nav, Ol, Li } from "./Semantic.js";
+import { Span } from "./Typography.js";
+import { TextLink } from "./TextLink.js";
 export function Breadcrumb({ items, className = "" }) {
     return (_jsx(Nav, { "aria-label": "Breadcrumb", className: `appkit-breadcrumb ${className}`, children: _jsx(Ol, { className: "appkit-breadcrumb__list", children: items.map((item, i) => {
                 const isLast = i === items.length - 1;

package/dist/ui/components/BulkActionBar.js

@@ -11,8 +11,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useState, useRef, useEffect } from "react";
 import { ChevronUp, ChevronDown, X } from "lucide-react";
-import { Button } from "./Button";
-import { Span } from "./Typography";
+import { Button } from "./Button.js";
+import { Span } from "./Typography.js";
 const DEFAULT_LABELS = {
     selected: "selected",
     apply: "Apply",

package/dist/ui/components/Button.js

@@ -4,10 +4,10 @@ import React, { useCallback, useState } from "react";
 import { createPortal } from "react-dom";
 import { twMerge } from "tailwind-merge";
 import { Loader2 } from "lucide-react";
-import { surfaceError } from "../../client/api/surface-error";
-import { useToastSafe } from "./Toast";
-import { SHADOW_MAP } from "./surface-tokens";
-import { resolveIcon, ICON_SIZE } from "../icons/icon-registry";
+import { surfaceError } from "../../client/api/surface-error.js";
+import { useToastSafe } from "./Toast.js";
+import { SHADOW_MAP } from "./surface-tokens.js";
+import { resolveIcon, ICON_SIZE } from "../icons/icon-registry.js";
 function spawnRipple(host, clientX, clientY) {
     const rect = host.getBoundingClientRect();
     const size = Math.max(rect.width, rect.height);

package/dist/ui/components/Card.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { motion, useReducedMotion } from "motion/react";
-import { buildSurfaceClasses } from "./surface-tokens";
-import { SPRING_SNAPPY } from "../../tokens/motion";
+import { buildSurfaceClasses } from "./surface-tokens.js";
+import { SPRING_SNAPPY } from "../../tokens/motion.js";
 const UI_CARD = {
     base: "appkit-card",
     variants: {

package/dist/ui/components/Checkbox.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Label, Span, Text } from "./Typography";
+import { Label, Span, Text } from "./Typography.js";
 const UI_CHECKBOX_INLINE = "appkit-checkbox--inline";
 const UI_CHECKBOX = {
     base: "appkit-checkbox",

package/dist/ui/components/ClaimCouponButton.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { normalizeError } from "../../errors/normalize";
+import { normalizeError } from "../../errors/normalize.js";
 /**
  * ClaimCouponButton — surfaced anywhere a user wins or earns a coupon
  * (SpinWheel "YOU WON" panel, raffle winner page, prize-draw reveal modal,
@@ -18,11 +18,11 @@ import { normalizeError } from "../../errors/normalize";
  * for claimed coupons, and the user applies them from there at checkout.
  */
 import { useCallback, useState } from "react";
-import { Button } from "./Button";
-import { LoginRequiredModal } from "./LoginRequiredModal";
-import { useSession } from "../../react/contexts/SessionContext";
-import { useToast } from "./Toast";
-import { ACCOUNT_ENDPOINTS } from "../../constants/api-endpoints";
+import { Button } from "./Button.js";
+import { LoginRequiredModal } from "./LoginRequiredModal.js";
+import { useSession } from "../../react/contexts/SessionContext.js";
+import { useToast } from "./Toast.js";
+import { ACCOUNT_ENDPOINTS } from "../../constants/api-endpoints.js";
 async function postClaim(couponCode, source) {
     if (typeof fetch === "undefined")
         return false;

package/dist/ui/components/CollapsibleSection.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "./Button";
-import { Div } from "./Div";
-import { Row } from "./Layout";
-import { Span } from "./Typography";
-import { Collapse } from "./Motion";
+import { Button } from "./Button.js";
+import { Div } from "./Div.js";
+import { Row } from "./Layout.js";
+import { Span } from "./Typography.js";
+import { Collapse } from "./Motion.js";
 /** Dashboard-section wrapper backed by useCollapsedSections — a persisted,
  * per-user, accordion-scoped collapse state (see that hook for the
  * server-side merge/default-collapsed semantics). Purely presentational

package/dist/ui/components/ConfirmDeleteModal.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
-import { Card } from "./Card";
-import { Heading, Text } from "./Typography";
-import { Button } from "./Button";
+import { Card } from "./Card.js";
+import { Heading, Text } from "./Typography.js";
+import { Button } from "./Button.js";
 const UI_CONFIRM_MODAL = {
     backdrop: "appkit-confirm-modal__backdrop",
     body: "appkit-confirm-modal__body",

package/dist/ui/components/CountdownDisplay.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { Span } from "./Typography";
-import { classNames } from "../style.helper";
+import { Span } from "./Typography.js";
+import { classNames } from "../style.helper.js";
 function getRemaining(targetDate) {
     const now = Date.now();
     const distance = targetDate.getTime() - now;

package/dist/ui/components/DateInput.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Label, Span, Text } from "./Typography";
+import { Label, Span, Text } from "./Typography.js";
 export const DateInput = React.forwardRef(function DateInput({ label, error, helperText, value, onChange, disabled, required, id, className = "", ...props }, ref) {
     const generatedId = React.useId();
     const inputId = id ?? generatedId;

package/dist/ui/components/DetailPageGallery.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Div } from "./Div";
-import { MediaImage } from "../../features/media/MediaImage";
+import { Div } from "./Div.js";
+import { MediaImage } from "../../features/media/MediaImage.js";
 const __O = {
     xAuto: "overflow-x-auto",
 };

package/dist/ui/components/DetailPageHero.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div } from "./Div";
-import { Row, Stack } from "./Layout";
-import { Heading, Text } from "./Typography";
+import { Div } from "./Div.js";
+import { Row, Stack } from "./Layout.js";
+import { Heading, Text } from "./Typography.js";
 /**
  * `DetailPageHero` — the top hero region shared by every listing detail page
  * (Product, Auction, PreOrder, Bundle, PrizeDraw). Renders a 2-column layout:

package/dist/ui/components/DetailPageTabs.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div } from "./Div";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs";
+import { Div } from "./Div.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
 /**
  * `DetailPageTabs` — tab shell used by Product, Auction and Event detail
  * pages. Renders an accessible trigger strip + a single visible panel.

package/dist/ui/components/DetailViewShell.js

@@ -17,8 +17,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  *   />
  */
 import React from "react";
-import { Div } from "./Div";
-import { Grid } from "./Layout";
+import { Div } from "./Div.js";
+import { Grid } from "./Layout.js";
 function resolveSlot(slot) {
     return typeof slot === "function" ? slot() : slot;
 }

package/dist/ui/components/Details.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ROUNDED_MAP } from "./surface-tokens";
+import { ROUNDED_MAP } from "./surface-tokens.js";
 const SUMMARY_SIZE_MAP = {
     xs: "text-xs",
     sm: "text-sm",

package/dist/ui/components/Div.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { buildSurfaceClasses } from "./surface-tokens";
+import { buildSurfaceClasses } from "./surface-tokens.js";
 const DIV_COLOR_MAP = {
     default: "",
     primary: "appkit-color--primary",

package/dist/ui/components/Divider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Span } from "./Typography";
+import { Span } from "./Typography.js";
 export function Divider({ label, orientation = "horizontal", className = "", }) {
     if (orientation === "vertical") {
         return (_jsx("div", { className: `appkit-divider appkit-divider--vertical ${className}`, role: "separator", "aria-orientation": "vertical" }));

package/dist/ui/components/Drawer.js

@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { X } from "lucide-react";
-import { Heading } from "./Typography";
-import { Button } from "./Button";
-import { ActionRow } from "./ActionRow";
-import { useHandMode } from "../../_internal/client/hand-mode";
+import { Heading } from "./Typography.js";
+import { Button } from "./Button.js";
+import { ActionRow } from "./ActionRow.js";
+import { useHandMode } from "../../_internal/client/hand-mode/index.js";
 const SIDE_TRANSLATE = {
     left: {
         closed: "appkit-drawer__panel--left-closed",

package/dist/ui/components/EmptyState.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Heading, Text } from "./Typography";
-import { Card } from "./Card";
-import { Button } from "./Button";
-import { TextLink } from "./TextLink";
+import { Heading, Text } from "./Typography.js";
+import { Card } from "./Card.js";
+import { Button } from "./Button.js";
+import { TextLink } from "./TextLink.js";
 const UI_EMPTY = {
     base: "appkit-empty-state",
     icon: "appkit-empty-state__icon",

package/dist/ui/components/FilePickerButton.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useRef } from "react";
-import { Button } from "./Button";
+import { Button } from "./Button.js";
 // No forwardRef: appkit's <Button> does not accept a ref, so there is nothing
 // to forward one to. Adding the plumbing would be a prop that silently does
 // nothing, which is worse than its absence.

package/dist/ui/components/FilterChipGroup.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div } from "./Div";
-import { Text } from "./Typography";
+import { Div } from "./Div.js";
+import { Text } from "./Typography.js";
 const ACTIVE_CLS = "bg-[var(--appkit-color-primary)] text-white border-[var(--appkit-color-primary)]";
 const INACTIVE_CLS = "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-surface-hover";
 const CHIP_BASE_CLS = "rounded-full px-3 py-1 text-xs font-medium border transition-colors";

package/dist/ui/components/FilterDrawer.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
-import { Button } from "./Button";
-import { Drawer } from "./Drawer";
-import { Span } from "./Typography";
-import { sectionBackgroundStyle } from "./Semantic";
+import { Button } from "./Button.js";
+import { Drawer } from "./Drawer.js";
+import { Span } from "./Typography.js";
+import { sectionBackgroundStyle } from "./Semantic.js";
 export function FilterDrawer({ children, title = "Filters", open, onOpen, onClose, onApply, onReset, activeCount = 0, pendingCount, triggerLabel = "Filters", triggerClassName = "", hideTrigger = false, side, size = "md", background, }) {
     const [internalOpen, setInternalOpen] = React.useState(false);
     const isControlled = open !== undefined;

package/dist/ui/components/FlowDiagram.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text, Span } from "./Typography";
-import { THEMED_BG_PRIMARY, THEMED_BG_SECONDARY, THEMED_BORDER, } from "../../_internal/shared/styles/themed";
+import { Text, Span } from "./Typography.js";
+import { THEMED_BG_PRIMARY, THEMED_BG_SECONDARY, THEMED_BORDER, } from "../../_internal/shared/styles/themed.js";
 const themed = {
     bgPrimary: THEMED_BG_PRIMARY,
     bgSecondary: THEMED_BG_SECONDARY,

package/dist/ui/components/Form.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { Row } from "./Layout";
-import { buildSurfaceClasses } from "./surface-tokens";
-import { FormShellContext, useFormShellState, } from "../forms/FormShell";
-import { useFormBottomActions } from "../../features/layout/hooks/useFormBottomActions";
+import { Row } from "./Layout.js";
+import { buildSurfaceClasses } from "./surface-tokens.js";
+import { FormShellContext, useFormShellState, } from "../forms/FormShell.js";
+import { useFormBottomActions } from "../../features/layout/hooks/useFormBottomActions.js";
 const FORM_SPACING_MAP = {
     none: "",
     xs: "space-y-1",

package/dist/ui/components/FormActionBar.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { ChevronRight } from "lucide-react";
-import { ActionRow } from "./ActionRow";
-import { Button } from "./Button";
-import { TextLink } from "./TextLink";
+import { ActionRow } from "./ActionRow.js";
+import { Button } from "./Button.js";
+import { TextLink } from "./TextLink.js";
 export function FormActionBar({ title, breadcrumbs, onSaveDraft, onPublish, publishLabel = "Publish", onPreview, onDiscard, isDirty, isSubmitting, className, }) {
     return (
     /*

package/dist/ui/components/FormField.js

@@ -1,12 +1,30 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { Input } from "./Input";
-import { Select } from "./Select";
-import { Textarea } from "./Textarea";
-import { Label, Text, Span } from "./Typography";
-import { ImageUpload, MediaUploadField } from "../../features/media";
-import { FormShellContext } from "../forms/FormShell";
+import { Input } from "./Input.js";
+import { Select } from "./Select.js";
+import { Textarea } from "./Textarea.js";
+import { Label, Text, Span } from "./Typography.js";
+/*
+ * 🛑 FROM THE DEFINING MODULES, NOT the `features/media` barrel.
+ *
+ * This is a UI PRIMITIVE reaching into a feature barrel, and the barrel pulls
+ * the whole media surface — including ImageEditor, which imports
+ * `react-advanced-cropper/dist/style.css`. Node cannot load CSS at any path,
+ * so that one line put a third-party stylesheet in appkit's SERVER graph:
+ *   server.js -> GoogleReviewsSection -> ui/index -> FormField
+ *             -> features/media/index -> ImageEditor -> …/style.css
+ * which is what made `serverExternalPackages` fail with
+ * ERR_UNKNOWN_FILE_EXTENSION.
+ *
+ * It is also one of the edges in the 43-module `ui` <-> `features/media`
+ * import cycle that audit-import-cycles.mjs tracks — a UI primitive and a
+ * feature importing each other. Root Cause #18: import from the file that
+ * defines the symbol.
+ */
+import { ImageUpload } from "../../features/media/upload/ImageUpload.js";
+import { MediaUploadField } from "../../features/media/upload/MediaUploadField.js";
+import { FormShellContext } from "../forms/FormShell.js";
 const CARD_CLASS = "appkit-form-field appkit-form-field--card";
 const BASE_CLASS = "appkit-form-field";
 export function FormField({ label, name, card = false, type = "text", value = "", onChange, onBlur, error: errorProp, touched: touchedProp, placeholder, required = false, disabled = false, autoComplete, rows, hint, helpText, options = [], onUpload, captureSource, captureMode, accept, maxSizeMB, }) {

package/dist/ui/components/GatedPrice.js

@@ -1,11 +1,11 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Span } from "./Typography";
-import { Row } from "./Layout";
-import { ROUTES } from "../../next/routing/route-map";
-import { getDefaultCurrency } from "../../core/baseline-resolver";
-import { formatCurrency, formatPercentage } from "../../utils/number.formatter";
-import { useCanSeePrices } from "../../react/hooks/useCanSeePrices";
+import { Span } from "./Typography.js";
+import { Row } from "./Layout.js";
+import { ROUTES } from "../../next/routing/route-map.js";
+import { getDefaultCurrency } from "../../core/baseline-resolver.js";
+import { formatCurrency, formatPercentage } from "../../utils/number.formatter.js";
+import { useCanSeePrices } from "../../react/hooks/useCanSeePrices.js";
 /**
  * 🛑 CONTRACT WITH THE STRUCTURED DATA — do not rename.
  *