@magicx-eng/ai-autocomplete-react 0.41.1 → 0.42.0

package/README.md

@@ -282,7 +282,7 @@ Skip `<AIAutocompleteDropdown />` and render the suggestions UI yourself. `dropd
 
 > **Option icons.** An option may carry an icon: `icon_svg` is inline SVG markup and `icon` its name. The built-in dropdown draws the SVG before the option's text, in the text color, and hides it while the row shows its loading skeleton. When rendering options yourself, pass `icon_svg` through the exported `sanitizeOptionIconSvg` before inserting it — it reduces the markup to plain vector drawing and returns `null` for anything else — and use `optionLabel(option)` for the text — it is the option's `text` alone; `icon` is the icon's name and is never shown as text, even when `icon_svg` is missing or fails to draw. A picked option's `icon` / `icon_svg` are copied onto its completed parameter, and the chip in the input draws the glyph before its text. Both surfaces can be switched off: `showOptionIcons: false` renders option rows as text only and `showChipIcons: false` renders chips as text only; either way the icon element is omitted rather than hidden.
 
-> **Option pictures and counts.** An option may also carry `image_url` — a picture of the best-matching catalog item offering it — and `item_count`, how many items offer it (each is present only when the server includes it; when it includes counts, the options also arrive ordered by them, most items first; a starting state carries pictures but no counts). The built-in dropdown draws the picture as a square thumbnail before the option's text (in place of its `icon_svg`, so a row never leads with two visuals) and the count as a muted label at the row's trailing edge (`"12 items"`); a skeleton row keeps the tile's placeholder fill and hides the count. Icons and pictures are all-or-nothing per list: if any tappable option would draw neither, no row draws one, so a list never mixes rows with and without a leading visual (non-tappable rows don't count). A custom dropdown can apply the same rule with the exported `optionsShowLeadingVisuals(options, showIcons, showImages)`. The unit word after the number is a token: set `--aia-option-count-unit: "sneakers"` to name what is being counted, `--aia-option-count-unit-one: "sneaker"` for a count of 1 (it falls back to the plural token), or `--aia-option-count-unit: ""` for the number alone. When rendering options yourself, pass `image_url` through the exported `optionImageSrc` before using it as an `<img src>` — it returns the URL only when it is `http(s)` and `null` otherwise — and `formatOptionCount(option.item_count)` gives the number the built-in rows print (`null` when there is no count); `optionCountLabel(count, unit?)` appends a unit for a dropdown that prints the word itself (`"item"` / `"items"` by default; one word, a `{ one, other }` pair, or `""` for none). Both surfaces can be switched off: `showOptionImages: false` renders rows without pictures (an option's icon then draws instead) and `showOptionCounts: false` hides the counts. A picked option's `image_url` is copied onto its completed parameter too, and the chip in the input draws it as a small rounded tile before its text, in place of the icon; `showChipImages: false` renders chips without pictures (the icon then draws instead). The tile is sized by `--aia-option-image-size` (40px), rounded by `--aia-option-image-radius` (12px), spaced by `--aia-option-image-gap` (12px) and filled by `--aia-option-image-bg` (default: `--aia-skeleton-bg`) while its picture loads; in a grid with pictures, an icon row draws its glyph at `--aia-option-tile-icon-size` (1.5em) so it holds the picture column; the count reads `--aia-option-count-font-size` (12px), `--aia-option-count-color` and `--aia-option-count-opacity` (0.6); the chip's tile reads `--aia-chip-image-size` (1.25em of the chip's font), `--aia-chip-image-radius` (4px) and `--aia-chip-image-bg` (default: `--aia-skeleton-bg`).
+> **Option pictures and counts.** An option may also carry `image_url` — a picture of the best-matching catalog item offering it — and `item_count`, how many items offer it (each is present only when the server includes it; when it includes counts, the options also arrive ordered by them, most items first; a starting state carries pictures but no counts). The built-in dropdown draws the picture as a square thumbnail before the option's text (in place of its `icon_svg`, so a row never leads with two visuals) and the count as a muted label at the row's trailing edge (`"12 items"`); a skeleton row keeps the tile's placeholder fill and hides the count. Icons and pictures are all-or-nothing per list: if any tappable option would draw neither, no row draws one, so a list never mixes rows with and without a leading visual (non-tappable rows don't count). A custom dropdown can apply the same rule with the exported `optionsShowLeadingVisuals(options, showIcons, showImages)`. The unit word after the number is a token: set `--aia-option-count-unit: "sneakers"` to name what is being counted, `--aia-option-count-unit-one: "sneaker"` for a count of 1 (it falls back to the plural token), or `--aia-option-count-unit: ""` for the number alone. When rendering options yourself, pass `image_url` through the exported `optionImageSrc` before using it as an `<img src>` — it returns the URL only when it is `http(s)` and `null` otherwise — and `formatOptionCount(option.item_count)` gives the number the built-in rows print (`null` when there is no count); `optionCountLabel(count, unit?)` appends a unit for a dropdown that prints the word itself (`"item"` / `"items"` by default; one word, a `{ one, other }` pair, or `""` for none). Both surfaces can be switched off: `showOptionImages: false` renders rows without pictures (an option's icon then draws instead) and `showOptionCounts: false` hides the counts. A picked option's `image_url` is copied onto its completed parameter too, and the chip in the input draws it as a small rounded tile before its text, in place of the icon; `showChipImages: false` renders chips without pictures (the icon then draws instead). The tile is sized by `--aia-option-image-size` (40px), rounded by `--aia-option-image-radius` (12px), spaced by `--aia-option-image-gap` (12px) and filled by `--aia-option-image-bg` (default: `--aia-skeleton-bg`) as a placeholder until its picture loads (and on skeleton rows, or if the picture fails); a loaded picture is scaled to fit rather than cropped and sits on the dropdown's background, and one narrower than the tile is rounded on its own corners by `--aia-option-picture-radius` (6px); in a grid with pictures, an icon row draws its glyph at `--aia-option-tile-icon-size` (1.5em) so it holds the picture column; the count reads `--aia-option-count-font-size` (12px), `--aia-option-count-color` and `--aia-option-count-opacity` (0.6); the chip's tile reads `--aia-chip-image-size` (1.25em of the chip's font), `--aia-chip-image-radius` (4px) and `--aia-chip-image-bg` (default: `--aia-skeleton-bg`), the placeholder fill shown until the picture loads; a loaded picture narrower than the tile narrows it to the picture's own width, so the radius rounds the picture.
 
 > **Parameter names under options.** An option that completes the word being typed (the server's `traditional_autocomplete` suggestion) can read the same as an option of another parameter, so the built-in dropdown draws the name of the parameter it answers under its text, muted and smaller (`Flavor`, `Subcategory`); the SDK sets it as `parameterLabel` from the option's `parameter`, and a skeleton row hides it. It reads `--aia-option-parameter-font-size` (12px), `--aia-option-parameter-color` and `--aia-option-parameter-opacity` (0.6).
 
@@ -837,6 +837,15 @@ Every class name the package emits is namespaced — `aia-*` for its own (hashed
 
 Override on the container (via `className`). The variables are declared with `:where()` (zero specificity), so a value you set on the container always wins.
 
+The full input also accepts `--aia-input-radius` and `--aia-written-text-font-weight` on its container or an ancestor. Omit them to retain the default `10px` radius and `300` weight; changing `mode` does not reset these overrides. In dropdown-only integrations, style your own input directly.
+
+```css
+.my-search {
+  --aia-input-radius: 0;
+  --aia-written-text-font-weight: 500;
+}
+```
+
 | Variable | Light | Dark | Description |
 |---|---|---|---|
 | `--aia-font-family` | `inherit` | `inherit` | Font used by the library. Defaults to `inherit` so the library picks up your page's font automatically. Set this to pin a specific font on the library without changing the surrounding page. |
@@ -849,12 +858,14 @@ Override on the container (via `className`). The variables are declared with `:w
 | `--aia-option-font-size` | `19px` | `19px` | Option font size |
 | `--aia-written-text-color` | `#000000` | `#ffffff` | Input text |
 | `--aia-written-text-font-size` | `19px` | `19px` | Input text font size |
+| `--aia-written-text-font-weight` | `300` | `300` | Written text weight in the full input. Completed chips keep their own typography. |
 | `--aia-caret-color` | `--aia-written-text-color` | `--aia-written-text-color` | Editor caret color. Override independently of input text color. |
 | `--aia-submit-bg` | `#000000` | `#ffffff` | Submit button background. Solid + full-opacity at rest, even when the input is empty/disabled. |
 | `--aia-submit-color` | `#ffffff` | `#000000` | Submit button arrow color |
 | `--aia-submit-bg-disabled` | `--aia-submit-bg` | `--aia-submit-bg` | Submit background when disabled (empty input). Defaults to the enabled background so themed colors aren't washed out. Set this for a faded rest state. |
 | `--aia-submit-color-disabled` | `--aia-submit-color` | `--aia-submit-color` | Submit arrow color when disabled. Defaults to the enabled color. |
 | `--aia-border` | `rgba(17, 24, 39, 0.14)` | `#505050` | Input container border color |
