/**
 * Vanilla JS size-guide button + modal for the Shopify storefront.
 *
 * Mirrors the prime-main SizeGuideModal design but built without React
 * so it can attach next to (not inside) the React-mounted SDK root.
 *
 * Usage:
 *   createSizeGuideButton(parentEl, sizeGuide, { buttonStyles, ... });
 *
 * The button is inserted as a sibling above the React root. Clicking
 * it appends a modal to <body> with a size-chart table, cm/in toggle,
 * and "How to measure" hints.
 */
interface RawSection {
    name: string;
    description?: string;
    headers: string[];
    rows: Array<Record<string, string>>;
}
interface RawSizeGuide {
    title?: string;
    headers?: string[];
    rows?: Array<Record<string, string>>;
    unit?: "cm" | "in";
    sections?: RawSection[];
    howToMeasure?: string[];
}
interface ButtonOptions {
    label?: string;
    accentColor?: string;
}
export declare const SIZE_GUIDE_STYLES = "\n  .ps-sg-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 14px;\n    margin: 0 0 10px 0;\n    background: transparent;\n    border: 1px solid rgba(0, 0, 0, 0.12);\n    border-radius: 8px;\n    color: var(--ps-sg-accent, #2154EF);\n    font-size: 13px;\n    font-weight: 600;\n    font-family: inherit;\n    cursor: pointer;\n    transition: background 0.15s, border-color 0.15s;\n  }\n  .ps-sg-btn:hover {\n    background: rgba(33, 84, 239, 0.04);\n    border-color: var(--ps-sg-accent, #2154EF);\n  }\n  .ps-sg-btn svg { width: 14px; height: 14px; }\n  .ps-sg-overlay {\n    position: fixed; inset: 0;\n    background: rgba(15, 23, 42, 0.55);\n    display: flex; align-items: center; justify-content: center;\n    z-index: 99999;\n    padding: 16px;\n    opacity: 0;\n    animation: ps-sg-fadein 0.18s ease forwards;\n  }\n  @keyframes ps-sg-fadein { to { opacity: 1; } }\n  .ps-sg-modal {\n    background: #FFFFFF;\n    border-radius: 14px;\n    width: 100%;\n    max-width: 720px;\n    max-height: 88vh;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    color: #1f2937;\n  }\n  .ps-sg-header {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 18px 22px 14px;\n    border-bottom: 1px solid rgba(15, 23, 42, 0.08);\n  }\n  .ps-sg-title {\n    margin: 0;\n    font-size: 17px;\n    font-weight: 700;\n  }\n  .ps-sg-toggle {\n    display: inline-flex;\n    background: rgba(15, 23, 42, 0.06);\n    border-radius: 8px;\n    padding: 3px;\n    margin-right: 12px;\n  }\n  .ps-sg-toggle button {\n    padding: 5px 14px;\n    background: transparent;\n    border: none;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 700;\n    cursor: pointer;\n    color: rgba(15, 23, 42, 0.55);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    font-family: inherit;\n  }\n  .ps-sg-toggle button.ps-sg-active {\n    background: #FFFFFF;\n    color: #1f2937;\n    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);\n  }\n  .ps-sg-close {\n    background: transparent;\n    border: none;\n    color: rgba(15, 23, 42, 0.55);\n    cursor: pointer;\n    padding: 4px;\n    border-radius: 6px;\n    font-family: inherit;\n  }\n  .ps-sg-close:hover { background: rgba(15, 23, 42, 0.06); }\n  .ps-sg-close svg { width: 18px; height: 18px; }\n  .ps-sg-body {\n    padding: 18px 22px 22px;\n    overflow-y: auto;\n    flex: 1;\n  }\n  .ps-sg-section { margin-bottom: 22px; }\n  .ps-sg-section:last-child { margin-bottom: 0; }\n  .ps-sg-section-title {\n    margin: 0 0 6px;\n    font-size: 14px;\n    font-weight: 700;\n    color: #0f172a;\n  }\n  .ps-sg-section-desc {\n    margin: 0 0 10px;\n    font-size: 12px;\n    color: rgba(15, 23, 42, 0.6);\n  }\n  .ps-sg-table-wrap {\n    overflow-x: auto;\n    border: 1px solid rgba(15, 23, 42, 0.08);\n    border-radius: 10px;\n  }\n  .ps-sg-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 13px;\n  }\n  .ps-sg-table thead th {\n    background: rgba(15, 23, 42, 0.04);\n    padding: 10px 12px;\n    text-align: left;\n    font-weight: 700;\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: rgba(15, 23, 42, 0.6);\n    border-bottom: 1px solid rgba(15, 23, 42, 0.08);\n  }\n  .ps-sg-table tbody td {\n    padding: 10px 12px;\n    border-bottom: 1px solid rgba(15, 23, 42, 0.05);\n  }\n  .ps-sg-table tbody tr:last-child td { border-bottom: none; }\n  .ps-sg-htm {\n    margin-top: 18px;\n    padding: 14px 16px;\n    background: rgba(33, 84, 239, 0.05);\n    border-radius: 10px;\n    border: 1px solid rgba(33, 84, 239, 0.12);\n  }\n  .ps-sg-htm-title {\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--ps-sg-accent, #2154EF);\n    margin-bottom: 8px;\n  }\n  .ps-sg-htm ul {\n    margin: 0;\n    padding-left: 18px;\n    font-size: 12px;\n    line-height: 1.6;\n    color: #1f2937;\n  }\n";
/**
 * Create a "Size Guide" button and insert it as a sibling above the
 * given parent element. Returns a teardown function that removes the
 * button + any open modal.
 */
export declare function createSizeGuideButton(parent: Element, sizeGuide: RawSizeGuide, options?: ButtonOptions): () => void;
export {};
