@coveo/atomic 3.28.0-pre.c758e56a2c → 3.28.0-pre.df6c8a3eb3

package/dist/atomic/components/components/commerce/product-template-component-utils/product-utils.js

@@ -1,35 +0,0 @@
-import { readFromObject } from "../../../utils/object-utils";
-import { ProductTemplatesHelpers } from '@coveo/headless/commerce';
-import { FieldValueIsNaNError } from './error';
-export function parseValue(product, field) {
-    const value = ProductTemplatesHelpers.getProductProperty(product, field);
-    if (value === null) {
-        return null;
-    }
-    const valueAsNumber = parseFloat(`${value}`);
-    if (Number.isNaN(valueAsNumber)) {
-        throw new FieldValueIsNaNError(field, value);
-    }
-    return valueAsNumber;
-}
-export function getStringValueFromProductOrNull(product, field) {
-    const value = ProductTemplatesHelpers.getProductProperty(product, field);
-    if (typeof value !== 'string' || value.trim() === '') {
-        return null;
-    }
-    return value;
-}
-export function buildStringTemplateFromProduct(template, product, bindings) {
-    return template.replace(/\${(.*?)}/g, (value) => {
-        const key = value.substring(2, value.length - 1);
-        let newValue = readFromObject(product, key);
-        if (!newValue && typeof window !== 'undefined') {
-            newValue = readFromObject(window, key);
-        }
-        if (!newValue) {
-            bindings.engine.logger.warn(`${key} used in the href template is undefined for this product: ${product.permanentid} and could not be found in the window object.`);
-            return '';
-        }
-        return newValue;
-    });
-}

package/dist/atomic/components/components/common/atomic-layout-section/atomic-layout-section.js

@@ -1,31 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-/**
- * The `atomic-layout-section` lets you identify various sections for the related `atomic-search-layout` or `atomic-commerce-layout` component.
- *
- * @slot default - The default slot where you can add child components to the section.
- */
-let AtomicLayoutSection = class AtomicLayoutSection extends LitElement {
-    createRenderRoot() {
-        return this;
-    }
-};
-__decorate([
-    property({ type: String, reflect: true })
-], AtomicLayoutSection.prototype, "section", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'min-width' })
-], AtomicLayoutSection.prototype, "minWidth", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'max-width' })
-], AtomicLayoutSection.prototype, "maxWidth", void 0);
-AtomicLayoutSection = __decorate([
-    customElement('atomic-layout-section')
-], AtomicLayoutSection);
-export { AtomicLayoutSection };

package/dist/atomic/components/components/common/item-text/field-warning.js

@@ -1,6 +0,0 @@
-import { isArray } from '@coveo/bueno';
-export function possiblyWarnOnBadFieldType(field, itemValueRaw, host, logger) {
-    if (isArray(itemValueRaw)) {
-        logger.error(`${host.nodeName.toLowerCase()} cannot be used with multi value field "${field}" with values "${itemValueRaw}".`, host);
-    }
-}

package/dist/atomic/components/components/common/item-text/item-text-fallback.js

@@ -1,15 +0,0 @@
-import { isUndefined } from '@coveo/bueno';
-import { html, nothing } from 'lit';
-import { possiblyWarnOnBadFieldType } from './field-warning.js';
-export const renderItemTextFallback = ({ props }) => (children) => {
-    const { getProperty, item, field, host, logger, defaultValue } = props;
-    const raw = getProperty(item, field);
-    possiblyWarnOnBadFieldType(field, raw, host, logger);
-    if (isUndefined(defaultValue)) {
-        host.remove();
-        return nothing;
-    }
-    else {
-        return html `${children}`;
-    }
-};

package/dist/atomic/components/components/common/item-text/item-text-highlighted.js

@@ -1,17 +0,0 @@
-import { html, nothing } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { renderWithHighlights, } from './render-highlights.js';
-/**
- * The renderItemTextHighlighted functional component renders text with highlighted keywords.
- */
-export const renderItemTextHighlighted = ({ props }) => {
-    const { textValue, highlightKeywords, highlightString, onError = (error) => console.error(error), } = props;
-    try {
-        const highlightedValue = renderWithHighlights(textValue, highlightKeywords, highlightString);
-        return html `${unsafeHTML(highlightedValue)}`;
-    }
-    catch (error) {
-        onError(error);
-        return nothing;
-    }
-};

package/dist/atomic/components/components/common/item-text/render-highlights.js

@@ -1,13 +0,0 @@
-export function renderWithHighlights(value, highlights, highlightString) {
-    const openingDelimiter = '_openingDelimiter_';
-    const closingDelimiter = '_closingDelimiter_';
-    const highlightedValue = highlightString({
-        content: value,
-        openingDelimiter,
-        closingDelimiter,
-        highlights,
-    });
-    return highlightedValue
-        .replace(new RegExp(openingDelimiter, 'g'), '<b>')
-        .replace(new RegExp(closingDelimiter, 'g'), '</b>');
-}

package/dist/atomic/components/components/common/no-items/container.js