+| `--aia-input-radius` | `10px` | `10px` | Full input corner radius. Set `0` for square corners. |
 | `--aia-shadow` | `none` | `none` | Input container elevation (box-shadow). Flat by default; set it to add one |
 | `--aia-dropdown-offset` | `13px` | `13px` | Gap between the input box and the dropdown (the dropdown's margin toward the input). |
 | `--aia-content-inset-left` | `16px` | `16px` | Left inset of the SDK's content: the input wrapper's left padding, and the line the dropdown's content (parameter label, option text, product strip) starts on. Set it when you pad the field to clear a leading icon of your own, so the dropdown's content stays aligned under the typed text. Practical minimum is `10px` (the option text's own inset); both surfaces floor it there. |
@@ -867,9 +878,10 @@ Override on the container (via `className`). The variables are declared with `:w
 | `--aia-product-gap` | `8px` | `8px` | Gap between product cards. |
 | `--aia-product-bg` | `transparent` | `transparent` | Product card background. |
 | `--aia-product-bg-active` | `--aia-option-bg` | `--aia-option-bg` | Product card background on hover. |
-| `--aia-product-media-bg` | `--aia-skeleton-bg` | `--aia-skeleton-bg` | Fill behind product images and both fallback tiles (placeholder pictogram or title initial), used when an image URL is missing, blank or fails to load. |
+| `--aia-product-media-bg` | `--aia-skeleton-bg` | `--aia-skeleton-bg` | Placeholder fill of the product tile: shown until the photo loads, and behind both fallback tiles (placeholder pictogram or title initial) used when an image URL is missing, blank or fails to load. Once a photo loads the tile is transparent. |
 | `--aia-scroll-arrow-color` | `--aia-option-color` | `--aia-option-color` | Chevron color of the arrow (`--aia-scroll-arrow-color-hover` on hover). |
 | `--aia-placeholder-fade` | `120ms` | `120ms` | Fade-out of the outgoing placeholder phrase when the starting-state placeholder changes (the incoming one types itself in). |
+| `--aia-product-image-radius` | `8px` | `8px` | Corner radius of a product photo narrower than its square tile (a tall one), which is scaled to fit rather than cropped. A photo that fills the tile takes the tile's own 8px corners. |
 | `--aia-product-placeholder-image` | storefront pictogram | storefront pictogram | The pictogram used by `productImageFallback: "image"` (the default) when an image URL is missing, blank or fails to load. Defaults to a two-tone storefront inlined as a data URI. Set any `url(...)` to swap it; it is centered and contained over `--aia-product-media-bg`. Does not affect `"initial"` tiles. |
 | `--aia-product-title-color` | `--aia-option-color-selected` | `--aia-option-color-selected` | Product title text. Follows the option colors by default, so theming the panel moves suggestions and products together. |
 | `--aia-product-price-color` | `--aia-option-color-selected` | `--aia-option-color-selected` | Product price text. |

package/dist/index.js

@@ -1,4 +1,4 @@
-"use strict";var xt=Object.defineProperty;var la=Object.getOwnPropertyDescriptor;var da=Object.getOwnPropertyNames;var ca=Object.prototype.hasOwnProperty;var pa=(e,a)=>{for(var t in a)xt(e,t,{get:a[t],enumerable:!0})},ha=(e,a,t,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of da(a))!ca.call(e,o)&&o!==t&&xt(e,o,{get:()=>a[o],enumerable:!(i=la(a,o))||i.enumerable});return e};var ua=e=>ha(xt({},"__esModule",{value:!0}),e);var Ea={};pa(Ea,{AIAutocomplete:()=>ea,AIAutocompleteDropdown:()=>pt,DATE_RANGE_META_END:()=>r.DATE_RANGE_META_END,DATE_RANGE_META_START:()=>r.DATE_RANGE_META_START,DEFAULT_OPTION_COUNT_UNIT:()=>r.DEFAULT_OPTION_COUNT_UNIT,PRODUCT_PATH_PREFIX:()=>r.PRODUCT_PATH_PREFIX,WEEKDAY_LABELS:()=>r.WEEKDAY_LABELS,buildSubmitResult:()=>r.buildSubmitResult,cellDay:()=>r.cellDay,cellIso:()=>r.cellIso,dateCellMarks:()=>r.dateCellMarks,formatDate:()=>r.formatDate,formatDateRange:()=>r.formatDateRange,formatOptionCount:()=>r.formatOptionCount,isoDate:()=>r.isoDate,monthLabel:()=>r.monthLabel,optionCountLabel:()=>r.optionCountLabel,optionHasImage:()=>r.optionHasImage,optionImageSources:()=>r.optionImageSources,optionImageSrc:()=>r.optionImageSrc,optionLabel:()=>r.optionLabel,optionsShowLeadingVisuals:()=>r.optionsShowLeadingVisuals,parseDate:()=>r.parseDate,parseLooseDate:()=>r.parseLooseDate,parseLooseDateRange:()=>r.parseLooseDateRange,productFromMatchedItem:()=>r.productFromMatchedItem,productImageSources:()=>r.productImageSources,productsFromCustomFields:()=>r.productsFromCustomFields,sanitizeOptionIconSvg:()=>r.sanitizeOptionIconSvg,selectedRangeFor:()=>r.selectedRangeFor,useAIAutocomplete:()=>ut,visibleDateRange:()=>r.visibleDateRange,withSkippedParams:()=>r.withSkippedParams});module.exports=ua(Ea);var r=require("@magicx-eng/ai-autocomplete-vanilla");var B=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-67791514")){let e=document.createElement("style");e.id="ac-style-67791514",e.textContent=`.aia-container-KKjFU {
+"use strict";var xt=Object.defineProperty;var la=Object.getOwnPropertyDescriptor;var da=Object.getOwnPropertyNames;var ca=Object.prototype.hasOwnProperty;var pa=(e,a)=>{for(var t in a)xt(e,t,{get:a[t],enumerable:!0})},ha=(e,a,t,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of da(a))!ca.call(e,o)&&o!==t&&xt(e,o,{get:()=>a[o],enumerable:!(i=la(a,o))||i.enumerable});return e};var ua=e=>ha(xt({},"__esModule",{value:!0}),e);var Ea={};pa(Ea,{AIAutocomplete:()=>ea,AIAutocompleteDropdown:()=>pt,DATE_RANGE_META_END:()=>s.DATE_RANGE_META_END,DATE_RANGE_META_START:()=>s.DATE_RANGE_META_START,DEFAULT_OPTION_COUNT_UNIT:()=>s.DEFAULT_OPTION_COUNT_UNIT,PRODUCT_PATH_PREFIX:()=>s.PRODUCT_PATH_PREFIX,WEEKDAY_LABELS:()=>s.WEEKDAY_LABELS,buildSubmitResult:()=>s.buildSubmitResult,cellDay:()=>s.cellDay,cellIso:()=>s.cellIso,dateCellMarks:()=>s.dateCellMarks,formatDate:()=>s.formatDate,formatDateRange:()=>s.formatDateRange,formatOptionCount:()=>s.formatOptionCount,isoDate:()=>s.isoDate,monthLabel:()=>s.monthLabel,optionCountLabel:()=>s.optionCountLabel,optionHasImage:()=>s.optionHasImage,optionImageSources:()=>s.optionImageSources,optionImageSrc:()=>s.optionImageSrc,optionLabel:()=>s.optionLabel,optionsShowLeadingVisuals:()=>s.optionsShowLeadingVisuals,parseDate:()=>s.parseDate,parseLooseDate:()=>s.parseLooseDate,parseLooseDateRange:()=>s.parseLooseDateRange,productFromMatchedItem:()=>s.productFromMatchedItem,productImageSources:()=>s.productImageSources,productsFromCustomFields:()=>s.productsFromCustomFields,sanitizeOptionIconSvg:()=>s.sanitizeOptionIconSvg,selectedRangeFor:()=>s.selectedRangeFor,useAIAutocomplete:()=>ut,visibleDateRange:()=>s.visibleDateRange,withSkippedParams:()=>s.withSkippedParams});module.exports=ua(Ea);var s=require("@magicx-eng/ai-autocomplete-vanilla");var H=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-67791514")){let e=document.createElement("style");e.id="ac-style-67791514",e.textContent=`.aia-container-KKjFU {
   position: relative;
   /* Inherits the host page's font by default. Consumers can pin a specific
      font on the library via \`--aia-font-family: 'Custom Font'\` without
@@ -17,7 +17,7 @@
      10px the two sides would diverge; flooring both keeps them together. */
   padding: 12px 16px 12px max(10px, var(--aia-content-inset-left, 16px));
   border: 1px solid var(--aia-border, #b0b0b0);
-  border-radius: 10px;
+  border-radius: var(--aia-input-radius, 10px);
   background: var(--aia-surface, #ffffff);
   /* Flat by default; consumers can set --aia-shadow for elevation. */
   box-shadow: var(--aia-shadow, none);
@@ -66,7 +66,7 @@
     --aia-caret-color,
     var(--aia-written-text-color, var(--aia-color-text-default, #fff))
   );
-  font-weight: 300;
+  font-weight: var(--aia-written-text-font-weight, 300);
   /* Align the text's inline box with the pill list (also vertical-align: middle)
      so they share a vertical center when pills stretch the line box to ~36px. */
   vertical-align: middle;
@@ -162,7 +162,10 @@
    that) so it adds no characters to the caret's plain text. */
 :where(.aia-input-IW-P-) span[class~="magicx-aia-segment-image"] {
   display: inline;
-  padding-left: var(--aia-chip-image-size, 1.25em);
+  padding-left: min(
+    var(--aia-chip-image-size, 1.25em),
+    var(--aia-chip-image-fit, var(--aia-chip-image-size, 1.25em))
+  );
   margin-right: 5px;
   border-radius: var(--aia-chip-image-radius, 4px);
   background:
@@ -172,6 +175,15 @@
   user-select: none;
 }
 
+/* Once the picture has loaded the placeholder fill steps aside, so a picture
+   that doesn't fill the tile sits on the chip rather than on a grey box. The
+   renderer sets the attribute when the picture loads, and narrows the tile to
+   a tall picture's own width (--aia-chip-image-fit, capped by the size above)
+   so the radius rounds the picture itself. */
+:where(.aia-input-IW-P-) span[class~="magicx-aia-segment-image"][data-aia-image-loaded] {
+  background: var(--aia-chip-image, none) center / contain no-repeat;
+}
+
 /* Re-edit highlight \u2014 applied to the completed pill being re-edited (after a
    tap). Reuses the exact hover fill so the highlight persists from tap until an
    option is selected. Hides the native caret; cursor switches to text since the
@@ -268,7 +280,7 @@
     opacity: 0;
   }
 }
-`,document.head.appendChild(e)}var Ue={container:"aia-container-KKjFU",inputWrapper:"aia-inputWrapper-FLq1b",editorArea:"aia-editorArea-7rBWq",input:"aia-input-IW-P-",pillListContainer:"aia-pillListContainer-h92IA",submitSlot:"aia-submitSlot-GhuCM",aiaPillReveal:"aia-aiaPillReveal-wf05b"};var ee=require("@magicx-eng/ai-autocomplete-vanilla"),U=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
+`,document.head.appendChild(e)}var Ue={container:"aia-container-KKjFU",inputWrapper:"aia-inputWrapper-FLq1b",editorArea:"aia-editorArea-7rBWq",input:"aia-input-IW-P-",pillListContainer:"aia-pillListContainer-h92IA",submitSlot:"aia-submitSlot-GhuCM",aiaPillReveal:"aia-aiaPillReveal-wf05b"};var ie=require("@magicx-eng/ai-autocomplete-vanilla"),j=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
  * Built-in appearance defaults \u2014 zero specificity via :where().
  * Consumer CSS always wins without !important.
  *
@@ -1120,7 +1132,7 @@
     opacity: 0.25;
   }
 }
-`,document.head.appendChild(e)}var Ce={dropdown:"aia-dropdown-yz2KC",visible:"aia-visible-QCoXj",scrollArrow:"aia-scrollArrow-uUzV0","magicx-aia-scroll-arrow-bob":"aia-magicx-aia-scroll-arrow-bob-z-HXC",pillBar:"aia-pillBar-pwTXe",pillScroll:"aia-pillScroll-Tpzus",skip:"aia-skip-7-olS",skeletonBars:"aia-skeletonBars-HVr9C",skeletonBarsIn:"aia-skeletonBarsIn-BdPrL",skeletonBarsOut:"aia-skeletonBarsOut-TqKeD",skeletonBar:"aia-skeletonBar-O3xIx",aiaSkeletonPulse:"aia-aiaSkeletonPulse-G8W7q"};var H=require("@magicx-eng/ai-autocomplete-vanilla"),Lt=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-f687bd03")){let e=document.createElement("style");e.id="ac-style-f687bd03",e.textContent=`/* --- Datepicker (replaces the options grid for date suggestions) ---
+`,document.head.appendChild(e)}var Ce={dropdown:"aia-dropdown-yz2KC",visible:"aia-visible-QCoXj",scrollArrow:"aia-scrollArrow-uUzV0","magicx-aia-scroll-arrow-bob":"aia-magicx-aia-scroll-arrow-bob-z-HXC",pillBar:"aia-pillBar-pwTXe",pillScroll:"aia-pillScroll-Tpzus",skip:"aia-skip-7-olS",skeletonBars:"aia-skeletonBars-HVr9C",skeletonBarsIn:"aia-skeletonBarsIn-BdPrL",skeletonBarsOut:"aia-skeletonBarsOut-TqKeD",skeletonBar:"aia-skeletonBar-O3xIx",aiaSkeletonPulse:"aia-aiaSkeletonPulse-G8W7q"};var F=require("@magicx-eng/ai-autocomplete-vanilla"),Lt=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-f687bd03")){let e=document.createElement("style");e.id="ac-style-f687bd03",e.textContent=`/* --- Datepicker (replaces the options grid for date suggestions) ---
 
    One of three hand-maintained copies (vanilla styles.css, this file, Angular's
    date-grid.component.css). Only the class-naming layer differs \u2014 the
@@ -1283,7 +1295,7 @@
   opacity: 0.8;
   background: rgba(var(--aia-streak-rgb, 255, 255, 255), 0.06);
 }
-`,document.head.appendChild(e)}var N={datepicker:"aia-datepicker-6RrTs",header:"aia-header-z4LRk",month:"aia-month-urB2T",nav:"aia-nav-ap4AN",weekdays:"aia-weekdays-3EA3q",grid:"aia-grid-mQCgw",weekday:"aia-weekday-3lF4B",cell:"aia-cell-59k0y",number:"aia-number-aoT01",day:"aia-day-cB3u9",blank:"aia-blank-ivgRC",past:"aia-past-CEZsj",highlighted:"aia-highlighted-YIdtK",today:"aia-today-iI3ME",inRange:"aia-inRange-r9S2q",selected:"aia-selected-28KDn",pressed:"aia-pressed-bEyyN"};var J=require("react/jsx-runtime"),ma=["sunday","monday","tuesday","wednesday","thursday","friday","saturday"];function zt({options:e,activeIndex:a,listboxId:t,view:i,selection:o,onSelect:s,onHighlight:n,onUnhighlight:c,onPreviousMonth:l,onNextMonth:b}){let P=(0,H.isoDate)(new Date),T=(0,H.visibleDateRange)({pendingStart:o.rangeStart,highlightedIso:(0,H.cellIso)(e[a]),selected:o.selectedRange});return(0,J.jsxs)("div",{className:N.datepicker,"data-aia-datepicker":"",children:[(0,J.jsxs)("div",{className:N.header,children:[(0,J.jsx)("button",{type:"button",tabIndex:-1,className:N.nav,"data-aia-date-prev":"","aria-label":"Previous month",onMouseDown:f=>f.preventDefault(),onClick:l,children:"\u2039"}),(0,J.jsx)("span",{className:N.month,"data-aia-date-month":"","aria-live":"polite",children:(0,H.monthLabel)(i)}),(0,J.jsx)("button",{type:"button",tabIndex:-1,className:N.nav,"data-aia-date-next":"","aria-label":"Next month",onMouseDown:f=>f.preventDefault(),onClick:b,children:"\u203A"})]}),(0,J.jsx)("div",{className:N.weekdays,"aria-hidden":"true",children:H.WEEKDAY_LABELS.map((f,x)=>(0,J.jsx)("span",{className:N.weekday,children:f},ma[x]))}),(0,J.jsx)("div",{className:N.grid,"data-aia-date-grid":"",children:e.map((f,x)=>(0,J.jsx)(ga,{option:f,id:`${t}-option-${x}`,index:x,isHighlighted:x===a&&f.is_tappable,isToday:(0,H.cellIso)(f)===P,isPast:(0,H.cellIso)(f)!=null&&(0,H.cellIso)(f)<P,marks:(0,H.dateCellMarks)((0,H.cellIso)(f),{selectedIso:o.selectedIso,range:T}),onSelect:s,onHighlight:n,onUnhighlight:c},(0,H.cellIso)(f)??`pad-${x}`))})]})}function ga({option:e,id:a,index:t,isHighlighted:i,isToday:o,isPast:s,marks:n,onSelect:c,onHighlight:l,onUnhighlight:b}){let[P,T]=(0,Lt.useState)(!1),f=(0,H.cellDay)(e);if(f==null)return(0,J.jsx)("div",{id:a,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-hidden":"true","aria-selected":!1,tabIndex:-1,className:`${N.cell} ${N.blank}`});let x=()=>{T(!0),c(e),setTimeout(()=>T(!1),170)},E=[N.cell,N.day,s?N.past:"",i?N.highlighted:"",o?N.today:"",n.inRange?N.inRange:"",n.selected?N.selected:"",P?N.pressed:""].filter(Boolean).join(" ");return(0,J.jsx)("div",{id:a,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-selected":i,"aria-label":e.text,tabIndex:0,className:E,onClick:x,onKeyDown:D=>{(D.key==="Enter"||D.key===" ")&&(D.preventDefault(),x())},onMouseEnter:()=>l(t),onMouseLeave:b?()=>b(t):void 0,children:(0,J.jsx)("span",{className:N.number,children:f})})}var He=require("@magicx-eng/ai-autocomplete-vanilla"),st=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-5259a217")){let e=document.createElement("style");e.id="ac-style-5259a217",e.textContent=`.aia-cluster {
+`,document.head.appendChild(e)}var M={datepicker:"aia-datepicker-6RrTs",header:"aia-header-z4LRk",month:"aia-month-urB2T",nav:"aia-nav-ap4AN",weekdays:"aia-weekdays-3EA3q",grid:"aia-grid-mQCgw",weekday:"aia-weekday-3lF4B",cell:"aia-cell-59k0y",number:"aia-number-aoT01",day:"aia-day-cB3u9",blank:"aia-blank-ivgRC",past:"aia-past-CEZsj",highlighted:"aia-highlighted-YIdtK",today:"aia-today-iI3ME",inRange:"aia-inRange-r9S2q",selected:"aia-selected-28KDn",pressed:"aia-pressed-bEyyN"};var ae=require("react/jsx-runtime"),ma=["sunday","monday","tuesday","wednesday","thursday","friday","saturday"];function zt({options:e,activeIndex:a,listboxId:t,view:i,selection:o,onSelect:r,onHighlight:n,onUnhighlight:p,onPreviousMonth:l,onNextMonth:g}){let k=(0,F.isoDate)(new Date),E=(0,F.visibleDateRange)({pendingStart:o.rangeStart,highlightedIso:(0,F.cellIso)(e[a]),selected:o.selectedRange});return(0,ae.jsxs)("div",{className:M.datepicker,"data-aia-datepicker":"",children:[(0,ae.jsxs)("div",{className:M.header,children:[(0,ae.jsx)("button",{type:"button",tabIndex:-1,className:M.nav,"data-aia-date-prev":"","aria-label":"Previous month",onMouseDown:b=>b.preventDefault(),onClick:l,children:"\u2039"}),(0,ae.jsx)("span",{className:M.month,"data-aia-date-month":"","aria-live":"polite",children:(0,F.monthLabel)(i)}),(0,ae.jsx)("button",{type:"button",tabIndex:-1,className:M.nav,"data-aia-date-next":"","aria-label":"Next month",onMouseDown:b=>b.preventDefault(),onClick:g,children:"\u203A"})]}),(0,ae.jsx)("div",{className:M.weekdays,"aria-hidden":"true",children:F.WEEKDAY_LABELS.map((b,x)=>(0,ae.jsx)("span",{className:M.weekday,children:b},ma[x]))}),(0,ae.jsx)("div",{className:M.grid,"data-aia-date-grid":"",children:e.map((b,x)=>(0,ae.jsx)(ga,{option:b,id:`${t}-option-${x}`,index:x,isHighlighted:x===a&&b.is_tappable,isToday:(0,F.cellIso)(b)===k,isPast:(0,F.cellIso)(b)!=null&&(0,F.cellIso)(b)<k,marks:(0,F.dateCellMarks)((0,F.cellIso)(b),{selectedIso:o.selectedIso,range:E}),onSelect:r,onHighlight:n,onUnhighlight:p},(0,F.cellIso)(b)??`pad-${x}`))})]})}function ga({option:e,id:a,index:t,isHighlighted:i,isToday:o,isPast:r,marks:n,onSelect:p,onHighlight:l,onUnhighlight:g}){let[k,E]=(0,Lt.useState)(!1),b=(0,F.cellDay)(e);if(b==null)return(0,ae.jsx)("div",{id:a,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-hidden":"true","aria-selected":!1,tabIndex:-1,className:`${M.cell} ${M.blank}`});let x=()=>{E(!0),p(e),setTimeout(()=>E(!1),170)},A=[M.cell,M.day,r?M.past:"",i?M.highlighted:"",o?M.today:"",n.inRange?M.inRange:"",n.selected?M.selected:"",k?M.pressed:""].filter(Boolean).join(" ");return(0,ae.jsx)("div",{id:a,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-selected":i,"aria-label":e.text,tabIndex:0,className:A,onClick:x,onKeyDown:R=>{(R.key==="Enter"||R.key===" ")&&(R.preventDefault(),x())},onMouseEnter:()=>l(t),onMouseLeave:g?()=>g(t):void 0,children:(0,ae.jsx)("span",{className:M.number,children:b})})}var He=require("@magicx-eng/ai-autocomplete-vanilla"),st=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-5259a217")){let e=document.createElement("style");e.id="ac-style-5259a217",e.textContent=`.aia-cluster {
   display: flex;
   flex-wrap: wrap;
   gap: var(--aia-cluster-gap, 0.5rem);
@@ -1323,7 +1335,7 @@
 .aia-cluster[data-justify="around"] {
   justify-content: space-around;
 }
-`,document.head.appendChild(e)}var yt=require("react/jsx-runtime");function Je({gap:e,align:a="center",justify:t="start",noWrap:i=!1,inline:o=!1,className:s,children:n,...c}){let l=e?{"--aia-cluster-gap":e}:void 0,b={className:s?`aia-cluster ${s}`:"aia-cluster","data-align":a,"data-justify":t,"data-nowrap":i||void 0,"data-inline":o||void 0,style:l,...c};return o?(0,yt.jsx)("span",{...b,children:n}):(0,yt.jsx)("div",{...b,children:n})}if(typeof document<"u"&&!document.getElementById("ac-style-56b0c577")){let e=document.createElement("style");e.id="ac-style-56b0c577",e.textContent=`/* The footer adds its own 8px horizontal inset so it stays clear of the
+`,document.head.appendChild(e)}var yt=require("react/jsx-runtime");function Je({gap:e,align:a="center",justify:t="start",noWrap:i=!1,inline:o=!1,className:r,children:n,...p}){let l=e?{"--aia-cluster-gap":e}:void 0,g={className:r?`aia-cluster ${r}`:"aia-cluster","data-align":a,"data-justify":t,"data-nowrap":i||void 0,"data-inline":o||void 0,style:l,...p};return o?(0,yt.jsx)("span",{...g,children:n}):(0,yt.jsx)("div",{...g,children:n})}if(typeof document<"u"&&!document.getElementById("ac-style-56b0c577")){let e=document.createElement("style");e.id="ac-style-56b0c577",e.textContent=`/* The footer adds its own 8px horizontal inset so it stays clear of the
    dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
    room above the hint/branding row so the footer doesn't butt against the last
    option row \u2014 additive to the dropdown's 8px section gap. */
@@ -1470,7 +1482,7 @@
     justify-content: flex-end;
   }
 }
-`,document.head.appendChild(e)}var Se={footer:"aia-footer-qQQ7x",row:"aia-row-BgZ6Q",hintGroup:"aia-hintGroup-ZzbPf",brandLink:"aia-brandLink-r4f3R",key:"aia-key-Bz1H-",hint:"aia-hint-GKEOH",brand:"aia-brand-Al-lR",badge:"aia-badge-Fk9vg"};var ue=require("react/jsx-runtime");function Mt({isOptionHighlighted:e=!1,isInputEmpty:a=!1,strings:t=(0,He.uiStringsFor)()}){let{key:i,hint:o}=(0,He.getFooterHint)(e,a,t),[s,n]=(0,st.useState)(He.ATTRIBUTION_URL);return(0,st.useEffect)(()=>{n((0,He.buildAttributionUrl)())},[]),(0,ue.jsx)("footer",{className:Se.footer,"data-aia-footer":"",children:(0,ue.jsxs)(Je,{justify:"between",noWrap:!0,className:Se.row,children:[(0,ue.jsxs)(Je,{gap:"5px",className:Se.hintGroup,children:[(0,ue.jsx)("kbd",{className:Se.key,children:i}),(0,ue.jsx)("span",{className:Se.hint,children:o})]}),(0,ue.jsxs)("a",{className:Se.brandLink,href:s,target:"_blank",rel:"noopener noreferrer",children:[(0,ue.jsx)("span",{className:Se.brand,children:"AI"}),(0,ue.jsx)("span",{className:Se.badge,children:"Autocomplete"})]})]})})}var lt=require("@magicx-eng/ai-autocomplete-vanilla");var Nt=require("@magicx-eng/ai-autocomplete-vanilla");if(typeof document<"u"&&!document.getElementById("ac-style-199d0432")){let e=document.createElement("style");e.id="ac-style-199d0432",e.textContent=`/* ParamPill (Figma "ParamPill") \u2014 unfilled suggestion pill: transparent fill,
+`,document.head.appendChild(e)}var Se={footer:"aia-footer-qQQ7x",row:"aia-row-BgZ6Q",hintGroup:"aia-hintGroup-ZzbPf",brandLink:"aia-brandLink-r4f3R",key:"aia-key-Bz1H-",hint:"aia-hint-GKEOH",brand:"aia-brand-Al-lR",badge:"aia-badge-Fk9vg"};var ge=require("react/jsx-runtime");function Mt({isOptionHighlighted:e=!1,isInputEmpty:a=!1,strings:t=(0,He.uiStringsFor)()}){let{key:i,hint:o}=(0,He.getFooterHint)(e,a,t),[r,n]=(0,st.useState)(He.ATTRIBUTION_URL);return(0,st.useEffect)(()=>{n((0,He.buildAttributionUrl)())},[]),(0,ge.jsx)("footer",{className:Se.footer,"data-aia-footer":"",children:(0,ge.jsxs)(Je,{justify:"between",noWrap:!0,className:Se.row,children:[(0,ge.jsxs)(Je,{gap:"5px",className:Se.hintGroup,children:[(0,ge.jsx)("kbd",{className:Se.key,children:i}),(0,ge.jsx)("span",{className:Se.hint,children:o})]}),(0,ge.jsxs)("a",{className:Se.brandLink,href:r,target:"_blank",rel:"noopener noreferrer",children:[(0,ge.jsx)("span",{className:Se.brand,children:"AI"}),(0,ge.jsx)("span",{className:Se.badge,children:"Autocomplete"})]})]})})}var lt=require("@magicx-eng/ai-autocomplete-vanilla");var Nt=require("@magicx-eng/ai-autocomplete-vanilla");if(typeof document<"u"&&!document.getElementById("ac-style-199d0432")){let e=document.createElement("style");e.id="ac-style-199d0432",e.textContent=`/* ParamPill (Figma "ParamPill") \u2014 unfilled suggestion pill: transparent fill,
    no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
    The border is kept as a 1px transparent line so the box stays the same size
    as it was when the outline was dashed. */
@@ -1650,7 +1662,7 @@
     opacity: 0;
   }
 }
