@coveo/atomic 3.35.0-pre.5bebe1af22 → 3.35.0-pre.836ecb81ea

package/dist/atomic/p-63613c8a.entry.js

@@ -0,0 +1,2 @@
+import{h as n,r,g as t}from"./p-dc3df5ce.js";import{loadInsightSearchActions as e,buildSearchBox as i}from"@coveo/headless/insight";import{S as a,a as o,b as l,c as s}from"./p-40345c70.js";import{i as c,h as d}from"./p-6292386d.js";import{I as w,B as h}from"./p-ff2d324d.js";import{A as p}from"./p-0580b866.js";import{r as m,g}from"./p-f537c5af.js";import{e as b}from"./p-8f5830b4.js";import{a as u}from"./p-0a051b8d.js";import"./p-1a093634.js";import"./p-1580513b.js";import"./p-21ab6f55.js";import"@coveo/bueno";import"./p-f284897c.js";import"./p-0462f723.js";import"./p-01c91b69.js";import"./p-c9074946.js";import"./p-05de7ca3.js";import"./p-cae02339.js";const v=(n,r)=>({part:"query-suggestion-item",key:`qs-${b(n.rawValue)}`,query:n.rawValue,ariaLabel:r.t("query-suggestion-label",{query:n.rawValue,interpolation:{escapeValue:false}})});const f=(r,t)=>n("div",{part:"query-suggestion-content",class:"flex items-center"},t);const y=({icon:r,hasSuggestion:t})=>{if(!t){return}return n("atomic-icon",{part:"query-suggestion-icon",icon:r,class:"mr-2 h-4 w-4 shrink-0"})};const x=({suggestion:r,hasQuery:t})=>{if(t){return n("span",{part:"query-suggestion-text",class:"line-clamp-2 break-all",innerHTML:r.highlightedValue})}return n("span",{part:"query-suggestion-text",class:"line-clamp-2 break-all"},r.rawValue)};const k='/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer properties {\n  *, :before, :after, ::backdrop {\n    --tw-translate-x: 0;\n    --tw-translate-y: 0;\n    --tw-translate-z: 0;\n    --tw-scale-x: 1;\n    --tw-scale-y: 1;\n    --tw-scale-z: 1;\n    --tw-rotate-x: initial;\n    --tw-rotate-y: initial;\n    --tw-rotate-z: initial;\n    --tw-skew-x: initial;\n    --tw-skew-y: initial;\n    --tw-space-x-reverse: 0;\n    --tw-divide-y-reverse: 0;\n    --tw-border-style: solid;\n    --tw-gradient-position: initial;\n    --tw-gradient-from: #0000;\n    --tw-gradient-via: #0000;\n    --tw-gradient-to: #0000;\n    --tw-gradient-stops: initial;\n    --tw-gradient-via-stops: initial;\n    --tw-gradient-from-position: 0%;\n    --tw-gradient-via-position: 50%;\n    --tw-gradient-to-position: 100%;\n    --tw-leading: initial;\n    --tw-font-weight: initial;\n    --tw-shadow: 0 0 #0000;\n    --tw-shadow-color: initial;\n    --tw-shadow-alpha: 100%;\n    --tw-inset-shadow: 0 0 #0000;\n    --tw-inset-shadow-color: initial;\n    --tw-inset-shadow-alpha: 100%;\n    --tw-ring-color: initial;\n    --tw-ring-shadow: 0 0 #0000;\n    --tw-inset-ring-color: initial;\n    --tw-inset-ring-shadow: 0 0 #0000;\n    --tw-ring-inset: initial;\n    --tw-ring-offset-width: 0px;\n    --tw-ring-offset-color: #fff;\n    --tw-ring-offset-shadow: 0 0 #0000;\n    --tw-outline-style: solid;\n    --tw-blur: initial;\n    --tw-brightness: initial;\n    --tw-contrast: initial;\n    --tw-grayscale: initial;\n    --tw-hue-rotate: initial;\n    --tw-invert: initial;\n    --tw-opacity: initial;\n    --tw-saturate: initial;\n    --tw-sepia: initial;\n    --tw-drop-shadow: initial;\n    --tw-drop-shadow-color: initial;\n    --tw-drop-shadow-alpha: 100%;\n    --tw-drop-shadow-size: initial;\n    --tw-duration: initial;\n    --tw-ease: initial;\n    --tw-content: "";\n  }\n}\n@layer theme, base, components, utilities;\n@layer theme;\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, var(--atomic-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n    "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n    }\n    @supports (color: color-mix(in lab, red, red)) {\n      ::placeholder {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden="until-found"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .\\@container {\n    container-type: inline-size;\n  }\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .collapse {\n    visibility: collapse;\n  }\n  .invisible {\n    visibility: hidden;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border-width: 0;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .sticky {\n    position: sticky;\n  }\n  .inset-0 {\n    inset: calc(0.25rem * 0);\n  }\n  .-top-2 {\n    top: calc(0.25rem * -2);\n  }\n  .-top-4 {\n    top: calc(0.25rem * -4);\n  }\n  .top-0 {\n    top: calc(0.25rem * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-6 {\n    top: calc(0.25rem * 6);\n  }\n  .top-\\[4px\\] {\n    top: 4px;\n  }\n  .top-full {\n    top: 100%;\n  }\n  .top-px {\n    top: 1px;\n  }\n  .-right-2 {\n    right: calc(0.25rem * -2);\n  }\n  .right-0 {\n    right: calc(0.25rem * 0);\n  }\n  .right-2 {\n    right: calc(0.25rem * 2);\n  }\n  .right-6 {\n    right: calc(0.25rem * 6);\n  }\n  .right-12 {\n    right: calc(0.25rem * 12);\n  }\n  .right-20 {\n    right: calc(0.25rem * 20);\n  }\n  .right-px {\n    right: 1px;\n  }\n  .bottom-0 {\n    bottom: calc(0.25rem * 0);\n  }\n  .bottom-1 {\n    bottom: calc(0.25rem * 1);\n  }\n  .bottom-2 {\n    bottom: calc(0.25rem * 2);\n  }\n  .bottom-px {\n    bottom: 1px;\n  }\n  .left-0 {\n    left: calc(0.25rem * 0);\n  }\n  .left-1 {\n    left: calc(0.25rem * 1);\n  }\n  .left-2 {\n    left: calc(0.25rem * 2);\n  }\n  .left-\\[15px\\] {\n    left: 15px;\n  }\n  .isolate {\n    isolation: isolate;\n  }\n  .z-0 {\n    z-index: 0;\n  }\n  .z-1 {\n    z-index: 1;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-9998 {\n    z-index: 9998;\n  }\n  .z-9999 {\n    z-index: 9999;\n  }\n  .order-last {\n    order: 9999;\n  }\n  .col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .container {\n    width: 100%;\n  }\n  @media (width >= 1024px) {\n    .container {\n      max-width: 1024px;\n    }\n  }\n  @media (width >= 40rem) {\n    .container {\n      max-width: 40rem;\n    }\n  }\n  @media (width >= 48rem) {\n    .container {\n      max-width: 48rem;\n    }\n  }\n  @media (width >= 64rem) {\n    .container {\n      max-width: 64rem;\n    }\n  }\n  @media (width >= 80rem) {\n    .container {\n      max-width: 80rem;\n    }\n  }\n  @media (width >= 96rem) {\n    .container {\n      max-width: 96rem;\n    }\n  }\n  .m-0 {\n    margin: calc(0.25rem * 0);\n  }\n  .m-2 {\n    margin: calc(0.25rem * 2);\n  }\n  .mx-0 {\n    margin-inline: calc(0.25rem * 0);\n  }\n  .mx-0\\.5 {\n    margin-inline: calc(0.25rem * 0.5);\n  }\n  .mx-1 {\n    margin-inline: calc(0.25rem * 1);\n  }\n  .mx-6 {\n    margin-inline: calc(0.25rem * 6);\n  }\n  .mx-16 {\n    margin-inline: calc(0.25rem * 16);\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .my-2 {\n    margin-block: calc(0.25rem * 2);\n  }\n  .my-3 {\n    margin-block: calc(0.25rem * 3);\n  }\n  .my-4 {\n    margin-block: calc(0.25rem * 4);\n  }\n  .my-6 {\n    margin-block: calc(0.25rem * 6);\n  }\n  .my-auto {\n    margin-block: auto;\n  }\n  .mt-0 {\n    margin-top: calc(0.25rem * 0);\n  }\n  .mt-1 {\n    margin-top: calc(0.25rem * 1);\n  }\n  .mt-1\\.5 {\n    margin-top: calc(0.25rem * 1.5);\n  }\n  .mt-2 {\n    margin-top: calc(0.25rem * 2);\n  }\n  .mt-2\\.5 {\n    margin-top: calc(0.25rem * 2.5);\n  }\n  .mt-3 {\n    margin-top: calc(0.25rem * 3);\n  }\n  .mt-4 {\n    margin-top: calc(0.25rem * 4);\n  }\n  .mt-6 {\n    margin-top: calc(0.25rem * 6);\n  }\n  .mt-7 {\n    margin-top: calc(0.25rem * 7);\n  }\n  .mt-8 {\n    margin-top: calc(0.25rem * 8);\n  }\n  .mt-10 {\n    margin-top: calc(0.25rem * 10);\n  }\n  .mt-px {\n    margin-top: 1px;\n  }\n  .mr-0 {\n    margin-right: calc(0.25rem * 0);\n  }\n  .mr-0\\.5 {\n    margin-right: calc(0.25rem * 0.5);\n  }\n  .mr-1 {\n    margin-right: calc(0.25rem * 1);\n  }\n  .mr-1\\.5 {\n    margin-right: calc(0.25rem * 1.5);\n  }\n  .mr-2 {\n    margin-right: calc(0.25rem * 2);\n  }\n  .mr-3 {\n    margin-right: calc(0.25rem * 3);\n  }\n  .mr-6 {\n    margin-right: calc(0.25rem * 6);\n  }\n  .mb-0 {\n    margin-bottom: calc(0.25rem * 0);\n  }\n  .mb-1 {\n    margin-bottom: calc(0.25rem * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(0.25rem * 2);\n  }\n  .mb-3 {\n    margin-bottom: calc(0.25rem * 3);\n  }\n  .mb-4 {\n    margin-bottom: calc(0.25rem * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(0.25rem * 6);\n  }\n  .ml-0\\.5 {\n    margin-left: calc(0.25rem * 0.5);\n  }\n  .ml-1 {\n    margin-left: calc(0.25rem * 1);\n  }\n  .ml-2 {\n    margin-left: calc(0.25rem * 2);\n  }\n  .ml-4 {\n    margin-left: calc(0.25rem * 4);\n  }\n  .ml-6 {\n    margin-left: calc(0.25rem * 6);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .box-border {\n    box-sizing: border-box;\n  }\n  .box-content {\n    box-sizing: content-box;\n  }\n  .line-clamp-1 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n  }\n  .line-clamp-2 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n  }\n  .line-clamp-3 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n  }\n  .line-clamp-4 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 4;\n  }\n  .line-clamp-none {\n    overflow: visible;\n    display: block;\n    -webkit-box-orient: horizontal;\n    -webkit-line-clamp: unset;\n  }\n  .block {\n    display: block;\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .table {\n    display: table;\n  }\n  .aspect-square-\\[auto\\] {\n    aspect-ratio: 1 / 1;\n    height: auto;\n  }\n  @supports not (aspect-ratio: 1 / 1) {\n    .aspect-square-\\[auto\\] {\n      height: auto;\n    }\n  }\n  .aspect-square-\\[auto\\] {\n    aspect-ratio: 1 / 1;\n    height: auto;\n  }\n  @supports not (aspect-ratio: 1 / 1) {\n    .aspect-square-\\[auto\\] {\n      height: auto;\n    }\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .size-\\[27px\\] {\n    width: 27px;\n    height: 27px;\n  }\n  .h-1 {\n    height: calc(0.25rem * 1);\n  }\n  .h-2 {\n    height: calc(0.25rem * 2);\n  }\n  .h-2\\.5 {\n    height: calc(0.25rem * 2.5);\n  }\n  .h-3 {\n    height: calc(0.25rem * 3);\n  }\n  .h-4 {\n    height: calc(0.25rem * 4);\n  }\n  .h-5 {\n    height: calc(0.25rem * 5);\n  }\n  .h-5\\/6 {\n    height: calc(5/6 * 100%);\n  }\n  .h-6 {\n    height: calc(0.25rem * 6);\n  }\n  .h-7 {\n    height: calc(0.25rem * 7);\n  }\n  .h-8 {\n    height: calc(0.25rem * 8);\n  }\n  .h-9 {\n    height: calc(0.25rem * 9);\n  }\n  .h-10 {\n    height: calc(0.25rem * 10);\n  }\n  .h-12 {\n    height: calc(0.25rem * 12);\n  }\n  .h-\\[2\\.6rem\\] {\n    height: 2.6rem;\n  }\n  .h-\\[9px\\] {\n    height: 9px;\n  }\n  .h-auto {\n    height: auto;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-96 {\n    max-height: calc(0.25rem * 96);\n  }\n  .min-h-10 {\n    min-height: calc(0.25rem * 10);\n  }\n  .min-lines-2 {\n    min-height: calc(var(--line-height) * 2);\n  }\n  .min-lines-2 {\n    min-height: calc(var(--line-height) * 2);\n  }\n  .min-lines-3 {\n    min-height: calc(var(--line-height) * 3);\n  }\n  .min-lines-3 {\n    min-height: calc(var(--line-height) * 3);\n  }\n  .w-0\\.5 {\n    width: calc(0.25rem * 0.5);\n  }\n  .w-1 {\n    width: calc(0.25rem * 1);\n  }\n  .w-1\\/2 {\n    width: calc(1/2 * 100%);\n  }\n  .w-2 {\n    width: calc(0.25rem * 2);\n  }\n  .w-2\\.5 {\n    width: calc(0.25rem * 2.5);\n  }\n  .w-3 {\n    width: calc(0.25rem * 3);\n  }\n  .w-3\\.5 {\n    width: calc(0.25rem * 3.5);\n  }\n  .w-3\\/5 {\n    width: calc(3/5 * 100%);\n  }\n  .w-4 {\n    width: calc(0.25rem * 4);\n  }\n  .w-5 {\n    width: calc(0.25rem * 5);\n  }\n  .w-5\\/6 {\n    width: calc(5/6 * 100%);\n  }\n  .w-6 {\n    width: calc(0.25rem * 6);\n  }\n  .w-7 {\n    width: calc(0.25rem * 7);\n  }\n  .w-8 {\n    width: calc(0.25rem * 8);\n  }\n  .w-9 {\n    width: calc(0.25rem * 9);\n  }\n  .w-10 {\n    width: calc(0.25rem * 10);\n  }\n  .w-12 {\n    width: calc(0.25rem * 12);\n  }\n  .w-20 {\n    width: calc(0.25rem * 20);\n  }\n  .w-26 {\n    width: calc(0.25rem * 26);\n  }\n  .w-28 {\n    width: calc(0.25rem * 28);\n  }\n  .w-32 {\n    width: calc(0.25rem * 32);\n  }\n  .w-36 {\n    width: calc(0.25rem * 36);\n  }\n  .w-44 {\n    width: calc(0.25rem * 44);\n  }\n  .w-48 {\n    width: calc(0.25rem * 48);\n  }\n  .w-60 {\n    width: calc(0.25rem * 60);\n  }\n  .w-64 {\n    width: calc(0.25rem * 64);\n  }\n  .w-72 {\n    width: calc(0.25rem * 72);\n  }\n  .w-100 {\n    width: calc(0.25rem * 100);\n  }\n  .w-\\[2\\.6rem\\] {\n    width: 2.6rem;\n  }\n  .w-auto {\n    width: auto;\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .w-max {\n    width: max-content;\n  }\n  .max-w-4\\/5 {\n    max-width: calc(4/5 * 100%);\n  }\n  .max-w-60 {\n    max-width: calc(0.25rem * 60);\n  }\n  .max-w-\\[30ch\\] {\n    max-width: 30ch;\n  }\n  .max-w-full {\n    max-width: 100%;\n  }\n  .max-w-lg {\n    max-width: 32rem;\n  }\n  .max-w-max {\n    max-width: max-content;\n  }\n  .min-w-0 {\n    min-width: calc(0.25rem * 0);\n  }\n  .min-w-10 {\n    min-width: calc(0.25rem * 10);\n  }\n  .min-w-20 {\n    min-width: calc(0.25rem * 20);\n  }\n  .min-w-24 {\n    min-width: calc(0.25rem * 24);\n  }\n  .min-w-full {\n    min-width: 100%;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-none {\n    flex: none;\n  }\n  .flex-shrink {\n    flex-shrink: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .flex-grow {\n    flex-grow: 1;\n  }\n  .grow {\n    flex-grow: 1;\n  }\n  .basis-1\\/2 {\n    flex-basis: calc(1/2 * 100%);\n  }\n  .basis-8 {\n    flex-basis: calc(0.25rem * 8);\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-1\\/2 {\n    --tw-translate-x: calc(1/2 * 100%);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-75 {\n    --tw-scale-x: 75%;\n    --tw-scale-y: 75%;\n    --tw-scale-z: 75%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-100 {\n    --tw-scale-x: 100%;\n    --tw-scale-y: 100%;\n    --tw-scale-z: 100%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-pulse {\n    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n  .animate-spin {\n    animation: spin 1s linear infinite;\n  }\n  .cursor-\\[inherit\\] {\n    cursor: inherit;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .resize-none {\n    resize: none;\n  }\n  .list-outside {\n    list-style-position: outside;\n  }\n  .list-decimal {\n    list-style-type: decimal;\n  }\n  .list-disc {\n    list-style-type: disc;\n  }\n  .list-none {\n    list-style-type: none;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-\\[min-content_1fr\\] {\n    grid-template-columns: min-content 1fr;\n  }\n  .grid-cols-\\[min-content_auto\\] {\n    grid-template-columns: min-content auto;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-nowrap {\n    flex-wrap: nowrap;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .place-items-center {\n    place-items: center;\n  }\n  .content-center {\n    align-content: center;\n  }\n  .items-baseline {\n    align-items: baseline;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .gap-0\\.5 {\n    gap: calc(0.25rem * 0.5);\n  }\n  .gap-1 {\n    gap: calc(0.25rem * 1);\n  }\n  .gap-2 {\n    gap: calc(0.25rem * 2);\n  }\n  .gap-3 {\n    gap: calc(0.25rem * 3);\n  }\n  .gap-4 {\n    gap: calc(0.25rem * 4);\n  }\n  .gap-8 {\n    gap: calc(0.25rem * 8);\n  }\n  :where(.space-y-1 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(0.25rem * 1) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(0.25rem * 1) * calc(1 - var(--tw-space-y-reverse)));\n  }\n  .gap-x-1\\.5 {\n    column-gap: calc(0.25rem * 1.5);\n  }\n  .gap-x-2 {\n    column-gap: calc(0.25rem * 2);\n  }\n  .gap-x-4 {\n    column-gap: calc(0.25rem * 4);\n  }\n  :where(.space-x-1\\.5 > :not(:last-child)) {\n    --tw-space-x-reverse: 0;\n    margin-inline-start: calc(calc(0.25rem * 1.5) * var(--tw-space-x-reverse));\n    margin-inline-end: calc(calc(0.25rem * 1.5) * calc(1 - var(--tw-space-x-reverse)));\n  }\n  .gap-y-0\\.5 {\n    row-gap: calc(0.25rem * 0.5);\n  }\n  :where(.divide-y > :not(:last-child)) {\n    --tw-divide-y-reverse: 0;\n    border-bottom-style: var(--tw-border-style);\n    border-top-style: var(--tw-border-style);\n    border-top-width: calc(1px * var(--tw-divide-y-reverse));\n    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  }\n  :where(.divide-neutral > :not(:last-child)) {\n    border-color: var(--atomic-neutral);\n  }\n  .self-center {\n    align-self: center;\n  }\n  .self-start {\n    align-self: flex-start;\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .overflow-auto {\n    overflow: auto;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-auto {\n    overflow-x: auto;\n  }\n  .overflow-x-clip {\n    overflow-x: clip;\n  }\n  .overflow-x-scroll {\n    overflow-x: scroll;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .overflow-y-visible {\n    overflow-y: visible;\n  }\n  .scroll-smooth {\n    scroll-behavior: smooth;\n  }\n  .rounded {\n    border-radius: var(--atomic-border-radius);\n  }\n  .rounded-3xl {\n    border-radius: 1.5rem;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--atomic-border-radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--atomic-border-radius-md);\n  }\n  .rounded-none {\n    border-radius: 0;\n  }\n  .rounded-sm {\n    border-radius: var(--atomic-border-radius);\n  }\n  .rounded-xl {\n    border-radius: var(--atomic-border-radius-xl);\n  }\n  .rounded-tl-none {\n    border-top-left-radius: 0;\n  }\n  .rounded-r-none {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-gray-200 {\n    border-color: oklch(0.928 0.006 264.531);\n  }\n  .border-neutral {\n    border-color: var(--atomic-neutral);\n  }\n  .border-neutral-dark {\n    border-color: var(--atomic-neutral-dark);\n  }\n  .border-neutral-dim {\n    border-color: var(--atomic-neutral-dim);\n  }\n  .border-primary {\n    border-color: var(--atomic-primary);\n  }\n  .border-primary-light {\n    border-color: var(--atomic-primary-light);\n  }\n  .border-t-neutral {\n    border-top-color: var(--atomic-neutral);\n  }\n  .border-b-neutral {\n    border-bottom-color: var(--atomic-neutral);\n  }\n  .border-b-neutral-dim {\n    border-bottom-color: var(--atomic-neutral-dim);\n  }\n  .border-l-neutral {\n    border-left-color: var(--atomic-neutral);\n  }\n  .border-l-neutral-dim {\n    border-left-color: var(--atomic-neutral-dim);\n  }\n  .bg-\\[\\#F1F2FF\\] {\n    background-color: #F1F2FF;\n  }\n  .bg-\\[rgba\\(40\\,40\\,40\\,0\\.8\\)\\] {\n    background-color: rgba(40,40,40,0.8);\n  }\n  .bg-background {\n    background-color: var(--atomic-background);\n  }\n  .bg-error {\n    background-color: var(--atomic-error);\n  }\n  .bg-gray-50 {\n    background-color: oklch(0.985 0.002 247.839);\n  }\n  .bg-neutral {\n    background-color: var(--atomic-neutral);\n  }\n  .bg-neutral-dark {\n    background-color: var(--atomic-neutral-dark);\n  }\n  .bg-neutral-light {\n    background-color: var(--atomic-neutral-light);\n  }\n  .bg-primary {\n    background-color: var(--atomic-primary);\n  }\n  .bg-primary-background {\n    background-color: var(--atomic-primary-background);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: #fff;\n  }\n  .bg-linear-to-l {\n    --tw-gradient-position: to left;\n  }\n  @supports (background-image: linear-gradient(in lab, red, red)) {\n    .bg-linear-to-l {\n      --tw-gradient-position: to left in oklab;\n    }\n  }\n  .bg-linear-to-l {\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .bg-linear-to-r {\n    --tw-gradient-position: to right;\n  }\n  @supports (background-image: linear-gradient(in lab, red, red)) {\n    .bg-linear-to-r {\n      --tw-gradient-position: to right in oklab;\n    }\n  }\n  .bg-linear-to-r {\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-background\\/60 {\n    --tw-gradient-from: color-mix(in srgb, #ffffff 60%, transparent);\n  }\n  @supports (color: color-mix(in lab, red, red)) {\n    .from-background\\/60 {\n      --tw-gradient-from: color-mix(in oklab, var(--atomic-background) 60%, transparent);\n    }\n  }\n  .from-background\\/60 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .from-more-results-progress-bar-color-from {\n    --tw-gradient-from: var(\n    --atomic-more-results-progress-bar-color-from,\n    var(--atomic-primary-dark)\n  );\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .to-more-results-progress-bar-color-to {\n    --tw-gradient-to: var(\n    --atomic-more-results-progress-bar-color-to,\n    var(--atomic-primary-light)\n  );\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .fill-current {\n    fill: currentcolor;\n  }\n  .stroke-\\[1\\.25\\] {\n    stroke-width: 1.25;\n  }\n  .object-contain {\n    object-fit: contain;\n  }\n  .p-0 {\n    padding: calc(0.25rem * 0);\n  }\n  .p-1 {\n    padding: calc(0.25rem * 1);\n  }\n  .p-2 {\n    padding: calc(0.25rem * 2);\n  }\n  .p-2\\.5 {\n    padding: calc(0.25rem * 2.5);\n  }\n  .p-3 {\n    padding: calc(0.25rem * 3);\n  }\n  .p-3\\.5 {\n    padding: calc(0.25rem * 3.5);\n  }\n  .p-4 {\n    padding: calc(0.25rem * 4);\n  }\n  .p-6 {\n    padding: calc(0.25rem * 6);\n  }\n  .p-7 {\n    padding: calc(0.25rem * 7);\n  }\n  .p-8 {\n    padding: calc(0.25rem * 8);\n  }\n  .px-1 {\n    padding-inline: calc(0.25rem * 1);\n  }\n  .px-2 {\n    padding-inline: calc(0.25rem * 2);\n  }\n  .px-2\\.5 {\n    padding-inline: calc(0.25rem * 2.5);\n  }\n  .px-3 {\n    padding-inline: calc(0.25rem * 3);\n  }\n  .px-4 {\n    padding-inline: calc(0.25rem * 4);\n  }\n  .px-6 {\n    padding-inline: calc(0.25rem * 6);\n  }\n  .px-9 {\n    padding-inline: calc(0.25rem * 9);\n  }\n  .py-0\\.5 {\n    padding-block: calc(0.25rem * 0.5);\n  }\n  .py-1 {\n    padding-block: calc(0.25rem * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(0.25rem * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(0.25rem * 2);\n  }\n  .py-2\\.5 {\n    padding-block: calc(0.25rem * 2.5);\n  }\n  .py-3 {\n    padding-block: calc(0.25rem * 3);\n  }\n  .py-3\\.5 {\n    padding-block: calc(0.25rem * 3.5);\n  }\n  .py-4 {\n    padding-block: calc(0.25rem * 4);\n  }\n  .py-4\\.5 {\n    padding-block: calc(0.25rem * 4.5);\n  }\n  .py-5 {\n    padding-block: calc(0.25rem * 5);\n  }\n  .py-6 {\n    padding-block: calc(0.25rem * 6);\n  }\n  .pt-0\\.5 {\n    padding-top: calc(0.25rem * 0.5);\n  }\n  .pt-8 {\n    padding-top: calc(0.25rem * 8);\n  }\n  .pr-2 {\n    padding-right: calc(0.25rem * 2);\n  }\n  .pr-6 {\n    padding-right: calc(0.25rem * 6);\n  }\n  .pr-24 {\n    padding-right: calc(0.25rem * 24);\n  }\n  .pb-1 {\n    padding-bottom: calc(0.25rem * 1);\n  }\n  .pb-3 {\n    padding-bottom: calc(0.25rem * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(0.25rem * 4);\n  }\n  .pb-5 {\n    padding-bottom: calc(0.25rem * 5);\n  }\n  .pb-6 {\n    padding-bottom: calc(0.25rem * 6);\n  }\n  .pl-0 {\n    padding-left: calc(0.25rem * 0);\n  }\n  .pl-1 {\n    padding-left: calc(0.25rem * 1);\n  }\n  .pl-3 {\n    padding-left: calc(0.25rem * 3);\n  }\n  .pl-7 {\n    padding-left: calc(0.25rem * 7);\n  }\n  .pl-9 {\n    padding-left: calc(0.25rem * 9);\n  }\n  .pl-10 {\n    padding-left: calc(0.25rem * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .align-baseline {\n    vertical-align: baseline;\n  }\n  .align-bottom {\n    vertical-align: bottom;\n  }\n  .align-middle {\n    vertical-align: middle;\n  }\n  .font-sans {\n    font-family: var(--atomic-font-family);\n  }\n  .set-font-size-sm {\n    --font-size: var(--atomic-text-sm);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n  }\n  .set-font-size-sm {\n    --font-size: var(--atomic-text-sm);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n  }\n  .text-2xl {\n    font-size: var(--atomic-text-2xl);\n    line-height: var(--tw-leading, calc(2 / 1.5));\n  }\n  .text-base {\n    font-size: var(--atomic-text-base);\n    line-height: var(--tw-leading, calc(1.5 / 1));\n  }\n  .text-lg {\n    font-size: var(--atomic-text-lg);\n    line-height: var(--tw-leading, calc(1.75 / 1.125));\n  }\n  .text-sm {\n    font-size: var(--atomic-text-sm);\n    line-height: var(--tw-leading, calc(1.25 / 0.875));\n  }\n  .text-xl {\n    font-size: var(--atomic-text-xl);\n    line-height: var(--tw-leading, calc(1.75 / 1.25));\n  }\n  .text-xs {\n    font-size: 0.75rem;\n    line-height: var(--tw-leading, calc(1 / 0.75));\n  }\n  .text-xs\\/\\[1rem\\] {\n    font-size: 0.75rem;\n    line-height: 1rem;\n  }\n  .leading-4 {\n    --tw-leading: calc(0.25rem * 4);\n    line-height: calc(0.25rem * 4);\n  }\n  .leading-5 {\n    --tw-leading: calc(0.25rem * 5);\n    line-height: calc(0.25rem * 5);\n  }\n  .leading-6 {\n    --tw-leading: calc(0.25rem * 6);\n    line-height: calc(0.25rem * 6);\n  }\n  .leading-8 {\n    --tw-leading: calc(0.25rem * 8);\n    line-height: calc(0.25rem * 8);\n  }\n  .leading-10 {\n    --tw-leading: calc(0.25rem * 10);\n    line-height: calc(0.25rem * 10);\n  }\n  .leading-\\[1\\.5\\] {\n    --tw-leading: 1.5;\n    line-height: 1.5;\n  }\n  .leading-\\[calc\\(1\\/\\.75\\)\\] {\n    --tw-leading: calc(1 / .75);\n    line-height: calc(1 / .75);\n  }\n  .leading-\\[var\\(--line-height\\)\\] {\n    --tw-leading: var(--line-height);\n    line-height: var(--line-height);\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-bold {\n    --tw-font-weight: var(--atomic-font-bold);\n    font-weight: var(--atomic-font-bold);\n  }\n  .font-light {\n    --tw-font-weight: 300;\n    font-weight: 300;\n  }\n  .font-medium {\n    --tw-font-weight: 500;\n    font-weight: 500;\n  }\n  .font-normal {\n    --tw-font-weight: var(--atomic-font-normal);\n    font-weight: var(--atomic-font-normal);\n  }\n  .font-semibold {\n    --tw-font-weight: 600;\n    font-weight: 600;\n  }\n  .break-words {\n    overflow-wrap: break-word;\n  }\n  .break-all {\n    word-break: break-all;\n  }\n  .break-keep {\n    word-break: keep-all;\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .whitespace-normal {\n    white-space: normal;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .text-\\[\\#54698D\\] {\n    color: #54698D;\n  }\n  .text-\\[inherit\\] {\n    color: inherit;\n  }\n  .text-black {\n    color: #000;\n  }\n  .text-error {\n    color: var(--atomic-error);\n  }\n  .text-gray-500 {\n    color: oklch(0.551 0.027 264.364);\n  }\n  .text-gray-600 {\n    color: oklch(0.446 0.03 256.802);\n  }\n  .text-gray-700 {\n    color: oklch(0.373 0.034 259.733);\n  }\n  .text-gray-900 {\n    color: oklch(0.21 0.034 264.665);\n  }\n  .text-green-600 {\n    color: oklch(0.627 0.194 149.214);\n  }\n  .text-inline-code {\n    color: var(--atomic-inline-code);\n  }\n  .text-neutral {\n    color: var(--atomic-neutral);\n  }\n  .text-neutral-dark {\n    color: var(--atomic-neutral-dark);\n  }\n  .text-on-background {\n    color: var(--atomic-on-background);\n  }\n  .text-on-primary {\n    color: var(--atomic-on-primary);\n  }\n  .text-primary {\n    color: var(--atomic-primary);\n  }\n  .text-primary-light {\n    color: var(--atomic-primary-light);\n  }\n  .text-rating-icon-active {\n    color: var(--atomic-rating-icon-active-color, #f6ce3c);\n  }\n  .text-rating-icon-inactive {\n    color: var(\n    --atomic-rating-icon-inactive-color,\n    var(--atomic-neutral)\n  );\n  }\n  .text-success {\n    color: var(--atomic-success);\n  }\n  .text-transparent {\n    color: transparent;\n  }\n  .capitalize {\n    text-transform: capitalize;\n  }\n  .lowercase {\n    text-transform: lowercase;\n  }\n  .italic {\n    font-style: italic;\n  }\n  .line-through {\n    text-decoration-line: line-through;\n  }\n  .placeholder-neutral-dark::placeholder {\n    color: var(--atomic-neutral-dark);\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-80 {\n    opacity: 80%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-inner-primary {\n    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--atomic-primary));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-lg {\n    --tw-shadow: 0px 2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-t-lg {\n    --tw-shadow: 0px -2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-1 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-3 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-primary {\n    --tw-ring-color: var(--atomic-primary);\n  }\n  .ring-primary-light {\n    --tw-ring-color: var(--atomic-primary-light);\n  }\n  .ring-ring-primary {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .outline-error {\n    outline-color: var(--atomic-error);\n  }\n  .outline-neutral {\n    outline-color: var(--atomic-neutral);\n  }\n  .outline-primary {\n    outline-color: var(--atomic-primary);\n  }\n  .blur {\n    --tw-blur: blur(8px);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .grayscale {\n    --tw-grayscale: grayscale(100%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .invert {\n    --tw-invert: invert(100%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-\\[visibility\\] {\n    transition-property: visibility;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .duration-500 {\n    --tw-duration: 500ms;\n    transition-duration: 500ms;\n  }\n  .ease-in-out {\n    --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .\\[grid-area\\:modal\\] {\n    grid-area: modal;\n  }\n  .\\[scrollbar-gutter\\:stable_both-edges\\] {\n    scrollbar-gutter: stable both-edges;\n  }\n  @media (hover: hover) {\n    .group-hover\\:visible:is(:where(.group):hover *) {\n      visibility: visible;\n    }\n  }\n  @media (hover: hover) {\n    .group-hover\\:text-error:is(:where(.group):hover *) {\n      color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .group-hover\\:text-primary:is(:where(.group):hover *) {\n      color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .group-hover\\:text-primary-light:is(:where(.group):hover *) {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .group-focus\\:text-primary:is(:where(.group):focus *) {\n    color: var(--atomic-primary);\n  }\n  .group-focus\\:text-primary-light:is(:where(.group):focus *) {\n    color: var(--atomic-primary-light);\n  }\n  .group-focus-visible\\:text-error:is(:where(.group):focus-visible *) {\n    color: var(--atomic-error);\n  }\n  .group-focus-visible\\:text-primary:is(:where(.group):focus-visible *) {\n    color: var(--atomic-primary);\n  }\n  .peer-focus-within\\:border-primary-light:is(:where(.peer):focus-within ~ *) {\n    border-color: var(--atomic-primary-light);\n  }\n  .peer-focus-within\\:text-primary-light:is(:where(.peer):focus-within ~ *) {\n    color: var(--atomic-primary-light);\n  }\n  @media (hover: hover) {\n    .peer-hover\\:border-primary-light:is(:where(.peer):hover ~ *) {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .peer-hover\\:text-error:is(:where(.peer):hover ~ *) {\n      color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .peer-hover\\:text-primary-light:is(:where(.peer):hover ~ *) {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .before\\:inline::before {\n    content: var(--tw-content);\n    display: inline;\n  }\n  .before\\:content-\\[\\\'\\,\\\\00a0\\\'\\]::before {\n    --tw-content: \',\\00a0\';\n    content: var(--tw-content);\n  }\n  .after\\:absolute::after {\n    content: var(--tw-content);\n    position: absolute;\n  }\n  .after\\:-bottom-0\\.5::after {\n    content: var(--tw-content);\n    bottom: calc(0.25rem * -0.5);\n  }\n  .after\\:block::after {\n    content: var(--tw-content);\n    display: block;\n  }\n  .after\\:h-1::after {\n    content: var(--tw-content);\n    height: calc(0.25rem * 1);\n  }\n  .after\\:w-full::after {\n    content: var(--tw-content);\n    width: 100%;\n  }\n  .after\\:rounded::after {\n    content: var(--tw-content);\n    border-radius: var(--atomic-border-radius);\n  }\n  .after\\:bg-primary::after {\n    content: var(--tw-content);\n    background-color: var(--atomic-primary);\n  }\n  .focus-within\\:border-disabled:focus-within {\n    border-color: var(--atomic-disabled);\n  }\n  .focus-within\\:border-primary:focus-within {\n    border-color: var(--atomic-primary);\n  }\n  .focus-within\\:ring-3:focus-within {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .focus-within\\:ring-neutral:focus-within {\n    --tw-ring-color: var(--atomic-neutral);\n  }\n  .focus-within\\:ring-ring-primary:focus-within {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  @media (hover: hover) {\n    .hover\\:border:hover {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:border-error:hover {\n      border-color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:border-primary-light:hover {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-error:hover {\n      background-color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-neutral-light:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-primary-light:hover {\n      background-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-transparent:hover {\n      background-color: transparent;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:fill-white:hover {\n      fill: #fff;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:text-primary-light:hover {\n      color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:underline:hover {\n      text-decoration-line: underline;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:opacity-100:hover {\n      opacity: 100%;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:shadow-sm:hover {\n      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:opacity-100:focus {\n    opacity: 100%;\n  }\n  .focus\\:outline-hidden:focus {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  @media (forced-colors: active) {\n    .focus\\:outline-hidden:focus {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n  }\n  .focus-visible\\:border:focus-visible {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .focus-visible\\:border-error:focus-visible {\n    border-color: var(--atomic-error);\n  }\n  .focus-visible\\:border-primary:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .focus-visible\\:border-primary-light:focus-visible {\n    border-color: var(--atomic-primary-light);\n  }\n  .focus-visible\\:bg-error:focus-visible {\n    background-color: var(--atomic-error);\n  }\n  .focus-visible\\:bg-neutral-light:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .focus-visible\\:bg-primary-light:focus-visible {\n    background-color: var(--atomic-primary-light);\n  }\n  .focus-visible\\:text-primary-light:focus-visible {\n    color: var(--atomic-primary-light);\n  }\n  .focus-visible\\:underline:focus-visible {\n    text-decoration-line: underline;\n  }\n  .focus-visible\\:ring-2:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .focus-visible\\:outline-none:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  @media (width >= 40rem) {\n    .sm\\:px-6 {\n      padding-inline: calc(0.25rem * 6);\n    }\n  }\n  .\\[part\\=\\"breadcrumb-button\\"\\]\\:visible:is(part="breadcrumb-button") {\n    visibility: visible;\n  }\n}\n@layer theme, base, components, utilities;\n@layer components {\n  .input-primary {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n  }\n  @media (hover: hover) {\n    .input-primary:hover {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  .input-primary:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .input-primary:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .input-primary:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .input-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-radio {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n  }\n  .btn-radio::before {\n    --tw-content: attr(value);\n    content: var(--tw-content);\n  }\n  .btn-primary {\n    border-radius: var(--atomic-border-radius);\n    background-color: var(--atomic-primary);\n    color: var(--atomic-on-primary);\n  }\n  @media (hover: hover) {\n    .btn-primary:hover {\n      background-color: var(--atomic-primary-light);\n    }\n  }\n  .btn-primary:focus-visible {\n    background-color: var(--atomic-primary-light);\n  }\n  .btn-primary:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-primary:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-primary:disabled {\n    cursor: not-allowed;\n  }\n  .btn-primary:disabled {\n    background-color: var(--atomic-disabled);\n  }\n  .btn-outline-primary {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-primary);\n  }\n  @media (hover: hover) {\n    .btn-outline-primary:hover {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-primary:hover {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .btn-outline-primary:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-primary:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-primary:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-primary:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-primary:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-primary:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-primary:disabled {\n    color: var(--atomic-neutral);\n  }\n  .btn-text-primary {\n    border-radius: var(--atomic-border-radius);\n    background-color: var(--atomic-background);\n    color: var(--atomic-primary);\n  }\n  @media (hover: hover) {\n    .btn-text-primary:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  .btn-text-primary:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-text-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-neutral {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-neutral:hover {\n      border-color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-neutral:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-outline-neutral:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-neutral:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-neutral:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-neutral:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-neutral:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-neutral:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-neutral:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-neutral:disabled {\n    opacity: 50%;\n  }\n  .btn-outline-bg-neutral {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-neutral:hover {\n      border-color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-neutral:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-neutral:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-bg-neutral:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-bg-neutral:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-bg-neutral:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-bg-neutral:disabled {\n    opacity: 50%;\n  }\n  .btn-outline-bg-error {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-error:hover {\n      border-color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-error:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-error:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-outline-bg-error:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-bg-error:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-outline-bg-error:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-bg-error:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-bg-error:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-bg-error:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-bg-error:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-bg-error:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-bg-error:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-bg-error:disabled {\n    opacity: 50%;\n  }\n  .btn-outline-error {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-error:hover {\n      border-color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-error:hover {\n      color: var(--atomic-error);\n    }\n  }\n  .btn-outline-error:focus-visible {\n    border-color: var(--atomic-error);\n  }\n  .btn-outline-error:focus-visible {\n    color: var(--atomic-error);\n  }\n  .btn-outline-error:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-error:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-error:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-error:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-error:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-error:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-error:disabled {\n    opacity: 50%;\n  }\n  .btn-text-neutral {\n    border-radius: var(--atomic-border-radius);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-text-neutral:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-text-neutral:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-text-neutral:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-text-neutral:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-text-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-text-transparent {\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-text-transparent:hover {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .btn-text-transparent:focus-visible {\n    color: var(--atomic-primary-light);\n  }\n  .btn-square-neutral {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-square-neutral:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  .btn-square-neutral:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-square-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-page {\n    display: grid;\n    height: calc(0.25rem * 10);\n    width: calc(0.25rem * 10);\n    place-items: center;\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n    font-size: var(--atomic-text-lg);\n    line-height: var(--tw-leading, calc(1.75 / 1.125));\n  }\n  @media (hover: hover) {\n    .btn-page:hover {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n    }\n  }\n  .btn-page:focus-visible {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .btn-page.selected {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n    border-color: var(--atomic-primary);\n    --tw-font-weight: var(--atomic-font-bold);\n    font-weight: var(--atomic-font-bold);\n  }\n}\n@layer base {\n  :host {\n    display: block;\n  }\n  :host, button, input, select {\n    font-family: var(--atomic-font-family);\n    font-size: var(--atomic-text-base);\n    line-height: var(--tw-leading, calc(1.5 / 1));\n    --tw-font-weight: var(--atomic-font-normal);\n    font-weight: var(--atomic-font-normal);\n  }\n  button {\n    cursor: pointer;\n  }\n  :host(.atomic-hidden) {\n    display: none;\n  }\n  .ripple {\n    position: absolute;\n    pointer-events: none;\n    transform: scale(0);\n    border-radius: 50%;\n    animation: ripple var(--animation-duration) linear;\n  }\n  .ripple-relative {\n    position: relative;\n  }\n  .ripple-parent {\n    overflow: hidden;\n  }\n  @keyframes ripple {\n    to {\n      transform: scale(4);\n      opacity: 0;\n    }\n  }\n}\n.loading {\n  --tw-gradient-from: var(--atomic-primary-dark);\n  --tw-gradient-to: var(--atomic-primary-light);\n  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n}\n.loading::after {\n  content: \'\';\n  position: absolute;\n  height: calc(5/6 * 100%);\n  width: calc(5/6 * 100%);\n  border-radius: calc(infinity * 1px);\n  background-color: var(--atomic-background);\n}\n[part=\'textarea-expander\']::after {\n  content: attr(data-replicated-value) \' \';\n  visibility: hidden;\n}\n[part=\'textarea-expander\'] > [part=\'textarea\']::-webkit-scrollbar {\n  display: none;\n}\n[part=\'textarea-expander\'] > [part=\'textarea\']::-webkit-scrollbar {\n  display: none;\n}\n[part=\'textarea-expander\'] > [part=\'textarea\'] {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n[part=\'textarea-expander\'] > [part=\'textarea\']::-webkit-scrollbar {\n  display: none;\n}\n[part=\'textarea-expander\'] > [part=\'textarea\'], [part=\'textarea-expander\']::after {\n  z-index: 10;\n  height: 100%;\n  flex-grow: 1;\n  resize: none;\n  overflow: hidden;\n  background-color: transparent;\n  padding-inline: calc(0.25rem * 4);\n  padding-block: calc(0.25rem * 3.5);\n  font-size: var(--atomic-text-lg);\n  line-height: var(--tw-leading, calc(1.75 / 1.125));\n  white-space: nowrap;\n  color: var(--atomic-neutral-dark);\n  --tw-outline-style: none;\n  outline-style: none;\n  grid-area: 1 / 1 / 2 / 2;\n}\n[part=\'textarea-expander\'].expanded > [part=\'textarea\'], [part=\'textarea-expander\'].expanded::after {\n  white-space: pre-wrap;\n  overflow-y: auto;\n  max-height: 8em;\n}\n[part=\'wrapper\'] {\n  z-index: 10;\n}\n:host {\n  position: relative;\n}\n[part=\'input\'] {\n  padding-top: 0.675rem;\n  padding-bottom: 0.675rem;\n}\n[part=\'submit-icon\'] {\n  color: var(--atomic-on-background);\n}\n[part=\'submit-button\'] {\n  display: flex;\n  width: calc(0.25rem * 10);\n  align-items: center;\n  justify-content: center;\n}\n.loading::after {\n  content: \'\';\n  position: absolute;\n  height: calc(5/6 * 100%);\n  width: calc(5/6 * 100%);\n  border-radius: calc(infinity * 1px);\n  background-color: var(--atomic-background);\n}\n[part=\'clear-button-wrapper\'] {\n  margin-right: calc(0.25rem * 2);\n  padding-block: calc(0.25rem * 0);\n}\n[part=\'clear-icon\'] {\n  height: calc(0.25rem * 3);\n  width: calc(0.25rem * 3);\n}\n[part=\'textarea-expander\']::after {\n  padding: calc(0.25rem * 2);\n  padding-inline: calc(0.25rem * 4);\n}\n[part=\'textarea-expander\'] [part=\'textarea\'] {\n  padding: calc(0.25rem * 2);\n  padding-inline: calc(0.25rem * 4);\n}\n@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-scale-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-rotate-x {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-x-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-divide-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-gradient-position {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-gradient-from {\n  syntax: "<color>";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-via {\n  syntax: "<color>";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-to {\n  syntax: "<color>";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-stops {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-gradient-via-stops {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-gradient-from-position {\n  syntax: "<length-percentage>";\n  inherits: false;\n  initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n  syntax: "<length-percentage>";\n  inherits: false;\n  initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n  syntax: "<length-percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-leading {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: "<length>";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: "*";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-blur {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-drop-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: "*";\n  initial-value: "";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-space-x-reverse: 0;\n      --tw-divide-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-content: "";\n    }\n  }\n}\n';const z=k;var j=undefined&&undefined.__decorate||function(n,r,t,e){var i=arguments.length,a=i<3?r:e===null?e=Object.getOwnPropertyDescriptor(r,t):e,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(n,r,t,e);else for(var l=n.length-1;l>=0;l--)if(o=n[l])a=(i<3?o(a):i>3?o(r,t,a):o(r,t))||a;return i>3&&a&&Object.defineProperty(r,t,a),a};const S=class{constructor(n){r(this,n);this.isExpanded=false;this.disableSearch=false;this.numberOfSuggestions=5;this.searchBoxState=undefined;this.error=undefined;this.isExpanded=false;this.disableSearch=false;this.numberOfSuggestions=5}initialize(){this.id=m("atomic-search-box-");const n={id:this.id,numberOfSuggestions:0,highlightOptions:{notMatchDelimiters:{open:'<span class="font-bold">',close:"</span>"},correctionDelimiters:{open:'<span class="font-normal">',close:"</span>"}}};const{fetchQuerySuggestions:r,registerQuerySuggest:t}=e(this.bindings.engine);this.searchBox=i(this.bindings.engine,{options:n});this.bindings.engine.dispatch(t({id:this.id,count:this.numberOfSuggestions}));this.suggestionManager=new a({getNumberOfSuggestionsToDisplay:()=>this.numberOfSuggestions,updateQuery:n=>this.searchBox.updateText(n),getSearchBoxValue:()=>this.searchBoxState.value,getSuggestionTimeout:()=>500,getSuggestionDelay:()=>0,getHost:()=>this.host,getLogger:()=>this.bindings.engine.logger});this.suggestionManager.registerSuggestions({position:0,renderItems:()=>this.searchBox.state.suggestions.map((n=>this.renderSuggestionItem(n))),onInput:()=>this.bindings.engine.dispatch(r({id:this.id})),panel:"left"})}onSubmit(){if(this.suggestionManager.activeDescendantElement){this.suggestionManager.clickOnActiveElement();return}this.searchBox.submit();this.suggestionManager.clearSuggestions()}async onKeyDown(n){if(this.disableSearch){return}switch(n.key){case"Enter":this.onSubmit();break;case"Escape":this.suggestionManager.clearSuggestions();break;case"ArrowDown":n.preventDefault();await this.suggestionManager.focusNextValue();this.announceNewActiveSuggestionToScreenReader();break;case"ArrowUp":n.preventDefault();await this.suggestionManager.focusPreviousValue();this.announceNewActiveSuggestionToScreenReader();break;case"Tab":this.suggestionManager.clearSuggestions();break}}triggerTextAreaChange(n){this.textAreaRef.value=n;this.textAreaRef.dispatchEvent(new window.Event("change"))}renderSuggestion(r,t,e){const i=`${this.id}-suggestion-${r.key}`;const a=i===this.suggestionManager.activeDescendant||this.suggestionManager.suggestedQuery===r.query;if(t===e&&r.hideIfLast){return null}return n("atomic-suggestion-renderer",{i18n:this.bindings.i18n,id:i,suggestion:r,isSelected:a,side:"left",index:t,lastIndex:e,isDoubleList:false,onClick:n=>{this.suggestionManager.onSuggestionClick(r,n)},onMouseOver:()=>{this.suggestionManager.onSuggestionMouseOver(r,"left",i)}})}renderSuggestionItem(r){const t=this.searchBox.state.value!=="";const e=v(r,this.bindings.i18n);return{...e,content:n(f,null,n(y,{icon:o,hasSuggestion:this.searchBoxState.suggestions.length>1}),n(x,{suggestion:r,hasQuery:t})),onSelect:()=>{this.searchBox.selectSuggestion(r.rawValue)}}}renderPanel(r,t,e){if(!r.length){return null}return n("div",{part:"suggestions",ref:t,class:"flex grow basis-1/2 flex-col",onMouseDown:n=>{if(n.target===e()){n.preventDefault()}}},r.map(((n,t)=>this.renderSuggestion(n,t,r.length-1))))}renderSuggestions(){if(!this.suggestionManager.hasSuggestions){this.suggestionManager.updateActiveDescendant();return null}return n("div",{id:`${this.id}-popup`,part:"suggestions-wrapper",class:`bg-background border-neutral absolute top-full left-0 z-10 flex w-full rounded-md border ${this.suggestionManager.hasSuggestions&&this.isExpanded?"":"hidden"}`,role:"application","aria-label":this.bindings.i18n.t("search-suggestions-single-list"),...this.suggestionManager.activeDescendant&&{"aria-activedescendant":this.suggestionManager.activeDescendant}},this.renderPanel(this.suggestionManager.allSuggestionElements,(n=>this.suggestionManager.leftPanel=n),(()=>this.suggestionManager.leftPanel)))}getSearchInputLabel(){if(c()){return this.bindings.i18n.t("search-box-with-suggestions-macos")}if(!d()){return this.bindings.i18n.t("search-box-with-suggestions-keyboardless")}return this.bindings.i18n.t("search-box-with-suggestions")}async onFocus(){if(this.isExpanded){return}this.isExpanded=true;await this.suggestionManager.triggerSuggestions();this.announceNewSuggestionsToScreenReader()}async onInput(n){this.searchBox.updateText(n);this.isExpanded=true;await this.suggestionManager.triggerSuggestions();this.announceNewSuggestionsToScreenReader()}announceNewActiveSuggestionToScreenReader(){const n=this.suggestionManager.activeDescendantElement?.ariaLabel;if(c()&&n){this.suggestionsAriaMessage=n}}announceNewSuggestionsToScreenReader(){const n=this.suggestionManager.allSuggestionElements.filter(u).length;this.searchBoxAriaMessage=n?this.bindings.i18n.t(this.searchBoxState.value?"query-suggestions-available":"query-suggestions-available-no-query",{count:n,query:this.searchBoxState.value}):this.bindings.i18n.t("query-suggestions-unavailable")}render(){return n(s,{key:"df4cbdb520080f4e7c009e3e3810c8fee89e2bb4",disabled:this.disableSearch,onFocusout:n=>{if(!g(n)){return}this.suggestionManager.clearSuggestions();this.isExpanded=false}},n("atomic-icon",{key:"62b9e0c4df051630685345250e72a198cc3b4496",part:"submit-icon",icon:o,class:"my-auto mr-0 ml-4 h-4 w-4"}),n(l,{key:"40cc8c396393f625576b3aa11408898e8246c072",textAreaRef:this.textAreaRef,loading:this.searchBoxState.isLoading,ref:n=>n&&(this.textAreaRef=n),bindings:this.bindings,value:this.searchBoxState.value,ariaLabel:this.getSearchInputLabel(),placeholder:this.bindings.i18n.t("search-ellipsis"),onFocus:()=>this.onFocus(),onKeyDown:n=>this.onKeyDown(n),onClear:()=>{this.searchBox.clear();this.triggerTextAreaChange("")},onInput:n=>this.onInput(n.target.value)}),this.renderSuggestions())}get host(){return t(this)}};j([w()],S.prototype,"bindings",void 0);j([h("searchBox")],S.prototype,"searchBoxState",void 0);j([p("search-box")],S.prototype,"searchBoxAriaMessage",void 0);j([p("search-suggestions",true)],S.prototype,"suggestionsAriaMessage",void 0);S.style=z;export{S as atomic_insight_search_box};
+//# sourceMappingURL=p-63613c8a.entry.js.map

