npm - @coveo/atomic - Versions diffs - 3.35.0-pre.e9982a2757 → 3.35.0-pre.ff63a360d9 - Mend

@coveo/atomic 3.35.0-pre.e9982a2757 → 3.35.0-pre.ff63a360d9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1477) hide show

package/dist/atomic/p-fc71835d.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["FacetDateInput","this","max","connectedCallback","range","rangeGetter","start","parseDate","toDate","undefined","end","componentDidUpdate","startRef","value","endRef","min","formattedDateValue","apply","validity","valid","applyInput","emit","rangeRequest","buildDateRange","setHours","rangeSetter","date","format","render","label","bindings","i18n","t","startLabel","endLabel","startAria","endAria","applyAria","inputClasses","labelClasses","placeholder","pattern","h","key","class","onSubmit","e","preventDefault","part","htmlFor","facetId","id","type","ref","required","onInput","target","Button","style","ariaLabel","text"],"sources":["src/components/common/facets/stencil-facet-date-input/stencil-facet-date-input.tsx"],"sourcesContent":["import {\n buildDateRange,\n DateFilterRange,\n DateRangeRequest,\n} from '@coveo/headless';\nimport {Component, h, State, Prop, Event, EventEmitter} from '@stencil/core';\nimport {parseDate} from '../../../../utils/date-utils';\nimport {Button} from '../../../common/stencil-button';\nimport {AnyBindings} from '../../interface/bindings';\n\n/**\n * @deprecated\n * Use `atomic-facet-date-input` instead. This component is meant to be used with Stencil components only.\n * Internal component made to be integrated in a TimeframeFacet.\n * @internal\n */\n@Component({\n tag: 'atomic-stencil-facet-date-input',\n shadow: false,\n})\nexport class FacetDateInput {\n @State() private start?: Date;\n @State() private end?: Date;\n private startRef!: HTMLInputElement;\n private endRef!: HTMLInputElement;\n\n @Prop() public bindings!: AnyBindings;\n @Prop() public rangeGetter!: () => DateFilterRange | undefined;\n @Prop() public rangeSetter!: (range: DateRangeRequest) => void;\n @Prop() public facetId!: string;\n @Prop() public label!: string;\n @Prop() public min?: string;\n @Prop() public max?: string = '9999-12-31';\n\n @Event({\n eventName: 'atomic/dateInputApply',\n })\n private applyInput!: EventEmitter;\n\n public connectedCallback() {\n const range = this.rangeGetter();\n this.start = range ? parseDate(range.start).toDate() : undefined;\n this.end = range ? parseDate(range.end).toDate() : undefined;\n }\n public componentDidUpdate() {\n if (!this.startRef.value && !this.endRef.value) {\n this.startRef.min = this.min || this.formattedDateValue('1401-01-01');\n this.endRef.max = this.max || '';\n this.startRef.max = this.max || '';\n this.endRef.min = this.min || '';\n }\n }\n\n private apply() {\n if (!this.startRef.validity.valid || !this.endRef.validity.valid) {\n return;\n }\n\n this.applyInput.emit({\n start: this.start,\n end: this.end,\n });\n\n const rangeRequest = buildDateRange({\n start: this.start!,\n end: this.end!.setHours(23, 59, 59, 999),\n });\n\n this.rangeSetter(rangeRequest);\n }\n\n private formattedDateValue(date?: string | Date) {\n if (!date) {\n return '';\n }\n return parseDate(date).format('YYYY-MM-DD');\n }\n\n render() {\n const label = this.bindings.i18n.t(this.label);\n const startLabel = this.bindings.i18n.t('start');\n const endLabel = this.bindings.i18n.t('end');\n const startAria = this.bindings.i18n.t('date-input-start', {label});\n const endAria = this.bindings.i18n.t('date-input-end', {label});\n const apply = this.bindings.i18n.t('apply');\n const applyAria = this.bindings.i18n.t('date-input-apply', {label});\n\n const inputClasses = 'input-primary p-2.5';\n const labelClasses = 'text-neutral-dark self-center';\n\n const placeholder = 'yyyy-mm-dd';\n // Fallback for Safari < 14.1, date with format yyyy-mm-dd over 1400 (API limit)\n const pattern =\n '^(1[4-9]\\\\d{2}|2\\\\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12]\\\\d|3[01])$';\n\n const range = this.rangeGetter();\n\n return (\n <form\n class=\"mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2\"\n onSubmit={(e) => {\n e.preventDefault();\n this.apply();\n return false;\n }}\n >\n <label\n part=\"input-label\"\n class={labelClasses}\n htmlFor={`${this.facetId}_start`}\n >\n {startLabel}:\n </label>\n <input\n id={`${this.facetId}_start`}\n part=\"input-start\"\n type=\"date\"\n ref={(ref) => (this.startRef = ref!)}\n class={inputClasses}\n aria-label={startAria}\n placeholder={placeholder}\n pattern={pattern}\n required\n // API/Index minimum supported date\n min={this.min || this.formattedDateValue('1401-01-01')}\n max={this.end ? this.formattedDateValue(this.end) : this.max}\n value={this.formattedDateValue(range?.start)}\n onInput={(e) =>\n (this.start = parseDate(\n (e.target as HTMLInputElement).value\n ).toDate())\n }\n />\n <label\n part=\"input-label\"\n class={labelClasses}\n htmlFor={`${this.facetId}_end`}\n >\n {endLabel}:\n </label>\n <input\n id={`${this.facetId}_end`}\n part=\"input-end\"\n type=\"date\"\n ref={(ref) => (this.endRef = ref!)}\n class={inputClasses}\n aria-label={endAria}\n placeholder={placeholder}\n pattern={pattern}\n required\n min={this.formattedDateValue(this.start) || this.min}\n max={this.max}\n value={this.formattedDateValue(range?.end)}\n onInput={(e) =>\n (this.end = parseDate(\n (e.target as HTMLInputElement).value\n ).toDate())\n }\n />\n <Button\n style=\"outline-primary\"\n type=\"submit\"\n part=\"input-apply-button\"\n class=\"col-span-2 truncate p-2.5\"\n ariaLabel={applyAria}\n text={apply}\n ></Button>\n </form>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/atomic/p-fd1ef9e3.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as n,h as t,g as r}from"./p-dc3df5ce.js";import{buildResultsPerPage as i,buildTabManager as e,buildFoldedResultList as a,buildInteractiveResult as o}from"@coveo/headless";import{I as l,B as s,H as c}from"./p-ff2d324d.js";import{A as d}from"./p-7427daa3.js";import{F as m}from"./p-0580b866.js";import{s as p}from"./p-634dddb0.js";import{r as g}from"./p-f537c5af.js";import{R as h}from"./p-8e5e00b4.js";import{e as w}from"./p-0f046687.js";import{c as b}from"./p-aaa5a853.js";import{D as u,I as v}from"./p-7cb0050f.js";import{I as f}from"./p-bd2703e9.js";import{I as y}from"./p-cef8175c.js";import{I as x}from"./p-025a346a.js";import{g as k}from"./p-3ef52afa.js";import"./p-c9074946.js";import"./p-1580513b.js";import"./p-05de7ca3.js";import"./p-cae02339.js";import"@coveo/bueno";import"./p-f284897c.js";import"./p-0462f723.js";import"./p-1fca38e1.js";import"./p-828ab4ff.js";const z='/! 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 .atomic-grid-clickable-elements [part~=\'outline\'][part~=\'result-list-grid-clickable-container\'] {\n position: relative;\n border: 1px solid transparent;\n padding: 1rem;\n border-radius: 1rem;\n transition: all 0.12s ease-out;\n }\n .atomic-grid-clickable-elements [part~=\'outline\'][part~=\'result-list-grid-clickable-container\']:hover {\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n box-shadow: 0px 10px 25px var(--atomic-neutral);\n cursor: pointer;\n }\n .atomic-grid-clickable-elements [part=\'result-list-grid-clickable\']:focus-visible {\n border-radius: 2px;\n border-style: var(--tw-border-style);\n border-width: 2px;\n border-color: var(--atomic-primary);\n color: var(--atomic-primary);\n cursor: pointer;\n display: inline-block;\n text-decoration: underline;\n text-align: center;\n position: absolute;\n }\n .atomic-grid-clickable-elements [part=\'result-list-grid-clickable\']:not(:focus) {\n clip: rect(1px, 1px, 1px, 1px);\n overflow: hidden;\n position: absolute;\n padding: 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 @media not all and (width >= 1024px) {\n @media not all and (min-width: 768px) {\n .atomic-grid-display-mobile .list-root.display-grid.image-large {\n grid-template-columns: minmax(auto, 35rem);\n }\n .atomic-grid-display-mobile .list-root.display-grid.image-large.density-comfortable [part~=\'outline\']::before {\n margin: 2rem 0;\n }\n .atomic-grid-display-mobile .list-root.display-grid.image-large.density-normal [part~=\'outline\']::before {\n margin: 1.5rem 0;\n }\n @media not all and (width >= 1024px) {\n .atomic-grid-display-mobile .list-root.display-grid.image-large.density-normal [part~=\'outline\']::before {\n margin: 1.75rem 0;\n }\n }\n .atomic-grid-display-mobile .list-root.display-grid.image-large.density-compact [part~=\'outline\']::before {\n margin: 1rem 0;\n }\n @media not all and (width >= 1024px) {\n .atomic-grid-display-mobile .list-root.display-grid.image-large.density-compact [part~=\'outline\']::before {\n margin: 1.5rem 0;\n }\n }\n .atomic-grid-display-mobile .list-root.display-grid.image-large [part~=\'outline\']::before {\n display: block;\n content: \' \';\n height: 1px;\n background-color: var(--atomic-neutral);\n }\n .atomic-grid-display-mobile .list-root.display-grid.image-large [part~=\'outline\']:first-of-type::before {\n display: none;\n }\n .atomic-grid-display-mobile .list-root.display-grid.image-large atomic-result-placeholder::before {\n background-color: transparent;\n }\n }\n @media (min-width: 768px) {\n .atomic-grid-display-mobile .list-root.display-grid.image-large {\n grid-column-gap: 0.5rem;\n grid-row-gap: 0.5rem;\n grid-template-columns: 1fr 1fr;\n }\n .atomic-grid-display-mobile .list-root.display-grid.image-large [part~=\'outline\'] {\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n padding: 1rem;\n border-radius: 1rem;\n }\n .atomic-grid-display-mobile .list-root.display-grid.image-large atomic-result-placeholder {\n border-color: transparent;\n }\n }\n .atomic-grid-display-mobile .list-root.display-grid.image-small [part~=\'outline\'], .atomic-grid-display-mobile .list-root.display-grid.image-icon [part~=\'outline\'], .atomic-grid-display-mobile .list-root.display-grid.image-none [part~=\'outline\'] {\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n padding: 1rem;\n border-radius: 1rem;\n }\n .atomic-grid-display-mobile .list-root.display-grid.image-small atomic-result-placeholder, .atomic-grid-display-mobile .list-root.display-grid.image-icon atomic-result-placeholder, .atomic-grid-display-mobile .list-root.display-grid.image-none atomic-result-placeholder {\n border-color: transparent;\n }\n .atomic-grid-display-mobile .list-root.display-grid.image-small, .atomic-grid-display-mobile .list-root.display-grid.image-icon, .atomic-grid-display-mobile .list-root.display-grid.image-none {\n grid-column-gap: 0.5rem;\n grid-row-gap: 0.5rem;\n }\n @media not all and (min-width: 640px) {\n .atomic-grid-display-mobile .list-root.display-grid.image-small, .atomic-grid-display-mobile .list-root.display-grid.image-icon, .atomic-grid-display-mobile .list-root.display-grid.image-none {\n grid-template-columns: minmax(0, 1fr);\n }\n }\n @media (min-width: 768px) {\n .atomic-grid-display-mobile .list-root.display-grid.image-small, .atomic-grid-display-mobile .list-root.display-grid.image-icon, .atomic-grid-display-mobile .list-root.display-grid.image-none {\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n }\n }\n @media (width >= 1024px) {\n .atomic-grid-display-mobile .list-root.display-grid.image-small, .atomic-grid-display-mobile .list-root.display-grid.image-icon, .atomic-grid-display-mobile .list-root.display-grid.image-none {\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);\n }\n }\n }\n .atomic-list-with-dividers.density-comfortable [part~=\'outline\']::before {\n margin: 2rem 0;\n }\n .atomic-list-with-dividers.density-normal [part~=\'outline\']::before {\n margin: 1.5rem 0;\n }\n @media not all and (width >= 1024px) {\n .atomic-list-with-dividers.density-normal [part~=\'outline\']::before {\n margin: 1.75rem 0;\n }\n }\n .atomic-list-with-dividers.density-compact [part~=\'outline\']::before {\n margin: 1rem 0;\n }\n @media not all and (width >= 1024px) {\n .atomic-list-with-dividers.density-compact [part~=\'outline\']::before {\n margin: 1.5rem 0;\n }\n }\n .atomic-list-with-dividers [part~=\'outline\']::before {\n display: block;\n content: \' \';\n height: 1px;\n background-color: var(--atomic-neutral);\n }\n .atomic-list-with-dividers [part~=\'outline\']:first-of-type::before {\n display: none;\n }\n .atomic-list-with-dividers atomic-result-placeholder::before {\n background-color: transparent;\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 .atomic-grid-display-common .list-wrapper {\n word-break: break-word;\n }\n .atomic-grid-display-common .list-root.display-grid {\n display: grid;\n justify-content: space-evenly;\n }\n .atomic-grid-display-common .list-root.display-grid .result-component {\n height: 100%;\n box-sizing: border-box;\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-\\[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-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 .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 .atomic-result-table {\n min-width: 100%;\n border-spacing: 0;\n border-collapse: separate;\n }\n .atomic-result-table th, .atomic-result-table td {\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n font-family: var(--atomic-font-family);\n font-size: var(--atomic-text-sm);\n line-height: var(--tw-leading, calc(1.25 / 0.875));\n line-height: 1rem;\n white-space: nowrap;\n }\n .atomic-result-table th:not(:first-child), .atomic-result-table td:not(:first-child) {\n border-left: none;\n }\n .atomic-result-table th:first-child, .atomic-result-table td:first-child {\n min-width: 19rem;\n }\n .atomic-result-table th {\n background-color: var(--atomic-neutral-light);\n border-bottom: none;\n font-weight: bold;\n color: black;\n padding: 1rem var(--padding);\n text-align: left;\n }\n .atomic-result-table th:first-child {\n border-top-left-radius: var(--atomic-border-radius-xl);\n }\n .atomic-result-table th:last-child {\n border-top-right-radius: var(--atomic-border-radius-xl);\n }\n .atomic-result-table td {\n color: var(--atomic-neutral-dark);\n border-top: none;\n vertical-align: top;\n padding: var(--padding);\n }\n .atomic-result-table.density-comfortable {\n --padding: 2rem;\n }\n .atomic-result-table.density-normal {\n --padding: 1.5rem;\n }\n .atomic-result-table.density-compact {\n --padding: 1rem;\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 @media (width >= 1024px) {\n .atomic-grid-display-desktop .list-root.display-grid {\n grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));\n }\n .atomic-grid-display-desktop .list-root.display-grid.density-comfortable {\n grid-row-gap: 4rem;\n grid-column-gap: 1.5rem;\n }\n .atomic-grid-display-desktop .list-root.display-grid.density-normal, .atomic-grid-display-desktop .list-root.display-grid.density-compact {\n grid-row-gap: 3rem;\n grid-column-gap: 1.5rem;\n }\n .atomic-grid-display-desktop .list-root.display-grid.image-large {\n grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));\n }\n @media not all and (width >= 1024px) {\n .atomic-grid-display-desktop .list-root.display-grid.image-small {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n @media (width >= 1024px) {\n .atomic-grid-display-desktop .list-root.display-grid.image-small {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n @media (min-width: 1280px) {\n .atomic-grid-display-desktop .list-root.display-grid.image-small {\n grid-template-columns: repeat(4, 1fr);\n }\n }\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 .atomic-grid-with-cards [part~=\'outline\'] {\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n padding: 1rem;\n border-radius: 1rem;\n }\n .atomic-grid-with-cards atomic-result-placeholder {\n border-color: transparent;\n }\n .atomic-grid-with-cards {\n grid-column-gap: 0.5rem;\n grid-row-gap: 0.5rem;\n }\n .atomic-list-with-cards [part~=\'outline\'] {\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n padding: 1rem;\n border-radius: 1rem;\n }\n .atomic-list-with-cards atomic-result-placeholder {\n border-color: transparent;\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 .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.list-wrapper.placeholder .result-component {\n display: none;\n}\n.list-wrapper.placeholder table.list-root {\n display: none;\n}\n.list-wrapper:not(.placeholder) atomic-result-placeholder {\n display: none;\n}\n.list-wrapper:not(.placeholder) atomic-result-table-placeholder {\n display: none;\n}\n.list-root.loading {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n@keyframes pulse {\n 0%, 100% {\n opacity: 0.6;\n }\n 50% {\n opacity: 0.2;\n }\n}\n[part~=\'divider\']:not(:last-child) {\n border-bottom-color: var(--atomic-neutral);\n padding-bottom: 1rem;\n}\n[part~=\'divider\'] {\n margin-bottom: 1rem;\n}\n.list-root.display-list {\n display: flex;\n flex-direction: column;\n}\n.list-root.display-list .result-component, .list-root.display-list atomic-result-placeholder {\n width: auto;\n}\n@media (width >= 1024px) {\n .list-root.display-list.density-comfortable [part~=\'outline\']::before {\n margin: 2rem 0;\n }\n .list-root.display-list.density-normal [part~=\'outline\']::before {\n margin: 1.5rem 0;\n }\n @media not all and (width >= 1024px) {\n .list-root.display-list.density-normal [part~=\'outline\']::before {\n margin: 1.75rem 0;\n }\n }\n .list-root.display-list.density-compact [part~=\'outline\']::before {\n margin: 1rem 0;\n }\n @media not all and (width >= 1024px) {\n .list-root.display-list.density-compact [part~=\'outline\']::before {\n margin: 1.5rem 0;\n }\n }\n .list-root.display-list [part~=\'outline\']::before {\n display: block;\n content: \' \';\n height: 1px;\n background-color: var(--atomic-neutral);\n }\n .list-root.display-list [part~=\'outline\']:first-of-type::before {\n display: none;\n }\n .list-root.display-list atomic-result-placeholder::before {\n background-color: transparent;\n }\n}\n@media not all and (width >= 1024px) {\n .list-root.display-list.image-large.density-comfortable [part~=\'outline\']::before {\n margin: 2rem 0;\n }\n .list-root.display-list.image-large.density-normal [part~=\'outline\']::before {\n margin: 1.5rem 0;\n }\n @media not all and (width >= 1024px) {\n .list-root.display-list.image-large.density-normal [part~=\'outline\']::before {\n margin: 1.75rem 0;\n }\n }\n .list-root.display-list.image-large.density-compact [part~=\'outline\']::before {\n margin: 1rem 0;\n }\n @media not all and (width >= 1024px) {\n .list-root.display-list.image-large.density-compact [part~=\'outline\']::before {\n margin: 1.5rem 0;\n }\n }\n .list-root.display-list.image-large [part~=\'outline\']::before {\n display: block;\n content: \' \';\n height: 1px;\n background-color: var(--atomic-neutral);\n }\n .list-root.display-list.image-large [part~=\'outline\']:first-of-type::before {\n display: none;\n }\n .list-root.display-list.image-large atomic-result-placeholder::before {\n background-color: transparent;\n }\n .list-root.display-list.image-large {\n display: grid;\n justify-content: space-evenly;\n grid-template-columns: minmax(auto, 35rem);\n }\n .list-root.display-list.image-small, .list-root.display-list.image-icon, .list-root.display-list.image-none {\n grid-row-gap: 1rem;\n }\n .list-root.display-list.image-small [part~=\'outline\'], .list-root.display-list.image-icon [part~=\'outline\'], .list-root.display-list.image-none [part~=\'outline\'] {\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n padding: 1rem;\n border-radius: 1rem;\n }\n .list-root.display-list.image-small atomic-result-placeholder, .list-root.display-list.image-icon atomic-result-placeholder, .list-root.display-list.image-none atomic-result-placeholder {\n border-color: transparent;\n }\n}\natomic-result:not(.hydrated) {\n visibility: hidden;\n}\n@property --tw-border-style {\n syntax: "";\n inherits: false;\n initial-value: solid;\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-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@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-border-style: solid;\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-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 j=z;var F=undefined&&undefined.__decorate\|\|function(n,t,r,i){var e=arguments.length,a=e<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,r):i,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(n,t,r,i);else for(var l=n.length-1;l>=0;l--)if(o=n[l])a=(e<3?o(a):e>3?o(t,r,a):o(t,r))\|\|a;return e>3&&a&&Object.defineProperty(t,r,a),a};const R=class{constructor(t){n(this,t);this.loadingFlag=g("firstResultLoaded-");this.display="list";this.resultTemplateRegistered=false;this.templateHasError=false;this.isAppLoaded=false;this.density="normal";this.imageSize="icon";this.tabsIncluded="[]";this.tabsExcluded="[]";this.numberOfFoldedResults=2;this.foldedResultListState=undefined;this.resultsPerPageState=undefined;this.tabManagerState=undefined;this.resultTemplateRegistered=false;this.error=undefined;this.templateHasError=false;this.isAppLoaded=false;this.density="normal";this.imageSize="icon";this.tabsIncluded="[]";this.tabsExcluded="[]";this.collectionField=undefined;this.parentField=undefined;this.childField=undefined;this.numberOfFoldedResults=2}async setRenderFunction(n){this.resultRenderingFunction=n}resolveFoldedResultList(n){n.preventDefault();n.stopPropagation();n.detail(this.foldedResultList)}loadCollection(n){n.preventDefault();n.stopPropagation();this.foldedResultList.loadCollection(n.detail)}get focusTarget(){if(!this.nextNewResultTarget){this.nextNewResultTarget=new m(this)}return this.nextNewResultTarget}initialize(){try{this.foldedResultList=this.initFolding();this.resultsPerPage=i(this.bindings.engine)}catch(n){this.error=n}this.itemTemplateProvider=new y({includeDefaultTemplate:true,templateElements:Array.from(this.host.querySelectorAll("atomic-result-template")),getResultTemplateRegistered:()=>this.resultTemplateRegistered,getTemplateHasError:()=>this.templateHasError,setResultTemplateRegistered:n=>{this.resultTemplateRegistered=n},setTemplateHasError:n=>{this.templateHasError=n},bindings:this.bindings});this.itemListCommon=new x({engineSubscribe:this.bindings.engine.subscribe,getCurrentNumberOfItems:()=>this.foldedResultListState.results.length,getIsLoading:()=>this.foldedResultListState.isLoading,host:this.host,loadingFlag:this.loadingFlag,nextNewItemTarget:this.focusTarget,store:this.bindings.store});this.tabManager=e(this.bindings.engine);b(this.bindings.store,(n=>{this.isAppLoaded=n}))}initFolding(n={options:{}}){return a(this.bindings.engine,{options:{...n.options,folding:{collectionField:this.collectionField,parentField:this.parentField,childField:this.childField,numberOfFoldedResults:this.numberOfFoldedResults}}})}watchTabManagerState(n,t){if(n?.activeTab!==t?.activeTab){this.bindings.store.unsetLoadingFlag(this.loadingFlag)}}render(){if(!p([...this.tabsIncluded],[...this.tabsExcluded],this.tabManagerState.activeTab)){return t(c,null)}this.itemListCommon.updateBreakpoints();const n=this.computeListDisplayClasses();return t(f,{hasError:this.foldedResultListState.hasError,firstRequestExecuted:this.foldedResultListState.firstSearchExecuted,hasItems:this.foldedResultListState.hasResults,hasTemplate:this.resultTemplateRegistered,templateHasError:this.itemTemplateProvider.hasError},t(u,{listClasses:n,display:this.display},t(h,{density:this.density,imageSize:this.imageSize,display:this.display,displayPlaceholders:!this.isAppLoaded,numberOfPlaceholders:this.resultsPerPageState.numberOfResults}),t(v,{firstRequestExecuted:this.foldedResultListState.firstSearchExecuted,hasItems:this.foldedResultListState.hasResults},this.foldedResultListState.results.map(((n,r)=>{const i=this.getPropsForAtomicResult(n);return t("atomic-result",{...i,part:"outline",ref:n=>n&&this.itemListCommon.setNewResultRef(n,r)})})))))}computeListDisplayClasses(){const n=!this.isAppLoaded;return k(this.display,this.density,this.imageSize,this.foldedResultListState.firstSearchExecuted&&this.foldedResultListState.isLoading,n)}getPropsForAtomicResult(n){const t=w(n);return{interactiveResult:o(this.bindings.engine,{options:{result:t}}),result:n,renderingFunction:this.resultRenderingFunction,loadingFlag:this.loadingFlag,key:this.itemListCommon.getResultId(t.uniqueId,this.foldedResultListState.searchResponseId,this.density,this.imageSize),content:this.itemTemplateProvider.getTemplateContent(t),store:this.bindings.store,density:this.density,imageSize:this.imageSize,display:this.display}}get host(){return r(this)}static get watchers(){return{tabManagerState:["watchTabManagerState"]}}};F([l()],R.prototype,"bindings",void 0);F([s("foldedResultList")],R.prototype,"foldedResultListState",void 0);F([s("resultsPerPage")],R.prototype,"resultsPerPageState",void 0);F([s("tabManager")],R.prototype,"tabManagerState",void 0);F([d()],R.prototype,"tabsIncluded",void 0);F([d()],R.prototype,"tabsExcluded",void 0);R.style=j;export{R as atomic_folded_result_list};
2	- //# sourceMappingURL=p-fd1ef9e3.entry.js.map

package/dist/atomic/p-fd1ef9e3.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["atomicFoldedResultListCss","AtomicFoldedResultListStyle0","AtomicFoldedResultList","this","loadingFlag","randomID","display","resultTemplateRegistered","templateHasError","isAppLoaded","density","imageSize","tabsIncluded","tabsExcluded","numberOfFoldedResults","setRenderFunction","resultRenderingFunction","resolveFoldedResultList","event","preventDefault","stopPropagation","detail","foldedResultList","loadCollection","focusTarget","nextNewResultTarget","FocusTargetController","initialize","initFolding","resultsPerPage","buildResultsPerPage","bindings","engine","e","error","itemTemplateProvider","ItemTemplateProvider","includeDefaultTemplate","templateElements","Array","from","host","querySelectorAll","getResultTemplateRegistered","getTemplateHasError","setResultTemplateRegistered","value","setTemplateHasError","itemListCommon","ItemListCommon","engineSubscribe","subscribe","getCurrentNumberOfItems","foldedResultListState","results","length","getIsLoading","isLoading","nextNewItemTarget","store","tabManager","buildTabManager","createAppLoadedListener","props","options","buildFoldedResultList","folding","collectionField","parentField","childField","watchTabManagerState","newValue","oldValue","activeTab","unsetLoadingFlag","render","shouldDisplayOnCurrentTab","tabManagerState","h","Hidden","updateBreakpoints","listClasses","computeListDisplayClasses","ItemListGuard","hasError","firstRequestExecuted","firstSearchExecuted","hasItems","hasResults","hasTemplate","DisplayWrapper","ResultsPlaceholdersGuard","displayPlaceholders","numberOfPlaceholders","resultsPerPageState","numberOfResults","ItemDisplayGuard","map","collection","i","propsForAtomicResult","getPropsForAtomicResult","part","ref","element","setNewResultRef","getItemListDisplayClasses","result","extractUnfoldedItem","interactiveResult","buildInteractiveResult","renderingFunction","key","getResultId","uniqueId","searchResponseId","content","getTemplateContent","__decorate","InitializeBindings","BindStateToController","ArrayProp"],"sources":["src/components/search/result-lists/atomic-folded-result-list/atomic-folded-result-list.pcss?tag=atomic-folded-result-list&encapsulation=shadow","src/components/search/result-lists/atomic-folded-result-list/atomic-folded-result-list.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n@import '../../../common/item-list/styles/placeholders.pcss';\n@import '../../../common/item-list/styles/list-display.pcss';\natomic-result:not(.hydrated) {\n visibility: hidden;\n}\n","import {FoldedItemListStateContextEvent} from '@/src/components/common/item-list/item-list-decorators';\nimport {\n ResultsPerPageState,\n ResultsPerPage,\n buildFoldedResultList,\n FoldedResultList,\n FoldedResultListState,\n buildResultsPerPage,\n ResultListProps,\n FoldedCollection,\n buildInteractiveResult,\n TabManager,\n TabManagerState,\n buildTabManager,\n} from '@coveo/headless';\nimport {\n Component,\n Element,\n State,\n Prop,\n Listen,\n Method,\n h,\n Watch,\n} from '@stencil/core';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {ArrayProp} from '../../../../utils/props-utils';\nimport {FocusTargetController} from '../../../../utils/stencil-accessibility-utils';\nimport {shouldDisplayOnCurrentTab} from '../../../../utils/tab-utils';\nimport {randomID} from '../../../../utils/utils';\nimport {ResultsPlaceholdersGuard} from '../../../common/atomic-result-placeholder/stencil-placeholders';\nimport {extractUnfoldedItem} from '../../../common/item-list/unfolded-item';\nimport {createAppLoadedListener} from '../../../common/interface/store';\nimport {ItemDisplayGuard} from '../../../common/item-list/item-display-guard';\nimport {ItemListGuard} from '../../../common/item-list/item-list-guard';\nimport {ItemTemplateProvider} from '../../../common/item-list/item-template-provider';\nimport {DisplayWrapper} from '../../../common/item-list/stencil-display-wrapper';\nimport {\n ItemListCommon,\n ItemRenderingFunction,\n} from '../../../common/item-list/stencil-item-list-common';\nimport {\n ItemDisplayDensity,\n ItemDisplayImageSize,\n ItemDisplayLayout,\n getItemListDisplayClasses,\n} from '../../../common/layout/display-options';\nimport {Hidden} from '../../../common/stencil-hidden';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-folded-result-list` component is responsible for displaying folded query results, by applying one or more result templates for up to three layers (i.e., to the result, child and grandchild).\n * @slot default - The default slot where the result templates are inserted.\n * @part result-list - The element containing every result of a result list\n * @part outline - The element displaying an outline or a divider around a result\n */\n@Component({\n tag: 'atomic-folded-result-list',\n styleUrl: 'atomic-folded-result-list.pcss',\n shadow: true,\n})\nexport class AtomicFoldedResultList implements InitializableComponent {\n @InitializeBindings() public bindings!: Bindings;\n public foldedResultList!: FoldedResultList;\n public resultsPerPage!: ResultsPerPage;\n private resultRenderingFunction: ItemRenderingFunction;\n private loadingFlag = randomID('firstResultLoaded-');\n private itemTemplateProvider!: ItemTemplateProvider;\n private nextNewResultTarget?: FocusTargetController;\n private itemListCommon!: ItemListCommon;\n private display: ItemDisplayLayout = 'list';\n\n @Element() public host!: HTMLDivElement;\n\n @BindStateToController('foldedResultList')\n @State()\n public foldedResultListState!: FoldedResultListState;\n @BindStateToController('resultsPerPage')\n @State()\n public resultsPerPageState!: ResultsPerPageState;\n public tabManager!: TabManager;\n @BindStateToController('tabManager')\n @State()\n public tabManagerState!: TabManagerState;\n @State() private resultTemplateRegistered = false;\n @State() public error!: Error;\n @State() private templateHasError = false;\n @State() private isAppLoaded = false;\n\n /**\n * The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.\n */\n @Prop({reflect: true}) density: ItemDisplayDensity = 'normal';\n /**\n * The expected size of the image displayed in the results.\n */\n @Prop({reflect: true}) imageSize: ItemDisplayImageSize = 'icon';\n /**\n * The tabs on which the folded result list can be displayed. This property should not be used at the same time as `tabs-excluded`.\n *\n * Set this property as a stringified JSON array, e.g.,\n * ```html\n * <atomic-folded-result-list tabs-included='[\"tabIDA\", \"tabIDB\"]'></atomic-folded-result-list snippet>\n * ```\n * If you don't set this property, the folded result list can be displayed on any tab. Otherwise, the folded result list can only be displayed on the specified tabs.\n */\n @ArrayProp()\n @Prop({reflect: true, mutable: true})\n public tabsIncluded: string[] | string = '[]';\n\n /**\n * The tabs on which this folded result list must not be displayed. This property should not be used at the same time as `tabs-included`.\n *\n * Set this property as a stringified JSON array, e.g.,\n * ```html\n * <atomic-folded-result-list tabs-excluded='[\"tabIDA\", \"tabIDB\"]'></atomic-folded-result-list>\n * ```\n * If you don't set this property, the folded result list can be displayed on any tab. Otherwise, the folded result list won't be displayed on any of the specified tabs.\n */\n @ArrayProp()\n @Prop({reflect: true, mutable: true})\n public tabsExcluded: string[] | string = '[]';\n /**\n * The name of the field on which to do the folding. The folded result list component will use the values of this field to resolve the collections of result items.\n *\n * @defaultValue `foldingcollection`\n */\n @Prop({reflect: true}) public collectionField?: string;\n /**\n * The name of the field that determines whether a certain result is a top result containing other child results within a collection.\n *\n * @defaultValue `foldingparent`\n */\n @Prop({reflect: true}) public parentField?: string;\n /**\n * The name of the field that uniquely identifies a result within a collection.\n *\n * @defaultValue `foldingchild`\n */\n @Prop({reflect: true}) public childField?: string;\n\n /**\n * The initial number of child results to request for each folded collection, before expansion.\n *\n * @defaultValue `2`\n *\n * @example For an email thread with a total of 20 messages, using the default value of `2` will request the top two child messages, based on the current sort criteria and query, to be returned as children of the parent message.\n * The user can then click to expand the collection and see the remaining messages that match the current query (i.e., not necessarily all remaining 18 messages). Those messages will be sorted based on the current sort criteria (i.e., not necessarily by date).\n * For more info on Result Folding, see [Result Folding](https://docs.coveo.com/en/1884).\n **/\n @Prop({reflect: true}) public numberOfFoldedResults = 2;\n\n /**\n * Sets a rendering function to bypass the standard HTML template mechanism for rendering results.\n * You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.\n *\n * Do not use this method if you integrate Atomic in a plain HTML deployment.\n */\n @Method() public async setRenderFunction(\n resultRenderingFunction: ItemRenderingFunction\n ) {\n this.resultRenderingFunction = resultRenderingFunction;\n }\n\n @Listen('atomic/resolveFoldedResultList')\n resolveFoldedResultList(event: FoldedItemListStateContextEvent) {\n event.preventDefault();\n event.stopPropagation();\n event.detail(this.foldedResultList);\n }\n\n @Listen('atomic/loadCollection')\n loadCollection(event: CustomEvent<FoldedCollection>) {\n event.preventDefault();\n event.stopPropagation();\n this.foldedResultList.loadCollection(event.detail);\n }\n\n public get focusTarget() {\n if (!this.nextNewResultTarget) {\n this.nextNewResultTarget = new FocusTargetController(this);\n }\n return this.nextNewResultTarget;\n }\n\n public initialize() {\n try {\n this.foldedResultList = this.initFolding();\n this.resultsPerPage = buildResultsPerPage(this.bindings.engine);\n } catch (e) {\n this.error = e as Error;\n }\n\n this.itemTemplateProvider = new ItemTemplateProvider({\n includeDefaultTemplate: true,\n templateElements: Array.from(\n this.host.querySelectorAll('atomic-result-template')\n ),\n getResultTemplateRegistered: () => this.resultTemplateRegistered,\n getTemplateHasError: () => this.templateHasError,\n setResultTemplateRegistered: (value: boolean) => {\n this.resultTemplateRegistered = value;\n },\n setTemplateHasError: (value: boolean) => {\n this.templateHasError = value;\n },\n bindings: this.bindings,\n });\n\n this.itemListCommon = new ItemListCommon({\n engineSubscribe: this.bindings.engine.subscribe,\n getCurrentNumberOfItems: () => this.foldedResultListState.results.length,\n getIsLoading: () => this.foldedResultListState.isLoading,\n host: this.host,\n loadingFlag: this.loadingFlag,\n nextNewItemTarget: this.focusTarget,\n store: this.bindings.store,\n });\n this.tabManager = buildTabManager(this.bindings.engine);\n\n createAppLoadedListener(this.bindings.store, (isAppLoaded) => {\n this.isAppLoaded = isAppLoaded;\n });\n }\n\n private initFolding(\n props: ResultListProps = {options: {}}\n ): FoldedResultList {\n return buildFoldedResultList(this.bindings.engine, {\n options: {\n ...props.options,\n folding: {\n collectionField: this.collectionField,\n parentField: this.parentField,\n childField: this.childField,\n numberOfFoldedResults: this.numberOfFoldedResults,\n },\n },\n });\n }\n\n @Watch('tabManagerState')\n watchTabManagerState(\n newValue: {activeTab: string},\n oldValue: {activeTab: string}\n ) {\n if (newValue?.activeTab !== oldValue?.activeTab) {\n this.bindings.store.unsetLoadingFlag(this.loadingFlag);\n }\n }\n\n public render() {\n if (\n !shouldDisplayOnCurrentTab(\n [...this.tabsIncluded],\n [...this.tabsExcluded],\n this.tabManagerState.activeTab\n )\n ) {\n return <Hidden></Hidden>;\n }\n this.itemListCommon.updateBreakpoints();\n const listClasses = this.computeListDisplayClasses();\n\n return (\n <ItemListGuard\n hasError={this.foldedResultListState.hasError}\n firstRequestExecuted={this.foldedResultListState.firstSearchExecuted}\n hasItems={this.foldedResultListState.hasResults}\n hasTemplate={this.resultTemplateRegistered}\n templateHasError={this.itemTemplateProvider.hasError}\n >\n <DisplayWrapper listClasses={listClasses} display={this.display}>\n <ResultsPlaceholdersGuard\n density={this.density}\n imageSize={this.imageSize}\n display={this.display}\n displayPlaceholders={!this.isAppLoaded}\n numberOfPlaceholders={this.resultsPerPageState.numberOfResults}\n ></ResultsPlaceholdersGuard>\n <ItemDisplayGuard\n firstRequestExecuted={\n this.foldedResultListState.firstSearchExecuted\n }\n hasItems={this.foldedResultListState.hasResults}\n >\n {this.foldedResultListState.results.map((collection, i) => {\n const propsForAtomicResult =\n this.getPropsForAtomicResult(collection);\n return (\n <atomic-result\n {...propsForAtomicResult}\n part=\"outline\"\n ref={(element) =>\n element && this.itemListCommon.setNewResultRef(element, i)\n }\n ></atomic-result>\n );\n })}\n </ItemDisplayGuard>\n </DisplayWrapper>\n </ItemListGuard>\n );\n }\n\n private computeListDisplayClasses() {\n const displayPlaceholders = !this.isAppLoaded;\n\n return getItemListDisplayClasses(\n this.display,\n this.density,\n this.imageSize,\n this.foldedResultListState.firstSearchExecuted &&\n this.foldedResultListState.isLoading,\n displayPlaceholders\n );\n }\n\n private getPropsForAtomicResult(collection: FoldedCollection) {\n const result = extractUnfoldedItem(collection);\n\n return {\n interactiveResult: buildInteractiveResult(this.bindings.engine, {\n options: {result},\n }),\n result: collection,\n renderingFunction: this.resultRenderingFunction,\n loadingFlag: this.loadingFlag,\n key: this.itemListCommon.getResultId(\n result.uniqueId,\n this.foldedResultListState.searchResponseId,\n this.density,\n this.imageSize\n ),\n content: this.itemTemplateProvider.getTemplateContent(result),\n store: this.bindings.store,\n density: this.density,\n imageSize: this.imageSize,\n display: this.display,\n };\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/atomic-search-box-instant-results.cjs.entry.js DELETED Viewed

@@ -1,186 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-757bc886.js');
-const headless = require('@coveo/headless');
-const stringUtils = require('./string-utils-bdf08f8c.js');
-const itemTemplateProvider = require('./item-template-provider-470c1774.js');
-const stencilButtonStyle = require('./stencil-button-style-ba779fe2.js');
-const suggestionsEvents = require('./suggestions-events-63dd0640.js');
-require('./dom-utils-d4790328.js');
-require('./event-utils-9bfcf3c5.js');
-const getPartialInstantItemElement = (i18n, itemTitle, itemUniqueId) => {
-    return {
-        ariaLabel: i18n.t('instant-results-suggestion-label', {
-            title: itemTitle,
-            interpolation: { escapeValue: false },
-        }),
-        key: `instant-result-${stringUtils.encodeForDomAttribute(itemUniqueId)}`,
-        part: 'instant-results-item',
-    };
-};
-const getPartialInstantItemShowAllElement = (i18n) => {
-    return {
-        key: 'instant-results-show-all-button',
-        part: 'instant-results-show-all',
-        ariaLabel: i18n.t('show-all-results'),
-    };
-};
-const InstantItemShowAllButton = ({ i18n }) => {
-    return (index.h("div", { part: "instant-results-show-all-button", class: stencilButtonStyle.getClassNameForButtonStyle('text-primary') }, i18n.t('show-all-results')));
-};
-const AtomicSearchBoxInstantResults = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.results = [];
-        this.display = 'list';
-        this.templateHasError = false;
-        /**
-         * The maximum number of results to show.
-         */
-        this.maxResultsPerQuery = 4;
-        /**
-         * The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.
-         */
-        this.density = 'normal';
-        /**
-         * The expected size of the image displayed in the results.
-         */
-        this.imageSize = 'icon';
-        this.error = undefined;
-        this.templateHasError = false;
-        this.maxResultsPerQuery = 4;
-        this.density = 'normal';
-        this.imageSize = 'icon';
-        this.ariaLabelGenerator = undefined;
-    }
-    /**
-     * Sets a rendering function to bypass the standard HTML template mechanism for rendering results.
-     * You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.
-     *
-     * Do not use this method if you integrate Atomic in a plain HTML deployment.
-     *
-     * @param resultRenderingFunction
-     */
-    async setRenderFunction(resultRenderingFunction) {
-        this.itemRenderingFunction = resultRenderingFunction;
-    }
-    componentWillLoad() {
-        try {
-            suggestionsEvents.dispatchSearchBoxSuggestionsEvent((bindings) => {
-                this.bindings = bindings;
-                return this.initialize();
-            }, this.host, ['atomic-search-box']);
-        }
-        catch (error) {
-            this.error = error;
-        }
-    }
-    getLink(el) {
-        const atomicResult = el.tagName === 'ATOMIC-RESULT' ? el : el?.querySelector('atomic-result');
-        return (atomicResult?.shadowRoot?.querySelector('atomic-result-link a:not([slot])') || null);
-    }
-    handleLinkClick(el, hasModifier) {
-        const setTarget = (value) => el.setAttribute('target', value);
-        const initialTarget = el.getAttribute('target');
-        hasModifier && setTarget('_blank');
-        el.click();
-        hasModifier && setTarget(initialTarget || '');
-        return true;
-    }
-    renderItems() {
-        if (!this.bindings.suggestedQuery() || this.bindings.store.isMobile()) {
-            return [];
-        }
-        const results = this.instantResults.state.results.length
-            ? this.instantResults.state.results
-            : this.results;
-        const elements = results.map((result) => {
-            const partialItem = getPartialInstantItemElement(this.bindings.i18n, this.ariaLabelGenerator?.(this.bindings, result) || result.title, result.uniqueId);
-            return {
-                ...partialItem,
-                content: (index.h("atomic-result", { key: `instant-result-${stringUtils.encodeForDomAttribute(result.uniqueId)}`, part: "outline", result: result, interactiveResult: headless.buildInteractiveInstantResult(this.bindings.engine, {
-                        options: { result },
-                    }), display: this.display, density: this.density, imageSize: this.imageSize, content: this.itemTemplateProvider.getTemplateContent(result), stopPropagation: false, renderingFunction: this.itemRenderingFunction })),
-                onSelect: (e) => {
-                    const link = this.getLink(e.target);
-                    if (!link) {
-                        return;
-                    }
-                    this.handleLinkClick(link, e.ctrlKey || e.metaKey);
-                },
-            };
-        });
-        if (elements.length) {
-            const partialItem = getPartialInstantItemShowAllElement(this.bindings.i18n);
-            elements.push({
-                ...partialItem,
-                content: index.h(InstantItemShowAllButton, { i18n: this.bindings.i18n }),
-                onSelect: () => {
-                    this.bindings.clearSuggestions();
-                    this.bindings.searchBoxController.updateText(this.instantResults.state.q);
-                    this.bindings.searchBoxController.submit();
-                },
-            });
-        }
-        return elements;
-    }
-    initialize() {
-        this.instantResults = headless.buildInstantResults(this.bindings.engine, {
-            options: {
-                maxResultsPerQuery: this.maxResultsPerQuery,
-            },
-        });
-        this.itemTemplateProvider = new itemTemplateProvider.ItemTemplateProvider({
-            includeDefaultTemplate: true,
-            templateElements: Array.from(this.host.querySelectorAll('atomic-result-template')),
-            getResultTemplateRegistered: () => true,
-            setResultTemplateRegistered: () => { },
-            getTemplateHasError: () => this.templateHasError,
-            setTemplateHasError: (value) => {
-                this.templateHasError = value;
-            },
-            bindings: this.bindings,
-        });
-        return {
-            position: Array.from(this.host.parentNode.children).indexOf(this.host),
-            panel: 'right',
-            onSuggestedQueryChange: (q) => {
-                this.instantResults.updateQuery(q);
-                return this.onSuggestedQueryChange();
-            },
-            renderItems: () => this.renderItems(),
-        };
-    }
-    onSuggestedQueryChange() {
-        if (!this.bindings.getSuggestionElements().length &&
-            !this.bindings.searchBoxController.state.value) {
-            console.warn("There doesn't seem to be any query suggestions configured. Make sure to include either an atomic-search-box-query-suggestions or atomic-search-box-recent-queries in your search box in order to see some instant results.");
-        }
-        return new Promise((resolve) => {
-            const unsubscribe = this.instantResults.subscribe(() => {
-                const state = this.instantResults.state;
-                if (!state.isLoading) {
-                    if (state.results.length) {
-                        this.results = state.results;
-                    }
-                    unsubscribe();
-                    resolve();
-                }
-            });
-        });
-    }
-    render() {
-        if (this.error) {
-            return (index.h("atomic-component-error", { key: 'e1471cd50dd5174b2c2e80588b7b2ad076810e15', element: this.host, error: this.error }));
-        }
-    }
-    get host() { return index.getElement(this); }
-};
-exports.atomic_search_box_instant_results = AtomicSearchBoxInstantResults;
-//# sourceMappingURL=atomic-search-box-instant-results.cjs.entry.js.map

