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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -282,7 +282,7 @@ Skip `<AIAutocompleteDropdown />` and render the suggestions UI yourself. `dropd
282
282
 
283
283
  > **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.
284
284
 
285
- > **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`).
285
+ > **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.
286
286
 
287
287
  > **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).
288
288
 
@@ -867,9 +867,10 @@ Override on the container (via `className`). The variables are declared with `:w
867
867
  | `--aia-product-gap` | `8px` | `8px` | Gap between product cards. |
868
868
  | `--aia-product-bg` | `transparent` | `transparent` | Product card background. |
869
869
  | `--aia-product-bg-active` | `--aia-option-bg` | `--aia-option-bg` | Product card background on hover. |
870
- | `--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. |
870
+ | `--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. |
871
871
  | `--aia-scroll-arrow-color` | `--aia-option-color` | `--aia-option-color` | Chevron color of the arrow (`--aia-scroll-arrow-color-hover` on hover). |
872
872
  | `--aia-placeholder-fade` | `120ms` | `120ms` | Fade-out of the outgoing placeholder phrase when the starting-state placeholder changes (the incoming one types itself in). |
873
+ | `--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. |
873
874
  | `--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. |
874
875
  | `--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. |
875
876
  | `--aia-product-price-color` | `--aia-option-color-selected` | `--aia-option-color-selected` | Product price text. |
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- "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 {
1
+ "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 {
2
2
  position: relative;
3
3
  /* Inherits the host page's font by default. Consumers can pin a specific
4
4
  font on the library via \`--aia-font-family: 'Custom Font'\` without
@@ -162,7 +162,10 @@
162
162
  that) so it adds no characters to the caret's plain text. */
163
163
  :where(.aia-input-IW-P-) span[class~="magicx-aia-segment-image"] {
164
164
  display: inline;
165
- padding-left: var(--aia-chip-image-size, 1.25em);
165
+ padding-left: min(
166
+ var(--aia-chip-image-size, 1.25em),
167
+ var(--aia-chip-image-fit, var(--aia-chip-image-size, 1.25em))
168
+ );
166
169
  margin-right: 5px;
167
170
  border-radius: var(--aia-chip-image-radius, 4px);
168
171
  background:
@@ -172,6 +175,15 @@
172
175
  user-select: none;
173
176
  }
174
177
 
178
+ /* Once the picture has loaded the placeholder fill steps aside, so a picture
179
+ that doesn't fill the tile sits on the chip rather than on a grey box. The
180
+ renderer sets the attribute when the picture loads, and narrows the tile to
181
+ a tall picture's own width (--aia-chip-image-fit, capped by the size above)
182
+ so the radius rounds the picture itself. */
183
+ :where(.aia-input-IW-P-) span[class~="magicx-aia-segment-image"][data-aia-image-loaded] {
184
+ background: var(--aia-chip-image, none) center / contain no-repeat;
185
+ }
186
+
175
187
  /* Re-edit highlight \u2014 applied to the completed pill being re-edited (after a
176
188
  tap). Reuses the exact hover fill so the highlight persists from tap until an
177
189
  option is selected. Hides the native caret; cursor switches to text since the
@@ -268,7 +280,7 @@
268
280
  opacity: 0;
269
281
  }
270
282
  }
271
- `,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=`/*
283
+ `,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=`/*
272
284
  * Built-in appearance defaults \u2014 zero specificity via :where().
273
285
  * Consumer CSS always wins without !important.
274
286
  *
@@ -1120,7 +1132,7 @@
1120
1132
  opacity: 0.25;
1121
1133
  }
1122
1134
  }
1123
- `,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) ---
1135
+ `,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) ---
1124
1136
 
1125
1137
  One of three hand-maintained copies (vanilla styles.css, this file, Angular's
1126
1138
  date-grid.component.css). Only the class-naming layer differs \u2014 the
@@ -1283,7 +1295,7 @@
1283
1295
  opacity: 0.8;
1284
1296
  background: rgba(var(--aia-streak-rgb, 255, 255, 255), 0.06);
1285
1297
  }
1286
- `,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 {
1298
+ `,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 {
1287
1299
  display: flex;
1288
1300
  flex-wrap: wrap;
1289
1301
  gap: var(--aia-cluster-gap, 0.5rem);
@@ -1323,7 +1335,7 @@
1323
1335
  .aia-cluster[data-justify="around"] {
1324
1336
  justify-content: space-around;
1325
1337
  }
1326
- `,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
1338
+ `,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
1327
1339
  dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
1328
1340
  room above the hint/branding row so the footer doesn't butt against the last
1329
1341
  option row \u2014 additive to the dropdown's 8px section gap. */