-`,document.head.appendChild(e)}var me={pill:"aia-pill-6Ga7S",fadeIn:"aia-fadeIn-Ux4eQ",rounded:"aia-rounded-y7xA9",smartText:"aia-smartText-R0cfw","smartSuggestion-shimmer":"aia-smartSuggestion-shimmer-F-yoD",smartSparkle:"aia-smartSparkle-IVabG","smartSuggestion-sparkle":"aia-smartSuggestion-sparkle-Wfj-4","smartSuggestion-sparkle-small":"aia-smartSuggestion-sparkle-small-3VsWJ",skeleton:"aia-skeleton-57P0T",skeletonIn:"aia-skeletonIn-54kMv",skeletonPulse:"aia-skeletonPulse-xGcUy",skeletonOut:"aia-skeletonOut-1sJ-r"};var Be=require("react/jsx-runtime"),kt={selected:1,first:.7,next:.4,last:.2};function Ft({label:e,state:a,rounded:t,loading:i,smartSuggestion:o,completionHeader:s,onClick:n}){let c=[me.pill,t?me.rounded:"",i?me.skeleton:""].filter(Boolean).join(" ");return(0,Be.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":i?"":void 0,"data-aia-smart-suggestion":o?s?"header":"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:c,style:{opacity:kt[a]},onMouseDown:l=>l.preventDefault(),onClick:i?void 0:n,disabled:i,children:o?(0,Be.jsxs)(Be.Fragment,{children:[(0,Be.jsx)("span",{className:`${me.smartText} magicx-aia-smart-suggestion-text`,children:e}),(0,Be.jsx)("span",{className:`${me.smartSparkle} magicx-aia-smart-suggestion-sparkle`,dangerouslySetInnerHTML:{__html:Nt.SMART_SUGGESTION_SPARKLE_SVG}})]}):e})}if(typeof document<"u"&&!document.getElementById("ac-style-0fcb7940")){let e=document.createElement("style");e.id="ac-style-0fcb7940",e.textContent=`.aia-list-qvLqO {
+`,document.head.appendChild(e)}var fe={pill:"aia-pill-6Ga7S",fadeIn:"aia-fadeIn-Ux4eQ",rounded:"aia-rounded-y7xA9",smartText:"aia-smartText-R0cfw","smartSuggestion-shimmer":"aia-smartSuggestion-shimmer-F-yoD",smartSparkle:"aia-smartSparkle-IVabG","smartSuggestion-sparkle":"aia-smartSuggestion-sparkle-Wfj-4","smartSuggestion-sparkle-small":"aia-smartSuggestion-sparkle-small-3VsWJ",skeleton:"aia-skeleton-57P0T",skeletonIn:"aia-skeletonIn-54kMv",skeletonPulse:"aia-skeletonPulse-xGcUy",skeletonOut:"aia-skeletonOut-1sJ-r"};var Be=require("react/jsx-runtime"),kt={selected:1,first:.7,next:.4,last:.2};function Ft({label:e,state:a,rounded:t,loading:i,smartSuggestion:o,completionHeader:r,onClick:n}){let p=[fe.pill,t?fe.rounded:"",i?fe.skeleton:""].filter(Boolean).join(" ");return(0,Be.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":i?"":void 0,"data-aia-smart-suggestion":o?r?"header":"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:p,style:{opacity:kt[a]},onMouseDown:l=>l.preventDefault(),onClick:i?void 0:n,disabled:i,children:o?(0,Be.jsxs)(Be.Fragment,{children:[(0,Be.jsx)("span",{className:`${fe.smartText} magicx-aia-smart-suggestion-text`,children:e}),(0,Be.jsx)("span",{className:`${fe.smartSparkle} magicx-aia-smart-suggestion-sparkle`,dangerouslySetInnerHTML:{__html:Nt.SMART_SUGGESTION_SPARKLE_SVG}})]}):e})}if(typeof document<"u"&&!document.getElementById("ac-style-0fcb7940")){let e=document.createElement("style");e.id="ac-style-0fcb7940",e.textContent=`.aia-list-qvLqO {
   position: relative;
   z-index: 1;
   pointer-events: auto;
@@ -1660,7 +1672,7 @@
   align-items: center;
   vertical-align: middle;
 }
-`,document.head.appendChild(e)}var Ct={list:"aia-list-qvLqO"};var et=require("react/jsx-runtime"),fa=[125,69];function Ht(e){return e===0?"first":e===1?"next":"last"}function dt({pills:e,activePillIndex:a,onSelectPill:t,activeSelected:i,rounded:o,loading:s}){return s&&e.length===0?(0,et.jsx)("span",{className:Ct.list,"data-aia-pill-list-loading":"",children:fa.map((n,c)=>(0,et.jsx)("span",{"data-aia-pill-skeleton":"",className:`${me.pill} ${o?me.rounded:""} ${me.skeleton}`,style:{width:n,opacity:kt[Ht(c)]}},`skel-${n}`))}):(0,et.jsx)("span",{className:Ct.list,"data-aia-pill-list-loading":s?"":void 0,children:e.map((n,c)=>{let l=!!i&&c===a;return(0,et.jsx)(Ft,{label:n.text,state:l?"selected":Ht(c),selected:l,rounded:o,loading:s,smartSuggestion:(0,lt.isSmartSuggestion)(n),completionHeader:(0,lt.isTraditionalAutocompleteSuggestion)(n),onClick:()=>t(c)},`${n.parameter}-${n.text}`)})})}var ge=require("@magicx-eng/ai-autocomplete-vanilla"),Qe=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-fef1688d")){let e=document.createElement("style");e.id="ac-style-fef1688d",e.textContent=`/* Product strip \u2014 the React counterpart of the vanilla core's strip rules
+`,document.head.appendChild(e)}var Ct={list:"aia-list-qvLqO"};var et=require("react/jsx-runtime"),fa=[125,69];function Ht(e){return e===0?"first":e===1?"next":"last"}function dt({pills:e,activePillIndex:a,onSelectPill:t,activeSelected:i,rounded:o,loading:r}){return r&&e.length===0?(0,et.jsx)("span",{className:Ct.list,"data-aia-pill-list-loading":"",children:fa.map((n,p)=>(0,et.jsx)("span",{"data-aia-pill-skeleton":"",className:`${fe.pill} ${o?fe.rounded:""} ${fe.skeleton}`,style:{width:n,opacity:kt[Ht(p)]}},`skel-${n}`))}):(0,et.jsx)("span",{className:Ct.list,"data-aia-pill-list-loading":r?"":void 0,children:e.map((n,p)=>{let l=!!i&&p===a;return(0,et.jsx)(Ft,{label:n.text,state:l?"selected":Ht(p),selected:l,rounded:o,loading:r,smartSuggestion:(0,lt.isSmartSuggestion)(n),completionHeader:(0,lt.isTraditionalAutocompleteSuggestion)(n),onClick:()=>t(p)},`${n.parameter}-${n.text}`)})})}var be=require("@magicx-eng/ai-autocomplete-vanilla"),Ve=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-fef1688d")){let e=document.createElement("style");e.id="ac-style-fef1688d",e.textContent=`/* Product strip \u2014 the React counterpart of the vanilla core's strip rules
    (packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
    theming one package sees the same result in the other.
 
@@ -1755,7 +1767,9 @@
 }
 
 /* Square media tile. aspect-ratio (not a fixed height) keeps it square at any
-   --aia-product-card-width a consumer sets. */
+   --aia-product-card-width a consumer sets. The fill is the placeholder: it
+   shows across the whole tile until the photo paints (a photo's size isn't
+   known before it loads), and behind both fallback tiles. */
 .aia-media-RrbGe {
   display: block;
   position: relative;
@@ -1766,13 +1780,27 @@
   background: var(--aia-product-media-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, 0.25)));
 }
 
+/* Once the photo has loaded the placeholder steps aside: a contained photo
+   that doesn't fill the tile sits on the panel's own background rather than
+   on a grey box. The renderer sets the attribute from the photo's \`load\`
+   event. */
+.aia-media-RrbGe[data-aia-image-loaded] {
+  background: transparent;
+}
+
 /* \`contain\`, not \`cover\`: catalog photos come in any aspect ratio, and a
    square crop cuts the top and bottom off a tall one (a gallon jug). The
-   picture scales by its longer side and the media fill shows around it. */
+   picture fills the tile's height and takes only the width its ratio needs,
+   centred, so a tall picture's box is the picture itself and its own corner
+   radius rounds it. A wide one is clamped to the tile's width and contained
+   inside it; a square one fills the tile. */
 .aia-image-5pNL7 {
   display: block;
-  width: 100%;
+  width: auto;
+  max-width: 100%;
   height: 100%;
+  margin: 0 auto;
+  border-radius: var(--aia-product-image-radius, 8px);
   object-fit: contain;
 }
 
@@ -1947,7 +1975,7 @@
   letter-spacing: 0.02em;
   text-align: center;
 }
