@jotul/jotul-widgets 1.0.0 → 1.0.1

package/dist/JotulWidget.d.ts

@@ -4,5 +4,5 @@ import type { JotulWidgetProps } from './types';
 export { normalizeWidgetLocale } from './i18n/widgetStrings';
 export type { JotulWidgetLocale } from './i18n/widgetStrings';
 export { checkWidgetAuthorization, searchLocationSuggestions, searchDealersByCoordinates, searchDealersByPostalCode, };
-export type { CheckWidgetAuthorizationOptions, DealerSearchResponse, JotulWidgetProps, JotulWidgetType, WidgetAuthClientResponse, } from './types';
-export declare function JotulWidget({ type, endpoint, className, productName, locale: localeProp, brands, }: JotulWidgetProps): import("react/jsx-runtime").JSX.Element;
+export type { CheckWidgetAuthorizationOptions, DealerSearchResponse, JotulWidgetButtonStyling, JotulWidgetProps, JotulWidgetStyling, JotulWidgetType, WidgetAuthClientResponse, } from './types';
+export declare function JotulWidget({ type, endpoint, className, productName, locale: localeProp, brands, styling, }: JotulWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/JotulWidget.js

@@ -4,11 +4,11 @@ import './JotulWidget.css';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FinderSearchRowSkeleton } from './components/FinderSearchRowSkeleton';
 import { ProductPageWidget } from './widgets/ProductPageWidget';
-import { FIND_DEALER_BUTTON_CLASS } from './constants';
 import { ButtonSpinner } from './icons/ButtonSpinner';
 import { normalizeWidgetLocale, WIDGET_STRINGS } from './i18n/widgetStrings';
 import { checkWidgetAuthorization, searchLocationSuggestions, searchDealersByCoordinates, searchDealersByPostalCode, } from './api';
 import { createInquiryFormValues, getSafeWidgetErrorMessage, isValidEmail, isWidgetType, renderReadyState, } from './utils';
+import { getWidgetPrimaryButtonPresentation } from './utils/widgetPrimaryButtonPresentation';
 export { normalizeWidgetLocale } from './i18n/widgetStrings';
 export { checkWidgetAuthorization, searchLocationSuggestions, searchDealersByCoordinates, searchDealersByPostalCode, };
 const GEO_PERMISSION_DENIED = 1;
@@ -19,9 +19,12 @@ const GEOLOCATION_OPTIONS = {
     timeout: 15000,
     maximumAge: 300000,
 };