@@ -1,7 +0,0 @@
-import { html } from 'lit';
-export const renderNoItemsContainer = () => (children) => html `
-    <div class="text-on-background flex h-full w-full flex-col items-center">
-      ${children}
-    </div>
-    <slot></slot>
-  `;

package/dist/atomic/components/components/common/no-items/guard.js

@@ -1,11 +0,0 @@
-import { html, nothing } from 'lit';
-import { directive, Directive } from 'lit/directive.js';
-class NoItemsGuardDirective extends Directive {
-    render({ firstSearchExecuted, isLoading, hasResults }, content) {
-        if (!firstSearchExecuted || isLoading || hasResults) {
-            return nothing;
-        }
-        return html `${content()}`;
-    }
-}
-export const noItemsGuard = directive(NoItemsGuardDirective);

package/dist/atomic/components/components/common/no-items/magnifying-glass.js

@@ -1,11 +0,0 @@
-import { html } from 'lit';
-const MagnifyingGlassIcon = "<svg viewBox=\"0 0 312 312\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0)\">\n<g filter=\"url(#filter0_b)\">\n<rect x=\"156.118\" width=\"220.784\" height=\"220.784\" rx=\"14.7189\" transform=\"rotate(45 156.118 0)\" fill=\"#F6F7F9\"/>\n</g>\n<rect x=\"60.1178\" y=\"126\" width=\"34\" height=\"9\" rx=\"4.5\" fill=\"#E5E8E8\"/>\n<rect x=\"102.118\" y=\"126\" width=\"67\" height=\"9\" rx=\"4.5\" fill=\"#E5E8E8\"/>\n<rect x=\"177.118\" y=\"126\" width=\"67\" height=\"9\" rx=\"4.5\" fill=\"#E5E8E8\"/>\n<rect x=\"60.1178\" y=\"151\" width=\"162\" height=\"9\" rx=\"4.5\" fill=\"#E5E8E8\"/>\n<rect x=\"60.1178\" y=\"176\" width=\"177\" height=\"9\" rx=\"4.5\" fill=\"#E5E8E8\"/>\n<g filter=\"url(#filter1_f)\">\n<path d=\"M183.857 226.206C179.378 223.774 178.389 217.774 181.85 214.033C184.309 211.374 188.273 210.753 191.427 212.532L247.561 244.198C251.767 246.571 252.551 252.302 249.136 255.717C246.849 258.004 243.331 258.513 240.49 256.97L183.857 226.206Z\" fill=\"#E5E8E8\"/>\n</g>\n<rect x=\"195.143\" y=\"205.948\" width=\"15.064\" height=\"78.2384\" rx=\"7.53201\" transform=\"rotate(-45 195.143 205.948)\" fill=\"#333357\"/>\n<g filter=\"url(#filter2_d)\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M161.415 226.595C200.792 226.595 232.713 194.674 232.713 155.298C232.713 115.921 200.792 84 161.415 84C122.039 84 90.1178 115.921 90.1178 155.298C90.1178 194.674 122.039 226.595 161.415 226.595ZM161.441 212.539C193.041 212.539 218.657 186.922 218.657 155.323C218.657 123.724 193.041 98.108 161.441 98.108C129.842 98.108 104.226 123.724 104.226 155.323C104.226 186.922 129.842 212.539 161.441 212.539Z\" fill=\"url(#paint0_linear)\"/>\n</g>\n<g filter=\"url(#filter3_d)\">\n<circle cx=\"161.415\" cy=\"155.298\" r=\"59.6307\" fill=\"url(#paint1_linear)\"/>\n</g>\n<g filter=\"url(#filter4_i)\">\n<circle cx=\"161.441\" cy=\"155.323\" r=\"57.2153\" fill=\"url(#paint2_linear)\"/>\n</g>\n<mask id=\"mask0\" mask-type=\"alpha\" maskUnits=\"userSpaceOnUse\" x=\"104\" y=\"98\" width=\"115\" height=\"115\">\n<circle cx=\"161.415\" cy=\"155.298\" r=\"57.038\" fill=\"white\"/>\n</mask>\n<g mask=\"url(#mask0)\">\n<rect opacity=\"0.5\" x=\"104.118\" y=\"126\" width=\"37\" height=\"18\" rx=\"8\" fill=\"url(#paint3_linear)\"/>\n<rect opacity=\"0.5\" x=\"184.118\" y=\"167\" width=\"37\" height=\"18\" rx=\"8\" fill=\"url(#paint4_linear)\"/>\n<g opacity=\"0.6\" filter=\"url(#filter5_f)\">\n<path d=\"M179.303 90.5597L187.576 96.3233C187.576 96.3233 140.259 159.434 177.535 239.024C164.157 234.174 126.719 230.494 120.018 222.474C88.6871 131.944 179.303 90.5597 179.303 90.5597Z\" fill=\"url(#paint5_linear)\"/>\n</g>\n<g opacity=\"0.5\" filter=\"url(#filter6_f)\">\n<circle cx=\"197.896\" cy=\"133.778\" r=\"7.77791\" fill=\"white\"/>\n</g>\n<g opacity=\"0.7\" filter=\"url(#filter7_f)\">\n<circle cx=\"207.359\" cy=\"150.241\" r=\"3.2408\" fill=\"white\"/>\n</g>\n</g>\n</g>\n<defs>\n<filter id=\"filter0_b\" x=\"-3.67968\" y=\"-3.67973\" width=\"319.595\" height=\"319.595\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feComposite in2=\"SourceAlpha\" operator=\"in\" result=\"effect1_backgroundBlur\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_backgroundBlur\" result=\"shape\"/>\n</filter>\n<filter id=\"filter1_f\" x=\"171.347\" y=\"190.878\" width=\"88.139\" height=\"88.139\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feGaussianBlur stdDeviation=\"2.59264\" result=\"effect1_foregroundBlur\"/>\n</filter>\n<filter id=\"filter2_d\" x=\"59.0061\" y=\"84\" width=\"204.818\" height=\"206.115\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"32.408\"/>\n<feGaussianBlur stdDeviation=\"15.5558\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.320677 0 0 0 0 0.320677 0 0 0 0 0.5875 0 0 0 0.38 0\"/>\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/>\n</filter>\n<filter id=\"filter3_d\" x=\"91.4141\" y=\"85.2963\" width=\"140.002\" height=\"140.002\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"5.18528\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.320677 0 0 0 0 0.320677 0 0 0 0 0.5875 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/>\n</filter>\n<filter id=\"filter4_i\" x=\"104.226\" y=\"98.108\" width=\"114.431\" height=\"124.801\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"10.3706\"/>\n<feGaussianBlur stdDeviation=\"5.83344\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.529306 0 0 0 0 0.529306 0 0 0 0 0.858333 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow\"/>\n</filter>\n<filter id=\"filter5_f\" x=\"93.7083\" y=\"75.6215\" width=\"134.473\" height=\"171.666\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feGaussianBlur stdDeviation=\"1.5\" result=\"effect1_foregroundBlur\"/>\n</filter>\n<filter id=\"filter6_f\" x=\"187.525\" y=\"123.407\" width=\"20.7411\" height=\"20.7411\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feGaussianBlur stdDeviation=\"1.29632\" result=\"effect1_foregroundBlur\"/>\n</filter>\n<filter id=\"filter7_f\" x=\"201.525\" y=\"144.407\" width=\"11.6669\" height=\"11.6669\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feGaussianBlur stdDeviation=\"1.29632\" result=\"effect1_foregroundBlur\"/>\n</filter>\n<linearGradient id=\"paint0_linear\" x1=\"106.615\" y1=\"63.4032\" x2=\"289.344\" y2=\"240.521\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.505208\" stop-color=\"#3F3F71\"/>\n<stop offset=\"1\" stop-color=\"#5D237D\"/>\n</linearGradient>\n<linearGradient id=\"paint1_linear\" x1=\"200.305\" y1=\"208.447\" x2=\"121.878\" y2=\"98.259\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#333357\"/>\n<stop offset=\"1\" stop-color=\"#6B6BBD\" stop-opacity=\"0.49\"/>\n</linearGradient>\n<linearGradient id=\"paint2_linear\" x1=\"116.692\" y1=\"142.334\" x2=\"206.138\" y2=\"195.483\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.0255459\" stop-color=\"white\"/>\n<stop offset=\"1\" stop-color=\"#E5E8E8\"/>\n</linearGradient>\n<linearGradient id=\"paint3_linear\" x1=\"134.811\" y1=\"148.895\" x2=\"127.845\" y2=\"133.378\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#8787DB\" stop-opacity=\"0.41\"/>\n<stop offset=\"1\" stop-color=\"#C5CACF\" stop-opacity=\"0.44\"/>\n</linearGradient>\n<linearGradient id=\"paint4_linear\" x1=\"214.811\" y1=\"189.895\" x2=\"207.845\" y2=\"174.378\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#8787DB\"/>\n<stop offset=\"1\" stop-color=\"#C5CACF\" stop-opacity=\"0.44\"/>\n</linearGradient>\n<linearGradient id=\"paint5_linear\" x1=\"164.859\" y1=\"93.962\" x2=\"143.031\" y2=\"190.673\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"white\" stop-opacity=\"0\"/>\n<stop offset=\"0.198345\" stop-color=\"white\" stop-opacity=\"0.72\"/>\n<stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"/>\n</linearGradient>\n<clipPath id=\"clip0\">\n<rect width=\"312\" height=\"312\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>\n";
-export const renderMagnifyingGlass = () => {
-    return html `
-    <atomic-icon
-      part="icon"
-      icon=${MagnifyingGlassIcon}
-      class="my-6 flex w-1/2 max-w-lg flex-col items-center"
-    ></atomic-icon>
-  `;
-};