-`,document.head.appendChild(e)}var ne={section:"aia-section-Hugfg",label:"aia-label-nuc93",row:"aia-row-WDVBX",card:"aia-card-JBGYT",media:"aia-media-RrbGe",image:"aia-image-5pNL7",body:"aia-body-ly032",vendor:"aia-vendor-Gvu7G",title:"aia-title-gCNmq",price:"aia-price-gULcE",badge:"aia-badge-j9Hcd"};var Q=require("react/jsx-runtime");function Bt({products:e,listboxId:a,onSelect:t,onFocusChange:i,focusable:o=!0,layout:s="row",imageFallback:n="image",strings:c=(0,ge.uiStringsFor)()}){let l=e.length>0,b=(0,Qe.useRef)(null);if((0,Qe.useEffect)(()=>{let T=b.current;if(!(!l||!T))return(0,ge.attachProductRowWheel)(T)},[l]),!l)return null;let P=`${a}-products-label`;return(0,Q.jsxs)("section",{className:ne.section,"data-aia-products":"","data-aia-products-layout":s,role:"group","aria-labelledby":P,children:[(0,Q.jsx)("div",{className:ne.label,id:P,"data-aia-products-label":"",children:c.products}),(0,Q.jsx)("div",{ref:b,className:ne.row,"data-aia-products-row":"",children:e.map((T,f)=>(0,Q.jsx)(ba,{product:T,id:`${a}-product-${f}`,onSelect:t,onFocusChange:i,focusable:o,imageFallback:n,soldOut:c.soldOut},T.id))})]})}function ba({product:e,id:a,onSelect:t,onFocusChange:i,focusable:o,imageFallback:s,soldOut:n}){let c=l=>{l.metaKey||l.ctrlKey||l.shiftKey||l.altKey||l.button!==0||(l.preventDefault(),t(e))};return(0,Q.jsxs)("a",{id:a,className:ne.card,"data-aia-product":"","data-aia-product-sold-out":e.available===!1?"":void 0,role:"option","aria-selected":!1,href:e.url,tabIndex:o?0:-1,onClick:c,onKeyDown:l=>{l.key!=="Enter"&&l.key!==" "||(l.preventDefault(),t(e))},onFocus:()=>i?.(!0),onBlur:l=>{l.relatedTarget?.closest("[data-aia-dropdown]")||i?.(!1)},children:[(0,Q.jsx)(wa,{sources:(0,ge.productImageSources)(e.imageUrl),title:e.title,fallback:s},(0,ge.productImageSrc)(e.imageUrl)??""),(0,Q.jsxs)("span",{className:ne.body,children:[e.vendor?(0,Q.jsx)("span",{className:ne.vendor,children:e.vendor}):null,(0,Q.jsx)("span",{className:ne.title,children:e.title}),e.price?(0,Q.jsx)("span",{className:ne.price,children:e.price}):null,e.available===!1?(0,Q.jsx)("span",{className:ne.badge,children:n}):null]})]})}function wa({sources:e,title:a,fallback:t}){let[i,o]=(0,Qe.useState)(0),s=e[i],n=!!s,c=!n&&t==="initial";return(0,Q.jsxs)("span",{className:ne.media,"aria-hidden":"true","data-aia-product-placeholder":!n&&!c?"":void 0,"data-aia-product-initial":c?"":void 0,children:[n?(0,Q.jsx)("img",{className:ne.image,src:s,alt:"",loading:"lazy",decoding:"async",onError:()=>o(l=>l+1)}):null,c?(0,ge.productInitial)(a):null]})}var W=require("@magicx-eng/ai-autocomplete-vanilla"),be=require("react");var Kt=require("@magicx-eng/ai-autocomplete-vanilla"),ct=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`.aia-grid {
+`,document.head.appendChild(e)}var re={section:"aia-section-Hugfg",label:"aia-label-nuc93",row:"aia-row-WDVBX",card:"aia-card-JBGYT",media:"aia-media-RrbGe",image:"aia-image-5pNL7",body:"aia-body-ly032",vendor:"aia-vendor-Gvu7G",title:"aia-title-gCNmq",price:"aia-price-gULcE",badge:"aia-badge-j9Hcd"};var Q=require("react/jsx-runtime");function Bt({products:e,listboxId:a,onSelect:t,onFocusChange:i,focusable:o=!0,layout:r="row",imageFallback:n="image",strings:p=(0,be.uiStringsFor)()}){let l=e.length>0,g=(0,Ve.useRef)(null);if((0,Ve.useEffect)(()=>{let E=g.current;if(!(!l||!E))return(0,be.attachProductRowWheel)(E)},[l]),!l)return null;let k=`${a}-products-label`;return(0,Q.jsxs)("section",{className:re.section,"data-aia-products":"","data-aia-products-layout":r,role:"group","aria-labelledby":k,children:[(0,Q.jsx)("div",{className:re.label,id:k,"data-aia-products-label":"",children:p.products}),(0,Q.jsx)("div",{ref:g,className:re.row,"data-aia-products-row":"",children:e.map((E,b)=>(0,Q.jsx)(ba,{product:E,id:`${a}-product-${b}`,onSelect:t,onFocusChange:i,focusable:o,imageFallback:n,soldOut:p.soldOut},E.id))})]})}function ba({product:e,id:a,onSelect:t,onFocusChange:i,focusable:o,imageFallback:r,soldOut:n}){let p=l=>{l.metaKey||l.ctrlKey||l.shiftKey||l.altKey||l.button!==0||(l.preventDefault(),t(e))};return(0,Q.jsxs)("a",{id:a,className:re.card,"data-aia-product":"","data-aia-product-sold-out":e.available===!1?"":void 0,role:"option","aria-selected":!1,href:e.url,tabIndex:o?0:-1,onClick:p,onKeyDown:l=>{l.key!=="Enter"&&l.key!==" "||(l.preventDefault(),t(e))},onFocus:()=>i?.(!0),onBlur:l=>{l.relatedTarget?.closest("[data-aia-dropdown]")||i?.(!1)},children:[(0,Q.jsx)(wa,{sources:(0,be.productImageSources)(e.imageUrl),title:e.title,fallback:r},(0,be.productImageSrc)(e.imageUrl)??""),(0,Q.jsxs)("span",{className:re.body,children:[e.vendor?(0,Q.jsx)("span",{className:re.vendor,children:e.vendor}):null,(0,Q.jsx)("span",{className:re.title,children:e.title}),e.price?(0,Q.jsx)("span",{className:re.price,children:e.price}):null,e.available===!1?(0,Q.jsx)("span",{className:re.badge,children:n}):null]})]})}function wa({sources:e,title:a,fallback:t}){let[i,o]=(0,Ve.useState)(0),r=e[i],n=!!r,[p,l]=(0,Ve.useState)(null),g=!n&&t==="initial";return(0,Q.jsxs)("span",{className:re.media,"aria-hidden":"true","data-aia-product-placeholder":!n&&!g?"":void 0,"data-aia-product-initial":g?"":void 0,"data-aia-image-loaded":n&&p===r?"":void 0,children:[n?(0,Q.jsx)("img",{className:re.image,src:r,alt:"",loading:"lazy",decoding:"async",onLoad:()=>l(r),onError:()=>o(k=>k+1)}):null,g?(0,be.productInitial)(a):null]})}var _=require("@magicx-eng/ai-autocomplete-vanilla"),we=require("react");var Kt=require("@magicx-eng/ai-autocomplete-vanilla"),ct=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`.aia-grid {
   display: grid;
   grid-template-columns: repeat(
       auto-fit,
@@ -1983,7 +2011,7 @@
 .aia-grid[data-scroll]::-webkit-scrollbar {
   display: none;
 }
-`,document.head.appendChild(e)}var Wt=require("react/jsx-runtime");function Gt({min:e="16rem",max:a,gap:t,scroll:i=!1,maxHeight:o,scrollResetKey:s,cols:n,template:c,innerRef:l,className:b,children:P,...T}){let f=(0,ct.useRef)(null);(0,ct.useLayoutEffect)(()=>{if(s===void 0)return;let E=f.current;E&&(E.scrollTop=0)},[s]);let x={"--aia-grid-min":e};return a&&(x["--aia-grid-max"]=a),t&&(x["--aia-grid-gap"]=t),o&&(x["--aia-grid-max-height"]=o),n&&(x.gridTemplateColumns=(0,Kt.optionsGridTemplateColumns)(n)),c&&(x.gridTemplateColumns=c),(0,Wt.jsx)("div",{ref:E=>{f.current=E,l?.(E)},className:b?`aia-grid ${b}`:"aia-grid","data-scroll":i||void 0,style:x,...T,children:P})}var ae=require("@magicx-eng/ai-autocomplete-vanilla"),fe=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-82820da7")){let e=document.createElement("style");e.id="ac-style-82820da7",e.textContent=`.aia-item-d4vpD {
+`,document.head.appendChild(e)}var Wt=require("react/jsx-runtime");function Gt({min:e="16rem",max:a,gap:t,scroll:i=!1,maxHeight:o,scrollResetKey:r,cols:n,template:p,innerRef:l,className:g,children:k,...E}){let b=(0,ct.useRef)(null);(0,ct.useLayoutEffect)(()=>{if(r===void 0)return;let A=b.current;A&&(A.scrollTop=0)},[r]);let x={"--aia-grid-min":e};return a&&(x["--aia-grid-max"]=a),t&&(x["--aia-grid-gap"]=t),o&&(x["--aia-grid-max-height"]=o),n&&(x.gridTemplateColumns=(0,Kt.optionsGridTemplateColumns)(n)),p&&(x.gridTemplateColumns=p),(0,Wt.jsx)("div",{ref:A=>{b.current=A,l?.(A)},className:g?`aia-grid ${g}`:"aia-grid","data-scroll":i||void 0,style:x,...E,children:k})}var oe=require("@magicx-eng/ai-autocomplete-vanilla"),pe=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-82820da7")){let e=document.createElement("style");e.id="ac-style-82820da7",e.textContent=`.aia-item-d4vpD {
   position: relative;
   /* Clip, not visible: the entrance rise below runs on the inner content,
      and a transformed box extends its scroll container's scrollable area.
@@ -2252,8 +2280,9 @@
 /* The picture: a square tile, centred on the text beside it (a one-line
    option reads as the reference row; a wrapped one keeps the tile on its
    vertical middle). Sized and rounded by token so a consumer can shrink it
-   or square it off; the placeholder fill shows through until the picture
-   paints and stays if it never does. */
+   or square it off. The fill is the placeholder: it shows across the whole
+   tile until the picture paints (a picture's size isn't known before it
+   loads) and stays if it never does. */
 .aia-content-T-Qba:has(.aia-image-YZAbO) {
   align-items: center;
   gap: var(--aia-option-image-gap, 12px);
@@ -2269,13 +2298,27 @@
   background: var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, 0.083)));
 }
 
+/* Once the picture has loaded the placeholder steps aside: a contained
+   picture that doesn't fill the tile sits on the dropdown's own background
+   rather than on a grey box. The renderer sets the attribute from the
+   picture's \`load\` event. */
+.aia-image-YZAbO[data-aia-image-loaded] {
+  background: transparent;
+}
+
 /* \`contain\`, not \`cover\`: option pictures come in any aspect ratio, and a
    square crop cuts the top and bottom off a tall one (a pint bottle). The
-   picture scales by its longer side and the tile's fill shows around it. */
+   picture fills the tile's height and takes only the width its ratio needs,
+   centred, so a tall picture's box is the picture itself and its own corner
+   radius rounds it. A wide one is clamped to the tile's width and contained
+   inside it; a square one fills the tile, whose larger radius clips it. */
 .aia-image-YZAbO img {
   display: block;
-  width: 100%;
+  width: auto;
+  max-width: 100%;
   height: 100%;
+  margin: 0 auto;
+  border-radius: var(--aia-option-picture-radius, 6px);
   object-fit: contain;
 }
 
@@ -2316,8 +2359,13 @@
   content: " " var(--aia-option-count-unit-one, var(--aia-option-count-unit, "item"));
 }
 
-/* Skeleton rows keep the tile (its placeholder fill pulses with the row)
-   but not the picture, and drop the count like the tag. */
+/* Skeleton rows fill the tile even when the picture has loaded (the fill
+   pulses with the row) and hide the picture, and drop the count like the
+   tag. */
+.aia-item-d4vpD[data-aia-loading] .aia-image-YZAbO {
+  background: var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, 0.083)));
+}
+
 .aia-item-d4vpD[data-aia-loading] .aia-image-YZAbO img {
   visibility: hidden;
 }
@@ -2421,7 +2469,7 @@
     opacity: 0;
   }
 }