@@ -1470,7 +1482,7 @@
1470
1482
  justify-content: flex-end;
1471
1483
  }
1472
1484
  }
1473
- `,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,
1485
+ `,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,
1474
1486
  no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
1475
1487
  The border is kept as a 1px transparent line so the box stays the same size
1476
1488
  as it was when the outline was dashed. */
@@ -1650,7 +1662,7 @@
1650
1662
  opacity: 0;
1651
1663
  }
1652
1664
  }
1653
- `,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 {
1665
+ `,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 {
1654
1666
  position: relative;
1655
1667
  z-index: 1;
1656
1668
  pointer-events: auto;
@@ -1660,7 +1672,7 @@
1660
1672
  align-items: center;
1661
1673
  vertical-align: middle;
1662
1674
  }
1663
- `,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
1675
+ `,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
1664
1676
  (packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
1665
1677
  theming one package sees the same result in the other.
1666
1678
 
@@ -1755,7 +1767,9 @@
1755
1767
  }
1756
1768
 
1757
1769
  /* Square media tile. aspect-ratio (not a fixed height) keeps it square at any
1758
- --aia-product-card-width a consumer sets. */
1770
+ --aia-product-card-width a consumer sets. The fill is the placeholder: it
1771
+ shows across the whole tile until the photo paints (a photo's size isn't
1772
+ known before it loads), and behind both fallback tiles. */
1759
1773
  .aia-media-RrbGe {
1760
1774
  display: block;
1761
1775
  position: relative;
@@ -1766,13 +1780,27 @@
1766
1780
  background: var(--aia-product-media-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, 0.25)));
1767
1781
  }
1768
1782
 
1783
+ /* Once the photo has loaded the placeholder steps aside: a contained photo
1784
+ that doesn't fill the tile sits on the panel's own background rather than
1785
+ on a grey box. The renderer sets the attribute from the photo's \`load\`
1786
+ event. */
1787
+ .aia-media-RrbGe[data-aia-image-loaded] {
1788
+ background: transparent;
1789
+ }
1790
+
1769
1791
  /* \`contain\`, not \`cover\`: catalog photos come in any aspect ratio, and a
1770
1792
  square crop cuts the top and bottom off a tall one (a gallon jug). The
1771
- picture scales by its longer side and the media fill shows around it. */
1793
+ picture fills the tile's height and takes only the width its ratio needs,
1794
+ centred, so a tall picture's box is the picture itself and its own corner
1795
+ radius rounds it. A wide one is clamped to the tile's width and contained
1796
+ inside it; a square one fills the tile. */
1772
1797
  .aia-image-5pNL7 {
1773
1798
  display: block;
1774
- width: 100%;
1799
+ width: auto;
1800
+ max-width: 100%;
1775
1801
  height: 100%;
1802
+ margin: 0 auto;
1803
+ border-radius: var(--aia-product-image-radius, 8px);
1776
1804
  object-fit: contain;
1777
1805
  }
1778
1806
 
@@ -1947,7 +1975,7 @@
1947
1975
  letter-spacing: 0.02em;
1948
1976
  text-align: center;
1949
1977
  }