package/dist/atomic/components/components/common/no-items/no-items.js

@@ -1,30 +0,0 @@
-import { localizedString } from "../../../directives/localized-string";
-import { html } from 'lit';
-export const renderNoItems = ({ props }) => {
-    const content = props.query
-        ? localizedString({
-            i18n: props.i18n,
-            key: `${props.i18nKey}-for`,
-            params: {
-                query: html `<span
-            class="inline-block max-w-full overflow-hidden align-bottom font-bold text-ellipsis whitespace-normal"
-            part="highlight"
-          >
-            ${localizedString({
-                    i18n: props.i18n,
-                    key: 'between-quotations',
-                    params: { text: props.query },
-                })}
-          </span>`,
-            },
-        })
-        : props.i18n.t(props.i18nKey);
-    return html `
-    <div
-      class="my-2 max-w-full text-center text-2xl font-medium"
-      part="no-results"
-    >
-      ${content}
-    </div>
-  `;
-};

package/dist/atomic/components/components/common/no-items/tips.js

@@ -1,8 +0,0 @@
-import { html } from 'lit';
-export const renderSearchTips = ({ props, }) => {
-    return html `
-    <div class="text-neutral-dark my-2 text-center text-lg" part="search-tips">
-      ${props.i18n.t('search-tips')}
-    </div>
-  `;
-};