-export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, productName, locale: localeProp, brands, }) {
+export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, productName, locale: localeProp, brands, styling, }) {
     const resolvedLocale = useMemo(() => normalizeWidgetLocale(localeProp), [localeProp]);
     const t = WIDGET_STRINGS[resolvedLocale];
+    const heroPrimaryButton = useMemo(() => getWidgetPrimaryButtonPresentation(styling?.button, 'hero', {
+        disabledWait: true,
+    }), [styling?.button]);
     const [auth, setAuth] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
     const [searchResult, setSearchResult] = useState(null);
@@ -180,11 +183,11 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
                         else {
                             setShouldAutoLocateAfterAuth(true);
                         }
-                    }, className: FIND_DEALER_BUTTON_CLASS, children: t.findDealer }) }) }));
+                    }, className: heroPrimaryButton.className, style: heroPrimaryButton.style, children: t.findDealer }) }) }));
     }
     const productPageAuthPending = widgetType === 'productPage' && isOpen && (auth === null || isLoading);
     if (productPageAuthPending) {
-        return (_jsx("div", { className: rootClass, children: _jsx("div", { className: "jwi-flex jwi-py-8 jwi-items-center jwi-justify-center", children: _jsx("button", { type: "button", disabled: true, className: `${FIND_DEALER_BUTTON_CLASS} jwi-opacity-95`, children: _jsxs("span", { className: "jwi-inline-flex jwi-items-center jwi-gap-2", children: [_jsx(ButtonSpinner, {}), t.loading] }) }) }) }));
+        return (_jsx("div", { className: rootClass, children: _jsx("div", { className: "jwi-flex jwi-py-8 jwi-items-center jwi-justify-center", children: _jsx("button", { type: "button", disabled: true, className: `${heroPrimaryButton.className} jwi-opacity-95`, style: heroPrimaryButton.style, children: _jsxs("span", { className: "jwi-inline-flex jwi-items-center jwi-gap-2", children: [_jsx(ButtonSpinner, {}), t.loading] }) }) }) }));
     }
     const waitingForAuth = auth === null && !(widgetType === 'productPage' && !isOpen);
     if ((isLoading || waitingForAuth) && type !== 'productPage') {
@@ -194,7 +197,7 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
         return _jsx("div", { className: rootClass, children: getSafeWidgetErrorMessage(auth?.error, t) });
     }
     if (widgetType === 'productPage') {
-        return (_jsx("div", { className: rootClass, children: _jsx(ProductPageWidget, { t: t, isSearching: isSearching, locationError: locationError, searchResult: searchResult?.ok === false
+        return (_jsx("div", { className: rootClass, children: _jsx(ProductPageWidget, { t: t, buttonStyling: styling?.button, isSearching: isSearching, locationError: locationError, searchResult: searchResult?.ok === false
                     ? { ...searchResult, error: getSafeWidgetErrorMessage(searchResult.error, t) }
                     : searchResult, inquiryValues: inquiryValues, inquiryError: inquiryError, isInquirySubmitted: isInquirySubmitted, selectedDealerName: selectedDealerName, isManualSearchEnabled: isManualLocationSearchEnabled, query: locationQuery, suggestions: locationSuggestions, suggestionsOpen: isSuggestionListOpen, isSuggestionsLoading: isSearchingSuggestions, onQueryChange: (value) => {
                     setLocationQuery(value);

package/dist/api.js

@@ -92,7 +92,7 @@ export async function searchLocationSuggestions(query, options) {
     const endpoint = options?.endpoint ?? '/api/jotul/widget';
     const fetcher = options?.fetcher ?? fetch;
     const params = new URLSearchParams({
-        autocomplete: '1',
+        type: 'autocomplete',
         q: query.trim(),
     });
     if (options?.locale != null && options.locale.trim() !== '') {

package/dist/components/ProductPageWidget.d.ts

@@ -1,7 +1,8 @@
 import type { WidgetStrings } from '../i18n/widgetStrings';
-import type { DealerSearchResponse, InquiryFormValues, LocationSuggestion } from '../types';
+import type { DealerSearchResponse, InquiryFormValues, JotulWidgetButtonStyling, LocationSuggestion } from '../types';
 type ProductPageWidgetProps = {
     t: WidgetStrings;
+    buttonStyling?: JotulWidgetButtonStyling;
     isSearching: boolean;
     locationError: string | null;
     searchResult: DealerSearchResponse | null;
@@ -22,5 +23,5 @@ type ProductPageWidgetProps = {
     onInquiryFieldChange: (key: keyof InquiryFormValues, value: string) => void;
     onStartInquiry: (dealerName: string) => void;
 };
-export declare function ProductPageWidget({ t, isSearching, locationError, searchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, }: ProductPageWidgetProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductPageWidget({ t, buttonStyling, isSearching, locationError, searchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, }: ProductPageWidgetProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ProductPageWidget.js

@@ -5,12 +5,12 @@ import { InquiryForm } from './product-page/InquiryForm';
 import { LocationSearch } from './product-page/LocationSearch';
 import { StatusBanner } from './product-page/StatusBanner';
 import { R10 } from '../constants';
-export function ProductPageWidget({ t, isSearching, locationError, searchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, }) {
+export function ProductPageWidget({ t, buttonStyling, isSearching, locationError, searchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, }) {
     const dealers = (searchResult?.dealers ?? []);
     const total = searchResult?.total ?? dealers.length;
     const inquiryFormOpen = inquiryValues != null;
     if (inquiryFormOpen && searchResult?.ok) {
-        return (_jsx("div", { className: "jwi-flex jwi-w-full jwi-flex-col jwi-gap-3", children: _jsx(InquiryForm, { t: t, inquiryValues: inquiryValues, inquiryError: inquiryError, onInquiryClose: onInquiryClose, onInquirySubmit: onInquirySubmit, onInquiryFieldChange: onInquiryFieldChange }) }));
+        return (_jsx("div", { className: "jwi-flex jwi-w-full jwi-flex-col jwi-gap-3", children: _jsx(InquiryForm, { t: t, buttonStyling: buttonStyling, inquiryValues: inquiryValues, inquiryError: inquiryError, onInquiryClose: onInquiryClose, onInquirySubmit: onInquirySubmit, onInquiryFieldChange: onInquiryFieldChange }) }));
     }
-    return (_jsxs("div", { className: `jwi-flex jwi-w-full jwi-flex-col jwi-gap-3 ${R10} jwi-border jwi-border-[#e6e1d7] jwi-bg-white jwi-p-6`, children: [_jsx(LocationSearch, { t: t, isManualSearchEnabled: isManualSearchEnabled, query: query, suggestions: suggestions, suggestionsOpen: suggestionsOpen, isSuggestionsLoading: isSuggestionsLoading, onQueryChange: onQueryChange, onSuggestionSelect: onSuggestionSelect, onDismissSuggestions: onDismissSuggestions }), locationError != null && !isManualSearchEnabled && (_jsx(StatusBanner, { tone: "error", children: locationError })), searchResult?.ok === false && (_jsx(StatusBanner, { tone: "error", children: searchResult.error ?? '' })), isInquirySubmitted && _jsx(StatusBanner, { tone: "success", children: t.inquirySentSuccess }), isSearching && (_jsxs("div", { className: "jwi-flex jwi-flex-col", children: [_jsx("div", { className: "jwi-w-full jwi-flex-shrink-0 jwi-border-b jwi-border-[#e6e1d7] jwi-pb-3", children: _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-animate-pulse jwi-rounded-full jwi-bg-[#ece8df]" }) }), _jsxs("div", { className: "jwi-mt-3 jwi-mr-[-12px] jwi-flex jwi-max-h-[min(60vh,480px)] jwi-flex-col jwi-gap-4 jwi-overflow-y-auto jwi-pr-[12px]", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] })), searchResult?.ok && !isSearching && (_jsx(DealerList, { dealers: dealers, total: total, selectedDealerName: selectedDealerName, t: t, onStartInquiry: onStartInquiry }))] }));
+    return (_jsxs("div", { className: `jwi-flex jwi-w-full jwi-flex-col jwi-gap-3 ${R10} jwi-border jwi-border-[#e6e1d7] jwi-bg-white jwi-p-6`, children: [_jsx(LocationSearch, { t: t, isManualSearchEnabled: isManualSearchEnabled, query: query, suggestions: suggestions, suggestionsOpen: suggestionsOpen, isSuggestionsLoading: isSuggestionsLoading, onQueryChange: onQueryChange, onSuggestionSelect: onSuggestionSelect, onDismissSuggestions: onDismissSuggestions }), locationError != null && !isManualSearchEnabled && (_jsx(StatusBanner, { tone: "error", children: locationError })), searchResult?.ok === false && (_jsx(StatusBanner, { tone: "error", children: searchResult.error ?? '' })), isInquirySubmitted && _jsx(StatusBanner, { tone: "success", children: t.inquirySentSuccess }), isSearching && (_jsxs("div", { className: "jwi-flex jwi-flex-col", children: [_jsx("div", { className: "jwi-w-full jwi-flex-shrink-0 jwi-border-b jwi-border-[#e6e1d7] jwi-pb-3", children: _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-animate-pulse jwi-rounded-full jwi-bg-[#ece8df]" }) }), _jsxs("div", { className: "jwi-mt-3 jwi-mr-[-12px] jwi-flex jwi-max-h-[min(60vh,480px)] jwi-flex-col jwi-gap-4 jwi-overflow-y-auto jwi-pr-[12px]", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] })), searchResult?.ok && !isSearching && (_jsx(DealerList, { dealers: dealers, total: total, selectedDealerName: selectedDealerName, t: t, buttonStyling: buttonStyling, onStartInquiry: onStartInquiry }))] }));
 }

package/dist/components/product-page/DealerList.d.ts

@@ -1,11 +1,12 @@
 import type { WidgetStrings } from '../../i18n/widgetStrings';
-import type { DealerRecord } from '../../types';
+import type { DealerRecord, JotulWidgetButtonStyling } from '../../types';
 type DealerListProps = {
     dealers: DealerRecord[];
     total: number;
     selectedDealerName: string | null;
     t: WidgetStrings;
+    buttonStyling?: JotulWidgetButtonStyling;
     onStartInquiry: (dealerName: string) => void;
 };
-export declare function DealerList({ dealers, total, selectedDealerName, t, onStartInquiry, }: DealerListProps): import("react/jsx-runtime").JSX.Element;
+export declare function DealerList({ dealers, total, selectedDealerName, t, buttonStyling, onStartInquiry, }: DealerListProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/product-page/DealerList.js

@@ -2,14 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { R10 } from '../../constants';
 import { ArrowRightIcon } from '../../icons/ArrowRightIcon';
 import { TelephoneIcon } from '../../icons/TelephoneIcon';
+import { getWidgetPrimaryButtonPresentation } from '../../utils/widgetPrimaryButtonPresentation';
 import { asText, formatDistance, getDealerAddressLines, getDealerKey, getDealerName, } from '../../utils';
-export function DealerList({ dealers, total, selectedDealerName, t, onStartInquiry, }) {
+export function DealerList({ dealers, total, selectedDealerName, t, buttonStyling, onStartInquiry, }) {
+    const inquiryCta = getWidgetPrimaryButtonPresentation(buttonStyling, 'panel', {
+        extraClassName: 'jwi-w-full jwi-max-w-full jwi-shrink-0 jwi-justify-between jwi-gap-2 md:jwi-max-w-[220px]',
+    });
     return (_jsxs("div", { className: "jwi-flex jwi-flex-col", children: [_jsx("div", { className: "jwi--mx-6 jwi-w-auto jwi-flex-shrink-0 jwi-border-b jwi-border-[#e6e1d7] jwi-pb-3 jwi-px-6 jwi-text-sm jwi-font-medium jwi-text-[#111111]", children: t.dealersNearYou.replace('{count}', String(total)) }), _jsxs("div", { className: "jwi-relative jwi-mt-4", children: [_jsx("div", { className: "jwi-mr-[-12px] jwi-flex jwi-max-h-[min(60vh,480px)] jwi-flex-col jwi-gap-4 jwi-overflow-y-auto jwi-pr-[12px]", children: dealers.map((dealer, index) => {
                             const addressLines = getDealerAddressLines(dealer);
                             const phone = asText(dealer.phone);
                             const distance = formatDistance(dealer);
                             const dealerName = getDealerName(dealer, t.unknownDealer);
                             const isSelectedDealer = selectedDealerName === dealerName;
-                            return (_jsxs("div", { className: `jwi-w-full ${R10} jwi-border jwi-border-[#e6e1d7] jwi-bg-white jwi-p-4 jwi-shadow-[0_1px_2px_rgba(17,17,17,0.03)]`, children: [_jsxs("div", { className: "jwi-flex jwi-items-start jwi-justify-between jwi-gap-3", children: [_jsx("div", { className: "jwi-min-w-0 jwi-max-w-[calc(100%-5rem)] jwi-pr-1", children: _jsx("h3", { className: "jwi-m-0 jwi-text-base jwi-font-semibold jwi-leading-snug jwi-text-[#111111]", children: dealerName }) }), distance && (_jsx("div", { className: `jwi-shrink-0 jwi-whitespace-nowrap ${R10} jwi-bg-[#fbf3db] jwi-px-2.5 jwi-py-1 jwi-text-xs jwi-font-medium jwi-leading-none jwi-text-[#111111]`, children: distance }))] }), addressLines.length > 0 && (_jsx("div", { className: "jwi-mt-3 jwi-flex jwi-flex-col jwi-gap-0.5 jwi-text-sm jwi-leading-snug jwi-text-[#111111]", children: addressLines.map((line) => (_jsx("div", { children: line }, line))) })), _jsxs("div", { className: "jwi-mt-4 jwi-flex jwi-flex-col jwi-gap-3 md:jwi-flex-row md:jwi-items-center md:jwi-justify-between", children: [_jsxs("button", { type: "button", onClick: () => onStartInquiry(dealerName), className: `jwi-inline-flex jwi-min-h-[48px] jwi-w-full jwi-max-w-full jwi-shrink-0 jwi-cursor-pointer jwi-items-center jwi-justify-between jwi-gap-2 ${R10} jwi-border-0 jwi-bg-[#ef2b18] jwi-px-4 jwi-text-sm jwi-font-medium jwi-text-white hover:jwi-bg-[#d92817] md:jwi-max-w-[220px]`, children: [_jsx("span", { children: isSelectedDealer ? t.sendInquiryEditing : t.sendInquiryCta }), _jsx(ArrowRightIcon, { className: "jwi-h-[18px] jwi-w-[18px] jwi-shrink-0" })] }), phone && (_jsxs("a", { href: `tel:${phone.replace(/\s+/g, '')}`, className: "jwi-inline-flex jwi-min-w-0 jwi-items-center jwi-gap-2 jwi-text-sm jwi-font-normal jwi-tabular-nums jwi-text-[#111111] hover:jwi-underline", children: [_jsx(TelephoneIcon, {}), _jsx("span", { className: "jwi-break-all", children: phone })] }))] })] }, getDealerKey(dealer, index)));
+                            return (_jsxs("div", { className: `jwi-w-full ${R10} jwi-border jwi-border-[#e6e1d7] jwi-bg-white jwi-p-4 jwi-shadow-[0_1px_2px_rgba(17,17,17,0.03)]`, children: [_jsxs("div", { className: "jwi-flex jwi-items-start jwi-justify-between jwi-gap-3", children: [_jsx("div", { className: "jwi-min-w-0 jwi-max-w-[calc(100%-5rem)] jwi-pr-1", children: _jsx("h3", { className: "jwi-m-0 jwi-text-base jwi-font-semibold jwi-leading-snug jwi-text-[#111111]", children: dealerName }) }), distance && (_jsx("div", { className: `jwi-shrink-0 jwi-whitespace-nowrap ${R10} jwi-bg-[#fbf3db] jwi-px-2.5 jwi-py-1 jwi-text-xs jwi-font-medium jwi-leading-none jwi-text-[#111111]`, children: distance }))] }), addressLines.length > 0 && (_jsx("div", { className: "jwi-mt-3 jwi-flex jwi-flex-col jwi-gap-0.5 jwi-text-sm jwi-leading-snug jwi-text-[#111111]", children: addressLines.map((line) => (_jsx("div", { children: line }, line))) })), _jsxs("div", { className: "jwi-mt-4 jwi-flex jwi-flex-col jwi-gap-3 md:jwi-flex-row md:jwi-items-center md:jwi-justify-between", children: [_jsxs("button", { type: "button", onClick: () => onStartInquiry(dealerName), className: inquiryCta.className, style: inquiryCta.style, children: [_jsx("span", { children: isSelectedDealer ? t.sendInquiryEditing : t.sendInquiryCta }), _jsx(ArrowRightIcon, { className: "jwi-h-[18px] jwi-w-[18px] jwi-shrink-0" })] }), phone && (_jsxs("a", { href: `tel:${phone.replace(/\s+/g, '')}`, className: "jwi-inline-flex jwi-min-w-0 jwi-items-center jwi-gap-2 jwi-text-sm jwi-font-normal jwi-tabular-nums jwi-text-[#111111] hover:jwi-underline", children: [_jsx(TelephoneIcon, {}), _jsx("span", { className: "jwi-break-all", children: phone })] }))] })] }, getDealerKey(dealer, index)));
                         }) }), _jsx("div", { "aria-hidden": true, className: "jwi-pointer-events-none jwi-absolute jwi-bottom-0 jwi-left-0 jwi-right-0 jwi-h-10 jwi-bg-gradient-to-t jwi-from-white jwi-to-transparent" })] })] }));
 }

package/dist/components/product-page/InquiryForm.d.ts

@@ -1,12 +1,13 @@
 import type { WidgetStrings } from '../../i18n/widgetStrings';
-import type { InquiryFormValues } from '../../types';
+import type { InquiryFormValues, JotulWidgetButtonStyling } from '../../types';
 type InquiryFormProps = {
     t: WidgetStrings;
+    buttonStyling?: JotulWidgetButtonStyling;
     inquiryValues: InquiryFormValues;
     inquiryError: string | null;
     onInquiryClose: () => void;
     onInquirySubmit: () => void;
     onInquiryFieldChange: (key: keyof InquiryFormValues, value: string) => void;
 };
-export declare function InquiryForm({ t, inquiryValues, inquiryError, onInquiryClose, onInquirySubmit, onInquiryFieldChange, }: InquiryFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function InquiryForm({ t, buttonStyling, inquiryValues, inquiryError, onInquiryClose, onInquirySubmit, onInquiryFieldChange, }: InquiryFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/product-page/InquiryForm.js

@@ -2,7 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InquiryField } from '../InquiryField';
 import { R10 } from '../../constants';
 import { ArrowRightIcon } from '../../icons/ArrowRightIcon';
-export function InquiryForm({ t, inquiryValues, inquiryError, onInquiryClose, onInquirySubmit, onInquiryFieldChange, }) {
+import { getWidgetPrimaryButtonPresentation } from '../../utils/widgetPrimaryButtonPresentation';
+export function InquiryForm({ t, buttonStyling, inquiryValues, inquiryError, onInquiryClose, onInquirySubmit, onInquiryFieldChange, }) {
+    const submitButton = getWidgetPrimaryButtonPresentation(buttonStyling, 'panel', {
+        extraClassName: 'jwi-mt-4 jwi-w-full',
+    });
     const trimmedProductName = inquiryValues.productName.trim();
     const title = trimmedProductName !== ''
         ? t.sendInquiryTitleWithProduct.replace('{product}', trimmedProductName)
@@ -10,5 +14,5 @@ export function InquiryForm({ t, inquiryValues, inquiryError, onInquiryClose, on
     return (_jsxs("form", { onSubmit: (event) => {
             event.preventDefault();
             onInquirySubmit();
-        }, className: `jwi-w-full ${R10} jwi-border jwi-border-[#e6e1d7] jwi-bg-white jwi-p-4 jwi-shadow-[0_1px_2px_rgba(17,17,17,0.03)]`, children: [_jsxs("button", { type: "button", onClick: onInquiryClose, className: "jwi-mb-3 jwi-inline-flex jwi-w-fit jwi-cursor-pointer jwi-items-center jwi-gap-1.5 jwi-border-0 jwi-bg-transparent jwi-p-0 jwi-text-left jwi-text-sm jwi-font-medium jwi-text-[#767676] hover:jwi-text-[#444444]", children: [_jsx("span", { className: "jwi-inline-flex jwi-shrink-0", style: { transform: 'scaleX(-1)' }, "aria-hidden": true, children: _jsx(ArrowRightIcon, { className: "jwi-h-[14px] jwi-w-[14px]" }) }), t.goBack] }), _jsx("input", { type: "hidden", name: "product", value: inquiryValues.productName }), _jsx("input", { type: "hidden", name: "dealer", value: inquiryValues.dealerName }), _jsxs("div", { className: "jwi-min-w-0", children: [_jsx("h3", { className: "jwi-m-0 jwi-text-base jwi-font-semibold jwi-leading-snug jwi-text-[#111111]", children: title }), _jsx("p", { className: "jwi-m-0 jwi-mt-2 jwi-text-sm jwi-leading-[1.4] jwi-text-[#767676]", children: t.dealerWillContact.replace('{dealer}', inquiryValues.dealerName) })] }), _jsxs("div", { className: "jwi-mt-4 jwi-flex jwi-flex-col jwi-gap-3", children: [_jsx(InquiryField, { label: t.fieldName, value: inquiryValues.name, onChange: (value) => onInquiryFieldChange('name', value) }), _jsx(InquiryField, { label: t.fieldEmail, type: "email", value: inquiryValues.email, onChange: (value) => onInquiryFieldChange('email', value) }), _jsx(InquiryField, { label: t.fieldPhone, type: "tel", value: inquiryValues.phone, onChange: (value) => onInquiryFieldChange('phone', value) }), _jsx(InquiryField, { label: t.fieldComment, multiline: true, value: inquiryValues.comment, onChange: (value) => onInquiryFieldChange('comment', value) })] }), inquiryError && (_jsx("div", { className: `jwi-mt-4 ${R10} jwi-border jwi-border-[#f0c7c2] jwi-bg-[#fff3f1] jwi-px-4 jwi-py-3 jwi-text-sm jwi-leading-[1.4] jwi-text-[#8f2d21]`, children: inquiryError })), _jsx("button", { type: "submit", className: `jwi-mt-4 jwi-inline-flex jwi-min-h-[48px] jwi-w-full jwi-cursor-pointer jwi-items-center jwi-justify-center ${R10} jwi-border-0 jwi-bg-[#ef2b18] jwi-px-4 jwi-text-sm jwi-font-medium jwi-text-white hover:jwi-bg-[#d92817]`, children: t.sendInquiryCta })] }));
+        }, className: `jwi-w-full ${R10} jwi-border jwi-border-[#e6e1d7] jwi-bg-white jwi-p-4 jwi-shadow-[0_1px_2px_rgba(17,17,17,0.03)]`, children: [_jsxs("button", { type: "button", onClick: onInquiryClose, className: "jwi-mb-3 jwi-inline-flex jwi-w-fit jwi-cursor-pointer jwi-items-center jwi-gap-1.5 jwi-border-0 jwi-bg-transparent jwi-p-0 jwi-text-left jwi-text-sm jwi-font-medium jwi-text-[#767676] hover:jwi-text-[#444444]", children: [_jsx("span", { className: "jwi-inline-flex jwi-shrink-0", style: { transform: 'scaleX(-1)' }, "aria-hidden": true, children: _jsx(ArrowRightIcon, { className: "jwi-h-[14px] jwi-w-[14px]" }) }), t.goBack] }), _jsx("input", { type: "hidden", name: "product", value: inquiryValues.productName }), _jsx("input", { type: "hidden", name: "dealer", value: inquiryValues.dealerName }), _jsxs("div", { className: "jwi-min-w-0", children: [_jsx("h3", { className: "jwi-m-0 jwi-text-base jwi-font-semibold jwi-leading-snug jwi-text-[#111111]", children: title }), _jsx("p", { className: "jwi-m-0 jwi-mt-2 jwi-text-sm jwi-leading-[1.4] jwi-text-[#767676]", children: t.dealerWillContact.replace('{dealer}', inquiryValues.dealerName) })] }), _jsxs("div", { className: "jwi-mt-4 jwi-flex jwi-flex-col jwi-gap-3", children: [_jsx(InquiryField, { label: t.fieldName, value: inquiryValues.name, onChange: (value) => onInquiryFieldChange('name', value) }), _jsx(InquiryField, { label: t.fieldEmail, type: "email", value: inquiryValues.email, onChange: (value) => onInquiryFieldChange('email', value) }), _jsx(InquiryField, { label: t.fieldPhone, type: "tel", value: inquiryValues.phone, onChange: (value) => onInquiryFieldChange('phone', value) }), _jsx(InquiryField, { label: t.fieldComment, multiline: true, value: inquiryValues.comment, onChange: (value) => onInquiryFieldChange('comment', value) })] }), inquiryError && (_jsx("div", { className: `jwi-mt-4 ${R10} jwi-border jwi-border-[#f0c7c2] jwi-bg-[#fff3f1] jwi-px-4 jwi-py-3 jwi-text-sm jwi-leading-[1.4] jwi-text-[#8f2d21]`, children: inquiryError })), _jsx("button", { type: "submit", className: submitButton.className, style: submitButton.style, children: t.sendInquiryCta })] }));
 }

package/dist/index.d.ts

@@ -1 +1 @@
-export { checkWidgetAuthorization, normalizeWidgetLocale, searchDealersByCoordinates, searchDealersByPostalCode, JotulWidget, type CheckWidgetAuthorizationOptions, type DealerSearchResponse, type JotulWidgetLocale, type JotulWidgetProps, type JotulWidgetType, type WidgetAuthClientResponse, } from './JotulWidget';
+export { checkWidgetAuthorization, normalizeWidgetLocale, searchDealersByCoordinates, searchDealersByPostalCode, JotulWidget, type CheckWidgetAuthorizationOptions, type DealerSearchResponse, type JotulWidgetButtonStyling, type JotulWidgetLocale, type JotulWidgetProps, type JotulWidgetStyling, type JotulWidgetType, type WidgetAuthClientResponse, } from './JotulWidget';

package/dist/types.d.ts

@@ -40,6 +40,15 @@ export type CheckWidgetAuthorizationOptions = {
     locale?: string;
     brands?: string[];
 };
+/** CSS values for primary CTA buttons (find dealer, send inquiry, etc.). */
+export type JotulWidgetButtonStyling = {
+    borderRadius?: string;
+    backgroundColor?: string;
+    textColor?: string;
+};
+export type JotulWidgetStyling = {
+    button?: JotulWidgetButtonStyling;
+};
 export type JotulWidgetProps = {
     type?: string;
     endpoint?: string;
@@ -47,6 +56,7 @@ export type JotulWidgetProps = {
     productName?: string;
     locale?: string;
     brands?: string[];
+    styling?: JotulWidgetStyling;
 };
 export type DealerRecord = Record<string, unknown>;
 export type InquiryFormValues = {

package/dist/utils/widgetPrimaryButtonPresentation.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'react';
+import type { JotulWidgetButtonStyling } from '../types';
+export type PrimaryButtonVariant = 'hero' | 'panel';
+/**
+ * Primary CTA buttons share the same visual tokens; optional `styling.button`
+ * overrides border radius, background, and text color (CSS values).
+ */
+export declare function getWidgetPrimaryButtonPresentation(buttonStyling: JotulWidgetButtonStyling | undefined, variant: PrimaryButtonVariant, options?: {
+    disabledWait?: boolean;
+    extraClassName?: string;
+}): {
+    className: string;
+    style: CSSProperties;
+};

package/dist/utils/widgetPrimaryButtonPresentation.js

@@ -0,0 +1,36 @@
+const HERO_LAYOUT = 'jwi-inline-flex jwi-w-full jwi-min-h-[56px] jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-border-0 jwi-px-7 jwi-text-base jwi-font-medium';
+const PANEL_LAYOUT = 'jwi-inline-flex jwi-min-h-[48px] jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-border-0 jwi-px-4 jwi-text-sm jwi-font-medium';
+/**
+ * Primary CTA buttons share the same visual tokens; optional `styling.button`
+ * overrides border radius, background, and text color (CSS values).
+ */
+export function getWidgetPrimaryButtonPresentation(buttonStyling, variant, options) {
+    const b = buttonStyling;
+    const style = {};
+    if (b?.borderRadius?.trim()) {
+        style.borderRadius = b.borderRadius.trim();
+    }
+    if (b?.backgroundColor?.trim()) {
+        style.backgroundColor = b.backgroundColor.trim();
+    }
+    if (b?.textColor?.trim()) {
+        style.color = b.textColor.trim();
+    }
+    const layout = variant === 'hero' ? HERO_LAYOUT : PANEL_LAYOUT;
+    const parts = [layout, options?.extraClassName?.trim()].filter((p) => typeof p === 'string' && p.length > 0);
+    if (!b?.borderRadius?.trim()) {
+        parts.push('jwi-rounded-[10px]');
+    }
+    if (!b?.backgroundColor?.trim()) {
+        parts.push('jwi-bg-[#ef2b18] hover:jwi-bg-[#d92817]');
+    }
+    if (!b?.textColor?.trim()) {
+        parts.push('jwi-text-white');
+    }
+    if (options?.disabledWait &&
+        variant === 'hero' &&
+        !b?.backgroundColor?.trim()) {
+        parts.push('disabled:jwi-cursor-wait disabled:hover:jwi-bg-[#ef2b18]');
+    }
+    return { className: parts.join(' '), style };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jotul/jotul-widgets",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "license": "UNLICENSED",
   "sideEffects": [