-`,document.head.appendChild(e)}var Y={item:"aia-item-d4vpD",content:"aia-content-T-Qba",riseIn:"aia-riseIn-etXZT",fadeIn:"aia-fadeIn-I8u35",tappable:"aia-tappable-70KcX",nonTappable:"aia-nonTappable-xSZM-",highlighted:"aia-highlighted-Hb0SU",tag:"aia-tag-e3Fwe",pressed:"aia-pressed-98o-r",pressCompress:"aia-pressCompress-ICV3q",scrollHint:"aia-scrollHint-xKXPt",skeletonPulse:"aia-skeletonPulse-plvdD",text:"aia-text-yqoh9",skeletonBarIn:"aia-skeletonBarIn-ZlEM0",parameter:"aia-parameter-Dt2zF",match:"aia-match-pp-9v",icon:"aia-icon-Qw938",count:"aia-count-IpYbQ",image:"aia-image-YZAbO",skeletonOut:"aia-skeletonOut-x6NRd"};var $=require("react/jsx-runtime");function _t({option:e,isHighlighted:a,onSelect:t,onHighlight:i,onUnhighlight:o,id:s,loading:n,showIcon:c=!0,showImage:l=!0,showCount:b=!0,scrollHint:P,enterDelayMs:T=0}){let[f]=(0,fe.useState)(T),[x,E]=(0,fe.useState)(!1),D=l?(0,ae.optionImageSources)(e.image_url):[],K=D[0]??null,[V,Z]=(0,fe.useState)([]),R=D.find(A=>!V.includes(A))??null,O=(0,fe.useMemo)(()=>!K&&c&&e.icon_svg?(0,ae.sanitizeOptionIconSvg)(e.icon_svg):null,[K,c,e.icon_svg]),M=b?(0,ae.formatOptionCount)(e.item_count):null,k=(0,fe.useRef)(void 0);(0,fe.useEffect)(()=>()=>clearTimeout(k.current),[]);let te=()=>{n||!e.is_tappable||x||(E(!0),t(e),clearTimeout(k.current),k.current=setTimeout(()=>E(!1),170))},j=[Y.item,a&&!n?Y.highlighted:"",e.is_tappable?Y.tappable:Y.nonTappable,x?Y.pressed:"",P?Y.scrollHint:""].filter(Boolean).join(" ");return(0,$.jsx)("div",{id:s,role:"option","data-aia-option":"","data-aia-loading":n?"":void 0,"data-aia-icon":O&&e.icon?e.icon:void 0,"data-aia-image":K?"":void 0,"data-aia-item-count":M!==null?e.item_count:void 0,"aria-selected":a,className:j,style:{[ae.OPTION_ENTER_DELAY_VAR]:`${f}ms`},tabIndex:n||!e.is_tappable?-1:0,onClick:te,onKeyDown:A=>{!n&&e.is_tappable&&(A.key==="Enter"||A.key===" ")&&(A.preventDefault(),te())},onMouseEnter:!n&&e.is_tappable?i:void 0,onMouseLeave:o,children:(0,$.jsxs)("span",{className:Y.content,children:[K&&(0,$.jsx)("span",{className:`${Y.image} magicx-aia-option-image`,"aria-hidden":"true",children:(0,$.jsx)("img",{src:R??K,alt:"",loading:"lazy",decoding:"async",referrerPolicy:"no-referrer",draggable:!1,hidden:R===null,onError:()=>{R!==null&&Z(A=>[...A,R])}})}),O&&(0,$.jsx)("span",{className:`${Y.icon} magicx-aia-option-icon`,"aria-hidden":"true",dangerouslySetInnerHTML:{__html:O}}),(0,$.jsxs)("span",{className:Y.text,children:[e.matchedText?(0,ae.highlightParts)((0,ae.optionLabel)(e),e.matchedText).map((A,re)=>A.bold?(0,$.jsx)("strong",{className:`${Y.match} magicx-aia-option-match`,children:A.text},re):A.text):(0,ae.optionLabel)(e),e.parameterLabel&&(0,$.jsxs)($.Fragment,{children:[" ",(0,$.jsx)("span",{className:`${Y.parameter} magicx-aia-option-parameter`,children:e.parameterLabel})]})]}),e.tag&&(0,$.jsx)("span",{className:Y.tag,children:e.tag}),M!==null&&(0,$.jsx)("span",{className:`${Y.count} magicx-aia-option-count`,children:M})]})})}var St=require("react/jsx-runtime");function va(){let[e,a]=(0,be.useState)(W.isOptionsGridMobileViewport);return(0,be.useEffect)(()=>{if(typeof window>"u"||!window.matchMedia)return;let t=window.matchMedia(W.OPTIONS_GRID_MOBILE_QUERY),i=()=>a(t.matches);return i(),t.addEventListener("change",i),()=>t.removeEventListener("change",i)},[]),e}function qt({options:e,activeIndex:a,onSelect:t,onHighlight:i,onUnhighlight:o,listboxId:s,loading:n,groupKey:c="",optionsPosition:l="below",showIcons:b=!0,showImages:P=!0,showCounts:T=!0}){let f=va(),x=(0,be.useRef)(null),[E,D]=(0,be.useState)(null),K=(0,be.useRef)(null);(0,be.useLayoutEffect)(()=>{if(n&&(0,W.sameOptionRows)(K.current,e))return;K.current=n?null:e;let R=x.current,M=R&&!n&&(0,W.needsOptionsGridMeasurement)(e.length,f)?(0,W.measureOptionsGrid)(R):null;D(M?(0,W.planOptionsGrid)(e.length,f,M.rowWidths,M.gridWidth):null)},[e,f,n]);let V=E??(0,W.planOptionsGrid)(e.length,f,null,null),Z=(0,W.optionsShowLeadingVisuals)(e,b,P);return(0,St.jsx)(Gt,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:c,template:V.template,maxHeight:V.maxHeight,innerRef:R=>{x.current=R},"data-aia-group":c,children:e.map((R,O)=>(0,St.jsx)(_t,{option:R,isHighlighted:O===a,onSelect:t,onHighlight:()=>i(O),onUnhighlight:o?()=>o(O):void 0,id:`${s}-option-${O}`,loading:n,showIcon:b&&Z,showImage:P&&Z,showCount:T,scrollHint:!n&&V.scrollHintIndices.includes(O),enterDelayMs:n?0:(0,W.optionEnterDelayMs)(O,V.cols,e.length,l)},`${c}\0${R.text}`))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`.aia-stack {
+`,document.head.appendChild(e)}var Z={item:"aia-item-d4vpD",content:"aia-content-T-Qba",riseIn:"aia-riseIn-etXZT",fadeIn:"aia-fadeIn-I8u35",tappable:"aia-tappable-70KcX",nonTappable:"aia-nonTappable-xSZM-",highlighted:"aia-highlighted-Hb0SU",tag:"aia-tag-e3Fwe",pressed:"aia-pressed-98o-r",pressCompress:"aia-pressCompress-ICV3q",scrollHint:"aia-scrollHint-xKXPt",skeletonPulse:"aia-skeletonPulse-plvdD",text:"aia-text-yqoh9",skeletonBarIn:"aia-skeletonBarIn-ZlEM0",parameter:"aia-parameter-Dt2zF",match:"aia-match-pp-9v",icon:"aia-icon-Qw938",count:"aia-count-IpYbQ",image:"aia-image-YZAbO",skeletonOut:"aia-skeletonOut-x6NRd"};var $=require("react/jsx-runtime");function _t({option:e,isHighlighted:a,onSelect:t,onHighlight:i,onUnhighlight:o,id:r,loading:n,showIcon:p=!0,showImage:l=!0,showCount:g=!0,scrollHint:k,enterDelayMs:E=0}){let[b]=(0,pe.useState)(E),[x,A]=(0,pe.useState)(!1),R=l?(0,oe.optionImageSources)(e.image_url):[],B=R[0]??null,[Y,X]=(0,pe.useState)([]),T=R.find(O=>!Y.includes(O))??null,[z,K]=(0,pe.useState)(null),C=(0,pe.useMemo)(()=>!B&&p&&e.icon_svg?(0,oe.sanitizeOptionIconSvg)(e.icon_svg):null,[B,p,e.icon_svg]),J=g?(0,oe.formatOptionCount)(e.item_count):null,W=(0,pe.useRef)(void 0);(0,pe.useEffect)(()=>()=>clearTimeout(W.current),[]);let V=()=>{n||!e.is_tappable||x||(A(!0),t(e),clearTimeout(W.current),W.current=setTimeout(()=>A(!1),170))},se=[Z.item,a&&!n?Z.highlighted:"",e.is_tappable?Z.tappable:Z.nonTappable,x?Z.pressed:"",k?Z.scrollHint:""].filter(Boolean).join(" ");return(0,$.jsx)("div",{id:r,role:"option","data-aia-option":"","data-aia-loading":n?"":void 0,"data-aia-icon":C&&e.icon?e.icon:void 0,"data-aia-image":B?"":void 0,"data-aia-item-count":J!==null?e.item_count:void 0,"aria-selected":a,className:se,style:{[oe.OPTION_ENTER_DELAY_VAR]:`${b}ms`},tabIndex:n||!e.is_tappable?-1:0,onClick:V,onKeyDown:O=>{!n&&e.is_tappable&&(O.key==="Enter"||O.key===" ")&&(O.preventDefault(),V())},onMouseEnter:!n&&e.is_tappable?i:void 0,onMouseLeave:o,children:(0,$.jsxs)("span",{className:Z.content,children:[B&&(0,$.jsx)("span",{className:`${Z.image} magicx-aia-option-image`,"aria-hidden":"true","data-aia-image-loaded":T!==null&&z===T?"":void 0,children:(0,$.jsx)("img",{src:T??B,alt:"",loading:"lazy",decoding:"async",referrerPolicy:"no-referrer",draggable:!1,hidden:T===null,onLoad:()=>K(T),onError:()=>{T!==null&&X(O=>[...O,T])}})}),C&&(0,$.jsx)("span",{className:`${Z.icon} magicx-aia-option-icon`,"aria-hidden":"true",dangerouslySetInnerHTML:{__html:C}}),(0,$.jsxs)("span",{className:Z.text,children:[e.matchedText?(0,oe.highlightParts)((0,oe.optionLabel)(e),e.matchedText).map((O,ee)=>O.bold?(0,$.jsx)("strong",{className:`${Z.match} magicx-aia-option-match`,children:O.text},ee):O.text):(0,oe.optionLabel)(e),e.parameterLabel&&(0,$.jsxs)($.Fragment,{children:[" ",(0,$.jsx)("span",{className:`${Z.parameter} magicx-aia-option-parameter`,children:e.parameterLabel})]})]}),e.tag&&(0,$.jsx)("span",{className:Z.tag,children:e.tag}),J!==null&&(0,$.jsx)("span",{className:`${Z.count} magicx-aia-option-count`,children:J})]})})}var St=require("react/jsx-runtime");function va(){let[e,a]=(0,we.useState)(_.isOptionsGridMobileViewport);return(0,we.useEffect)(()=>{if(typeof window>"u"||!window.matchMedia)return;let t=window.matchMedia(_.OPTIONS_GRID_MOBILE_QUERY),i=()=>a(t.matches);return i(),t.addEventListener("change",i),()=>t.removeEventListener("change",i)},[]),e}function qt({options:e,activeIndex:a,onSelect:t,onHighlight:i,onUnhighlight:o,listboxId:r,loading:n,groupKey:p="",optionsPosition:l="below",showIcons:g=!0,showImages:k=!0,showCounts:E=!0}){let b=va(),x=(0,we.useRef)(null),[A,R]=(0,we.useState)(null),B=(0,we.useRef)(null);(0,we.useLayoutEffect)(()=>{if(n&&(0,_.sameOptionRows)(B.current,e))return;B.current=n?null:e;let T=x.current,K=T&&!n&&(0,_.needsOptionsGridMeasurement)(e.length,b)?(0,_.measureOptionsGrid)(T):null;R(K?(0,_.planOptionsGrid)(e.length,b,K.rowWidths,K.gridWidth):null)},[e,b,n]);let Y=A??(0,_.planOptionsGrid)(e.length,b,null,null),X=(0,_.optionsShowLeadingVisuals)(e,g,k);return(0,St.jsx)(Gt,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:p,template:Y.template,maxHeight:Y.maxHeight,innerRef:T=>{x.current=T},"data-aia-group":p,children:e.map((T,z)=>(0,St.jsx)(_t,{option:T,isHighlighted:z===a,onSelect:t,onHighlight:()=>i(z),onUnhighlight:o?()=>o(z):void 0,id:`${r}-option-${z}`,loading:n,showIcon:g&&X,showImage:k&&X,showCount:E,scrollHint:!n&&Y.scrollHintIndices.includes(z),enterDelayMs:n?0:(0,_.optionEnterDelayMs)(z,Y.cols,e.length,l)},`${p}\0${T.text}`))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`.aia-stack {
   display: flex;
   flex-direction: column;
   gap: var(--aia-stack-space, 0.5rem);
@@ -2436,7 +2484,7 @@
   align-items: end;
 }
 /* data-align="stretch" is the flex default \u2014 no rule needed. */
-`,document.head.appendChild(e)}var Vt=require("react/jsx-runtime");function Ut({space:e,align:a="stretch",className:t,children:i,...o}){let s=e?{"--aia-stack-space":e}:void 0;return(0,Vt.jsx)("div",{className:t?`aia-stack ${t}`:"aia-stack","data-align":a,style:s,...o,children:i})}var _=require("react/jsx-runtime"),xa=[159,119,164],ya=()=>{},jt=()=>{};function ka(e){let a=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[t,i]=(0,U.useState)(a);if((0,U.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let o=window.matchMedia("(prefers-color-scheme: dark)"),s=()=>i(o.matches);return o.addEventListener("change",s),()=>o.removeEventListener("change",s)},[e]),e!==void 0)return e==="auto"?t?"dark":"light":e}function Ca(e,a){let t=(0,U.useRef)(null);(0,U.useEffect)(()=>{let i=e.current,o=a.current;if(!i||!o)return;let s=i.querySelector(".aia-grid[data-scroll]");if(t.current&&t.current.grid!==s&&(t.current.controller.destroy(),t.current=null),s&&!t.current){t.current={grid:s,controller:(0,ee.attachScrollArrow)({dropdown:i,grid:s,button:o})};return}t.current?.controller.update()}),(0,U.useEffect)(()=>()=>{t.current?.controller.destroy(),t.current=null},[])}function Sa(e,a){let t=(0,U.useRef)(a);t.current=a;let i=(0,U.useRef)(null);(0,U.useEffect)(()=>{let o=e.current;if(o){if(!i.current){i.current=(0,ee.attachViewportFit)({dropdown:o,isOpen:()=>t.current});return}i.current.update()}}),(0,U.useEffect)(()=>()=>{i.current?.destroy(),i.current=null},[])}function pt({suggestions:e,activeIndex:a,onSelect:t,onHighlight:i,onUnhighlight:o,isOpen:s,id:n,className:c,pills:l,onPillClick:b,showPills:P=!0,onSkip:T,showSkipButton:f=!0,showOptionIcons:x=!0,showOptionImages:E=!0,showOptionCounts:D=!0,skipDisabled:K=!1,activeSelected:V=!1,isLoading:Z=!1,skeletonExiting:R=!1,isInputEmpty:O=!1,language:M,products:k,onProductSelect:te,onProductFocusChange:j,productsLayout:A="row",productImageFallback:re="image",formatType:we="options",dateView:ie=null,selectedDateIso:ve=null,selectedDateRange:Pe=null,dateRangeStart:We=null,onPreviousMonth:Ie,onNextMonth:m,optionsPosition:Te="below",mode:Ee}){let xe=ka(Ee),Ae=xe!==void 0,oe=(0,U.useRef)(null),ye=(0,U.useRef)(null);Ca(oe,ye),(0,U.useEffect)(()=>{if(oe.current)return(0,ee.containScroll)(oe.current)},[]);let d=e[0]?.options??[],g=!!(l&&l.length>0&&b),w=!!(k&&k.length>0),v=s&&(d.length>0||P&&g||Z||w);Sa(oe,v);let C={suggestions:e,activeIndex:a,pills:l,showPills:P,showSkipButton:f,showOptionIcons:x,showOptionImages:E,showOptionCounts:D,skipDisabled:K,activeSelected:V,isLoading:Z,skeletonExiting:R,isInputEmpty:O,products:k,formatType:we,dateView:ie,selectedDateIso:ve,selectedDateRange:Pe,dateRangeStart:We},F=(0,U.useRef)(C);v&&(F.current=C);let h=v?C:F.current,G=(0,ee.uiStringsFor)(M),se=h.suggestions[0],le=se?.options??[],Re=h.activeIndex>=0&&!!le[h.activeIndex]?.is_tappable,de=(0,ee.labelTraditionalAutocomplete)(h.pills??[],G.keepTyping),De=!!(de.length>0&&b),Oe=h.showPills&&De,Le=h.showPills&&!De&&h.isLoading,ze=Oe||Le,y=De&&(0,ee.hasSkippablePill)(de)&&h.showSkipButton&&!h.isInputEmpty&&!!T,Me=de[0]?.text,Ne=(0,ee.isCalendarFormat)(h.formatType)&&h.dateView!=null,ke=le.length>0&&!Ne,u=le.length>0&&Ne&&!h.isLoading,Ve=h.isLoading&&!ke&&!u,je=h.products??[];return(0,_.jsxs)("div",{ref:oe,id:n,role:"listbox","data-aia-dropdown":"","data-options-position":Te,"data-mode":xe,"data-aia-loading":h.isLoading?"":void 0,"data-aia-skeleton-exiting":h.skeletonExiting?"":void 0,"data-aia-has-products":je.length>0?"":void 0,className:`${Ae?"magicx-aia ":""}${Ce.dropdown} ${v?Ce.visible:""} ${c??""}`,onMouseDown:pe=>pe.preventDefault(),children:[(0,_.jsxs)(Ut,{space:"8px",children:[(ze||y)&&(0,_.jsxs)(Je,{noWrap:!0,className:Ce.pillBar,"data-aia-pillbar":"",children:[ze&&(0,_.jsx)("span",{className:Ce.pillScroll,"data-aia-pill-scroll":"",children:(0,_.jsx)(dt,{pills:de,activePillIndex:0,activeSelected:h.activeSelected,onSelectPill:b??(()=>{}),rounded:!0,loading:h.isLoading})}),y&&(0,_.jsx)("button",{type:"button",tabIndex:-1,className:Ce.skip,"data-aia-skip":"",disabled:h.isLoading||h.skipDisabled,"aria-label":Me?`${G.skipLabel} ${Me}`:G.skipLabel,onClick:T,children:G.skip})]}),ke&&(0,_.jsx)(qt,{options:le,activeIndex:h.activeIndex,onSelect:t,onHighlight:i,onUnhighlight:o,listboxId:n,loading:h.isLoading,groupKey:se?`${se.parameter} ${se.text}`:"",optionsPosition:Te,showIcons:h.showOptionIcons,showImages:h.showOptionImages,showCounts:h.showOptionCounts}),u&&h.dateView&&(0,_.jsx)(zt,{options:le,activeIndex:h.activeIndex,listboxId:n,view:h.dateView,selection:{selectedIso:h.selectedDateIso??null,selectedRange:h.selectedDateRange??null,rangeStart:h.dateRangeStart??null},onSelect:t,onHighlight:i,onUnhighlight:o,onPreviousMonth:Ie??jt,onNextMonth:m??jt}),Ve&&(0,_.jsx)("div",{className:Ce.skeletonBars,"data-aia-skeleton-bars":"",children:xa.map(pe=>(0,_.jsx)("span",{className:Ce.skeletonBar,style:{width:pe}},`bar-${pe}`))}),(0,_.jsx)(Bt,{products:je,listboxId:n,onSelect:te??ya,onFocusChange:j,focusable:v,layout:A,imageFallback:re,strings:G}),(0,_.jsx)(Mt,{isOptionHighlighted:Re,isInputEmpty:h.isInputEmpty,strings:G})]}),(0,_.jsx)("button",{ref:ye,type:"button",tabIndex:-1,className:Ce.scrollArrow,"data-aia-scroll-arrow":"","aria-label":G.scrollArrow,"aria-hidden":"true",children:(0,_.jsx)("svg",{viewBox:"0 0 16 16",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",focusable:"false",children:(0,_.jsx)("path",{d:"M4 6.5 8 10.5l4-4"})})})]})}var Ge=require("@magicx-eng/ai-autocomplete-vanilla");var Yt=require("@magicx-eng/ai-autocomplete-vanilla");if(typeof document<"u"&&!document.getElementById("ac-style-fdee06e6")){let e=document.createElement("style");e.id="ac-style-fdee06e6",e.textContent=`.aia-submitButton-otz7H {
+`,document.head.appendChild(e)}var Vt=require("react/jsx-runtime");function Ut({space:e,align:a="stretch",className:t,children:i,...o}){let r=e?{"--aia-stack-space":e}:void 0;return(0,Vt.jsx)("div",{className:t?`aia-stack ${t}`:"aia-stack","data-align":a,style:r,...o,children:i})}var q=require("react/jsx-runtime"),xa=[159,119,164],ya=()=>{},jt=()=>{};function ka(e){let a=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[t,i]=(0,j.useState)(a);if((0,j.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let o=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>i(o.matches);return o.addEventListener("change",r),()=>o.removeEventListener("change",r)},[e]),e!==void 0)return e==="auto"?t?"dark":"light":e}function Ca(e,a){let t=(0,j.useRef)(null);(0,j.useEffect)(()=>{let i=e.current,o=a.current;if(!i||!o)return;let r=i.querySelector(".aia-grid[data-scroll]");if(t.current&&t.current.grid!==r&&(t.current.controller.destroy(),t.current=null),r&&!t.current){t.current={grid:r,controller:(0,ie.attachScrollArrow)({dropdown:i,grid:r,button:o})};return}t.current?.controller.update()}),(0,j.useEffect)(()=>()=>{t.current?.controller.destroy(),t.current=null},[])}function Sa(e,a){let t=(0,j.useRef)(a);t.current=a;let i=(0,j.useRef)(null);(0,j.useEffect)(()=>{let o=e.current;if(o){if(!i.current){i.current=(0,ie.attachViewportFit)({dropdown:o,isOpen:()=>t.current});return}i.current.update()}}),(0,j.useEffect)(()=>()=>{i.current?.destroy(),i.current=null},[])}function pt({suggestions:e,activeIndex:a,onSelect:t,onHighlight:i,onUnhighlight:o,isOpen:r,id:n,className:p,pills:l,onPillClick:g,showPills:k=!0,onSkip:E,showSkipButton:b=!0,showOptionIcons:x=!0,showOptionImages:A=!0,showOptionCounts:R=!0,skipDisabled:B=!1,activeSelected:Y=!1,isLoading:X=!1,skeletonExiting:T=!1,isInputEmpty:z=!1,language:K,products:C,onProductSelect:J,onProductFocusChange:W,productsLayout:V="row",productImageFallback:se="image",formatType:O="options",dateView:ee=null,selectedDateIso:ve=null,selectedDateRange:Pe=null,dateRangeStart:We=null,onPreviousMonth:Ie,onNextMonth:m,optionsPosition:Te="below",mode:Ee}){let xe=ka(Ee),Ae=xe!==void 0,ne=(0,j.useRef)(null),ye=(0,j.useRef)(null);Ca(ne,ye),(0,j.useEffect)(()=>{if(ne.current)return(0,ie.containScroll)(ne.current)},[]);let d=e[0]?.options??[],f=!!(l&&l.length>0&&g),w=!!(C&&C.length>0),v=r&&(d.length>0||k&&f||X||w);Sa(ne,v);let S={suggestions:e,activeIndex:a,pills:l,showPills:k,showSkipButton:b,showOptionIcons:x,showOptionImages:A,showOptionCounts:R,skipDisabled:B,activeSelected:Y,isLoading:X,skeletonExiting:T,isInputEmpty:z,products:C,formatType:O,dateView:ee,selectedDateIso:ve,selectedDateRange:Pe,dateRangeStart:We},N=(0,j.useRef)(S);v&&(N.current=S);let h=v?S:N.current,G=(0,ie.uiStringsFor)(K),le=h.suggestions[0],de=le?.options??[],Re=h.activeIndex>=0&&!!de[h.activeIndex]?.is_tappable,ce=(0,ie.labelTraditionalAutocomplete)(h.pills??[],G.keepTyping),Oe=!!(ce.length>0&&g),De=h.showPills&&Oe,Le=h.showPills&&!Oe&&h.isLoading,ze=De||Le,y=Oe&&(0,ie.hasSkippablePill)(ce)&&h.showSkipButton&&!h.isInputEmpty&&!!E,Me=ce[0]?.text,Ne=(0,ie.isCalendarFormat)(h.formatType)&&h.dateView!=null,ke=de.length>0&&!Ne,u=de.length>0&&Ne&&!h.isLoading,je=h.isLoading&&!ke&&!u,Ye=h.products??[];return(0,q.jsxs)("div",{ref:ne,id:n,role:"listbox","data-aia-dropdown":"","data-options-position":Te,"data-mode":xe,"data-aia-loading":h.isLoading?"":void 0,"data-aia-skeleton-exiting":h.skeletonExiting?"":void 0,"data-aia-has-products":Ye.length>0?"":void 0,className:`${Ae?"magicx-aia ":""}${Ce.dropdown} ${v?Ce.visible:""} ${p??""}`,onMouseDown:ue=>ue.preventDefault(),children:[(0,q.jsxs)(Ut,{space:"8px",children:[(ze||y)&&(0,q.jsxs)(Je,{noWrap:!0,className:Ce.pillBar,"data-aia-pillbar":"",children:[ze&&(0,q.jsx)("span",{className:Ce.pillScroll,"data-aia-pill-scroll":"",children:(0,q.jsx)(dt,{pills:ce,activePillIndex:0,activeSelected:h.activeSelected,onSelectPill:g??(()=>{}),rounded:!0,loading:h.isLoading})}),y&&(0,q.jsx)("button",{type:"button",tabIndex:-1,className:Ce.skip,"data-aia-skip":"",disabled:h.isLoading||h.skipDisabled,"aria-label":Me?`${G.skipLabel} ${Me}`:G.skipLabel,onClick:E,children:G.skip})]}),ke&&(0,q.jsx)(qt,{options:de,activeIndex:h.activeIndex,onSelect:t,onHighlight:i,onUnhighlight:o,listboxId:n,loading:h.isLoading,groupKey:le?`${le.parameter} ${le.text}`:"",optionsPosition:Te,showIcons:h.showOptionIcons,showImages:h.showOptionImages,showCounts:h.showOptionCounts}),u&&h.dateView&&(0,q.jsx)(zt,{options:de,activeIndex:h.activeIndex,listboxId:n,view:h.dateView,selection:{selectedIso:h.selectedDateIso??null,selectedRange:h.selectedDateRange??null,rangeStart:h.dateRangeStart??null},onSelect:t,onHighlight:i,onUnhighlight:o,onPreviousMonth:Ie??jt,onNextMonth:m??jt}),je&&(0,q.jsx)("div",{className:Ce.skeletonBars,"data-aia-skeleton-bars":"",children:xa.map(ue=>(0,q.jsx)("span",{className:Ce.skeletonBar,style:{width:ue}},`bar-${ue}`))}),(0,q.jsx)(Bt,{products:Ye,listboxId:n,onSelect:J??ya,onFocusChange:W,focusable:v,layout:V,imageFallback:se,strings:G}),(0,q.jsx)(Mt,{isOptionHighlighted:Re,isInputEmpty:h.isInputEmpty,strings:G})]}),(0,q.jsx)("button",{ref:ye,type:"button",tabIndex:-1,className:Ce.scrollArrow,"data-aia-scroll-arrow":"","aria-label":G.scrollArrow,"aria-hidden":"true",children:(0,q.jsx)("svg",{viewBox:"0 0 16 16",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",focusable:"false",children:(0,q.jsx)("path",{d:"M4 6.5 8 10.5l4-4"})})})]})}var Ge=require("@magicx-eng/ai-autocomplete-vanilla");var Qt=require("@magicx-eng/ai-autocomplete-vanilla");if(typeof document<"u"&&!document.getElementById("ac-style-fdee06e6")){let e=document.createElement("style");e.id="ac-style-fdee06e6",e.textContent=`.aia-submitButton-otz7H {
   flex-shrink: 0;
   width: 32px;
   height: 32px;
@@ -2489,5 +2537,5 @@
   );
   cursor: default;
 }
-`,document.head.appendChild(e)}var Qt={submitButton:"aia-submitButton-otz7H"};var ht=require("react/jsx-runtime");function $t({disabled:e,onClick:a,label:t=(0,Yt.uiStringsFor)().submit}){return(0,ht.jsx)("button",{type:"button","data-aia-submit":"",className:Qt.submitButton,disabled:e,onClick:i=>{i.stopPropagation(),a()},"aria-label":t,children:(0,ht.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":t,children:(0,ht.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Ke=require("@magicx-eng/ai-autocomplete-vanilla"),S=require("react");var Pt=require("react");function Zt(e){let a=(0,Pt.useRef)(e);a.current=e;let t=Object.keys(e??{}).sort().join("\0"),i=(0,Pt.useRef)({key:"
",overrides:void 0});if(i.current.key!==t){let o={};for(let s of Object.keys(e??{})){let n=(c,l,b)=>{let P=a.current?.[s];return P?P(c,l,b):[]};o[s]=n}i.current={key:t,overrides:e?o:void 0}}return{overrides:i.current.overrides,key:t}}var It=require("react");function Xt(e){let a=(0,It.useRef)(e);a.current=e;let t=(0,It.useRef)(null);t.current===null&&(t.current={fetch:(o,s)=>{let n=a.current;return n?n.fetch(o,s):Promise.reject(new Error("products config removed"))},transform:o=>a.current?.transform(o)??[],get limit(){return a.current?.limit}});let i=e!==void 0;return{config:i?t.current:void 0,enabled:i}}var Pa={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],traditionalAutocomplete:!1,customFields:null,optionSearch:null,activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],dropdownLoading:!0,dropdownOptions:[],skeletonOptions:null,skeletonSuggestion:null,dropdownSuggestion:null,skeletonRequested:!1,skeletonExiting:!1,activeFormatType:"options",dateView:null,dateRangeStart:null,placeholderText:"",optionQuery:"",isSearchingOptions:!1,isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,dropdownHeld:!1,editingParam:null,editingIdentified:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1,dateViewMonth:null,pendingRangeStart:null};function ut({onSubmit:e,onResult:a,onError:t,optionOverrides:i,maskCompletedText:o,apiConfig:s,additionalContext:n,language:c,currency:l,productId:b,visitorId:P,columns:T=2,dropdownTrigger:f,optionsPosition:x,closeDropdownOnBlur:E,showNonTappableOptions:D,showOptionIcons:K,showOptionImages:V,showOptionCounts:Z,showSkipButton:R,showProducts:O,productImageFallback:M="image",onFocus:k,onBlur:te,value:j,completedParams:A,onChange:re,onParamsChange:we,products:ie,mapProducts:ve,onProductSelect:Pe,source:We,setCursor:Ie}){let m=(0,S.useRef)(null),[Te,Ee]=(0,S.useState)(null),xe=(0,S.useRef)(e);xe.current=e;let Ae=(0,S.useRef)(a);Ae.current=a;let oe=(0,S.useRef)(t);oe.current=t;let ye=(0,S.useRef)(re);ye.current=re;let d=(0,S.useRef)(we);d.current=we;let g=(0,S.useRef)(k);g.current=k;let w=(0,S.useRef)(te);w.current=te;let v=(0,S.useRef)(Ie);v.current=Ie;let C=(0,S.useRef)(Pe);C.current=Pe;let F=(0,S.useRef)(P);F.current=P;let h=(0,S.useRef)(()=>{let p=F.current;return typeof p=="function"?p():p}).current,G=Xt(ie),se=(0,S.useRef)(ve);se.current=ve;let le=(0,S.useRef)((p,X)=>{let L=se.current;return L?L(p,X):p}).current,Re=ve?le:void 0,de=Zt(i);(0,S.useEffect)(()=>{if(typeof document>"u")return;let p=new Ke.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:s,additionalContext:n,language:c,currency:l,productId:b,visitorId:h,optionOverrides:de.overrides,maskCompletedText:o,columns:T,dropdownTrigger:f,optionsPosition:x,closeDropdownOnBlur:E,showNonTappableOptions:D,showProducts:O,source:We,value:j,completedParams:A,onSubmit:(...L)=>xe.current?.(...L),onResult:(...L)=>Ae.current?.(...L),onError:(...L)=>oe.current?.(...L),onChange:(...L)=>ye.current?.(...L),onParamsChange:(...L)=>d.current?.(...L),onFocus:()=>g.current?.(),onBlur:()=>w.current?.(),onProductSelect:L=>C.current?.(L),setCursor:L=>v.current?.(L),products:G.config,mapProducts:Re});m.current=p,Ee(p.getState());let X=p.subscribe(L=>Ee(L));return()=>{X(),p.destroy(),m.current===p&&(m.current=null)}},[]),(0,S.useEffect)(()=>{j!==void 0&&m.current?.setValue(j)},[j]),(0,S.useEffect)(()=>{A!==void 0&&m.current?.setCompletedParams(A)},[A]);let De=JSON.stringify(s??null),Oe;try{Oe=JSON.stringify(n??null)}catch{Oe="[unstringifiable]"}(0,S.useEffect)(()=>{m.current?.update({apiConfig:s,additionalContext:n,language:c,currency:l,productId:b,optionOverrides:de.overrides,dropdownTrigger:f,optionsPosition:x,closeDropdownOnBlur:E,showNonTappableOptions:D,showProducts:O})},[De,Oe,c,l?.code,l?.rate,l?.country,b,de.key,f,x,E,D,O]);let Le=(0,S.useRef)(!1);(0,S.useEffect)(()=>{if(!Le.current){Le.current=!0;return}m.current?.update({products:G.config})},[G.enabled]),(0,S.useEffect)(()=>{m.current?.update({mapProducts:Re})},[Re]);let ze=(0,S.useRef)(null);ze.current===null&&(ze.current={handleTextChange:p=>m.current?.handleTextChange(p),handleKeyDown:p=>{let X="nativeEvent"in p?p.nativeEvent:p;m.current?.handleKeyDown(X)},setFocused:p=>m.current?.setFocused(p),startEditingParam:p=>m.current?.startEditingParam(p),exitEditMode:()=>m.current?.exitEditMode(),handleCaretAfterInput:p=>m.current?.handleCaretAfterInput(p),handleCaretMove:p=>m.current?.handleCaretMove(p),replaceEditingRange:p=>m.current?.replaceEditingRange(p)??!1,setActivePill:p=>m.current?.setActivePill(p),skipActivePill:()=>m.current?.skipActivePill(),removeLastParam:()=>m.current?.removeLastParam(),clearNewParamId:()=>m.current?.clearNewParamId(),reset:()=>m.current?.reset(),refreshProducts:()=>m.current?.refreshProducts(),recordSubmit:p=>m.current?.recordSubmit(p),selectOption:p=>m.current?.selectOption(p),selectProduct:p=>m.current?.selectProduct(p),setActiveDropdownIndex:p=>m.current?.setActiveDropdownIndex(p),clearHighlight:p=>m.current?.clearHighlight(p),showPreviousMonth:()=>m.current?.showPreviousMonth(),showNextMonth:()=>m.current?.showNextMonth(),handleFocus:()=>m.current?.setFocused(!0),handleBlur:()=>m.current?.setFocused(!1)});let y=ze.current,Me=(0,S.useCallback)(p=>{let X=p.target.value,bt=X.length>0&&!p.nativeEvent?.isComposing&&X[0]!==X[0].toUpperCase()?X[0].toUpperCase()+X.slice(1):X;m.current?.handleTextChange(bt)},[]),Ne=(0,S.useCallback)(p=>{m.current?.handleKeyDown(p.nativeEvent)},[]),ke=m.current,u=Te??Pa,Ve=j!==void 0?j:u.text,je=A!==void 0?A:u.completedParams,pe=u.actionableSuggestions,Ye=pe[0],tt=(0,Ke.withoutTraditionalAutocomplete)(pe),_e=ke?.listboxId??"",gt=u.activeDropdownIndex>=0&&ke?`${_e}-option-${u.activeDropdownIndex}`:void 0,Fe=u.editingParam,qe=u.editingIdentified,$e=Fe?{parameter:Fe.suggestionParameter,text:Fe.suggestionPlaceholder,required:!0,options:Fe.options}:qe?{parameter:qe.parameter,text:(0,Ke.identifiedParamLabel)(qe.parameter),required:!0,options:[]}:null,at=u.dropdownSuggestion??$e??Ye,ft=$e?[$e]:pe,Ze=(0,Ke.dateSelectionFor)(u),it=!ke||u.dropdownLoading;return{completedParams:je,skippedParams:u.skippedParams,identifiedParams:u.identifiedParams,suggestionPills:tt,setActivePill:y.setActivePill,skipActivePill:y.skipActivePill,removeLastParam:y.removeLastParam,segments:u.segments,newParamId:u.newParamId,clearNewParamId:y.clearNewParamId,suggestions:u.suggestions,activeIndex:u.activeDropdownIndex,isReady:u.isReady,isLoading:it,isFocused:u.isFocused,isDropdownOpen:u.isDropdownOpen,isActivePillSelected:u.isActivePillSelected,placeholderText:u.placeholderText,listboxId:_e,error:u.error,products:u.products,customFields:u.customFields,selectProduct:y.selectProduct,handleTextChange:y.handleTextChange,handleKeyDown:y.handleKeyDown,setFocused:y.setFocused,editingParam:Fe,editingIdentified:qe,editingAnchor:u.editingAnchor,caretOffset:u.caretOffset,startEditingParam:y.startEditingParam,exitEditMode:y.exitEditMode,handleCaretAfterInput:y.handleCaretAfterInput,handleCaretMove:y.handleCaretMove,replaceEditingRange:y.replaceEditingRange,inputProps:{value:Ve,placeholder:u.placeholderText||void 0,onChange:Me,onKeyDown:Ne,onFocus:y.handleFocus,onBlur:y.handleBlur,role:"combobox","aria-expanded":u.isDropdownOpen,"aria-activedescendant":gt,"aria-autocomplete":"list","aria-controls":_e},reset:y.reset,refreshProducts:y.refreshProducts,recordSubmit:y.recordSubmit,dropdownProps:{suggestions:at?[{...at,options:u.dropdownOptions}]:[],activeIndex:u.activeDropdownIndex,onSelect:y.selectOption,onHighlight:y.setActiveDropdownIndex,onUnhighlight:y.clearHighlight,isOpen:u.isDropdownOpen,id:_e,pills:ft,activeSelected:u.isActivePillSelected,onPillClick:y.setActivePill,onSkip:y.skipActivePill,showSkipButton:(R??!0)&&!Fe&&!qe,showOptionIcons:K??!0,showOptionImages:V??!0,showOptionCounts:Z??!0,skipDisabled:u.inSelectionAnimation,isLoading:it,skeletonExiting:u.skeletonExiting,isInputEmpty:Ve.trim().length===0,language:c,products:u.products,productImageFallback:M,onProductSelect:y.selectProduct,onProductFocusChange:y.setFocused,formatType:u.activeFormatType,dateView:u.dateView,selectedDateIso:Ze.selectedIso,selectedDateRange:Ze.selectedRange,dateRangeStart:Ze.rangeStart,onPreviousMonth:y.showPreviousMonth,onNextMonth:y.showNextMonth,optionsPosition:x??"below"}}}var q=require("@magicx-eng/ai-autocomplete-vanilla"),I=require("react"),mt;function Ia(){if(mt!==void 0)return mt;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),mt=e.contentEditable==="plaintext-only",mt}function Jt(e){let{segments:a,showChipIcons:t=!0,showChipImages:i=!0,newParamId:o,editingParam:s,editingIdentified:n,editingAnchor:c,caretOffset:l,placeholderText:b,isFocused:P,isDropdownOpen:T,listboxId:f,activeDescendantId:x,autoFocus:E,handleTextChange:D,handleKeyDown:K,handleCaretAfterInput:V,handleCaretMove:Z,startEditingParam:R,replaceEditingRange:O,setFocused:M}=e,k=(0,I.useRef)(null),te=(0,I.useRef)(!1),j=(0,I.useRef)(""),A=(0,I.useRef)(""),re=(0,I.useRef)(null),we=(0,I.useRef)(0);re.current=l,(0,I.useEffect)(()=>{if(!E)return;let d=k.current;if(!d)return;document.activeElement===d?M(!0):d.focus();let g=d.ownerDocument??document,w=g.getSelection(),v=w&&w.rangeCount>0&&d.contains(w.anchorNode);if(w&&!v){let C=g.createRange();C.selectNodeContents(d),C.collapse(!0),w.removeAllRanges(),w.addRange(C)}},[E,M]),(0,I.useEffect)(()=>{let d=k.current;if(!d)return;let g=d.ownerDocument??document,w=()=>{let v=g.getSelection();if(!v||v.rangeCount===0||!v.anchorNode||!d.contains(v.anchorNode))return;let C=v.anchorNode,F=C.nodeType===Node.ELEMENT_NODE?C:C.parentElement,G=(v.isCollapsed?F?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,se=s?.id??n?.id??null;if(G&&G!==se){R(G);return}performance.now()-we.current<50||Z((0,q.getCursorOffset)(d))};return g.addEventListener("selectionchange",w),()=>g.removeEventListener("selectionchange",w)},[s,n,R,Z]),(0,I.useEffect)(()=>{let d=k.current;if(!d)return;let g=w=>{let v=(0,q.chipIdFromTap)(d,w.target);v&&(R(v),(0,q.keepCaretOnChip)(d,v))};return d.addEventListener("click",g),()=>d.removeEventListener("click",g)},[R]),(0,I.useLayoutEffect)(()=>{let d=k.current;d&&(0,q.renderEditableContent)({input:d,segments:a,newParamId:o,editingParamId:s?.id??null,placeholderText:b??"",isFocused:P,showChipIcons:t,showChipImages:i})},[a,o,s,b,P,t,i]),(0,I.useLayoutEffect)(()=>{let d=j.current,g=o??"";if(j.current=g,!g||g===d)return;let w=k.current;if(!w)return;w.focus();let v=re.current??(0,q.plainTextLength)(w);(0,q.setCursorOffset)(w,v)},[o]),(0,I.useLayoutEffect)(()=>{let d=A.current,g=s?.id??"";if(A.current=g,!g||g===d||c==null)return;let w=k.current;w&&(0,q.setCursorOffset)(w,c)},[s,c]);let ie=(0,I.useCallback)(()=>{if(te.current)return;let d=k.current;if(!d)return;let g=(0,q.extractPlainText)(d),v=g.length>0&&g[0]!==g[0].toUpperCase()?g[0].toUpperCase()+g.slice(1):g;D(v)},[D]),ve=(0,I.useCallback)(()=>{we.current=performance.now(),ie();let d=k.current;d&&V((0,q.getCursorOffset)(d))},[ie,V]);(0,I.useEffect)(()=>{let d=k.current;if(!d)return;let g=w=>{let v=w,C=v.inputType;if(C==="insertParagraph"||C==="insertLineBreak"||C==="insertFromDrop"){w.preventDefault();return}if(C.startsWith("insert")||C.startsWith("delete")){let F=C.startsWith("delete")?"":v.data??"";O(F)&&w.preventDefault()}};return d.addEventListener("beforeinput",g),()=>d.removeEventListener("beforeinput",g)},[O]);let Pe=(0,I.useCallback)(()=>{te.current=!0,k.current?.setAttribute("data-aia-composing","true")},[]),We=(0,I.useCallback)(()=>{te.current=!1,k.current?.removeAttribute("data-aia-composing"),ie()},[ie]),Ie=(0,I.useCallback)(d=>{d.preventDefault();let g=k.current;if(!g)return;let w=(d.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!w)return;let v=g.ownerDocument??document,C=v.getSelection();if(!C||C.rangeCount===0)return;let F=C.getRangeAt(0);if(!g.contains(F.startContainer))return;F.deleteContents();let h=v.createTextNode(w);F.insertNode(h),F.setStartAfter(h),F.collapse(!0),C.removeAllRanges(),C.addRange(F),ie()},[ie]),m=(0,I.useCallback)(d=>K(d),[K]),Te=(0,I.useCallback)(()=>M(!0),[M]),Ee=(0,I.useCallback)(()=>M(!1),[M]),xe=(0,I.useCallback)(()=>k.current?.focus(),[]),Ae=(0,I.useCallback)(()=>k.current?.blur(),[]),oe=(0,I.useCallback)(()=>{let d=k.current;return d?(0,q.extractPlainText)(d):""},[]),ye=Ia()?"plaintext-only":"true";return{inputRef:k,editorProps:{ref:k,contentEditable:ye,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":f,"aria-expanded":T,"aria-activedescendant":x,spellCheck:!0,enterKeyHint:"send",onInput:ve,onKeyDown:m,onCompositionStart:Pe,onCompositionEnd:We,onPaste:Ie,onFocus:Te,onBlur:Ee},getPlainText:oe,focus:xe,blur:Ae}}var ce=require("react/jsx-runtime");function Ta(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var ea=(0,B.forwardRef)(function({onSubmit:a,onResult:t,onError:i,optionOverrides:o,maskCompletedText:s,className:n,apiConfig:c,additionalContext:l,language:b,currency:P,productId:T,visitorId:f,columns:x,pillPlacement:E="dropdown",mode:D="auto",optionsPosition:K="below",animations:V=!0,dropdownTrigger:Z,closeDropdownOnBlur:R,showNonTappableOptions:O,showOptionIcons:M=!0,showChipIcons:k=!0,showChipImages:te=!0,showOptionImages:j=!0,showOptionCounts:A=!0,showSkipButton:re,showProducts:we,productsLayout:ie,productImageFallback:ve,autoFocus:Pe=!0,onFocus:We,onBlur:Ie,value:m,completedParams:Te,onChange:Ee,onParamsChange:xe,products:Ae,mapProducts:oe,onProductSelect:ye,submitButton:d,resetOnSubmit:g=!0},w){let v=(0,B.useRef)(null),C=(0,B.useRef)(null),F=(0,B.useRef)(()=>{}),h=(0,B.useRef)(null),G=(0,B.useRef)(null);(0,B.useEffect)(()=>{let z=v.current;if(z)return h.current?h.current.setMode(D):h.current=new Ge.ModeController(z,D),()=>{h.current?.destroy(),h.current=null}},[D]);let se=(0,B.useCallback)(z=>{let he=G.current?.current;he&&(he.focus(),(0,Ge.setCursorOffset)(he,z))},[]),{completedParams:le,skippedParams:Re,identifiedParams:de,isReady:De,customFields:Oe,suggestionPills:Le,setActivePill:ze,skipActivePill:y,segments:Me,newParamId:Ne,clearNewParamId:ke,placeholderText:u,isFocused:Ve,isDropdownOpen:je,isActivePillSelected:pe,isLoading:Ye,activeIndex:tt,listboxId:_e,handleTextChange:gt,handleKeyDown:Fe,setFocused:qe,editingParam:$e,editingIdentified:at,editingAnchor:ft,caretOffset:Ze,startEditingParam:it,handleCaretAfterInput:p,handleCaretMove:X,replaceEditingRange:L,dropdownProps:bt,reset:ot,refreshProducts:Tt,recordSubmit:Et}=ut({onSubmit:z=>F.current(z),onResult:t,onError:i,optionOverrides:o,maskCompletedText:s,apiConfig:c,additionalContext:l,language:b,currency:P,productId:T,visitorId:f,columns:x,dropdownTrigger:Z,optionsPosition:K,closeDropdownOnBlur:R,showNonTappableOptions:O,showOptionIcons:M,showOptionImages:j,showOptionCounts:A,showSkipButton:re,showProducts:we,onFocus:We,onBlur:Ie,value:m,completedParams:Te,onChange:Ee,onParamsChange:xe,products:Ae,mapProducts:oe,onProductSelect:ye,source:"full-sdk",setCursor:se});(0,B.useEffect)(()=>{if(!Ne)return;let z=window.setTimeout(()=>ke(),650);return()=>window.clearTimeout(z)},[Ne,ke]);let ta=tt>=0?`${_e}-option-${tt}`:void 0,{inputRef:wt,editorProps:aa,focus:nt,blur:At,getPlainText:Rt}=Jt({segments:Me,newParamId:Ne,editingParam:$e,editingIdentified:at,editingAnchor:ft,caretOffset:Ze,placeholderText:u,isFocused:Ve,showChipIcons:k,showChipImages:te,isDropdownOpen:je,listboxId:_e,activeDescendantId:ta,autoFocus:Pe,handleTextChange:gt,handleKeyDown:Fe,handleCaretAfterInput:p,handleCaretMove:X,startEditingParam:it,replaceEditingRange:L,setFocused:qe});G.current=wt,(0,B.useLayoutEffect)(()=>{let z=C.current,he=wt.current;if(!z||!he)return;let Xe=()=>{let Ot=z.firstElementChild;if(!Ot)return;let ra=Ot.getBoundingClientRect(),sa=he.getBoundingClientRect();ra.top>=sa.bottom-2?z.setAttribute("data-aia-pill-wrapped",""):z.removeAttribute("data-aia-pill-wrapped")};Xe();let Dt=new ResizeObserver(Xe);return Dt.observe(he),()=>Dt.disconnect()},[Me,Le.length,Ye,wt]),(0,B.useImperativeHandle)(w,()=>({focus:nt,blur:At,reset:ot,refreshProducts:Tt,setMode:z=>h.current?.setMode(z),skipActivePill:y}),[nt,At,ot,Tt,y]);let rt=!!Me.length||le.length>0,vt=(0,B.useCallback)(z=>{if(!rt)return;let he=Rt(),Xe=(0,Ge.buildSubmitResult)(he,le,Re,{identifiedParams:de,isReady:De,customFields:Oe});z&&Et(Xe),a(Xe),g&&ot()},[Et,g,rt,le,Re,de,De,Oe,a,ot,Rt]);F.current=()=>vt(!1);let ia=(0,B.useCallback)(z=>{z.target?.closest("[data-aia-pill]")||nt()},[nt]),oa=E==="inline",na=E==="dropdown";return(0,ce.jsxs)("div",{ref:v,className:`magicx-aia ${Ue.container} ${n??""}`,"data-pill-placement":E,"data-options-position":K,"data-animations":V?"on":"off","data-mode":Ta(D),children:[(0,ce.jsx)(pt,{...bt,showPills:na,productsLayout:ie,productImageFallback:ve}),(0,ce.jsxs)("div",{className:Ue.inputWrapper,"data-aia-input-wrapper":"",onClick:ia,children:[(0,ce.jsxs)("div",{className:Ue.editorArea,"data-aia-editor":"",children:[(0,ce.jsx)("div",{...aa,className:Ue.input,"data-aia-input":""}),oa&&(Ye||Le.length>0)&&(0,ce.jsx)("span",{ref:C,className:Ue.pillListContainer,"data-aia-pill-list-container":"",children:(0,ce.jsx)(dt,{pills:Le,activePillIndex:0,activeSelected:pe,onSelectPill:ze,loading:Ye})})]}),d===null?null:d===void 0?(0,ce.jsx)($t,{disabled:!rt,onClick:()=>vt(!0),label:(0,Ge.uiStringsFor)(b).submit}):(0,ce.jsx)("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:Ue.submitSlot,onClick:z=>{rt&&(z.stopPropagation(),vt(!0))},children:d})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,DATE_RANGE_META_END,DATE_RANGE_META_START,DEFAULT_OPTION_COUNT_UNIT,PRODUCT_PATH_PREFIX,WEEKDAY_LABELS,buildSubmitResult,cellDay,cellIso,dateCellMarks,formatDate,formatDateRange,formatOptionCount,isoDate,monthLabel,optionCountLabel,optionHasImage,optionImageSources,optionImageSrc,optionLabel,optionsShowLeadingVisuals,parseDate,parseLooseDate,parseLooseDateRange,productFromMatchedItem,productImageSources,productsFromCustomFields,sanitizeOptionIconSvg,selectedRangeFor,useAIAutocomplete,visibleDateRange,withSkippedParams});
+`,document.head.appendChild(e)}var Yt={submitButton:"aia-submitButton-otz7H"};var ht=require("react/jsx-runtime");function Zt({disabled:e,onClick:a,label:t=(0,Qt.uiStringsFor)().submit}){return(0,ht.jsx)("button",{type:"button","data-aia-submit":"",className:Yt.submitButton,disabled:e,onClick:i=>{i.stopPropagation(),a()},"aria-label":t,children:(0,ht.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":t,children:(0,ht.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Ke=require("@magicx-eng/ai-autocomplete-vanilla"),P=require("react");var Pt=require("react");function $t(e){let a=(0,Pt.useRef)(e);a.current=e;let t=Object.keys(e??{}).sort().join("\0"),i=(0,Pt.useRef)({key:"
",overrides:void 0});if(i.current.key!==t){let o={};for(let r of Object.keys(e??{})){let n=(p,l,g)=>{let k=a.current?.[r];return k?k(p,l,g):[]};o[r]=n}i.current={key:t,overrides:e?o:void 0}}return{overrides:i.current.overrides,key:t}}var It=require("react");function Xt(e){let a=(0,It.useRef)(e);a.current=e;let t=(0,It.useRef)(null);t.current===null&&(t.current={fetch:(o,r)=>{let n=a.current;return n?n.fetch(o,r):Promise.reject(new Error("products config removed"))},transform:o=>a.current?.transform(o)??[],get limit(){return a.current?.limit}});let i=e!==void 0;return{config:i?t.current:void 0,enabled:i}}var Pa={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],traditionalAutocomplete:!1,customFields:null,optionSearch:null,activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],dropdownLoading:!0,dropdownOptions:[],skeletonOptions:null,skeletonSuggestion:null,dropdownSuggestion:null,skeletonRequested:!1,skeletonExiting:!1,activeFormatType:"options",dateView:null,dateRangeStart:null,placeholderText:"",optionQuery:"",isSearchingOptions:!1,isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,dropdownHeld:!1,editingParam:null,editingIdentified:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1,dateViewMonth:null,pendingRangeStart:null};function ut({onSubmit:e,onResult:a,onError:t,optionOverrides:i,maskCompletedText:o,apiConfig:r,additionalContext:n,language:p,currency:l,productId:g,visitorId:k,columns:E=2,dropdownTrigger:b,optionsPosition:x,closeDropdownOnBlur:A,showNonTappableOptions:R,showOptionIcons:B,showOptionImages:Y,showOptionCounts:X,showSkipButton:T,showProducts:z,productImageFallback:K="image",onFocus:C,onBlur:J,value:W,completedParams:V,onChange:se,onParamsChange:O,products:ee,mapProducts:ve,onProductSelect:Pe,source:We,setCursor:Ie}){let m=(0,P.useRef)(null),[Te,Ee]=(0,P.useState)(null),xe=(0,P.useRef)(e);xe.current=e;let Ae=(0,P.useRef)(a);Ae.current=a;let ne=(0,P.useRef)(t);ne.current=t;let ye=(0,P.useRef)(se);ye.current=se;let d=(0,P.useRef)(O);d.current=O;let f=(0,P.useRef)(C);f.current=C;let w=(0,P.useRef)(J);w.current=J;let v=(0,P.useRef)(Ie);v.current=Ie;let S=(0,P.useRef)(Pe);S.current=Pe;let N=(0,P.useRef)(k);N.current=k;let h=(0,P.useRef)(()=>{let c=N.current;return typeof c=="function"?c():c}).current,G=Xt(ee),le=(0,P.useRef)(ve);le.current=ve;let de=(0,P.useRef)((c,te)=>{let D=le.current;return D?D(c,te):c}).current,Re=ve?de:void 0,ce=$t(i);(0,P.useEffect)(()=>{if(typeof document>"u")return;let c=new Ke.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:r,additionalContext:n,language:p,currency:l,productId:g,visitorId:h,optionOverrides:ce.overrides,maskCompletedText:o,columns:E,dropdownTrigger:b,optionsPosition:x,closeDropdownOnBlur:A,showNonTappableOptions:R,showProducts:z,source:We,value:W,completedParams:V,onSubmit:(...D)=>xe.current?.(...D),onResult:(...D)=>Ae.current?.(...D),onError:(...D)=>ne.current?.(...D),onChange:(...D)=>ye.current?.(...D),onParamsChange:(...D)=>d.current?.(...D),onFocus:()=>f.current?.(),onBlur:()=>w.current?.(),onProductSelect:D=>S.current?.(D),setCursor:D=>v.current?.(D),products:G.config,mapProducts:Re});m.current=c,Ee(c.getState());let te=c.subscribe(D=>Ee(D));return()=>{te(),c.destroy(),m.current===c&&(m.current=null)}},[]),(0,P.useEffect)(()=>{W!==void 0&&m.current?.setValue(W)},[W]),(0,P.useEffect)(()=>{V!==void 0&&m.current?.setCompletedParams(V)},[V]);let Oe=JSON.stringify(r??null),De;try{De=JSON.stringify(n??null)}catch{De="[unstringifiable]"}(0,P.useEffect)(()=>{m.current?.update({apiConfig:r,additionalContext:n,language:p,currency:l,productId:g,optionOverrides:ce.overrides,dropdownTrigger:b,optionsPosition:x,closeDropdownOnBlur:A,showNonTappableOptions:R,showProducts:z})},[Oe,De,p,l?.code,l?.rate,l?.country,g,ce.key,b,x,A,R,z]);let Le=(0,P.useRef)(!1);(0,P.useEffect)(()=>{if(!Le.current){Le.current=!0;return}m.current?.update({products:G.config})},[G.enabled]),(0,P.useEffect)(()=>{m.current?.update({mapProducts:Re})},[Re]);let ze=(0,P.useRef)(null);ze.current===null&&(ze.current={handleTextChange:c=>m.current?.handleTextChange(c),handleKeyDown:c=>{let te="nativeEvent"in c?c.nativeEvent:c;m.current?.handleKeyDown(te)},setFocused:c=>m.current?.setFocused(c),startEditingParam:c=>m.current?.startEditingParam(c),exitEditMode:()=>m.current?.exitEditMode(),handleCaretAfterInput:c=>m.current?.handleCaretAfterInput(c),handleCaretMove:c=>m.current?.handleCaretMove(c),replaceEditingRange:c=>m.current?.replaceEditingRange(c)??!1,setActivePill:c=>m.current?.setActivePill(c),skipActivePill:()=>m.current?.skipActivePill(),removeLastParam:()=>m.current?.removeLastParam(),clearNewParamId:()=>m.current?.clearNewParamId(),reset:()=>m.current?.reset(),refreshProducts:()=>m.current?.refreshProducts(),recordSubmit:c=>m.current?.recordSubmit(c),selectOption:c=>m.current?.selectOption(c),selectProduct:c=>m.current?.selectProduct(c),setActiveDropdownIndex:c=>m.current?.setActiveDropdownIndex(c),clearHighlight:c=>m.current?.clearHighlight(c),showPreviousMonth:()=>m.current?.showPreviousMonth(),showNextMonth:()=>m.current?.showNextMonth(),handleFocus:()=>m.current?.setFocused(!0),handleBlur:()=>m.current?.setFocused(!1)});let y=ze.current,Me=(0,P.useCallback)(c=>{let te=c.target.value,bt=te.length>0&&!c.nativeEvent?.isComposing&&te[0]!==te[0].toUpperCase()?te[0].toUpperCase()+te.slice(1):te;m.current?.handleTextChange(bt)},[]),Ne=(0,P.useCallback)(c=>{m.current?.handleKeyDown(c.nativeEvent)},[]),ke=m.current,u=Te??Pa,je=W!==void 0?W:u.text,Ye=V!==void 0?V:u.completedParams,ue=u.actionableSuggestions,Qe=ue[0],tt=(0,Ke.withoutTraditionalAutocomplete)(ue),_e=ke?.listboxId??"",gt=u.activeDropdownIndex>=0&&ke?`${_e}-option-${u.activeDropdownIndex}`:void 0,Fe=u.editingParam,qe=u.editingIdentified,Ze=Fe?{parameter:Fe.suggestionParameter,text:Fe.suggestionPlaceholder,required:!0,options:Fe.options}:qe?{parameter:qe.parameter,text:(0,Ke.identifiedParamLabel)(qe.parameter),required:!0,options:[]}:null,at=u.dropdownSuggestion??Ze??Qe,ft=Ze?[Ze]:ue,$e=(0,Ke.dateSelectionFor)(u),it=!ke||u.dropdownLoading;return{completedParams:Ye,skippedParams:u.skippedParams,identifiedParams:u.identifiedParams,suggestionPills:tt,setActivePill:y.setActivePill,skipActivePill:y.skipActivePill,removeLastParam:y.removeLastParam,segments:u.segments,newParamId:u.newParamId,clearNewParamId:y.clearNewParamId,suggestions:u.suggestions,activeIndex:u.activeDropdownIndex,isReady:u.isReady,isLoading:it,isFocused:u.isFocused,isDropdownOpen:u.isDropdownOpen,isActivePillSelected:u.isActivePillSelected,placeholderText:u.placeholderText,listboxId:_e,error:u.error,products:u.products,customFields:u.customFields,selectProduct:y.selectProduct,handleTextChange:y.handleTextChange,handleKeyDown:y.handleKeyDown,setFocused:y.setFocused,editingParam:Fe,editingIdentified:qe,editingAnchor:u.editingAnchor,caretOffset:u.caretOffset,startEditingParam:y.startEditingParam,exitEditMode:y.exitEditMode,handleCaretAfterInput:y.handleCaretAfterInput,handleCaretMove:y.handleCaretMove,replaceEditingRange:y.replaceEditingRange,inputProps:{value:je,placeholder:u.placeholderText||void 0,onChange:Me,onKeyDown:Ne,onFocus:y.handleFocus,onBlur:y.handleBlur,role:"combobox","aria-expanded":u.isDropdownOpen,"aria-activedescendant":gt,"aria-autocomplete":"list","aria-controls":_e},reset:y.reset,refreshProducts:y.refreshProducts,recordSubmit:y.recordSubmit,dropdownProps:{suggestions:at?[{...at,options:u.dropdownOptions}]:[],activeIndex:u.activeDropdownIndex,onSelect:y.selectOption,onHighlight:y.setActiveDropdownIndex,onUnhighlight:y.clearHighlight,isOpen:u.isDropdownOpen,id:_e,pills:ft,activeSelected:u.isActivePillSelected,onPillClick:y.setActivePill,onSkip:y.skipActivePill,showSkipButton:(T??!0)&&!Fe&&!qe,showOptionIcons:B??!0,showOptionImages:Y??!0,showOptionCounts:X??!0,skipDisabled:u.inSelectionAnimation,isLoading:it,skeletonExiting:u.skeletonExiting,isInputEmpty:je.trim().length===0,language:p,products:u.products,productImageFallback:K,onProductSelect:y.selectProduct,onProductFocusChange:y.setFocused,formatType:u.activeFormatType,dateView:u.dateView,selectedDateIso:$e.selectedIso,selectedDateRange:$e.selectedRange,dateRangeStart:$e.rangeStart,onPreviousMonth:y.showPreviousMonth,onNextMonth:y.showNextMonth,optionsPosition:x??"below"}}}var U=require("@magicx-eng/ai-autocomplete-vanilla"),I=require("react"),mt;function Ia(){if(mt!==void 0)return mt;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),mt=e.contentEditable==="plaintext-only",mt}function Jt(e){let{segments:a,showChipIcons:t=!0,showChipImages:i=!0,newParamId:o,editingParam:r,editingIdentified:n,editingAnchor:p,caretOffset:l,placeholderText:g,isFocused:k,isDropdownOpen:E,listboxId:b,activeDescendantId:x,autoFocus:A,handleTextChange:R,handleKeyDown:B,handleCaretAfterInput:Y,handleCaretMove:X,startEditingParam:T,replaceEditingRange:z,setFocused:K}=e,C=(0,I.useRef)(null),J=(0,I.useRef)(!1),W=(0,I.useRef)(""),V=(0,I.useRef)(""),se=(0,I.useRef)(null),O=(0,I.useRef)(0);se.current=l,(0,I.useEffect)(()=>{if(!A)return;let d=C.current;if(!d)return;document.activeElement===d?K(!0):d.focus();let f=d.ownerDocument??document,w=f.getSelection(),v=w&&w.rangeCount>0&&d.contains(w.anchorNode);if(w&&!v){let S=f.createRange();S.selectNodeContents(d),S.collapse(!0),w.removeAllRanges(),w.addRange(S)}},[A,K]),(0,I.useEffect)(()=>{let d=C.current;if(!d)return;let f=d.ownerDocument??document,w=()=>{let v=f.getSelection();if(!v||v.rangeCount===0||!v.anchorNode||!d.contains(v.anchorNode))return;let S=v.anchorNode,N=S.nodeType===Node.ELEMENT_NODE?S:S.parentElement,G=(v.isCollapsed?N?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,le=r?.id??n?.id??null;if(G&&G!==le){T(G);return}performance.now()-O.current<50||X((0,U.getCursorOffset)(d))};return f.addEventListener("selectionchange",w),()=>f.removeEventListener("selectionchange",w)},[r,n,T,X]),(0,I.useEffect)(()=>{let d=C.current;if(!d)return;let f=w=>{let v=(0,U.chipIdFromTap)(d,w.target);v&&(T(v),(0,U.keepCaretOnChip)(d,v))};return d.addEventListener("click",f),()=>d.removeEventListener("click",f)},[T]),(0,I.useLayoutEffect)(()=>{let d=C.current;d&&(0,U.renderEditableContent)({input:d,segments:a,newParamId:o,editingParamId:r?.id??null,placeholderText:g??"",isFocused:k,showChipIcons:t,showChipImages:i})},[a,o,r,g,k,t,i]),(0,I.useLayoutEffect)(()=>{let d=W.current,f=o??"";if(W.current=f,!f||f===d)return;let w=C.current;if(!w)return;w.focus();let v=se.current??(0,U.plainTextLength)(w);(0,U.setCursorOffset)(w,v)},[o]),(0,I.useLayoutEffect)(()=>{let d=V.current,f=r?.id??"";if(V.current=f,!f||f===d||p==null)return;let w=C.current;w&&(0,U.setCursorOffset)(w,p)},[r,p]);let ee=(0,I.useCallback)(()=>{if(J.current)return;let d=C.current;if(!d)return;let f=(0,U.extractPlainText)(d),v=f.length>0&&f[0]!==f[0].toUpperCase()?f[0].toUpperCase()+f.slice(1):f;R(v)},[R]),ve=(0,I.useCallback)(()=>{O.current=performance.now(),ee();let d=C.current;d&&Y((0,U.getCursorOffset)(d))},[ee,Y]);(0,I.useEffect)(()=>{let d=C.current;if(!d)return;let f=w=>{let v=w,S=v.inputType;if(S==="insertParagraph"||S==="insertLineBreak"||S==="insertFromDrop"){w.preventDefault();return}if(S.startsWith("insert")||S.startsWith("delete")){let N=S.startsWith("delete")?"":v.data??"";z(N)&&w.preventDefault()}};return d.addEventListener("beforeinput",f),()=>d.removeEventListener("beforeinput",f)},[z]);let Pe=(0,I.useCallback)(()=>{J.current=!0,C.current?.setAttribute("data-aia-composing","true")},[]),We=(0,I.useCallback)(()=>{J.current=!1,C.current?.removeAttribute("data-aia-composing"),ee()},[ee]),Ie=(0,I.useCallback)(d=>{d.preventDefault();let f=C.current;if(!f)return;let w=(d.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!w)return;let v=f.ownerDocument??document,S=v.getSelection();if(!S||S.rangeCount===0)return;let N=S.getRangeAt(0);if(!f.contains(N.startContainer))return;N.deleteContents();let h=v.createTextNode(w);N.insertNode(h),N.setStartAfter(h),N.collapse(!0),S.removeAllRanges(),S.addRange(N),ee()},[ee]),m=(0,I.useCallback)(d=>B(d),[B]),Te=(0,I.useCallback)(()=>K(!0),[K]),Ee=(0,I.useCallback)(()=>K(!1),[K]),xe=(0,I.useCallback)(()=>C.current?.focus(),[]),Ae=(0,I.useCallback)(()=>C.current?.blur(),[]),ne=(0,I.useCallback)(()=>{let d=C.current;return d?(0,U.extractPlainText)(d):""},[]),ye=Ia()?"plaintext-only":"true";return{inputRef:C,editorProps:{ref:C,contentEditable:ye,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":b,"aria-expanded":E,"aria-activedescendant":x,spellCheck:!0,enterKeyHint:"send",onInput:ve,onKeyDown:m,onCompositionStart:Pe,onCompositionEnd:We,onPaste:Ie,onFocus:Te,onBlur:Ee},getPlainText:ne,focus:xe,blur:Ae}}var he=require("react/jsx-runtime");function Ta(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var ea=(0,H.forwardRef)(function({onSubmit:a,onResult:t,onError:i,optionOverrides:o,maskCompletedText:r,className:n,apiConfig:p,additionalContext:l,language:g,currency:k,productId:E,visitorId:b,columns:x,pillPlacement:A="dropdown",mode:R="auto",optionsPosition:B="below",animations:Y=!0,dropdownTrigger:X,closeDropdownOnBlur:T,showNonTappableOptions:z,showOptionIcons:K=!0,showChipIcons:C=!0,showChipImages:J=!0,showOptionImages:W=!0,showOptionCounts:V=!0,showSkipButton:se,showProducts:O,productsLayout:ee,productImageFallback:ve,autoFocus:Pe=!0,onFocus:We,onBlur:Ie,value:m,completedParams:Te,onChange:Ee,onParamsChange:xe,products:Ae,mapProducts:ne,onProductSelect:ye,submitButton:d,resetOnSubmit:f=!0},w){let v=(0,H.useRef)(null),S=(0,H.useRef)(null),N=(0,H.useRef)(()=>{}),h=(0,H.useRef)(null),G=(0,H.useRef)(null);(0,H.useEffect)(()=>{let L=v.current;if(L)return h.current?h.current.setMode(R):h.current=new Ge.ModeController(L,R),()=>{h.current?.destroy(),h.current=null}},[R]);let le=(0,H.useCallback)(L=>{let me=G.current?.current;me&&(me.focus(),(0,Ge.setCursorOffset)(me,L))},[]),{completedParams:de,skippedParams:Re,identifiedParams:ce,isReady:Oe,customFields:De,suggestionPills:Le,setActivePill:ze,skipActivePill:y,segments:Me,newParamId:Ne,clearNewParamId:ke,placeholderText:u,isFocused:je,isDropdownOpen:Ye,isActivePillSelected:ue,isLoading:Qe,activeIndex:tt,listboxId:_e,handleTextChange:gt,handleKeyDown:Fe,setFocused:qe,editingParam:Ze,editingIdentified:at,editingAnchor:ft,caretOffset:$e,startEditingParam:it,handleCaretAfterInput:c,handleCaretMove:te,replaceEditingRange:D,dropdownProps:bt,reset:ot,refreshProducts:Tt,recordSubmit:Et}=ut({onSubmit:L=>N.current(L),onResult:t,onError:i,optionOverrides:o,maskCompletedText:r,apiConfig:p,additionalContext:l,language:g,currency:k,productId:E,visitorId:b,columns:x,dropdownTrigger:X,optionsPosition:B,closeDropdownOnBlur:T,showNonTappableOptions:z,showOptionIcons:K,showOptionImages:W,showOptionCounts:V,showSkipButton:se,showProducts:O,onFocus:We,onBlur:Ie,value:m,completedParams:Te,onChange:Ee,onParamsChange:xe,products:Ae,mapProducts:ne,onProductSelect:ye,source:"full-sdk",setCursor:le});(0,H.useEffect)(()=>{if(!Ne)return;let L=window.setTimeout(()=>ke(),650);return()=>window.clearTimeout(L)},[Ne,ke]);let ta=tt>=0?`${_e}-option-${tt}`:void 0,{inputRef:wt,editorProps:aa,focus:nt,blur:At,getPlainText:Rt}=Jt({segments:Me,newParamId:Ne,editingParam:Ze,editingIdentified:at,editingAnchor:ft,caretOffset:$e,placeholderText:u,isFocused:je,showChipIcons:C,showChipImages:J,isDropdownOpen:Ye,listboxId:_e,activeDescendantId:ta,autoFocus:Pe,handleTextChange:gt,handleKeyDown:Fe,handleCaretAfterInput:c,handleCaretMove:te,startEditingParam:it,replaceEditingRange:D,setFocused:qe});G.current=wt,(0,H.useLayoutEffect)(()=>{let L=S.current,me=wt.current;if(!L||!me)return;let Xe=()=>{let Dt=L.firstElementChild;if(!Dt)return;let ra=Dt.getBoundingClientRect(),sa=me.getBoundingClientRect();ra.top>=sa.bottom-2?L.setAttribute("data-aia-pill-wrapped",""):L.removeAttribute("data-aia-pill-wrapped")};Xe();let Ot=new ResizeObserver(Xe);return Ot.observe(me),()=>Ot.disconnect()},[Me,Le.length,Qe,wt]),(0,H.useImperativeHandle)(w,()=>({focus:nt,blur:At,reset:ot,refreshProducts:Tt,setMode:L=>h.current?.setMode(L),skipActivePill:y}),[nt,At,ot,Tt,y]);let rt=!!Me.length||de.length>0,vt=(0,H.useCallback)(L=>{if(!rt)return;let me=Rt(),Xe=(0,Ge.buildSubmitResult)(me,de,Re,{identifiedParams:ce,isReady:Oe,customFields:De});L&&Et(Xe),a(Xe),f&&ot()},[Et,f,rt,de,Re,ce,Oe,De,a,ot,Rt]);N.current=()=>vt(!1);let ia=(0,H.useCallback)(L=>{L.target?.closest("[data-aia-pill]")||nt()},[nt]),oa=A==="inline",na=A==="dropdown";return(0,he.jsxs)("div",{ref:v,className:`magicx-aia ${Ue.container} ${n??""}`,"data-pill-placement":A,"data-options-position":B,"data-animations":Y?"on":"off","data-mode":Ta(R),children:[(0,he.jsx)(pt,{...bt,showPills:na,productsLayout:ee,productImageFallback:ve}),(0,he.jsxs)("div",{className:Ue.inputWrapper,"data-aia-input-wrapper":"",onClick:ia,children:[(0,he.jsxs)("div",{className:Ue.editorArea,"data-aia-editor":"",children:[(0,he.jsx)("div",{...aa,className:Ue.input,"data-aia-input":""}),oa&&(Qe||Le.length>0)&&(0,he.jsx)("span",{ref:S,className:Ue.pillListContainer,"data-aia-pill-list-container":"",children:(0,he.jsx)(dt,{pills:Le,activePillIndex:0,activeSelected:ue,onSelectPill:ze,loading:Qe})})]}),d===null?null:d===void 0?(0,he.jsx)(Zt,{disabled:!rt,onClick:()=>vt(!0),label:(0,Ge.uiStringsFor)(g).submit}):(0,he.jsx)("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:Ue.submitSlot,onClick:L=>{rt&&(L.stopPropagation(),vt(!0))},children:d})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,DATE_RANGE_META_END,DATE_RANGE_META_START,DEFAULT_OPTION_COUNT_UNIT,PRODUCT_PATH_PREFIX,WEEKDAY_LABELS,buildSubmitResult,cellDay,cellIso,dateCellMarks,formatDate,formatDateRange,formatOptionCount,isoDate,monthLabel,optionCountLabel,optionHasImage,optionImageSources,optionImageSrc,optionLabel,optionsShowLeadingVisuals,parseDate,parseLooseDate,parseLooseDateRange,productFromMatchedItem,productImageSources,productsFromCustomFields,sanitizeOptionIconSvg,selectedRangeFor,useAIAutocomplete,visibleDateRange,withSkippedParams});
 //# sourceMappingURL=index.js.map