@jotul/jotul-widgets 0.0.4 → 1.0.1

package/README.md

@@ -9,6 +9,13 @@ It calls a partner-local backend route, for example:
 - partner server route -> `@jotul/jotul-api`
 - `@jotul/jotul-api` -> `https://api.jotul.com/api/v1/find-dealer`
 
+## Styling
+
+Styles are built into the published bundle as `dist/JotulWidget.css`. The component imports that file for you.
+
+- **Partners do not need Tailwind** in their app for the widget to look correct.
+- Utilities are compiled with Tailwind’s **`jwi-` prefix**, so they will not clash with a host app that also uses Tailwind.
+
 ## Example
 
 ```tsx

package/dist/JotulWidget.css

@@ -1,253 +1 @@
-.jwi-root {
-  width: 100%;
-  color: #111111;
-  font-family:
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
-}
-
-.jwi-shell {
-  width: 100%;
-  border: 1px solid #e9e5dc;
-  border-radius: 32px;
-  background: #f8f6f2;
-  padding: 16px;
-  box-shadow: 0 6px 20px rgba(17, 17, 17, 0.04);
-}
-
-.jwi-searchBox {
-  overflow: hidden;
-  border: 1px solid #d8d2c7;
-  border-radius: 24px;
-  background: #ffffff;
-}
-
-.jwi-searchRow {
-  display: flex;
-  flex-direction: column;
-}
-
-.jwi-inputWrap {
-  display: flex;
-  min-width: 0;
-  flex: 1;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 20px;
-}
-
-.jwi-pin {
-  display: inline-flex;
-  flex-shrink: 0;
-  color: #000000;
-}
-
-.jwi-input {
-  width: 100%;
-  border: 0;
-  background: transparent;
-  color: #111111;
-  font-size: 16px;
-  line-height: 1.4;
-  outline: none;
-}
-
-.jwi-input::placeholder {
-  color: #767676;
-}
-
-.jwi-findButton {
-  min-height: 64px;
-  border: 0;
-  background: #000000;
-  padding: 0 32px;
-  color: #ffffff;
-  font-size: 16px;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.jwi-findButton:hover {
-  background: #1f1f1f;
-}
-
-.jwi-findButton:disabled {
-  cursor: not-allowed;
-  background: #444444;
-}
-
-.jwi-error {
-  margin-top: 16px;
-  border: 1px solid #f0c7c2;
-  border-radius: 16px;
-  background: #fff3f1;
-  padding: 12px 16px;
-  color: #8f2d21;
-  font-size: 14px;
-  line-height: 1.4;
-}
-
-.jwi-results {
-  margin-top: 20px;
-}
-
-.jwi-resultsHeader {
-  border-bottom: 1px solid #e6e1d7;
-  padding-bottom: 16px;
-  color: #111111;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.jwi-resultsList {
-  margin-top: 20px;
-  display: flex;
-  max-height: 700px;
-  flex-direction: column;
-  gap: 16px;
-  overflow-y: auto;
-  padding-right: 4px;
-}
-
-.jwi-card {
-  border: 1px solid #e6e1d7;
-  border-radius: 24px;
-  background: #ffffff;
-  padding: 20px;
-  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03);
-}
-
-.jwi-cardTop {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.jwi-cardTitleWrap {
-  max-width: 70%;
-}
-
-.jwi-cardTitle {
-  margin: 0;
-  color: #111111;
-  font-size: 22px;
-  font-weight: 600;
-  line-height: 1.15;
-}
-
-.jwi-distance {
-  border-radius: 9999px;
-  background: #fbf3db;
-  padding: 8px 16px;
-  color: #111111;
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.jwi-address {
-  margin-top: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  color: #111111;
-  font-size: 18px;
-  line-height: 1.15;
-}
-
-.jwi-cardActions {
-  margin-top: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.jwi-cta {
-  display: inline-flex;
-  min-height: 70px;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  border: 0;
-  border-radius: 16px;
-  background: #ef2b18;
-  padding: 0 28px;
-  color: #ffffff;
-  font-size: 18px;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.jwi-cta:hover {
-  background: #d92817;
-}
-
-.jwi-phoneLink {
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  color: #111111;
-  font-size: 18px;
-  font-weight: 500;
-  text-decoration: none;
-}
-
-.jwi-phoneLink:hover {
-  text-decoration: underline;
-}
-
-.jwi-icon16 {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
-.jwi-icon22 {
-  width: 22px;
-  height: 22px;
-  flex-shrink: 0;
-}
-
-.jwi-loading,
-.jwi-message {
-  color: #111111;
-  font-family:
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
-}
-
-@media (min-width: 768px) {
-  .jwi-shell {
-    padding: 24px;
-  }
-
-  .jwi-searchRow {
-    flex-direction: row;
-  }
-
-  .jwi-inputWrap {
-    padding: 16px 24px;
-  }
-
-  .jwi-cardActions {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .jwi-cta {
-    width: 390px;
-  }
-}
+.jwi-pointer-events-none{pointer-events:none}.jwi-absolute{position:absolute}.jwi-relative{position:relative}.jwi-bottom-0{bottom:0}.jwi-left-0{left:0}.jwi-right-0{right:0}.jwi-z-20{z-index:20}.jwi-m-0{margin:0}.jwi--mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.jwi-mb-3{margin-bottom:.75rem}.jwi-mr-\[-12px\]{margin-right:-12px}.jwi-mt-1{margin-top:.25rem}.jwi-mt-2{margin-top:.5rem}.jwi-mt-3{margin-top:.75rem}.jwi-mt-4{margin-top:1rem}.jwi-box-border{box-sizing:border-box}.jwi-flex{display:flex}.jwi-inline-flex{display:inline-flex}.jwi-h-10{height:2.5rem}.jwi-h-12{height:3rem}.jwi-h-3\.5{height:.875rem}.jwi-h-4{height:1rem}.jwi-h-5{height:1.25rem}.jwi-h-6{height:1.5rem}.jwi-h-\[14px\]{height:14px}.jwi-h-\[18px\]{height:18px}.jwi-h-\[22px\]{height:22px}.jwi-h-\[60px\]{height:60px}.jwi-max-h-\[min\(60vh\,480px\)\]{max-height:min(60vh,480px)}.jwi-min-h-\[48px\]{min-height:48px}.jwi-min-h-\[56px\]{min-height:56px}.jwi-w-14{width:3.5rem}.jwi-w-2\/3{width:66.666667%}.jwi-w-24{width:6rem}.jwi-w-28{width:7rem}.jwi-w-3\.5{width:.875rem}.jwi-w-4{width:1rem}.jwi-w-48{width:12rem}.jwi-w-5{width:1.25rem}.jwi-w-\[14px\]{width:14px}.jwi-w-\[18px\]{width:18px}.jwi-w-\[22px\]{width:22px}.jwi-w-\[540px\]{width:540px}.jwi-w-auto{width:auto}.jwi-w-fit{width:-moz-fit-content;width:fit-content}.jwi-w-full{width:100%}.jwi-min-w-0{min-width:0}.jwi-max-w-\[220px\]{max-width:220px}.jwi-max-w-\[70\%\]{max-width:70%}.jwi-max-w-\[calc\(100\%-5rem\)\]{max-width:calc(100% - 5rem)}.jwi-max-w-full{max-width:100%}.jwi-flex-1{flex:1 1 0%}.jwi-flex-shrink-0,.jwi-shrink-0{flex-shrink:0}@keyframes jwi-pulse{50%{opacity:.5}}.jwi-animate-pulse{animation:jwi-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes jwi-spin{to{transform:rotate(1turn)}}.jwi-animate-spin{animation:jwi-spin 1s linear infinite}.jwi-cursor-pointer{cursor:pointer}.jwi-resize-y{resize:vertical}.jwi-flex-row{flex-direction:row}.jwi-flex-col{flex-direction:column}.jwi-items-start{align-items:flex-start}.jwi-items-center{align-items:center}.jwi-items-stretch{align-items:stretch}.jwi-justify-center{justify-content:center}.jwi-justify-between{justify-content:space-between}.jwi-gap-0\.5{gap:.125rem}.jwi-gap-1\.5{gap:.375rem}.jwi-gap-2{gap:.5rem}.jwi-gap-3{gap:.75rem}.jwi-gap-4{gap:1rem}.jwi-space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.jwi-self-stretch{align-self:stretch}.jwi-overflow-hidden{overflow:hidden}.jwi-overflow-y-auto{overflow-y:auto}.jwi-whitespace-nowrap{white-space:nowrap}.jwi-break-all{word-break:break-all}.jwi-rounded-\[10px\]{border-radius:10px}.jwi-rounded-full{border-radius:9999px}.jwi-border{border-width:1px}.jwi-border-0{border-width:0}.jwi-border-b{border-bottom-width:1px}.jwi-border-\[\#b7e5c2\]{--tw-border-opacity:1;border-color:rgb(183 229 194/var(--tw-border-opacity,1))}.jwi-border-\[\#d8d2c7\]{--tw-border-opacity:1;border-color:rgb(216 210 199/var(--tw-border-opacity,1))}.jwi-border-\[\#e6e1d7\]{--tw-border-opacity:1;border-color:rgb(230 225 215/var(--tw-border-opacity,1))}.jwi-border-\[\#f0c7c2\]{--tw-border-opacity:1;border-color:rgb(240 199 194/var(--tw-border-opacity,1))}.jwi-bg-\[\#FCFCFC\]{--tw-bg-opacity:1;background-color:rgb(252 252 252/var(--tw-bg-opacity,1))}.jwi-bg-\[\#ece8df\]{--tw-bg-opacity:1;background-color:rgb(236 232 223/var(--tw-bg-opacity,1))}.jwi-bg-\[\#eefbf2\]{--tw-bg-opacity:1;background-color:rgb(238 251 242/var(--tw-bg-opacity,1))}.jwi-bg-\[\#ef2b18\]{--tw-bg-opacity:1;background-color:rgb(239 43 24/var(--tw-bg-opacity,1))}.jwi-bg-\[\#f7f5ef\]{--tw-bg-opacity:1;background-color:rgb(247 245 239/var(--tw-bg-opacity,1))}.jwi-bg-\[\#fbf3db\]{--tw-bg-opacity:1;background-color:rgb(251 243 219/var(--tw-bg-opacity,1))}.jwi-bg-\[\#fff3f1\]{--tw-bg-opacity:1;background-color:rgb(255 243 241/var(--tw-bg-opacity,1))}.jwi-bg-transparent{background-color:transparent}.jwi-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.jwi-bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.jwi-from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.jwi-to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.jwi-p-0{padding:0}.jwi-p-4{padding:1rem}.jwi-p-6{padding:1.5rem}.jwi-px-2\.5{padding-left:.625rem;padding-right:.625rem}.jwi-px-4{padding-left:1rem;padding-right:1rem}.jwi-px-5{padding-left:1.25rem;padding-right:1.25rem}.jwi-px-6{padding-left:1.5rem;padding-right:1.5rem}.jwi-px-7{padding-left:1.75rem;padding-right:1.75rem}.jwi-py-1{padding-top:.25rem;padding-bottom:.25rem}.jwi-py-3{padding-top:.75rem;padding-bottom:.75rem}.jwi-py-4{padding-top:1rem;padding-bottom:1rem}.jwi-py-8{padding-top:2rem;padding-bottom:2rem}.jwi-pb-3{padding-bottom:.75rem}.jwi-pl-5{padding-left:1.25rem}.jwi-pr-1{padding-right:.25rem}.jwi-pr-3{padding-right:.75rem}.jwi-pr-\[12px\]{padding-right:12px}.jwi-text-left{text-align:left}.jwi-font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.jwi-text-\[14px\]{font-size:14px}.jwi-text-base{font-size:1rem;line-height:1.5rem}.jwi-text-sm{font-size:.875rem;line-height:1.25rem}.jwi-text-xs{font-size:.75rem;line-height:1rem}.jwi-font-medium{font-weight:500}.jwi-font-normal{font-weight:400}.jwi-font-semibold{font-weight:600}.jwi-tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.jwi-leading-\[1\.35\]{line-height:1.35}.jwi-leading-\[1\.4\]{line-height:1.4}.jwi-leading-none{line-height:1}.jwi-leading-snug{line-height:1.375}.jwi-text-\[\#111111\]{--tw-text-opacity:1;color:rgb(17 17 17/var(--tw-text-opacity,1))}.jwi-text-\[\#1b5e20\]{--tw-text-opacity:1;color:rgb(27 94 32/var(--tw-text-opacity,1))}.jwi-text-\[\#767676\]{--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity,1))}.jwi-text-\[\#8f2d21\]{--tw-text-opacity:1;color:rgb(143 45 33/var(--tw-text-opacity,1))}.jwi-text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.jwi-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.jwi-opacity-25{opacity:.25}.jwi-opacity-75{opacity:.75}.jwi-opacity-95{opacity:.95}.jwi-shadow-\[0_1px_2px_rgba\(17\,17\,17\,0\.03\)\]{--tw-shadow:0 1px 2px hsla(0,0%,7%,.03);--tw-shadow-colored:0 1px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.jwi-shadow-\[0_8px_24px_rgba\(17\,17\,17\,0\.08\)\]{--tw-shadow:0 8px 24px hsla(0,0%,7%,.08);--tw-shadow-colored:0 8px 24px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.jwi-outline-none{outline:2px solid transparent;outline-offset:2px}.placeholder\:jwi-text-\[\#767676\]::-moz-placeholder{--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity,1))}.placeholder\:jwi-text-\[\#767676\]::placeholder{--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity,1))}.hover\:jwi-bg-\[\#d92817\]:hover{--tw-bg-opacity:1;background-color:rgb(217 40 23/var(--tw-bg-opacity,1))}.hover\:jwi-bg-\[\#f7f5f0\]:hover{--tw-bg-opacity:1;background-color:rgb(247 245 240/var(--tw-bg-opacity,1))}.hover\:jwi-text-\[\#444444\]:hover{--tw-text-opacity:1;color:rgb(68 68 68/var(--tw-text-opacity,1))}.hover\:jwi-underline:hover{text-decoration-line:underline}.focus\:jwi-border-\[\#111111\]:focus{--tw-border-opacity:1;border-color:rgb(17 17 17/var(--tw-border-opacity,1))}.disabled\:jwi-cursor-wait:disabled{cursor:wait}.disabled\:hover\:jwi-bg-\[\#ef2b18\]:hover:disabled{--tw-bg-opacity:1;background-color:rgb(239 43 24/var(--tw-bg-opacity,1))}@media (min-width:768px){.md\:jwi-max-w-\[220px\]{max-width:220px}.md\:jwi-flex-row{flex-direction:row}.md\:jwi-items-center{align-items:center}.md\:jwi-justify-between{justify-content:space-between}}

package/dist/JotulWidget.d.ts

@@ -1,36 +1,8 @@
 import './JotulWidget.css';
-export type JotulWidgetType = 'productPage' | 'dealerFinder' | 'warrantyForm';
-export type WidgetAuthClientResponse = {
-    apiVersion?: string;
-    ok: boolean;
-    authorized?: boolean;
-    permissions?: {
-        dealers?: boolean;
-    };
-    error?: string;
-};
-export type DealerSearchResponse = {
-    apiVersion?: string;
-    ok: boolean;
-    type?: 'postalCode';
-    origin?: {
-        postalCode?: string | null;
-        postalCodeNumber?: number | null;
-        market?: string;
-    };
-    total?: number;
-    dealers?: Array<Record<string, unknown>>;
-    error?: string;
-};
-export type CheckWidgetAuthorizationOptions = {
-    endpoint?: string;
-    fetcher?: typeof fetch;
-};
-export type JotulWidgetProps = {
-    type?: string;
-    endpoint?: string;
-    className?: string;
-};
-export declare function checkWidgetAuthorization(options?: CheckWidgetAuthorizationOptions): Promise<WidgetAuthClientResponse>;
-export declare function searchDealersByPostalCode(postalCode: string, options?: CheckWidgetAuthorizationOptions): Promise<DealerSearchResponse>;
-export declare function JotulWidget({ type, endpoint, className, }: JotulWidgetProps): import("react/jsx-runtime").JSX.Element;
+import { checkWidgetAuthorization, searchLocationSuggestions, searchDealersByCoordinates, searchDealersByPostalCode } from './api';
+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, 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;