@coveo/atomic 3.27.4-pre.fba84e863c → 3.27.4

package/dist/cjs/atomic-product-link.cjs.entry.js

@@ -9,15 +9,15 @@ const initializationUtils = require('./initialization-utils-62dc9852.js');
 const slotUtils = require('./slot-utils-948feedc.js');
 const attributesSlot = require('./attributes-slot-5799cb5b.js');
 const itemLink = require('./item-link-3844789d.js');
-const productUtils = require('./product-utils-ebd77919.js');
-const stencilProductTemplateDecorators = require('./stencil-product-template-decorators-42759048.js');
+const productUtils = require('./product-utils-9507462c.js');
+const stencilProductTemplateDecorators = require('./stencil-product-template-decorators-8c9cf847.js');
 require('./dom-utils-d4790328.js');
 require('./init-queue-a18aa323.js');
 require('./initialization-lit-stencil-common-utils-24279cfa.js');
 require('./xss-utils-185a1c77.js');
-require('@coveo/headless/commerce');
 require('./object-utils-799780d3.js');
-require('./error-69b9a539.js');
+require('@coveo/headless/commerce');
+require('./error-ad501bd7.js');
 require('./stencil-item-decorators-43a96f33.js');
 
 const atomicProductLinkCss = "/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */\n@layer properties;\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', '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  :-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: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .sticky {\n    position: sticky;\n  }\n  .-top-2 {\n    top: calc(0.25rem * -2);\n  }\n  .-top-4 {\n    top: calc(0.25rem * -4);\n  }\n  .top-0 {\n    top: calc(0.25rem * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-6 {\n    top: calc(0.25rem * 6);\n  }\n  .top-\\[4px\\] {\n    top: 4px;\n  }\n  .top-full {\n    top: 100%;\n  }\n  .top-px {\n    top: 1px;\n  }\n  .-right-2 {\n    right: calc(0.25rem * -2);\n  }\n  .right-0 {\n    right: calc(0.25rem * 0);\n  }\n  .right-2 {\n    right: calc(0.25rem * 2);\n  }\n  .right-6 {\n    right: calc(0.25rem * 6);\n  }\n  .right-12 {\n    right: calc(0.25rem * 12);\n  }\n  .right-20 {\n    right: calc(0.25rem * 20);\n  }\n  .right-px {\n    right: 1px;\n  }\n  .bottom-0 {\n    bottom: calc(0.25rem * 0);\n  }\n  .bottom-1 {\n    bottom: calc(0.25rem * 1);\n  }\n  .bottom-2 {\n    bottom: calc(0.25rem * 2);\n  }\n  .bottom-px {\n    bottom: 1px;\n  }\n  .left-0 {\n    left: calc(0.25rem * 0);\n  }\n  .left-1 {\n    left: calc(0.25rem * 1);\n  }\n  .left-2 {\n    left: calc(0.25rem * 2);\n  }\n  .left-\\[15px\\] {\n    left: 15px;\n  }\n  .isolate {\n    isolation: isolate;\n  }\n  .z-0 {\n    z-index: 0;\n  }\n  .z-1 {\n    z-index: 1;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-9998 {\n    z-index: 9998;\n  }\n  .z-9999 {\n    z-index: 9999;\n  }\n  .order-last {\n    order: 9999;\n  }\n  .col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .container {\n    width: 100%;\n  }\n  @media (width >= 1024px) {\n    .container {\n      max-width: 1024px;\n    }\n  }\n  @media (width >= 40rem) {\n    .container {\n      max-width: 40rem;\n    }\n  }\n  @media (width >= 48rem) {\n    .container {\n      max-width: 48rem;\n    }\n  }\n  @media (width >= 64rem) {\n    .container {\n      max-width: 64rem;\n    }\n  }\n  @media (width >= 80rem) {\n    .container {\n      max-width: 80rem;\n    }\n  }\n  @media (width >= 96rem) {\n    .container {\n      max-width: 96rem;\n    }\n  }\n  .m-0 {\n    margin: calc(0.25rem * 0);\n  }\n  .m-2 {\n    margin: calc(0.25rem * 2);\n  }\n  .mx-0\\.5 {\n    margin-inline: calc(0.25rem * 0.5);\n  }\n  .mx-1 {\n    margin-inline: calc(0.25rem * 1);\n  }\n  .mx-6 {\n    margin-inline: calc(0.25rem * 6);\n  }\n  .mx-16 {\n    margin-inline: calc(0.25rem * 16);\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .my-2 {\n    margin-block: calc(0.25rem * 2);\n  }\n  .my-3 {\n    margin-block: calc(0.25rem * 3);\n  }\n  .my-4 {\n    margin-block: calc(0.25rem * 4);\n  }\n  .my-6 {\n    margin-block: calc(0.25rem * 6);\n  }\n  .my-auto {\n    margin-block: auto;\n  }\n  .mt-0 {\n    margin-top: calc(0.25rem * 0);\n  }\n  .mt-1 {\n    margin-top: calc(0.25rem * 1);\n  }\n  .mt-1\\.5 {\n    margin-top: calc(0.25rem * 1.5);\n  }\n  .mt-2 {\n    margin-top: calc(0.25rem * 2);\n  }\n  .mt-2\\.5 {\n    margin-top: calc(0.25rem * 2.5);\n  }\n  .mt-3 {\n    margin-top: calc(0.25rem * 3);\n  }\n  .mt-4 {\n    margin-top: calc(0.25rem * 4);\n  }\n  .mt-6 {\n    margin-top: calc(0.25rem * 6);\n  }\n  .mt-7 {\n    margin-top: calc(0.25rem * 7);\n  }\n  .mt-8 {\n    margin-top: calc(0.25rem * 8);\n  }\n  .mt-10 {\n    margin-top: calc(0.25rem * 10);\n  }\n  .mt-px {\n    margin-top: 1px;\n  }\n  .mr-0 {\n    margin-right: calc(0.25rem * 0);\n  }\n  .mr-0\\.5 {\n    margin-right: calc(0.25rem * 0.5);\n  }\n  .mr-1 {\n    margin-right: calc(0.25rem * 1);\n  }\n  .mr-1\\.5 {\n    margin-right: calc(0.25rem * 1.5);\n  }\n  .mr-2 {\n    margin-right: calc(0.25rem * 2);\n  }\n  .mr-3 {\n    margin-right: calc(0.25rem * 3);\n  }\n  .mr-6 {\n    margin-right: calc(0.25rem * 6);\n  }\n  .mb-0 {\n    margin-bottom: calc(0.25rem * 0);\n  }\n  .mb-1 {\n    margin-bottom: calc(0.25rem * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(0.25rem * 2);\n  }\n  .mb-3 {\n    margin-bottom: calc(0.25rem * 3);\n  }\n  .mb-4 {\n    margin-bottom: calc(0.25rem * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(0.25rem * 6);\n  }\n  .ml-0\\.5 {\n    margin-left: calc(0.25rem * 0.5);\n  }\n  .ml-1 {\n    margin-left: calc(0.25rem * 1);\n  }\n  .ml-2 {\n    margin-left: calc(0.25rem * 2);\n  }\n  .ml-4 {\n    margin-left: calc(0.25rem * 4);\n  }\n  .ml-6 {\n    margin-left: calc(0.25rem * 6);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .box-border {\n    box-sizing: border-box;\n  }\n  .box-content {\n    box-sizing: content-box;\n  }\n  .line-clamp-1 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n  }\n  .line-clamp-2 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n  }\n  .line-clamp-3 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n  }\n  .line-clamp-4 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 4;\n  }\n  .line-clamp-none {\n    overflow: visible;\n    display: block;\n    -webkit-box-orient: horizontal;\n    -webkit-line-clamp: unset;\n  }\n  .block {\n    display: block;\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .table {\n    display: table;\n  }\n  .aspect-square {\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-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  .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-28 {\n    width: calc(0.25rem * 28);\n  }\n  .w-32 {\n    width: calc(0.25rem * 32);\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-72 {\n    width: calc(0.25rem * 72);\n  }\n  .w-100 {\n    width: calc(0.25rem * 100);\n  }\n  .w-\\[2\\.6rem\\] {\n    width: 2.6rem;\n  }\n  .w-auto {\n    width: auto;\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .w-max {\n    width: max-content;\n  }\n  .max-w-4\\/5 {\n    max-width: calc(4/5 * 100%);\n  }\n  .max-w-60 {\n    max-width: calc(0.25rem * 60);\n  }\n  .max-w-\\[30ch\\] {\n    max-width: 30ch;\n  }\n  .max-w-full {\n    max-width: 100%;\n  }\n  .max-w-lg {\n    max-width: 32rem;\n  }\n  .max-w-max {\n    max-width: max-content;\n  }\n  .min-w-0 {\n    min-width: calc(0.25rem * 0);\n  }\n  .min-w-10 {\n    min-width: calc(0.25rem * 10);\n  }\n  .min-w-20 {\n    min-width: calc(0.25rem * 20);\n  }\n  .min-w-24 {\n    min-width: calc(0.25rem * 24);\n  }\n  .min-w-full {\n    min-width: 100%;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-none {\n    flex: none;\n  }\n  .flex-shrink {\n    flex-shrink: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .flex-grow {\n    flex-grow: 1;\n  }\n  .grow {\n    flex-grow: 1;\n  }\n  .basis-1\\/2 {\n    flex-basis: calc(1/2 * 100%);\n  }\n  .basis-8 {\n    flex-basis: calc(0.25rem * 8);\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-1\\/2 {\n    --tw-translate-x: calc(1/2 * 100%);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-75 {\n    --tw-scale-x: 75%;\n    --tw-scale-y: 75%;\n    --tw-scale-z: 75%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-100 {\n    --tw-scale-x: 100%;\n    --tw-scale-y: 100%;\n    --tw-scale-z: 100%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-pulse {\n    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n  .animate-spin {\n    animation: spin 1s linear infinite;\n  }\n  .cursor-\\[inherit\\] {\n    cursor: inherit;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .resize-none {\n    resize: none;\n  }\n  .list-outside {\n    list-style-position: outside;\n  }\n  .list-decimal {\n    list-style-type: decimal;\n  }\n  .list-disc {\n    list-style-type: disc;\n  }\n  .list-none {\n    list-style-type: none;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-\\[min-content_1fr\\] {\n    grid-template-columns: min-content 1fr;\n  }\n  .grid-cols-\\[min-content_auto\\] {\n    grid-template-columns: min-content auto;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-nowrap {\n    flex-wrap: nowrap;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .place-items-center {\n    place-items: center;\n  }\n  .content-center {\n    align-content: center;\n  }\n  .items-baseline {\n    align-items: baseline;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .gap-0\\.5 {\n    gap: calc(0.25rem * 0.5);\n  }\n  .gap-1 {\n    gap: calc(0.25rem * 1);\n  }\n  .gap-2 {\n    gap: calc(0.25rem * 2);\n  }\n  .gap-3 {\n    gap: calc(0.25rem * 3);\n  }\n  .gap-4 {\n    gap: calc(0.25rem * 4);\n  }\n  .gap-8 {\n    gap: calc(0.25rem * 8);\n  }\n  .gap-x-1\\.5 {\n    column-gap: calc(0.25rem * 1.5);\n  }\n  .gap-x-2 {\n    column-gap: calc(0.25rem * 2);\n  }\n  .gap-x-4 {\n    column-gap: calc(0.25rem * 4);\n  }\n  :where(.space-x-1\\.5 > :not(:last-child)) {\n    --tw-space-x-reverse: 0;\n    margin-inline-start: calc(calc(0.25rem * 1.5) * var(--tw-space-x-reverse));\n    margin-inline-end: calc(calc(0.25rem * 1.5) * calc(1 - var(--tw-space-x-reverse)));\n  }\n  .gap-y-0\\.5 {\n    row-gap: calc(0.25rem * 0.5);\n  }\n  :where(.divide-y > :not(:last-child)) {\n    --tw-divide-y-reverse: 0;\n    border-bottom-style: var(--tw-border-style);\n    border-top-style: var(--tw-border-style);\n    border-top-width: calc(1px * var(--tw-divide-y-reverse));\n    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  }\n  :where(.divide-neutral > :not(:last-child)) {\n    border-color: var(--atomic-neutral);\n  }\n  .self-center {\n    align-self: center;\n  }\n  .self-start {\n    align-self: flex-start;\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .overflow-auto {\n    overflow: auto;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-auto {\n    overflow-x: auto;\n  }\n  .overflow-x-clip {\n    overflow-x: clip;\n  }\n  .overflow-x-scroll {\n    overflow-x: scroll;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .overflow-y-visible {\n    overflow-y: visible;\n  }\n  .scroll-smooth {\n    scroll-behavior: smooth;\n  }\n  .rounded {\n    border-radius: var(--atomic-border-radius);\n  }\n  .rounded-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-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-background {\n    background-color: var(--atomic-background);\n  }\n  .bg-error {\n    background-color: var(--atomic-error);\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  .fill-current {\n    fill: currentcolor;\n  }\n  .stroke-\\[1\\.25\\] {\n    stroke-width: 1.25;\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-5 {\n    padding-block: calc(0.25rem * 5);\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-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  .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-\\[calc\\(1\\/\\.75\\)\\] {\n    --tw-leading: calc(1 / .75);\n    line-height: calc(1 / .75);\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-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-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  .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, visibility, 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-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  .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  @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  @media (hover: hover) {\n    .peer-hover\\:text-error:is(:where(.peer):hover ~ *) {\n      color: var(--atomic-error);\n    }\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    content: var(--tw-content);\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  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    border-color: oklch(0.928 0.006 264.531);\n  }\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@keyframes scaleUp {\n  0% {\n    transform: scale(0.7) translateY(150vh);\n    opacity: 0.7;\n  }\n  100% {\n    transform: scale(1) translateY(0px);\n    opacity: 1;\n  }\n}\n@keyframes slideDown {\n  0% {\n    transform: translateY(0px);\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(150vh);\n    opacity: 0.7;\n  }\n}\natomic-product-link a {\n  color: var(--atomic-on-background);\n}\natomic-product-link a:hover, atomic-product-link a:focus-visible {\n  text-decoration: underline;\n  color: var(--atomic-primary);\n}\natomic-product-link a:focus {\n  outline: none;\n}\natomic-product-link a:visited {\n  color: var(--atomic-visited);\n}\natomic-product-link a {\n  color: var(--atomic-on-background);\n}\natomic-product-link a:hover, atomic-product-link a:focus-visible {\n  text-decoration: underline;\n  color: var(--atomic-primary);\n}\natomic-product-link a:focus {\n  outline: none;\n}\natomic-product-link a:visited {\n  color: var(--atomic-visited);\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-x-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-divide-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-gradient-position {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-via {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-to {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-via-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: \"*\";\n  initial-value: \"\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-x-reverse: 0;\n      --tw-divide-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-content: \"\";\n    }\n  }\n}\n";

