canvas-ui-sdk 0.3.21 → 0.3.24

package/dist/index.d.ts

@@ -1490,6 +1490,28 @@ interface EmptyStateProps {
 }
 declare function EmptyState({ icon, title, description, className }: EmptyStateProps): react_jsx_runtime.JSX.Element;
 
+interface StoreLocationMapProps {
+    /** Section heading rendered by TitleGroup */
+    title?: string;
+    /** Section subheading rendered by TitleGroup */
+    subtitle?: string;
+    /** Label above the store name (e.g. "Main store", "Flagship") */
+    storeLabel?: string;
+    /** Store name displayed prominently */
+    storeName?: string;
+    /** Array of address lines */
+    addressLines?: string[];
+    /** Text for the directions button */
+    buttonText?: string;
+    /** Callback when the directions button is clicked */
+    onDirectionsClick?: () => void;
+    /** Google Maps embed URL (or any embeddable map URL) for the right panel */
+    mapEmbedUrl?: string;
+    /** Additional class names for the root wrapper */
+    className?: string;
+}
+declare function StoreLocationMap({ title, subtitle, storeLabel, storeName, addressLines, buttonText, onDirectionsClick, mapEmbedUrl, className, }: StoreLocationMapProps): react_jsx_runtime.JSX.Element;
+
 interface MenuSectionProps {
     /** Array of menu items */
     items: Array<{
@@ -3202,13 +3224,8 @@ interface FormFieldConfig {
     min?: number;
     max?: number;
     step?: number;
-    fullWidth?: boolean;
     disabled?: boolean;
 }
-interface FormRowConfig {
-    id: string;
-    fields: FormFieldConfig[];
-}
 interface SortOption {
     id: string;
     label: string;
@@ -3218,8 +3235,8 @@ interface FormGroupProps {
     title?: string;
     /** Form description */
     description?: string;
-    /** Row configurations containing field definitions */
-    rows?: FormRowConfig[];
+    /** Flat array of field configurations */
+    fields?: FormFieldConfig[];
     /** Sort options for the sort dropdown */
     sortOptions?: SortOption[];
     /** Filter options for the filter dropdown */
@@ -3254,24 +3271,239 @@ interface FormGroupProps {
     /** Additional class names */
     className?: string;
 }
+interface FormFieldProps {
+    field: FormFieldConfig;
+    inputSize?: "sm" | "default" | "lg";
+    onChange?: (fieldId: string, value: unknown) => void;
+}
+declare function FormField({ field, inputSize, onChange }: FormFieldProps): react_jsx_runtime.JSX.Element;
 /**
  * Canvas Design System - Form Group Block
  *
- * A comprehensive form layout block with various input types arranged
- * in responsive rows. Includes header section with title, description,
- * sort/filter controls, and footer with action buttons.
+ * A single-column form layout block with configurable fields, header section
+ * (title, description, sort/filter, action button), and footer with action buttons.
+ * Supports text inputs, textareas, selects, date pickers, multiselect checkboxes,
+ * checkbox groups, radio groups, multiselect tags, image/file uploaders, and sliders.
  *
  * @example
  * ```tsx
  * <FormGroup
  *   title="Create Entry"
  *   description="Fill in the details below"
+ *   fields={[
+ *     { id: "name", label: "Name", type: "text" },
+ *     { id: "bio", label: "Bio", type: "textarea" },
+ *   ]}
  *   onSave={() => console.log("Save")}
  *   onCancel={() => console.log("Cancel")}
  * />
  * ```
  */
-declare function FormGroup({ title, description, rows, sortOptions, actionButtonText, cancelButtonText, saveButtonText, inputSize, onAddNew, onSort, onCancel, onSave, onFieldChange, showHeader, showFooter, className, }: FormGroupProps): react_jsx_runtime.JSX.Element;
+declare function FormGroup({ title, description, fields, sortOptions, actionButtonText, cancelButtonText, saveButtonText, inputSize, onAddNew, onSort, onCancel, onSave, onFieldChange, showHeader, showFooter, className, }: FormGroupProps): react_jsx_runtime.JSX.Element;
+
+interface ConfirmationPopupProps {
+    /** Controls dialog visibility */
+    open?: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Dialog title */
+    title?: string;
+    /** Descriptive body text */
+    description?: string;
+    /** Confirm button label — when omitted the dialog renders a single dismiss button (message mode) */
+    confirmLabel?: string;
+    /** Cancel / dismiss button label */
+    cancelLabel?: string;
+    /** Controls the confirm button style — "destructive" uses the delete variant, "default" uses primary */
+    variant?: "destructive" | "default";
+    /** Callback when the confirm button is clicked */
+    onConfirm?: () => void;
+    /** Callback when the cancel / dismiss button is clicked */
+    onCancel?: () => void;
+    /** Disables the confirm button and shows a loading state */
+    loading?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+declare function ConfirmationPopup({ open, onOpenChange, title, description, confirmLabel, cancelLabel, variant, onConfirm, onCancel, loading, className, }: ConfirmationPopupProps): react_jsx_runtime.JSX.Element;
+
+interface ContactFormField {
+    /** Unique field identifier, used as key in the submitted values record */
+    id: string;
+    /** Label text displayed above the field */
+    label: string;
+    /** Input type — "textarea" renders a Textarea, all others render an Input */
+    type?: "text" | "email" | "tel" | "textarea";
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** When true the field takes 50% width and sits side-by-side with the next half field */
+    half?: boolean;
+}
+interface ContactFormPopupProps {
+    /** Controls dialog visibility */
+    open?: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Contact name displayed in the title */
+    name?: string;
+    /** Descriptive text below the title */
+    description?: string;
+    /** Avatar image URL */
+    avatarUrl?: string;
+    /** Avatar fallback initials */
+    avatarFallback?: string;
+    /** Form field configuration */
+    fields?: ContactFormField[];
+    /** Submit button label */
+    submitLabel?: string;
+    /** Cancel button label */
+    cancelLabel?: string;
+    /** Callback when the form is submitted — receives a record of field id → value */
+    onSubmit?: (values: Record<string, string>) => void;
+    /** Callback when the cancel button is clicked */
+    onCancel?: () => void;
+    /** Disables the submit button */
+    loading?: boolean;
+    /** Additional class names for the dialog content */
+    className?: string;
+}
+declare function ContactFormPopup({ open, onOpenChange, name, description, avatarUrl, avatarFallback, fields, submitLabel, cancelLabel, onSubmit, onCancel, loading, className, }: ContactFormPopupProps): react_jsx_runtime.JSX.Element;
+
+interface FeedbackPopupProps {
+    /** Controls dialog visibility */
+    open?: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Dialog title */
+    title?: string;
+    /** Descriptive body text */
+    description?: string;
+    /** Submit button label */
+    submitLabel?: string;
+    /** Cancel button label */
+    cancelLabel?: string;
+    /** Textarea placeholder text */
+    placeholder?: string;
+    /** Callback when the submit button is clicked — receives the textarea value */
+    onSubmit?: (value: string) => void;
+    /** Callback when the cancel button is clicked */
+    onCancel?: () => void;
+    /** Disables the submit button and indicates a loading state */
+    loading?: boolean;
+    /** Controlled textarea value */
+    value?: string;
+    /** Controlled textarea change handler */
+    onChange?: (value: string) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * A centered modal popup for collecting free-text feedback from users.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <FeedbackPopup
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   onSubmit={(value) => console.log("Feedback:", value)}
+ * />
+ * ```
+ */
+declare function FeedbackPopup({ open, onOpenChange, title, description, submitLabel, cancelLabel, placeholder, onSubmit, onCancel, loading, value, onChange, className, }: FeedbackPopupProps): react_jsx_runtime.JSX.Element;
+
+interface DetailField {
+    /** Field label */
+    label: string;
+    /** Plain text value */
+    value?: string;
+    /** Avatar to show next to the value */
+    avatar?: {
+        src: string;
+        fallback: string;
+    };
+    /** Status badge */
+    badge?: {
+        text: string;
+        variant: "default" | "success" | "warning" | "danger";
+    };
+    /** Render the value as a link */
+    isLink?: boolean;
+    href?: string;
+}
+interface DrawerAttachment {
+    id: string;
+    /** File name */
+    name: string;
+    /** File type label (e.g. "DOC", "PDF", "IMG") */
+    type: string;
+    /** Who uploaded the file */
+    uploadedBy: string;
+    url?: string;
+}
+interface DrawerComment {
+    id: string;
+    senderName: string;
+    senderAvatar?: string;
+    content: string;
+    timestamp: string;
+    /** true = current user's message (right-aligned, primary bg) */
+    isSent: boolean;
+}
+interface DrawerTab {
+    id: string;
+    label: string;
+}
+interface DetailDrawerProps {
+    /** Controls drawer visibility */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Drawer title */
+    title?: string;
+    /** Subtitle shown below the title */
+    subtitle?: string;
+    /** Tab definitions – defaults to Info / Comments */
+    tabs?: DrawerTab[];
+    /** Controlled active tab */
+    activeTab?: string;
+    onTabChange?: (tabId: string) => void;
+    /** Detail fields displayed in the Info tab – each inner array is a row of 1-2 fields */
+    detailFields?: DetailField[][];
+    /** Rich content sections below the fields (e.g., "Scope of work") */
+    richContent?: {
+        title: string;
+        content: React__default.ReactNode;
+    }[];
+    /** Attachments shown at the bottom of the Info tab */
+    attachments?: DrawerAttachment[];
+    /** Comments shown in the Comments tab */
+    comments?: DrawerComment[];
+    /** Placeholder text for the comment input */
+    commentPlaceholder?: string;
+    /** Callback when a comment is submitted */
+    onComment?: (text: string) => void;
+    /** Callback when an attachment download is clicked */
+    onAttachmentDownload?: (attachment: DrawerAttachment) => void;
+    className?: string;
+}
+/**
+ * A right-side detail drawer with tabbed content — an Info tab for metadata,
+ * rich content, and attachments, and a Comments tab with a chat-style thread.
+ *
+ * @example
+ * ```tsx
+ * <DetailDrawer
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   title="Acme Website Redesign"
+ *   subtitle="Project ID: PRJ2024-1121"
+ * />
+ * ```
+ */
+declare function DetailDrawer({ open, onOpenChange, title, subtitle, tabs, activeTab, onTabChange, detailFields, richContent, attachments, comments, commentPlaceholder, onComment, onAttachmentDownload, className, }: DetailDrawerProps): react_jsx_runtime.JSX.Element;
 
 interface PricedDate {
     date: Date;
@@ -3580,6 +3812,390 @@ interface MenufocusTemplateProps {
  */
 declare function MenufocusTemplate({ items, ariaLabel, size, className, align, }: MenufocusTemplateProps): react_jsx_runtime.JSX.Element;
 
+interface PurchaseConfirmationPopupProps {
+    /** Controls dialog visibility */
+    open?: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Dialog title */
+    title?: string;
+    /** Descriptive body text — supports React nodes for inline bold/emphasis */
+    description?: React__default.ReactNode;
+    /** Label for the card field */
+    cardLabel?: string;
+    /** Masked card number to display (e.g. "**** **** **** 8274") */
+    cardLastFour?: string;
+    /** Label for the change-card button */
+    changeCardLabel?: string;
+    /** Callback when the "Change" card button is clicked */
+    onChangeCard?: () => void;
+    /** Confirm button label */
+    confirmLabel?: string;
+    /** Cancel button label */
+    cancelLabel?: string;
+    /** Callback when the confirm button is clicked */
+    onConfirm?: () => void;
+    /** Callback when the cancel button is clicked */
+    onCancel?: () => void;
+    /** Disables the confirm button and shows a loading state */
+    loading?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+declare function PurchaseConfirmationPopup({ open, onOpenChange, title, description, cardLabel, cardLastFour, changeCardLabel, onChangeCard, confirmLabel, cancelLabel, onConfirm, onCancel, loading, className, }: PurchaseConfirmationPopupProps): react_jsx_runtime.JSX.Element;
+
+interface InvoiceLineItem {
+    description: string;
+    quantity: number;
+    amount: string;
+}
+interface InvoicePopupProps {
+    /** Controls dialog visibility */
+    open?: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Custom logo icon — defaults to a grid icon */
+    logoIcon?: React__default.ReactNode;
+    /** Invoice title */
+    title?: string;
+    /** Invoice subtitle / description */
+    subtitle?: string;
+    /** Invoice number */
+    invoiceNumber?: string;
+    /** Invoice date */
+    invoiceDate?: string;
+    /** Recipient name */
+    recipientName?: string;
+    /** Recipient address */
+    recipientAddress?: string;
+    /** Line items to display in the table */
+    lineItems?: InvoiceLineItem[];
+    /** Formatted subtotal */
+    subtotal?: string;
+    /** Formatted discount (e.g. "-$300") — rendered in destructive color */
+    discount?: string;
+    /** Formatted total */
+    total?: string;
+    /** Action button label */
+    actionLabel?: string;
+    /** Callback when the action button is clicked */
+    onAction?: () => void;
+    /** Disables the action button */
+    loading?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+declare function InvoicePopup({ open, onOpenChange, logoIcon, title, subtitle, invoiceNumber, invoiceDate, recipientName, recipientAddress, lineItems, subtotal, discount, total, actionLabel, onAction, loading, className, }: InvoicePopupProps): react_jsx_runtime.JSX.Element;
+
+type BillingPeriod = "monthly" | "annually";
+interface PricingPlan {
+    /** Unique plan identifier */
+    id: string;
+    /** Display name (e.g. "Basic", "Professional") */
+    name: string;
+    /** Monthly price in dollars */
+    monthlyPrice: number;
+    /** Annual price in dollars — defaults to monthlyPrice * 12 if omitted */
+    annualPrice?: number;
+    /** Short description of what the plan includes */
+    description: string;
+}
+interface PricingPlansPopupProps {
+    /** Controls dialog visibility */
+    open?: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Dialog title */
+    title?: string;
+    /** Descriptive body text below the title */
+    description?: string;
+    /** Array of plan options to display as radio cards */
+    plans?: PricingPlan[];
+    /** Currently selected billing period (controlled) */
+    billingPeriod?: BillingPeriod;
+    /** Default billing period when uncontrolled */
+    defaultBillingPeriod?: BillingPeriod;
+    /** Callback when billing period changes */
+    onBillingPeriodChange?: (period: BillingPeriod) => void;
+    /** Currently selected plan ID (controlled) */
+    selectedPlanId?: string;
+    /** Default selected plan ID when uncontrolled */
+    defaultSelectedPlanId?: string;
+    /** Callback when selected plan changes */
+    onPlanChange?: (planId: string) => void;
+    /** Save/confirm button label */
+    confirmLabel?: string;
+    /** Cancel button label */
+    cancelLabel?: string;
+    /** Callback when save button is clicked — receives the selected plan ID and billing period */
+    onConfirm?: (planId: string, billingPeriod: BillingPeriod) => void;
+    /** Callback when cancel button is clicked */
+    onCancel?: () => void;
+    /** Disables the confirm button and shows a loading state */
+    loading?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+declare function PricingPlansPopup({ open, onOpenChange, title, description, plans, billingPeriod, defaultBillingPeriod, onBillingPeriodChange, selectedPlanId, defaultSelectedPlanId, onPlanChange, confirmLabel, cancelLabel, onConfirm, onCancel, loading, className, }: PricingPlansPopupProps): react_jsx_runtime.JSX.Element;
+
+interface ProfileDetailRow {
+    /** Label displayed on the left side of the row */
+    label: string;
+    /** Text value(s) — string for single line, string[] for multi-line */
+    value: string | string[];
+    /** Rendering mode: "text" (default), "tags" for pill badges, "icons" for social media icons */
+    type?: "text" | "tags" | "icons";
+}
+interface ViewProfilePopupProps {
+    /** Controls dialog visibility */
+    open?: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Profile name */
+    name?: string;
+    /** Subtitle text below the name (e.g. role/title) */
+    subtitle?: string;
+    /** Avatar image URL */
+    avatarUrl?: string;
+    /** Avatar fallback initials */
+    avatarFallback?: string;
+    /** Star rating from 0 to 5 */
+    rating?: number;
+    /** Detail rows to display */
+    details?: ProfileDetailRow[];
+    /** "View profile" link href */
+    profileUrl?: string;
+    /** Label for the profile link */
+    profileLinkLabel?: string;
+    /** Callback when the Message button is clicked */
+    onMessage?: () => void;
+    /** Callback when the more options button is clicked */
+    onMoreOptions?: () => void;
+    /** Additional class names */
+    className?: string;
+}
+declare function ViewProfilePopup({ open, onOpenChange, name, subtitle, avatarUrl, avatarFallback, rating, details, profileUrl, profileLinkLabel, onMessage, onMoreOptions, className, }: ViewProfilePopupProps): react_jsx_runtime.JSX.Element;
+
+interface TermsOfServicePopupProps {
+    /** Controls dialog visibility */
+    open?: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Dialog title */
+    title?: string;
+    /** The scrollable terms content — accepts a string or React nodes */
+    children?: React__default.ReactNode;
+    /** Confirm / accept button label */
+    confirmLabel?: string;
+    /** Cancel / decline button label */
+    cancelLabel?: string;
+    /** Callback when the confirm button is clicked */
+    onConfirm?: () => void;
+    /** Callback when the cancel button is clicked */
+    onCancel?: () => void;
+    /** Disables the confirm button and shows a loading state */
+    loading?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+declare function TermsOfServicePopup({ open, onOpenChange, title, children, confirmLabel, cancelLabel, onConfirm, onCancel, loading, className, }: TermsOfServicePopupProps): react_jsx_runtime.JSX.Element;
+
+interface DetailItem {
+    /** Label displayed on the left side of the row */
+    label: string;
+    /** Value displayed on the right side — string for single-line, string[] for multi-line */
+    value: string | string[];
+}
+interface DetailsPopupProps {
+    /** Controls dialog visibility */
+    open?: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Popup title displayed at the top */
+    title?: string;
+    /** Detail rows to display */
+    details?: DetailItem[];
+    /** Additional class names */
+    className?: string;
+}
+declare function DetailsPopup({ open, onOpenChange, title, details, className, }: DetailsPopupProps): react_jsx_runtime.JSX.Element;
+
+interface ImagePopupProps {
+    /** Controls dialog visibility */
+    open?: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Image source URL */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Additional class names */
+    className?: string;
+}
+declare function ImagePopup({ open, onOpenChange, src, alt, className, }: ImagePopupProps): react_jsx_runtime.JSX.Element;
+
+interface SlideshowSlide {
+    /** Image source URL */
+    src: string;
+    /** Alt text for the image */
+    alt?: string;
+}
+interface SlideshowAuthor {
+    /** Author display name */
+    name: string;
+    /** Author avatar URL */
+    avatarUrl?: string;
+    /** Location text (e.g., "New York, NY") */
+    location?: string;
+}
+interface SlideshowPopupProps {
+    /** Controls dialog visibility */
+    open?: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Array of slides to display */
+    slides?: SlideshowSlide[];
+    /** Author/creator information displayed below the image */
+    author?: SlideshowAuthor;
+    /** Like count displayed with thumbs-up icon */
+    likes?: number | string;
+    /** View count displayed with eye icon */
+    views?: number | string;
+    /** Index of the initially displayed slide (defaults to 0) */
+    initialIndex?: number;
+    /** Callback when slide changes */
+    onSlideChange?: (index: number) => void;
+    /** Additional class names */
+    className?: string;
+}
+declare function SlideshowPopup({ open, onOpenChange, slides, author, likes, views, initialIndex, onSlideChange, className, }: SlideshowPopupProps): react_jsx_runtime.JSX.Element;
+
+interface VideoPopupProps {
+    /** Controls dialog visibility */
+    open?: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** YouTube video ID (e.g., "dQw4w9WgXcQ") */
+    videoId?: string;
+    /** Accessible title for the video (sr-only) */
+    title?: string;
+    /** Additional class names */
+    className?: string;
+}
+declare function VideoPopup({ open, onOpenChange, videoId, title, className, }: VideoPopupProps): react_jsx_runtime.JSX.Element;
+
+interface PlaceInfoRow {
+    id: string;
+    icon: "map-pin" | "globe" | "phone" | "clock";
+    text: string;
+    action?: "copy" | "external-link";
+    onAction?: () => void;
+}
+interface OperatingHoursEntry {
+    day: string;
+    hours: string;
+    isCurrent?: boolean;
+}
+interface AmenityItem {
+    id: string;
+    label: string;
+    available: boolean;
+}
+interface AdmissionItem {
+    id: string;
+    name: string;
+    description?: string;
+    price: string;
+}
+interface RatingBreakdown {
+    stars: number;
+    percentage: number;
+}
+interface PlaceReview {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+    date: string;
+    rating: number;
+    text: string;
+    photos?: string[];
+}
+interface PlaceDetailPanelProps {
+    /** Controls drawer visibility */
+    open?: boolean;
+    /** Callback when drawer open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Place/business name */
+    title?: string;
+    /** Subtitle text (e.g., "Created by Jeffrey Connor") */
+    subtitle?: string;
+    /** Overall rating number (e.g., 4.8) */
+    rating?: number;
+    /** Total number of ratings for header display */
+    ratingCount?: number;
+    /** URL for the hero/cover image */
+    heroImageUrl?: string;
+    /** Alt text for the hero image */
+    heroImageAlt?: string;
+    /** Number of photos to display in badge overlay */
+    photoCount?: number;
+    /** Callback when photo badge is clicked */
+    onPhotosClick?: () => void;
+    /** Tab labels */
+    tabs?: string[];
+    /** Currently active tab index (controlled) */
+    activeTab?: number;
+    /** Callback when tab changes */
+    onTabChange?: (index: number) => void;
+    /** Description paragraph text */
+    description?: string;
+    /** Info rows (location, website, phone) */
+    infoRows?: PlaceInfoRow[];
+    /** Operating hours data */
+    operatingHours?: OperatingHoursEntry[];
+    /** Whether hours section is initially expanded */
+    hoursExpanded?: boolean;
+    /** Section title for amenities */
+    amenitiesTitle?: string;
+    /** List of amenities */
+    amenities?: AmenityItem[];
+    /** Section title for admission/pricing */
+    admissionTitle?: string;
+    /** Admission/pricing rows */
+    admissionItems?: AdmissionItem[];
+    /** Total reviews count */
+    totalReviews?: number;
+    /** Rating breakdown bars */
+    ratingBreakdown?: RatingBreakdown[];
+    /** Individual review cards */
+    reviews?: PlaceReview[];
+    /** Callback when "Read more" is clicked on a review */
+    onReadMore?: (review: PlaceReview) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Place Detail Panel Block
+ *
+ * A comprehensive place/business detail drawer with a hero image, tabbed
+ * navigation, info rows, operating hours, amenities, admission pricing,
+ * rating breakdown, and review cards.
+ *
+ * @example
+ * ```tsx
+ * <PlaceDetailPanel
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   title="Louvre Museum"
+ *   subtitle="Created by Jeffrey Connor"
+ *   rating={4.8}
+ *   ratingCount={3565}
+ *   photoCount={122}
+ * />
+ * ```
+ */
+declare function PlaceDetailPanel({ open, onOpenChange, title, subtitle, rating, ratingCount, heroImageUrl, heroImageAlt, photoCount, onPhotosClick, tabs, activeTab: controlledActiveTab, onTabChange, description, infoRows, operatingHours, hoursExpanded: initialHoursExpanded, amenitiesTitle, amenities, admissionTitle, admissionItems, totalReviews, ratingBreakdown, reviews, onReadMore, className, }: PlaceDetailPanelProps): react_jsx_runtime.JSX.Element;
+
 interface HeroSectionProps {
     title: string;
     subtitle: string;
@@ -3891,12 +4507,14 @@ declare const allColorVariables: {
 }[];
 declare const defaultColors: Record<string, string>;
 type IconShapeId$1 = "rounded" | "circle" | "square";
+type SidebarMode$1 = "light" | "dark";
 declare const defaultBranding: {
     iconShape: IconShapeId$1;
     iconName: string;
     bgColor: string;
     iconColor: string;
     wordmark: string;
+    sidebarMode: SidebarMode$1;
 };
 type ImageKey = "logoLight" | "logoDark" | "faviconLight" | "faviconDark";
 declare const defaultImages: Record<ImageKey, string>;
@@ -3922,6 +4540,14 @@ interface CustomButtonStyle {
 declare const defaultCustomButtonStyles: CustomButtonStyle[];
 declare const defaultButtonColors: Record<string, string>;
 declare const defaultInputSizes: Record<string, string>;
+interface BrandAssetData {
+    id: string;
+    name: string;
+    url: string;
+    source?: "unsplash" | "upload";
+    photographer?: string;
+}
+declare const defaultBrandAssets: BrandAssetData[];
 
 /**
  * Component Registry
@@ -4165,6 +4791,11 @@ declare const blocks: {
         readonly description: "Avatar upload component with preview and edit button.";
         readonly props: readonly ["currentImage?", "onUpload?"];
     };
+    readonly StoreLocationMap: {
+        readonly path: "@/components/blocks";
+        readonly description: "Single store location card with address info, directions button, and embedded Google Maps iframe. Uses TitleGroup for header.";
+        readonly props: readonly ["title?", "subtitle?", "storeLabel?", "storeName?", "addressLines?", "buttonText?", "onDirectionsClick?", "mapEmbedUrl?", "className?"];
+    };
     readonly SettingsListRow: {
         readonly path: "@/components/blocks";
         readonly description: "Row item for settings lists with label, value, and edit action.";
@@ -4304,8 +4935,13 @@ declare const blocks: {
 declare const groupModalDrawerBlocks: {
     readonly FormGroup: {
         readonly path: "@/components/blocks";
-        readonly description: "Comprehensive form layout with header, responsive 2-column rows, and footer. Supports text inputs, selects, date pickers, checkboxes, radio buttons, multiselect tags, image/file uploaders, and sliders.";
-        readonly props: readonly ["title?", "description?", "rows?: FormRowConfig[]", "sortOptions?", "filterOptions?", "inputSize?: 'sm' | 'default' | 'lg'", "onAddNew?", "onCancel?", "onSave?", "onFieldChange?", "showHeader?", "showFooter?"];
+        readonly description: "Single-column form layout with header (title, sort, filter, action button), configurable fields, and footer (cancel/save). Supports text inputs, textareas, selects, date pickers, multiselect checkboxes, checkbox groups, radio groups, multiselect tags, image/file uploaders, and sliders.";
+        readonly props: readonly ["title?", "description?", "fields?: FormFieldConfig[]", "sortOptions?", "filterOptions?", "inputSize?: 'sm' | 'default' | 'lg'", "onAddNew?", "onCancel?", "onSave?", "onFieldChange?", "showHeader?", "showFooter?"];
+    };
+    readonly DetailDrawer: {
+        readonly path: "@/components/blocks";
+        readonly description: "Right-side detail drawer with tabbed content. Info tab shows metadata fields (with avatars, badges, links), rich content sections, and file attachments. Comments tab shows a chat-style thread with sender names, timestamps, and a comment input.";
+        readonly props: readonly ["open?", "onOpenChange?", "title?", "subtitle?", "tabs?: DrawerTab[]", "activeTab?", "onTabChange?", "detailFields?: DetailField[][]", "richContent?", "attachments?: DrawerAttachment[]", "comments?: DrawerComment[]", "commentPlaceholder?", "onComment?", "onAttachmentDownload?"];
     };
 };
 declare const videoBlocks: {
@@ -4635,12 +5271,14 @@ declare function useCSSVariableSync(options?: {
 declare function useIsMobile(): boolean;
 
 type IconShapeId = "rounded" | "circle" | "square";
+type SidebarMode = "light" | "dark";
 interface ThemeBranding {
     iconShape: IconShapeId;
     iconName: string;
     bgColor: string;
     iconColor: string;
     wordmark: string;
+    sidebarMode: SidebarMode;
 }
 interface ThemeImages {
     logoLight: string;
@@ -4652,6 +5290,8 @@ interface BrandAsset {
     id: string;
     name: string;
     url: string;
+    source?: "unsplash" | "upload";
+    photographer?: string;
     storedInPublic?: boolean;
 }
 interface ThemeContextValue {
@@ -4705,6 +5345,7 @@ interface BrandingState {
     bgColor: string;
     iconColor: string;
     wordmark: string;
+    sidebarMode: SidebarMode$1;
 }
 interface ThemeState {
     variables: Record<string, string>;
@@ -4728,6 +5369,10 @@ interface ThemeState {
     addCustomButtonStyle: () => void;
     updateCustomButtonStyle: (id: string, updates: Partial<CustomButtonStyle>) => void;
     deleteCustomButtonStyle: (id: string) => void;
+    brandAssets: BrandAssetData[];
+    addBrandAsset: (asset: BrandAssetData) => void;
+    removeBrandAsset: (id: string) => void;
+    renameBrandAsset: (id: string, name: string) => void;
     brandHue: number;
     brandVibrancy: number;
     syncRelatedColors: boolean;
@@ -4753,11 +5398,23 @@ interface ThemeDrawerProps {
         branding: BrandingState;
         images: Record<ImageKey, string>;
         customButtonStyles: CustomButtonStyle[];
+        brandAssets: BrandAssetData[];
     }) => void;
+    unsplashAccessKey?: string;
+    onBrandAssetUpload?: (file: File) => Promise<{
+        url: string;
+        name: string;
+    }>;
+    onBrandAssetSave?: (imageUrl: string, name: string) => Promise<{
+        url: string;
+        name: string;
+    }>;
+    onBrandAssetDelete?: (asset: BrandAssetData) => Promise<void>;
     initialOverrides?: Record<string, string>;
     initialBranding?: BrandingState;
     initialImages?: Record<ImageKey, string>;
     initialCustomButtonStyles?: CustomButtonStyle[];
+    initialBrandAssets?: BrandAssetData[];
     storageKey?: string;
     title?: string;
     width?: number;
@@ -4767,7 +5424,7 @@ interface ThemeDrawerProps {
     stickyTopOffset?: number;
     children?: React__default.ReactNode;
 }
-declare function ThemeDrawer({ devOnly, triggerPosition, defaultOpen, panels: enabledPanels, onThemeChange, onBrandingChange, onImagesChange, onImageUpload, onSave, initialOverrides, initialBranding, initialImages, initialCustomButtonStyles, storageKey, title, width, readOnly, hideSave, docked, stickyTopOffset, children, }: ThemeDrawerProps): react_jsx_runtime.JSX.Element | null;
+declare function ThemeDrawer({ devOnly, triggerPosition, defaultOpen, panels: enabledPanels, onThemeChange, onBrandingChange, onImagesChange, onImageUpload, onSave, unsplashAccessKey, onBrandAssetUpload, onBrandAssetSave, onBrandAssetDelete, initialOverrides, initialBranding, initialImages, initialCustomButtonStyles, initialBrandAssets, storageKey, title, width, readOnly, hideSave, docked, stickyTopOffset, children, }: ThemeDrawerProps): react_jsx_runtime.JSX.Element | null;
 
 interface HslColorPickerProps {
     value: string;
@@ -4792,4 +5449,12 @@ interface ColorInputRowProps {
  */
 declare function ColorInputRow({ label, value, onChange, variableOptions, }: ColorInputRowProps): react_jsx_runtime.JSX.Element;
 
-export { AccountSettingsShell, type AccountTab, ActivityFeed, Avatar, AvatarFallback, AvatarImage, BadgesCard, BlogCards, BottomInputChatWidget, type BrandAsset, type BrandingState, Button, Calendar, CategoryGrid, CenteredHero, ChatBubble, type ChatBubbleMessage, ChatDateSeparator, ChatInput, ChatMessageList, Checkbox, CheckboxWithLabel, CircularProgressBar, CircularProgressBarList, type CircularProgressBarListProps, type CircularProgressBarProps, ColorInputRow, ComponentSearch, ContentDropzone, ContentWithImage, CoreValuesGrid, CreditCardDisplay, CtaBanner, type CustomButtonStyle, CustomComponentHelper, DashboardShell, DateInput, DescriptionCard, DestinationCards, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DoubleSidebar, type DoubleSidebarSection, DoubleSidebarShell, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FaqAccordion, FaqsTable, FeatureWithImage, FeaturedNewsCards, FeaturedPlaces, FeaturesComparison, FileUploader, type FilterCheckboxGroupConfig, type FilterDateRangeConfig, type FilterDropdownConfig, type FilterOption, FilterPopover, type FilterState, FixedColumnDataTable, FlairBanner, FooterNavbar, FormGroup, GallerySection, GradientBanner, GridTilesList, Header, HeroDarkCentered, HeroDarkWithImage, HeroFullwidthImage, HeroSection, HowItWorks, HslColorPicker, type IconNavItemConfig, type IconShapeId, IconSidebar, IconSidebarShell, ImageFeedWithNestedComments, type ImageKey, ImageUploader, InfoCard, type InfoCardProps, Input, Label, LargeImageLabelsList, Sidebar as LayoutSidebar, type LineTab, LineTabs, type LinkItem, LinksCard, type LinksCardProps, Loader, LoginBrandingPanel, MenuSection, type MenufocusItem, MenufocusTemplate, type MenufocusTemplateProps, MessengerInput, MessengerSidebar, MetricsSection, MobileBottomNav, MobileMenuShell, type MobileNavTabConfig, MonthlyCalendarWidget, MultiselectCheckboxField, MultiselectTags, MultistepProgressBarShell, type MultistepProgressBarShellProps, type MultistepProgressBarStep, MultistepShell, MultistepSidebarShell, type NavItem, type NavSection, type NavTab, NestedCommentsTable, NestedDataTable, OfficeLocations, PageHeaderSection, Pagination, ParticipantList, type Persona, PersonaCard, PersonaGrid, PillTabs, type PillTabsProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortfolioCard, PreviewBrandingContext, PricingCards, PricingCta, ProfileCard, ProfileGridTilesList, ProfileImageUploader, ProgressBar, type ProjectContext, ProjectContextShell, type ProjectContextTab, PromptChipsRow, PromptTemplate, RadioGroup, RadioGroupItem, RangeInput, ReviewsGrid, ReviewsTable, type Screen, type ScreenConnection, ScreenFlowchart, ScreenPromptBuilder, ScreenPromptTemplate, type ScreenStatus, type ScreenType, ScrollArea, ScrollBar, SearchBar, SearchBarShell, SearchSidebar, Searchbox, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectablePills, Separator, SettingsListRow, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar$1 as Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNav, SidebarProfileCard, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkillsCard, Slider, SlideshowGridTiles, SocialFeed, SocialProof, type SortOption$b as SortOption, StandardDataTable, StandardListWithImage, StandardPageShell, StatsCard, type Step, StepTracker, Switch, type TableColumn, type TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TeamCardsGrid, TeamCircularGrid, TestimonialCarousel, TextInput, Textarea, type ThemeBranding, ThemeContext, ThemeDrawer, type ThemeImages, ThemeProvider, type ThemeState, TitleGroup, type TitleGroupProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, UpvotingPostsTable, type VariableOption, VerticalHowItWorks, VerticalMultistepShell, VerticalStepTracker, VideoChatControls, VideoContentSection, VideoPlaylistCard, VideoPlaylistItem, WebcamPreview, YouTubePlayer, accountTabs, allColorVariables, blocks, broadcastBranding, broadcastCSSVariables, broadcastImages, buttonVariants, cn, colorVariables, defaultBranding, defaultButtonColorStyles, defaultButtonColors, defaultButtonSizes, defaultColors, defaultCustomButtonStyles, defaultDoubleSidebarSections, defaultIconNavItems, defaultImages, defaultInputSizes, defaultProgressBarSteps, defaultSteps, defaultSupportLinks, defaultTypography, defaultVerticalSteps, getChildScreens, getScreenUrl, getTopLevelScreens, groupModalDrawerBlocks, layoutPrimitives, layoutShells, marketingBlocks, pageTemplates, pricingBlocks, removeCSSVariables, setCSSVariable, setCSSVariables, setupCSSVariableListener, useCSSVariableSync, useIsMobile, usePreviewBranding, useSidebar, useThemeBrandAssets, useThemeBranding, useThemeImages, videoBlocks };
+/**
+ * Unsplash API configuration
+ *
+ * This key is bundled into the SDK for internal use.
+ * Consumer apps get Unsplash support with zero configuration.
+ */
+declare const UNSPLASH_ACCESS_KEY = "l6HLJ6AXvytE4eSAIh-5sXTd_NHOEa7lHS2l2XiGhAY";
+
+export { AccountSettingsShell, type AccountTab, ActivityFeed, type AdmissionItem, type AmenityItem, Avatar, AvatarFallback, AvatarImage, BadgesCard, type BillingPeriod, BlogCards, BottomInputChatWidget, type BrandAsset, type BrandAssetData, type BrandingState, Button, Calendar, CategoryGrid, CenteredHero, ChatBubble, type ChatBubbleMessage, ChatDateSeparator, ChatInput, ChatMessageList, Checkbox, CheckboxWithLabel, CircularProgressBar, CircularProgressBarList, type CircularProgressBarListProps, type CircularProgressBarProps, ColorInputRow, ComponentSearch, ConfirmationPopup, type ConfirmationPopupProps, type ContactFormField, ContactFormPopup, type ContactFormPopupProps, ContentDropzone, ContentWithImage, CoreValuesGrid, CreditCardDisplay, CtaBanner, type CustomButtonStyle, CustomComponentHelper, DashboardShell, DateInput, DescriptionCard, DestinationCards, DetailDrawer, type DetailDrawerProps, type DetailField, type DetailItem, DetailsPopup, type DetailsPopupProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DoubleSidebar, type DoubleSidebarSection, DoubleSidebarShell, type DrawerAttachment, type DrawerComment, type DrawerTab, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FaqAccordion, FaqsTable, FeatureWithImage, FeaturedNewsCards, FeaturedPlaces, FeaturesComparison, FeedbackPopup, type FeedbackPopupProps, FileUploader, type FilterCheckboxGroupConfig, type FilterDateRangeConfig, type FilterDropdownConfig, type FilterOption, FilterPopover, type FilterState, FixedColumnDataTable, FlairBanner, FooterNavbar, FormField, type FormFieldConfig, FormGroup, type FormGroupProps, GallerySection, GradientBanner, GridTilesList, Header, HeroDarkCentered, HeroDarkWithImage, HeroFullwidthImage, HeroSection, HowItWorks, HslColorPicker, type IconNavItemConfig, type IconShapeId, IconSidebar, IconSidebarShell, ImageFeedWithNestedComments, type ImageKey, ImagePopup, type ImagePopupProps, ImageUploader, InfoCard, type InfoCardProps, Input, type InvoiceLineItem, InvoicePopup, type InvoicePopupProps, Label, LargeImageLabelsList, Sidebar as LayoutSidebar, type LineTab, LineTabs, type LinkItem, LinksCard, type LinksCardProps, Loader, LoginBrandingPanel, MenuSection, type MenufocusItem, MenufocusTemplate, type MenufocusTemplateProps, MessengerInput, MessengerSidebar, MetricsSection, MobileBottomNav, MobileMenuShell, type MobileNavTabConfig, MonthlyCalendarWidget, MultiselectCheckboxField, MultiselectTags, MultistepProgressBarShell, type MultistepProgressBarShellProps, type MultistepProgressBarStep, MultistepShell, MultistepSidebarShell, type NavItem, type NavSection, type NavTab, NestedCommentsTable, NestedDataTable, OfficeLocations, type OperatingHoursEntry, PageHeaderSection, Pagination, ParticipantList, type Persona, PersonaCard, PersonaGrid, PillTabs, type PillTabsProps, PlaceDetailPanel, type PlaceDetailPanelProps, type PlaceInfoRow, type PlaceReview, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortfolioCard, PreviewBrandingContext, PricingCards, PricingCta, type PricingPlan, PricingPlansPopup, type PricingPlansPopupProps, ProfileCard, type ProfileDetailRow, ProfileGridTilesList, ProfileImageUploader, ProgressBar, type ProjectContext, ProjectContextShell, type ProjectContextTab, PromptChipsRow, PromptTemplate, PurchaseConfirmationPopup, type PurchaseConfirmationPopupProps, RadioGroup, RadioGroupItem, RangeInput, type RatingBreakdown, ReviewsGrid, ReviewsTable, type Screen, type ScreenConnection, ScreenFlowchart, ScreenPromptBuilder, ScreenPromptTemplate, type ScreenStatus, type ScreenType, ScrollArea, ScrollBar, SearchBar, SearchBarShell, SearchSidebar, Searchbox, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectablePills, Separator, SettingsListRow, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar$1 as Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, type SidebarMode, SidebarNav, SidebarProfileCard, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkillsCard, Slider, type SlideshowAuthor, SlideshowGridTiles, SlideshowPopup, type SlideshowPopupProps, type SlideshowSlide, SocialFeed, SocialProof, type SortOption$b as SortOption, StandardDataTable, StandardListWithImage, StandardPageShell, StatsCard, type Step, StepTracker, StoreLocationMap, type StoreLocationMapProps, Switch, type TableColumn, type TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TeamCardsGrid, TeamCircularGrid, TermsOfServicePopup, type TermsOfServicePopupProps, TestimonialCarousel, TextInput, Textarea, type ThemeBranding, ThemeContext, ThemeDrawer, type ThemeDrawerProps, type ThemeImages, ThemeProvider, type ThemeState, TitleGroup, type TitleGroupProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, UNSPLASH_ACCESS_KEY, UpvotingPostsTable, type VariableOption, VerticalHowItWorks, VerticalMultistepShell, VerticalStepTracker, VideoChatControls, VideoContentSection, VideoPlaylistCard, VideoPlaylistItem, VideoPopup, type VideoPopupProps, ViewProfilePopup, type ViewProfilePopupProps, WebcamPreview, YouTubePlayer, accountTabs, allColorVariables, blocks, broadcastBranding, broadcastCSSVariables, broadcastImages, buttonVariants, cn, colorVariables, defaultBrandAssets, defaultBranding, defaultButtonColorStyles, defaultButtonColors, defaultButtonSizes, defaultColors, defaultCustomButtonStyles, defaultDoubleSidebarSections, defaultIconNavItems, defaultImages, defaultInputSizes, defaultProgressBarSteps, defaultSteps, defaultSupportLinks, defaultTypography, defaultVerticalSteps, getChildScreens, getScreenUrl, getTopLevelScreens, groupModalDrawerBlocks, layoutPrimitives, layoutShells, marketingBlocks, pageTemplates, pricingBlocks, removeCSSVariables, setCSSVariable, setCSSVariables, setupCSSVariableListener, useCSSVariableSync, useIsMobile, usePreviewBranding, useSidebar, useThemeBrandAssets, useThemeBranding, useThemeImages, videoBlocks };