/**
 * Vanilla JS size-guide trigger + drawer for the Shopify storefront.
 *
 * This mirrors the Prime Products product-detail SizeGuideModal without
 * pulling React into the liquid/theme-extension trigger path.
 */
interface RawSection {
    name: string;
    description?: string;
    note?: string;
    headers?: string[];
    rows: Array<Record<string, unknown>>;
}
interface RawSizeGuideRegion {
    code: string;
    label: string;
    columns: string[];
}
interface RawSizeGuideFilter {
    key: string;
    label: string;
    options: Array<{
        value: string;
        label: string;
    }>;
    default?: string;
}
interface RawSizeGuide {
    title?: string;
    subtitle?: string;
    headers?: string[];
    rows?: Array<Record<string, unknown>>;
    unit?: string;
    sections?: RawSection[] | Record<string, Partial<RawSection>>;
    howToMeasure?: string[];
    fitTerms?: Array<{
        name: string;
        description: string;
    }>;
    regions?: RawSizeGuideRegion[];
    filters?: RawSizeGuideFilter[];
    noUnitToggle?: boolean;
    guideImages?: Array<{
        label: string;
        url: string;
    }>;
}
interface ButtonOptions {
    label?: string;
    accentColor?: string;
    locale?: string;
}
export declare const SIZE_GUIDE_STYLES = "\n  .ps-sg-btn {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    padding: 0 0 12px;\n    margin: 0 0 12px;\n    background: transparent;\n    border: 0;\n    border-bottom: 1px solid rgba(15, 23, 42, 0.1);\n    border-radius: 0;\n    color: rgba(15, 23, 42, 0.58);\n    font-size: 13px;\n    font-weight: 500;\n    font-family: inherit;\n    cursor: pointer;\n    transition: color 0.16s ease, border-color 0.16s ease;\n  }\n  .ps-sg-btn:hover {\n    color: #0f172a;\n    border-color: rgba(15, 23, 42, 0.18);\n    background: transparent;\n  }\n  .ps-sg-btn-main {\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n  }\n  .ps-sg-btn svg { width: 14px; height: 14px; }\n  .ps-sg-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 2147483646;\n    display: flex;\n    justify-content: flex-end;\n    background: rgba(0, 0, 0, 0.4);\n    backdrop-filter: blur(4px);\n    opacity: 0;\n    animation: ps-sg-overlay-in 0.18s ease forwards;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    color: #0f172a;\n  }\n  @keyframes ps-sg-overlay-in { to { opacity: 1; } }\n  .ps-sg-drawer {\n    width: 100%;\n    max-width: 520px;\n    height: 100vh;\n    height: 100dvh;\n    background: #ffffff;\n    display: flex;\n    flex-direction: column;\n    box-shadow: -24px 0 60px rgba(15, 23, 42, 0.22);\n    transform: translateX(100%);\n    animation: ps-sg-drawer-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n  }\n  @keyframes ps-sg-drawer-in { to { transform: translateX(0); } }\n  .ps-sg-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 18px;\n    padding: 14px 20px;\n    border-bottom: 1px solid rgba(15, 23, 42, 0.1);\n    flex-shrink: 0;\n  }\n  .ps-sg-heading {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    min-width: 0;\n  }\n  .ps-sg-heading-icon {\n    width: 32px;\n    height: 32px;\n    border-radius: 12px;\n    background: rgba(33, 84, 239, 0.1);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--ps-sg-accent, #2154EF);\n    flex: 0 0 auto;\n  }\n  .ps-sg-heading-icon svg { width: 16px; height: 16px; }\n  .ps-sg-title {\n    margin: 0;\n    color: #0f172a;\n    font-size: 15px;\n    font-weight: 650;\n    line-height: 1.2;\n  }\n  .ps-sg-subtitle {\n    margin: 2px 0 0;\n    color: rgba(15, 23, 42, 0.55);\n    font-size: 12px;\n    line-height: 1.35;\n  }\n  .ps-sg-close {\n    width: 32px;\n    height: 32px;\n    border-radius: 999px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: 0;\n    color: rgba(15, 23, 42, 0.52);\n    cursor: pointer;\n    flex: 0 0 auto;\n    transition: background 0.16s ease, color 0.16s ease;\n  }\n  .ps-sg-close:hover {\n    background: #f8fafc;\n    color: #0f172a;\n  }\n  .ps-sg-close svg { width: 16px; height: 16px; }\n  .ps-sg-filter-row {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-end;\n    gap: 12px;\n    padding: 14px 20px 4px;\n    flex-shrink: 0;\n  }\n  .ps-sg-control-row {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 10px;\n    padding: 14px 20px 8px;\n    flex-shrink: 0;\n  }\n  .ps-sg-filter-control {\n    min-width: 160px;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n  .ps-sg-control-label {\n    color: rgba(15, 23, 42, 0.48);\n    font-size: 10px;\n    font-weight: 750;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n  }\n  .ps-sg-dropdown {\n    position: relative;\n  }\n  .ps-sg-dropdown-trigger {\n    min-height: 34px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    width: 100%;\n    padding: 9px 12px;\n    border: 1px solid rgba(15, 23, 42, 0.1);\n    border-radius: 8px;\n    background: #ffffff;\n    color: rgba(15, 23, 42, 0.72);\n    font-size: 12px;\n    font-weight: 650;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    font-family: inherit;\n    cursor: pointer;\n    transition: border-color 0.16s ease, color 0.16s ease;\n  }\n  .ps-sg-region .ps-sg-dropdown-trigger {\n    width: auto;\n    border-radius: 999px;\n    padding: 7px 12px 7px 14px;\n    background: #f8fafc;\n  }\n  .ps-sg-dropdown-trigger:hover,\n  .ps-sg-dropdown.ps-open .ps-sg-dropdown-trigger {\n    border-color: var(--ps-sg-accent, #2154EF);\n    color: #0f172a;\n  }\n  .ps-sg-dropdown-chevron {\n    width: 14px;\n    height: 14px;\n    color: rgba(15, 23, 42, 0.45);\n    transition: transform 0.18s ease;\n    flex: 0 0 auto;\n  }\n  .ps-sg-dropdown.ps-open .ps-sg-dropdown-chevron {\n    transform: rotate(180deg);\n  }\n  .ps-sg-dropdown-menu {\n    display: none;\n    position: absolute;\n    top: calc(100% + 6px);\n    left: 0;\n    right: 0;\n    z-index: 3;\n    min-width: 148px;\n    padding: 4px 0;\n    background: #ffffff;\n    border: 1px solid rgba(15, 23, 42, 0.1);\n    border-radius: 10px;\n    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);\n    overflow: hidden;\n  }\n  .ps-sg-region .ps-sg-dropdown-menu {\n    right: auto;\n  }\n  .ps-sg-dropdown.ps-open .ps-sg-dropdown-menu {\n    display: block;\n    animation: ps-sg-menu-in 0.14s ease forwards;\n  }\n  @keyframes ps-sg-menu-in {\n    from { opacity: 0; transform: translateY(-6px) scale(0.98); }\n    to { opacity: 1; transform: translateY(0) scale(1); }\n  }\n  .ps-sg-dropdown-option {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    padding: 8px 14px;\n    border: 0;\n    background: transparent;\n    color: rgba(15, 23, 42, 0.72);\n    font-size: 12px;\n    font-weight: 550;\n    text-align: left;\n    font-family: inherit;\n    cursor: pointer;\n  }\n  .ps-sg-dropdown-option:hover {\n    background: #f8fafc;\n  }\n  .ps-sg-dropdown-option.ps-selected {\n    color: var(--ps-sg-accent, #2154EF);\n    background: rgba(33, 84, 239, 0.05);\n  }\n  .ps-sg-check {\n    width: 12px;\n    height: 12px;\n    color: var(--ps-sg-accent, #2154EF);\n  }\n  .ps-sg-toggle {\n    display: inline-flex;\n    gap: 4px;\n    padding: 2px;\n    background: #f8fafc;\n    border: 1px solid rgba(15, 23, 42, 0.1);\n    border-radius: 999px;\n  }\n  .ps-sg-toggle button {\n    border: 0;\n    border-radius: 999px;\n    padding: 5px 14px;\n    background: transparent;\n    color: rgba(15, 23, 42, 0.55);\n    font-size: 12px;\n    font-weight: 700;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    font-family: inherit;\n    cursor: pointer;\n    transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;\n  }\n  .ps-sg-toggle button.ps-sg-active {\n    background: var(--ps-sg-accent, #2154EF);\n    color: #ffffff;\n    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);\n  }\n  .ps-sg-body {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    padding: 16px 20px 20px;\n  }\n  .ps-sg-section {\n    margin-bottom: 20px;\n  }\n  .ps-sg-section:last-child {\n    margin-bottom: 0;\n  }\n  .ps-sg-section-title {\n    margin: 0 0 8px;\n    color: #0f172a;\n    font-size: 14px;\n    font-weight: 650;\n  }\n  .ps-sg-section-desc {\n    margin: -2px 0 8px;\n    color: rgba(15, 23, 42, 0.55);\n    font-size: 12px;\n    line-height: 1.45;\n  }\n  .ps-sg-table-scroll {\n    overflow-x: auto;\n    margin: 0 -4px;\n    padding: 0 4px;\n  }\n  .ps-sg-table {\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n    font-size: 13px;\n  }\n  .ps-sg-table th {\n    padding: 10px 10px;\n    border-bottom: 1px solid rgba(15, 23, 42, 0.1);\n    color: rgba(15, 23, 42, 0.55);\n    font-size: 11px;\n    font-weight: 650;\n    letter-spacing: 0.04em;\n    text-align: left;\n    text-transform: uppercase;\n    white-space: nowrap;\n  }\n  .ps-sg-table th:first-child {\n    color: var(--ps-sg-accent, #2154EF);\n    padding-left: 0;\n  }\n  .ps-sg-table td {\n    padding: 10px 10px;\n    border-bottom: 1px solid rgba(15, 23, 42, 0.1);\n    color: rgba(15, 23, 42, 0.58);\n    font-size: 13px;\n    white-space: nowrap;\n  }\n  .ps-sg-table td:first-child {\n    padding-left: 0;\n    color: #0f172a;\n    font-weight: 650;\n  }\n  .ps-sg-table tr.ps-sg-row-alt {\n    background: rgba(33, 84, 239, 0.05);\n  }\n  .ps-sg-table-note,\n  .ps-sg-unit-note,\n  .ps-sg-empty {\n    margin: 6px 0 0;\n    color: rgba(15, 23, 42, 0.42);\n    font-size: 12px;\n    line-height: 1.45;\n  }\n  .ps-sg-table-note {\n    font-style: italic;\n  }\n  .ps-sg-transposed th:first-child,\n  .ps-sg-transposed td:first-child {\n    position: sticky;\n    left: 0;\n    background: #ffffff;\n    z-index: 1;\n  }\n  .ps-sg-transposed tr.ps-sg-row-alt td:first-child {\n    background: #ffffff;\n  }\n  .ps-sg-card {\n    margin-top: 16px;\n    padding: 16px;\n    border: 1px solid rgba(15, 23, 42, 0.1);\n    border-radius: 12px;\n    background: #f8fafc;\n  }\n  .ps-sg-card-title {\n    margin: 0 0 10px;\n    color: #0f172a;\n    font-size: 12px;\n    font-weight: 750;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n  }\n  .ps-sg-fit-term {\n    display: flex;\n    gap: 8px;\n    margin-top: 8px;\n    color: rgba(15, 23, 42, 0.58);\n    font-size: 13px;\n    line-height: 1.45;\n  }\n  .ps-sg-fit-term strong {\n    color: #0f172a;\n    white-space: nowrap;\n  }\n  .ps-sg-measure-list {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    display: grid;\n    gap: 8px;\n  }\n  .ps-sg-measure-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    color: rgba(15, 23, 42, 0.58);\n    font-size: 13px;\n    line-height: 1.5;\n  }\n  .ps-sg-measure-index {\n    width: 16px;\n    height: 16px;\n    border-radius: 999px;\n    background: rgba(33, 84, 239, 0.1);\n    color: var(--ps-sg-accent, #2154EF);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 10px;\n    font-weight: 800;\n    flex: 0 0 auto;\n    margin-top: 2px;\n  }\n  .ps-sg-image-grid {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 12px;\n  }\n  .ps-sg-image-frame {\n    border-radius: 12px;\n    overflow: hidden;\n    background: #f8fafc;\n    border: 1px solid rgba(15, 23, 42, 0.1);\n  }\n  .ps-sg-image-frame img {\n    display: block;\n    width: 100%;\n    height: auto;\n    object-fit: contain;\n  }\n  .ps-sg-image-label {\n    display: block;\n    margin-top: 6px;\n    color: rgba(15, 23, 42, 0.55);\n    font-size: 12px;\n    font-weight: 550;\n    text-align: center;\n  }\n  @media (max-width: 640px) {\n    .ps-sg-drawer { max-width: none; }\n    .ps-sg-header,\n    .ps-sg-filter-row,\n    .ps-sg-control-row,\n    .ps-sg-body {\n      padding-left: 16px;\n      padding-right: 16px;\n    }\n    .ps-sg-filter-control {\n      min-width: min(170px, 100%);\n      flex: 1 1 150px;\n    }\n    .ps-sg-image-grid {\n      grid-template-columns: 1fr;\n    }\n  }\n";
export declare function createSizeGuideButton(parent: Element, sizeGuide: RawSizeGuide, options?: ButtonOptions): () => void;
export {};