package/dist/atomic/components/components/common/refine-modal/button.js

@@ -1,14 +0,0 @@
-import { html, nothing } from 'lit';
-import { renderButton } from '../button';
-export const renderRefineToggleButton = ({ props }) => {
-    return html `${renderButton({
-        props: {
-            style: 'outline-primary',
-            class: 'w-full p-3',
-            onClick: props.onClick,
-            text: props.i18n.t('sort-and-filter'),
-            ref: props.refCallback,
-            part: 'button',
-        },
-    })(nothing)}`;
-};

package/dist/atomic/components/components/common/refine-modal/guard.js

@@ -1,23 +0,0 @@
-import { html, nothing } from 'lit';
-import { directive, Directive } from 'lit/directive.js';
-class RefineToggleGuardDirective extends Directive {
-    render({ hasError, firstRequestExecuted, hasItems }, content) {
-        if (hasError) {
-            return nothing;
-        }
-        if (!firstRequestExecuted) {
-            return html `
-        <div
-          part="placeholder"
-          aria-hidden="true"
-          class="bg-neutral my-2 h-8 w-28 animate-pulse rounded"
-        ></div>
-      `;
-        }
-        if (!hasItems) {
-            return nothing;
-        }
-        return html `${content()}`;
-    }
-}
-export const refineToggleGuard = directive(RefineToggleGuardDirective);

package/dist/atomic/components/utils/object-utils.js

@@ -1,13 +0,0 @@
-export function readFromObject(object, key) {
-    const keys = key.split('.');
-    let current = object;
-    for (const k of keys) {
-        if (current && typeof current === 'object' && k in current) {
-            current = current[k];
-        }
-        else {
-            return undefined;
-        }
-    }
-    return typeof current === 'string' ? current : undefined;
-}

package/dist/atomic/p-022784c5.entry.js