package/dist/cjs/atomic-search-box-instant-results.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"atomic-search-box-instant-results.entry.cjs.js","mappings":";;;;;;;;;;;;;AAMO,MAAM,4BAA4B,GAAG,CAC1C,IAAU,EACV,SAAiB,EACjB,YAAoB;IAEpB,OAAO;QACL,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,kCAAkC,EAAE;YACpD,KAAK,EAAE,SAAS;YAChB,aAAa,EAAE,EAAC,WAAW,EAAE,KAAK,EAAC;SACpC,CAAC;QACF,GAAG,EAAE,kBAAkBA,iCAAqB,CAAC,YAAY,CAAC,EAAE;QAC5D,IAAI,EAAE,sBAAsB;KAC7B,CAAC;AACJ,CAAC,CAAC;AAEK,MAAM,mCAAmC,GAAG,CACjD,IAAU;IAEV,OAAO;QACL,GAAG,EAAE,iCAAiC;QACtC,IAAI,EAAE,0BAA0B;QAChC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC;KACtC,CAAC;AACJ,CAAC,CAAC;AAKK,MAAM,wBAAwB,GAEjC,CAAC,EAAC,IAAI,EAAC;IACT,QACEC,iBACE,IAAI,EAAC,iCAAiC,EACtC,KAAK,EAAEC,6CAA0B,CAAC,cAAc,CAAC,IAEhD,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,CACvB,EACN;AACJ,CAAC;;MCKY,6BAA6B;;;QAGhC,YAAO,GAAa,EAAE,CAAC;QAGvB,YAAO,GAAsB,MAAM,CAAC;QAK3B,qBAAgB,GAAG,KAAK,CAAC;;;;QAkBZ,uBAAkB,GAAG,CAAC,CAAC;;;;QAIvB,YAAO,GAAuB,QAAQ,CAAC;;;;QAIvC,cAAS,GAAyB,MAAM,CAAC;;gCA1BnC,KAAK;kCAkBU,CAAC;uBAIQ,QAAQ;yBAIJ,MAAM;;;;;;;;;;;IAhBrD,MAAM,iBAAiB,CACtC,uBAA8C;QAE9C,IAAI,CAAC,qBAAqB,GAAG,uBAAuB,CAAC;KACtD;IAoBM,iBAAiB;QACtB,IAAI;YACFC,mDAAiC,CAC/B,CAAC,QAAQ;gBACP,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;gBACzB,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;aAC1B,EACD,IAAI,CAAC,IAAI,EACT,CAAC,mBAAmB,CAAC,CACtB,CAAC;SACH;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAc,CAAC;SAC7B;KACF;IAEO,OAAO,CAAC,EAAe;QAC7B,MAAM,YAAY,GAChB,EAAE,CAAC,OAAO,KAAK,eAAe,GAAG,EAAE,GAAG,EAAE,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;QAE3E,QACE,YAAY,EAAE,UAAU,EAAE,aAAa,CACrC,kCAAkC,CACnC,IAAI,IAAI,EACT;KACH;IAEO,eAAe,CAAC,EAAe,EAAE,WAAoB;QAC3D,MAAM,SAAS,GAAG,CAAC,KAAa,KAAK,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACtE,MAAM,aAAa,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAEhD,WAAW,IAAI,SAAS,CAAC,QAAQ,CAAC,CAAC;QACnC,EAAE,CAAC,KAAK,EAAE,CAAC;QACX,WAAW,IAAI,SAAS,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC;QAE9C,OAAO,IAAI,CAAC;KACb;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE;YACrE,OAAO,EAAE,CAAC;SACX;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM;cACpD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO;cACjC,IAAI,CAAC,OAAO,CAAC;QAEjB,MAAM,QAAQ,GAAiC,OAAO,CAAC,GAAG,CACxD,CAAC,MAAc;YACb,MAAM,WAAW,GAAG,4BAA4B,CAC9C,IAAI,CAAC,QAAQ,CAAC,IAAI,EAClB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,IAAI,MAAM,CAAC,KAAK,EAChE,MAAM,CAAC,QAAQ,CAChB,CAAC;YACF,OAAO;gBACL,GAAG,WAAW;gBACd,OAAO,GACLF,2BACE,GAAG,EAAE,kBAAkBD,iCAAqB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,EAC/D,IAAI,EAAC,SAAS,EACd,MAAM,EAAE,MAAM,EACd,iBAAiB,EAAEI,sCAA6B,CAC9C,IAAI,CAAC,QAAQ,CAAC,MAAM,EACpB;wBACE,OAAO,EAAE,EAAC,MAAM,EAAC;qBAClB,CACF,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAC7D,eAAe,EAAE,KAAK,EACtB,iBAAiB,EAAE,IAAI,CAAC,qBAAqB,GAC9B,CAClB;gBACD,QAAQ,EAAE,CAAC,CAAa;oBACtB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAqB,CAAC,CAAC;oBAEnD,IAAI,CAAC,IAAI,EAAE;wBACT,OAAO;qBACR;oBACD,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;iBACpD;aACF,CAAC;SACH,CACF,CAAC;QACF,IAAI,QAAQ,CAAC,MAAM,EAAE;YACnB,MAAM,WAAW,GAAG,mCAAmC,CACrD,IAAI,CAAC,QAAQ,CAAC,IAAI,CACnB,CAAC;YACF,QAAQ,CAAC,IAAI,CAAC;gBACZ,GAAG,WAAW;gBACd,OAAO,EAAEH,QAAC,wBAAwB,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAI;gBAC/D,QAAQ,EAAE;oBACR,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC;oBACjC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,UAAU,CAC1C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAC5B,CAAC;oBACF,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC;iBAC5C;aACF,CAAC,CAAC;SACJ;QACD,OAAO,QAAQ,CAAC;KACjB;IAEM,UAAU;QACf,IAAI,CAAC,cAAc,GAAGI,4BAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC9D,OAAO,EAAE;gBACP,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;aAC5C;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,oBAAoB,GAAG,IAAIC,yCAAoB,CAAC;YACnD,sBAAsB,EAAE,IAAI;YAC5B,gBAAgB,EAAE,KAAK,CAAC,IAAI,CAC1B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CACrD;YACD,2BAA2B,EAAE,MAAM,IAAI;YACvC,2BAA2B,EAAE,SAAQ;YACrC,mBAAmB,EAAE,MAAM,IAAI,CAAC,gBAAgB;YAChD,mBAAmB,EAAE,CAAC,KAAc;gBAClC,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;aAC/B;YACD,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QAEH,OAAO;YACL,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;YACvE,KAAK,EAAE,OAAO;YACd,sBAAsB,EAAE,CAAC,CAAC;gBACxB,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;gBACnC,OAAO,IAAI,CAAC,sBAAsB,EAAE,CAAC;aACtC;YACD,WAAW,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE;SACtC,CAAC;KACH;IAEO,sBAAsB;QAC5B,IACE,CAAC,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,CAAC,MAAM;YAC7C,CAAC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,KAAK,CAAC,KAAK,EAC9C;YACA,OAAO,CAAC,IAAI,CACV,4NAA4N,CAC7N,CAAC;SACH;QAED,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO;YAC/B,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;gBAChD,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;gBACxC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;oBACpB,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE;wBACxB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;qBAC9B;oBACD,WAAW,EAAE,CAAC;oBACd,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QACEL,qFACE,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,GACO,EAC1B;SACH;KACF;;;;;;","names":["encodeForDomAttribute","h","getClassNameForButtonStyle","dispatchSearchBoxSuggestionsEvent","buildInteractiveInstantResult","buildInstantResults","ItemTemplateProvider"],"sources":["src/components/common/suggestions/stencil-instant-item.tsx","src/components/search/search-box-suggestions/atomic-search-box-instant-results/atomic-search-box-instant-results.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {encodeForDomAttribute} from '../../../utils/string-utils';\nimport {getClassNameForButtonStyle} from '../stencil-button-style';\nimport {SearchBoxSuggestionElement} from './suggestions-types';\n\nexport const getPartialInstantItemElement = (\n i18n: i18n,\n itemTitle: string,\n itemUniqueId: string\n): Pick<SearchBoxSuggestionElement, 'ariaLabel' | 'key' | 'part'> => {\n return {\n ariaLabel: i18n.t('instant-results-suggestion-label', {\n title: itemTitle,\n interpolation: {escapeValue: false},\n }),\n key: `instant-result-${encodeForDomAttribute(itemUniqueId)}`,\n part: 'instant-results-item',\n };\n};\n\nexport const getPartialInstantItemShowAllElement = (\n i18n: i18n\n): Pick<SearchBoxSuggestionElement, 'key' | 'part' | 'ariaLabel'> => {\n return {\n key: 'instant-results-show-all-button',\n part: 'instant-results-show-all',\n ariaLabel: i18n.t('show-all-results'),\n };\n};\n\ninterface InstantItemShowAllButtonProps {\n i18n: i18n;\n}\nexport const InstantItemShowAllButton: FunctionalComponent<\n InstantItemShowAllButtonProps\n> = ({i18n}) => {\n return (\n <div\n part=\"instant-results-show-all-button\"\n class={getClassNameForButtonStyle('text-primary')}\n >\n {i18n.t('show-all-results')}\n </div>\n );\n};\n","import {\n buildInstantResults,\n buildInteractiveInstantResult,\n InstantResults,\n Result,\n SearchBox,\n} from '@coveo/headless';\nimport {Component, Element, State, h, Prop, Method} from '@stencil/core';\nimport {InitializableComponent} from '../../../../utils/initialization-utils';\nimport {encodeForDomAttribute} from '../../../../utils/string-utils';\nimport {ItemTemplateProvider} from '../../../common/item-list/item-template-provider';\nimport {ItemRenderingFunction} from '../../../common/item-list/stencil-item-list-common';\nimport {\n ItemDisplayDensity,\n ItemDisplayImageSize,\n ItemDisplayLayout,\n} from '../../../common/layout/display-options';\nimport {\n getPartialInstantItemElement,\n getPartialInstantItemShowAllElement,\n InstantItemShowAllButton,\n} from '../../../common/suggestions/stencil-instant-item';\nimport {\n dispatchSearchBoxSuggestionsEvent,\n} from '../../../common/suggestions/suggestions-events';\nimport type {\n SearchBoxSuggestionElement,\n SearchBoxSuggestions,\n SearchBoxSuggestionsBindings,\n} from '../../../common/suggestions/suggestions-types';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\nexport type AriaLabelGenerator = (\n bindings: Bindings,\n result: Result\n) => string | undefined;\n\n/**\n * The `atomic-search-box-instant-results` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of instant results behavior.\n *\n * This component does not support accessibility out-of-the-box. To do so, see [Instant Results Accessibility](https://docs.coveo.com/en/atomic/latest/usage/accessibility/#instant-results-accessibility).\n *\n * This component is not supported on mobile.\n *\n * @slot default - The default slot where the instant results are rendered.\n */\n@Component({\n tag: 'atomic-search-box-instant-results',\n shadow: true,\n})\nexport class AtomicSearchBoxInstantResults implements InitializableComponent {\n public bindings!: SearchBoxSuggestionsBindings<SearchBox, Bindings>;\n private itemRenderingFunction: ItemRenderingFunction;\n private results: Result[] = [];\n private itemTemplateProvider!: ItemTemplateProvider;\n private instantResults!: InstantResults;\n private display: ItemDisplayLayout = 'list';\n\n @Element() public host!: HTMLElement;\n\n @State() public error!: Error;\n @State() private templateHasError = false;\n\n /**\n * Sets a rendering function to bypass the standard HTML template mechanism for rendering results.\n * You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.\n *\n * Do not use this method if you integrate Atomic in a plain HTML deployment.\n *\n * @param resultRenderingFunction\n */\n @Method() public async setRenderFunction(\n resultRenderingFunction: ItemRenderingFunction\n ) {\n this.itemRenderingFunction = resultRenderingFunction;\n }\n /**\n * The maximum number of results to show.\n */\n @Prop({reflect: true}) public maxResultsPerQuery = 4;\n /**\n * The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.\n */\n @Prop({reflect: true}) public density: ItemDisplayDensity = 'normal';\n /**\n * The expected size of the image displayed in the results.\n */\n @Prop({reflect: true}) public imageSize: ItemDisplayImageSize = 'icon';\n /**\n * The callback to generate an [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for a given result so that accessibility tools can fully describe what's visually rendered by a result.\n *\n * By default, or if an empty string is returned, `result.title` is used.\n */\n @Prop() public ariaLabelGenerator?: AriaLabelGenerator;\n\n public componentWillLoad() {\n try {\n dispatchSearchBoxSuggestionsEvent<SearchBox, Bindings>(\n (bindings) => {\n this.bindings = bindings;\n return this.initialize();\n },\n this.host,\n ['atomic-search-box']\n );\n } catch (error) {\n this.error = error as Error;\n }\n }\n\n private getLink(el: HTMLElement): HTMLElement | null {\n const atomicResult =\n el.tagName === 'ATOMIC-RESULT' ? el : el?.querySelector('atomic-result');\n\n return (\n atomicResult?.shadowRoot?.querySelector(\n 'atomic-result-link a:not([slot])'\n ) || null\n );\n }\n\n private handleLinkClick(el: HTMLElement, hasModifier: boolean) {\n const setTarget = (value: string) => el.setAttribute('target', value);\n const initialTarget = el.getAttribute('target');\n\n hasModifier && setTarget('_blank');\n el.click();\n hasModifier && setTarget(initialTarget || '');\n\n return true;\n }\n\n private renderItems(): SearchBoxSuggestionElement[] {\n if (!this.bindings.suggestedQuery() || this.bindings.store.isMobile()) {\n return [];\n }\n const results = this.instantResults.state.results.length\n ? this.instantResults.state.results\n : this.results;\n\n const elements: SearchBoxSuggestionElement[] = results.map(\n (result: Result) => {\n const partialItem = getPartialInstantItemElement(\n this.bindings.i18n,\n this.ariaLabelGenerator?.(this.bindings, result) || result.title,\n result.uniqueId\n );\n return {\n ...partialItem,\n content: (\n <atomic-result\n key={`instant-result-${encodeForDomAttribute(result.uniqueId)}`}\n part=\"outline\"\n result={result}\n interactiveResult={buildInteractiveInstantResult(\n this.bindings.engine,\n {\n options: {result},\n }\n )}\n display={this.display}\n density={this.density}\n imageSize={this.imageSize}\n content={this.itemTemplateProvider.getTemplateContent(result)}\n stopPropagation={false}\n renderingFunction={this.itemRenderingFunction}\n ></atomic-result>\n ),\n onSelect: (e: MouseEvent) => {\n const link = this.getLink(e.target as HTMLElement);\n\n if (!link) {\n return;\n }\n this.handleLinkClick(link, e.ctrlKey || e.metaKey);\n },\n };\n }\n );\n if (elements.length) {\n const partialItem = getPartialInstantItemShowAllElement(\n this.bindings.i18n\n );\n elements.push({\n ...partialItem,\n content: <InstantItemShowAllButton i18n={this.bindings.i18n} />,\n onSelect: () => {\n this.bindings.clearSuggestions();\n this.bindings.searchBoxController.updateText(\n this.instantResults.state.q\n );\n this.bindings.searchBoxController.submit();\n },\n });\n }\n return elements;\n }\n\n public initialize(): SearchBoxSuggestions {\n this.instantResults = buildInstantResults(this.bindings.engine, {\n options: {\n maxResultsPerQuery: this.maxResultsPerQuery,\n },\n });\n\n this.itemTemplateProvider = new ItemTemplateProvider({\n includeDefaultTemplate: true,\n templateElements: Array.from(\n this.host.querySelectorAll('atomic-result-template')\n ),\n getResultTemplateRegistered: () => true,\n setResultTemplateRegistered: () => {},\n getTemplateHasError: () => this.templateHasError,\n setTemplateHasError: (value: boolean) => {\n this.templateHasError = value;\n },\n bindings: this.bindings,\n });\n\n return {\n position: Array.from(this.host.parentNode!.children).indexOf(this.host),\n panel: 'right',\n onSuggestedQueryChange: (q) => {\n this.instantResults.updateQuery(q);\n return this.onSuggestedQueryChange();\n },\n renderItems: () => this.renderItems(),\n };\n }\n\n private onSuggestedQueryChange() {\n if (\n !this.bindings.getSuggestionElements().length &&\n !this.bindings.searchBoxController.state.value\n ) {\n console.warn(\n \"There doesn't seem to be any query suggestions configured. Make sure to include either an atomic-search-box-query-suggestions or atomic-search-box-recent-queries in your search box in order to see some instant results.\"\n );\n }\n\n return new Promise<void>((resolve) => {\n const unsubscribe = this.instantResults.subscribe(() => {\n const state = this.instantResults.state;\n if (!state.isLoading) {\n if (state.results.length) {\n this.results = state.results;\n }\n unsubscribe();\n resolve();\n }\n });\n });\n }\n\n public render() {\n if (this.error) {\n return (\n <atomic-component-error\n element={this.host}\n error={this.error}\n ></atomic-component-error>\n );\n }\n }\n}\n"],"version":3}