1950
- `,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 {
1978
+ `,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 {
1951
1979
  display: grid;
1952
1980
  grid-template-columns: repeat(
1953
1981
  auto-fit,
@@ -1983,7 +2011,7 @@
1983
2011
  .aia-grid[data-scroll]::-webkit-scrollbar {
1984
2012
  display: none;
1985
2013
  }
1986
- `,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 {
2014
+ `,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 {
1987
2015
  position: relative;
1988
2016
  /* Clip, not visible: the entrance rise below runs on the inner content,
1989
2017
  and a transformed box extends its scroll container's scrollable area.
@@ -2252,8 +2280,9 @@
2252
2280
  /* The picture: a square tile, centred on the text beside it (a one-line
2253
2281
  option reads as the reference row; a wrapped one keeps the tile on its
2254
2282
  vertical middle). Sized and rounded by token so a consumer can shrink it
2255
- or square it off; the placeholder fill shows through until the picture
2256
- paints and stays if it never does. */
2283
+ or square it off. The fill is the placeholder: it shows across the whole
2284
+ tile until the picture paints (a picture's size isn't known before it
2285
+ loads) and stays if it never does. */
2257
2286
  .aia-content-T-Qba:has(.aia-image-YZAbO) {
2258
2287
  align-items: center;
2259
2288
  gap: var(--aia-option-image-gap, 12px);
@@ -2269,13 +2298,27 @@
2269
2298
  background: var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, 0.083)));
2270
2299
  }
2271
2300
 
2301
+ /* Once the picture has loaded the placeholder steps aside: a contained
2302
+ picture that doesn't fill the tile sits on the dropdown's own background
2303
+ rather than on a grey box. The renderer sets the attribute from the
2304
+ picture's \`load\` event. */
2305
+ .aia-image-YZAbO[data-aia-image-loaded] {
2306
+ background: transparent;
2307
+ }
2308
+
2272
2309
  /* \`contain\`, not \`cover\`: option pictures come in any aspect ratio, and a
2273
2310
  square crop cuts the top and bottom off a tall one (a pint bottle). The
2274
- picture scales by its longer side and the tile's fill shows around it. */
2311
+ picture fills the tile's height and takes only the width its ratio needs,
2312
+ centred, so a tall picture's box is the picture itself and its own corner
2313
+ radius rounds it. A wide one is clamped to the tile's width and contained
2314
+ inside it; a square one fills the tile, whose larger radius clips it. */
2275
2315
  .aia-image-YZAbO img {
2276
2316
  display: block;
2277
- width: 100%;
2317
+ width: auto;
2318
+ max-width: 100%;
2278
2319
  height: 100%;
2320
+ margin: 0 auto;
2321
+ border-radius: var(--aia-option-picture-radius, 6px);
2279
2322
  object-fit: contain;
2280
2323
  }
2281
2324
 
@@ -2316,8 +2359,13 @@
2316
2359
  content: " " var(--aia-option-count-unit-one, var(--aia-option-count-unit, "item"));
2317
2360
  }
2318
2361
 
2319
- /* Skeleton rows keep the tile (its placeholder fill pulses with the row)
2320
- but not the picture, and drop the count like the tag. */
2362
+ /* Skeleton rows fill the tile even when the picture has loaded (the fill
2363
+ pulses with the row) and hide the picture, and drop the count like the
2364
+ tag. */
2365
+ .aia-item-d4vpD[data-aia-loading] .aia-image-YZAbO {
2366
+ background: var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, 0.083)));
2367
+ }
2368
+
2321
2369
  .aia-item-d4vpD[data-aia-loading] .aia-image-YZAbO img {
2322
2370
  visibility: hidden;
2323
2371
  }
@@ -2421,7 +2469,7 @@
2421
2469
  opacity: 0;
2422
2470
  }
2423
2471
  }
2424
- `,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 {
2472
+ `,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 {
2425
2473
  display: flex;
2426
2474
  flex-direction: column;
2427
2475
  gap: var(--aia-stack-space, 0.5rem);
@@ -2436,7 +2484,7 @@
2436
2484
  align-items: end;
2437
2485
  }
2438
2486
  /* data-align="stretch" is the flex default \u2014 no rule needed. */
2439
- `,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 {
2487
+ `,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 {
2440
2488
  flex-shrink: 0;
2441
2489
  width: 32px;
2442
2490
  height: 32px;
@@ -2489,5 +2537,5 @@
2489
2537
  );
2490
2538
  cursor: default;
2491
2539
  }
2492
- `,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});
2540
+ `,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});
2493
2541
  //# sourceMappingURL=index.js.map