package/dist/atomic/p-63613c8a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getPartialSearchBoxSuggestionElement","suggestion","i18n","part","key","encodeForDomAttribute","rawValue","query","ariaLabel","t","interpolation","escapeValue","QuerySuggestionContainer","_","children","h","class","QuerySuggestionIcon","icon","hasSuggestion","QuerySuggestionText","hasQuery","innerHTML","highlightedValue","atomicInsightSearchBoxCss","AtomicInsightSearchBoxStyle0","AtomicInsightSearchBox","this","isExpanded","disableSearch","numberOfSuggestions","initialize","id","randomID","searchBoxOptions","highlightOptions","notMatchDelimiters","open","close","correctionDelimiters","fetchQuerySuggestions","registerQuerySuggest","loadInsightSearchActions","bindings","engine","searchBox","buildInsightSearchBox","options","dispatch","count","suggestionManager","SuggestionManager","getNumberOfSuggestionsToDisplay","updateQuery","updateText","getSearchBoxValue","searchBoxState","value","getSuggestionTimeout","getSuggestionDelay","getHost","host","getLogger","logger","registerSuggestions","position","renderItems","state","suggestions","map","renderSuggestionItem","onInput","panel","onSubmit","activeDescendantElement","clickOnActiveElement","submit","clearSuggestions","onKeyDown","e","preventDefault","focusNextValue","announceNewActiveSuggestionToScreenReader","focusPreviousValue","triggerTextAreaChange","textAreaRef","dispatchEvent","window","Event","renderSuggestion","item","index","lastIndex","isSelected","activeDescendant","suggestedQuery","hideIfLast","side","isDoubleList","onClick","onSuggestionClick","onMouseOver","onSuggestionMouseOver","partialItem","content","SearchSlimIcon","length","onSelect","selectSuggestion","renderPanel","elements","setRef","getRef","ref","onMouseDown","target","renderSuggestions","hasSuggestions","updateActiveDescendant","role","allSuggestionElements","el","leftPanel","getSearchInputLabel","isMacOS","hasKeyboard","onFocus","triggerSuggestions","announceNewSuggestionsToScreenReader","suggestionsAriaMessage","numberOfSuggestionsToAnnounce","filter","elementHasQuery","searchBoxAriaMessage","render","SearchBoxWrapper","disabled","onFocusout","event","isFocusingOut","SearchTextArea","loading","isLoading","placeholder","onClear","clear","__decorate","InitializeBindings","BindStateToController","AriaLiveRegion"],"sources":["src/components/common/suggestions/stencil-query-suggestions.tsx","src/components/insight/atomic-insight-search-box/atomic-insight-search-box.pcss?tag=atomic-insight-search-box&encapsulation=shadow","src/components/insight/atomic-insight-search-box/atomic-insight-search-box.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {encodeForDomAttribute} from '../../../utils/string-utils.js';\nimport {SearchBoxSuggestionElement} from './suggestions-types.js';\n\ninterface Suggestion {\n  highlightedValue: string;\n  rawValue: string;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const getPartialSearchBoxSuggestionElement = (\n  suggestion: Suggestion,\n  i18n: i18n\n): Pick<SearchBoxSuggestionElement, 'ariaLabel' | 'key' | 'query' | 'part'> => {\n  return {\n    part: 'query-suggestion-item',\n    key: `qs-${encodeForDomAttribute(suggestion.rawValue)}`,\n    query: suggestion.rawValue,\n    ariaLabel: i18n.t('query-suggestion-label', {\n      query: suggestion.rawValue,\n      interpolation: {escapeValue: false},\n    }),\n  };\n};\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const QuerySuggestionContainer: FunctionalComponent = (_, children) => {\n  return (\n    <div part=\"query-suggestion-content\" class=\"flex items-center\">\n      {children}\n    </div>\n  );\n};\n\ninterface QuerySuggestionIconProps {\n  icon: string;\n  hasSuggestion: boolean;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const QuerySuggestionIcon: FunctionalComponent<\n  QuerySuggestionIconProps\n> = ({icon, hasSuggestion}) => {\n  if (!hasSuggestion) {\n    return;\n  }\n\n  return (\n    <atomic-icon\n      part=\"query-suggestion-icon\"\n      icon={icon}\n      class=\"mr-2 h-4 w-4 shrink-0\"\n    ></atomic-icon>\n  );\n};\n\ninterface QuerySuggestionTextProps {\n  suggestion: Suggestion;\n  hasQuery: boolean;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const QuerySuggestionText: FunctionalComponent<\n  QuerySuggestionTextProps\n> = ({suggestion, hasQuery}) => {\n  if (hasQuery) {\n    return (\n      <span\n        part=\"query-suggestion-text\"\n        class=\"line-clamp-2 break-all\"\n        innerHTML={suggestion.highlightedValue}\n      ></span>\n    );\n  }\n\n  return (\n    <span part=\"query-suggestion-text\" class=\"line-clamp-2 break-all\">\n      {suggestion.rawValue}\n    </span>\n  );\n};\n","@import '../../../global/global.pcss';\n@import '../../common/search-box/search-box.pcss';\n\n[part='wrapper'] {\n  @apply z-10;\n}\n\n:host {\n  position: relative;\n}\n\n[part='input'] {\n  padding-top: 0.675rem;\n  padding-bottom: 0.675rem;\n}\n\n[part='submit-icon'] {\n  @apply text-on-background;\n}\n\n[part='submit-button'] {\n  @apply flex w-10 items-center justify-center;\n}\n\n.loading::after {\n  content: '';\n  @apply bg-background absolute h-5/6 w-5/6 rounded-full;\n}\n\n[part='clear-button-wrapper'] {\n  @apply mr-2 py-0;\n}\n\n[part='clear-icon'] {\n  @apply h-3 w-3;\n}\n\n[part='textarea-expander'] {\n  &::after {\n    @apply p-2 px-4;\n  }\n}\n\n[part='textarea-expander'] {\n  [part='textarea'] {\n    @apply p-2 px-4;\n  }\n}\n","import {loadInsightSearchActions} from '@coveo/headless/insight';\nimport {\n  buildSearchBox as buildInsightSearchBox,\n  SearchBox as InsightSearchBox,\n  SearchBoxState as InsightSearchBoxState,\n  Suggestion as InsightSuggestion,\n} from '@coveo/headless/insight';\nimport {Component, Element, h, Prop, State} from '@stencil/core';\nimport SearchSlimIcon from '../../../images/search-slim.svg';\nimport {hasKeyboard, isMacOS} from '../../../utils/device-utils';\nimport {\n  BindStateToController,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {AriaLiveRegion} from '../../../utils/stencil-accessibility-utils';\nimport {isFocusingOut, randomID} from '../../../utils/utils';\nimport {SearchBoxWrapper} from '../../common/search-box/stencil-search-box-wrapper';\nimport {SearchTextArea} from '../../common/search-box/stencil-search-text-area';\nimport {\n  getPartialSearchBoxSuggestionElement,\n  QuerySuggestionContainer,\n  QuerySuggestionIcon,\n  QuerySuggestionText,\n} from '../../common/suggestions/stencil-query-suggestions';\nimport {SuggestionManager} from '../../common/suggestions/stencil-suggestion-manager';\nimport {\n  elementHasQuery,\n} from '../../common/suggestions/suggestions-utils';\nimport {\n  SearchBoxSuggestionElement,\n} from '../../common/suggestions/suggestions-types';\nimport {InsightBindings} from '../atomic-insight-interface/atomic-insight-interface';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'atomic-insight-search-box',\n  styleUrl: 'atomic-insight-search-box.pcss',\n  shadow: true,\n})\nexport class AtomicInsightSearchBox {\n  @InitializeBindings() public bindings!: InsightBindings;\n\n  private searchBox!: InsightSearchBox;\n  private id!: string;\n  private textAreaRef!: HTMLTextAreaElement;\n  private suggestionManager!: SuggestionManager<InsightSearchBox>;\n\n  @Element() private host!: HTMLElement;\n\n  @BindStateToController('searchBox')\n  @State()\n  private searchBoxState!: InsightSearchBoxState;\n  @State() public error!: Error;\n  @State() private isExpanded = false;\n\n  /**\n   * Whether to prevent the user from triggering a search from the component.\n   * Perfect for use cases where you need to disable the search conditionally, like when the input is empty.\n   */\n  @Prop({reflect: true}) public disableSearch = false;\n  /**\n   * The number of query suggestions to display when interacting with the search box.\n   */\n  @Prop({reflect: true}) public numberOfSuggestions = 5;\n\n  @AriaLiveRegion('search-box')\n  protected searchBoxAriaMessage!: string;\n\n  @AriaLiveRegion('search-suggestions', true)\n  protected suggestionsAriaMessage!: string;\n\n  public initialize() {\n    this.id = randomID('atomic-search-box-');\n\n    const searchBoxOptions = {\n      id: this.id,\n      numberOfSuggestions: 0,\n      highlightOptions: {\n        notMatchDelimiters: {\n          open: '<span class=\"font-bold\">',\n          close: '</span>',\n        },\n        correctionDelimiters: {\n          open: '<span class=\"font-normal\">',\n          close: '</span>',\n        },\n      },\n    };\n\n    const {fetchQuerySuggestions, registerQuerySuggest} =\n      loadInsightSearchActions(this.bindings.engine);\n\n    this.searchBox = buildInsightSearchBox(this.bindings.engine, {\n      options: searchBoxOptions,\n    });\n\n    this.bindings.engine.dispatch(\n      registerQuerySuggest({id: this.id, count: this.numberOfSuggestions})\n    );\n\n    this.suggestionManager = new SuggestionManager({\n      getNumberOfSuggestionsToDisplay: () => this.numberOfSuggestions,\n      updateQuery: (query) => this.searchBox.updateText(query),\n      getSearchBoxValue: () => this.searchBoxState.value,\n      getSuggestionTimeout: () => 500,\n      getSuggestionDelay: () => 0,\n      getHost: () => this.host,\n      getLogger: () => this.bindings.engine.logger,\n    });\n\n    this.suggestionManager.registerSuggestions({\n      position: 0,\n      renderItems: () =>\n        this.searchBox.state.suggestions.map((suggestion) =>\n          this.renderSuggestionItem(suggestion)\n        ),\n      onInput:  () => this.bindings.engine.dispatch(fetchQuerySuggestions({id: this.id})),\n      panel: 'left',\n    });\n  }\n\n  private onSubmit() {\n    if (this.suggestionManager.activeDescendantElement) {\n      this.suggestionManager.clickOnActiveElement();\n      return;\n    }\n\n    this.searchBox.submit();\n    this.suggestionManager.clearSuggestions();\n  }\n\n  private async onKeyDown(e: KeyboardEvent) {\n    if (this.disableSearch) {\n      return;\n    }\n\n    switch (e.key) {\n      case 'Enter':\n        this.onSubmit();\n        break;\n      case 'Escape':\n        this.suggestionManager.clearSuggestions();\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        await this.suggestionManager.focusNextValue();\n        this.announceNewActiveSuggestionToScreenReader();\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        await this.suggestionManager.focusPreviousValue();\n        this.announceNewActiveSuggestionToScreenReader();\n        break;\n      case 'Tab':\n        this.suggestionManager.clearSuggestions();\n        break;\n    }\n  }\n\n  private triggerTextAreaChange(value: string) {\n    this.textAreaRef.value = value;\n    this.textAreaRef.dispatchEvent(new window.Event('change'));\n  }\n\n  private renderSuggestion(\n    item: SearchBoxSuggestionElement,\n    index: number,\n    lastIndex: number\n  ) {\n    const id = `${this.id}-suggestion-${item.key}`;\n\n    const isSelected =\n      id === this.suggestionManager.activeDescendant ||\n      this.suggestionManager.suggestedQuery === item.query;\n\n    if (index === lastIndex && item.hideIfLast) {\n      return null;\n    }\n\n    return (\n      <atomic-suggestion-renderer\n        i18n={this.bindings.i18n}\n        id={id}\n        suggestion={item}\n        isSelected={isSelected}\n        side={'left'}\n        index={index}\n        lastIndex={lastIndex}\n        isDoubleList={false}\n        onClick={(e: Event) => {\n          this.suggestionManager.onSuggestionClick(item, e);\n        }}\n        onMouseOver={() => {\n          this.suggestionManager.onSuggestionMouseOver(item, 'left', id);\n        }}\n      ></atomic-suggestion-renderer>\n    );\n  }\n\n  private renderSuggestionItem(\n    suggestion: InsightSuggestion\n  ): SearchBoxSuggestionElement {\n    const hasQuery = this.searchBox.state.value !== '';\n    const partialItem = getPartialSearchBoxSuggestionElement(\n      suggestion,\n      this.bindings.i18n\n    );\n\n    return {\n      ...partialItem,\n      content: (\n        <QuerySuggestionContainer>\n          <QuerySuggestionIcon\n            icon={SearchSlimIcon}\n            hasSuggestion={this.searchBoxState.suggestions.length > 1}\n          />\n\n          <QuerySuggestionText suggestion={suggestion} hasQuery={hasQuery} />\n        </QuerySuggestionContainer>\n      ),\n      onSelect: () => {\n        this.searchBox.selectSuggestion(suggestion.rawValue);\n      },\n    };\n  }\n\n  private renderPanel(\n    elements: SearchBoxSuggestionElement[],\n    setRef: (el: HTMLElement | undefined) => void,\n    getRef: () => HTMLElement | undefined\n  ) {\n    if (!elements.length) {\n      return null;\n    }\n\n    return (\n      <div\n        part={'suggestions'}\n        ref={setRef}\n        class=\"flex grow basis-1/2 flex-col\"\n        onMouseDown={(e) => {\n          if (e.target === getRef()) {\n            e.preventDefault();\n          }\n        }}\n      >\n        {elements.map((suggestion, index) =>\n          this.renderSuggestion(suggestion, index, elements.length - 1)\n        )}\n      </div>\n    );\n  }\n\n  private renderSuggestions() {\n    if (!this.suggestionManager.hasSuggestions) {\n      this.suggestionManager.updateActiveDescendant();\n      return null;\n    }\n\n    return (\n      <div\n        id={`${this.id}-popup`}\n        part=\"suggestions-wrapper\"\n        class={`bg-background border-neutral absolute top-full left-0 z-10 flex w-full rounded-md border ${\n          this.suggestionManager.hasSuggestions && this.isExpanded\n            ? ''\n            : 'hidden'\n        }`}\n        role=\"application\"\n        aria-label={this.bindings.i18n.t('search-suggestions-single-list')}\n        {...(this.suggestionManager.activeDescendant && {\n          'aria-activedescendant': this.suggestionManager.activeDescendant,\n        })}\n      >\n        {this.renderPanel(\n          this.suggestionManager.allSuggestionElements,\n          (el) => (this.suggestionManager.leftPanel = el),\n          () => this.suggestionManager.leftPanel\n        )}\n      </div>\n    );\n  }\n\n  private getSearchInputLabel() {\n    if (isMacOS()) {\n      return this.bindings.i18n.t('search-box-with-suggestions-macos');\n    }\n    if (!hasKeyboard()) {\n      return this.bindings.i18n.t('search-box-with-suggestions-keyboardless');\n    }\n    return this.bindings.i18n.t('search-box-with-suggestions');\n  }\n\n  private async onFocus() {\n    if (this.isExpanded) {\n      return;\n    }\n    this.isExpanded = true;\n    await this.suggestionManager.triggerSuggestions();\n    this.announceNewSuggestionsToScreenReader();\n  }\n\n  private async onInput(value: string) {\n    this.searchBox.updateText(value);\n    this.isExpanded = true;\n    await this.suggestionManager.triggerSuggestions();\n    this.announceNewSuggestionsToScreenReader();\n  }\n\n  private announceNewActiveSuggestionToScreenReader() {\n    const ariaLabel = this.suggestionManager.activeDescendantElement?.ariaLabel;\n    if (isMacOS() && ariaLabel) {\n      this.suggestionsAriaMessage = ariaLabel;\n    }\n  }\n\n  private announceNewSuggestionsToScreenReader() {\n    const numberOfSuggestionsToAnnounce =\n      this.suggestionManager.allSuggestionElements.filter(\n        elementHasQuery\n      ).length;\n    this.searchBoxAriaMessage = numberOfSuggestionsToAnnounce\n      ? this.bindings.i18n.t(\n          this.searchBoxState.value\n            ? 'query-suggestions-available'\n            : 'query-suggestions-available-no-query',\n          {\n            count: numberOfSuggestionsToAnnounce,\n            query: this.searchBoxState.value,\n          }\n        )\n      : this.bindings.i18n.t('query-suggestions-unavailable');\n  }\n\n  public render() {\n    return (\n      <SearchBoxWrapper\n        disabled={this.disableSearch}\n        onFocusout={(event) => {\n          if (!isFocusingOut(event)) {\n            return;\n          }\n          this.suggestionManager.clearSuggestions();\n          this.isExpanded = false;\n        }}\n      >\n        <atomic-icon\n          part=\"submit-icon\"\n          icon={SearchSlimIcon}\n          class=\"my-auto mr-0 ml-4 h-4 w-4\"\n        />\n        <SearchTextArea\n          textAreaRef={this.textAreaRef}\n          loading={this.searchBoxState.isLoading}\n          ref={(el) => el && (this.textAreaRef = el)}\n          bindings={this.bindings}\n          value={this.searchBoxState.value}\n          ariaLabel={this.getSearchInputLabel()}\n          placeholder={this.bindings.i18n.t('search-ellipsis')}\n          onFocus={() => this.onFocus()}\n          onKeyDown={(e) => this.onKeyDown(e)}\n          onClear={() => {\n            this.searchBox.clear();\n            this.triggerTextAreaChange('');\n          }}\n          onInput={(e) => this.onInput((e.target as HTMLInputElement).value)}\n        />\n        {this.renderSuggestions()}\n      </SearchBoxWrapper>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/atomic/p-64dfda2d.js

@@ -0,0 +1,2 @@
+import{s}from"./p-defc2481.js";import{h as t}from"./p-dc3df5ce.js";import{B as e}from"./p-1a093634.js";function o(t,e,o,a){let c=t.state.facetSearch;t.subscribe((()=>{if(s(t.state.facetSearch,c)&&t.state.facetSearch.query){c=t.state.facetSearch;o(a.t("facet-search-results-count",{count:t.state.facetSearch.values.length,label:e}))}}))}const a=`<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m64 208h384v96h-384z"/></svg>`;const c=`<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">\n  <path d="M496 208H304V16h-96v192H16v96h192v192h96V304h192"/>\n</svg>\n`;const n=s=>{const o=s.i18n.t(s.label);const n=s.i18n.t("show-more");const l=s.i18n.t("show-more-facet-values",{label:o});const r=s.i18n.t("show-less");const i=s.i18n.t("show-less-facet-values",{label:o});const m="flex items-baseline text-left p-2 text-sm max-w-full";const h="w-2 h-2 mr-1";if(!s.canShowLessValues&&!s.canShowMoreValues){return}return t("div",{class:"mt-2"},t(e,{style:"text-primary",part:"show-less",class:`${m} ${s.canShowLessValues?"":"hidden"}`,ariaLabel:i,onClick:()=>s.onShowLess(),ref:s.showLessRef},t("atomic-icon",{part:"show-more-less-icon",class:h,icon:a}),t("span",{class:"truncate"},r)),t(e,{style:"text-primary",part:"show-more",class:`${m} ${s.canShowMoreValues?"":"hidden"}`,ariaLabel:l,onClick:()=>s.onShowMore(),ref:s.showMoreRef},t("atomic-icon",{part:"show-more-less-icon",class:h,icon:c}),t("span",{class:"truncate"},n)))};export{n as F,o as a};
+//# sourceMappingURL=p-64dfda2d.js.map

package/dist/atomic/p-64dfda2d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["announceFacetSearchResultsWithAriaLive","facet","label","setAriaLive","i18n","prevState","state","facetSearch","subscribe","shouldUpdateFacetSearchComponent","query","t","count","values","length","FacetShowMoreLess","props","showMore","showMoreFacetValues","showLess","showLessFacetValues","btnClasses","iconClasses","canShowLessValues","canShowMoreValues","h","class","Button","style","part","ariaLabel","onClick","onShowLess","ref","showLessRef","icon","MinusIcon","onShowMore","showMoreRef","PlusIcon"],"sources":["src/components/common/facets/facet-search/facet-search-aria-live.ts","src/components/common/facets/facet-show-more-less/stencil-facet-show-more-less.tsx"],"sourcesContent":["import type {Facet, FacetSearchState} from '@coveo/headless';\nimport type {i18n} from 'i18next';\nimport {shouldUpdateFacetSearchComponent} from './facet-search-utils';\n\nexport function announceFacetSearchResultsWithAriaLive(\n  facet: Pick<Facet, 'subscribe'> & {state: {facetSearch: FacetSearchState}},\n  label: string,\n  setAriaLive: (msg: string) => void,\n  i18n: i18n\n) {\n  let prevState = facet.state.facetSearch;\n  facet.subscribe(() => {\n    if (\n      shouldUpdateFacetSearchComponent(facet.state.facetSearch, prevState) &&\n      facet.state.facetSearch.query\n    ) {\n      prevState = facet.state.facetSearch;\n\n      setAriaLive(\n        i18n.t('facet-search-results-count', {\n          count: facet.state.facetSearch.values.length,\n          label,\n        })\n      );\n    }\n  });\n}\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport MinusIcon from '../../../../images/minus.svg';\nimport PlusIcon from '../../../../images/plus.svg';\nimport {Button} from '../../stencil-button';\n\ninterface FacetShowMoreProps {\n  label: string;\n  i18n: i18n;\n  canShowLessValues: boolean;\n  canShowMoreValues: boolean;\n  onShowMore(): void;\n  onShowLess(): void;\n  showMoreRef?: (element?: HTMLButtonElement) => void;\n  showLessRef?: (element?: HTMLButtonElement) => void;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const FacetShowMoreLess: FunctionalComponent<FacetShowMoreProps> = (\n  props\n) => {\n  const label = props.i18n.t(props.label);\n  const showMore = props.i18n.t('show-more');\n  const showMoreFacetValues = props.i18n.t('show-more-facet-values', {\n    label,\n  });\n  const showLess = props.i18n.t('show-less');\n  const showLessFacetValues = props.i18n.t('show-less-facet-values', {\n    label,\n  });\n  const btnClasses = 'flex items-baseline text-left p-2 text-sm max-w-full';\n  const iconClasses = 'w-2 h-2 mr-1';\n  if (!props.canShowLessValues && !props.canShowMoreValues) {\n    return;\n  }\n\n  return (\n    <div class=\"mt-2\">\n      <Button\n        style=\"text-primary\"\n        part=\"show-less\"\n        class={`${btnClasses} ${props.canShowLessValues ? '' : 'hidden'}`}\n        ariaLabel={showLessFacetValues}\n        onClick={() => props.onShowLess()}\n        ref={props.showLessRef}\n      >\n        <atomic-icon\n          part=\"show-more-less-icon\"\n          class={iconClasses}\n          icon={MinusIcon}\n        ></atomic-icon>\n        <span class=\"truncate\">{showLess}</span>\n      </Button>\n      <Button\n        style=\"text-primary\"\n        part=\"show-more\"\n        class={`${btnClasses} ${props.canShowMoreValues ? '' : 'hidden'}`}\n        ariaLabel={showMoreFacetValues}\n        onClick={() => props.onShowMore()}\n        ref={props.showMoreRef}\n      >\n        <atomic-icon\n          part=\"show-more-less-icon\"\n          class={iconClasses}\n          icon={PlusIcon}\n        ></atomic-icon>\n        <span class=\"truncate\">{showMore}</span>\n      </Button>\n    </div>\n  );\n};\n"],"mappings":"gHAIgBA,EACdC,EACAC,EACAC,EACAC,GAEA,IAAIC,EAAYJ,EAAMK,MAAMC,YAC5BN,EAAMO,WAAU,KACd,GACEC,EAAiCR,EAAMK,MAAMC,YAAaF,IAC1DJ,EAAMK,MAAMC,YAAYG,MACxB,CACAL,EAAYJ,EAAMK,MAAMC,YAExBJ,EACEC,EAAKO,EAAE,6BAA8B,CACnCC,MAAOX,EAAMK,MAAMC,YAAYM,OAAOC,OACtCZ,U,IAKV,C,wQCNaa,EACXC,IAEA,MAAMd,EAAQc,EAAMZ,KAAKO,EAAEK,EAAMd,OACjC,MAAMe,EAAWD,EAAMZ,KAAKO,EAAE,aAC9B,MAAMO,EAAsBF,EAAMZ,KAAKO,EAAE,yBAA0B,CACjET,UAEF,MAAMiB,EAAWH,EAAMZ,KAAKO,EAAE,aAC9B,MAAMS,EAAsBJ,EAAMZ,KAAKO,EAAE,yBAA0B,CACjET,UAEF,MAAMmB,EAAa,uDACnB,MAAMC,EAAc,eACpB,IAAKN,EAAMO,oBAAsBP,EAAMQ,kBAAmB,CACxD,M,CAGF,OACEC,EAAA,OAAKC,MAAM,QACTD,EAACE,EAAM,CACLC,MAAM,eACNC,KAAK,YACLH,MAAO,GAAGL,KAAcL,EAAMO,kBAAoB,GAAK,WACvDO,UAAWV,EACXW,QAAS,IAAMf,EAAMgB,aACrBC,IAAKjB,EAAMkB,aAEXT,EAAA,eACEI,KAAK,sBACLH,MAAOJ,EACPa,KAAMC,IAERX,EAAA,QAAMC,MAAM,YAAYP,IAE1BM,EAACE,EAAM,CACLC,MAAM,eACNC,KAAK,YACLH,MAAO,GAAGL,KAAcL,EAAMQ,kBAAoB,GAAK,WACvDM,UAAWZ,EACXa,QAAS,IAAMf,EAAMqB,aACrBJ,IAAKjB,EAAMsB,aAEXb,EAAA,eACEI,KAAK,sBACLH,MAAOJ,EACPa,KAAMI,IAERd,EAAA,QAAMC,MAAM,YAAYT,IAEtB,S","ignoreList":[]}

package/dist/atomic/p-67f62282.entry.js

@@ -0,0 +1,2 @@
+import{r as n,h as r,g as t}from"./p-dc3df5ce.js";import{Schema as e,NumberValue as i}from"@coveo/bueno";import{buildInteractiveResult as a}from"@coveo/headless";import{A as o}from"./p-cfa9c12b.js";import{I as l}from"./p-ff2d324d.js";import{F as s}from"./p-0580b866.js";import{p as c}from"./p-f537c5af.js";import{g as d}from"./p-b309aadd.js";import{L as w}from"./p-1b11f219.js";import{R as m}from"./p-4080f740.js";import"./p-c9074946.js";import"./p-1580513b.js";import"./p-05de7ca3.js";import"./p-cae02339.js";import"./p-f284897c.js";import"./p-0462f723.js";import"./p-1891bbcf.js";import"./p-71d4c437.js";import"./p-3dc06261.js";const p='/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer properties {\n  *, :before, :after, ::backdrop {\n    --tw-translate-x: 0;\n    --tw-translate-y: 0;\n    --tw-translate-z: 0;\n    --tw-scale-x: 1;\n    --tw-scale-y: 1;\n    --tw-scale-z: 1;\n    --tw-rotate-x: initial;\n    --tw-rotate-y: initial;\n    --tw-rotate-z: initial;\n    --tw-skew-x: initial;\n    --tw-skew-y: initial;\n    --tw-space-x-reverse: 0;\n    --tw-divide-y-reverse: 0;\n    --tw-border-style: solid;\n    --tw-gradient-position: initial;\n    --tw-gradient-from: #0000;\n    --tw-gradient-via: #0000;\n    --tw-gradient-to: #0000;\n    --tw-gradient-stops: initial;\n    --tw-gradient-via-stops: initial;\n    --tw-gradient-from-position: 0%;\n    --tw-gradient-via-position: 50%;\n    --tw-gradient-to-position: 100%;\n    --tw-leading: initial;\n    --tw-font-weight: initial;\n    --tw-shadow: 0 0 #0000;\n    --tw-shadow-color: initial;\n    --tw-shadow-alpha: 100%;\n    --tw-inset-shadow: 0 0 #0000;\n    --tw-inset-shadow-color: initial;\n    --tw-inset-shadow-alpha: 100%;\n    --tw-ring-color: initial;\n    --tw-ring-shadow: 0 0 #0000;\n    --tw-inset-ring-color: initial;\n    --tw-inset-ring-shadow: 0 0 #0000;\n    --tw-ring-inset: initial;\n    --tw-ring-offset-width: 0px;\n    --tw-ring-offset-color: #fff;\n    --tw-ring-offset-shadow: 0 0 #0000;\n    --tw-outline-style: solid;\n    --tw-blur: initial;\n    --tw-brightness: initial;\n    --tw-contrast: initial;\n    --tw-grayscale: initial;\n    --tw-hue-rotate: initial;\n    --tw-invert: initial;\n    --tw-opacity: initial;\n    --tw-saturate: initial;\n    --tw-sepia: initial;\n    --tw-drop-shadow: initial;\n    --tw-drop-shadow-color: initial;\n    --tw-drop-shadow-alpha: 100%;\n    --tw-drop-shadow-size: initial;\n    --tw-duration: initial;\n    --tw-ease: initial;\n    --tw-content: "";\n  }\n}\n@layer theme, base, components, utilities;\n@layer theme;\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, var(--atomic-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n    "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n    }\n    @supports (color: color-mix(in lab, red, red)) {\n      ::placeholder {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden="until-found"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .\\@container {\n    container-type: inline-size;\n  }\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .collapse {\n    visibility: collapse;\n  }\n  .invisible {\n    visibility: hidden;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border-width: 0;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .sticky {\n    position: sticky;\n  }\n  .inset-0 {\n    inset: calc(0.25rem * 0);\n  }\n  .-top-2 {\n    top: calc(0.25rem * -2);\n  }\n  .-top-4 {\n    top: calc(0.25rem * -4);\n  }\n  .top-0 {\n    top: calc(0.25rem * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-6 {\n    top: calc(0.25rem * 6);\n  }\n  .top-\\[4px\\] {\n    top: 4px;\n  }\n  .top-full {\n    top: 100%;\n  }\n  .top-px {\n    top: 1px;\n  }\n  .-right-2 {\n    right: calc(0.25rem * -2);\n  }\n  .right-0 {\n    right: calc(0.25rem * 0);\n  }\n  .right-2 {\n    right: calc(0.25rem * 2);\n  }\n  .right-6 {\n    right: calc(0.25rem * 6);\n  }\n  .right-12 {\n    right: calc(0.25rem * 12);\n  }\n  .right-20 {\n    right: calc(0.25rem * 20);\n  }\n  .right-px {\n    right: 1px;\n  }\n  .bottom-0 {\n    bottom: calc(0.25rem * 0);\n  }\n  .bottom-1 {\n    bottom: calc(0.25rem * 1);\n  }\n  .bottom-2 {\n    bottom: calc(0.25rem * 2);\n  }\n  .bottom-px {\n    bottom: 1px;\n  }\n  .left-0 {\n    left: calc(0.25rem * 0);\n  }\n  .left-1 {\n    left: calc(0.25rem * 1);\n  }\n  .left-2 {\n    left: calc(0.25rem * 2);\n  }\n  .left-\\[15px\\] {\n    left: 15px;\n  }\n  .isolate {\n    isolation: isolate;\n  }\n  .z-0 {\n    z-index: 0;\n  }\n  .z-1 {\n    z-index: 1;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-9998 {\n    z-index: 9998;\n  }\n  .z-9999 {\n    z-index: 9999;\n  }\n  .order-last {\n    order: 9999;\n  }\n  .col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .container {\n    width: 100%;\n  }\n  @media (width >= 1024px) {\n    .container {\n      max-width: 1024px;\n    }\n  }\n  @media (width >= 40rem) {\n    .container {\n      max-width: 40rem;\n    }\n  }\n  @media (width >= 48rem) {\n    .container {\n      max-width: 48rem;\n    }\n  }\n  @media (width >= 64rem) {\n    .container {\n      max-width: 64rem;\n    }\n  }\n  @media (width >= 80rem) {\n    .container {\n      max-width: 80rem;\n    }\n  }\n  @media (width >= 96rem) {\n    .container {\n      max-width: 96rem;\n    }\n  }\n  .m-0 {\n    margin: calc(0.25rem * 0);\n  }\n  .m-2 {\n    margin: calc(0.25rem * 2);\n  }\n  .mx-0 {\n    margin-inline: calc(0.25rem * 0);\n  }\n  .mx-0\\.5 {\n    margin-inline: calc(0.25rem * 0.5);\n  }\n  .mx-1 {\n    margin-inline: calc(0.25rem * 1);\n  }\n  .mx-6 {\n    margin-inline: calc(0.25rem * 6);\n  }\n  .mx-16 {\n    margin-inline: calc(0.25rem * 16);\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .my-2 {\n    margin-block: calc(0.25rem * 2);\n  }\n  .my-3 {\n    margin-block: calc(0.25rem * 3);\n  }\n  .my-4 {\n    margin-block: calc(0.25rem * 4);\n  }\n  .my-6 {\n    margin-block: calc(0.25rem * 6);\n  }\n  .my-auto {\n    margin-block: auto;\n  }\n  .mt-0 {\n    margin-top: calc(0.25rem * 0);\n  }\n  .mt-1 {\n    margin-top: calc(0.25rem * 1);\n  }\n  .mt-1\\.5 {\n    margin-top: calc(0.25rem * 1.5);\n  }\n  .mt-2 {\n    margin-top: calc(0.25rem * 2);\n  }\n  .mt-2\\.5 {\n    margin-top: calc(0.25rem * 2.5);\n  }\n  .mt-3 {\n    margin-top: calc(0.25rem * 3);\n  }\n  .mt-4 {\n    margin-top: calc(0.25rem * 4);\n  }\n  .mt-6 {\n    margin-top: calc(0.25rem * 6);\n  }\n  .mt-7 {\n    margin-top: calc(0.25rem * 7);\n  }\n  .mt-8 {\n    margin-top: calc(0.25rem * 8);\n  }\n  .mt-10 {\n    margin-top: calc(0.25rem * 10);\n  }\n  .mt-px {\n    margin-top: 1px;\n  }\n  .mr-0 {\n    margin-right: calc(0.25rem * 0);\n  }\n  .mr-0\\.5 {\n    margin-right: calc(0.25rem * 0.5);\n  }\n  .mr-1 {\n    margin-right: calc(0.25rem * 1);\n  }\n  .mr-1\\.5 {\n    margin-right: calc(0.25rem * 1.5);\n  }\n  .mr-2 {\n    margin-right: calc(0.25rem * 2);\n  }\n  .mr-3 {\n    margin-right: calc(0.25rem * 3);\n  }\n  .mr-6 {\n    margin-right: calc(0.25rem * 6);\n  }\n  .mb-0 {\n    margin-bottom: calc(0.25rem * 0);\n  }\n  .mb-1 {\n    margin-bottom: calc(0.25rem * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(0.25rem * 2);\n  }\n  .mb-3 {\n    margin-bottom: calc(0.25rem * 3);\n  }\n  .mb-4 {\n    margin-bottom: calc(0.25rem * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(0.25rem * 6);\n  }\n  .ml-0\\.5 {\n    margin-left: calc(0.25rem * 0.5);\n  }\n  .ml-1 {\n    margin-left: calc(0.25rem * 1);\n  }\n  .ml-2 {\n    margin-left: calc(0.25rem * 2);\n  }\n  .ml-4 {\n    margin-left: calc(0.25rem * 4);\n  }\n  .ml-6 {\n    margin-left: calc(0.25rem * 6);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .box-border {\n    box-sizing: border-box;\n  }\n  .box-content {\n    box-sizing: content-box;\n  }\n  .line-clamp-1 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n  }\n  .line-clamp-2 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n  }\n  .line-clamp-3 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n  }\n  .line-clamp-4 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 4;\n  }\n  .line-clamp-none {\n    overflow: visible;\n    display: block;\n    -webkit-box-orient: horizontal;\n    -webkit-line-clamp: unset;\n  }\n  .block {\n    display: block;\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .table {\n    display: table;\n  }\n  .aspect-square-\\[auto\\] {\n    aspect-ratio: 1 / 1;\n    height: auto;\n  }\n  @supports not (aspect-ratio: 1 / 1) {\n    .aspect-square-\\[auto\\] {\n      height: auto;\n    }\n  }\n  .aspect-square-\\[auto\\] {\n    aspect-ratio: 1 / 1;\n    height: auto;\n  }\n  @supports not (aspect-ratio: 1 / 1) {\n    .aspect-square-\\[auto\\] {\n      height: auto;\n    }\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .size-\\[27px\\] {\n    width: 27px;\n    height: 27px;\n  }\n  .h-1 {\n    height: calc(0.25rem * 1);\n  }\n  .h-2 {\n    height: calc(0.25rem * 2);\n  }\n  .h-2\\.5 {\n    height: calc(0.25rem * 2.5);\n  }\n  .h-3 {\n    height: calc(0.25rem * 3);\n  }\n  .h-4 {\n    height: calc(0.25rem * 4);\n  }\n  .h-5 {\n    height: calc(0.25rem * 5);\n  }\n  .h-5\\/6 {\n    height: calc(5/6 * 100%);\n  }\n  .h-6 {\n    height: calc(0.25rem * 6);\n  }\n  .h-7 {\n    height: calc(0.25rem * 7);\n  }\n  .h-8 {\n    height: calc(0.25rem * 8);\n  }\n  .h-9 {\n    height: calc(0.25rem * 9);\n  }\n  .h-10 {\n    height: calc(0.25rem * 10);\n  }\n  .h-12 {\n    height: calc(0.25rem * 12);\n  }\n  .h-\\[2\\.6rem\\] {\n    height: 2.6rem;\n  }\n  .h-\\[9px\\] {\n    height: 9px;\n  }\n  .h-auto {\n    height: auto;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-96 {\n    max-height: calc(0.25rem * 96);\n  }\n  .min-h-10 {\n    min-height: calc(0.25rem * 10);\n  }\n  .min-lines-2 {\n    min-height: calc(var(--line-height) * 2);\n  }\n  .min-lines-2 {\n    min-height: calc(var(--line-height) * 2);\n  }\n  .min-lines-3 {\n    min-height: calc(var(--line-height) * 3);\n  }\n  .min-lines-3 {\n    min-height: calc(var(--line-height) * 3);\n  }\n  .w-0\\.5 {\n    width: calc(0.25rem * 0.5);\n  }\n  .w-1 {\n    width: calc(0.25rem * 1);\n  }\n  .w-1\\/2 {\n    width: calc(1/2 * 100%);\n  }\n  .w-2 {\n    width: calc(0.25rem * 2);\n  }\n  .w-2\\.5 {\n    width: calc(0.25rem * 2.5);\n  }\n  .w-3 {\n    width: calc(0.25rem * 3);\n  }\n  .w-3\\.5 {\n    width: calc(0.25rem * 3.5);\n  }\n  .w-3\\/5 {\n    width: calc(3/5 * 100%);\n  }\n  .w-4 {\n    width: calc(0.25rem * 4);\n  }\n  .w-5 {\n    width: calc(0.25rem * 5);\n  }\n  .w-5\\/6 {\n    width: calc(5/6 * 100%);\n  }\n  .w-6 {\n    width: calc(0.25rem * 6);\n  }\n  .w-7 {\n    width: calc(0.25rem * 7);\n  }\n  .w-8 {\n    width: calc(0.25rem * 8);\n  }\n  .w-9 {\n    width: calc(0.25rem * 9);\n  }\n  .w-10 {\n    width: calc(0.25rem * 10);\n  }\n  .w-12 {\n    width: calc(0.25rem * 12);\n  }\n  .w-20 {\n    width: calc(0.25rem * 20);\n  }\n  .w-26 {\n    width: calc(0.25rem * 26);\n  }\n  .w-28 {\n    width: calc(0.25rem * 28);\n  }\n  .w-32 {\n    width: calc(0.25rem * 32);\n  }\n  .w-36 {\n    width: calc(0.25rem * 36);\n  }\n  .w-44 {\n    width: calc(0.25rem * 44);\n  }\n  .w-48 {\n    width: calc(0.25rem * 48);\n  }\n  .w-60 {\n    width: calc(0.25rem * 60);\n  }\n  .w-64 {\n    width: calc(0.25rem * 64);\n  }\n  .w-72 {\n    width: calc(0.25rem * 72);\n  }\n  .w-100 {\n    width: calc(0.25rem * 100);\n  }\n  .w-\\[2\\.6rem\\] {\n    width: 2.6rem;\n  }\n  .w-auto {\n    width: auto;\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .w-max {\n    width: max-content;\n  }\n  .max-w-4\\/5 {\n    max-width: calc(4/5 * 100%);\n  }\n  .max-w-60 {\n    max-width: calc(0.25rem * 60);\n  }\n  .max-w-\\[30ch\\] {\n    max-width: 30ch;\n  }\n  .max-w-full {\n    max-width: 100%;\n  }\n  .max-w-lg {\n    max-width: 32rem;\n  }\n  .max-w-max {\n    max-width: max-content;\n  }\n  .min-w-0 {\n    min-width: calc(0.25rem * 0);\n  }\n  .min-w-10 {\n    min-width: calc(0.25rem * 10);\n  }\n  .min-w-20 {\n    min-width: calc(0.25rem * 20);\n  }\n  .min-w-24 {\n    min-width: calc(0.25rem * 24);\n  }\n  .min-w-full {\n    min-width: 100%;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-none {\n    flex: none;\n  }\n  .flex-shrink {\n    flex-shrink: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .flex-grow {\n    flex-grow: 1;\n  }\n  .grow {\n    flex-grow: 1;\n  }\n  .basis-1\\/2 {\n    flex-basis: calc(1/2 * 100%);\n  }\n  .basis-8 {\n    flex-basis: calc(0.25rem * 8);\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-1\\/2 {\n    --tw-translate-x: calc(1/2 * 100%);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-75 {\n    --tw-scale-x: 75%;\n    --tw-scale-y: 75%;\n    --tw-scale-z: 75%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-100 {\n    --tw-scale-x: 100%;\n    --tw-scale-y: 100%;\n    --tw-scale-z: 100%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-pulse {\n    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n  .animate-spin {\n    animation: spin 1s linear infinite;\n  }\n  .cursor-\\[inherit\\] {\n    cursor: inherit;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .resize-none {\n    resize: none;\n  }\n  .list-outside {\n    list-style-position: outside;\n  }\n  .list-decimal {\n    list-style-type: decimal;\n  }\n  .list-disc {\n    list-style-type: disc;\n  }\n  .list-none {\n    list-style-type: none;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-\\[min-content_1fr\\] {\n    grid-template-columns: min-content 1fr;\n  }\n  .grid-cols-\\[min-content_auto\\] {\n    grid-template-columns: min-content auto;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-nowrap {\n    flex-wrap: nowrap;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .place-items-center {\n    place-items: center;\n  }\n  .content-center {\n    align-content: center;\n  }\n  .items-baseline {\n    align-items: baseline;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .gap-0\\.5 {\n    gap: calc(0.25rem * 0.5);\n  }\n  .gap-1 {\n    gap: calc(0.25rem * 1);\n  }\n  .gap-2 {\n    gap: calc(0.25rem * 2);\n  }\n  .gap-3 {\n    gap: calc(0.25rem * 3);\n  }\n  .gap-4 {\n    gap: calc(0.25rem * 4);\n  }\n  .gap-8 {\n    gap: calc(0.25rem * 8);\n  }\n  :where(.space-y-1 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(0.25rem * 1) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(0.25rem * 1) * calc(1 - var(--tw-space-y-reverse)));\n  }\n  .gap-x-1\\.5 {\n    column-gap: calc(0.25rem * 1.5);\n  }\n  .gap-x-2 {\n    column-gap: calc(0.25rem * 2);\n  }\n  .gap-x-4 {\n    column-gap: calc(0.25rem * 4);\n  }\n  :where(.space-x-1\\.5 > :not(:last-child)) {\n    --tw-space-x-reverse: 0;\n    margin-inline-start: calc(calc(0.25rem * 1.5) * var(--tw-space-x-reverse));\n    margin-inline-end: calc(calc(0.25rem * 1.5) * calc(1 - var(--tw-space-x-reverse)));\n  }\n  .gap-y-0\\.5 {\n    row-gap: calc(0.25rem * 0.5);\n  }\n  :where(.divide-y > :not(:last-child)) {\n    --tw-divide-y-reverse: 0;\n    border-bottom-style: var(--tw-border-style);\n    border-top-style: var(--tw-border-style);\n    border-top-width: calc(1px * var(--tw-divide-y-reverse));\n    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  }\n  :where(.divide-neutral > :not(:last-child)) {\n    border-color: var(--atomic-neutral);\n  }\n  .self-center {\n    align-self: center;\n  }\n  .self-start {\n    align-self: flex-start;\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .overflow-auto {\n    overflow: auto;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-auto {\n    overflow-x: auto;\n  }\n  .overflow-x-clip {\n    overflow-x: clip;\n  }\n  .overflow-x-scroll {\n    overflow-x: scroll;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .overflow-y-visible {\n    overflow-y: visible;\n  }\n  .scroll-smooth {\n    scroll-behavior: smooth;\n  }\n  .rounded {\n    border-radius: var(--atomic-border-radius);\n  }\n  .rounded-3xl {\n    border-radius: 1.5rem;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--atomic-border-radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--atomic-border-radius-md);\n  }\n  .rounded-none {\n    border-radius: 0;\n  }\n  .rounded-sm {\n    border-radius: var(--atomic-border-radius);\n  }\n  .rounded-xl {\n    border-radius: var(--atomic-border-radius-xl);\n  }\n  .rounded-tl-none {\n    border-top-left-radius: 0;\n  }\n  .rounded-r-none {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-gray-200 {\n    border-color: oklch(0.928 0.006 264.531);\n  }\n  .border-neutral {\n    border-color: var(--atomic-neutral);\n  }\n  .border-neutral-dark {\n    border-color: var(--atomic-neutral-dark);\n  }\n  .border-neutral-dim {\n    border-color: var(--atomic-neutral-dim);\n  }\n  .border-primary {\n    border-color: var(--atomic-primary);\n  }\n  .border-primary-light {\n    border-color: var(--atomic-primary-light);\n  }\n  .border-t-neutral {\n    border-top-color: var(--atomic-neutral);\n  }\n  .border-b-neutral {\n    border-bottom-color: var(--atomic-neutral);\n  }\n  .border-b-neutral-dim {\n    border-bottom-color: var(--atomic-neutral-dim);\n  }\n  .border-l-neutral {\n    border-left-color: var(--atomic-neutral);\n  }\n  .border-l-neutral-dim {\n    border-left-color: var(--atomic-neutral-dim);\n  }\n  .bg-\\[\\#F1F2FF\\] {\n    background-color: #F1F2FF;\n  }\n  .bg-\\[rgba\\(40\\,40\\,40\\,0\\.8\\)\\] {\n    background-color: rgba(40,40,40,0.8);\n  }\n  .bg-background {\n    background-color: var(--atomic-background);\n  }\n  .bg-error {\n    background-color: var(--atomic-error);\n  }\n  .bg-gray-50 {\n    background-color: oklch(0.985 0.002 247.839);\n  }\n  .bg-neutral {\n    background-color: var(--atomic-neutral);\n  }\n  .bg-neutral-dark {\n    background-color: var(--atomic-neutral-dark);\n  }\n  .bg-neutral-light {\n    background-color: var(--atomic-neutral-light);\n  }\n  .bg-primary {\n    background-color: var(--atomic-primary);\n  }\n  .bg-primary-background {\n    background-color: var(--atomic-primary-background);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: #fff;\n  }\n  .bg-linear-to-l {\n    --tw-gradient-position: to left;\n  }\n  @supports (background-image: linear-gradient(in lab, red, red)) {\n    .bg-linear-to-l {\n      --tw-gradient-position: to left in oklab;\n    }\n  }\n  .bg-linear-to-l {\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .bg-linear-to-r {\n    --tw-gradient-position: to right;\n  }\n  @supports (background-image: linear-gradient(in lab, red, red)) {\n    .bg-linear-to-r {\n      --tw-gradient-position: to right in oklab;\n    }\n  }\n  .bg-linear-to-r {\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-background\\/60 {\n    --tw-gradient-from: color-mix(in srgb, #ffffff 60%, transparent);\n  }\n  @supports (color: color-mix(in lab, red, red)) {\n    .from-background\\/60 {\n      --tw-gradient-from: color-mix(in oklab, var(--atomic-background) 60%, transparent);\n    }\n  }\n  .from-background\\/60 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .from-more-results-progress-bar-color-from {\n    --tw-gradient-from: var(\n    --atomic-more-results-progress-bar-color-from,\n    var(--atomic-primary-dark)\n  );\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .to-more-results-progress-bar-color-to {\n    --tw-gradient-to: var(\n    --atomic-more-results-progress-bar-color-to,\n    var(--atomic-primary-light)\n  );\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .fill-current {\n    fill: currentcolor;\n  }\n  .stroke-\\[1\\.25\\] {\n    stroke-width: 1.25;\n  }\n  .object-contain {\n    object-fit: contain;\n  }\n  .p-0 {\n    padding: calc(0.25rem * 0);\n  }\n  .p-1 {\n    padding: calc(0.25rem * 1);\n  }\n  .p-2 {\n    padding: calc(0.25rem * 2);\n  }\n  .p-2\\.5 {\n    padding: calc(0.25rem * 2.5);\n  }\n  .p-3 {\n    padding: calc(0.25rem * 3);\n  }\n  .p-3\\.5 {\n    padding: calc(0.25rem * 3.5);\n  }\n  .p-4 {\n    padding: calc(0.25rem * 4);\n  }\n  .p-6 {\n    padding: calc(0.25rem * 6);\n  }\n  .p-7 {\n    padding: calc(0.25rem * 7);\n  }\n  .p-8 {\n    padding: calc(0.25rem * 8);\n  }\n  .px-1 {\n    padding-inline: calc(0.25rem * 1);\n  }\n  .px-2 {\n    padding-inline: calc(0.25rem * 2);\n  }\n  .px-2\\.5 {\n    padding-inline: calc(0.25rem * 2.5);\n  }\n  .px-3 {\n    padding-inline: calc(0.25rem * 3);\n  }\n  .px-4 {\n    padding-inline: calc(0.25rem * 4);\n  }\n  .px-6 {\n    padding-inline: calc(0.25rem * 6);\n  }\n  .px-9 {\n    padding-inline: calc(0.25rem * 9);\n  }\n  .py-0\\.5 {\n    padding-block: calc(0.25rem * 0.5);\n  }\n  .py-1 {\n    padding-block: calc(0.25rem * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(0.25rem * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(0.25rem * 2);\n  }\n  .py-2\\.5 {\n    padding-block: calc(0.25rem * 2.5);\n  }\n  .py-3 {\n    padding-block: calc(0.25rem * 3);\n  }\n  .py-3\\.5 {\n    padding-block: calc(0.25rem * 3.5);\n  }\n  .py-4 {\n    padding-block: calc(0.25rem * 4);\n  }\n  .py-4\\.5 {\n    padding-block: calc(0.25rem * 4.5);\n  }\n  .py-5 {\n    padding-block: calc(0.25rem * 5);\n  }\n  .py-6 {\n    padding-block: calc(0.25rem * 6);\n  }\n  .pt-0\\.5 {\n    padding-top: calc(0.25rem * 0.5);\n  }\n  .pt-8 {\n    padding-top: calc(0.25rem * 8);\n  }\n  .pr-2 {\n    padding-right: calc(0.25rem * 2);\n  }\n  .pr-6 {\n    padding-right: calc(0.25rem * 6);\n  }\n  .pr-24 {\n    padding-right: calc(0.25rem * 24);\n  }\n  .pb-1 {\n    padding-bottom: calc(0.25rem * 1);\n  }\n  .pb-3 {\n    padding-bottom: calc(0.25rem * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(0.25rem * 4);\n  }\n  .pb-5 {\n    padding-bottom: calc(0.25rem * 5);\n  }\n  .pb-6 {\n    padding-bottom: calc(0.25rem * 6);\n  }\n  .pl-0 {\n    padding-left: calc(0.25rem * 0);\n  }\n  .pl-1 {\n    padding-left: calc(0.25rem * 1);\n  }\n  .pl-3 {\n    padding-left: calc(0.25rem * 3);\n  }\n  .pl-7 {\n    padding-left: calc(0.25rem * 7);\n  }\n  .pl-9 {\n    padding-left: calc(0.25rem * 9);\n  }\n  .pl-10 {\n    padding-left: calc(0.25rem * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .align-baseline {\n    vertical-align: baseline;\n  }\n  .align-bottom {\n    vertical-align: bottom;\n  }\n  .align-middle {\n    vertical-align: middle;\n  }\n  .font-sans {\n    font-family: var(--atomic-font-family);\n  }\n  .set-font-size-sm {\n    --font-size: var(--atomic-text-sm);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n  }\n  .set-font-size-sm {\n    --font-size: var(--atomic-text-sm);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n  }\n  .text-2xl {\n    font-size: var(--atomic-text-2xl);\n    line-height: var(--tw-leading, calc(2 / 1.5));\n  }\n  .text-base {\n    font-size: var(--atomic-text-base);\n    line-height: var(--tw-leading, calc(1.5 / 1));\n  }\n  .text-lg {\n    font-size: var(--atomic-text-lg);\n    line-height: var(--tw-leading, calc(1.75 / 1.125));\n  }\n  .text-sm {\n    font-size: var(--atomic-text-sm);\n    line-height: var(--tw-leading, calc(1.25 / 0.875));\n  }\n  .text-xl {\n    font-size: var(--atomic-text-xl);\n    line-height: var(--tw-leading, calc(1.75 / 1.25));\n  }\n  .text-xs {\n    font-size: 0.75rem;\n    line-height: var(--tw-leading, calc(1 / 0.75));\n  }\n  .text-xs\\/\\[1rem\\] {\n    font-size: 0.75rem;\n    line-height: 1rem;\n  }\n  .leading-4 {\n    --tw-leading: calc(0.25rem * 4);\n    line-height: calc(0.25rem * 4);\n  }\n  .leading-5 {\n    --tw-leading: calc(0.25rem * 5);\n    line-height: calc(0.25rem * 5);\n  }\n  .leading-6 {\n    --tw-leading: calc(0.25rem * 6);\n    line-height: calc(0.25rem * 6);\n  }\n  .leading-8 {\n    --tw-leading: calc(0.25rem * 8);\n    line-height: calc(0.25rem * 8);\n  }\n  .leading-10 {\n    --tw-leading: calc(0.25rem * 10);\n    line-height: calc(0.25rem * 10);\n  }\n  .leading-\\[1\\.5\\] {\n    --tw-leading: 1.5;\n    line-height: 1.5;\n  }\n  .leading-\\[calc\\(1\\/\\.75\\)\\] {\n    --tw-leading: calc(1 / .75);\n    line-height: calc(1 / .75);\n  }\n  .leading-\\[var\\(--line-height\\)\\] {\n    --tw-leading: var(--line-height);\n    line-height: var(--line-height);\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-bold {\n    --tw-font-weight: var(--atomic-font-bold);\n    font-weight: var(--atomic-font-bold);\n  }\n  .font-light {\n    --tw-font-weight: 300;\n    font-weight: 300;\n  }\n  .font-medium {\n    --tw-font-weight: 500;\n    font-weight: 500;\n  }\n  .font-normal {\n    --tw-font-weight: var(--atomic-font-normal);\n    font-weight: var(--atomic-font-normal);\n  }\n  .font-semibold {\n    --tw-font-weight: 600;\n    font-weight: 600;\n  }\n  .break-words {\n    overflow-wrap: break-word;\n  }\n  .break-all {\n    word-break: break-all;\n  }\n  .break-keep {\n    word-break: keep-all;\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .whitespace-normal {\n    white-space: normal;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .text-\\[\\#54698D\\] {\n    color: #54698D;\n  }\n  .text-\\[inherit\\] {\n    color: inherit;\n  }\n  .text-black {\n    color: #000;\n  }\n  .text-error {\n    color: var(--atomic-error);\n  }\n  .text-gray-500 {\n    color: oklch(0.551 0.027 264.364);\n  }\n  .text-gray-600 {\n    color: oklch(0.446 0.03 256.802);\n  }\n  .text-gray-700 {\n    color: oklch(0.373 0.034 259.733);\n  }\n  .text-gray-900 {\n    color: oklch(0.21 0.034 264.665);\n  }\n  .text-green-600 {\n    color: oklch(0.627 0.194 149.214);\n  }\n  .text-inline-code {\n    color: var(--atomic-inline-code);\n  }\n  .text-neutral {\n    color: var(--atomic-neutral);\n  }\n  .text-neutral-dark {\n    color: var(--atomic-neutral-dark);\n  }\n  .text-on-background {\n    color: var(--atomic-on-background);\n  }\n  .text-on-primary {\n    color: var(--atomic-on-primary);\n  }\n  .text-primary {\n    color: var(--atomic-primary);\n  }\n  .text-primary-light {\n    color: var(--atomic-primary-light);\n  }\n  .text-rating-icon-active {\n    color: var(--atomic-rating-icon-active-color, #f6ce3c);\n  }\n  .text-rating-icon-inactive {\n    color: var(\n    --atomic-rating-icon-inactive-color,\n    var(--atomic-neutral)\n  );\n  }\n  .text-success {\n    color: var(--atomic-success);\n  }\n  .text-transparent {\n    color: transparent;\n  }\n  .capitalize {\n    text-transform: capitalize;\n  }\n  .lowercase {\n    text-transform: lowercase;\n  }\n  .italic {\n    font-style: italic;\n  }\n  .line-through {\n    text-decoration-line: line-through;\n  }\n  .placeholder-neutral-dark::placeholder {\n    color: var(--atomic-neutral-dark);\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-80 {\n    opacity: 80%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-inner-primary {\n    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--atomic-primary));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-lg {\n    --tw-shadow: 0px 2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-t-lg {\n    --tw-shadow: 0px -2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-1 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-3 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-primary {\n    --tw-ring-color: var(--atomic-primary);\n  }\n  .ring-primary-light {\n    --tw-ring-color: var(--atomic-primary-light);\n  }\n  .ring-ring-primary {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .outline-error {\n    outline-color: var(--atomic-error);\n  }\n  .outline-neutral {\n    outline-color: var(--atomic-neutral);\n  }\n  .outline-primary {\n    outline-color: var(--atomic-primary);\n  }\n  .blur {\n    --tw-blur: blur(8px);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .grayscale {\n    --tw-grayscale: grayscale(100%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .invert {\n    --tw-invert: invert(100%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-\\[visibility\\] {\n    transition-property: visibility;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .duration-500 {\n    --tw-duration: 500ms;\n    transition-duration: 500ms;\n  }\n  .ease-in-out {\n    --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .\\[grid-area\\:modal\\] {\n    grid-area: modal;\n  }\n  .\\[scrollbar-gutter\\:stable_both-edges\\] {\n    scrollbar-gutter: stable both-edges;\n  }\n  @media (hover: hover) {\n    .group-hover\\:visible:is(:where(.group):hover *) {\n      visibility: visible;\n    }\n  }\n  @media (hover: hover) {\n    .group-hover\\:text-error:is(:where(.group):hover *) {\n      color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .group-hover\\:text-primary:is(:where(.group):hover *) {\n      color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .group-hover\\:text-primary-light:is(:where(.group):hover *) {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .group-focus\\:text-primary:is(:where(.group):focus *) {\n    color: var(--atomic-primary);\n  }\n  .group-focus\\:text-primary-light:is(:where(.group):focus *) {\n    color: var(--atomic-primary-light);\n  }\n  .group-focus-visible\\:text-error:is(:where(.group):focus-visible *) {\n    color: var(--atomic-error);\n  }\n  .group-focus-visible\\:text-primary:is(:where(.group):focus-visible *) {\n    color: var(--atomic-primary);\n  }\n  .peer-focus-within\\:border-primary-light:is(:where(.peer):focus-within ~ *) {\n    border-color: var(--atomic-primary-light);\n  }\n  .peer-focus-within\\:text-primary-light:is(:where(.peer):focus-within ~ *) {\n    color: var(--atomic-primary-light);\n  }\n  @media (hover: hover) {\n    .peer-hover\\:border-primary-light:is(:where(.peer):hover ~ *) {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .peer-hover\\:text-error:is(:where(.peer):hover ~ *) {\n      color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .peer-hover\\:text-primary-light:is(:where(.peer):hover ~ *) {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .before\\:inline::before {\n    content: var(--tw-content);\n    display: inline;\n  }\n  .before\\:content-\\[\\\'\\,\\\\00a0\\\'\\]::before {\n    --tw-content: \',\\00a0\';\n    content: var(--tw-content);\n  }\n  .after\\:absolute::after {\n    content: var(--tw-content);\n    position: absolute;\n  }\n  .after\\:-bottom-0\\.5::after {\n    content: var(--tw-content);\n    bottom: calc(0.25rem * -0.5);\n  }\n  .after\\:block::after {\n    content: var(--tw-content);\n    display: block;\n  }\n  .after\\:h-1::after {\n    content: var(--tw-content);\n    height: calc(0.25rem * 1);\n  }\n  .after\\:w-full::after {\n    content: var(--tw-content);\n    width: 100%;\n  }\n  .after\\:rounded::after {\n    content: var(--tw-content);\n    border-radius: var(--atomic-border-radius);\n  }\n  .after\\:bg-primary::after {\n    content: var(--tw-content);\n    background-color: var(--atomic-primary);\n  }\n  .focus-within\\:border-disabled:focus-within {\n    border-color: var(--atomic-disabled);\n  }\n  .focus-within\\:border-primary:focus-within {\n    border-color: var(--atomic-primary);\n  }\n  .focus-within\\:ring-3:focus-within {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .focus-within\\:ring-neutral:focus-within {\n    --tw-ring-color: var(--atomic-neutral);\n  }\n  .focus-within\\:ring-ring-primary:focus-within {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  @media (hover: hover) {\n    .hover\\:border:hover {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:border-error:hover {\n      border-color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:border-primary-light:hover {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-error:hover {\n      background-color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-neutral-light:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-primary-light:hover {\n      background-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-transparent:hover {\n      background-color: transparent;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:fill-white:hover {\n      fill: #fff;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:text-primary-light:hover {\n      color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:underline:hover {\n      text-decoration-line: underline;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:opacity-100:hover {\n      opacity: 100%;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:shadow-sm:hover {\n      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:opacity-100:focus {\n    opacity: 100%;\n  }\n  .focus\\:outline-hidden:focus {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  @media (forced-colors: active) {\n    .focus\\:outline-hidden:focus {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n  }\n  .focus-visible\\:border:focus-visible {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .focus-visible\\:border-error:focus-visible {\n    border-color: var(--atomic-error);\n  }\n  .focus-visible\\:border-primary:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .focus-visible\\:border-primary-light:focus-visible {\n    border-color: var(--atomic-primary-light);\n  }\n  .focus-visible\\:bg-error:focus-visible {\n    background-color: var(--atomic-error);\n  }\n  .focus-visible\\:bg-neutral-light:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .focus-visible\\:bg-primary-light:focus-visible {\n    background-color: var(--atomic-primary-light);\n  }\n  .focus-visible\\:text-primary-light:focus-visible {\n    color: var(--atomic-primary-light);\n  }\n  .focus-visible\\:underline:focus-visible {\n    text-decoration-line: underline;\n  }\n  .focus-visible\\:ring-2:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .focus-visible\\:outline-none:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  @media (width >= 40rem) {\n    .sm\\:px-6 {\n      padding-inline: calc(0.25rem * 6);\n    }\n  }\n  .\\[part\\=\\"breadcrumb-button\\"\\]\\:visible:is(part="breadcrumb-button") {\n    visibility: visible;\n  }\n}\n@layer theme, base, components, utilities;\n@layer components {\n  .input-primary {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n  }\n  @media (hover: hover) {\n    .input-primary:hover {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  .input-primary:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .input-primary:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .input-primary:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .input-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-radio {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n  }\n  .btn-radio::before {\n    --tw-content: attr(value);\n    content: var(--tw-content);\n  }\n  .btn-primary {\n    border-radius: var(--atomic-border-radius);\n    background-color: var(--atomic-primary);\n    color: var(--atomic-on-primary);\n  }\n  @media (hover: hover) {\n    .btn-primary:hover {\n      background-color: var(--atomic-primary-light);\n    }\n  }\n  .btn-primary:focus-visible {\n    background-color: var(--atomic-primary-light);\n  }\n  .btn-primary:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-primary:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-primary:disabled {\n    cursor: not-allowed;\n  }\n  .btn-primary:disabled {\n    background-color: var(--atomic-disabled);\n  }\n  .btn-outline-primary {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-primary);\n  }\n  @media (hover: hover) {\n    .btn-outline-primary:hover {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-primary:hover {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .btn-outline-primary:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-primary:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-primary:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-primary:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-primary:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-primary:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-primary:disabled {\n    color: var(--atomic-neutral);\n  }\n  .btn-text-primary {\n    border-radius: var(--atomic-border-radius);\n    background-color: var(--atomic-background);\n    color: var(--atomic-primary);\n  }\n  @media (hover: hover) {\n    .btn-text-primary:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  .btn-text-primary:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-text-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-neutral {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-neutral:hover {\n      border-color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-neutral:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-outline-neutral:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-neutral:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-neutral:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-neutral:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-neutral:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-neutral:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-neutral:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-neutral:disabled {\n    opacity: 50%;\n  }\n  .btn-outline-bg-neutral {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-neutral:hover {\n      border-color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-neutral:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-neutral:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-bg-neutral:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-bg-neutral:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-bg-neutral:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-bg-neutral:disabled {\n    opacity: 50%;\n  }\n  .btn-outline-bg-error {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-error:hover {\n      border-color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-error:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-error:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-outline-bg-error:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-bg-error:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-outline-bg-error:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-bg-error:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-bg-error:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-bg-error:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-bg-error:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-bg-error:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-bg-error:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-bg-error:disabled {\n    opacity: 50%;\n  }\n  .btn-outline-error {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-error:hover {\n      border-color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-error:hover {\n      color: var(--atomic-error);\n    }\n  }\n  .btn-outline-error:focus-visible {\n    border-color: var(--atomic-error);\n  }\n  .btn-outline-error:focus-visible {\n    color: var(--atomic-error);\n  }\n  .btn-outline-error:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-error:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-error:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-error:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-error:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-error:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-error:disabled {\n    opacity: 50%;\n  }\n  .btn-text-neutral {\n    border-radius: var(--atomic-border-radius);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-text-neutral:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-text-neutral:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-text-neutral:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-text-neutral:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-text-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-text-transparent {\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-text-transparent:hover {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .btn-text-transparent:focus-visible {\n    color: var(--atomic-primary-light);\n  }\n  .btn-square-neutral {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-square-neutral:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  .btn-square-neutral:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-square-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-page {\n    display: grid;\n    height: calc(0.25rem * 10);\n    width: calc(0.25rem * 10);\n    place-items: center;\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n    font-size: var(--atomic-text-lg);\n    line-height: var(--tw-leading, calc(1.75 / 1.125));\n  }\n  @media (hover: hover) {\n    .btn-page:hover {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n    }\n  }\n  .btn-page:focus-visible {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .btn-page.selected {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n    border-color: var(--atomic-primary);\n    --tw-font-weight: var(--atomic-font-bold);\n    font-weight: var(--atomic-font-bold);\n  }\n}\n@layer base {\n  :host {\n    display: block;\n  }\n  :host, button, input, select {\n    font-family: var(--atomic-font-family);\n    font-size: var(--atomic-text-base);\n    line-height: var(--tw-leading, calc(1.5 / 1));\n    --tw-font-weight: var(--atomic-font-normal);\n    font-weight: var(--atomic-font-normal);\n  }\n  button {\n    cursor: pointer;\n  }\n  :host(.atomic-hidden) {\n    display: none;\n  }\n  .ripple {\n    position: absolute;\n    pointer-events: none;\n    transform: scale(0);\n    border-radius: 50%;\n    animation: ripple var(--animation-duration) linear;\n  }\n  .ripple-relative {\n    position: relative;\n  }\n  .ripple-parent {\n    overflow: hidden;\n  }\n  @keyframes ripple {\n    to {\n      transform: scale(4);\n      opacity: 0;\n    }\n  }\n}\natomic-result-printable-uri {\n  max-width: 100%;\n  word-break: break-word;\n}\natomic-result-printable-uri a,\n  atomic-result-printable-uri button {\n  color: var(--atomic-primary);\n}\natomic-result-printable-uri a:hover,\n    atomic-result-printable-uri a:focus-visible,\n    atomic-result-printable-uri button:hover,\n    atomic-result-printable-uri button:focus-visible {\n  text-decoration: underline;\n  color: var(--atomic-primary);\n}\natomic-result-printable-uri a:focus, atomic-result-printable-uri button:focus {\n  outline: none;\n}\natomic-result-printable-uri a:visited, atomic-result-printable-uri button:visited {\n  color: var(--atomic-visited);\n}\natomic-result-printable-uri ul {\n  display: flex;\n  flex-wrap: wrap;\n}\natomic-result-printable-uri li {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\natomic-result-printable-uri li a {\n  display: inline-block;\n  vertical-align: middle;\n  max-width: 100%;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\natomic-result-printable-uri li {\n  white-space: nowrap;\n}\natomic-result-printable-uri li:last-child {\n  white-space: normal;\n}\natomic-result-printable-uri li:last-child::after {\n  content: none;\n}\natomic-result-printable-uri li .result-printable-uri-separator {\n  display: inline-block;\n  margin: 0 0.5rem;\n  vertical-align: middle;\n  width: 0.75rem;\n  height: 0.75rem;\n  color: var(--atomic-neutral-dark);\n}\n@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-scale-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-rotate-x {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-x-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-divide-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-gradient-position {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-gradient-from {\n  syntax: "<color>";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-via {\n  syntax: "<color>";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-to {\n  syntax: "<color>";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-stops {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-gradient-via-stops {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-gradient-from-position {\n  syntax: "<length-percentage>";\n  inherits: false;\n  initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n  syntax: "<length-percentage>";\n  inherits: false;\n  initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n  syntax: "<length-percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-leading {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: "<length>";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: "*";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-blur {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-drop-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: "*";\n  initial-value: "";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-space-x-reverse: 0;\n      --tw-divide-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-content: "";\n    }\n  }\n}\n';const h=p;var b=undefined&&undefined.__decorate||function(n,r,t,e){var i=arguments.length,a=i<3?r:e===null?e=Object.getOwnPropertyDescriptor(r,t):e,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(n,r,t,e);else for(var l=n.length-1;l>=0;l--)if(o=n[l])a=(i<3?o(a):i>3?o(r,t,a):o(r,t))||a;return i>3&&a&&Object.defineProperty(r,t,a),a};const v=class{constructor(r){n(this,r);this.listExpanded=false;this.maxNumberOfParts=5;this.listExpanded=false;this.error=undefined;this.maxNumberOfParts=5}get focusTarget(){if(!this.expandedPartFocus){this.expandedPartFocus=new s(this)}return this.expandedPartFocus}connectedCallback(){try{new e({maxNumberOfParts:new i({min:3})}).validate({maxNumberOfParts:this.maxNumberOfParts})}catch(n){this.error=n}const n="attributes";this.linkAttributes=d(this.host,n)}initialize(){this.interactiveResult=a(this.bindings.engine,{options:{result:this.result}})}getIndexOfEllipsis(n){const r=Math.max(2,n-this.maxNumberOfParts);const t=n-r-1;return t}renderEllipsis(){return r("li",null,r("button",{"aria-label":this.bindings.i18n.t("collapsed-uri-parts"),onClick:n=>{n.stopPropagation();this.focusTarget.focusOnNextTarget();this.listExpanded=true}},"..."),this.renderSeparator())}get allParents(){const n=c(`${this.result.raw.parents}`);const t=Array.from(n.getElementsByTagName("parent"));const e=this.getIndexOfEllipsis(t.length);return t.map(((n,i)=>{const a=n.getAttribute("name");const o=n.getAttribute("uri");return r("li",null,this.renderLink(a,o,i===e),i===t.length-1?null:this.renderSeparator())}))}renderSeparator(){return r("atomic-icon",{class:"result-printable-uri-separator",icon:o,role:"separator"})}renderParents(){const n=this.allParents;if(this.listExpanded||n.length<=this.maxNumberOfParts){return n}return[n.slice(0,this.getIndexOfEllipsis(n.length)),this.renderEllipsis(),n.slice(-1)]}renderLink(n,t,e){return r(w,{href:t,title:typeof n==="string"?n:undefined,onSelect:()=>this.interactiveResult.select(),onBeginDelayedSelect:()=>this.interactiveResult.beginDelayedSelect(),onCancelPendingSelect:()=>this.interactiveResult.cancelPendingSelect(),attributes:this.linkAttributes,ref:e?n=>this.focusTarget.setTarget(n):undefined},n)}render(){const n=this.renderParents();if(n.length){return r("ul",{"aria-label":this.bindings.i18n.t("printable-uri")},n)}return this.renderLink(r("atomic-result-text",{field:"printableUri"}),this.result.clickUri,false)}get host(){return t(this)}};b([l()],v.prototype,"bindings",void 0);b([m()],v.prototype,"result",void 0);v.style=h;export{v as atomic_result_printable_uri};
+//# sourceMappingURL=p-67f62282.entry.js.map

package/dist/atomic/p-6819f12c.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,g as s}from"./p-dc3df5ce.js";import{Schema as i,NumberValue as a}from"@coveo/bueno";import{buildFacetManager as o}from"@coveo/headless";import{I as n,B as r}from"./p-ff2d324d.js";import{g as c,s as f,a as d,c as h}from"./p-66f4521a.js";import"./p-c9074946.js";import"./p-1580513b.js";import"./p-05de7ca3.js";import"./p-cae02339.js";var l=undefined&&undefined.__decorate||function(t,e,s,i){var a=arguments.length,o=a<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,s):i,n;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(t,e,s,i);else for(var r=t.length-1;r>=0;r--)if(n=t[r])o=(a<3?n(o):a>3?n(e,s,o):n(e,s))||o;return a>3&&o&&Object.defineProperty(e,s,o),o};const p=class{constructor(e){t(this,e);this.collapseFacetsAfter=4;this.sortFacets=()=>{const t=c(this.host);const e=this.sortFacetsUsingManager(t,this.facetManager);const{visibleFacets:s,invisibleFacets:i}=f(e,this.bindings.store.getAllFacets());const a=d(this.host);h(s,this.collapseFacetsAfter);a?.updateCollapseFacetsDependingOnFacetsVisibility(this.collapseFacetsAfter,s.length);this.host.append(...[...s,...i,...a?[a]:[]])};this.facetManagerState=undefined;this.error=undefined;this.collapseFacetsAfter=4}initialize(){this.validateProps();this.facetManager=o(this.bindings.engine);this.bindings.i18n.on("languageChanged",this.sortFacets)}validateProps(){new i({collapseFacetAfter:new a({min:-1,required:true})}).validate({collapseFacetAfter:this.collapseFacetsAfter})}sortFacetsUsingManager(t,e){const s=t.map((t=>({facetId:t.facetId,payload:t})));return e.sort(s).map((t=>t.payload))}disconnectedCallback(){this.bindings?.i18n.off("languageChanged",this.sortFacets)}render(){return e("slot",{key:"bfbf9399fac10d021f881235475786f86d6ab417"})}get host(){return s(this)}};l([n()],p.prototype,"bindings",void 0);l([r("facetManager",{onUpdateCallbackMethod:"sortFacets"})],p.prototype,"facetManagerState",void 0);export{p as atomic_facet_manager};
+//# sourceMappingURL=p-6819f12c.entry.js.map