package/dist/cjs/atomic-search-box-query-suggestions.cjs.entry.js DELETED Viewed

@@ -1,76 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-757bc886.js');
-const headless = require('@coveo/headless');
-const search = require('./search-a4774f02.js');
-const stencilQuerySuggestions = require('./stencil-query-suggestions-03268ecc.js');
-const suggestionsEvents = require('./suggestions-events-63dd0640.js');
-require('./string-utils-bdf08f8c.js');
-require('./dom-utils-d4790328.js');
-require('./event-utils-9bfcf3c5.js');
-const AtomicSearchBoxQuerySuggestions = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.error = undefined;
-        this.icon = undefined;
-        this.maxWithQuery = undefined;
-        this.maxWithoutQuery = undefined;
-    }
-    componentWillLoad() {
-        try {
-            suggestionsEvents.dispatchSearchBoxSuggestionsEvent((bindings) => {
-                this.bindings = bindings;
-                return this.initialize();
-            }, this.host, ['atomic-search-box']);
-        }
-        catch (error) {
-            this.error = error;
-        }
-    }
-    initialize() {
-        const engine = this.bindings.engine;
-        const { registerQuerySuggest, fetchQuerySuggestions } = headless.loadQuerySuggestActions(engine);
-        engine.dispatch(registerQuerySuggest({
-            id: this.bindings.id,
-            count: this.bindings.numberOfQueries,
-        }));
-        return {
-            position: Array.from(this.host.parentNode.children).indexOf(this.host),
-            onInput: () => engine.dispatch(fetchQuerySuggestions({
-                id: this.bindings.id,
-            })),
-            renderItems: () => this.renderItems(),
-        };
-    }
-    renderItems() {
-        const hasQuery = this.bindings.searchBoxController.state.value !== '';
-        const max = hasQuery ? this.maxWithQuery : this.maxWithoutQuery;
-        return this.bindings.searchBoxController.state.suggestions
-            .slice(0, max)
-            .map((suggestion) => this.renderItem(suggestion));
-    }
-    renderItem(suggestion) {
-        const hasQuery = this.bindings.searchBoxController.state.value !== '';
-        const partialItem = stencilQuerySuggestions.getPartialSearchBoxSuggestionElement(suggestion, this.bindings.i18n);
-        return {
-            ...partialItem,
-            content: (index.h(stencilQuerySuggestions.QuerySuggestionContainer, null, index.h(stencilQuerySuggestions.QuerySuggestionIcon, { icon: this.icon || search.SearchIcon, hasSuggestion: this.bindings.getSuggestions().length > 1 }), index.h(stencilQuerySuggestions.QuerySuggestionText, { suggestion: suggestion, hasQuery: hasQuery }))),
-            onSelect: () => {
-                this.bindings.searchBoxController.selectSuggestion(suggestion.rawValue);
-            },
-        };
-    }
-    render() {
-        if (this.error) {
-            return (index.h("atomic-component-error", { key: '7fdb4afa7291ad70c37a9709fd7108f4fe0fb94d', element: this.host, error: this.error }));
-        }
-    }
-    get host() { return index.getElement(this); }
-};
-exports.atomic_search_box_query_suggestions = AtomicSearchBoxQuerySuggestions;
-//# sourceMappingURL=atomic-search-box-query-suggestions.cjs.entry.js.map