@@ -1,2 +0,0 @@
-import{r as n,h as r,g as t}from"./p-dc3df5ce.js";import{Schema as e,StringValue as i}from"@coveo/bueno";import{buildSearchStatus as a,buildTabManager as o,buildNumericFacet as l,buildFacetConditionsManager as s,buildNumericRange as c}from"@coveo/headless";import{S as d,R as m}from"./p-2bdfa055.js";import{I as h,B as w,H as p}from"./p-d6e6dbc3.js";import{A as b,M as v}from"./p-8ad41548.js";import{F as u}from"./p-b55ab145.js";import{p as g}from"./p-0f13077e.js";import{F as f,a as y}from"./p-7555ad6d.js";import{F as x}from"./p-a3f0aaf4.js";import{F as k}from"./p-b5da81cf.js";import{F as z}from"./p-a7301a38.js";import{F as j}from"./p-2a02812b.js";import{i as F}from"./p-406f7e5a.js";import"./p-b1b751a5.js";import"./p-c9074946.js";import"./p-1580513b.js";import"./p-05de7ca3.js";import"./p-f77160c6.js";import"./p-7e34e6f5.js";import"./p-f284897c.js";import"./p-0462f723.js";import"./p-b700cfe1.js";import"./p-35fb03be.js";import"./p-fafae456.js";import"./p-f5982205.js";import"./p-f7133a5a.js";import"./p-21ab6f55.js";import"./p-66d48d1a.js";import"./p-7da7b187.js";import"./p-4b1dc787.js";const V='/*! 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}\n.value-count {\n  margin-left: calc(0.25rem * 1.5);\n  color: var(--atomic-neutral-dark);\n}\n[part=\'value-exclude-button\'] + .value-count {\n  margin-right: calc(0.25rem * 2);\n}\n:host(.popover-nested) {\n  min-width: 18rem;\n}\n:host(.popover-nested)::part(label-button) {\n  display: none;\n}\n:host(.popover-nested)::part(facet) {\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:host(.popover-nested)::part(values) {\n  margin-top: calc(0.25rem * 0);\n  max-height: calc(0.25rem * 96);\n  overflow-y: auto;\n}\n:host(.popover-nested)::part(search-wrapper) {\n  margin-bottom: calc(0.25rem * 2);\n}\n.value-checkbox {\n  width: var(--atomic-facet-checkbox-size, 1rem);\n  height: var(--atomic-facet-checkbox-size, 1rem);\n  position: absolute;\n  left: calc(0.25rem * 2);\n  z-index: 1;\n}\n.value-checkbox + label {\n  display: flex;\n  width: 100%;\n  cursor: pointer;\n  flex-direction: row;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding-block: calc(0.25rem * 2.5);\n  padding-right: calc(0.25rem * 2);\n  padding-left: calc(0.25rem * 8);\n  color: var(--atomic-on-background);\n}\n@media (hover: hover) {\n  .value-checkbox + label:hover {\n    background-color: var(--atomic-neutral-light);\n  }\n}\n.value-checkbox.selected:focus-visible + label .value-label, .value-checkbox.selected:hover + label .value-label {\n  color: var(--atomic-primary);\n}\n.value-checkbox.excluded:focus-visible + label .value-label, .value-checkbox.excluded:hover + label .value-label {\n  color: var(--atomic-error);\n}\n.icon-active {\n  color: var(--atomic-rating-icon-active-color, #f6ce3c);\n}\n.icon-inactive {\n  color: var(--atomic-rating-icon-inactive-color, var(--atomic-neutral));\n}\n.icon-active svg path, .icon-inactive svg path {\n  stroke: var(--atomic-rating-icon-outline);\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';const C=V;var S=undefined&&undefined.__decorate||function(n,r,t,e){var i=arguments.length,a=i<3?r:e===null?e=Object.getOwnPropertyDescriptor(r,t):e,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(n,r,t,e);else for(var l=n.length-1;l>=0;l--)if(o=n[l])a=(i<3?o(a):i>3?o(r,t,a):o(r,t))||a;return i>3&&a&&Object.defineProperty(r,t,a),a};const O=class{constructor(r){n(this,r);this.label="no-label";this.tabsIncluded="[]";this.tabsExcluded="[]";this.numberOfIntervals=5;this.maxValueInIndex=this.numberOfIntervals;this.minValueInIndex=1;this.displayValuesAs="checkbox";this.icon=d;this.isCollapsed=false;this.headingLevel=0;this.filterFacetCount=true;this.injectionDepth=1e3;this.dependsOn={};this.facetState=undefined;this.searchStatusState=undefined;this.tabManagerState=undefined;this.error=undefined;this.facetId=undefined;this.label="no-label";this.field=undefined;this.tabsIncluded="[]";this.tabsExcluded="[]";this.numberOfIntervals=5;this.maxValueInIndex=this.numberOfIntervals;this.minValueInIndex=1;this.displayValuesAs="checkbox";this.icon=d;this.isCollapsed=false;this.headingLevel=0;this.filterFacetCount=true;this.injectionDepth=1e3;this.dependsOn={}}get focusTarget(){if(!this.headerFocus){this.headerFocus=new u(this)}return this.headerFocus}validateProps(){new e({displayValuesAs:new i({constrainTo:["checkbox","link"]})}).validate({displayValuesAs:this.displayValuesAs})}initialize(){if([...this.tabsIncluded].length>0&&[...this.tabsExcluded].length>0){console.warn('Values for both "tabs-included" and "tabs-excluded" have been provided. This is could lead to unexpected behaviors.')}this.validateProps();this.searchStatus=a(this.bindings.engine);this.tabManager=o(this.bindings.engine);this.initializeFacet();this.initializeDependenciesManager()}initializeFacet(){const n={facetId:this.facetId,field:this.field,numberOfValues:this.numberOfIntervals,currentValues:this.generateCurrentValues(),sortCriteria:"descending",generateAutomaticRanges:false,filterFacetCount:this.filterFacetCount,injectionDepth:this.injectionDepth,tabs:{included:[...this.tabsIncluded],excluded:[...this.tabsExcluded]}};this.facet=l(this.bindings.engine,{options:n});this.facetId=this.facet.state.facetId;const r={label:()=>this.bindings.i18n.t(this.label),facetId:this.facetId,element:this.host,isHidden:()=>this.isHidden};this.bindings.store.registerFacet("numericFacets",{...r,format:n=>this.formatFacetValue(n),content:n=>this.ratingContent(n)});F(this.host,{...r,hasValues:()=>!!this.valuesToRender.length,numberOfActiveValues:()=>this.numberOfSelectedValues})}disconnectedCallback(){if(this.host.isConnected){return}this.dependenciesManager?.stopWatching()}get isHidden(){return this.searchStatusState.hasError||!this.facet.state.enabled||!this.valuesToRender.length}get scaleFactor(){return this.maxValueInIndex/this.numberOfIntervals}get numberOfSelectedValues(){return this.facetState.values.filter((({state:n})=>n==="selected")).length}initializeDependenciesManager(){this.dependenciesManager=s(this.bindings.engine,{facetId:this.facetId,conditions:g(this.dependsOn)})}generateCurrentValues(){const n=[];for(let r=this.minValueInIndex;r<=this.numberOfIntervals;r++){n.push(c({start:Math.round(r*this.scaleFactor*100)/100,end:Math.round((r+1)*this.scaleFactor*100)/100,endInclusive:false}))}return n}formatFacetValue(n){if(n.start===this.maxValueInIndex){return this.bindings.i18n.t("stars-only",{count:n.start})}return this.bindings.i18n.t("stars",{count:n.start,max:this.maxValueInIndex})}ratingContent(n){return r(m,{i18n:this.bindings.i18n,numberOfTotalIcons:this.maxValueInIndex,numberOfActiveIcons:n.start,icon:this.icon})}renderHeader(){return r(f,{i18n:this.bindings.i18n,label:this.label,onClearFilters:()=>{this.focusTarget.focusAfterSearch();this.facet.deselectAll()},numberOfActiveValues:this.numberOfSelectedValues,isCollapsed:this.isCollapsed,headingLevel:this.headingLevel,onToggleCollapse:()=>this.isCollapsed=!this.isCollapsed,headerRef:n=>this.focusTarget.setTarget(n)})}renderValue(n,t){const e=this.formatFacetValue(n);const i=n.state==="selected";const a=this.facetState.hasActiveValues&&!i;switch(this.displayValuesAs){case"checkbox":return r(k,{displayValue:e,numberOfResults:n.numberOfResults,isSelected:i,i18n:this.bindings.i18n,onClick:t},this.ratingContent(n));case"link":return r(z,{displayValue:e,numberOfResults:n.numberOfResults,isSelected:i,i18n:this.bindings.i18n,onClick:t,class:a?"opacity-80":undefined},this.ratingContent(n))}}renderValuesContainer(n){return r(j,{i18n:this.bindings.i18n,label:this.label},r("ul",{class:"mt-3",part:"values"},n))}renderValues(){return this.renderValuesContainer(this.valuesToRender.map((n=>this.renderValue(n,(()=>this.displayValuesAs==="link"?this.facet.toggleSingleSelect(n):this.facet.toggleSelect(n))))))}get valuesToRender(){return this.facet.state.values.filter((n=>n.numberOfResults||n.state!=="idle"))}render(){if(this.searchStatusState.hasError||!this.facet.state.enabled){return r(p,null)}if(!this.searchStatusState.firstSearchExecuted){return r(x,{numberOfValues:this.numberOfIntervals,isCollapsed:this.isCollapsed})}if(!this.valuesToRender.length){return r(p,null)}return r(y,null,this.renderHeader(),!this.isCollapsed&&this.renderValues())}get host(){return t(this)}};S([h()],O.prototype,"bindings",void 0);S([w("facet")],O.prototype,"facetState",void 0);S([w("searchStatus")],O.prototype,"searchStatusState",void 0);S([w("tabManager")],O.prototype,"tabManagerState",void 0);S([b()],O.prototype,"tabsIncluded",void 0);S([b()],O.prototype,"tabsExcluded",void 0);S([v()],O.prototype,"dependsOn",void 0);O.style=C;export{O as atomic_rating_facet};
-//# sourceMappingURL=p-022784c5.entry.js.map

