places-autocomplete-js 1.1.15 → 1.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +33 -22
  2. package/dist/places-autocomplete.css +1 -1
  3. package/dist/places-autocomplete.js +323 -156
  4. package/dist/places-autocomplete.js.map +1 -1
  5. package/dist/places-autocomplete.umd.cjs +1 -1
  6. package/dist/places-autocomplete.umd.cjs.map +1 -1
  7. package/index.d.ts +16 -2
  8. package/package.json +11 -11
package/README.md CHANGED
@@ -14,9 +14,7 @@ Explore interactive examples of the Google Places Autocomplete JS library:
14
14
 
15
15
  A quick, editable sandbox to experiment with the core functionality:
16
16
 
17
- [![Try it on CodePen](https://img.shields.io/badge/Try%20it%20on-CodePen-blue?style=for-the-badge&logo=codepen)](https://codepen.io/alexpechkarev/pen/wBaMaMY)
18
-
19
- See a more comprehensive live demo of the library in action: [pacservice.pages.dev](https://pacservice.pages.dev/)
17
+ See a more comprehensive live demo of the library in action: [pacservice.uk](https://pacservice.uk/)
20
18
 
21
19
  <img src="places-autocomplete-js.gif" alt="A video demonstrating the Places Autocomplete JavaScript component in action, showing address suggestions and selection.">
22
20
 
@@ -26,8 +24,10 @@ See a more comprehensive live demo of the library in action: [pacservice.pages.d
26
24
  - **Cost-Effective API Usage:** Automatically handles **session tokens** to optimise your Google Maps API costs per Google's guidelines.
27
25
  - **Optimised User Experience:** Implements **Debounced Input** to limit API calls while the user is typing, ensuring a smooth and responsive search experience.
28
26
  - **Enhanced Readability:** Provides **Suggestion Highlighting** to automatically bold the portion of text matching the user's input, making suggestions easier to scan.
29
- - **Flexible Styling:** Offers **Customisable Styling** allowing you to easily override default styles or apply your own using CSS classes. Built with sensible defaults (Tailwind CSS utility classes by default but can be entirely replaced).
27
+ - **Visual Categorisation:** Includes **Place Type Icons** (🏪 Shopping, 🍽️ Dining, 🏨 Lodging, etc.) to help users quickly identify the type of place in suggestions.
28
+ - **Flexible Styling:** Offers **Customisable Styling** allowing you to easily override default styles or apply your own using CSS classes. Built with sensible defaults.
30
29
  - **Robust Event Handling:** Provides `onResponse` and `onError` callbacks for comprehensive control over successful place selections and error scenarios.
30
+ - **Imperative API:** Programmatically control the component with methods like `clear()`, `focus()`, `setInputValue()`, `getRequestParams()`, and more.
31
31
  - **Highly Configurable:** Allows you to control API parameters (`requestParams`) and component behavior/appearance (`options`) to fit your specific application needs.
32
32
  - **Efficient API Loading:** Dynamically loads the Google Maps API script on demand, reducing initial page load times.
33
33
 
@@ -56,6 +56,7 @@ This library has been recognised as a winner of the **Google Maps Platform Award
56
56
  ## Requirements
57
57
 
58
58
  - **Google Maps API Key** with the Places API (New) enabled. Refer to [Use API Keys](https://developers.google.com/maps/documentation/javascript/get-api-key) for detailed instructions.
59
+ - **Geocoding API** enabled if you plan to use `setInputValue(latitude, longitude)`.
59
60
 
60
61
  ## Installation & Usage
61
62
 
@@ -123,7 +124,7 @@ Add the following lines to your HTML file. The stylesheet goes in the `<head>` a
123
124
  <title>Places Autocomplete Demo</title>
124
125
 
125
126
  <!-- 1. Link to the stylesheet -->
126
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/places-autocomplete-js@latest/dist/places-autocomplete-js.css">
127
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/places-autocomplete-js@latest/dist/places-autocomplete.css">
127
128
 
128
129
  </head>
129
130
  <body>
@@ -165,7 +166,7 @@ The `PlacesAutocomplete` class is initialised with a configuration object.
165
166
  | `containerId` | `string` | Yes | The ID of the HTML element where the autocomplete widget will be rendered. |
166
167
  | `googleMapsApiKey` | `string` | Yes | Your Google Maps API Key with the Places API (New) enabled. |
167
168
  | `googleMapsApiVersion` | `string` | No | The version of the Google Maps API to load (e.g., "weekly", "quarterly", "beta"). Defaults to "weekly". |
168
- | `onResponse` | `function` | No | Callback function triggered with selected place details. Receives a `Place` object (see Google's docs). Default logs to console. |
169
+ | `onResponse` | `function` | No | Callback for selected place details. Receives JSON by default (`options.response_type: 'json'`) or a Google `Place` instance when `options.response_type: 'place'`. |
169
170
  | `onError` | `function` | No | Callback function triggered when an error occurs. Receives an `Error` object or string. Default logs to console. |
170
171
  | `options` | `object` | No | Object to customise UI behavior and appearance. See "UI & Behavior Options" below. |
171
172
  | `requestParams` | `object` | No | Object to customise the parameters sent to the Google Places Autocomplete API. See "API Request Parameters" below. |
@@ -179,13 +180,15 @@ Passed within the main configuration object under the `options` key.
179
180
  | ---------------- | ----------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
180
181
  | `placeholder` | `string` | `"Start typing your address ..."` | Placeholder text for the input field. |
181
182
  | `debounce` | `number` | `100` | Delay in milliseconds before triggering an API request after user stops typing. Set to `0` to disable. |
182
- | `distance` | `boolean` | `true` | Whether to attempt to show distance in suggestions (requires `origin` in `requestParams`). |
183
+ | `distance` | `boolean` | `false` | Whether to attempt to show distance in suggestions (requires `origin` in `requestParams`). |
183
184
  | `distance_units` | `'km' \| 'miles'` | `'km'` | Units to display distance in if `distance` is true. |
184
185
  | `label` | `string` | `""` | Optional label text displayed above the input field. |
185
186
  | `autofocus` | `boolean` | `false` | If `true`, automatically focuses the input field on initialisation. |
186
187
  | `autocomplete` | `string` | `'off'` | Standard HTML `autocomplete` attribute for the input field. |
187
188
  | `classes` | `object` | _(See default classes below)_ | Object to override default CSS classes for styling. See "Styling" section. |
188
- | `clear_input` | `boolean` | `true` | If `true` (default), clears the input field after a suggestion is selected. If `false`, the input field retains the `formattedAddress` of the selected place. |
189
+ | `clear_input` | `boolean` | `false` | If `true`, clears the input field after a suggestion is selected. If `false` (default), the input field retains the `formattedAddress` of the selected place. |
190
+ | `response_type` | `'json' \| 'place'` | `'json'` | Return format: `'json'` for plain JSON object (default), `'place'` for full Google Maps Place instance with method access. |
191
+ | `show_place_type` | `boolean` | `false` | Whether to display icons representing the place type (🏪, 🍽️, etc.). **Mutually exclusive with `distance`.** |
189
192
 
190
193
  ### Styling
191
194
 
@@ -202,7 +205,7 @@ import 'places-autocomplete-js/style.css';
202
205
 
203
206
  **For CDN usage:**
204
207
  ```html
205
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/places-autocomplete-js@latest/dist/places-autocomplete-js.css">
208
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/places-autocomplete-js@latest/dist/places-autocomplete.css">
206
209
  ```
207
210
 
208
211
  #### 2. Custom CSS Classes (`options.classes`)
@@ -234,6 +237,9 @@ You can customise the appearance by providing your own CSS classes via the `opti
234
237
  | `kbd_up` | `pac-kbd-up` | Up arrow key hint |
235
238
  | `kbd_down` | `pac-kbd-down` | Down arrow key hint |
236
239
  | `kbd_active` | `pac-kbd-active` | Class applied when a keyboard key is pressed |
240
+ | `li_div_two_p_place_type` | `pac-li-div-two-p-place_type` | Container for place type display |
241
+ | `li_div_two_p_place_type_icon` | `pac-li-div-two-p-place_type-icon` | The place type icon element |
242
+ | `li_div_two_p_place_type_label` | `pac-li-div-two-p-place_type-label` | The place type label text |
237
243
  | `highlight` | `pac-highlight` | Class for matched text highlighting |
238
244
 
239
245
  **Example:**
@@ -332,18 +338,6 @@ const autocomplete = new PlacesAutocomplete({
332
338
  autocomplete.setFetchFields(['formattedAddress', 'location', 'viewport']);
333
339
  ```
334
340
 
335
- ### Retain Input Value After Selection
336
-
337
- By default, the input field is cleared after a place is selected. To retain the selected address in the input field, set `options.clear_input` to `false`.
338
-
339
- ```javascript
340
- const autocomplete = new PlacesAutocomplete({
341
- containerId: 'autocomplete-container',
342
- googleMapsApiKey: 'YOUR_API_KEY',
343
- options: {
344
- clear_input: false,
345
- },
346
- });
347
341
  ```
348
342
 
349
343
  ## Public Methods
@@ -366,6 +360,23 @@ Removes event listeners and cleans up DOM elements. Use this when the component
366
360
  autocomplete.destroy();
367
361
  ```
368
362
 
363
+ ### `focus()`
364
+
365
+ Sets focus on the autocomplete text input field.
366
+
367
+ ```javascript
368
+ autocomplete.focus();
369
+ ```
370
+
371
+ ### `setInputValue(latitude, longitude)`
372
+
373
+ Sets the input by finding and selecting a place for the given coordinates. Performs reverse geocoding to convert lat/lng to a place, then triggers `onResponse` using the configured `options.response_type`. **Requires Geocoding API to be enabled.**
374
+
375
+ ```javascript
376
+ // Set location to Eiffel Tower
377
+ await autocomplete.setInputValue(48.8584, 2.2945);
378
+ ```
379
+
369
380
  ### `setFetchFields(fields)`
370
381
 
371
382
  Dynamically updates the Place Data Fields to fetch on selection. The provided fields are merged with the library's default fields (`formattedAddress`, `addressComponents`).
@@ -488,7 +499,7 @@ npm run test:vitest
488
499
 
489
500
  ### End-to-End Tests
490
501
 
491
- End-to-end tests are located in the `e2e/` directory and are run using Playwright. To execute the end-to-end tests, ensure your development server is running (e.g., `npm run dev`) and then use the following command:
502
+ End-to-end tests are located in the `e2e/` directory and are run using Playwright. The Playwright config starts the Vite dev server automatically via `webServer`, so you can run:
492
503
 
493
504
  ```bash
494
505
  npm run test:e2e
package/dist/places-autocomplete.css CHANGED
@@ -1 +1 @@
1
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-divide-y-reverse:0;--tw-font-weight:initial}}}:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent;--color-red-50:#fef2f2;--color-red-300:#fca5a5;--color-red-400:#f87171;--color-red-500:#ef4444;--color-red-600:#dc2626;--color-red-700:#b91c1c;--color-red-800:#991b1b;--color-green-50:#f0fdf4;--color-green-100:#dcfce7;--color-green-200:#bbf7d0;--color-green-300:#86efac;--color-green-400:#4ade80;--color-green-800:#166534;--color-emerald-300:#6ee7b7;--color-emerald-400:#34d399;--color-emerald-500:#10b981;--color-emerald-600:#059669;--color-emerald-700:#047857;--color-sky-300:#7dd3fc;--color-sky-400:#38bdf8;--color-sky-500:#0ea5e9;--color-sky-600:#0284c7;--color-indigo-400:#818cf8;--color-indigo-500:#6366f1;--color-indigo-600:#4f46e5;--color-violet-300:#c4b5fd;--color-pink-300:#f9a8d4;--color-slate-50:oklch(98.4% .003 247.858);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-gray-50:#f9fafb;--color-gray-100:#f4f5f7;--color-gray-200:#e5e7eb;--color-gray-300:#d2d6dc;--color-gray-400:#9fa6b2;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-zinc-50:#f9fafb;--color-zinc-100:#f4f5f7;--color-zinc-200:#e5e7eb;--color-zinc-300:#d2d6dc;--color-zinc-400:#9fa6b2;--color-zinc-500:#6b7280;--color-zinc-600:#4b5563;--color-zinc-700:#374151;--color-zinc-800:#1f2937;--color-zinc-900:#111827;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-lg:33rem;--container-2xl:40rem;--text-xs:.8125rem;--text-xs--line-height:1.5rem;--text-sm:.875rem;--text-sm--line-height:1.5rem;--text-base:1rem;--text-base--line-height:1.75rem;--text-lg:1.125rem;--text-lg--line-height:1.75rem;--text-xl:1.25rem;--text-xl--line-height:1.75rem;--text-2xl:1.5rem;--text-2xl--line-height:2rem;--text-4xl:2.25rem;--text-4xl--line-height:2.5rem;--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-tight:-.025em;--leading-tight:1.25;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--blur-xs:4px;--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary-500:#fe795d}.pac-container{z-index:10;margin-top:calc(var(--spacing,.25rem)*1);transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,);border-radius:var(--radius-lg,.5rem);position:relative}.pac-icon-container{pointer-events:none;inset-block:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);padding-left:calc(var(--spacing,.25rem)*3);align-items:center;display:flex;position:absolute}.pac-w-5{width:calc(var(--spacing,.25rem)*5)}.pac-h-5{height:calc(var(--spacing,.25rem)*5)}.pac-input{border-radius:var(--radius-md,.375rem);border-style:var(--tw-border-style);background-color:var(--color-gray-100,oklch(96.7% .003 264.542));width:100%;padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*2.5);padding-right:calc(var(--spacing,.25rem)*20);padding-left:calc(var(--spacing,.25rem)*10);color:var(--color-gray-900,oklch(21% .034 264.665));--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-gray-300,oklch(87.2% .01 258.338));--tw-ring-inset:inset;border-width:1px}.pac-input:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media(min-width:40rem){.pac-input{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)))}}.pac-kbd-container{inset-block:calc(var(--spacing,.25rem)*0);right:calc(var(--spacing,.25rem)*0);padding-block:calc(var(--spacing,.25rem)*1.5);padding-right:calc(var(--spacing,.25rem)*1.5);display:flex;position:absolute}.pac-kbd-escape{margin-right:calc(var(--spacing,.25rem)*1);width:calc(var(--spacing,.25rem)*8);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-300,oklch(87.2% .01 258.338));padding-inline:calc(var(--spacing,.25rem)*1);font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));color:var(--color-gray-500,oklch(55.1% .027 264.364));align-items:center;display:inline-flex}.pac-kbd-up{width:calc(var(--spacing,.25rem)*6);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-300,oklch(87.2% .01 258.338));padding-inline:calc(var(--spacing,.25rem)*1);font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));color:var(--color-gray-500,oklch(55.1% .027 264.364));justify-content:center;align-items:center;display:inline-flex}.pac-kbd-down{width:calc(var(--spacing,.25rem)*6);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-400,oklch(70.7% .022 261.325));padding-inline:calc(var(--spacing,.25rem)*1);font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));color:var(--color-gray-500,oklch(55.1% .027 264.364));justify-content:center;align-items:center;display:inline-flex}.pac-kbd-active{background-color:var(--color-indigo-500,oklch(58.5% .233 277.117));color:var(--color-white,#fff)}.pac-ul{z-index:50;margin-top:calc(var(--spacing,.25rem)*1);margin-bottom:calc(var(--spacing,.25rem)*-2);max-height:calc(var(--spacing,.25rem)*60);width:100%;list-style-type:none;position:absolute}:where(.pac-ul>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)));border-color:var(--color-gray-100,oklch(96.7% .003 264.542))}.pac-ul{border-radius:var(--radius-md,.375rem);background-color:var(--color-white,#fff);padding:calc(var(--spacing,.25rem)*0);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-black,#000);overflow:auto}.pac-ul:focus{--tw-outline-style:none;outline-style:none}@media(min-width:40rem){.pac-ul{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)))}}.pac-li{cursor:default;padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*2);color:var(--color-gray-900,oklch(21% .034 264.665));-webkit-user-select:none;user-select:none}@media(hover:hover){.pac-li:hover{background-color:var(--color-indigo-500,oklch(58.5% .233 277.117));color:var(--color-white,#fff)}}@media(min-width:64rem){.pac-li{padding-inline:calc(var(--spacing,.25rem)*4)}}.pac-li-button{width:100%;color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit;font:inherit;cursor:pointer;background:0 0;border:none;justify-content:space-between;padding:0;display:flex}.pac-li-div-container{justify-content:space-between;align-items:center;width:100%;display:flex}.pac-li-div-container p{margin-block:0;margin:0}.pac-li-div-one{min-width:calc(var(--spacing,.25rem)*0);align-items:center;column-gap:calc(var(--spacing,.25rem)*3);flex:auto;display:flex}.pac-map-icon-svg{height:calc(var(--spacing,.25rem)*6);width:calc(var(--spacing,.25rem)*6);flex-shrink:0}.pac-li-div-p-container{min-height:calc(var(--spacing,.25rem)*10);flex-direction:column;justify-content:center;align-items:flex-start;display:flex}.pac-li-div-one-p{font-size:var(--text-sm,.875rem);line-height:calc(var(--spacing,.25rem)*6)}.pac-li-div-one-p-secondaryText{font-size:var(--text-xs,.75rem);line-height:calc(var(--spacing,.25rem)*6)}.pac-li-current{background-color:var(--color-indigo-500,oklch(58.5% .233 277.117));color:var(--color-white,#fff);-webkit-text-decoration:inherit;text-decoration:inherit}.pac-li-button-current{color:var(--color-white,#fff)}.pac-li-div-two{min-width:calc(var(--spacing,.25rem)*16);flex-direction:column;flex-shrink:0;align-items:flex-end;display:flex}.pac-li-div-two-p{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}.pac-highlight{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-font-weight{syntax:"*";inherits:false}
1
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-divide-y-reverse:0;--tw-font-weight:initial}}}:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-red-50:#fef2f2;--color-red-300:#fca5a5;--color-red-400:#f87171;--color-red-500:#ef4444;--color-red-600:#dc2626;--color-red-700:#b91c1c;--color-red-800:#991b1b;--color-green-50:#f0fdf4;--color-green-100:#dcfce7;--color-green-200:#bbf7d0;--color-green-300:#86efac;--color-green-400:#4ade80;--color-green-800:#166534;--color-emerald-300:#6ee7b7;--color-emerald-400:#34d399;--color-emerald-500:#10b981;--color-emerald-600:#059669;--color-emerald-700:#047857;--color-sky-300:#7dd3fc;--color-sky-400:#38bdf8;--color-sky-500:#0ea5e9;--color-sky-600:#0284c7;--color-indigo-400:#818cf8;--color-indigo-500:#6366f1;--color-indigo-600:#4f46e5;--color-violet-300:#c4b5fd;--color-pink-300:#f9a8d4;--color-slate-50:oklch(98.4% .003 247.858);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-gray-50:#f9fafb;--color-gray-100:#f4f5f7;--color-gray-200:#e5e7eb;--color-gray-300:#d2d6dc;--color-gray-400:#9fa6b2;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-zinc-50:#f9fafb;--color-zinc-100:#f4f5f7;--color-zinc-200:#e5e7eb;--color-zinc-300:#d2d6dc;--color-zinc-400:#9fa6b2;--color-zinc-500:#6b7280;--color-zinc-600:#4b5563;--color-zinc-700:#374151;--color-zinc-800:#1f2937;--color-zinc-900:#111827;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-lg:33rem;--container-2xl:40rem;--text-xs:.8125rem;--text-xs--line-height:1.5rem;--text-sm:.875rem;--text-sm--line-height:1.5rem;--text-base:1rem;--text-base--line-height:1.75rem;--text-lg:1.125rem;--text-lg--line-height:1.75rem;--text-xl:1.25rem;--text-xl--line-height:1.75rem;--text-2xl:1.5rem;--text-2xl--line-height:2rem;--text-4xl:2.25rem;--text-4xl--line-height:2.5rem;--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-tight:-.025em;--leading-tight:1.25;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--blur-xs:4px;--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--color-primary-500:#fe795d}.pac-section{line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}.pac-container{z-index:10;margin-top:calc(var(--spacing,.25rem)*1);transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,);border-radius:var(--radius-lg,.5rem);position:relative}.pac-icon-container{pointer-events:none;inset-block:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);padding-left:calc(var(--spacing,.25rem)*3);align-items:center;display:flex;position:absolute}.pac-w-5{width:calc(var(--spacing,.25rem)*5)}.pac-h-5{height:calc(var(--spacing,.25rem)*5)}.pac-input{border-radius:var(--radius-md,.375rem);border-style:var(--tw-border-style);background-color:var(--color-gray-100,oklch(96.7% .003 264.542));width:100%;padding-block:calc(var(--spacing,.25rem)*2.5);padding-right:calc(var(--spacing,.25rem)*0);padding-left:calc(var(--spacing,.25rem)*10);color:var(--color-gray-900,oklch(21% .034 264.665));--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-gray-300,oklch(87.2% .01 258.338));--tw-ring-inset:inset;border-width:1px}.pac-input:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media(min-width:40rem){.pac-input{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)))}}.pac-input:focus-visible{outline:2px solid var(--color-indigo-600,#4f46e5);outline-offset:2px}.pac-kbd-container{inset-block:calc(var(--spacing,.25rem)*0);top:50%;right:calc(var(--spacing,.25rem)*1);max-height:calc(var(--spacing,.25rem)*8);--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,);align-items:center;column-gap:calc(var(--spacing,.25rem)*1);padding-block:calc(var(--spacing,.25rem)*1.5);padding-right:calc(var(--spacing,.25rem)*1.5);display:flex;position:absolute}.pac-kbd-escape{margin-right:calc(var(--spacing,.25rem)*1);width:calc(var(--spacing,.25rem)*8);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-300,oklch(87.2% .01 258.338));padding-inline:calc(var(--spacing,.25rem)*1);font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));color:var(--color-gray-500,oklch(55.1% .027 264.364));justify-content:center;align-items:center;display:inline-flex}.pac-kbd-up{width:calc(var(--spacing,.25rem)*6);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-300,oklch(87.2% .01 258.338));padding-inline:calc(var(--spacing,.25rem)*1);font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));color:var(--color-gray-500,oklch(55.1% .027 264.364));justify-content:center;align-items:center;display:inline-flex}.pac-kbd-down{width:calc(var(--spacing,.25rem)*6);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-400,oklch(70.7% .022 261.325));padding-inline:calc(var(--spacing,.25rem)*1);font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));color:var(--color-gray-500,oklch(55.1% .027 264.364));justify-content:center;align-items:center;display:inline-flex}.pac-kbd-active{background-color:var(--color-indigo-500,oklch(58.5% .233 277.117));color:var(--color-white,#fff)}.pac-ul{font-family:var(--default-font-family,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif);z-index:50;margin-top:calc(var(--spacing,.25rem)*1);margin-bottom:calc(var(--spacing,.25rem)*-2);max-height:calc(var(--spacing,.25rem)*60);width:100%;list-style-type:none;position:absolute}:where(.pac-ul>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)));border-color:var(--color-gray-100,oklch(96.7% .003 264.542))}.pac-ul{border-radius:var(--radius-md,.375rem);background-color:var(--color-white,#fff);padding:calc(var(--spacing,.25rem)*0);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-black,#000);overflow:auto}.pac-ul:focus{--tw-outline-style:none;outline-style:none}@media(min-width:40rem){.pac-ul{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)))}}.pac-li{cursor:default;padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*2);color:var(--color-gray-900,oklch(21% .034 264.665));-webkit-user-select:none;user-select:none}@media(hover:hover){.pac-li:hover{background-color:var(--color-indigo-500,oklch(58.5% .233 277.117));color:var(--color-white,#fff)}}@media(min-width:64rem){.pac-li{padding-inline:calc(var(--spacing,.25rem)*4)}}.pac-li-button{width:100%;color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit;font:inherit;cursor:pointer;background:0 0;border:none;justify-content:space-between;padding:0;display:flex}.pac-li-button:focus-visible{outline:2px solid var(--color-indigo-600,#4f46e5);outline-offset:2px;border-radius:var(--radius-sm,.25rem)}.pac-li-div-container{justify-content:space-between;align-items:center;width:100%;display:flex}.pac-li-div-container p{text-align:left;margin-block:0;margin:0;display:block}.pac-li-div-one{min-width:calc(var(--spacing,.25rem)*0);align-items:center;column-gap:calc(var(--spacing,.25rem)*3);flex:auto;display:flex}.pac-map-icon-svg{height:calc(var(--spacing,.25rem)*6);width:calc(var(--spacing,.25rem)*6);flex-shrink:0}.pac-li-div-p-container{min-height:calc(var(--spacing,.25rem)*10);flex-direction:column;justify-content:center;align-items:flex-start;display:flex}.pac-li-div-one-p{font-size:var(--text-sm,.875rem);line-height:calc(var(--spacing,.25rem)*6)}.pac-li-div-one-p-secondaryText{font-size:var(--text-xs,.75rem);line-height:calc(var(--spacing,.25rem)*3);align-items:flex-start;display:flex}.pac-li-current{background-color:var(--color-indigo-500,oklch(58.5% .233 277.117));color:var(--color-white,#fff);-webkit-text-decoration:inherit;text-decoration:inherit}.pac-li-button-current{color:var(--color-white,#fff)}.pac-li-div-two{min-width:calc(var(--spacing,.25rem)*16);flex-direction:column;flex-shrink:0;align-items:flex-end;display:flex}.pac-li-div-two-p{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}.pac-highlight{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}.pac-li-div-two-p-place_type{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));flex-direction:row;justify-content:flex-end;align-items:center;gap:.5rem;width:100%;display:flex}.pac-li-div-two-p-place_type-icon{flex-shrink:0}.pac-li-div-two-p-place_type-label{display:none}@media(min-width:48rem){.pac-li-div-two-p-place_type{justify-content:flex-start;min-width:120px}.pac-li-div-two-p-place_type-label{display:inline}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-font-weight{syntax:"*";inherits:false}