package/dist/cjs/atomic-search-box-query-suggestions.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"atomic-search-box-query-suggestions.entry.cjs.js","mappings":";;;;;;;;;;;;;MA8Ba,+BAA+B;;;;;;;;IAwB1C,iBAAiB;QACf,IAAI;YACFA,mDAAiC,CAC/B,CAAC,QAAQ;gBACP,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;gBACzB,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;aAC1B,EACD,IAAI,CAAC,IAAI,EACT,CAAC,mBAAmB,CAAC,CACtB,CAAC;SACH;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAc,CAAC;SAC7B;KACF;IAEO,UAAU;QAChB,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,MAG3B,CAAC;QACH,MAAM,EAAC,oBAAoB,EAAE,qBAAqB,EAAC,GACjDC,gCAAuB,CAAC,MAAM,CAAC,CAAC;QAElC,MAAM,CAAC,QAAQ,CACb,oBAAoB,CAAC;YACnB,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE;YACpB,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,eAAe;SACrC,CAAC,CACH,CAAC;QAEF,OAAO;YACL,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;YACvE,OAAO,EAAE,MACP,MAAM,CAAC,QAAQ,CACb,qBAAqB,CAAC;gBACpB,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE;aACrB,CAAC,CACH;YACH,WAAW,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE;SACtC,CAAC;KACH;IAEO,WAAW;QACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;QACtE,MAAM,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC;QAChE,OAAO,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,KAAK,CAAC,WAAW;aACvD,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC;aACb,GAAG,CAAC,CAAC,UAAU,KAAK,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC;KACrD;IAEO,UAAU,CAAC,UAAsB;QACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;QACtE,MAAM,WAAW,GAAGC,4DAAoC,CACtD,UAAU,EACV,IAAI,CAAC,QAAQ,CAAC,IAAI,CACnB,CAAC;QAEF,OAAO;YACL,GAAG,WAAW;YACd,OAAO,GACLC,QAACC,gDAAwB,QACvBD,QAACE,2CAAmB,IAClB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAIC,iBAAU,EAC7B,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,MAAM,GAAG,CAAC,GACxD,EAEFH,QAACI,2CAAmB,IAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC1C,CAC5B;YACD,QAAQ,EAAE;gBACR,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;aACzE;SACF,CAAC;KACH;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QACEJ,qFACE,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,GACO,EAC1B;SACH;KACF;;;;;;","names":["dispatchSearchBoxSuggestionsEvent","loadQuerySuggestActions","getPartialSearchBoxSuggestionElement","h","QuerySuggestionContainer","QuerySuggestionIcon","SearchIcon","QuerySuggestionText"],"sources":["src/components/search/search-box-suggestions/atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.tsx"],"sourcesContent":["import {\n loadQuerySuggestActions,\n SearchBox,\n SearchEngine,\n Suggestion,\n} from '@coveo/headless';\nimport {Component, Element, Prop, State, h} from '@stencil/core';\nimport SearchIcon from '../../../../images/search.svg';\nimport {\n getPartialSearchBoxSuggestionElement,\n QuerySuggestionContainer,\n QuerySuggestionIcon,\n QuerySuggestionText,\n} from '../../../common/suggestions/stencil-query-suggestions';\nimport {\n dispatchSearchBoxSuggestionsEvent,\n} from '../../../common/suggestions/suggestions-events';\nimport type {\n SearchBoxSuggestionElement,\n SearchBoxSuggestions,\n SearchBoxSuggestionsBindings,\n} from '../../../common/suggestions/suggestions-types';\n\n/**\n * The `atomic-search-box-query-suggestions` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of query suggestion behavior.\n */\n@Component({\n tag: 'atomic-search-box-query-suggestions',\n shadow: true,\n})\nexport class AtomicSearchBoxQuerySuggestions {\n private bindings!: SearchBoxSuggestionsBindings<SearchBox>;\n @Element() private host!: HTMLElement;\n\n @State() public error!: Error;\n\n /**\n * The SVG icon to display.\n *\n * - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location.\n * - Use a value that starts with `assets://`, to display an icon from the Atomic package.\n * - Use a stringified SVG to display it directly.\n */\n @Prop() public icon?: string;\n\n /**\n * The maximum number of suggestions that will be displayed if the user has typed something into the input field.\n */\n @Prop({reflect: true}) public maxWithQuery?: number;\n /**\n * The maximum number of suggestions that will be displayed initially when the input field is empty.\n */\n @Prop({reflect: true}) public maxWithoutQuery?: number;\n\n componentWillLoad() {\n try {\n dispatchSearchBoxSuggestionsEvent<SearchBox>(\n (bindings) => {\n this.bindings = bindings;\n return this.initialize();\n },\n this.host,\n ['atomic-search-box']\n );\n } catch (error) {\n this.error = error as Error;\n }\n }\n\n private initialize(): SearchBoxSuggestions {\n const engine = this.bindings.engine as SearchEngine<{\n querySet: string;\n querySuggest: string;\n }>;\n const {registerQuerySuggest, fetchQuerySuggestions} =\n loadQuerySuggestActions(engine);\n\n engine.dispatch(\n registerQuerySuggest({\n id: this.bindings.id,\n count: this.bindings.numberOfQueries,\n })\n );\n\n return {\n position: Array.from(this.host.parentNode!.children).indexOf(this.host),\n onInput: () =>\n engine.dispatch(\n fetchQuerySuggestions({\n id: this.bindings.id,\n })\n ),\n renderItems: () => this.renderItems(),\n };\n }\n\n private renderItems(): SearchBoxSuggestionElement[] {\n const hasQuery = this.bindings.searchBoxController.state.value !== '';\n const max = hasQuery ? this.maxWithQuery : this.maxWithoutQuery;\n return this.bindings.searchBoxController.state.suggestions\n .slice(0, max)\n .map((suggestion) => this.renderItem(suggestion));\n }\n\n private renderItem(suggestion: Suggestion) {\n const hasQuery = this.bindings.searchBoxController.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={this.icon || SearchIcon}\n hasSuggestion={this.bindings.getSuggestions().length > 1}\n />\n\n <QuerySuggestionText suggestion={suggestion} hasQuery={hasQuery} />\n </QuerySuggestionContainer>\n ),\n onSelect: () => {\n this.bindings.searchBoxController.selectSuggestion(suggestion.rawValue);\n },\n };\n }\n\n public render() {\n if (this.error) {\n return (\n <atomic-component-error\n element={this.host}\n error={this.error}\n ></atomic-component-error>\n );\n }\n }\n}\n"],"version":3}

package/dist/cjs/facet-guard-328b588d.js DELETED Viewed

@@ -1,15 +0,0 @@
-'use strict';
-const index = require('./index-757bc886.js');
-const initializationUtils = require('./initialization-utils-92f1b080.js');
-const FacetGuard = ({ hasError, enabled, firstSearchExecuted, hasResults }, children) => {
-    if (hasError || !enabled || (firstSearchExecuted && !hasResults)) {
-        return index.h(initializationUtils.Hidden, null);
-    }
-    return index.h(index.Fragment, null, children);
-};
-exports.FacetGuard = FacetGuard;
-//# sourceMappingURL=facet-guard-328b588d.js.map