package/dist/atomic/p-06037ffe.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,F as r,g as i}from"./p-dc3df5ce.js";import{Schema as s,NumberValue as c}from"@coveo/bueno";import{buildProductListing as a,buildSearch as o}from"@coveo/headless/commerce";import{I as n,B as f}from"./p-d6e6dbc3.js";import{F as m}from"./p-a3f0aaf4.js";import{c as l}from"./p-d799b454.js";import"./p-c9074946.js";import"./p-1580513b.js";import"./p-05de7ca3.js";import"./p-f77160c6.js";import"./p-7e34e6f5.js";import"./p-f284897c.js";import"./p-0462f723.js";var u=undefined&&undefined.__decorate||function(e,t,r,i){var s=arguments.length,c=s<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,r):i,a;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")c=Reflect.decorate(e,t,r,i);else for(var o=e.length-1;o>=0;o--)if(a=e[o])c=(s<3?a(c):s>3?a(t,r,c):a(t,r))||c;return s>3&&c&&Object.defineProperty(t,r,c),c};const p=class{constructor(t){e(this,t);this.collapseFacetsAfter=4;this.isAppLoaded=false;this.collapseFacetsAfter=4;this.facetGeneratorState=undefined;this.error=undefined;this.isAppLoaded=false}initialize(){this.validateProps();const{engine:e}=this.bindings;const t=this.controllerBuilder(e);this.facetGenerator=t.facetGenerator();this.summary=t.summary();l(this.bindings.store,(e=>{this.isAppLoaded=e}))}isProductListing(){return this.bindings.interfaceElement.type==="product-listing"}get controllerBuilder(){return this.isProductListing()?a:o}validateProps(){new s({collapseFacetAfter:new c({min:-1,required:true})}).validate({collapseFacetAfter:this.collapseFacetsAfter})}shouldCollapseFacet(e){if(this.collapseFacetsAfter===-1){return false}return this.collapseFacetsAfter?e+1>this.collapseFacetsAfter:true}render(){if(!this.isAppLoaded){return[...Array.from({length:this.collapseFacetsAfter})].map((()=>t(m,{isCollapsed:false,numberOfValues:8})))}return t(r,null,this.facetGenerator.facets.map(((e,r)=>{if(e.state.values.length===0){return}const i=()=>({isCollapsed:this.shouldCollapseFacet(r),summary:this.summary,facet:e,field:e.state.field,key:e.state.facetId});switch(e.state.type){case"regular":return t("atomic-commerce-facet",{...i()});case"numericalRange":return t("atomic-commerce-numeric-facet",{...i()});case"dateRange":return t("atomic-commerce-timeframe-facet",{...i()});case"hierarchical":return t("atomic-commerce-category-facet",{...i()});default:{this.bindings.engine.logger.warn("Unexpected facet type.");return}}})))}get host(){return i(this)}};u([n()],p.prototype,"bindings",void 0);u([f("facetGenerator")],p.prototype,"facetGeneratorState",void 0);export{p as atomic_commerce_facets};
-//# sourceMappingURL=p-06037ffe.entry.js.map