package/dist/atomic/p-6d0e9fad.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["AutoCorrection","i18n","correctedTo","originalQuery","h","Fragment","class","part","LocalizedString","key","params","query","Correction","onClick","correctedQuery","QueryCorrectionGuard","hasCorrection","children","TriggerCorrection","atomicDidYouMeanCss","AtomicDidYouMeanStyle0","AtomicDidYouMean","this","automaticallyCorrectQuery","queryCorrectionMode","updateQueryCorrectionMode","didYouMean","initialize","buildDidYouMean","bindings","engine","options","queryTrigger","buildQueryTrigger","content","queryTriggerState","didYouMeanState","hasQueryCorrection","wasAutomaticallyCorrected","hasTrigger","wasQueryModified","wasCorrectedTo","queryCorrection","applyCorrection","newQuery","undo","render","__decorate","InitializeBindings","BindStateToController"],"sources":["src/components/common/query-correction/stencil-auto-correction.tsx","src/components/common/query-correction/stencil-correction.tsx","src/components/common/query-correction/stencil-guard.tsx","src/components/common/query-correction/stencil-trigger-correction.tsx","src/components/search/atomic-did-you-mean/atomic-did-you-mean.pcss?tag=atomic-did-you-mean&encapsulation=shadow","src/components/search/atomic-did-you-mean/atomic-did-you-mean.tsx"],"sourcesContent":["import {FunctionalComponent, h, Fragment} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {LocalizedString} from '../../../utils/jsx-utils';\n\ninterface AutoCorrectionProps {\n  i18n: i18n;\n  originalQuery: string;\n  correctedTo: string;\n}\nexport const AutoCorrection: FunctionalComponent<AutoCorrectionProps> = ({\n  i18n,\n  correctedTo,\n  originalQuery,\n}) => {\n  return (\n    <Fragment>\n      <p class=\"text-on-background mb-1\" part=\"no-results\">\n        <LocalizedString\n          i18n={i18n}\n          key={'no-results-for-did-you-mean'}\n          params={{query: <b part=\"highlight\">{originalQuery}</b>}}\n        />\n      </p>\n      <p class=\"text-on-background\" part=\"auto-corrected\">\n        <LocalizedString\n          i18n={i18n}\n          key={'query-auto-corrected-to'}\n          params={{query: <b part=\"highlight\">{correctedTo}</b>}}\n        />\n      </p>\n    </Fragment>\n  );\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {LocalizedString} from '../../../utils/jsx-utils';\n\ninterface CorrectionProps {\n  i18n: i18n;\n  onClick: () => void;\n  correctedQuery: string;\n}\nexport const Correction: FunctionalComponent<CorrectionProps> = ({\n  i18n,\n  onClick,\n  correctedQuery,\n}) => {\n  return (\n    <p class=\"text-on-background\" part=\"did-you-mean\">\n      <LocalizedString\n        i18n={i18n}\n        key=\"did-you-mean\"\n        params={{\n          query: (\n            <button\n              class=\"text-primary hover:text-primary-light focus-visible:text-primary-light py-1 hover:underline focus-visible:underline\"\n              part=\"correction-btn\"\n              onClick={() => onClick()}\n            >\n              {correctedQuery}\n            </button>\n          ),\n        }}\n      />\n    </p>\n  );\n};\n","import {Fragment, FunctionalComponent, h} from '@stencil/core';\n\ninterface QueryCorrectionGuardProps {\n  hasCorrection: boolean;\n}\n\n// Just use a when directive for Lit. This is an unnecessary component in Lit's context.\nexport const QueryCorrectionGuard: FunctionalComponent<\n  QueryCorrectionGuardProps\n> = ({hasCorrection}, children) => {\n  if (!hasCorrection) {\n    return;\n  }\n  return <Fragment>{children}</Fragment>;\n};\n","import {FunctionalComponent, Fragment, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {LocalizedString} from '../../../utils/jsx-utils';\n\ninterface TriggerCorrectionProps {\n  i18n: i18n;\n  correctedQuery: string;\n  originalQuery: string;\n  onClick: () => void;\n}\nexport const TriggerCorrection: FunctionalComponent<TriggerCorrectionProps> = ({\n  i18n,\n  correctedQuery,\n  originalQuery,\n  onClick,\n}) => {\n  return (\n    <Fragment>\n      <p\n        class=\"text-on-background text-lg leading-6\"\n        part=\"showing-results-for\"\n      >\n        <LocalizedString\n          i18n={i18n}\n          key={'showing-results-for'}\n          params={{query: <b part=\"highlight\">{correctedQuery}</b>}}\n        />\n      </p>\n      <p\n        class=\"text-on-background text-base leading-5\"\n        part=\"search-instead-for\"\n      >\n        <LocalizedString\n          i18n={i18n}\n          key=\"search-instead-for\"\n          params={{\n            query: (\n              <button\n                class=\"text-primary hover:text-primary-light focus-visible:text-primary-light py-1 hover:underline focus-visible:underline\"\n                part=\"undo-btn\"\n                onClick={() => onClick()}\n              >\n                {originalQuery}\n              </button>\n            ),\n          }}\n        />\n      </p>\n    </Fragment>\n  );\n};\n","@import '../../../global/global.pcss';\n","import {\n  DidYouMean,\n  DidYouMeanState,\n  buildDidYouMean,\n  QueryTrigger,\n  buildQueryTrigger,\n  QueryTriggerState,\n} from '@coveo/headless';\nimport {Component, h, Prop, State, Watch} from '@stencil/core';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {AutoCorrection} from '../../common/query-correction/stencil-auto-correction';\nimport {Correction} from '../../common/query-correction/stencil-correction';\nimport {QueryCorrectionGuard} from '../../common/query-correction/stencil-guard';\nimport {TriggerCorrection} from '../../common/query-correction/stencil-trigger-correction';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-did-you-mean` component is responsible for handling query corrections. When a query returns no result but finds a possible query correction, the component either suggests the correction or automatically triggers a new query with the suggested term.\n *\n * @part no-results - The text displayed when there are no results.\n * @part auto-corrected - The text displayed for the automatically corrected query.\n * @part showing-results-for - The first paragraph of the text displayed when a query trigger changes a query.\n * @part search-instead-for - The second paragraph of the text displayed when a query trigger changes a query.\n * @part did-you-mean - The text displayed around the button to manually correct a query.\n * @part correction-btn - The button used to manually correct a query.\n * @part undo-btn - The button used to undo a query changed by a query trigger.\n * @part highlight - The query highlights.\n */\n@Component({\n  tag: 'atomic-did-you-mean',\n  styleUrl: 'atomic-did-you-mean.pcss',\n  shadow: true,\n})\nexport class AtomicDidYouMean implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  private didYouMean!: DidYouMean;\n  protected queryTrigger!: QueryTrigger;\n\n  @BindStateToController('didYouMean')\n  @State()\n  private didYouMeanState?: DidYouMeanState;\n  @BindStateToController('queryTrigger')\n  @State()\n  private queryTriggerState?: QueryTriggerState;\n  @State() public error!: Error;\n\n  /**\n   * Whether to automatically apply corrections for queries that would otherwise return no results.\n   * When `automaticallyCorrectQuery` is `true`, the component automatically triggers a new query using the suggested term.\n   * When `automaticallyCorrectQuery` is `false`, the component returns the suggested term without triggering a new query.\n   *\n   * The default value is `true`.\n   */\n  @Prop({reflect: true}) public automaticallyCorrectQuery = true;\n\n  /**\n   * Define which query correction system to use\n   *\n   * `legacy`: Query correction is powered by the legacy index system. This system relies on an algorithm using solely the index content to compute the suggested terms.\n   * `next`: Query correction is powered by a machine learning system, requiring a valid query suggestion model configured in your Coveo environment to function properly. This system relies on machine learning algorithms to compute the suggested terms.\n   *\n   * Default value is `next`.\n   */\n  @Prop({reflect: true})\n  public queryCorrectionMode: 'legacy' | 'next' = 'next';\n\n  @Watch('queryCorrectionMode')\n  public updateQueryCorrectionMode() {\n    this.didYouMean.updateQueryCorrectionMode(this.queryCorrectionMode);\n  }\n\n  public initialize() {\n    this.didYouMean = buildDidYouMean(this.bindings.engine, {\n      options: {\n        automaticallyCorrectQuery: this.automaticallyCorrectQuery,\n        queryCorrectionMode: this.queryCorrectionMode,\n      },\n    });\n    this.queryTrigger = buildQueryTrigger(this.bindings.engine);\n  }\n\n  private get content() {\n    if (!this.queryTriggerState || !this.didYouMeanState) {\n      return;\n    }\n\n    const {hasQueryCorrection, wasAutomaticallyCorrected} =\n      this.didYouMeanState;\n    const hasTrigger = this.queryTriggerState.wasQueryModified;\n\n    if (hasQueryCorrection && wasAutomaticallyCorrected) {\n      return (\n        <AutoCorrection\n          correctedTo={this.didYouMeanState.wasCorrectedTo}\n          originalQuery={this.didYouMeanState.originalQuery}\n          i18n={this.bindings.i18n}\n        />\n      );\n    }\n    if (hasQueryCorrection) {\n      return (\n        <Correction\n          correctedQuery={this.didYouMeanState.queryCorrection.correctedQuery}\n          i18n={this.bindings.i18n}\n          onClick={() => this.didYouMean.applyCorrection()}\n        />\n      );\n    }\n    if (hasTrigger) {\n      return (\n        <TriggerCorrection\n          i18n={this.bindings.i18n}\n          correctedQuery={this.queryTriggerState.newQuery}\n          originalQuery={this.queryTriggerState.originalQuery}\n          onClick={() => this.queryTrigger.undo()}\n        />\n      );\n    }\n  }\n\n  public render() {\n    if (!this.didYouMeanState || !this.queryTriggerState) {\n      return;\n    }\n\n    return (\n      <QueryCorrectionGuard\n        hasCorrection={\n          this.didYouMeanState.hasQueryCorrection ||\n          this.queryTriggerState.wasQueryModified\n        }\n      >\n        {this.content}\n      </QueryCorrectionGuard>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["AutoCorrection","i18n","correctedTo","originalQuery","h","Fragment","class","part","LocalizedString","key","params","query","Correction","onClick","correctedQuery","QueryCorrectionGuard","hasCorrection","children","TriggerCorrection","atomicDidYouMeanCss","AtomicDidYouMeanStyle0","AtomicDidYouMean","this","automaticallyCorrectQuery","queryCorrectionMode","updateQueryCorrectionMode","didYouMean","initialize","buildDidYouMean","bindings","engine","options","queryTrigger","buildQueryTrigger","content","queryTriggerState","didYouMeanState","hasQueryCorrection","wasAutomaticallyCorrected","hasTrigger","wasQueryModified","wasCorrectedTo","queryCorrection","applyCorrection","newQuery","undo","render","__decorate","InitializeBindings","BindStateToController"],"sources":["src/components/common/query-correction/stencil-auto-correction.tsx","src/components/common/query-correction/stencil-correction.tsx","src/components/common/query-correction/stencil-guard.tsx","src/components/common/query-correction/stencil-trigger-correction.tsx","src/components/search/atomic-did-you-mean/atomic-did-you-mean.pcss?tag=atomic-did-you-mean&encapsulation=shadow","src/components/search/atomic-did-you-mean/atomic-did-you-mean.tsx"],"sourcesContent":["import {FunctionalComponent, h, Fragment} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {LocalizedString} from '../../../utils/jsx-utils';\n\ninterface AutoCorrectionProps {\n  i18n: i18n;\n  originalQuery: string;\n  correctedTo: string;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const AutoCorrection: FunctionalComponent<AutoCorrectionProps> = ({\n  i18n,\n  correctedTo,\n  originalQuery,\n}) => {\n  return (\n    <Fragment>\n      <p class=\"text-on-background mb-1\" part=\"no-results\">\n        <LocalizedString\n          i18n={i18n}\n          key={'no-results-for-did-you-mean'}\n          params={{query: <b part=\"highlight\">{originalQuery}</b>}}\n        />\n      </p>\n      <p class=\"text-on-background\" part=\"auto-corrected\">\n        <LocalizedString\n          i18n={i18n}\n          key={'query-auto-corrected-to'}\n          params={{query: <b part=\"highlight\">{correctedTo}</b>}}\n        />\n      </p>\n    </Fragment>\n  );\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {LocalizedString} from '../../../utils/jsx-utils';\n\ninterface CorrectionProps {\n  i18n: i18n;\n  onClick: () => void;\n  correctedQuery: string;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const Correction: FunctionalComponent<CorrectionProps> = ({\n  i18n,\n  onClick,\n  correctedQuery,\n}) => {\n  return (\n    <p class=\"text-on-background\" part=\"did-you-mean\">\n      <LocalizedString\n        i18n={i18n}\n        key=\"did-you-mean\"\n        params={{\n          query: (\n            <button\n              class=\"text-primary hover:text-primary-light focus-visible:text-primary-light py-1 hover:underline focus-visible:underline\"\n              part=\"correction-btn\"\n              onClick={() => onClick()}\n            >\n              {correctedQuery}\n            </button>\n          ),\n        }}\n      />\n    </p>\n  );\n};\n","import {Fragment, FunctionalComponent, h} from '@stencil/core';\n\ninterface QueryCorrectionGuardProps {\n  hasCorrection: boolean;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const QueryCorrectionGuard: FunctionalComponent<\n  QueryCorrectionGuardProps\n> = ({hasCorrection}, children) => {\n  if (!hasCorrection) {\n    return;\n  }\n  return <Fragment>{children}</Fragment>;\n};\n","import {FunctionalComponent, Fragment, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {LocalizedString} from '../../../utils/jsx-utils';\n\ninterface TriggerCorrectionProps {\n  i18n: i18n;\n  correctedQuery: string;\n  originalQuery: string;\n  onClick: () => void;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const TriggerCorrection: FunctionalComponent<TriggerCorrectionProps> = ({\n  i18n,\n  correctedQuery,\n  originalQuery,\n  onClick,\n}) => {\n  return (\n    <Fragment>\n      <p\n        class=\"text-on-background text-lg leading-6\"\n        part=\"showing-results-for\"\n      >\n        <LocalizedString\n          i18n={i18n}\n          key={'showing-results-for'}\n          params={{query: <b part=\"highlight\">{correctedQuery}</b>}}\n        />\n      </p>\n      <p\n        class=\"text-on-background text-base leading-5\"\n        part=\"search-instead-for\"\n      >\n        <LocalizedString\n          i18n={i18n}\n          key=\"search-instead-for\"\n          params={{\n            query: (\n              <button\n                class=\"text-primary hover:text-primary-light focus-visible:text-primary-light py-1 hover:underline focus-visible:underline\"\n                part=\"undo-btn\"\n                onClick={() => onClick()}\n              >\n                {originalQuery}\n              </button>\n            ),\n          }}\n        />\n      </p>\n    </Fragment>\n  );\n};\n","@import '../../../global/global.pcss';\n","import {\n  DidYouMean,\n  DidYouMeanState,\n  buildDidYouMean,\n  QueryTrigger,\n  buildQueryTrigger,\n  QueryTriggerState,\n} from '@coveo/headless';\nimport {Component, h, Prop, State, Watch} from '@stencil/core';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {AutoCorrection} from '../../common/query-correction/stencil-auto-correction';\nimport {Correction} from '../../common/query-correction/stencil-correction';\nimport {QueryCorrectionGuard} from '../../common/query-correction/stencil-guard';\nimport {TriggerCorrection} from '../../common/query-correction/stencil-trigger-correction';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-did-you-mean` component is responsible for handling query corrections. When a query returns no result but finds a possible query correction, the component either suggests the correction or automatically triggers a new query with the suggested term.\n *\n * @part no-results - The text displayed when there are no results.\n * @part auto-corrected - The text displayed for the automatically corrected query.\n * @part showing-results-for - The first paragraph of the text displayed when a query trigger changes a query.\n * @part search-instead-for - The second paragraph of the text displayed when a query trigger changes a query.\n * @part did-you-mean - The text displayed around the button to manually correct a query.\n * @part correction-btn - The button used to manually correct a query.\n * @part undo-btn - The button used to undo a query changed by a query trigger.\n * @part highlight - The query highlights.\n */\n@Component({\n  tag: 'atomic-did-you-mean',\n  styleUrl: 'atomic-did-you-mean.pcss',\n  shadow: true,\n})\nexport class AtomicDidYouMean implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  private didYouMean!: DidYouMean;\n  protected queryTrigger!: QueryTrigger;\n\n  @BindStateToController('didYouMean')\n  @State()\n  private didYouMeanState?: DidYouMeanState;\n  @BindStateToController('queryTrigger')\n  @State()\n  private queryTriggerState?: QueryTriggerState;\n  @State() public error!: Error;\n\n  /**\n   * Whether to automatically apply corrections for queries that would otherwise return no results.\n   * When `automaticallyCorrectQuery` is `true`, the component automatically triggers a new query using the suggested term.\n   * When `automaticallyCorrectQuery` is `false`, the component returns the suggested term without triggering a new query.\n   *\n   * The default value is `true`.\n   */\n  @Prop({reflect: true}) public automaticallyCorrectQuery = true;\n\n  /**\n   * Define which query correction system to use\n   *\n   * `legacy`: Query correction is powered by the legacy index system. This system relies on an algorithm using solely the index content to compute the suggested terms.\n   * `next`: Query correction is powered by a machine learning system, requiring a valid query suggestion model configured in your Coveo environment to function properly. This system relies on machine learning algorithms to compute the suggested terms.\n   *\n   * Default value is `next`.\n   */\n  @Prop({reflect: true})\n  public queryCorrectionMode: 'legacy' | 'next' = 'next';\n\n  @Watch('queryCorrectionMode')\n  public updateQueryCorrectionMode() {\n    this.didYouMean.updateQueryCorrectionMode(this.queryCorrectionMode);\n  }\n\n  public initialize() {\n    this.didYouMean = buildDidYouMean(this.bindings.engine, {\n      options: {\n        automaticallyCorrectQuery: this.automaticallyCorrectQuery,\n        queryCorrectionMode: this.queryCorrectionMode,\n      },\n    });\n    this.queryTrigger = buildQueryTrigger(this.bindings.engine);\n  }\n\n  private get content() {\n    if (!this.queryTriggerState || !this.didYouMeanState) {\n      return;\n    }\n\n    const {hasQueryCorrection, wasAutomaticallyCorrected} =\n      this.didYouMeanState;\n    const hasTrigger = this.queryTriggerState.wasQueryModified;\n\n    if (hasQueryCorrection && wasAutomaticallyCorrected) {\n      return (\n        <AutoCorrection\n          correctedTo={this.didYouMeanState.wasCorrectedTo}\n          originalQuery={this.didYouMeanState.originalQuery}\n          i18n={this.bindings.i18n}\n        />\n      );\n    }\n    if (hasQueryCorrection) {\n      return (\n        <Correction\n          correctedQuery={this.didYouMeanState.queryCorrection.correctedQuery}\n          i18n={this.bindings.i18n}\n          onClick={() => this.didYouMean.applyCorrection()}\n        />\n      );\n    }\n    if (hasTrigger) {\n      return (\n        <TriggerCorrection\n          i18n={this.bindings.i18n}\n          correctedQuery={this.queryTriggerState.newQuery}\n          originalQuery={this.queryTriggerState.originalQuery}\n          onClick={() => this.queryTrigger.undo()}\n        />\n      );\n    }\n  }\n\n  public render() {\n    if (!this.didYouMeanState || !this.queryTriggerState) {\n      return;\n    }\n\n    return (\n      <QueryCorrectionGuard\n        hasCorrection={\n          this.didYouMeanState.hasQueryCorrection ||\n          this.queryTriggerState.wasQueryModified\n        }\n      >\n        {this.content}\n      </QueryCorrectionGuard>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}