package/dist/cjs/atomic-product-link.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-product-link.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,g32DAAg32D,CAAC;AAC942D,gCAAe,oBAAoB;;;;;;;;;;;;MC8BtB,iBAAiB;;;;;IA6BpB,gBAAgB,CAAC,OAAgB;QACvC,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SAC3C;KACF;IAEM,UAAU;QACf,IAAI,CAAC,IAAI,CAAC,aAAa,CACrBA,2BAAgB,CACd,+BAA+B,EAC/B,CAAC,eAAwB;YACvB,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;SACxC,CACF,CACF,CAAC;KACH;IAEM,iBAAiB;QACtB,MAAM,QAAQ,GAAG,YAAY,CAAC;QAC9B,IAAI,CAAC,cAAc,GAAG,CAAC,CAACC,gCAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1D,IAAI,CAAC,cAAc,GAAGC,wCAAyB,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KACtE;IAEM,MAAM;QACX,MAAM,IAAI,GAAGC,iBAAW,CAAC,IAAI,CAAC,YAAY,CAAC;cACvC,IAAI,CAAC,OAAO,CAAC,QAAQ;cACrBC,2CAA8B,CAC5B,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,QAAQ,CACd,CAAC;QAEN,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC5B,OAAO;SACR;QAED,MAAM,EAAC,cAAc,EAAC,GAAG,IAAI,CAAC,kBAAkB,CAAC;QAEjD,QACEC,QAACC,8BAAqB,IACpB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE;gBACR,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;gBACtC,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,CAAC;aAClC,EACD,oBAAoB,EAAE;gBACpB,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;gBACtC,IAAI,CAAC,kBAAkB,CAAC,kBAAkB,EAAE,CAAC;aAC9C,EACD,qBAAqB,EAAE;gBACrB,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;gBACtC,IAAI,CAAC,kBAAkB,CAAC,mBAAmB,EAAE,CAAC;aAC/C,EACD,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,eAAe,EAAE,IAAI,CAAC,eAAe,IAEpC,IAAI,CAAC,cAAc,IAClBD,qBAAQ,KAERA,iCACE,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,UAAU,GACG,CACxB,CACqB,EACxB;KACH;;;AAzFa,6CAA2B,GAAG,IAAH,CAAQ;AAHpB;IAA5BE,sCAAkB,EAAE;mDAAoC;AAK/B;IAAzBC,+CAAc,EAAE;kDAA2B;AACP;IAApCC,0DAAyB,EAAE;6DAAiD;;;;;","names":["buildCustomEvent","getDefaultSlotFromHost","getAttributesFromLinkSlot","isUndefined","buildStringTemplateFromProduct","h","LinkWithItemAnalytics","InitializeBindings","ProductContext","InteractiveProductContext"],"sources":["src/components/commerce/product-template-components/atomic-product-link/atomic-product-link.pcss?tag=atomic-product-link","src/components/commerce/product-template-components/atomic-product-link/atomic-product-link.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n@import '../../../../utils/tailwind-utilities/link-style.tw.css';\n\natomic-product-link {\n  a {\n    @apply link-style;\n  }\n}\n","import {isUndefined} from '@coveo/bueno';\nimport {InteractiveProduct} from '@coveo/headless/commerce';\nimport {Product} from '@coveo/headless/commerce';\nimport {Component, h, Prop, Element} from '@stencil/core';\nimport {buildCustomEvent} from '../../../../utils/event-utils';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {getDefaultSlotFromHost} from '../../../../utils/slot-utils';\nimport {getAttributesFromLinkSlot} from '../../../common/item-link/attributes-slot';\nimport {LinkWithItemAnalytics} from '../../../common/item-link/item-link';\nimport {CommerceBindings} from '../../atomic-commerce-interface/atomic-commerce-interface';\nimport {buildStringTemplateFromProduct} from '../product-utils';\nimport {\n  InteractiveProductContext,\n  ProductContext,\n} from '../stencil-product-template-decorators';\n\n/**\n * @alpha\n * The `atomic-product-link` component automatically transforms a search product title into a clickable link that points to the original item.\n * @slot default - Lets you display alternative content inside the link.\n * @slot attributes - Lets you pass [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) down to the link element, overriding other attributes. Use only with an \"a\" tag, e.g., `<a slot=\"attributes\" target=\"_blank\" download></a>`.\n *\n */\n@Component({\n  tag: 'atomic-product-link',\n  styleUrl: 'atomic-product-link.pcss',\n  shadow: false,\n})\nexport class AtomicProductLink\n  implements InitializableComponent<CommerceBindings>\n{\n  @InitializeBindings() public bindings!: CommerceBindings;\n  public error!: Error;\n\n  public static isCompatibleWithProductList = true;\n\n  @ProductContext() private product!: Product;\n  @InteractiveProductContext() private interactiveProduct!: InteractiveProduct;\n\n  @Element() private host!: HTMLElement;\n\n  /**\n   * The [template literal](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals) from which to generate the `href` attribute value\n   *\n   * The template literal can reference any number of product properties from the parent product. It can also reference the window object.\n   *\n   * For example, the following markup generates an `href` value such as `http://uri.com?id=itemTitle`, using the product's `clickUri` and `itemtitle` fields.\n   * ```html\n   * <atomic-product-link href-template='${clickUri}?id=${permanentId}'></atomic-product-link>\n   * ```\n   */\n  @Prop({reflect: true}) hrefTemplate?: string;\n\n  private hasDefaultSlot!: boolean;\n  private linkAttributes?: Attr[];\n  private stopPropagation?: boolean;\n\n  private logWarningIfNeed(warning?: string) {\n    if (warning) {\n      this.bindings.engine.logger.warn(warning);\n    }\n  }\n\n  public initialize() {\n    this.host.dispatchEvent(\n      buildCustomEvent(\n        'atomic/resolveStopPropagation',\n        (stopPropagation: boolean) => {\n          this.stopPropagation = stopPropagation;\n        }\n      )\n    );\n  }\n\n  public connectedCallback() {\n    const slotName = 'attributes';\n    this.hasDefaultSlot = !!getDefaultSlotFromHost(this.host);\n    this.linkAttributes = getAttributesFromLinkSlot(this.host, slotName);\n  }\n\n  public render() {\n    const href = isUndefined(this.hrefTemplate)\n      ? this.product.clickUri\n      : buildStringTemplateFromProduct(\n          this.hrefTemplate,\n          this.product,\n          this.bindings\n        );\n\n    if (!this.interactiveProduct) {\n      return;\n    }\n\n    const {warningMessage} = this.interactiveProduct;\n\n    return (\n      <LinkWithItemAnalytics\n        href={href}\n        onSelect={() => {\n          this.logWarningIfNeed(warningMessage);\n          this.interactiveProduct.select();\n        }}\n        onBeginDelayedSelect={() => {\n          this.logWarningIfNeed(warningMessage);\n          this.interactiveProduct.beginDelayedSelect();\n        }}\n        onCancelPendingSelect={() => {\n          this.logWarningIfNeed(warningMessage);\n          this.interactiveProduct.cancelPendingSelect();\n        }}\n        attributes={this.linkAttributes}\n        stopPropagation={this.stopPropagation}\n      >\n        {this.hasDefaultSlot ? (\n          <slot />\n        ) : (\n          <atomic-product-text\n            field=\"ec_name\"\n            default=\"no-title\"\n          ></atomic-product-text>\n        )}\n      </LinkWithItemAnalytics>\n    );\n  }\n}\n"],"version":3}
+{"file":"atomic-product-link.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,g32DAAg32D,CAAC;AAC942D,gCAAe,oBAAoB;;;;;;;;;;;;MC8BtB,iBAAiB;;;;;IA6BpB,gBAAgB,CAAC,OAAgB;QACvC,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SAC3C;KACF;IAEM,UAAU;QACf,IAAI,CAAC,IAAI,CAAC,aAAa,CACrBA,2BAAgB,CACd,+BAA+B,EAC/B,CAAC,eAAwB;YACvB,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;SACxC,CACF,CACF,CAAC;KACH;IAEM,iBAAiB;QACtB,MAAM,QAAQ,GAAG,YAAY,CAAC;QAC9B,IAAI,CAAC,cAAc,GAAG,CAAC,CAACC,gCAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1D,IAAI,CAAC,cAAc,GAAGC,wCAAyB,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KACtE;IAEM,MAAM;QACX,MAAM,IAAI,GAAGC,iBAAW,CAAC,IAAI,CAAC,YAAY,CAAC;cACvC,IAAI,CAAC,OAAO,CAAC,QAAQ;cACrBC,2CAA8B,CAC5B,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,QAAQ,CACd,CAAC;QAEN,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC5B,OAAO;SACR;QAED,MAAM,EAAC,cAAc,EAAC,GAAG,IAAI,CAAC,kBAAkB,CAAC;QAEjD,QACEC,QAACC,8BAAqB,IACpB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE;gBACR,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;gBACtC,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,CAAC;aAClC,EACD,oBAAoB,EAAE;gBACpB,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;gBACtC,IAAI,CAAC,kBAAkB,CAAC,kBAAkB,EAAE,CAAC;aAC9C,EACD,qBAAqB,EAAE;gBACrB,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;gBACtC,IAAI,CAAC,kBAAkB,CAAC,mBAAmB,EAAE,CAAC;aAC/C,EACD,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,eAAe,EAAE,IAAI,CAAC,eAAe,IAEpC,IAAI,CAAC,cAAc,IAClBD,qBAAQ,KAERA,iCACE,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,UAAU,GACG,CACxB,CACqB,EACxB;KACH;;;AAzFa,6CAA2B,GAAG,IAAH,CAAQ;AAHpB;IAA5BE,sCAAkB,EAAE;mDAAoC;AAK/B;IAAzBC,+CAAc,EAAE;kDAA2B;AACP;IAApCC,0DAAyB,EAAE;6DAAiD;;;;;","names":["buildCustomEvent","getDefaultSlotFromHost","getAttributesFromLinkSlot","isUndefined","buildStringTemplateFromProduct","h","LinkWithItemAnalytics","InitializeBindings","ProductContext","InteractiveProductContext"],"sources":["src/components/commerce/atomic-product-link/atomic-product-link.pcss?tag=atomic-product-link","src/components/commerce/atomic-product-link/atomic-product-link.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n@import '../../../utils/tailwind-utilities/link-style.tw.css';\n\natomic-product-link {\n  a {\n    @apply link-style;\n  }\n}\n","import {isUndefined} from '@coveo/bueno';\nimport {InteractiveProduct} from '@coveo/headless/commerce';\nimport {Product} from '@coveo/headless/commerce';\nimport {Component, h, Prop, Element} from '@stencil/core';\nimport {buildCustomEvent} from '../../../utils/event-utils';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {getDefaultSlotFromHost} from '../../../utils/slot-utils';\nimport {getAttributesFromLinkSlot} from '../../common/item-link/attributes-slot';\nimport {LinkWithItemAnalytics} from '../../common/item-link/item-link';\nimport {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';\nimport {buildStringTemplateFromProduct} from '../product-template-component-utils/product-utils';\nimport {\n  ProductContext,\n  InteractiveProductContext,\n} from '../product-template-component-utils/stencil-product-template-decorators';\n\n/**\n * @alpha\n * The `atomic-product-link` component automatically transforms a search product title into a clickable link that points to the original item.\n * @slot default - Lets you display alternative content inside the link.\n * @slot attributes - Lets you pass [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) down to the link element, overriding other attributes. Use only with an \"a\" tag, e.g., `<a slot=\"attributes\" target=\"_blank\" download></a>`.\n *\n */\n@Component({\n  tag: 'atomic-product-link',\n  styleUrl: 'atomic-product-link.pcss',\n  shadow: false,\n})\nexport class AtomicProductLink\n  implements InitializableComponent<CommerceBindings>\n{\n  @InitializeBindings() public bindings!: CommerceBindings;\n  public error!: Error;\n\n  public static isCompatibleWithProductList = true;\n\n  @ProductContext() private product!: Product;\n  @InteractiveProductContext() private interactiveProduct!: InteractiveProduct;\n\n  @Element() private host!: HTMLElement;\n\n  /**\n   * The [template literal](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals) from which to generate the `href` attribute value\n   *\n   * The template literal can reference any number of product properties from the parent product. It can also reference the window object.\n   *\n   * For example, the following markup generates an `href` value such as `http://uri.com?id=itemTitle`, using the product's `clickUri` and `itemtitle` fields.\n   * ```html\n   * <atomic-product-link href-template='${clickUri}?id=${permanentId}'></atomic-product-link>\n   * ```\n   */\n  @Prop({reflect: true}) hrefTemplate?: string;\n\n  private hasDefaultSlot!: boolean;\n  private linkAttributes?: Attr[];\n  private stopPropagation?: boolean;\n\n  private logWarningIfNeed(warning?: string) {\n    if (warning) {\n      this.bindings.engine.logger.warn(warning);\n    }\n  }\n\n  public initialize() {\n    this.host.dispatchEvent(\n      buildCustomEvent(\n        'atomic/resolveStopPropagation',\n        (stopPropagation: boolean) => {\n          this.stopPropagation = stopPropagation;\n        }\n      )\n    );\n  }\n\n  public connectedCallback() {\n    const slotName = 'attributes';\n    this.hasDefaultSlot = !!getDefaultSlotFromHost(this.host);\n    this.linkAttributes = getAttributesFromLinkSlot(this.host, slotName);\n  }\n\n  public render() {\n    const href = isUndefined(this.hrefTemplate)\n      ? this.product.clickUri\n      : buildStringTemplateFromProduct(\n          this.hrefTemplate,\n          this.product,\n          this.bindings\n        );\n\n    if (!this.interactiveProduct) {\n      return;\n    }\n\n    const {warningMessage} = this.interactiveProduct;\n\n    return (\n      <LinkWithItemAnalytics\n        href={href}\n        onSelect={() => {\n          this.logWarningIfNeed(warningMessage);\n          this.interactiveProduct.select();\n        }}\n        onBeginDelayedSelect={() => {\n          this.logWarningIfNeed(warningMessage);\n          this.interactiveProduct.beginDelayedSelect();\n        }}\n        onCancelPendingSelect={() => {\n          this.logWarningIfNeed(warningMessage);\n          this.interactiveProduct.cancelPendingSelect();\n        }}\n        attributes={this.linkAttributes}\n        stopPropagation={this.stopPropagation}\n      >\n        {this.hasDefaultSlot ? (\n          <slot />\n        ) : (\n          <atomic-product-text\n            field=\"ec_name\"\n            default=\"no-title\"\n          ></atomic-product-text>\n        )}\n      </LinkWithItemAnalytics>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/atomic-product-multi-value-text.cjs.entry.js

@@ -7,7 +7,7 @@ const commerce = require('@coveo/headless/commerce');
 const fieldUtils = require('./field-utils-a715deca.js');
 const initializationUtils = require('./initialization-utils-62dc9852.js');
 const utils = require('./utils-b6642872.js');
-const stencilProductTemplateDecorators = require('./stencil-product-template-decorators-42759048.js');
+const stencilProductTemplateDecorators = require('./stencil-product-template-decorators-8c9cf847.js');
 require('./dom-utils-d4790328.js');
 require('./event-utils-9bfcf3c5.js');
 require('./init-queue-a18aa323.js');

package/dist/cjs/atomic-product-multi-value-text.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-product-multi-value-text.entry.cjs.js","mappings":"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","names":["buildProductListing","buildSearch","ProductTemplatesHelpers","getFieldValueCaption","titleToKebab","h","InitializeBindings","ProductContext"],"sources":["src/components/commerce/product-template-components/atomic-product-multi-value-text/atomic-product-multi-value-text.pcss?tag=atomic-product-multi-value-text&encapsulation=shadow","src/components/commerce/product-template-components/atomic-product-multi-value-text/atomic-product-multi-value-text.tsx"],"sourcesContent":[":host {\n  > ul {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n    li {\n      display: inline-block;\n    }\n  }\n}\n\n.separator {\n  &::before {\n    display: inline;\n    content: ',\\00a0';\n  }\n}\n","import {\n  BreadcrumbManager,\n  buildProductListing,\n  buildSearch,\n  Product,\n  ProductListing,\n  ProductTemplatesHelpers,\n  Search,\n  RegularFacetValue,\n} from '@coveo/headless/commerce';\nimport {Component, Element, Prop, h, State, VNode} from '@stencil/core';\nimport {getFieldValueCaption} from '../../../../utils/field-utils';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {titleToKebab} from '../../../../utils/utils';\nimport {CommerceBindings} from '../../atomic-commerce-interface/atomic-commerce-interface';\nimport {ProductContext} from '../stencil-product-template-decorators';\n\n/**\n * @alpha\n *\n * The `atomic-product-multi-value-text` component renders the values of a multi-value string field.\n * @part product-multi-value-text-list - The list of field values.\n * @part product-multi-value-text-separator - The separator to display between each of the field values.\n * @part product-multi-value-text-value - A field value.\n * @part product-multi-value-text-value-more - A label indicating some values were omitted.\n * @slot product-multi-value-text-value-* - A custom caption value that's specified for a given part of a multi-text field value. For example, if you want to use `Off-Campus Resident` as a caption value for `Off-campus apartment` in `Off-campus apartment;On-campus apartment`, you'd use `<span slot=\"product-multi-value-text-value-off-campus-apartment\">Off-Campus Resident</span>`). The suffix of this slot corresponds with the field value, written in kebab case.\n */\n@Component({\n  tag: 'atomic-product-multi-value-text',\n  styleUrl: 'atomic-product-multi-value-text.pcss',\n  shadow: true,\n})\nexport class AtomicProductMultiValueText {\n  public breadcrumbManager!: BreadcrumbManager;\n  public searchOrListing!: Search | ProductListing;\n\n  @InitializeBindings() public bindings!: CommerceBindings;\n  @ProductContext() private product!: Product;\n\n  @Element() host!: HTMLElement;\n\n  @State() public error!: Error;\n\n  /**\n   * The field that the component should use.\n   * The component will try to find this field in the `Product.additionalFields` object unless it finds it in the `Product` object first.\n   * Make sure this field is present in the `fieldsToInclude` property of the `atomic-commerce-interface` component.\n   */\n  @Prop({reflect: true}) public field!: string;\n\n  /**\n   * The maximum number of field values to display.\n   * If there are _n_ more values than the specified maximum, the last displayed value will be \"_n_ more...\".\n   */\n  @Prop({reflect: true}) public maxValuesToDisplay = 3;\n\n  /**\n   * The delimiter used to separate values when the field isn't indexed as a multi value field.\n   */\n  @Prop({reflect: true}) public delimiter: string | null = null;\n\n  private sortedValues: string[] | null = null;\n\n  public initialize() {\n    if (this.bindings.interfaceElement.type === 'product-listing') {\n      this.searchOrListing = buildProductListing(this.bindings.engine);\n    } else {\n      this.searchOrListing = buildSearch(this.bindings.engine);\n    }\n\n    this.breadcrumbManager = this.searchOrListing.breadcrumbManager();\n  }\n\n  private get productValues() {\n    const value = ProductTemplatesHelpers.getProductProperty(\n      this.product,\n      this.field\n    );\n\n    if (value === null) {\n      return null;\n    }\n\n    if (Array.isArray(value)) {\n      return value.map((v) => `${v}`.trim());\n    }\n\n    if (typeof value !== 'string' || value.trim() === '') {\n      this.error = new Error(\n        `Could not parse \"${value}\" from field \"${this.field}\" as a string array.`\n      );\n      return null;\n    }\n\n    return this.delimiter\n      ? value.split(this.delimiter).map((value) => value.trim())\n      : [value];\n  }\n\n  private get facetSelectedValues() {\n    return this.breadcrumbManager.state.facetBreadcrumbs\n      .filter((facet) => facet.field === this.field)\n      .reduce(\n        (values, facet) => [\n          ...values,\n          ...facet.values.map(({value}) => (value as RegularFacetValue).value),\n        ],\n        [] as string[]\n      );\n  }\n\n  private updateSortedValues() {\n    const allValues = this.productValues;\n    if (allValues === null) {\n      this.sortedValues = null;\n      return;\n    }\n    const firstValues = this.facetSelectedValues.filter((value) =>\n      allValues.includes(value)\n    );\n    this.sortedValues = Array.from(new Set([...firstValues, ...allValues]));\n  }\n\n  private getShouldDisplayLabel(values: string[]) {\n    return (\n      this.maxValuesToDisplay > 0 && values.length > this.maxValuesToDisplay\n    );\n  }\n\n  private getNumberOfValuesToDisplay(values: string[]) {\n    return Math.min(values.length, this.maxValuesToDisplay);\n  }\n\n  private renderValue(value: string) {\n    const label = getFieldValueCaption(this.field, value, this.bindings.i18n);\n    const kebabValue = titleToKebab(value);\n    return (\n      <li key={value} part=\"product-multi-value-text-value\">\n        <slot name={`product-multi-value-text-value-${kebabValue}`}>\n          {label}\n        </slot>\n      </li>\n    );\n  }\n\n  private renderSeparator(beforeValue: string, afterValue: string) {\n    return (\n      <li\n        aria-hidden=\"true\"\n        part=\"product-multi-value-text-separator\"\n        key={`${beforeValue}~${afterValue}`}\n        class=\"separator\"\n      ></li>\n    );\n  }\n\n  private renderMoreLabel(value: number) {\n    return (\n      <li key=\"more-field-values\" part=\"product-multi-value-text-value-more\">\n        {this.bindings.i18n.t('n-more', {value})}\n      </li>\n    );\n  }\n\n  private renderListItems(values: string[]) {\n    const numberOfValuesToDisplay = this.getNumberOfValuesToDisplay(values);\n\n    const nodes: VNode[] = [];\n    for (let i = 0; i < numberOfValuesToDisplay; i++) {\n      if (i > 0) {\n        nodes.push(this.renderSeparator(values[i - 1], values[i]));\n      }\n      nodes.push(this.renderValue(values[i]));\n    }\n    if (this.getShouldDisplayLabel(values)) {\n      nodes.push(\n        this.renderSeparator(\n          values[numberOfValuesToDisplay - 1],\n          'more-field-values'\n        )\n      );\n      nodes.push(this.renderMoreLabel(values.length - numberOfValuesToDisplay));\n    }\n    return nodes;\n  }\n\n  public componentWillRender() {\n    this.updateSortedValues();\n  }\n\n  public render() {\n    if (this.sortedValues === null) {\n      this.host.remove();\n      return;\n    }\n    return (\n      <ul part=\"product-multi-value-text-list\">\n        {...this.renderListItems(this.sortedValues)}\n      </ul>\n    );\n  }\n}\n"],"version":3}
+{"file":"atomic-product-multi-value-text.entry.cjs.js","mappings":"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","names":["buildProductListing","buildSearch","ProductTemplatesHelpers","getFieldValueCaption","titleToKebab","h","InitializeBindings","ProductContext"],"sources":["src/components/commerce/atomic-product-multi-value-text/atomic-product-multi-value-text.pcss?tag=atomic-product-multi-value-text&encapsulation=shadow","src/components/commerce/atomic-product-multi-value-text/atomic-product-multi-value-text.tsx"],"sourcesContent":[":host {\n  > ul {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n    li {\n      display: inline-block;\n    }\n  }\n}\n\n.separator {\n  &::before {\n    display: inline;\n    content: ',\\00a0';\n  }\n}\n","import {\n  BreadcrumbManager,\n  buildProductListing,\n  buildSearch,\n  Product,\n  ProductListing,\n  ProductTemplatesHelpers,\n  Search,\n  RegularFacetValue,\n} from '@coveo/headless/commerce';\nimport {Component, Element, Prop, h, State, VNode} from '@stencil/core';\nimport {getFieldValueCaption} from '../../../utils/field-utils';\nimport {InitializeBindings} from '../../../utils/initialization-utils';\nimport {titleToKebab} from '../../../utils/utils';\nimport {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';\nimport {ProductContext} from '../product-template-component-utils/stencil-product-template-decorators';\n\n/**\n * @alpha\n *\n * The `atomic-product-multi-value-text` component renders the values of a multi-value string field.\n * @part product-multi-value-text-list - The list of field values.\n * @part product-multi-value-text-separator - The separator to display between each of the field values.\n * @part product-multi-value-text-value - A field value.\n * @part product-multi-value-text-value-more - A label indicating some values were omitted.\n * @slot product-multi-value-text-value-* - A custom caption value that's specified for a given part of a multi-text field value. For example, if you want to use `Off-Campus Resident` as a caption value for `Off-campus apartment` in `Off-campus apartment;On-campus apartment`, you'd use `<span slot=\"product-multi-value-text-value-off-campus-apartment\">Off-Campus Resident</span>`). The suffix of this slot corresponds with the field value, written in kebab case.\n */\n@Component({\n  tag: 'atomic-product-multi-value-text',\n  styleUrl: 'atomic-product-multi-value-text.pcss',\n  shadow: true,\n})\nexport class AtomicProductMultiValueText {\n  public breadcrumbManager!: BreadcrumbManager;\n  public searchOrListing!: Search | ProductListing;\n\n  @InitializeBindings() public bindings!: CommerceBindings;\n  @ProductContext() private product!: Product;\n\n  @Element() host!: HTMLElement;\n\n  @State() public error!: Error;\n\n  /**\n   * The field that the component should use.\n   * The component will try to find this field in the `Product.additionalFields` object unless it finds it in the `Product` object first.\n   * Make sure this field is present in the `fieldsToInclude` property of the `atomic-commerce-interface` component.\n   */\n  @Prop({reflect: true}) public field!: string;\n\n  /**\n   * The maximum number of field values to display.\n   * If there are _n_ more values than the specified maximum, the last displayed value will be \"_n_ more...\".\n   */\n  @Prop({reflect: true}) public maxValuesToDisplay = 3;\n\n  /**\n   * The delimiter used to separate values when the field isn't indexed as a multi value field.\n   */\n  @Prop({reflect: true}) public delimiter: string | null = null;\n\n  private sortedValues: string[] | null = null;\n\n  public initialize() {\n    if (this.bindings.interfaceElement.type === 'product-listing') {\n      this.searchOrListing = buildProductListing(this.bindings.engine);\n    } else {\n      this.searchOrListing = buildSearch(this.bindings.engine);\n    }\n\n    this.breadcrumbManager = this.searchOrListing.breadcrumbManager();\n  }\n\n  private get productValues() {\n    const value = ProductTemplatesHelpers.getProductProperty(\n      this.product,\n      this.field\n    );\n\n    if (value === null) {\n      return null;\n    }\n\n    if (Array.isArray(value)) {\n      return value.map((v) => `${v}`.trim());\n    }\n\n    if (typeof value !== 'string' || value.trim() === '') {\n      this.error = new Error(\n        `Could not parse \"${value}\" from field \"${this.field}\" as a string array.`\n      );\n      return null;\n    }\n\n    return this.delimiter\n      ? value.split(this.delimiter).map((value) => value.trim())\n      : [value];\n  }\n\n  private get facetSelectedValues() {\n    return this.breadcrumbManager.state.facetBreadcrumbs\n      .filter((facet) => facet.field === this.field)\n      .reduce(\n        (values, facet) => [\n          ...values,\n          ...facet.values.map(({value}) => (value as RegularFacetValue).value),\n        ],\n        [] as string[]\n      );\n  }\n\n  private updateSortedValues() {\n    const allValues = this.productValues;\n    if (allValues === null) {\n      this.sortedValues = null;\n      return;\n    }\n    const firstValues = this.facetSelectedValues.filter((value) =>\n      allValues.includes(value)\n    );\n    this.sortedValues = Array.from(new Set([...firstValues, ...allValues]));\n  }\n\n  private getShouldDisplayLabel(values: string[]) {\n    return (\n      this.maxValuesToDisplay > 0 && values.length > this.maxValuesToDisplay\n    );\n  }\n\n  private getNumberOfValuesToDisplay(values: string[]) {\n    return Math.min(values.length, this.maxValuesToDisplay);\n  }\n\n  private renderValue(value: string) {\n    const label = getFieldValueCaption(this.field, value, this.bindings.i18n);\n    const kebabValue = titleToKebab(value);\n    return (\n      <li key={value} part=\"product-multi-value-text-value\">\n        <slot name={`product-multi-value-text-value-${kebabValue}`}>\n          {label}\n        </slot>\n      </li>\n    );\n  }\n\n  private renderSeparator(beforeValue: string, afterValue: string) {\n    return (\n      <li\n        aria-hidden=\"true\"\n        part=\"product-multi-value-text-separator\"\n        key={`${beforeValue}~${afterValue}`}\n        class=\"separator\"\n      ></li>\n    );\n  }\n\n  private renderMoreLabel(value: number) {\n    return (\n      <li key=\"more-field-values\" part=\"product-multi-value-text-value-more\">\n        {this.bindings.i18n.t('n-more', {value})}\n      </li>\n    );\n  }\n\n  private renderListItems(values: string[]) {\n    const numberOfValuesToDisplay = this.getNumberOfValuesToDisplay(values);\n\n    const nodes: VNode[] = [];\n    for (let i = 0; i < numberOfValuesToDisplay; i++) {\n      if (i > 0) {\n        nodes.push(this.renderSeparator(values[i - 1], values[i]));\n      }\n      nodes.push(this.renderValue(values[i]));\n    }\n    if (this.getShouldDisplayLabel(values)) {\n      nodes.push(\n        this.renderSeparator(\n          values[numberOfValuesToDisplay - 1],\n          'more-field-values'\n        )\n      );\n      nodes.push(this.renderMoreLabel(values.length - numberOfValuesToDisplay));\n    }\n    return nodes;\n  }\n\n  public componentWillRender() {\n    this.updateSortedValues();\n  }\n\n  public render() {\n    if (this.sortedValues === null) {\n      this.host.remove();\n      return;\n    }\n    return (\n      <ul part=\"product-multi-value-text-list\">\n        {...this.renderListItems(this.sortedValues)}\n      </ul>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/atomic-product-numeric-field-value.cjs.entry.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-757bc886.js');
 const initializationUtils = require('./initialization-utils-62dc9852.js');
 const formatCommon = require('./format-common-4aa8aa88.js');
-const productUtils = require('./product-utils-ebd77919.js');
-const stencilProductTemplateDecorators = require('./stencil-product-template-decorators-42759048.js');
+const productUtils = require('./product-utils-9507462c.js');
+const stencilProductTemplateDecorators = require('./stencil-product-template-decorators-8c9cf847.js');
 require('./dom-utils-d4790328.js');
 require('./event-utils-9bfcf3c5.js');
 require('./init-queue-a18aa323.js');
 require('./initialization-lit-stencil-common-utils-24279cfa.js');
-require('@coveo/headless/commerce');
 require('./object-utils-799780d3.js');
-require('./error-69b9a539.js');
+require('@coveo/headless/commerce');
+require('./error-ad501bd7.js');
 require('./stencil-item-decorators-43a96f33.js');
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

package/dist/cjs/atomic-product-numeric-field-value.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-product-numeric-field-value.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;MAqBa,8BAA8B;;;QAchC,cAAS,GAAoBA,mCAAsB,CAAC;QAEpD,mBAAc,GAAkB,IAAI,CAAC;;;yBAFRA,mCAAsB;8BAEnB,IAAI;;IAGtC,SAAS,CAAC,KAAmC;QAClD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;KAC/B;IAEO,WAAW,CAAC,KAAa;QAC/B,IAAI;YACF,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAqB,CAAC,CAAC;SACxE;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAc,CAAC;YAC5B,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;SACzB;KACF;IAEO,oBAAoB;QAC1B,MAAM,KAAK,GAAGC,uBAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACnD,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAC/C;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE;YAChC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACnB,OAAO;SACR;QACD,OAAO,IAAI,CAAC,cAAc,CAAC;KAC5B;;;AAlD4B;IAA5BC,sCAAkB,EAAE;gEAAoC;AAC/B;IAAzBC,+CAAc,EAAE;+DAA2B;;;;","names":["defaultNumberFormatter","parseValue","InitializeBindings","ProductContext"],"sources":["src/components/commerce/product-template-components/atomic-product-numeric-field-value/atomic-product-numeric-field-value.tsx"],"sourcesContent":["import {Product} from '@coveo/headless/commerce';\nimport {Component, Prop, Element, State, Listen} from '@stencil/core';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {\n  defaultNumberFormatter,\n  NumberFormatter,\n} from '../../../common/formats/format-common';\nimport {CommerceBindings} from '../../atomic-commerce-interface/atomic-commerce-interface';\nimport {parseValue} from '../product-utils';\nimport {ProductContext} from '../stencil-product-template-decorators';\n\n/**\n * @alpha\n * The `atomic-product-numeric-field-value` component renders the value of a number product field.\n *\n * The number can be formatted by adding a `atomic-format-number`, `atomic-format-currency` or `atomic-format-unit` component into this component.\n */\n@Component({\n  tag: 'atomic-product-numeric-field-value',\n  shadow: false,\n})\nexport class AtomicProductNumericFieldValue {\n  @InitializeBindings() public bindings!: CommerceBindings;\n  @ProductContext() private product!: Product;\n\n  @Element() host!: HTMLElement;\n\n  @State() public error!: Error;\n\n  /**\n   * The field that the component should use.\n   * The component will try to find this field in the `Product.additionalFields` object unless it finds it in the `Product` object first.\n   */\n  @Prop({reflect: true}) field!: string;\n\n  @State() formatter: NumberFormatter = defaultNumberFormatter;\n\n  @State() valueToDisplay: string | null = null;\n\n  @Listen('atomic/numberFormat')\n  public setFormat(event: CustomEvent<NumberFormatter>) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.formatter = event.detail;\n  }\n\n  private formatValue(value: number) {\n    try {\n      return this.formatter(value, this.bindings.i18n.languages as string[]);\n    } catch (error) {\n      this.error = error as Error;\n      return value.toString();\n    }\n  }\n\n  private updateValueToDisplay() {\n    const value = parseValue(this.product, this.field);\n    if (value !== null) {\n      this.valueToDisplay = this.formatValue(value);\n    }\n  }\n\n  componentWillRender() {\n    this.updateValueToDisplay();\n  }\n\n  public render() {\n    if (this.valueToDisplay === null) {\n      this.host.remove();\n      return;\n    }\n    return this.valueToDisplay;\n  }\n}\n"],"version":3}
+{"file":"atomic-product-numeric-field-value.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;MAqBa,8BAA8B;;;QAchC,cAAS,GAAoBA,mCAAsB,CAAC;QAEpD,mBAAc,GAAkB,IAAI,CAAC;;;yBAFRA,mCAAsB;8BAEnB,IAAI;;IAGtC,SAAS,CAAC,KAAmC;QAClD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;KAC/B;IAEO,WAAW,CAAC,KAAa;QAC/B,IAAI;YACF,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAqB,CAAC,CAAC;SACxE;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAc,CAAC;YAC5B,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;SACzB;KACF;IAEO,oBAAoB;QAC1B,MAAM,KAAK,GAAGC,uBAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACnD,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAC/C;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE;YAChC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACnB,OAAO;SACR;QACD,OAAO,IAAI,CAAC,cAAc,CAAC;KAC5B;;;AAlD4B;IAA5BC,sCAAkB,EAAE;gEAAoC;AAC/B;IAAzBC,+CAAc,EAAE;+DAA2B;;;;","names":["defaultNumberFormatter","parseValue","InitializeBindings","ProductContext"],"sources":["src/components/commerce/atomic-product-numeric-field-value/atomic-product-numeric-field-value.tsx"],"sourcesContent":["import {Product} from '@coveo/headless/commerce';\nimport {Component, Prop, Element, State, Listen} from '@stencil/core';\nimport {InitializeBindings} from '../../../utils/initialization-utils';\nimport {\n  defaultNumberFormatter,\n  NumberFormatter,\n} from '../../common/formats/format-common';\nimport {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';\nimport {parseValue} from '../product-template-component-utils/product-utils';\nimport {ProductContext} from '../product-template-component-utils/stencil-product-template-decorators';\n\n/**\n * @alpha\n * The `atomic-product-numeric-field-value` component renders the value of a number product field.\n *\n * The number can be formatted by adding a `atomic-format-number`, `atomic-format-currency` or `atomic-format-unit` component into this component.\n */\n@Component({\n  tag: 'atomic-product-numeric-field-value',\n  shadow: false,\n})\nexport class AtomicProductNumericFieldValue {\n  @InitializeBindings() public bindings!: CommerceBindings;\n  @ProductContext() private product!: Product;\n\n  @Element() host!: HTMLElement;\n\n  @State() public error!: Error;\n\n  /**\n   * The field that the component should use.\n   * The component will try to find this field in the `Product.additionalFields` object unless it finds it in the `Product` object first.\n   */\n  @Prop({reflect: true}) field!: string;\n\n  @State() formatter: NumberFormatter = defaultNumberFormatter;\n\n  @State() valueToDisplay: string | null = null;\n\n  @Listen('atomic/numberFormat')\n  public setFormat(event: CustomEvent<NumberFormatter>) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.formatter = event.detail;\n  }\n\n  private formatValue(value: number) {\n    try {\n      return this.formatter(value, this.bindings.i18n.languages as string[]);\n    } catch (error) {\n      this.error = error as Error;\n      return value.toString();\n    }\n  }\n\n  private updateValueToDisplay() {\n    const value = parseValue(this.product, this.field);\n    if (value !== null) {\n      this.valueToDisplay = this.formatValue(value);\n    }\n  }\n\n  componentWillRender() {\n    this.updateValueToDisplay();\n  }\n\n  public render() {\n    if (this.valueToDisplay === null) {\n      this.host.remove();\n      return;\n    }\n    return this.valueToDisplay;\n  }\n}\n"],"version":3}

package/dist/cjs/atomic-product-price.cjs.entry.js

@@ -6,14 +6,14 @@ const index = require('./index-757bc886.js');
 const commerce = require('@coveo/headless/commerce');
 const initializationUtils = require('./initialization-utils-62dc9852.js');
 const formatCommon = require('./format-common-4aa8aa88.js');
-const productUtils = require('./product-utils-ebd77919.js');
-const stencilProductTemplateDecorators = require('./stencil-product-template-decorators-42759048.js');
+const productUtils = require('./product-utils-9507462c.js');
+const stencilProductTemplateDecorators = require('./stencil-product-template-decorators-8c9cf847.js');
 require('./dom-utils-d4790328.js');
 require('./event-utils-9bfcf3c5.js');
 require('./init-queue-a18aa323.js');
 require('./initialization-lit-stencil-common-utils-24279cfa.js');
 require('./object-utils-799780d3.js');
-require('./error-69b9a539.js');
+require('./error-ad501bd7.js');
 require('./stencil-item-decorators-43a96f33.js');
 
 const atomicProductPriceCss = ".display-grid atomic-product-price{display:flex;flex-wrap:wrap;flex-direction:column}.display-grid atomic-product-price .original-price{line-height:1}";
@@ -72,7 +72,7 @@ const AtomicProductPrice = class {
         const originalPrice = this.hasPromotionalPrice
             ? this.getFormattedValue('ec_price')
             : null;
-        return (index.h(index.Host, { key: 'bb09e69021da5eefeebdee3c3f74a2720ddb2cf6', class: "flex flex-wrap gap-1" }, index.h("div", { key: '72ff8d4f6260308328cf2b20fb0d9467b37e7149', class: `truncate break-keep ${this.hasPromotionalPrice && 'text-error'}` }, mainPrice), index.h("div", { key: 'b117208d1617544d5cb67a8ee107fae6eba9eeaf', class: 'original-price content-center truncate text-xl break-keep line-through' +
+        return (index.h(index.Host, { key: '7d51c571a51f80e120d05940da3d962ac5df55ad', class: "flex flex-wrap gap-1" }, index.h("div", { key: '47a53a0de1a2ef5abd66d013785940c2c2ac75da', class: `truncate break-keep ${this.hasPromotionalPrice && 'text-error'}` }, mainPrice), index.h("div", { key: '88e44908aa6d20b0edc372887ef8a8ebbcfac2df', class: 'original-price content-center truncate text-xl break-keep line-through' +
                 (!originalPrice ? ' invisible' : '') }, originalPrice ?? '​')));
     }
 };

package/dist/cjs/atomic-product-price.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-product-price.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;AAAA,MAAM,qBAAqB,GAAG,wJAAwJ,CAAC;AACvL,iCAAe,qBAAqB;;;;;;;;;;;;MCyBvB,kBAAkB;;;;IAUtB,UAAU;QACf,IAAI,CAAC,OAAO,GAAGA,qBAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;KACnD;IAEO,WAAW,CAAC,KAAa;QAC/B,IAAI;YACF,MAAM,EAAC,QAAQ,EAAC,GAAG,IAAI,CAAC,YAAY,CAAC;YACrC,MAAM,SAAS,GAAGC,qCAAwB,CAAC,QAAQ,CAAC,CAAC;YACrD,OAAO,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAqB,CAAC,CAAC;SACnE;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAc,CAAC;YAC5B,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;SACzB;KACF;IAEO,KAAK,CAAC,KAAa;QACzB,IAAI;YACF,OAAOC,uBAAU,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;SACxC;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAc,CAAC;YAC5B,OAAO,IAAI,CAAC;SACb;KACF;IAEO,iBAAiB,CAAC,KAAa;QACrC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAChC,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAChC;KACF;IAED,IAAY,mBAAmB;QAC7B,QACE,IAAI,CAAC,OAAO,CAAC,cAAc,KAAK,IAAI;YACpC,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,IAAI;YAC9B,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EACnD;KACH;IAEM,MAAM;QACX,MAAM,SAAS,GAAG,IAAI,CAAC,iBAAiB,CACtC,IAAI,CAAC,mBAAmB,GAAG,gBAAgB,GAAG,UAAU,CACzD,CAAC;QAEF,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB;cAC1C,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;cAClC,IAAI,CAAC;QAET,QACEC,QAACC,UAAI,qDAAC,KAAK,EAAC,sBAAsB,IAChCD,kEACE,KAAK,EAAE,uBAAuB,IAAI,CAAC,mBAAmB,IAAI,YAAY,EAAE,IAEvE,SAAS,CACN,EAENA,kEACE,KAAK,EACH,wEAAwE;iBACvE,CAAC,aAAa,GAAG,YAAY,GAAG,EAAE,CAAC,IAGrC,aAAa,IAAI,GAAG,CACjB,CACD,EACP;KACH;;AAzE4B;IAA5BE,sCAAkB,EAAE;oDAAoC;AAG/B;IAAzBC,+CAAc,EAAE;mDAA2B;AAEV;IAAjCC,yCAAqB,CAAC,SAAS,CAAC;wDAA6B;;;;;","names":["buildContext","defaultCurrencyFormatter","parseValue","h","Host","InitializeBindings","ProductContext","BindStateToController"],"sources":["src/components/commerce/product-template-components/atomic-product-price/atomic-product-price.pcss?tag=atomic-product-price","src/components/commerce/product-template-components/atomic-product-price/atomic-product-price.tsx"],"sourcesContent":[".display-grid {\n  & atomic-product-price {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: column;\n\n    & .original-price {\n      line-height: 1;\n    }\n  }\n}\n","import {\n  buildContext,\n  Product,\n  Context,\n  ContextState,\n} from '@coveo/headless/commerce';\nimport {Component, h, Host} from '@stencil/core';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {defaultCurrencyFormatter} from '../../../common/formats/format-common';\nimport {CommerceBindings} from '../../atomic-commerce-interface/atomic-commerce-interface';\nimport {parseValue} from '../product-utils';\nimport {ProductContext} from '../stencil-product-template-decorators';\n\n/**\n * @alpha\n * The `atomic-product-price` component renders the price of a product.\n */\n@Component({\n  tag: 'atomic-product-price',\n  styleUrl: 'atomic-product-price.pcss',\n  shadow: false,\n})\nexport class AtomicProductPrice\n  implements InitializableComponent<CommerceBindings>\n{\n  @InitializeBindings() public bindings!: CommerceBindings;\n  public error!: Error;\n\n  @ProductContext() private product!: Product;\n  public context!: Context;\n  @BindStateToController('context') contextState!: ContextState;\n\n  public initialize(): void {\n    this.context = buildContext(this.bindings.engine);\n  }\n\n  private formatValue(value: number) {\n    try {\n      const {currency} = this.contextState;\n      const formatter = defaultCurrencyFormatter(currency);\n      return formatter(value, this.bindings.i18n.languages as string[]);\n    } catch (error) {\n      this.error = error as Error;\n      return value.toString();\n    }\n  }\n\n  private parse(field: string) {\n    try {\n      return parseValue(this.product, field);\n    } catch (error) {\n      this.error = error as Error;\n      return null;\n    }\n  }\n\n  private getFormattedValue(field: string) {\n    const value = this.parse(field);\n    if (value !== null) {\n      return this.formatValue(value);\n    }\n  }\n\n  private get hasPromotionalPrice() {\n    return (\n      this.product.ec_promo_price !== null &&\n      this.product.ec_price !== null &&\n      this.product.ec_promo_price < this.product.ec_price\n    );\n  }\n\n  public render() {\n    const mainPrice = this.getFormattedValue(\n      this.hasPromotionalPrice ? 'ec_promo_price' : 'ec_price'\n    );\n\n    const originalPrice = this.hasPromotionalPrice\n      ? this.getFormattedValue('ec_price')\n      : null;\n\n    return (\n      <Host class=\"flex flex-wrap gap-1\">\n        <div\n          class={`truncate break-keep ${this.hasPromotionalPrice && 'text-error'}`}\n        >\n          {mainPrice}\n        </div>\n\n        <div\n          class={\n            'original-price content-center truncate text-xl break-keep line-through' +\n            (!originalPrice ? ' invisible' : '')\n          }\n        >\n          {originalPrice ?? '​'}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"atomic-product-price.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;AAAA,MAAM,qBAAqB,GAAG,wJAAwJ,CAAC;AACvL,iCAAe,qBAAqB;;;;;;;;;;;;MCyBvB,kBAAkB;;;;IAUtB,UAAU;QACf,IAAI,CAAC,OAAO,GAAGA,qBAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;KACnD;IAEO,WAAW,CAAC,KAAa;QAC/B,IAAI;YACF,MAAM,EAAC,QAAQ,EAAC,GAAG,IAAI,CAAC,YAAY,CAAC;YACrC,MAAM,SAAS,GAAGC,qCAAwB,CAAC,QAAQ,CAAC,CAAC;YACrD,OAAO,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAqB,CAAC,CAAC;SACnE;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAc,CAAC;YAC5B,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;SACzB;KACF;IAEO,KAAK,CAAC,KAAa;QACzB,IAAI;YACF,OAAOC,uBAAU,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;SACxC;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAc,CAAC;YAC5B,OAAO,IAAI,CAAC;SACb;KACF;IAEO,iBAAiB,CAAC,KAAa;QACrC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAChC,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAChC;KACF;IAED,IAAY,mBAAmB;QAC7B,QACE,IAAI,CAAC,OAAO,CAAC,cAAc,KAAK,IAAI;YACpC,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,IAAI;YAC9B,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EACnD;KACH;IAEM,MAAM;QACX,MAAM,SAAS,GAAG,IAAI,CAAC,iBAAiB,CACtC,IAAI,CAAC,mBAAmB,GAAG,gBAAgB,GAAG,UAAU,CACzD,CAAC;QAEF,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB;cAC1C,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;cAClC,IAAI,CAAC;QAET,QACEC,QAACC,UAAI,qDAAC,KAAK,EAAC,sBAAsB,IAChCD,kEACE,KAAK,EAAE,uBAAuB,IAAI,CAAC,mBAAmB,IAAI,YAAY,EAAE,IAEvE,SAAS,CACN,EAENA,kEACE,KAAK,EACH,wEAAwE;iBACvE,CAAC,aAAa,GAAG,YAAY,GAAG,EAAE,CAAC,IAGrC,aAAa,IAAI,GAAG,CACjB,CACD,EACP;KACH;;AAzE4B;IAA5BE,sCAAkB,EAAE;oDAAoC;AAG/B;IAAzBC,+CAAc,EAAE;mDAA2B;AAEV;IAAjCC,yCAAqB,CAAC,SAAS,CAAC;wDAA6B;;;;;","names":["buildContext","defaultCurrencyFormatter","parseValue","h","Host","InitializeBindings","ProductContext","BindStateToController"],"sources":["src/components/commerce/atomic-product-price/atomic-product-price.pcss?tag=atomic-product-price","src/components/commerce/atomic-product-price/atomic-product-price.tsx"],"sourcesContent":[".display-grid {\n  & atomic-product-price {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: column;\n\n    & .original-price {\n      line-height: 1;\n    }\n  }\n}\n","import {\n  buildContext,\n  Product,\n  Context,\n  ContextState,\n} from '@coveo/headless/commerce';\nimport {Component, h, Host} from '@stencil/core';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {defaultCurrencyFormatter} from '../../common/formats/format-common';\nimport {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';\nimport {parseValue} from '../product-template-component-utils/product-utils';\nimport {ProductContext} from '../product-template-component-utils/stencil-product-template-decorators';\n\n/**\n * @alpha\n * The `atomic-product-price` component renders the price of a product.\n */\n@Component({\n  tag: 'atomic-product-price',\n  styleUrl: 'atomic-product-price.pcss',\n  shadow: false,\n})\nexport class AtomicProductPrice\n  implements InitializableComponent<CommerceBindings>\n{\n  @InitializeBindings() public bindings!: CommerceBindings;\n  public error!: Error;\n\n  @ProductContext() private product!: Product;\n  public context!: Context;\n  @BindStateToController('context') contextState!: ContextState;\n\n  public initialize(): void {\n    this.context = buildContext(this.bindings.engine);\n  }\n\n  private formatValue(value: number) {\n    try {\n      const {currency} = this.contextState;\n      const formatter = defaultCurrencyFormatter(currency);\n      return formatter(value, this.bindings.i18n.languages as string[]);\n    } catch (error) {\n      this.error = error as Error;\n      return value.toString();\n    }\n  }\n\n  private parse(field: string) {\n    try {\n      return parseValue(this.product, field);\n    } catch (error) {\n      this.error = error as Error;\n      return null;\n    }\n  }\n\n  private getFormattedValue(field: string) {\n    const value = this.parse(field);\n    if (value !== null) {\n      return this.formatValue(value);\n    }\n  }\n\n  private get hasPromotionalPrice() {\n    return (\n      this.product.ec_promo_price !== null &&\n      this.product.ec_price !== null &&\n      this.product.ec_promo_price < this.product.ec_price\n    );\n  }\n\n  public render() {\n    const mainPrice = this.getFormattedValue(\n      this.hasPromotionalPrice ? 'ec_promo_price' : 'ec_price'\n    );\n\n    const originalPrice = this.hasPromotionalPrice\n      ? this.getFormattedValue('ec_price')\n      : null;\n\n    return (\n      <Host class=\"flex flex-wrap gap-1\">\n        <div\n          class={`truncate break-keep ${this.hasPromotionalPrice && 'text-error'}`}\n        >\n          {mainPrice}\n        </div>\n\n        <div\n          class={\n            'original-price content-center truncate text-xl break-keep line-through' +\n            (!originalPrice ? ' invisible' : '')\n          }\n        >\n          {originalPrice ?? '​'}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/atomic-product-rating.cjs.entry.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-757bc886.js');
 const commerce = require('@coveo/headless/commerce');
-const atomicRating = require('./atomic-rating-10ab225e.js');
+const atomicRating = require('./atomic-rating-6d5a98ec.js');
 const initializationUtils = require('./initialization-utils-62dc9852.js');
-const stencilProductTemplateDecorators = require('./stencil-product-template-decorators-42759048.js');
-require('./error-69b9a539.js');
+const stencilProductTemplateDecorators = require('./stencil-product-template-decorators-8c9cf847.js');
+require('./error-ad501bd7.js');
 require('./dom-utils-d4790328.js');
 require('./event-utils-9bfcf3c5.js');
 require('./init-queue-a18aa323.js');

package/dist/cjs/atomic-product-rating.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-product-rating.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,2/1DAA2/1D,CAAC;AAC3h2D,kCAAe,sBAAsB;;;;;;;;;;;;MC0BxB,mBAAmB;;;;;;QAWA,UAAK,GAAW,WAAW,CAAC;;;;QAW5B,oBAAe,GAAG,CAAC,CAAC;;;;;;;;;;;;;;QAepB,SAAI,GAAGA,iBAAI,CAAC;QAIjC,kBAAa,GAAkB,IAAI,CAAC;QACpC,kBAAa,GAA2B,IAAI,CAAC;qBA/BR,WAAW;;+BAWT,CAAC;oBAeZA,iBAAI;6BAID,IAAI;6BACK,IAAI;;IAE7C,mBAAmB;QACzB,MAAM,KAAK,GAAGC,gCAAuB,CAAC,kBAAkB,CACtD,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,CACX,CAAC;QACF,IAAI;YACF,IAAI,CAAC,aAAa,GAAGC,iCAAoB,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SAC9D;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAK,YAAY,KAAK,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;YACpE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC3B;KACF;IAEO,wBAAwB;QAC9B,IAAI,IAAI,CAAC,kBAAkB,KAAK,SAAS,EAAE;YACzC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,OAAO;SACR;QACD,MAAM,KAAK,GAAGD,gCAAuB,CAAC,kBAAkB,CACtD,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,kBAAkB,CACd,CAAC;QAEZ,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,OAAO;SACR;QAED,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IAED,mBAAmB;QACjB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,wBAAwB,EAAE,CAAC;KACjC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;YAC/B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACnB,OAAO;SACR;QACD,QACEE,iBAAK,KAAK,EAAC,gCAAgC,IACzCA,QAACC,mBAAM,IACL,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,kBAAkB,EAAE,IAAI,CAAC,eAAe,EACxC,mBAAmB,EAAE,IAAI,CAAC,aAAa,EACvC,QAAQ,EAAE,KAAK,GACP,EAET,IAAI,CAAC,aAAa,KAAK,IAAI,KAC1BD,kBAAM,KAAK,EAAC,uCAAuC,SAC/C,IAAI,CAAC,aAAa,MACf,CACR,CACG,EACN;KACH;;;AAnG4B;IAA5BE,sCAAkB,EAAE;qDAAoC;AAE/B;IAAzBC,+CAAc,EAAE;oDAA2B;;;;;","names":["Star","ProductTemplatesHelpers","computeNumberOfStars","h","Rating","InitializeBindings","ProductContext"],"sources":["src/components/commerce/product-template-components/atomic-product-rating/atomic-product-rating.pcss?tag=atomic-product-rating&encapsulation=shadow","src/components/commerce/product-template-components/atomic-product-rating/atomic-product-rating.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n\n@import '../../../common/atomic-rating/atomic-rating.pcss';\n","import {Product, ProductTemplatesHelpers} from '@coveo/headless/commerce';\nimport {Component, Element, h, Prop, State} from '@stencil/core';\nimport Star from '../../../../images/star.svg';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {\n  Rating,\n  computeNumberOfStars,\n} from '../../../common/atomic-rating/atomic-rating';\nimport {CommerceBindings} from '../../atomic-commerce-interface/atomic-commerce-interface';\nimport {ProductContext} from '../stencil-product-template-decorators';\n\n/**\n * The `atomic-product-rating` element renders a star rating.\n *\n * @part value-rating - The wrapper that contains the row of inactive stars and the row of active stars.\n * @part value-rating-icon - The individual star icons used in the rating display.\n *\n * @alpha\n */\n@Component({\n  tag: 'atomic-product-rating',\n  styleUrl: 'atomic-product-rating.pcss',\n  shadow: true,\n})\nexport class AtomicProductRating\n  implements InitializableComponent<CommerceBindings>\n{\n  @InitializeBindings() public bindings!: CommerceBindings;\n\n  @ProductContext() private product!: Product;\n  @Element() host!: HTMLElement;\n\n  /**\n   * The numerical field whose values you want to display as a rating.\n   */\n  @Prop({reflect: true}) public field: string = 'ec_rating';\n\n  /**\n   * The field whose value you want to display next to the rating. This field can be used to display the number of reviews or the numerical value of the rating, for example.\n   * @type {string}\n   */\n  @Prop({reflect: true}) public ratingDetailsField?: string;\n\n  /**\n   * The maximum value of the field. This value is also used as the number of icons to be displayed.\n   */\n  @Prop({reflect: true}) public maxValueInIndex = 5;\n\n  /**\n   * The SVG icon to use to display the rating.\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   * When using a custom icon, at least part of your icon should have the color set to `fill=\"currentColor\"`.\n   * This part of the SVG will take on the colors set in the following [variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties):\n   *\n   * - `--atomic-rating-icon-active-color`\n   * - `--atomic-rating-icon-inactive-color`\n   */\n  @Prop({reflect: true}) public icon = Star;\n\n  public error!: Error;\n\n  @State() numberOfStars: number | null = null;\n  @State() ratingDetails: string | number | null = null;\n\n  private updateNumberOfStars() {\n    const value = ProductTemplatesHelpers.getProductProperty(\n      this.product,\n      this.field\n    );\n    try {\n      this.numberOfStars = computeNumberOfStars(value, this.field);\n    } catch (error) {\n      this.error = error instanceof Error ? error : new Error(`${error}`);\n      this.numberOfStars = null;\n    }\n  }\n\n  private updateRatingDetailsValue() {\n    if (this.ratingDetailsField === undefined) {\n      this.ratingDetails = null;\n      return;\n    }\n    const value = ProductTemplatesHelpers.getProductProperty(\n      this.product,\n      this.ratingDetailsField\n    ) as string;\n\n    if (value === null) {\n      this.ratingDetails = null;\n      return;\n    }\n\n    this.ratingDetails = value;\n  }\n\n  componentWillRender() {\n    this.updateNumberOfStars();\n    this.updateRatingDetailsValue();\n  }\n\n  render() {\n    if (this.numberOfStars === null) {\n      this.host.remove();\n      return;\n    }\n    return (\n      <div class=\"flex items-center align-middle\">\n        <Rating\n          i18n={this.bindings.i18n}\n          icon={this.icon}\n          numberOfTotalIcons={this.maxValueInIndex}\n          numberOfActiveIcons={this.numberOfStars}\n          iconSize={0.875}\n        ></Rating>\n\n        {this.ratingDetails !== null && (\n          <span class=\"text-neutral-dark rating-details pl-1\">\n            ({this.ratingDetails})\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"atomic-product-rating.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,2/1DAA2/1D,CAAC;AAC3h2D,kCAAe,sBAAsB;;;;;;;;;;;;MC0BxB,mBAAmB;;;;;;QAWA,UAAK,GAAW,WAAW,CAAC;;;;QAW5B,oBAAe,GAAG,CAAC,CAAC;;;;;;;;;;;;;;QAepB,SAAI,GAAGA,iBAAI,CAAC;QAIjC,kBAAa,GAAkB,IAAI,CAAC;QACpC,kBAAa,GAA2B,IAAI,CAAC;qBA/BR,WAAW;;+BAWT,CAAC;oBAeZA,iBAAI;6BAID,IAAI;6BACK,IAAI;;IAE7C,mBAAmB;QACzB,MAAM,KAAK,GAAGC,gCAAuB,CAAC,kBAAkB,CACtD,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,CACX,CAAC;QACF,IAAI;YACF,IAAI,CAAC,aAAa,GAAGC,iCAAoB,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SAC9D;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAK,YAAY,KAAK,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;YACpE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC3B;KACF;IAEO,wBAAwB;QAC9B,IAAI,IAAI,CAAC,kBAAkB,KAAK,SAAS,EAAE;YACzC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,OAAO;SACR;QACD,MAAM,KAAK,GAAGD,gCAAuB,CAAC,kBAAkB,CACtD,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,kBAAkB,CACd,CAAC;QAEZ,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,OAAO;SACR;QAED,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IAED,mBAAmB;QACjB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,wBAAwB,EAAE,CAAC;KACjC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;YAC/B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACnB,OAAO;SACR;QACD,QACEE,iBAAK,KAAK,EAAC,gCAAgC,IACzCA,QAACC,mBAAM,IACL,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,kBAAkB,EAAE,IAAI,CAAC,eAAe,EACxC,mBAAmB,EAAE,IAAI,CAAC,aAAa,EACvC,QAAQ,EAAE,KAAK,GACP,EAET,IAAI,CAAC,aAAa,KAAK,IAAI,KAC1BD,kBAAM,KAAK,EAAC,uCAAuC,SAC/C,IAAI,CAAC,aAAa,MACf,CACR,CACG,EACN;KACH;;;AAnG4B;IAA5BE,sCAAkB,EAAE;qDAAoC;AAE/B;IAAzBC,+CAAc,EAAE;oDAA2B;;;;;","names":["Star","ProductTemplatesHelpers","computeNumberOfStars","h","Rating","InitializeBindings","ProductContext"],"sources":["src/components/commerce/atomic-product-rating/atomic-product-rating.pcss?tag=atomic-product-rating&encapsulation=shadow","src/components/commerce/atomic-product-rating/atomic-product-rating.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n\n@import '../../common/atomic-rating/atomic-rating.pcss';\n","import {Product, ProductTemplatesHelpers} from '@coveo/headless/commerce';\nimport {Component, Element, h, Prop, State} from '@stencil/core';\nimport Star from '../../../images/star.svg';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {\n  Rating,\n  computeNumberOfStars,\n} from '../../common/atomic-rating/atomic-rating';\nimport {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';\nimport {ProductContext} from '../product-template-component-utils/stencil-product-template-decorators';\n\n/**\n * The `atomic-product-rating` element renders a star rating.\n *\n * @part value-rating - The wrapper that contains the row of inactive stars and the row of active stars.\n * @part value-rating-icon - The individual star icons used in the rating display.\n *\n * @alpha\n */\n@Component({\n  tag: 'atomic-product-rating',\n  styleUrl: 'atomic-product-rating.pcss',\n  shadow: true,\n})\nexport class AtomicProductRating\n  implements InitializableComponent<CommerceBindings>\n{\n  @InitializeBindings() public bindings!: CommerceBindings;\n\n  @ProductContext() private product!: Product;\n  @Element() host!: HTMLElement;\n\n  /**\n   * The numerical field whose values you want to display as a rating.\n   */\n  @Prop({reflect: true}) public field: string = 'ec_rating';\n\n  /**\n   * The field whose value you want to display next to the rating. This field can be used to display the number of reviews or the numerical value of the rating, for example.\n   * @type {string}\n   */\n  @Prop({reflect: true}) public ratingDetailsField?: string;\n\n  /**\n   * The maximum value of the field. This value is also used as the number of icons to be displayed.\n   */\n  @Prop({reflect: true}) public maxValueInIndex = 5;\n\n  /**\n   * The SVG icon to use to display the rating.\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   * When using a custom icon, at least part of your icon should have the color set to `fill=\"currentColor\"`.\n   * This part of the SVG will take on the colors set in the following [variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties):\n   *\n   * - `--atomic-rating-icon-active-color`\n   * - `--atomic-rating-icon-inactive-color`\n   */\n  @Prop({reflect: true}) public icon = Star;\n\n  public error!: Error;\n\n  @State() numberOfStars: number | null = null;\n  @State() ratingDetails: string | number | null = null;\n\n  private updateNumberOfStars() {\n    const value = ProductTemplatesHelpers.getProductProperty(\n      this.product,\n      this.field\n    );\n    try {\n      this.numberOfStars = computeNumberOfStars(value, this.field);\n    } catch (error) {\n      this.error = error instanceof Error ? error : new Error(`${error}`);\n      this.numberOfStars = null;\n    }\n  }\n\n  private updateRatingDetailsValue() {\n    if (this.ratingDetailsField === undefined) {\n      this.ratingDetails = null;\n      return;\n    }\n    const value = ProductTemplatesHelpers.getProductProperty(\n      this.product,\n      this.ratingDetailsField\n    ) as string;\n\n    if (value === null) {\n      this.ratingDetails = null;\n      return;\n    }\n\n    this.ratingDetails = value;\n  }\n\n  componentWillRender() {\n    this.updateNumberOfStars();\n    this.updateRatingDetailsValue();\n  }\n\n  render() {\n    if (this.numberOfStars === null) {\n      this.host.remove();\n      return;\n    }\n    return (\n      <div class=\"flex items-center align-middle\">\n        <Rating\n          i18n={this.bindings.i18n}\n          icon={this.icon}\n          numberOfTotalIcons={this.maxValueInIndex}\n          numberOfActiveIcons={this.numberOfStars}\n          iconSize={0.875}\n        ></Rating>\n\n        {this.ratingDetails !== null && (\n          <span class=\"text-neutral-dark rating-details pl-1\">\n            ({this.ratingDetails})\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/atomic-product-section-actions.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-product-section-actions.entry.cjs.js","mappings":";;;;;;;;;;MAmBa,2BAA2B;;;;IAG/B,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/product-template-components/atomic-product-sections/atomic-product-section-actions.tsx"],"sourcesContent":["import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * @alpha\n *\n * This section is intended to display components that allow the user to perform an action on a product without having to view its details.\n * In commerce interface, the user can usually add the product to their cart or wish list.\n *\n * Behavior:\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * ** You should ensure that elements inside of it have `height: var(--line-height)`.\n * * Is a wrapping flexbox with a gap.\n * * May appear over, next to, or beneath the visual section.\n */\n@Component({\n  tag: 'atomic-product-section-actions',\n  shadow: false,\n})\nexport class AtomicProductSectionActions {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}
+{"file":"atomic-product-section-actions.entry.cjs.js","mappings":";;;;;;;;;;MAmBa,2BAA2B;;;;IAG/B,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/atomic-product-sections/atomic-product-section-actions.tsx"],"sourcesContent":["import {hideEmptySection} from '@/src/utils/item-section-utils';\nimport {Element, Component} from '@stencil/core';\n\n/**\n * @alpha\n *\n * This section is intended to display components that allow the user to perform an action on a product without having to view its details.\n * In commerce interface, the user can usually add the product to their cart or wish list.\n *\n * Behavior:\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * ** You should ensure that elements inside of it have `height: var(--line-height)`.\n * * Is a wrapping flexbox with a gap.\n * * May appear over, next to, or beneath the visual section.\n */\n@Component({\n  tag: 'atomic-product-section-actions',\n  shadow: false,\n})\nexport class AtomicProductSectionActions {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}

package/dist/cjs/atomic-product-section-badges.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-product-section-badges.entry.cjs.js","mappings":";;;;;;;;;;MAkBa,0BAA0B;;;;IAG9B,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/product-template-components/atomic-product-sections/atomic-product-section-badges.tsx"],"sourcesContent":["import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * @alpha\n *\n * This section is meant to render badges that highlight special features of the product.\n *\n * Behavior:\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * ** You should ensure that elements inside of it have `height: var(--line-height)`.\n * * Is a wrapping flexbox with a gap.\n * * May appear over, next to, or beneath the visual section.\n */\n@Component({\n  tag: 'atomic-product-section-badges',\n  shadow: false,\n})\nexport class AtomicProductSectionBadges {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}
+{"file":"atomic-product-section-badges.entry.cjs.js","mappings":";;;;;;;;;;MAkBa,0BAA0B;;;;IAG9B,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/atomic-product-sections/atomic-product-section-badges.tsx"],"sourcesContent":["import {hideEmptySection} from '@/src/utils/item-section-utils';\nimport {Element, Component} from '@stencil/core';\n\n/**\n * @alpha\n *\n * This section is meant to render badges that highlight special features of the product.\n *\n * Behavior:\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * ** You should ensure that elements inside of it have `height: var(--line-height)`.\n * * Is a wrapping flexbox with a gap.\n * * May appear over, next to, or beneath the visual section.\n */\n@Component({\n  tag: 'atomic-product-section-badges',\n  shadow: false,\n})\nexport class AtomicProductSectionBadges {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}

package/dist/cjs/atomic-product-section-bottom-metadata.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-product-section-bottom-metadata.entry.cjs.js","mappings":";;;;;;;;;;MAkBa,kCAAkC;;;;IAGtC,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/product-template-components/atomic-product-sections/atomic-product-section-bottom-metadata.tsx"],"sourcesContent":["import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * @alpha\n *\n * This section is meant to render additional descriptive information about the product.\n *\n * Behavior:\n * * Has a maximum height of two lines.\n * * Exposes the `--line-height` variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n * * Has a font weight.\n */\n@Component({\n  tag: 'atomic-product-section-bottom-metadata',\n  shadow: false,\n})\nexport class AtomicProductSectionBottomMetadata {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}
+{"file":"atomic-product-section-bottom-metadata.entry.cjs.js","mappings":";;;;;;;;;;MAkBa,kCAAkC;;;;IAGtC,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/atomic-product-sections/atomic-product-section-bottom-metadata.tsx"],"sourcesContent":["import {hideEmptySection} from '@/src/utils/item-section-utils';\nimport {Element, Component} from '@stencil/core';\n\n/**\n * @alpha\n *\n * This section is meant to render additional descriptive information about the product.\n *\n * Behavior:\n * * Has a maximum height of two lines.\n * * Exposes the `--line-height` variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n * * Has a font weight.\n */\n@Component({\n  tag: 'atomic-product-section-bottom-metadata',\n  shadow: false,\n})\nexport class AtomicProductSectionBottomMetadata {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}

package/dist/cjs/atomic-product-section-children.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-product-section-children.entry.cjs.js","mappings":";;;;;;;;;;MAea,4BAA4B;;;;IAGhC,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/product-template-components/atomic-product-sections/atomic-product-section-children.tsx"],"sourcesContent":["import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * @alpha\n *\n * This section is meant to render child products, available when using the <atomic-product-children> component.\n *\n * Behavior:\n * * Shows children at the bottom of the result, indented and wrapped in a border.\n */\n@Component({\n  tag: 'atomic-product-section-children',\n  shadow: false,\n})\nexport class AtomicProductSectionChildren {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}
+{"file":"atomic-product-section-children.entry.cjs.js","mappings":";;;;;;;;;;MAea,4BAA4B;;;;IAGhC,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/atomic-product-sections/atomic-product-section-children.tsx"],"sourcesContent":["import {hideEmptySection} from '@/src/utils/item-section-utils';\nimport {Element, Component} from '@stencil/core';\n\n/**\n * @alpha\n *\n * This section is meant to render child products, available when using the <atomic-product-children> component.\n *\n * Behavior:\n * * Shows children at the bottom of the result, indented and wrapped in a border.\n */\n@Component({\n  tag: 'atomic-product-section-children',\n  shadow: false,\n})\nexport class AtomicProductSectionChildren {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}

package/dist/cjs/atomic-product-section-description.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-product-section-description.entry.cjs.js","mappings":";;;;;;;;;;MAkBa,+BAA+B;;;;IAGnC,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/product-template-components/atomic-product-sections/atomic-product-section-description.tsx"],"sourcesContent":["import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * @alpha\n *\n * This section is intended to render an informative summary of the product's description.\n *\n * Behavior:\n * * Has a fixed height of one to three lines, depending on the layout and density.\n * * Ellipses overflowing text.\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n */\n@Component({\n  tag: 'atomic-product-section-description',\n  shadow: false,\n})\nexport class AtomicProductSectionDescription {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}
+{"file":"atomic-product-section-description.entry.cjs.js","mappings":";;;;;;;;;;MAkBa,+BAA+B;;;;IAGnC,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/atomic-product-sections/atomic-product-section-description.tsx"],"sourcesContent":["import {hideEmptySection} from '@/src/utils/item-section-utils';\nimport {Element, Component} from '@stencil/core';\n\n/**\n * @alpha\n *\n * This section is intended to render an informative summary of the product's description.\n *\n * Behavior:\n * * Has a fixed height of one to three lines, depending on the layout and density.\n * * Ellipses overflowing text.\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n */\n@Component({\n  tag: 'atomic-product-section-description',\n  shadow: false,\n})\nexport class AtomicProductSectionDescription {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}

package/dist/cjs/atomic-product-section-emphasized.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-product-section-emphasized.entry.cjs.js","mappings":";;;;;;;;;;MAiBa,8BAA8B;;;;IAGlC,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/product-template-components/atomic-product-sections/atomic-product-section-emphasized.tsx"],"sourcesContent":["import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * @alpha\n *\n * This section is intended to display the field that's important for its search criteria.\n * For example, in Commerce, a product's price is often more important than the title itself.\n *\n * Behavior:\n * * Has a very large font size.\n * * Is the second closest element beneath the name section.\n */\n@Component({\n  tag: 'atomic-product-section-emphasized',\n  shadow: false,\n})\nexport class AtomicProductSectionEmphasized {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}
+{"file":"atomic-product-section-emphasized.entry.cjs.js","mappings":";;;;;;;;;;MAiBa,8BAA8B;;;;IAGlC,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/atomic-product-sections/atomic-product-section-emphasized.tsx"],"sourcesContent":["import {hideEmptySection} from '@/src/utils/item-section-utils';\nimport {Element, Component} from '@stencil/core';\n\n/**\n * @alpha\n *\n * This section is intended to display the field that's important for its search criteria.\n * For example, in Commerce, a product's price is often more important than the title itself.\n *\n * Behavior:\n * * Has a very large font size.\n * * Is the second closest element beneath the name section.\n */\n@Component({\n  tag: 'atomic-product-section-emphasized',\n  shadow: false,\n})\nexport class AtomicProductSectionEmphasized {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}

package/dist/cjs/atomic-product-section-metadata.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-product-section-metadata.entry.cjs.js","mappings":";;;;;;;;;;MAkBa,4BAA4B;;;;IAGhC,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/product-template-components/atomic-product-sections/atomic-product-section-metadata.tsx"],"sourcesContent":["import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * @alpha\n *\n * This section is intended to display some fields that are directly related to the name of the product.\n * In commerce, this could be the product rating, which is tied to the nature of the product itself,\n * rather than to the product's description.\n *\n * Behavior:\n * * Has a very small font size.\n * * Is the closest element beneath the title section.\n */\n@Component({\n  tag: 'atomic-product-section-metadata',\n  shadow: false,\n})\nexport class AtomicProductSectionMetadata {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}
+{"file":"atomic-product-section-metadata.entry.cjs.js","mappings":";;;;;;;;;;MAkBa,4BAA4B;;;;IAGhC,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/atomic-product-sections/atomic-product-section-metadata.tsx"],"sourcesContent":["import {hideEmptySection} from '@/src/utils/item-section-utils';\nimport {Element, Component} from '@stencil/core';\n\n/**\n * @alpha\n *\n * This section is intended to display some fields that are directly related to the name of the product.\n * In commerce, this could be the product rating, which is tied to the nature of the product itself,\n * rather than to the product's description.\n *\n * Behavior:\n * * Has a very small font size.\n * * Is the closest element beneath the title section.\n */\n@Component({\n  tag: 'atomic-product-section-metadata',\n  shadow: false,\n})\nexport class AtomicProductSectionMetadata {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}

package/dist/cjs/atomic-product-section-name.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-product-section-name.entry.cjs.js","mappings":";;;;;;;;;;MAiBa,wBAAwB;;;;IAG5B,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/product-template-components/atomic-product-sections/atomic-product-section-name.tsx"],"sourcesContent":["import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * @alpha\n *\n * This section is intended to display the product's name, and its main use is to make the product list scannable.\n *\n * Behavior:\n * * Has a fixed height of two lines on grid layouts.\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n */\n@Component({\n  tag: 'atomic-product-section-name',\n  shadow: false,\n})\nexport class AtomicProductSectionName {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}
+{"file":"atomic-product-section-name.entry.cjs.js","mappings":";;;;;;;;;;MAiBa,wBAAwB;;;;IAG5B,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/atomic-product-sections/atomic-product-section-name.tsx"],"sourcesContent":["import {hideEmptySection} from '@/src/utils/item-section-utils';\nimport {Element, Component} from '@stencil/core';\n\n/**\n * @alpha\n *\n * This section is intended to display the product's name, and its main use is to make the product list scannable.\n *\n * Behavior:\n * * Has a fixed height of two lines on grid layouts.\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n */\n@Component({\n  tag: 'atomic-product-section-name',\n  shadow: false,\n})\nexport class AtomicProductSectionName {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}

package/dist/cjs/atomic-product-section-visual.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-product-section-visual.entry.cjs.js","mappings":";;;;;;;;;;MAmBa,0BAA0B;;;;;IAQ9B,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/product-template-components/atomic-product-sections/atomic-product-section-visual.tsx"],"sourcesContent":["import {Element, Component, Prop} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\nimport {ItemDisplayImageSize} from '../../../common/layout/display-options';\n\n/**\n * @alpha\n *\n * This section is intended to provide visual information about the product.\n * In commerce, an image is a great shorthand for a product category.\n *\n * Behavior:\n * * Has a fixed size that depends on the specified image size, the layout, the density, and the screen size.\n * ** You should ensure that elements inside of it take the available space.\n * * Always has a 1:1 aspect ratio.\n */\n@Component({\n  tag: 'atomic-product-section-visual',\n  shadow: false,\n})\nexport class AtomicProductSectionVisual {\n  @Element() private host!: HTMLElement;\n\n  /**\n   * How large or small the visual section of product using this template should be.\n   */\n  @Prop({reflect: true}) public imageSize?: Omit<ItemDisplayImageSize, 'icon'>;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}
+{"file":"atomic-product-section-visual.entry.cjs.js","mappings":";;;;;;;;;;MAmBa,0BAA0B;;;;;IAQ9B,kBAAkB;QACvBA,iCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;","names":["hideEmptySection"],"sources":["src/components/commerce/atomic-product-sections/atomic-product-section-visual.tsx"],"sourcesContent":["import {ItemDisplayImageSize} from '@/src/components';\nimport {hideEmptySection} from '@/src/utils/item-section-utils';\nimport {Element, Component, Prop} from '@stencil/core';\n\n/**\n * @alpha\n *\n * This section is intended to provide visual information about the product.\n * In commerce, an image is a great shorthand for a product category.\n *\n * Behavior:\n * * Has a fixed size that depends on the specified image size, the layout, the density, and the screen size.\n * ** You should ensure that elements inside of it take the available space.\n * * Always has a 1:1 aspect ratio.\n */\n@Component({\n  tag: 'atomic-product-section-visual',\n  shadow: false,\n})\nexport class AtomicProductSectionVisual {\n  @Element() private host!: HTMLElement;\n\n  /**\n   * How large or small the visual section of product using this template should be.\n   */\n  @Prop({reflect: true}) public imageSize?: Omit<ItemDisplayImageSize, 'icon'>;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n"],"version":3}

package/dist/cjs/atomic-query-error.cjs.entry.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-757bc886.js');
 const headless = require('@coveo/headless');
 const initializationUtils = require('./initialization-utils-62dc9852.js');
-const stencilAccessibilityUtils = require('./stencil-accessibility-utils-7eed7a97.js');
-const title = require('./title-d7fc3716.js');
+const stencilAccessibilityUtils = require('./stencil-accessibility-utils-a5d1a814.js');
+const stencilLink = require('./stencil-link-9ee2c42d.js');
 require('./dom-utils-d4790328.js');
 require('./event-utils-9bfcf3c5.js');
 require('./init-queue-a18aa323.js');
@@ -47,9 +47,9 @@ const AtomicQueryError = class {
         const { bindings: { i18n, engine: { state: { configuration: { organizationId, environment }, }, }, }, } = this;
         const url = headless.getOrganizationEndpoint(organizationId, environment);
         if (hasError) {
-            this.ariaMessage = title.getAriaMessageFromErrorType(i18n, organizationId, url, error?.type);
+            this.ariaMessage = stencilLink.getAriaMessageFromErrorType(i18n, organizationId, url, error?.type);
         }
-        return (index.h(title.QueryErrorGuard, { key: '66d391acde95214a9f610f939c1b149624f642b2', hasError: hasError }, index.h(title.QueryErrorContainer, { key: '129ab8fe6b02df5c14346a267edea37d445bf28d' }, index.h(title.QueryErrorIcon, { key: 'f4c0dc38a9652196f1992a5e7eb423722bb824d9', errorType: error?.type }), index.h(title.QueryErrorTitle, { key: '639865dda44b2d57e0b956e9f2dec1c49bc8ef26', errorType: error?.type, i18n: i18n, organizationId: organizationId }), index.h(title.QueryErrorDescription, { key: '3775b46e0bbd5e6f49d2ffb235c93b5178ee05dc', i18n: i18n, organizationId: organizationId, url: url, errorType: error?.type }), index.h(title.QueryErrorShowMore, { key: '05f97355d4788a59aac122995e1e03915987bb88', link: index.h(title.QueryErrorLink, { i18n: i18n, errorType: error?.type }), onShowMore: () => (this.showMoreInfo = !this.showMoreInfo), i18n: i18n }), index.h(title.QueryErrorDetails, { key: '1ec7b26d550a04c4e5f32574faa90572c52a0342', error: error, show: this.showMoreInfo }))));
+        return (index.h(stencilLink.QueryErrorGuard, { key: 'd13c10debe0869c76f29f865832d872d6291fdfa', hasError: hasError }, index.h(stencilLink.QueryErrorContainer, { key: 'c369aed9a67235380c547ac1dc8124363dbcb151' }, index.h(stencilLink.QueryErrorIcon, { key: 'e0fe9ed35a8dd5f32c4e06e5a87ff1b9f2478ba5', errorType: error?.type }), index.h(stencilLink.QueryErrorTitle, { key: 'b5c0ad7ee255539b52e6692f32681fd4cbb6c292', errorType: error?.type, i18n: i18n, organizationId: organizationId }), index.h(stencilLink.QueryErrorDescription, { key: 'dc4068d51bc6541b89e828503d9206393aa4dffd', i18n: i18n, organizationId: organizationId, url: url, errorType: error?.type }), index.h(stencilLink.QueryErrorShowMore, { key: '231d3826b152abe9c23be8aa4dcc6fd264fb3f0f', link: index.h(stencilLink.QueryErrorLink, { i18n: i18n, errorType: error?.type }), onShowMore: () => (this.showMoreInfo = !this.showMoreInfo), i18n: i18n }), index.h(stencilLink.QueryErrorDetails, { key: '27ab82024f3663e166e2a73d81f1722ef0ea3832', error: error, show: this.showMoreInfo }))));
     }
 };
 __decorate([

package/dist/cjs/atomic-query-error.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-query-error.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,0u1DAA0u1D,CAAC;AACvw1D,+BAAe,mBAAmB;;;;;;;;;;;;MCsCrB,gBAAgB;;;QAQlB,iBAAY,GAAG,KAAK,CAAC;;;4BAAN,KAAK;;IAKtB,UAAU;QACf,IAAI,CAAC,UAAU,GAAGA,wBAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;KACzD;IAEM,MAAM;QACX,MAAM,EAAC,QAAQ,EAAE,KAAK,EAAC,GAAG,IAAI,CAAC,eAAe,CAAC;QAC/C,MAAM,EACJ,QAAQ,EAAE,EACR,IAAI,EACJ,MAAM,EAAE,EACN,KAAK,EAAE,EACL,aAAa,EAAE,EAAC,cAAc,EAAE,WAAW,EAAC,GAC7C,GACF,GACF,GACF,GAAG,IAAI,CAAC;QACT,MAAM,GAAG,GAAGC,gCAAuB,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;QACjE,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,WAAW,GAAGC,iCAA2B,CAC5C,IAAI,EACJ,cAAc,EACd,GAAG,EACH,KAAK,EAAE,IAAI,CACZ,CAAC;SACH;QACD,QACEC,QAACC,qBAAe,qDAAC,QAAQ,EAAE,QAAQ,IACjCD,QAACE,yBAAmB,uDAClBF,QAACG,oBAAc,qDAAC,SAAS,EAAE,KAAK,EAAE,IAAI,GAAI,EAC1CH,QAACI,qBAAe,qDACd,SAAS,EAAE,KAAK,EAAE,IAAI,EACtB,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,GAC9B,EACFJ,QAACK,2BAAqB,qDACpB,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,KAAK,EAAE,IAAI,GACtB,EACFL,QAACM,wBAAkB,qDACjB,IAAI,EAAEN,QAACO,oBAAc,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,GAAI,EAC5D,UAAU,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,EAC1D,IAAI,EAAE,IAAI,GACV,EACFP,QAACQ,uBAAiB,qDAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,GAAI,CACxC,CACN,EAClB;KACH;;AA7D4B;IAA5BC,sCAAkB,EAAE;kDAA4B;AAKzC;IAFPC,yCAAqB,CAAC,YAAY,CAAC;yDAEM;AAKhC;IADTC,wCAAc,CAAC,aAAa,CAAC;qDACC;;;;;","names":["buildQueryError","getOrganizationEndpoint","getAriaMessageFromErrorType","h","QueryErrorGuard","QueryErrorContainer","QueryErrorIcon","QueryErrorTitle","QueryErrorDescription","QueryErrorShowMore","QueryErrorLink","QueryErrorDetails","InitializeBindings","BindStateToController","AriaLiveRegion"],"sources":["src/components/search/atomic-query-error/atomic-query-error.pcss?tag=atomic-query-error&encapsulation=shadow","src/components/search/atomic-query-error/atomic-query-error.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n","import {\n  QueryError,\n  QueryErrorState,\n  buildQueryError,\n  getOrganizationEndpoint,\n} from '@coveo/headless';\nimport {Component, h, State} from '@stencil/core';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {AriaLiveRegion} from '../../../utils/stencil-accessibility-utils';\nimport {QueryErrorDescription} from '../../common/query-error/description';\nimport {QueryErrorDetails} from '../../common/query-error/details';\nimport {QueryErrorIcon} from '../../common/query-error/icon';\nimport {QueryErrorLink} from '../../common/query-error/link';\nimport {QueryErrorShowMore} from '../../common/query-error/show-more';\nimport {QueryErrorContainer} from '../../common/query-error/stencil-container';\nimport {QueryErrorGuard} from '../../common/query-error/stencil-guard';\nimport {QueryErrorTitle} from '../../common/query-error/title';\nimport {getAriaMessageFromErrorType} from '../../common/query-error/utils';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-query-error` component handles fatal errors when performing a query on the index or Search API. When the error is known, it displays a link to relevant documentation link for debugging purposes. When the error is unknown, it displays a small text area with the JSON content of the error.\n *\n * @part icon - The svg related to the error.\n * @part title - The title of the error.\n * @part description - A description of the error.\n * @part doc-link - A link to the relevant documentation.\n * @part more-info-btn - A button to request additional error information.\n * @part error-info - Additional error information.\n */\n@Component({\n  tag: 'atomic-query-error',\n  styleUrl: 'atomic-query-error.pcss',\n  shadow: true,\n})\nexport class AtomicQueryError implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  public queryError!: QueryError;\n\n  @BindStateToController('queryError')\n  @State()\n  private queryErrorState!: QueryErrorState;\n  @State() public error!: Error;\n  @State() showMoreInfo = false;\n\n  @AriaLiveRegion('query-error')\n  protected ariaMessage!: string;\n\n  public initialize() {\n    this.queryError = buildQueryError(this.bindings.engine);\n  }\n\n  public render() {\n    const {hasError, error} = this.queryErrorState;\n    const {\n      bindings: {\n        i18n,\n        engine: {\n          state: {\n            configuration: {organizationId, environment},\n          },\n        },\n      },\n    } = this;\n    const url = getOrganizationEndpoint(organizationId, environment);\n    if (hasError) {\n      this.ariaMessage = getAriaMessageFromErrorType(\n        i18n,\n        organizationId,\n        url,\n        error?.type\n      );\n    }\n    return (\n      <QueryErrorGuard hasError={hasError}>\n        <QueryErrorContainer>\n          <QueryErrorIcon errorType={error?.type} />\n          <QueryErrorTitle\n            errorType={error?.type}\n            i18n={i18n}\n            organizationId={organizationId}\n          />\n          <QueryErrorDescription\n            i18n={i18n}\n            organizationId={organizationId}\n            url={url}\n            errorType={error?.type}\n          />\n          <QueryErrorShowMore\n            link={<QueryErrorLink i18n={i18n} errorType={error?.type} />}\n            onShowMore={() => (this.showMoreInfo = !this.showMoreInfo)}\n            i18n={i18n}\n          />\n          <QueryErrorDetails error={error} show={this.showMoreInfo} />\n        </QueryErrorContainer>\n      </QueryErrorGuard>\n    );\n  }\n}\n"],"version":3}
+{"file":"atomic-query-error.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,0u1DAA0u1D,CAAC;AACvw1D,+BAAe,mBAAmB;;;;;;;;;;;;MCsCrB,gBAAgB;;;QAQlB,iBAAY,GAAG,KAAK,CAAC;;;4BAAN,KAAK;;IAKtB,UAAU;QACf,IAAI,CAAC,UAAU,GAAGA,wBAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;KACzD;IAEM,MAAM;QACX,MAAM,EAAC,QAAQ,EAAE,KAAK,EAAC,GAAG,IAAI,CAAC,eAAe,CAAC;QAC/C,MAAM,EACJ,QAAQ,EAAE,EACR,IAAI,EACJ,MAAM,EAAE,EACN,KAAK,EAAE,EACL,aAAa,EAAE,EAAC,cAAc,EAAE,WAAW,EAAC,GAC7C,GACF,GACF,GACF,GAAG,IAAI,CAAC;QACT,MAAM,GAAG,GAAGC,gCAAuB,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;QACjE,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,WAAW,GAAGC,uCAA2B,CAC5C,IAAI,EACJ,cAAc,EACd,GAAG,EACH,KAAK,EAAE,IAAI,CACZ,CAAC;SACH;QACD,QACEC,QAACC,2BAAe,qDAAC,QAAQ,EAAE,QAAQ,IACjCD,QAACE,+BAAmB,uDAClBF,QAACG,0BAAc,qDAAC,SAAS,EAAE,KAAK,EAAE,IAAI,GAAI,EAC1CH,QAACI,2BAAe,qDACd,SAAS,EAAE,KAAK,EAAE,IAAI,EACtB,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,GAC9B,EACFJ,QAACK,iCAAqB,qDACpB,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,KAAK,EAAE,IAAI,GACtB,EACFL,QAACM,8BAAkB,qDACjB,IAAI,EAAEN,QAACO,0BAAc,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,GAAI,EAC5D,UAAU,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,EAC1D,IAAI,EAAE,IAAI,GACV,EACFP,QAACQ,6BAAiB,qDAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,GAAI,CACxC,CACN,EAClB;KACH;;AA7D4B;IAA5BC,sCAAkB,EAAE;kDAA4B;AAKzC;IAFPC,yCAAqB,CAAC,YAAY,CAAC;yDAEM;AAKhC;IADTC,wCAAc,CAAC,aAAa,CAAC;qDACC;;;;;","names":["buildQueryError","getOrganizationEndpoint","getAriaMessageFromErrorType","h","QueryErrorGuard","QueryErrorContainer","QueryErrorIcon","QueryErrorTitle","QueryErrorDescription","QueryErrorShowMore","QueryErrorLink","QueryErrorDetails","InitializeBindings","BindStateToController","AriaLiveRegion"],"sources":["src/components/search/atomic-query-error/atomic-query-error.pcss?tag=atomic-query-error&encapsulation=shadow","src/components/search/atomic-query-error/atomic-query-error.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n","import {\n  QueryError,\n  QueryErrorState,\n  buildQueryError,\n  getOrganizationEndpoint,\n} from '@coveo/headless';\nimport {Component, h, State} from '@stencil/core';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {AriaLiveRegion} from '../../../utils/stencil-accessibility-utils';\nimport {QueryErrorDetails} from '../../common/query-error/stencil-details';\nimport {QueryErrorIcon} from '../../common/query-error/stencil-icon';\nimport {QueryErrorShowMore} from '../../common/query-error/show-more';\nimport {QueryErrorContainer} from '../../common/query-error/stencil-container';\nimport {QueryErrorDescription} from '../../common/query-error/stencil-description';\nimport {QueryErrorGuard} from '../../common/query-error/stencil-guard';\nimport {QueryErrorTitle} from '../../common/query-error/title';\nimport {getAriaMessageFromErrorType} from '../../common/query-error/utils';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\nimport {QueryErrorLink} from '../../common/query-error/stencil-link';\n\n/**\n * The `atomic-query-error` component handles fatal errors when performing a query on the index or Search API. When the error is known, it displays a link to relevant documentation link for debugging purposes. When the error is unknown, it displays a small text area with the JSON content of the error.\n *\n * @part icon - The svg related to the error.\n * @part title - The title of the error.\n * @part description - A description of the error.\n * @part doc-link - A link to the relevant documentation.\n * @part more-info-btn - A button to request additional error information.\n * @part error-info - Additional error information.\n */\n@Component({\n  tag: 'atomic-query-error',\n  styleUrl: 'atomic-query-error.pcss',\n  shadow: true,\n})\nexport class AtomicQueryError implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  public queryError!: QueryError;\n\n  @BindStateToController('queryError')\n  @State()\n  private queryErrorState!: QueryErrorState;\n  @State() public error!: Error;\n  @State() showMoreInfo = false;\n\n  @AriaLiveRegion('query-error')\n  protected ariaMessage!: string;\n\n  public initialize() {\n    this.queryError = buildQueryError(this.bindings.engine);\n  }\n\n  public render() {\n    const {hasError, error} = this.queryErrorState;\n    const {\n      bindings: {\n        i18n,\n        engine: {\n          state: {\n            configuration: {organizationId, environment},\n          },\n        },\n      },\n    } = this;\n    const url = getOrganizationEndpoint(organizationId, environment);\n    if (hasError) {\n      this.ariaMessage = getAriaMessageFromErrorType(\n        i18n,\n        organizationId,\n        url,\n        error?.type\n      );\n    }\n    return (\n      <QueryErrorGuard hasError={hasError}>\n        <QueryErrorContainer>\n          <QueryErrorIcon errorType={error?.type} />\n          <QueryErrorTitle\n            errorType={error?.type}\n            i18n={i18n}\n            organizationId={organizationId}\n          />\n          <QueryErrorDescription\n            i18n={i18n}\n            organizationId={organizationId}\n            url={url}\n            errorType={error?.type}\n          />\n          <QueryErrorShowMore\n            link={<QueryErrorLink i18n={i18n} errorType={error?.type} />}\n            onShowMore={() => (this.showMoreInfo = !this.showMoreInfo)}\n            i18n={i18n}\n          />\n          <QueryErrorDetails error={error} show={this.showMoreInfo} />\n        </QueryErrorContainer>\n      </QueryErrorGuard>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/atomic-query-summary.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-757bc886.js');
 const headless = require('@coveo/headless');
 const initializationUtils = require('./initialization-utils-62dc9852.js');
 const jsxUtils = require('./jsx-utils-f034a41c.js');
-const stencilAccessibilityUtils = require('./stencil-accessibility-utils-7eed7a97.js');
+const stencilAccessibilityUtils = require('./stencil-accessibility-utils-a5d1a814.js');
 const stencilUtils = require('./stencil-utils-9078a8de.js');
 require('./dom-utils-d4790328.js');
 require('./event-utils-9bfcf3c5.js');