package/dist/atomic/p-06037ffe.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["AtomicCommerceFacets","this","collapseFacetsAfter","isAppLoaded","initialize","validateProps","engine","bindings","controller","controllerBuilder","facetGenerator","summary","createAppLoadedListener","store","isProductListing","interfaceElement","type","buildProductListing","buildSearch","Schema","collapseFacetAfter","NumberValue","min","required","validate","shouldCollapseFacet","index","render","Array","from","length","map","h","FacetPlaceholder","isCollapsed","numberOfValues","Fragment","facets","facet","state","values","props","field","key","facetId","logger","warn","__decorate","InitializeBindings","BindStateToController"],"sources":["src/components/commerce/facets/atomic-commerce-facets/atomic-commerce-facets.tsx"],"sourcesContent":["import {NumberValue, Schema} from '@coveo/bueno';\nimport {\n  RegularFacet,\n  CategoryFacet,\n  DateFacet,\n  NumericFacet,\n  FacetGeneratorState,\n  buildProductListing,\n  buildSearch,\n  FacetGenerator,\n  Summary,\n  SearchSummaryState,\n  ProductListingSummaryState,\n} from '@coveo/headless/commerce';\nimport {Component, h, Element, State, Prop, Fragment} from '@stencil/core';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {FacetPlaceholder} from '../../../common/facets/facet-placeholder/facet-placeholder';\nimport {createAppLoadedListener} from '../../../common/interface/store';\nimport {CommerceBindings as Bindings} from '../../atomic-commerce-interface/atomic-commerce-interface';\n\n/**\n * The `atomic-commerce-facets` component automatically renders commerce facets based on the Commerce API response.\n * Unlike regular facets, which require explicit definition and request in the query, the `atomic-commerce-facets` component dynamically generates facets.\n *\n * @alpha\n */\n@Component({\n  tag: 'atomic-commerce-facets',\n  shadow: false,\n})\nexport class AtomicCommerceFacets implements InitializableComponent<Bindings> {\n  @InitializeBindings() public bindings!: Bindings;\n  public facetGenerator!: FacetGenerator;\n  public summary!: Summary<SearchSummaryState | ProductListingSummaryState>;\n  @Element() host!: HTMLElement;\n\n  /**\n   * The maximum number of facets to expand.\n   * Remaining facets are automatically collapsed.\n   *\n   * Using the value `0` collapses all facets.\n   * Using the value `-1` disables the feature and keeps all facets expanded.\n   */\n  @Prop({reflect: true}) public collapseFacetsAfter = 4;\n\n  @BindStateToController('facetGenerator')\n  @State()\n  public facetGeneratorState!: FacetGeneratorState;\n\n  @State() public error!: Error;\n  @State() private isAppLoaded = false;\n\n  public initialize() {\n    this.validateProps();\n    const {engine} = this.bindings;\n    const controller = this.controllerBuilder(engine);\n    this.facetGenerator = controller.facetGenerator();\n    this.summary = controller.summary();\n    createAppLoadedListener(this.bindings.store, (isAppLoaded) => {\n      this.isAppLoaded = isAppLoaded;\n    });\n  }\n\n  private isProductListing() {\n    return this.bindings.interfaceElement.type === 'product-listing';\n  }\n\n  private get controllerBuilder() {\n    return this.isProductListing() ? buildProductListing : buildSearch;\n  }\n\n  private validateProps() {\n    new Schema({\n      collapseFacetAfter: new NumberValue({min: -1, required: true}),\n    }).validate({\n      collapseFacetAfter: this.collapseFacetsAfter,\n    });\n  }\n\n  private shouldCollapseFacet(index: number): boolean {\n    if (this.collapseFacetsAfter === -1) {\n      return false;\n    }\n    return this.collapseFacetsAfter\n      ? index + 1 > this.collapseFacetsAfter\n      : true;\n  }\n\n  public render() {\n    if (!this.isAppLoaded) {\n      return [...Array.from({length: this.collapseFacetsAfter})].map(() => (\n        <FacetPlaceholder isCollapsed={false} numberOfValues={8} />\n      ));\n    }\n    return (\n      <Fragment>\n        {this.facetGenerator.facets.map((facet, index) => {\n          if (facet.state.values.length === 0) {\n            return;\n          }\n\n          const props = <T,>() => ({\n            isCollapsed: this.shouldCollapseFacet(index),\n            summary: this.summary,\n            facet: facet as T,\n            field: facet.state.field,\n            key: facet.state.facetId,\n          });\n\n          switch (facet.state.type) {\n            case 'regular':\n              return (\n                <atomic-commerce-facet\n                  {...props<RegularFacet>()}\n                ></atomic-commerce-facet>\n              );\n            case 'numericalRange':\n              return (\n                <atomic-commerce-numeric-facet\n                  {...props<NumericFacet>()}\n                ></atomic-commerce-numeric-facet>\n              );\n            case 'dateRange':\n              return (\n                <atomic-commerce-timeframe-facet\n                  {...props<DateFacet>()}\n                ></atomic-commerce-timeframe-facet>\n              );\n            case 'hierarchical':\n              return (\n                <atomic-commerce-category-facet\n                  {...props<CategoryFacet>()}\n                ></atomic-commerce-category-facet>\n              );\n            default: {\n              // TODO COMHUB-291 support location facet\n              this.bindings.engine.logger.warn('Unexpected facet type.');\n              return;\n            }\n          }\n        })}\n      </Fragment>\n    );\n  }\n}\n"],"mappings":"40BAkCaA,EAAoB,M,yBAaDC,KAAAC,oBAAsB,EAOnCD,KAAAE,YAAc,M,yBAPqB,E,yEAOrB,K,CAExB,UAAAC,GACLH,KAAKI,gBACL,MAAMC,OAACA,GAAUL,KAAKM,SACtB,MAAMC,EAAaP,KAAKQ,kBAAkBH,GAC1CL,KAAKS,eAAiBF,EAAWE,iBACjCT,KAAKU,QAAUH,EAAWG,UAC1BC,EAAwBX,KAAKM,SAASM,OAAQV,IAC5CF,KAAKE,YAAcA,CAAW,G,CAI1B,gBAAAW,GACN,OAAOb,KAAKM,SAASQ,iBAAiBC,OAAS,iB,CAGjD,qBAAYP,GACV,OAAOR,KAAKa,mBAAqBG,EAAsBC,C,CAGjD,aAAAb,GACN,IAAIc,EAAO,CACTC,mBAAoB,IAAIC,EAAY,CAACC,KAAM,EAAGC,SAAU,SACvDC,SAAS,CACVJ,mBAAoBnB,KAAKC,qB,CAIrB,mBAAAuB,CAAoBC,GAC1B,GAAIzB,KAAKC,uBAAyB,EAAG,CACnC,OAAO,K,CAET,OAAOD,KAAKC,oBACRwB,EAAQ,EAAIzB,KAAKC,oBACjB,I,CAGC,MAAAyB,GACL,IAAK1B,KAAKE,YAAa,CACrB,MAAO,IAAIyB,MAAMC,KAAK,CAACC,OAAQ7B,KAAKC,uBAAuB6B,KAAI,IAC7DC,EAACC,EAAgB,CAACC,YAAa,MAAOC,eAAgB,K,CAG1D,OACEH,EAACI,EAAQ,KACNnC,KAAKS,eAAe2B,OAAON,KAAI,CAACO,EAAOZ,KACtC,GAAIY,EAAMC,MAAMC,OAAOV,SAAW,EAAG,CACnC,M,CAGF,MAAMW,EAAQ,MACZP,YAAajC,KAAKwB,oBAAoBC,GACtCf,QAASV,KAAKU,QACd2B,MAAOA,EACPI,MAAOJ,EAAMC,MAAMG,MACnBC,IAAKL,EAAMC,MAAMK,UAGnB,OAAQN,EAAMC,MAAMvB,MAClB,IAAK,UACH,OACEgB,EAAA,4BACMS,MAGV,IAAK,iBACH,OACET,EAAA,oCACMS,MAGV,IAAK,YACH,OACET,EAAA,sCACMS,MAGV,IAAK,eACH,OACET,EAAA,qCACMS,MAGV,QAAS,CAEPxC,KAAKM,SAASD,OAAOuC,OAAOC,KAAK,0BACjC,M,mCA1GiBC,EAAA,CAA5BC,K,+BAgBMD,EAAA,CAFNE,EAAsB,mB","ignoreList":[]}