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

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

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

Files changed (1477) hide show

package/dist/cjs/atomic-recs-list.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"atomic-recs-list.entry.cjs.js","mappings":"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","names":["randomID","buildRecommendationList","ItemTemplateProvider","ItemListCommon","createAppLoadedListener","FocusTargetController","NumberValue","loadConfigurationActions","h","Heading","recommendation","buildRecsInteractiveResult","getItemListDisplayClasses","DisplayGrid","DisplayWrapper","ResultsPlaceholdersGuard","ItemDisplayGuard","Fragment","Carousel","InitializeBindings","BindStateToController"],"sources":["src/components/recommendations/atomic-recs-list/atomic-recs-list.pcss?tag=atomic-recs-list&encapsulation=shadow","src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n@import '../../common/item-list/styles/mixins.pcss';\n@import '../../common/item-list/styles/placeholders.pcss';\n\n:host {\n @apply atomic-grid-clickable-elements;\n @apply atomic-grid-display-common;\n display: block;\n\n /*\n @prop --atomic-recs-number-of-columns: Number of columns for the recommendation list.\n /\n .list-root {\n @apply atomic-grid-with-cards;\n grid-template-columns: repeat(var(--atomic-recs-number-of-columns, 1), minmax(0, 1fr));\n }\n\n [part='label'] {\n @apply font-sans text-2xl font-bold;\n }\n\n atomic-result:not(.hydrated) {\n visibility: hidden;\n }\n}\n","import {NumberValue} from '@coveo/bueno';\nimport {\n buildRecommendationList,\n RecommendationList,\n RecommendationListState,\n loadConfigurationActions,\n buildInteractiveResult as buildRecsInteractiveResult,\n Result as RecsResult,\n} from '@coveo/headless/recommendation';\nimport {\n Component,\n State,\n Element,\n Prop,\n Method,\n h,\n Fragment,\n Watch,\n} from '@stencil/core';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {FocusTargetController} from '../../../utils/stencil-accessibility-utils';\nimport {randomID} from '../../../utils/utils';\nimport {ResultsPlaceholdersGuard} from '../../common/atomic-result-placeholder/stencil-placeholders';\nimport {createAppLoadedListener} from '../../common/interface/store';\nimport {ItemDisplayGuard} from '../../common/item-list/item-display-guard';\nimport {ItemTemplateProvider} from '../../common/item-list/item-template-provider';\nimport {DisplayGrid} from '../../common/item-list/stencil-display-grid';\nimport {DisplayWrapper} from '../../common/item-list/stencil-display-wrapper';\nimport {\n ItemListCommon,\n ItemRenderingFunction,\n} from '../../common/item-list/stencil-item-list-common';\nimport {\n ItemDisplayDensity,\n ItemDisplayImageSize,\n ItemDisplayBasicLayout,\n getItemListDisplayClasses,\n} from '../../common/layout/display-options';\nimport {Carousel} from '../../common/stencil-carousel';\nimport {Heading} from '../../common/stencil-heading';\nimport {RecsBindings} from '../atomic-recs-interface/atomic-recs-interface';\n\n/\n The `atomic-recs-list` component displays recommendations by applying one or more result templates.\n \n @part result-list - The element containing the list of results.\n * @part result-list-grid-clickable-container - The parent of the result & the clickable link encompassing it.\n * @part result-list-grid-clickable - The clickable link encompassing the result.\n * @part label - The label of the result list.\n * @part previous-button - The previous button.\n * @part next-button - The next button.\n * @part indicators - The list of indicators.\n * @part indicator - A single indicator.\n * @part active-indicator - The active indicator.\n * @slot default - The default slot where to insert the template element.\n /\n@Component({\n tag: 'atomic-recs-list',\n styleUrl: 'atomic-recs-list.pcss',\n shadow: true,\n})\nexport class AtomicRecsList implements InitializableComponent<RecsBindings> {\n @InitializeBindings() public bindings!: RecsBindings;\n public recommendationList!: RecommendationList;\n private loadingFlag = randomID('firstRecommendationLoaded-');\n private itemRenderingFunction: ItemRenderingFunction;\n private itemTemplateProvider!: ItemTemplateProvider;\n private nextNewResultTarget?: FocusTargetController;\n private itemListCommon!: ItemListCommon;\n\n @Element() public host!: HTMLDivElement;\n\n @State() public error!: Error;\n @State() private isAppLoaded = false;\n\n @State() private resultTemplateRegistered = false;\n @State() private templateHasError = false;\n @State() private currentPage = 0;\n @BindStateToController('recommendationList')\n @State()\n public recommendationListState!: RecommendationListState;\n\n /\n The Recommendation identifier used by the Coveo platform to retrieve recommended documents.\n * Make sure to set a different value for each atomic-recs-list in your page.\n /\n @Prop({reflect: true}) public recommendation = 'Recommendation';\n\n /\n The layout to apply when displaying results themselves. This does not affect the display of the surrounding list itself.\n * To modify the number of recommendations per column, modify the --atomic-recs-number-of-columns CSS variable.\n /\n @Prop({reflect: true}) public display: ItemDisplayBasicLayout = 'list';\n /\n The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.\n /\n @Prop({reflect: true}) public density: ItemDisplayDensity = 'normal';\n /\n The expected size of the image displayed in the results.\n /\n @Prop({reflect: true})\n public imageSize: ItemDisplayImageSize = 'small';\n\n /\n The total number of recommendations to display.\n * This does not modify the number of recommendations per column. To do so, modify the --atomic-recs-number-of-columns CSS variable.\n /\n @Prop({reflect: true}) public numberOfRecommendations = 10;\n\n /\n The number of recommendations to display, per page.\n * Setting a value greater than and lower than the numberOfRecommendations value activates the carousel.\n * This does not affect the display of the list itself, only the number of recommendation pages.\n /\n @Prop({reflect: true}) public numberOfRecommendationsPerPage?: number;\n\n /\n The non-localized label for the list of recommendations.\n /\n @Prop({reflect: true}) public label?: string;\n\n /\n The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading label, from 1 to 6.\n /\n @Prop({reflect: true}) public headingLevel = 0;\n\n @Watch('numberOfRecommendationsPerPage')\n public async watchNumberOfRecommendationsPerPage() {\n this.currentPage = 0;\n }\n\n /\n Sets a rendering function to bypass the standard HTML template mechanism for rendering results.\n * You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.\n \n Do not use this method if you integrate Atomic in a plain HTML deployment.\n \n @param resultRenderingFunction\n /\n @Method() public async setRenderFunction(\n resultRenderingFunction: ItemRenderingFunction\n ) {\n this.itemRenderingFunction = resultRenderingFunction;\n }\n\n /\n Moves to the previous page, when the carousel is activated.\n /\n @Method() public async previousPage() {\n this.currentPage =\n this.currentPage - 1 < 0 ? this.numberOfPages - 1 : this.currentPage - 1;\n }\n\n /\n Moves to the next page, when the carousel is activated.\n /\n @Method() public async nextPage() {\n this.currentPage = (this.currentPage + 1) % this.numberOfPages;\n }\n\n public initialize() {\n this.validateNumberOfRecommendationsPerPage();\n this.validateRecommendationIdentifier();\n this.updateOriginLevel2();\n this.recommendationList = buildRecommendationList(this.bindings.engine, {\n options: {\n id: this.recommendation,\n numberOfRecommendations: this.numberOfRecommendations,\n },\n });\n\n this.itemTemplateProvider = new ItemTemplateProvider({\n includeDefaultTemplate: true,\n templateElements: Array.from(\n this.host.querySelectorAll('atomic-recs-result-template')\n ),\n getResultTemplateRegistered: () => this.resultTemplateRegistered,\n getTemplateHasError: () => this.templateHasError,\n setResultTemplateRegistered: (value: boolean) => {\n this.resultTemplateRegistered = value;\n },\n setTemplateHasError: (value: boolean) => {\n this.templateHasError = value;\n },\n bindings: this.bindings,\n });\n\n this.itemListCommon = new ItemListCommon({\n engineSubscribe: this.bindings.engine.subscribe,\n getCurrentNumberOfItems: () =>\n this.recommendationListState.recommendations.length,\n getIsLoading: () => this.recommendationListState.isLoading,\n host: this.host,\n loadingFlag: this.loadingFlag,\n nextNewItemTarget: this.focusTarget,\n store: this.bindings.store,\n });\n\n createAppLoadedListener(this.bindings.store, (isAppLoaded) => {\n this.isAppLoaded = isAppLoaded;\n });\n }\n\n public get focusTarget() {\n if (!this.nextNewResultTarget) {\n this.nextNewResultTarget = new FocusTargetController(this);\n }\n return this.nextNewResultTarget;\n }\n\n private get recommendationListStateWithAugment() {\n return {\n ...this.recommendationListState,\n firstRequestExecuted:\n this.recommendationListState.searchResponseId !== '',\n hasError: this.recommendationListState.error !== null,\n hasItems: this.recommendationListState.recommendations.length !== 0,\n results: this.subsetRecommendations,\n };\n }\n\n private validateNumberOfRecommendationsPerPage() {\n const msg = new NumberValue({\n min: 1,\n max: this.numberOfRecommendations - 1,\n }).validate(this.numberOfRecommendationsPerPage!);\n\n if (msg) {\n this.error = new Error(\n `The \"numberOfRecommendationsPerPage\" is invalid: ${msg}`\n );\n }\n }\n\n private validateRecommendationIdentifier() {\n const recListWithRecommendation = document.querySelectorAll(\n `atomic-recs-list[recommendation=\"${this.recommendation}\"]`\n );\n\n if (recListWithRecommendation.length > 1) {\n this.bindings.engine.logger.warn(\n `There are multiple atomic-recs-list in this page with the same recommendation property \"${this.recommendation}\". Make sure to set a different recommendation property for each.`\n );\n }\n }\n\n private updateOriginLevel2() {\n if (this.label) {\n const action = loadConfigurationActions(\n this.bindings.engine\n ).setOriginLevel2({\n originLevel2: this.label,\n });\n\n this.bindings.engine.dispatch(action);\n }\n }\n\n private renderHeading() {\n if (!this.label) {\n return;\n }\n\n if (this.recommendationListStateWithAugment.hasError) {\n return;\n }\n\n if (\n this.recommendationListStateWithAugment.firstRequestExecuted &&\n !this.recommendationListStateWithAugment.hasItems\n ) {\n return;\n }\n\n return (\n <Heading level={this.headingLevel} part=\"label\" class=\"m-0 mb-2\">\n {this.bindings.i18n.t(this.label)}\n </Heading>\n );\n }\n\n private get currentIndex() {\n return Math.abs(\n (this.currentPage this.numberOfRecommendationsPerPage!) %\n this.recommendationListState.recommendations.length\n );\n }\n\n private get subsetRecommendations() {\n if (!this.numberOfRecommendationsPerPage) {\n return this.recommendationListState.recommendations;\n }\n\n return this.recommendationListState.recommendations.slice(\n this.currentIndex,\n this.currentIndex + this.numberOfRecommendationsPerPage\n );\n }\n\n private get numberOfPages() {\n return Math.ceil(\n this.recommendationListState.recommendations.length /\n this.numberOfRecommendationsPerPage!\n );\n }\n\n private get hasPagination() {\n return this.numberOfPages > 1;\n }\n\n private get shouldRenderPagination() {\n return (\n this.hasPagination && this.recommendationListStateWithAugment.hasItems\n );\n }\n\n private getPropsForAtomicRecsResult(recommendation: RecsResult) {\n const linkContent =\n this.itemTemplateProvider.getLinkTemplateContent(recommendation);\n\n return {\n interactiveResult: buildRecsInteractiveResult(this.bindings.engine, {\n options: {result: recommendation},\n }),\n result: recommendation,\n renderingFunction: this.itemRenderingFunction,\n loadingFlag: this.loadingFlag,\n key: this.itemListCommon.getResultId(\n recommendation.uniqueId,\n this.recommendationListState.searchResponseId,\n this.density,\n this.imageSize\n ),\n content: this.itemTemplateProvider.getTemplateContent(recommendation),\n linkContent,\n stopPropagation: !!linkContent,\n store: this.bindings.store,\n density: this.density,\n display: this.display,\n imageSize: this.imageSize,\n };\n }\n\n private computeListDisplayClasses() {\n const displayPlaceholders = !this.isAppLoaded;\n\n return getItemListDisplayClasses(\n 'grid',\n this.density,\n this.imageSize,\n this.recommendationListState.isLoading,\n displayPlaceholders\n );\n }\n\n private renderAsGrid(recommendation: RecsResult, i: number) {\n const propsForAtomicRecsResult =\n this.getPropsForAtomicRecsResult(recommendation);\n return (\n <DisplayGrid\n selectorForItem=\"atomic-recs-result\"\n item={recommendation}\n {...propsForAtomicRecsResult.interactiveResult}\n setRef={(element) =>\n element && this.itemListCommon.setNewResultRef(element, i)\n }\n >\n <atomic-recs-result {...propsForAtomicRecsResult}></atomic-recs-result>\n </DisplayGrid>\n );\n }\n\n private renderListOfRecommendations() {\n this.itemListCommon.updateBreakpoints();\n const listClasses = this.computeListDisplayClasses();\n\n if (\n !this.resultTemplateRegistered \|\|\n this.itemTemplateProvider.hasError \|\|\n this.error\n ) {\n return;\n }\n\n return (\n <DisplayWrapper listClasses={listClasses} display=\"grid\">\n <ResultsPlaceholdersGuard\n density={this.density}\n display={this.display}\n imageSize={this.imageSize}\n displayPlaceholders={!this.isAppLoaded}\n numberOfPlaceholders={\n this.numberOfRecommendationsPerPage ?? this.numberOfRecommendations\n }\n ></ResultsPlaceholdersGuard>\n <ItemDisplayGuard {...this.recommendationListStateWithAugment}>\n {this.subsetRecommendations.map((recommendation, i) => {\n return this.renderAsGrid(recommendation, i);\n })}\n </ItemDisplayGuard>\n </DisplayWrapper>\n );\n }\n\n public render() {\n return (\n <Fragment>\n {this.renderHeading()}\n {this.shouldRenderPagination ? (\n <Carousel\n bindings={this.bindings}\n currentPage={this.currentPage}\n nextPage={() => this.nextPage()}\n previousPage={() => this.previousPage()}\n numberOfPages={this.numberOfPages}\n >\n {this.renderListOfRecommendations()}\n </Carousel>\n ) : (\n this.renderListOfRecommendations()\n )}\n </Fragment>\n );\n }\n}\n"],"version":3}
1	+ {"file":"atomic-recs-list.entry.cjs.js","mappings":"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","names":["randomID","buildRecommendationList","ItemTemplateProvider","ItemListCommon","createAppLoadedListener","FocusTargetController","NumberValue","loadConfigurationActions","h","Heading","recommendation","buildRecsInteractiveResult","getItemListDisplayClasses","DisplayGrid","DisplayWrapper","ResultsPlaceholdersGuard","ItemDisplayGuard","Fragment","Carousel","InitializeBindings","BindStateToController"],"sources":["src/components/recommendations/atomic-recs-list/atomic-recs-list.pcss?tag=atomic-recs-list&encapsulation=shadow","src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n@import '../../common/item-list/styles/mixins.pcss';\n@import '../../common/item-list/styles/placeholders.pcss';\n\n:host {\n @apply atomic-grid-clickable-elements;\n @apply atomic-grid-display-common;\n display: block;\n\n /*\n @prop --atomic-recs-number-of-columns: Number of columns for the recommendation list.\n /\n .list-root {\n @apply atomic-grid-with-cards;\n grid-template-columns: repeat(var(--atomic-recs-number-of-columns, 1), minmax(0, 1fr));\n }\n\n [part='label'] {\n @apply font-sans text-2xl font-bold;\n }\n\n atomic-result:not(.hydrated) {\n visibility: hidden;\n }\n}\n","import {NumberValue} from '@coveo/bueno';\nimport {\n buildRecommendationList,\n RecommendationList,\n RecommendationListState,\n loadConfigurationActions,\n buildInteractiveResult as buildRecsInteractiveResult,\n Result as RecsResult,\n} from '@coveo/headless/recommendation';\nimport {\n Component,\n State,\n Element,\n Prop,\n Method,\n h,\n Fragment,\n Watch,\n} from '@stencil/core';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {FocusTargetController} from '../../../utils/stencil-accessibility-utils';\nimport {randomID} from '../../../utils/utils';\nimport {ResultsPlaceholdersGuard} from '../../common/atomic-result-placeholder/stencil-placeholders';\nimport {createAppLoadedListener} from '../../common/interface/store';\nimport {ItemDisplayGuard} from '../../common/item-list/item-display-guard';\nimport {ItemTemplateProvider} from '../../common/item-list/item-template-provider';\nimport {DisplayGrid} from '../../common/item-list/stencil-display-grid';\nimport {DisplayWrapper} from '../../common/item-list/stencil-display-wrapper';\nimport {\n ItemListCommon,\n ItemRenderingFunction,\n} from '../../common/item-list/stencil-item-list-common';\nimport {\n ItemDisplayDensity,\n ItemDisplayImageSize,\n ItemDisplayBasicLayout,\n getItemListDisplayClasses,\n} from '../../common/layout/display-options';\nimport {Carousel} from '../../common/stencil-carousel';\nimport {Heading} from '../../common/stencil-heading';\nimport {RecsBindings} from '../atomic-recs-interface/atomic-recs-interface';\n\n/\n The `atomic-recs-list` component displays recommendations by applying one or more result templates.\n \n @part result-list - The element containing the list of results.\n * @part result-list-grid-clickable-container - The parent of the result & the clickable link encompassing it.\n * @part result-list-grid-clickable - The clickable link encompassing the result.\n * @part label - The label of the result list.\n * @part previous-button - The previous button.\n * @part next-button - The next button.\n * @part indicators - The list of indicators.\n * @part indicator - A single indicator.\n * @part active-indicator - The active indicator.\n * @slot default - The default slot where to insert the template element.\n /\n@Component({\n tag: 'atomic-recs-list',\n styleUrl: 'atomic-recs-list.pcss',\n shadow: true,\n})\nexport class AtomicRecsList implements InitializableComponent<RecsBindings> {\n @InitializeBindings() public bindings!: RecsBindings;\n public recommendationList!: RecommendationList;\n private loadingFlag = randomID('firstRecommendationLoaded-');\n private itemRenderingFunction: ItemRenderingFunction;\n private itemTemplateProvider!: ItemTemplateProvider;\n private nextNewResultTarget?: FocusTargetController;\n private itemListCommon!: ItemListCommon;\n\n @Element() public host!: HTMLDivElement;\n\n @State() public error!: Error;\n @State() private isAppLoaded = false;\n\n @State() private resultTemplateRegistered = false;\n @State() private templateHasError = false;\n @State() private currentPage = 0;\n @BindStateToController('recommendationList')\n @State()\n public recommendationListState!: RecommendationListState;\n\n /\n The Recommendation identifier used by the Coveo platform to retrieve recommended documents.\n * Make sure to set a different value for each atomic-recs-list in your page.\n /\n @Prop({reflect: true}) public recommendation = 'Recommendation';\n\n /\n The layout to apply when displaying results themselves. This does not affect the display of the surrounding list itself.\n * To modify the number of recommendations per column, modify the --atomic-recs-number-of-columns CSS variable.\n /\n @Prop({reflect: true}) public display: ItemDisplayBasicLayout = 'list';\n /\n The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.\n /\n @Prop({reflect: true}) public density: ItemDisplayDensity = 'normal';\n /\n The expected size of the image displayed in the results.\n /\n @Prop({reflect: true})\n public imageSize: ItemDisplayImageSize = 'small';\n\n /\n The total number of recommendations to display.\n * This does not modify the number of recommendations per column. To do so, modify the --atomic-recs-number-of-columns CSS variable.\n /\n @Prop({reflect: true}) public numberOfRecommendations = 10;\n\n /\n The number of recommendations to display, per page.\n * Setting a value greater than and lower than the numberOfRecommendations value activates the carousel.\n * This does not affect the display of the list itself, only the number of recommendation pages.\n /\n @Prop({reflect: true}) public numberOfRecommendationsPerPage?: number;\n\n /\n The non-localized label for the list of recommendations.\n /\n @Prop({reflect: true}) public label?: string;\n\n /\n The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading label, from 1 to 6.\n /\n @Prop({reflect: true}) public headingLevel = 0;\n\n @Watch('numberOfRecommendationsPerPage')\n public async watchNumberOfRecommendationsPerPage() {\n this.currentPage = 0;\n }\n\n /\n Sets a rendering function to bypass the standard HTML template mechanism for rendering results.\n * You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.\n \n Do not use this method if you integrate Atomic in a plain HTML deployment.\n \n @param resultRenderingFunction\n /\n @Method() public async setRenderFunction(\n resultRenderingFunction: ItemRenderingFunction\n ) {\n this.itemRenderingFunction = resultRenderingFunction;\n }\n\n /\n Moves to the previous page, when the carousel is activated.\n /\n @Method() public async previousPage() {\n this.currentPage =\n this.currentPage - 1 < 0 ? this.numberOfPages - 1 : this.currentPage - 1;\n }\n\n /\n Moves to the next page, when the carousel is activated.\n /\n @Method() public async nextPage() {\n this.currentPage = (this.currentPage + 1) % this.numberOfPages;\n }\n\n public initialize() {\n this.validateNumberOfRecommendationsPerPage();\n this.validateRecommendationIdentifier();\n this.updateOriginLevel2();\n this.recommendationList = buildRecommendationList(this.bindings.engine, {\n options: {\n id: this.recommendation,\n numberOfRecommendations: this.numberOfRecommendations,\n },\n });\n\n this.itemTemplateProvider = new ItemTemplateProvider({\n includeDefaultTemplate: true,\n templateElements: Array.from(\n this.host.querySelectorAll('atomic-recs-result-template')\n ),\n getResultTemplateRegistered: () => this.resultTemplateRegistered,\n getTemplateHasError: () => this.templateHasError,\n setResultTemplateRegistered: (value: boolean) => {\n this.resultTemplateRegistered = value;\n },\n setTemplateHasError: (value: boolean) => {\n this.templateHasError = value;\n },\n bindings: this.bindings,\n });\n\n this.itemListCommon = new ItemListCommon({\n engineSubscribe: this.bindings.engine.subscribe,\n getCurrentNumberOfItems: () =>\n this.recommendationListState.recommendations.length,\n getIsLoading: () => this.recommendationListState.isLoading,\n host: this.host,\n loadingFlag: this.loadingFlag,\n nextNewItemTarget: this.focusTarget,\n store: this.bindings.store,\n });\n\n createAppLoadedListener(this.bindings.store, (isAppLoaded) => {\n this.isAppLoaded = isAppLoaded;\n });\n }\n\n public get focusTarget() {\n if (!this.nextNewResultTarget) {\n this.nextNewResultTarget = new FocusTargetController(this);\n }\n return this.nextNewResultTarget;\n }\n\n private get recommendationListStateWithAugment() {\n return {\n ...this.recommendationListState,\n firstRequestExecuted:\n this.recommendationListState.searchResponseId !== '',\n hasError: this.recommendationListState.error !== null,\n hasItems: this.recommendationListState.recommendations.length !== 0,\n results: this.subsetRecommendations,\n };\n }\n\n private validateNumberOfRecommendationsPerPage() {\n const msg = new NumberValue({\n min: 1,\n max: this.numberOfRecommendations - 1,\n }).validate(this.numberOfRecommendationsPerPage!);\n\n if (msg) {\n this.error = new Error(\n `The \"numberOfRecommendationsPerPage\" is invalid: ${msg}`\n );\n }\n }\n\n private validateRecommendationIdentifier() {\n const recListWithRecommendation = document.querySelectorAll(\n `atomic-recs-list[recommendation=\"${this.recommendation}\"]`\n );\n\n if (recListWithRecommendation.length > 1) {\n this.bindings.engine.logger.warn(\n `There are multiple atomic-recs-list in this page with the same recommendation property \"${this.recommendation}\". Make sure to set a different recommendation property for each.`\n );\n }\n }\n\n private updateOriginLevel2() {\n if (this.label) {\n const action = loadConfigurationActions(\n this.bindings.engine\n ).setOriginLevel2({\n originLevel2: this.label,\n });\n\n this.bindings.engine.dispatch(action);\n }\n }\n\n private renderHeading() {\n if (!this.label) {\n return;\n }\n\n if (this.recommendationListStateWithAugment.hasError) {\n return;\n }\n\n if (\n this.recommendationListStateWithAugment.firstRequestExecuted &&\n !this.recommendationListStateWithAugment.hasItems\n ) {\n return;\n }\n\n return (\n <Heading level={this.headingLevel} part=\"label\" class=\"m-0 mb-2\">\n {this.bindings.i18n.t(this.label)}\n </Heading>\n );\n }\n\n private get currentIndex() {\n return Math.abs(\n (this.currentPage this.numberOfRecommendationsPerPage!) %\n this.recommendationListState.recommendations.length\n );\n }\n\n private get subsetRecommendations() {\n if (!this.numberOfRecommendationsPerPage) {\n return this.recommendationListState.recommendations;\n }\n\n return this.recommendationListState.recommendations.slice(\n this.currentIndex,\n this.currentIndex + this.numberOfRecommendationsPerPage\n );\n }\n\n private get numberOfPages() {\n return Math.ceil(\n this.recommendationListState.recommendations.length /\n this.numberOfRecommendationsPerPage!\n );\n }\n\n private get hasPagination() {\n return this.numberOfPages > 1;\n }\n\n private get shouldRenderPagination() {\n return (\n this.hasPagination && this.recommendationListStateWithAugment.hasItems\n );\n }\n\n private getPropsForAtomicRecsResult(recommendation: RecsResult) {\n const linkContent =\n this.itemTemplateProvider.getLinkTemplateContent(recommendation);\n\n return {\n interactiveResult: buildRecsInteractiveResult(this.bindings.engine, {\n options: {result: recommendation},\n }),\n result: recommendation,\n renderingFunction: this.itemRenderingFunction,\n loadingFlag: this.loadingFlag,\n key: this.itemListCommon.getResultId(\n recommendation.uniqueId,\n this.recommendationListState.searchResponseId,\n this.density,\n this.imageSize\n ),\n content: this.itemTemplateProvider.getTemplateContent(recommendation),\n linkContent,\n stopPropagation: !!linkContent,\n store: this.bindings.store,\n density: this.density,\n display: this.display,\n imageSize: this.imageSize,\n };\n }\n\n private computeListDisplayClasses() {\n const displayPlaceholders = !this.isAppLoaded;\n\n return getItemListDisplayClasses(\n 'grid',\n this.density,\n this.imageSize,\n this.recommendationListState.isLoading,\n displayPlaceholders\n );\n }\n\n private renderAsGrid(recommendation: RecsResult, i: number) {\n const propsForAtomicRecsResult =\n this.getPropsForAtomicRecsResult(recommendation);\n return (\n <DisplayGrid\n selectorForItem=\"atomic-recs-result\"\n item={recommendation}\n {...propsForAtomicRecsResult.interactiveResult}\n setRef={(element) =>\n element && this.itemListCommon.setNewResultRef(element, i)\n }\n >\n <atomic-recs-result {...propsForAtomicRecsResult}></atomic-recs-result>\n </DisplayGrid>\n );\n }\n\n private renderListOfRecommendations() {\n this.itemListCommon.updateBreakpoints();\n const listClasses = this.computeListDisplayClasses();\n\n if (\n !this.resultTemplateRegistered \|\|\n this.itemTemplateProvider.hasError \|\|\n this.error\n ) {\n return;\n }\n\n return (\n <DisplayWrapper listClasses={listClasses} display=\"grid\">\n <ResultsPlaceholdersGuard\n density={this.density}\n display={this.display}\n imageSize={this.imageSize}\n displayPlaceholders={!this.isAppLoaded}\n numberOfPlaceholders={\n this.numberOfRecommendationsPerPage ?? this.numberOfRecommendations\n }\n ></ResultsPlaceholdersGuard>\n <ItemDisplayGuard {...this.recommendationListStateWithAugment}>\n {this.subsetRecommendations.map((recommendation, i) => {\n return this.renderAsGrid(recommendation, i);\n })}\n </ItemDisplayGuard>\n </DisplayWrapper>\n );\n }\n\n public render() {\n return (\n <Fragment>\n {this.renderHeading()}\n {this.shouldRenderPagination ? (\n <Carousel\n bindings={this.bindings}\n currentPage={this.currentPage}\n nextPage={() => this.nextPage()}\n previousPage={() => this.previousPage()}\n numberOfPages={this.numberOfPages}\n >\n {this.renderListOfRecommendations()}\n </Carousel>\n ) : (\n this.renderListOfRecommendations()\n )}\n </Fragment>\n );\n }\n}\n"],"version":3}

package/dist/cjs/atomic-refine-modal.cjs.entry.js CHANGED Viewed

@@ -11,22 +11,27 @@ const atomicLayoutSectionUtils = require('./atomic-layout-section-utils-08b4fbcd
 const popoverType = require('./popover-type-b1385b27.js');
 const stencilFacetCommon = require('./stencil-facet-common-c258bef8.js');
 const store = require('./store-7927ea61.js');
-const stencilButton = require('./stencil-button-94b89acc.js');
-const stencilModal = require('./stencil-modal-9035ea2a.js');
+const stencilButton = require('./stencil-button-aa0f9cb5.js');
+const stencilModal = require('./stencil-modal-c8184bfa.js');
 require('./dom-utils-d4790328.js');
 require('./event-utils-9bfcf3c5.js');
 require('./init-queue-a18aa323.js');
 require('./initialization-lit-stencil-common-utils-730030b0.js');
 require('./purify-85b542e2.js');
 require('./_commonjsHelpers-b3309d7b.js');
-require('./stencil-button-style-ba779fe2.js');
 require('./close-20739950.js');
 require('./export-parts-878c454a.js');
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const RefineModalBody = (_, children) => {
     return (index.h("aside", { part: "content", slot: "body", class: "flex flex-col w-full" }, children));
 };
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const RefineModalFiltersSection = ({ i18n, withAutomaticFacets, withFacets }, children) => {
     return (index.h(index.Fragment, null,
         index.h("div", { part: "filter-section", class: "mt-8 mb-3 flex w-full justify-between" },
@@ -35,6 +40,9 @@ const RefineModalFiltersSection = ({ i18n, withAutomaticFacets, withFacets }, ch
         withFacets && index.h("slot", { name: "facets" }),
         withAutomaticFacets && index.h("slot", { name: "automatic-facets" })));
 };
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const RefineModalFiltersClearButton = ({ i18n, onClick }) => {
     return (index.h(stencilButton.Button, { onClick: onClick, style: "text-primary", text: i18n.t('clear'), class: "px-2 py-1", part: "filter-clear-all" }));
 };
@@ -46,6 +54,9 @@ const SortIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/
     <path d="M13 10L16.5 6L20 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const RefineModalSortSection = ({ i18n, onSelect }, children) => {
     return (index.h(index.Fragment, null,
         index.h("h1", { part: "section-title section-sort-title", class: "mb-3 truncate text-2xl font-bold" }, i18n.t('sort')),
@@ -213,7 +224,7 @@ const AtomicRefineModal = class {
         return (index.h(RefineModalFiltersSection, { i18n: i18n, withFacets: hasFacetElements, withAutomaticFacets: hasAutomaticFacets }, this.breadcrumbManagerState.hasBreadcrumbs && (index.h(RefineModalFiltersClearButton, { i18n: i18n, onClick: () => this.breadcrumbManager.deselectAll() }))));
     }
     render() {
-        return (index.h(stencilModal.RefineModal, { key: 'c90b5bf9bcee949c806ba3d4d33580168f45e008', i18n: this.bindings.i18n, host: this.host, isOpen: this.isOpen, onClose: () => (this.isOpen = false), title: this.bindings.i18n.t('sort-and-filter'), numberOfItems: this.querySummaryState.total, openButton: this.openButton }, index.h(RefineModalBody, { key: '29bc9e15d4692da14473568d270638e06286088b' }, this.renderSort(), this.renderFilters())));
+        return (index.h(stencilModal.RefineModal, { key: '9887b5ef9a295830a2c07acc496f646186acc95e', i18n: this.bindings.i18n, host: this.host, isOpen: this.isOpen, onClose: () => (this.isOpen = false), title: this.bindings.i18n.t('sort-and-filter'), numberOfItems: this.querySummaryState.total, openButton: this.openButton }, index.h(RefineModalBody, { key: '21345c8e35ba2af97cf29183f6193490d0cfd906' }, this.renderSort(), this.renderFilters())));
     }
     componentDidLoad() {
         this.host.style.display = '';

package/dist/cjs/atomic-refine-modal.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"atomic-refine-modal.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAEO,MAAM,eAAe,GAAwB,CAAC,CAAC,EAAE,QAAQ;IAC9D,QACEA,mBACE,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,sBAAsB,IAE3B,QAAQ,CACH,EACR;AACJ,CAAC;;ACHM,MAAM,yBAAyB,GAElC,CAAC,EAAC,IAAI,EAAE,mBAAmB,EAAE,UAAU,EAAC,EAAE,QAAQ;IACpD,QACEA,QAACC,cAAQ;QACPD,iBAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,uCAAuC;YACtEA,gBACE,IAAI,EAAC,qCAAqC,EAC1C,KAAK,EAAC,6BAA6B,IAElC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CACf;YACJ,QAAQ,CACL;QACL,UAAU,IAAIA,kBAAM,IAAI,EAAC,QAAQ,GAAQ;QACzC,mBAAmB,IAAIA,kBAAM,IAAI,EAAC,kBAAkB,GAAQ,CACpD,EACX;AACJ,CAAC,CAAC;AAMK,MAAM,6BAA6B,GAEtC,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC;IAClB,QACEA,QAACE,oBAAM,IACL,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,EACrB,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,kBAAkB,GACf,EACV;AACJ,CAAC;;;;;;;;;ACrCM,MAAM,sBAAsB,GAE/B,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAC,EAAE,QAAQ;IAC7B,QACEF,QAACC,cAAQ;QACPD,gBACE,IAAI,EAAC,kCAAkC,EACvC,KAAK,EAAC,kCAAkC,IAEvC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CACZ;QACLA,iBAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,UAAU;YACzCA,oBACE,KAAK,EAAC,uGAAuG,EAC7G,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,EAC7B,QAAQ,EAAE,QAAQ,IAEjB,QAAQ,CACF;YACTA,iBACE,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAC,2FAA2F;gBAEjGA,yBACE,IAAI,EAAC,aAAa,EAClB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,SAAS,GACF,CACX,CACF,CACG,EACX;AACJ,CAAC;;ACzCD,MAAM,oBAAoB,GAAG,urjEAAurjE,CAAC;AACrtjE,gCAAe,oBAAoB;;;;;;;;;;;;MCkFtB,iBAAiB;;;QA2BU,WAAM,GAAG,KAAK,CAAC;;;;;;;QAQvB,wBAAmB,GAAG,CAAC,CAAC;;;;;;;;sBARP,KAAK;mCAQA,CAAC;;IAGrD,YAAY,CAAC,MAAe;QAC1B,IAAI,MAAM,EAAE;YACV,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,EAAE;gBACjD,OAAO;aACR;YAED,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;SAC1C;KACF;IAEM,UAAU;QACf,IAAI,CAAC,iBAAiB,GAAGG,+BAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACtE,IAAI,CAAC,IAAI,GAAGC,kBAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,YAAY,GAAGC,0BAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC5D,IAAI,CAAC,YAAY,GAAGC,0BAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC5D,IAAI,CAAC,YAAY,GAAGC,0BAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC5D,IAAI,CAAC,UAAU,GAAGC,wBAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACxD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;IAEO,eAAe;QACrB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACvC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;QAEpC,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,gBAAgB,EAAwB,CAAC;QAC5E,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CACpDC,4BAAsB,CACvB,CAAC;QACF,MAAM,aAAa,GAAG,EAAE,CAAC;QACzB,MAAM,uBAAuB,GAAG,EAAE,CAAC;QACnC,KAAK,MAAM,cAAc,IAAI,eAAe,EAAE;YAC5C,MAAM,YAAY,GAAGC,oCAAW,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;YAC3D,IAAI,YAAY,EAAE;gBAChB,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;aAClC;YACD,MAAM,sBAAsB,GAAGA,oCAAW,CACxC,cAAc,EACd,mBAAmB,CACpB,CAAC;YACF,IAAI,sBAAsB,EAAE;gBAC1B,uBAAuB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;aACtD;SACF;QACD,MAAM,aAAa,GAAGC,wCAAqB,CACzC,MAAM,EACN,GAAG,uBAAuB,EAC1B,GAAG,aAAa,CACjB,CAAC;QACF,KAAK,MAAM,YAAY,IAAI,aAAa,CAAC,MAAM,EAAE,EAAE;YACjD,YAAY,CAAC,IAAI,CAACF,4BAAsB,CAAC,CAAC;SAC3C;QAED,MAAM,YAAY,GAAG,EAAE,CAAC;QACxB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC/C,YAAY,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;YAClE,YAAY,CAAC,IAAI,CACf,IAAI,aAAa,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CACzD,CAAC;SACH;QACD,YAAY,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QAEtD,MAAM,EAAC,aAAa,EAAE,eAAe,EAAC,GAAGG,sCAAmB,CAC1D,YAAY,EACZ,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,EAAE,CACnC,CAAC;QAEF,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;QAC3D,MAAM,oBAAoB,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;QAE/DC,sCAAmB,CAAC,kBAAkB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAElE,OAAO,CAAC,MAAM,CAAC,GAAG,kBAAkB,CAAC,CAAC;QACtC,OAAO,CAAC,MAAM,CAAC,GAAG,oBAAoB,CAAC,CAAC;QAExC,MAAM,SAAS,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACrD,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,+CAA+C,CACvD,IAAI,CAAC,mBAAmB,EACxB,aAAa,CAAC,MAAM,CACrB,CAAC;YACF,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;SAC3B;QAED,OAAO,OAAO,CAAC;KAChB;IAEO,kBAAkB;QACxB,MAAM,aAAa,GACjB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC;YAC5C,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,cAAc;YACpD,IAAI,CAAC;QACP,IAAI,CAAC,aAAa,EAAE;YAClB,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC;SAChD;QACD,MAAM,uBAAuB,GAAG,KAAK,CAAC,IAAI,CACxC,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAC7C,CAAC,MAAM,CACN,CAAC,cAAc,KAAK,cAAc,CAAC,cAAc,KAAK,aAAa,CACpE,CAAC;QACF,OAAO,CAAC,GAAG,uBAAuB,EAAE,aAAa,CAAC,CAAC;KACpD;IAEO,WAAW,CAAC,MAA0B;QAC5C,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;YACzB,KAAK,CAAC,SAAS,CAAC,MAAM,CAACC,wBAAY,CAAC,CAAC;YACrC,KAAK,CAAC,YAAY,CAACC,wBAAkB,EAAE,EAAE,CAAC,CAAC;YAC3C,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAqB,CAAC;YACxD,KAAK,CAAC,WAAW;gBACf,IAAI,CAAC,mBAAmB,KAAK,CAAC,CAAC;sBAC3B,KAAK;sBACL,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,mBAAmB,CAAC;YACvC,OAAO,KAAK,CAAC;SACd,CAAC,CAAC;KACJ;IAEO,2BAA2B;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,iBAAiB,EAAE,YAAY,EAAE;YAC/D,OAAO;SACR;QACD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CACtC,kCAAkC,CACnC,CAAC;QAEF,SAAS,CAAC,YAAY,CACpB,eAAe,EACf,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,iBAAiB,EAAE,YAAY,EAAE,CAChE,CAAC;QACF,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,CAAC;QAEtC,OAAO,SAAS,CAAC;KAClB;IAEO,qBAAqB,CAAC,EAAe;QAC3C,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,EAAE,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;QAClC,EAAE,CAAC,KAAK,CAAC,GAAG,GAAG,+CAA+C,CAAC;KAChE;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;KAC9C;IAEO,MAAM,CAAC,CAAQ;QACrB,MAAM,MAAM,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAsB,CAAC;QACxD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAC9B,CAAC,MAAM,KAAK,MAAM,CAAC,UAAU,KAAK,MAAM,CAAC,KAAK,CAC/C,CAAC;QACF,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;KAC7C;IAEO,WAAW,CAAC,EAAC,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAqB;QACzE,IACE,CAACC,kCAAyB,CACxB,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,EAClB,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,EAClB,IAAI,CAAC,eAAe,EAAE,SAAS,CAChC,EACD;YACA,OAAO;SACR;QACD,QACEhB,oBAAQ,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAChE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CACrB,EACT;KACH;IAEO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;YACxB,OAAO;SACR;QAED,QACEA,QAAC,sBAAsB,IACrB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,QAAQ,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAExC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAChC,EACzB;KACH;IAEO,aAAa;QACnB,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAC3E,MAAM,kBAAkB,GACtB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,iBAAiB,EAAE,GAAG,KAAK,SAAS,CAAC;QAElE,IAAI,CAAC,gBAAgB,IAAI,CAAC,kBAAkB,EAAE;YAC5C,OAAO;SACR;QAED,MAAM,EAAC,IAAI,EAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QAE7B,QACEA,QAAC,yBAAyB,IACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,gBAAgB,EAC5B,mBAAmB,EAAE,kBAAkB,IAEtC,IAAI,CAAC,sBAAsB,CAAC,cAAc,KACzCA,QAAC,6BAA6B,IAC5B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,GACnD,CACH,CACyB,EAC5B;KACH;IAEM,MAAM;QACX,QACEA,QAACiB,wBAAW,qDACV,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,EACpC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAC9C,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAC3C,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3BjB,QAAC,eAAe,uDACb,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,aAAa,EAAE,CACL,CACN,EACd;KACH;IAEM,gBAAgB;QACrB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;KAC9B;;;;;;AAvQ4B;IAA5BkB,sCAAkB,EAAE;mDAA4B;AAK1C;IAFNC,yCAAqB,CAAC,cAAc,CAAC;4DAEO;AAGrC;IAFPA,yCAAqB,CAAC,mBAAmB,CAAC;iEAEa;AAGjD;IAFNA,yCAAqB,CAAC,cAAc,CAAC;4DAEO;AACE;IAArCA,yCAAqB,CAAC,MAAM,CAAC;oDAA8B;AAI9D;IAFNA,yCAAqB,CAAC,YAAY,CAAC;0DAEK;;;;;","names":["h","Fragment","Button","buildBreadcrumbManager","buildSort","buildQuerySummary","buildSearchStatus","buildFacetManager","buildTabManager","sortByDocumentPosition","findSection","triageFacetsByParents","sortFacetVisibility","collapseFacetsAfter","popoverClass","isRefineModalFacet","shouldDisplayOnCurrentTab","RefineModal","InitializeBindings","BindStateToController"],"sources":["src/components/common/refine-modal/stencil-body.tsx","src/components/common/refine-modal/stencil-filters.tsx","src/components/common/refine-modal/stencil-sort.tsx","src/components/search/atomic-refine-modal/atomic-refine-modal.pcss?tag=atomic-refine-modal&encapsulation=shadow","src/components/search/atomic-refine-modal/atomic-refine-modal.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\n\nexport const RefineModalBody: FunctionalComponent = (_, children) => {\n return (\n <aside\n part=\"content\"\n slot=\"body\"\n class=\"flex flex-col w-full\"\n >\n {children}\n </aside>\n );\n};\n","import {FunctionalComponent, Fragment, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {Button} from '../stencil-button';\n\ninterface RefineModalFiltersSectionProps {\n i18n: i18n;\n withFacets: boolean;\n withAutomaticFacets: boolean;\n}\nexport const RefineModalFiltersSection: FunctionalComponent<\n RefineModalFiltersSectionProps\n> = ({i18n, withAutomaticFacets, withFacets}, children) => {\n return (\n <Fragment>\n <div part=\"filter-section\" class=\"mt-8 mb-3 flex w-full justify-between\">\n <h1\n part=\"section-title section-filters-title\"\n class=\"truncate text-2xl font-bold\"\n >\n {i18n.t('filters')}\n </h1>\n {children}\n </div>\n {withFacets && <slot name=\"facets\"></slot>}\n {withAutomaticFacets && <slot name=\"automatic-facets\"></slot>}\n </Fragment>\n );\n};\n\ninterface RefineModalFiltersClearButtonProps {\n i18n: i18n;\n onClick: () => void;\n}\nexport const RefineModalFiltersClearButton: FunctionalComponent<\n RefineModalFiltersClearButtonProps\n> = ({i18n, onClick}) => {\n return (\n <Button\n onClick={onClick}\n style=\"text-primary\"\n text={i18n.t('clear')}\n class=\"px-2 py-1\"\n part=\"filter-clear-all\"\n ></Button>\n );\n};\n","import {Fragment, FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport SortIcon from '../../../images/sort.svg';\n\ninterface RefineModalSortSectionProps {\n i18n: i18n;\n onSelect: (e: Event) => void;\n}\nexport const RefineModalSortSection: FunctionalComponent<\n RefineModalSortSectionProps\n> = ({i18n, onSelect}, children) => {\n return (\n <Fragment>\n <h1\n part=\"section-title section-sort-title\"\n class=\"mb-3 truncate text-2xl font-bold\"\n >\n {i18n.t('sort')}\n </h1>\n <div part=\"select-wrapper\" class=\"relative\">\n <select\n class=\"btn-outline-neutral w-full grow cursor-pointer appearance-none rounded-lg px-6 py-5 text-lg font-bold\"\n part=\"select\"\n aria-label={i18n.t('sort-by')}\n onChange={onSelect}\n >\n {children}\n </select>\n <div\n part=\"select-icon-wrapper\"\n class=\"pointer-events-none absolute top-0 right-0 bottom-0 flex items-center justify-center pr-6\"\n >\n <atomic-icon\n part=\"select-icon\"\n icon={SortIcon}\n class=\"h-6 w-6\"\n ></atomic-icon>\n </div>\n </div>\n </Fragment>\n );\n};\n","@import '../../../global/global.pcss';\n\n/* This stylesheet can be removed once atomic-refine-modal is migrated to lit.\n\nThe remaining styles can also be removed as they have been moved to the refine-modal/sort.ts functional component/\n\n/\n @prop --atomic-refine-modal-facet-margin: The spacing between the modal's facets.\n /\nselect:hover + div,\nselect:focus-visible + div {\n @apply text-primary-light;\n}\n","import {\n BreadcrumbManager,\n buildBreadcrumbManager,\n BreadcrumbManagerState,\n QuerySummary,\n QuerySummaryState,\n FacetManagerState,\n Sort,\n buildSort,\n SortState,\n buildQuerySummary,\n buildSearchStatus,\n SearchStatus,\n FacetManager,\n buildFacetManager,\n TabManager,\n TabManagerState,\n buildTabManager,\n} from '@coveo/headless';\nimport {Component, h, State, Prop, Element, Watch} from '@stencil/core';\nimport {\n AtomicInterface,\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {shouldDisplayOnCurrentTab} from '../../../utils/tab-utils';\nimport {sortByDocumentPosition} from '../../../utils/utils';\nimport {findSection} from '../../common/atomic-layout-section/atomic-layout-section-utils';\nimport {popoverClass} from '../../common/facets/popover/popover-type';\nimport {\n BaseFacetElement,\n sortFacetVisibility,\n triageFacetsByParents,\n collapseFacetsAfter,\n} from '../../common/facets/stencil-facet-common';\nimport {isRefineModalFacet} from '../../common/interface/store';\nimport {RefineModalBody} from '../../common/refine-modal/stencil-body';\nimport {\n RefineModalFiltersClearButton,\n RefineModalFiltersSection,\n} from '../../common/refine-modal/stencil-filters';\nimport {RefineModal} from '../../common/refine-modal/stencil-modal';\nimport {RefineModalSortSection} from '../../common/refine-modal/stencil-sort';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\nimport {SortDropdownOption} from '../atomic-search-interface/store';\n\n/\n The `atomic-refine-modal` is automatically created as a child of the `atomic-search-interface` when the `atomic-refine-toggle` is initialized.\n \n When the modal is opened, the class `atomic-modal-opened` is added to the interface element and the body, allowing further customization.\n \n @part container - The modal's outermost container.\n * @part header-wrapper - The wrapper around the header.\n * @part header - The header of the modal, containing the title.\n * @part title - The title of the modal.\n * @part close-button - The button in the header that closes the modal.\n * @part close-icon - The icon of the close button.\n * @part header-ruler - The horizontal ruler underneath the header.\n * @part body-wrapper - The wrapper around the body.\n * @part body - The body of the modal, between the header and the footer.\n * @part content - The wrapper around the content inside the body of the modal.\n * @part section-title - The title for each section.\n * @part section-sort-title - The title for the sort section.\n * @part section-filters-title - The title for the filters section.\n * @part select-wrapper - The wrapper around the select element, used to position the icon.\n * @part select - The `<select>` element of the dropdown list.\n * @part select-icon-wrapper - The wrapper around the sort icon that's used to align it.\n * @part select-icon - The select dropdown's sort icon.\n * @part filter-section - The section containing facets and the \"filters\" title.\n * @part filter-clear-all - The button that resets all actively selected facet values.\n * @part footer-wrapper - The wrapper with a shadow or background color around the footer.\n * @part footer - The footer of the modal.\n * @part footer-content - The wrapper around the content inside the footer of the modal, containing the button to view results.\n * @part footer-button - The button in the footer that closes the modal.\n * @part footer-button-text - The text inside the button in the footer that closes the modal.\n * @part footer-button-count - The count inside the button in the footer that closes the modal.\n /\n@Component({\n tag: 'atomic-refine-modal',\n styleUrl: 'atomic-refine-modal.pcss',\n shadow: true,\n})\nexport class AtomicRefineModal implements InitializableComponent {\n private sort!: Sort;\n private breadcrumbManager!: BreadcrumbManager;\n public querySummary!: QuerySummary;\n public searchStatus!: SearchStatus;\n public facetManager!: FacetManager;\n @InitializeBindings() public bindings!: Bindings;\n @Element() public host!: HTMLElement;\n\n @BindStateToController('querySummary')\n @State()\n public querySummaryState!: QuerySummaryState;\n @BindStateToController('breadcrumbManager')\n @State()\n private breadcrumbManagerState!: BreadcrumbManagerState;\n @BindStateToController('facetManager')\n @State()\n public facetManagerState!: FacetManagerState;\n @State() @BindStateToController('sort') public sortState!: SortState;\n public tabManager!: TabManager;\n @BindStateToController('tabManager')\n @State()\n public tabManagerState!: TabManagerState;\n @State() public error!: Error;\n\n @Prop({mutable: true}) openButton?: HTMLElement;\n\n @Prop({reflect: true, mutable: true}) isOpen = false;\n\n /\n The number of expanded facets inside the refine modal.\n * Remaining facets are automatically collapsed.\n \n Using the value `0` collapses all facets.\n */\n @Prop({reflect: true}) public collapseFacetsAfter = 0;\n\n @Watch('isOpen')\n watchEnabled(isOpen: boolean) {\n if (isOpen) {\n if (this.host.querySelector('div[slot=\"facets\"]')) {\n return;\n }\n\n this.host.append(this.createFacetSlot());\n }\n }\n\n public initialize() {\n this.breadcrumbManager = buildBreadcrumbManager(this.bindings.engine);\n this.sort = buildSort(this.bindings.engine);\n this.querySummary = buildQuerySummary(this.bindings.engine);\n this.searchStatus = buildSearchStatus(this.bindings.engine);\n this.facetManager = buildFacetManager(this.bindings.engine);\n this.tabManager = buildTabManager(this.bindings.engine);\n this.watchEnabled(this.isOpen);\n }\n\n private createFacetSlot(): HTMLDivElement {\n const divSlot = document.createElement('div');\n divSlot.setAttribute('slot', 'facets');\n this.addFacetColumnStyling(divSlot);\n\n const facets = this.bindings.store.getFacetElements() as BaseFacetElement[];\n const boundInterfaces = this.getBoundInterfaces().sort(\n sortByDocumentPosition\n );\n const facetsSection = [];\n const horizontalFacetsSection = [];\n for (const boundInterface of boundInterfaces) {\n const facetSection = findSection(boundInterface, 'facets');\n if (facetSection) {\n facetsSection.push(facetSection);\n }\n const horizontalFacetSection = findSection(\n boundInterface,\n 'horizontal-facets'\n );\n if (horizontalFacetSection) {\n horizontalFacetsSection.push(horizontalFacetSection);\n }\n }\n const triagedFacets = triageFacetsByParents(\n facets,\n ...horizontalFacetsSection,\n ...facetsSection\n );\n for (const triagedFacet of triagedFacets.values()) {\n triagedFacet.sort(sortByDocumentPosition);\n }\n\n const sortedFacets = [];\n for (let i = 0; i < boundInterfaces.length; i++) {\n sortedFacets.push(...(triagedFacets.get(facetsSection[i]) \|\| []));\n sortedFacets.push(\n ...(triagedFacets.get(horizontalFacetsSection[i]) \|\| [])\n );\n }\n sortedFacets.push(...(triagedFacets.get(null) \|\| []));\n\n const {visibleFacets, invisibleFacets} = sortFacetVisibility(\n sortedFacets,\n this.bindings.store.getAllFacets()\n );\n\n const visibleFacetsClone = this.cloneFacets(visibleFacets);\n const invisibleFacetsClone = this.cloneFacets(invisibleFacets);\n\n collapseFacetsAfter(visibleFacetsClone, this.collapseFacetsAfter);\n\n divSlot.append(...visibleFacetsClone);\n divSlot.append(...invisibleFacetsClone);\n\n const generator = this.makeAutomaticFacetGenerator();\n if (generator) {\n generator.updateCollapseFacetsDependingOnFacetsVisibility(\n this.collapseFacetsAfter,\n visibleFacets.length\n );\n divSlot.append(generator);\n }\n\n return divSlot;\n }\n\n private getBoundInterfaces(): AtomicInterface[] {\n const mainInterface: AtomicInterface \| null =\n this.host.closest('atomic-search-interface') ??\n this.host.closest('atomic-external')?.boundInterface ??\n null;\n if (!mainInterface) {\n throw new Error('Cannot find bound interface');\n }\n const boundExternalInterfaces = Array.from(\n document.querySelectorAll('atomic-external')\n ).filter(\n (atomicExternal) => atomicExternal.boundInterface === mainInterface\n );\n return [...boundExternalInterfaces, mainInterface];\n }\n\n private cloneFacets(facets: BaseFacetElement[]): BaseFacetElement[] {\n return facets.map((facet, i) => {\n facet.classList.remove(popoverClass);\n facet.setAttribute(isRefineModalFacet, '');\n const clone = facet.cloneNode(true) as BaseFacetElement;\n clone.isCollapsed =\n this.collapseFacetsAfter === -1\n ? false\n : i + 1 > this.collapseFacetsAfter;\n return clone;\n });\n }\n\n private makeAutomaticFacetGenerator() {\n if (!this.bindings.engine.state.automaticFacetSet?.desiredCount) {\n return;\n }\n const generator = document.createElement(\n 'atomic-automatic-facet-generator'\n );\n\n generator.setAttribute(\n 'desired-count',\n `${this.bindings.engine.state.automaticFacetSet?.desiredCount}`\n );\n this.addFacetColumnStyling(generator);\n\n return generator;\n }\n\n private addFacetColumnStyling(el: HTMLElement) {\n el.style.display = 'flex';\n el.style.flexDirection = 'column';\n el.style.gap = 'var(--atomic-refine-modal-facet-margin, 20px)';\n }\n\n private get options() {\n return this.bindings.store.state.sortOptions;\n }\n\n private select(e: Event) {\n const select = e.composedPath()[0] as HTMLSelectElement;\n const option = this.options.find(\n (option) => option.expression === select.value\n );\n option && this.sort.sortBy(option.criteria);\n }\n\n private buildOption({expression, criteria, label, tabs}: SortDropdownOption) {\n if (\n !shouldDisplayOnCurrentTab(\n [...tabs.included],\n [...tabs.excluded],\n this.tabManagerState?.activeTab\n )\n ) {\n return;\n }\n return (\n <option value={expression} selected={this.sort.isSortedBy(criteria)}>\n {this.bindings.i18n.t(label)}\n </option>\n );\n }\n\n private renderSort() {\n if (!this.options.length) {\n return;\n }\n\n return (\n <RefineModalSortSection\n i18n={this.bindings.i18n}\n onSelect={(option) => this.select(option)}\n >\n {this.options.map((option) => this.buildOption(option))}\n </RefineModalSortSection>\n );\n }\n\n private renderFilters() {\n const hasFacetElements = this.bindings.store.getFacetElements().length > 0;\n const hasAutomaticFacets =\n this.bindings.engine.state.automaticFacetSet?.set !== undefined;\n\n if (!hasFacetElements && !hasAutomaticFacets) {\n return;\n }\n\n const {i18n} = this.bindings;\n\n return (\n <RefineModalFiltersSection\n i18n={i18n}\n withFacets={hasFacetElements}\n withAutomaticFacets={hasAutomaticFacets}\n >\n {this.breadcrumbManagerState.hasBreadcrumbs && (\n <RefineModalFiltersClearButton\n i18n={i18n}\n onClick={() => this.breadcrumbManager.deselectAll()}\n />\n )}\n </RefineModalFiltersSection>\n );\n }\n\n public render() {\n return (\n <RefineModal\n i18n={this.bindings.i18n}\n host={this.host}\n isOpen={this.isOpen}\n onClose={() => (this.isOpen = false)}\n title={this.bindings.i18n.t('sort-and-filter')}\n numberOfItems={this.querySummaryState.total}\n openButton={this.openButton}\n >\n <RefineModalBody>\n {this.renderSort()}\n {this.renderFilters()}\n </RefineModalBody>\n </RefineModal>\n );\n }\n\n public componentDidLoad() {\n this.host.style.display = '';\n }\n}\n"],"version":3}
1	+ {"file":"atomic-refine-modal.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAEA;;;AAGO,MAAM,eAAe,GAAwB,CAAC,CAAC,EAAE,QAAQ;IAC9D,QACEA,mBACE,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,sBAAsB,IAE3B,QAAQ,CACH,EACR;AACJ,CAAC;;ACLD;;;AAGO,MAAM,yBAAyB,GAElC,CAAC,EAAC,IAAI,EAAE,mBAAmB,EAAE,UAAU,EAAC,EAAE,QAAQ;IACpD,QACEA,QAACC,cAAQ;QACPD,iBAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,uCAAuC;YACtEA,gBACE,IAAI,EAAC,qCAAqC,EAC1C,KAAK,EAAC,6BAA6B,IAElC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CACf;YACJ,QAAQ,CACL;QACL,UAAU,IAAIA,kBAAM,IAAI,EAAC,QAAQ,GAAQ;QACzC,mBAAmB,IAAIA,kBAAM,IAAI,EAAC,kBAAkB,GAAQ,CACpD,EACX;AACJ,CAAC,CAAC;AAOF;;;AAGO,MAAM,6BAA6B,GAEtC,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC;IAClB,QACEA,QAACE,oBAAM,IACL,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,EACrB,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,kBAAkB,GACf,EACV;AACJ,CAAC;;;;;;;;;AC5CD;;;AAGO,MAAM,sBAAsB,GAE/B,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAC,EAAE,QAAQ;IAC7B,QACEF,QAACC,cAAQ;QACPD,gBACE,IAAI,EAAC,kCAAkC,EACvC,KAAK,EAAC,kCAAkC,IAEvC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CACZ;QACLA,iBAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,UAAU;YACzCA,oBACE,KAAK,EAAC,uGAAuG,EAC7G,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,EAC7B,QAAQ,EAAE,QAAQ,IAEjB,QAAQ,CACF;YACTA,iBACE,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAC,2FAA2F;gBAEjGA,yBACE,IAAI,EAAC,aAAa,EAClB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,SAAS,GACF,CACX,CACF,CACG,EACX;AACJ,CAAC;;AC7CD,MAAM,oBAAoB,GAAG,urjEAAurjE,CAAC;AACrtjE,gCAAe,oBAAoB;;;;;;;;;;;;MCkFtB,iBAAiB;;;QA2BU,WAAM,GAAG,KAAK,CAAC;;;;;;;QAQvB,wBAAmB,GAAG,CAAC,CAAC;;;;;;;;sBARP,KAAK;mCAQA,CAAC;;IAGrD,YAAY,CAAC,MAAe;QAC1B,IAAI,MAAM,EAAE;YACV,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,EAAE;gBACjD,OAAO;aACR;YAED,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;SAC1C;KACF;IAEM,UAAU;QACf,IAAI,CAAC,iBAAiB,GAAGG,+BAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACtE,IAAI,CAAC,IAAI,GAAGC,kBAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,YAAY,GAAGC,0BAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC5D,IAAI,CAAC,YAAY,GAAGC,0BAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC5D,IAAI,CAAC,YAAY,GAAGC,0BAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC5D,IAAI,CAAC,UAAU,GAAGC,wBAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACxD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;IAEO,eAAe;QACrB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACvC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;QAEpC,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,gBAAgB,EAAwB,CAAC;QAC5E,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CACpDC,4BAAsB,CACvB,CAAC;QACF,MAAM,aAAa,GAAG,EAAE,CAAC;QACzB,MAAM,uBAAuB,GAAG,EAAE,CAAC;QACnC,KAAK,MAAM,cAAc,IAAI,eAAe,EAAE;YAC5C,MAAM,YAAY,GAAGC,oCAAW,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;YAC3D,IAAI,YAAY,EAAE;gBAChB,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;aAClC;YACD,MAAM,sBAAsB,GAAGA,oCAAW,CACxC,cAAc,EACd,mBAAmB,CACpB,CAAC;YACF,IAAI,sBAAsB,EAAE;gBAC1B,uBAAuB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;aACtD;SACF;QACD,MAAM,aAAa,GAAGC,wCAAqB,CACzC,MAAM,EACN,GAAG,uBAAuB,EAC1B,GAAG,aAAa,CACjB,CAAC;QACF,KAAK,MAAM,YAAY,IAAI,aAAa,CAAC,MAAM,EAAE,EAAE;YACjD,YAAY,CAAC,IAAI,CAACF,4BAAsB,CAAC,CAAC;SAC3C;QAED,MAAM,YAAY,GAAG,EAAE,CAAC;QACxB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC/C,YAAY,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;YAClE,YAAY,CAAC,IAAI,CACf,IAAI,aAAa,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CACzD,CAAC;SACH;QACD,YAAY,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QAEtD,MAAM,EAAC,aAAa,EAAE,eAAe,EAAC,GAAGG,sCAAmB,CAC1D,YAAY,EACZ,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,EAAE,CACnC,CAAC;QAEF,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;QAC3D,MAAM,oBAAoB,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;QAE/DC,sCAAmB,CAAC,kBAAkB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAElE,OAAO,CAAC,MAAM,CAAC,GAAG,kBAAkB,CAAC,CAAC;QACtC,OAAO,CAAC,MAAM,CAAC,GAAG,oBAAoB,CAAC,CAAC;QAExC,MAAM,SAAS,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACrD,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,+CAA+C,CACvD,IAAI,CAAC,mBAAmB,EACxB,aAAa,CAAC,MAAM,CACrB,CAAC;YACF,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;SAC3B;QAED,OAAO,OAAO,CAAC;KAChB;IAEO,kBAAkB;QACxB,MAAM,aAAa,GACjB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC;YAC5C,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,cAAc;YACpD,IAAI,CAAC;QACP,IAAI,CAAC,aAAa,EAAE;YAClB,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC;SAChD;QACD,MAAM,uBAAuB,GAAG,KAAK,CAAC,IAAI,CACxC,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAC7C,CAAC,MAAM,CACN,CAAC,cAAc,KAAK,cAAc,CAAC,cAAc,KAAK,aAAa,CACpE,CAAC;QACF,OAAO,CAAC,GAAG,uBAAuB,EAAE,aAAa,CAAC,CAAC;KACpD;IAEO,WAAW,CAAC,MAA0B;QAC5C,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;YACzB,KAAK,CAAC,SAAS,CAAC,MAAM,CAACC,wBAAY,CAAC,CAAC;YACrC,KAAK,CAAC,YAAY,CAACC,wBAAkB,EAAE,EAAE,CAAC,CAAC;YAC3C,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAqB,CAAC;YACxD,KAAK,CAAC,WAAW;gBACf,IAAI,CAAC,mBAAmB,KAAK,CAAC,CAAC;sBAC3B,KAAK;sBACL,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,mBAAmB,CAAC;YACvC,OAAO,KAAK,CAAC;SACd,CAAC,CAAC;KACJ;IAEO,2BAA2B;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,iBAAiB,EAAE,YAAY,EAAE;YAC/D,OAAO;SACR;QACD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CACtC,kCAAkC,CACnC,CAAC;QAEF,SAAS,CAAC,YAAY,CACpB,eAAe,EACf,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,iBAAiB,EAAE,YAAY,EAAE,CAChE,CAAC;QACF,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,CAAC;QAEtC,OAAO,SAAS,CAAC;KAClB;IAEO,qBAAqB,CAAC,EAAe;QAC3C,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,EAAE,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;QAClC,EAAE,CAAC,KAAK,CAAC,GAAG,GAAG,+CAA+C,CAAC;KAChE;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;KAC9C;IAEO,MAAM,CAAC,CAAQ;QACrB,MAAM,MAAM,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAsB,CAAC;QACxD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAC9B,CAAC,MAAM,KAAK,MAAM,CAAC,UAAU,KAAK,MAAM,CAAC,KAAK,CAC/C,CAAC;QACF,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;KAC7C;IAEO,WAAW,CAAC,EAAC,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAqB;QACzE,IACE,CAACC,kCAAyB,CACxB,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,EAClB,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,EAClB,IAAI,CAAC,eAAe,EAAE,SAAS,CAChC,EACD;YACA,OAAO;SACR;QACD,QACEhB,oBAAQ,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAChE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CACrB,EACT;KACH;IAEO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;YACxB,OAAO;SACR;QAED,QACEA,QAAC,sBAAsB,IACrB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,QAAQ,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAExC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAChC,EACzB;KACH;IAEO,aAAa;QACnB,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAC3E,MAAM,kBAAkB,GACtB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,iBAAiB,EAAE,GAAG,KAAK,SAAS,CAAC;QAElE,IAAI,CAAC,gBAAgB,IAAI,CAAC,kBAAkB,EAAE;YAC5C,OAAO;SACR;QAED,MAAM,EAAC,IAAI,EAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QAE7B,QACEA,QAAC,yBAAyB,IACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,gBAAgB,EAC5B,mBAAmB,EAAE,kBAAkB,IAEtC,IAAI,CAAC,sBAAsB,CAAC,cAAc,KACzCA,QAAC,6BAA6B,IAC5B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,GACnD,CACH,CACyB,EAC5B;KACH;IAEM,MAAM;QACX,QACEA,QAACiB,wBAAW,qDACV,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,EACpC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAC9C,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAC3C,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3BjB,QAAC,eAAe,uDACb,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,aAAa,EAAE,CACL,CACN,EACd;KACH;IAEM,gBAAgB;QACrB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;KAC9B;;;;;;AAvQ4B;IAA5BkB,sCAAkB,EAAE;mDAA4B;AAK1C;IAFNC,yCAAqB,CAAC,cAAc,CAAC;4DAEO;AAGrC;IAFPA,yCAAqB,CAAC,mBAAmB,CAAC;iEAEa;AAGjD;IAFNA,yCAAqB,CAAC,cAAc,CAAC;4DAEO;AACE;IAArCA,yCAAqB,CAAC,MAAM,CAAC;oDAA8B;AAI9D;IAFNA,yCAAqB,CAAC,YAAY,CAAC;0DAEK;;;;;","names":["h","Fragment","Button","buildBreadcrumbManager","buildSort","buildQuerySummary","buildSearchStatus","buildFacetManager","buildTabManager","sortByDocumentPosition","findSection","triageFacetsByParents","sortFacetVisibility","collapseFacetsAfter","popoverClass","isRefineModalFacet","shouldDisplayOnCurrentTab","RefineModal","InitializeBindings","BindStateToController"],"sources":["src/components/common/refine-modal/stencil-body.tsx","src/components/common/refine-modal/stencil-filters.tsx","src/components/common/refine-modal/stencil-sort.tsx","src/components/search/atomic-refine-modal/atomic-refine-modal.pcss?tag=atomic-refine-modal&encapsulation=shadow","src/components/search/atomic-refine-modal/atomic-refine-modal.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\n\n/*\n @deprecated should only be used for Stencil components.\n /\nexport const RefineModalBody: FunctionalComponent = (_, children) => {\n return (\n <aside\n part=\"content\"\n slot=\"body\"\n class=\"flex flex-col w-full\"\n >\n {children}\n </aside>\n );\n};\n","import {FunctionalComponent, Fragment, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {Button} from '../stencil-button';\n\ninterface RefineModalFiltersSectionProps {\n i18n: i18n;\n withFacets: boolean;\n withAutomaticFacets: boolean;\n}\n\n/\n @deprecated should only be used for Stencil components.\n /\nexport const RefineModalFiltersSection: FunctionalComponent<\n RefineModalFiltersSectionProps\n> = ({i18n, withAutomaticFacets, withFacets}, children) => {\n return (\n <Fragment>\n <div part=\"filter-section\" class=\"mt-8 mb-3 flex w-full justify-between\">\n <h1\n part=\"section-title section-filters-title\"\n class=\"truncate text-2xl font-bold\"\n >\n {i18n.t('filters')}\n </h1>\n {children}\n </div>\n {withFacets && <slot name=\"facets\"></slot>}\n {withAutomaticFacets && <slot name=\"automatic-facets\"></slot>}\n </Fragment>\n );\n};\n\ninterface RefineModalFiltersClearButtonProps {\n i18n: i18n;\n onClick: () => void;\n}\n\n/\n @deprecated should only be used for Stencil components.\n /\nexport const RefineModalFiltersClearButton: FunctionalComponent<\n RefineModalFiltersClearButtonProps\n> = ({i18n, onClick}) => {\n return (\n <Button\n onClick={onClick}\n style=\"text-primary\"\n text={i18n.t('clear')}\n class=\"px-2 py-1\"\n part=\"filter-clear-all\"\n ></Button>\n );\n};\n","import {Fragment, FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport SortIcon from '../../../images/sort.svg';\n\ninterface RefineModalSortSectionProps {\n i18n: i18n;\n onSelect: (e: Event) => void;\n}\n\n/\n @deprecated should only be used for Stencil components.\n /\nexport const RefineModalSortSection: FunctionalComponent<\n RefineModalSortSectionProps\n> = ({i18n, onSelect}, children) => {\n return (\n <Fragment>\n <h1\n part=\"section-title section-sort-title\"\n class=\"mb-3 truncate text-2xl font-bold\"\n >\n {i18n.t('sort')}\n </h1>\n <div part=\"select-wrapper\" class=\"relative\">\n <select\n class=\"btn-outline-neutral w-full grow cursor-pointer appearance-none rounded-lg px-6 py-5 text-lg font-bold\"\n part=\"select\"\n aria-label={i18n.t('sort-by')}\n onChange={onSelect}\n >\n {children}\n </select>\n <div\n part=\"select-icon-wrapper\"\n class=\"pointer-events-none absolute top-0 right-0 bottom-0 flex items-center justify-center pr-6\"\n >\n <atomic-icon\n part=\"select-icon\"\n icon={SortIcon}\n class=\"h-6 w-6\"\n ></atomic-icon>\n </div>\n </div>\n </Fragment>\n );\n};\n","@import '../../../global/global.pcss';\n\n/ This stylesheet can be removed once atomic-refine-modal is migrated to lit.\n\nThe remaining styles can also be removed as they have been moved to the refine-modal/sort.ts functional component/\n\n/\n @prop --atomic-refine-modal-facet-margin: The spacing between the modal's facets.\n /\nselect:hover + div,\nselect:focus-visible + div {\n @apply text-primary-light;\n}\n","import {\n BreadcrumbManager,\n buildBreadcrumbManager,\n BreadcrumbManagerState,\n QuerySummary,\n QuerySummaryState,\n FacetManagerState,\n Sort,\n buildSort,\n SortState,\n buildQuerySummary,\n buildSearchStatus,\n SearchStatus,\n FacetManager,\n buildFacetManager,\n TabManager,\n TabManagerState,\n buildTabManager,\n} from '@coveo/headless';\nimport {Component, h, State, Prop, Element, Watch} from '@stencil/core';\nimport {\n AtomicInterface,\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {shouldDisplayOnCurrentTab} from '../../../utils/tab-utils';\nimport {sortByDocumentPosition} from '../../../utils/utils';\nimport {findSection} from '../../common/atomic-layout-section/atomic-layout-section-utils';\nimport {popoverClass} from '../../common/facets/popover/popover-type';\nimport {\n BaseFacetElement,\n sortFacetVisibility,\n triageFacetsByParents,\n collapseFacetsAfter,\n} from '../../common/facets/stencil-facet-common';\nimport {isRefineModalFacet} from '../../common/interface/store';\nimport {RefineModalBody} from '../../common/refine-modal/stencil-body';\nimport {\n RefineModalFiltersClearButton,\n RefineModalFiltersSection,\n} from '../../common/refine-modal/stencil-filters';\nimport {RefineModal} from '../../common/refine-modal/stencil-modal';\nimport {RefineModalSortSection} from '../../common/refine-modal/stencil-sort';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\nimport {SortDropdownOption} from '../atomic-search-interface/store';\n\n/\n The `atomic-refine-modal` is automatically created as a child of the `atomic-search-interface` when the `atomic-refine-toggle` is initialized.\n \n When the modal is opened, the class `atomic-modal-opened` is added to the interface element and the body, allowing further customization.\n \n @part container - The modal's outermost container.\n * @part header-wrapper - The wrapper around the header.\n * @part header - The header of the modal, containing the title.\n * @part title - The title of the modal.\n * @part close-button - The button in the header that closes the modal.\n * @part close-icon - The icon of the close button.\n * @part header-ruler - The horizontal ruler underneath the header.\n * @part body-wrapper - The wrapper around the body.\n * @part body - The body of the modal, between the header and the footer.\n * @part content - The wrapper around the content inside the body of the modal.\n * @part section-title - The title for each section.\n * @part section-sort-title - The title for the sort section.\n * @part section-filters-title - The title for the filters section.\n * @part select-wrapper - The wrapper around the select element, used to position the icon.\n * @part select - The `<select>` element of the dropdown list.\n * @part select-icon-wrapper - The wrapper around the sort icon that's used to align it.\n * @part select-icon - The select dropdown's sort icon.\n * @part filter-section - The section containing facets and the \"filters\" title.\n * @part filter-clear-all - The button that resets all actively selected facet values.\n * @part footer-wrapper - The wrapper with a shadow or background color around the footer.\n * @part footer - The footer of the modal.\n * @part footer-content - The wrapper around the content inside the footer of the modal, containing the button to view results.\n * @part footer-button - The button in the footer that closes the modal.\n * @part footer-button-text - The text inside the button in the footer that closes the modal.\n * @part footer-button-count - The count inside the button in the footer that closes the modal.\n /\n@Component({\n tag: 'atomic-refine-modal',\n styleUrl: 'atomic-refine-modal.pcss',\n shadow: true,\n})\nexport class AtomicRefineModal implements InitializableComponent {\n private sort!: Sort;\n private breadcrumbManager!: BreadcrumbManager;\n public querySummary!: QuerySummary;\n public searchStatus!: SearchStatus;\n public facetManager!: FacetManager;\n @InitializeBindings() public bindings!: Bindings;\n @Element() public host!: HTMLElement;\n\n @BindStateToController('querySummary')\n @State()\n public querySummaryState!: QuerySummaryState;\n @BindStateToController('breadcrumbManager')\n @State()\n private breadcrumbManagerState!: BreadcrumbManagerState;\n @BindStateToController('facetManager')\n @State()\n public facetManagerState!: FacetManagerState;\n @State() @BindStateToController('sort') public sortState!: SortState;\n public tabManager!: TabManager;\n @BindStateToController('tabManager')\n @State()\n public tabManagerState!: TabManagerState;\n @State() public error!: Error;\n\n @Prop({mutable: true}) openButton?: HTMLElement;\n\n @Prop({reflect: true, mutable: true}) isOpen = false;\n\n /\n The number of expanded facets inside the refine modal.\n * Remaining facets are automatically collapsed.\n \n Using the value `0` collapses all facets.\n */\n @Prop({reflect: true}) public collapseFacetsAfter = 0;\n\n @Watch('isOpen')\n watchEnabled(isOpen: boolean) {\n if (isOpen) {\n if (this.host.querySelector('div[slot=\"facets\"]')) {\n return;\n }\n\n this.host.append(this.createFacetSlot());\n }\n }\n\n public initialize() {\n this.breadcrumbManager = buildBreadcrumbManager(this.bindings.engine);\n this.sort = buildSort(this.bindings.engine);\n this.querySummary = buildQuerySummary(this.bindings.engine);\n this.searchStatus = buildSearchStatus(this.bindings.engine);\n this.facetManager = buildFacetManager(this.bindings.engine);\n this.tabManager = buildTabManager(this.bindings.engine);\n this.watchEnabled(this.isOpen);\n }\n\n private createFacetSlot(): HTMLDivElement {\n const divSlot = document.createElement('div');\n divSlot.setAttribute('slot', 'facets');\n this.addFacetColumnStyling(divSlot);\n\n const facets = this.bindings.store.getFacetElements() as BaseFacetElement[];\n const boundInterfaces = this.getBoundInterfaces().sort(\n sortByDocumentPosition\n );\n const facetsSection = [];\n const horizontalFacetsSection = [];\n for (const boundInterface of boundInterfaces) {\n const facetSection = findSection(boundInterface, 'facets');\n if (facetSection) {\n facetsSection.push(facetSection);\n }\n const horizontalFacetSection = findSection(\n boundInterface,\n 'horizontal-facets'\n );\n if (horizontalFacetSection) {\n horizontalFacetsSection.push(horizontalFacetSection);\n }\n }\n const triagedFacets = triageFacetsByParents(\n facets,\n ...horizontalFacetsSection,\n ...facetsSection\n );\n for (const triagedFacet of triagedFacets.values()) {\n triagedFacet.sort(sortByDocumentPosition);\n }\n\n const sortedFacets = [];\n for (let i = 0; i < boundInterfaces.length; i++) {\n sortedFacets.push(...(triagedFacets.get(facetsSection[i]) \|\| []));\n sortedFacets.push(\n ...(triagedFacets.get(horizontalFacetsSection[i]) \|\| [])\n );\n }\n sortedFacets.push(...(triagedFacets.get(null) \|\| []));\n\n const {visibleFacets, invisibleFacets} = sortFacetVisibility(\n sortedFacets,\n this.bindings.store.getAllFacets()\n );\n\n const visibleFacetsClone = this.cloneFacets(visibleFacets);\n const invisibleFacetsClone = this.cloneFacets(invisibleFacets);\n\n collapseFacetsAfter(visibleFacetsClone, this.collapseFacetsAfter);\n\n divSlot.append(...visibleFacetsClone);\n divSlot.append(...invisibleFacetsClone);\n\n const generator = this.makeAutomaticFacetGenerator();\n if (generator) {\n generator.updateCollapseFacetsDependingOnFacetsVisibility(\n this.collapseFacetsAfter,\n visibleFacets.length\n );\n divSlot.append(generator);\n }\n\n return divSlot;\n }\n\n private getBoundInterfaces(): AtomicInterface[] {\n const mainInterface: AtomicInterface \| null =\n this.host.closest('atomic-search-interface') ??\n this.host.closest('atomic-external')?.boundInterface ??\n null;\n if (!mainInterface) {\n throw new Error('Cannot find bound interface');\n }\n const boundExternalInterfaces = Array.from(\n document.querySelectorAll('atomic-external')\n ).filter(\n (atomicExternal) => atomicExternal.boundInterface === mainInterface\n );\n return [...boundExternalInterfaces, mainInterface];\n }\n\n private cloneFacets(facets: BaseFacetElement[]): BaseFacetElement[] {\n return facets.map((facet, i) => {\n facet.classList.remove(popoverClass);\n facet.setAttribute(isRefineModalFacet, '');\n const clone = facet.cloneNode(true) as BaseFacetElement;\n clone.isCollapsed =\n this.collapseFacetsAfter === -1\n ? false\n : i + 1 > this.collapseFacetsAfter;\n return clone;\n });\n }\n\n private makeAutomaticFacetGenerator() {\n if (!this.bindings.engine.state.automaticFacetSet?.desiredCount) {\n return;\n }\n const generator = document.createElement(\n 'atomic-automatic-facet-generator'\n );\n\n generator.setAttribute(\n 'desired-count',\n `${this.bindings.engine.state.automaticFacetSet?.desiredCount}`\n );\n this.addFacetColumnStyling(generator);\n\n return generator;\n }\n\n private addFacetColumnStyling(el: HTMLElement) {\n el.style.display = 'flex';\n el.style.flexDirection = 'column';\n el.style.gap = 'var(--atomic-refine-modal-facet-margin, 20px)';\n }\n\n private get options() {\n return this.bindings.store.state.sortOptions;\n }\n\n private select(e: Event) {\n const select = e.composedPath()[0] as HTMLSelectElement;\n const option = this.options.find(\n (option) => option.expression === select.value\n );\n option && this.sort.sortBy(option.criteria);\n }\n\n private buildOption({expression, criteria, label, tabs}: SortDropdownOption) {\n if (\n !shouldDisplayOnCurrentTab(\n [...tabs.included],\n [...tabs.excluded],\n this.tabManagerState?.activeTab\n )\n ) {\n return;\n }\n return (\n <option value={expression} selected={this.sort.isSortedBy(criteria)}>\n {this.bindings.i18n.t(label)}\n </option>\n );\n }\n\n private renderSort() {\n if (!this.options.length) {\n return;\n }\n\n return (\n <RefineModalSortSection\n i18n={this.bindings.i18n}\n onSelect={(option) => this.select(option)}\n >\n {this.options.map((option) => this.buildOption(option))}\n </RefineModalSortSection>\n );\n }\n\n private renderFilters() {\n const hasFacetElements = this.bindings.store.getFacetElements().length > 0;\n const hasAutomaticFacets =\n this.bindings.engine.state.automaticFacetSet?.set !== undefined;\n\n if (!hasFacetElements && !hasAutomaticFacets) {\n return;\n }\n\n const {i18n} = this.bindings;\n\n return (\n <RefineModalFiltersSection\n i18n={i18n}\n withFacets={hasFacetElements}\n withAutomaticFacets={hasAutomaticFacets}\n >\n {this.breadcrumbManagerState.hasBreadcrumbs && (\n <RefineModalFiltersClearButton\n i18n={i18n}\n onClick={() => this.breadcrumbManager.deselectAll()}\n />\n )}\n </RefineModalFiltersSection>\n );\n }\n\n public render() {\n return (\n <RefineModal\n i18n={this.bindings.i18n}\n host={this.host}\n isOpen={this.isOpen}\n onClose={() => (this.isOpen = false)}\n title={this.bindings.i18n.t('sort-and-filter')}\n numberOfItems={this.querySummaryState.total}\n openButton={this.openButton}\n >\n <RefineModalBody>\n {this.renderSort()}\n {this.renderFilters()}\n </RefineModalBody>\n </RefineModal>\n );\n }\n\n public componentDidLoad() {\n this.host.style.display = '';\n }\n}\n"],"version":3}

package/dist/cjs/atomic-refine-toggle.cjs.entry.js CHANGED Viewed

@@ -5,17 +5,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-757bc886.js');
 const headless = require('@coveo/headless');
 const initializationUtils = require('./initialization-utils-92f1b080.js');
-const stencilButton = require('./stencil-button-94b89acc.js');
+const stencilButton = require('./stencil-button-aa0f9cb5.js');
 require('./dom-utils-d4790328.js');
 require('./event-utils-9bfcf3c5.js');
 require('./init-queue-a18aa323.js');
 require('./initialization-lit-stencil-common-utils-730030b0.js');
-require('./stencil-button-style-ba779fe2.js');
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const RefineToggleButton = ({ i18n, onClick, setRef }) => {
     return (index.h(stencilButton.Button, { style: "outline-primary", class: "w-full p-3", onClick: onClick, text: i18n.t('sort-and-filter'), ref: setRef, part: "button" }));
 };
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const RefineToggleGuard = ({ hasError, firstRequestExecuted, hasItems }, children) => {
     if (hasError) {
         return;
@@ -72,7 +77,7 @@ const AtomicRefineToggle = class {
         this.modalRef && (this.modalRef.isOpen = true);
     }
     render() {
-        return (index.h(RefineToggleGuard, { key: '2d4442e2ff0eac7161136b5dc5d3a946dae972b4', firstRequestExecuted: this.searchStatusState.firstSearchExecuted, hasError: this.searchStatusState.hasError, hasItems: this.searchStatusState.hasResults }, index.h(RefineToggleButton, { key: '54293607699e1940900a992f991c484eb43d1b96', i18n: this.bindings.i18n, onClick: () => this.enableModal(), setRef: (button) => {
+        return (index.h(RefineToggleGuard, { key: 'e6dc428aa9b3999551a2fad2eb216bf98e9fc5a9', firstRequestExecuted: this.searchStatusState.firstSearchExecuted, hasError: this.searchStatusState.hasError, hasItems: this.searchStatusState.hasResults }, index.h(RefineToggleButton, { key: 'd6a7cc14841033a02eb35172ebfbb27f1f9eb3f9', i18n: this.bindings.i18n, onClick: () => this.enableModal(), setRef: (button) => {
                 if (!button) {
                     return;
                 }

package/dist/cjs/atomic-refine-toggle.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"atomic-refine-toggle.entry.cjs.js","mappings":"~~;;;;;;;;;;;;;;AASO~~,MAAM,kBAAkB,GAE3B,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC;IAC1B,QACEA,QAACC,oBAAM,IACL,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAC/B,GAAG,EAAE,MAAM,EACX,IAAI,EAAC,QAAQ,GACL,EACV;AACJ,CAAC;;~~ACfM~~,MAAM,iBAAiB,GAAgD,CAC5E,EAAC,QAAQ,EAAE,oBAAoB,EAAE,QAAQ,EAAC,EAC1C,QAAQ;IAER,IAAI,QAAQ,EAAE;QACZ,OAAO;KACR;IAED,IAAI,CAAC,oBAAoB,EAAE;QACzB,QACED,iBACE,IAAI,EAAC,aAAa,uBAElB,KAAK,EAAC,gDAAgD,GACjD,EACP;KACH;IAED,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO;KACR;IAED,OAAOA,QAACE,cAAQ,QAAE,QAAQ,CAAY,CAAC;AACzC,CAAC;;~~AC9BD~~,MAAM,qBAAqB,GAAG,0ljEAA0ljE,CAAC;AACznjE,iCAAe,qBAAqB;;;;;;;;;;;;MCyBvB,kBAAkB;;;;;;;;;QAkBC,wBAAmB,GAAG,CAAC,CAAC;;;mCAAF,CAAC;;IAE9C,UAAU;QACf,IAAI,CAAC,YAAY,GAAGC,0BAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;KAC7D;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QAC9D,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC9D,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC;QAC1C,IAAI,CAAC,QAAQ,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC;KAC9D;IAEO,WAAW;QACjB,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;KAChD;IAEM,MAAM;QACX,QACEH,QAAC,iBAAiB,qDAChB,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,EAChE,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EACzC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,UAAU,IAE3CA,QAAC,kBAAkB,qDACjB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,MAAM,EAAE,CAAC,MAAM;gBACb,IAAI,CAAC,MAAM,EAAE;oBACX,OAAO;iBACR;gBACD,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;gBACxB,IAAI,CAAC,SAAS,EAAE,CAAC;aAClB,GACD,CACgB,EACpB;KACH;;;AArD4B;IAA5BI,sCAAkB,EAAE;oDAA4B;AAIzC;IAFPC,yCAAqB,CAAC,cAAc,CAAC;6DAEQ;;;;;","names":["h","Button","Fragment","buildSearchStatus","InitializeBindings","BindStateToController"],"sources":["src/components/common/refine-modal/stencil-button.tsx","src/components/common/refine-modal/stencil-guard.tsx","src/components/search/atomic-refine-toggle/atomic-refine-toggle.pcss?tag=atomic-refine-toggle&encapsulation=shadow","src/components/search/atomic-refine-toggle/atomic-refine-toggle.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {Button} from '../stencil-button';\n\ninterface RefineToggleButtonProps {\n i18n: i18n;\n onClick: () => void;\n setRef: (button: HTMLButtonElement) => void;\n}\nexport const RefineToggleButton: FunctionalComponent<\n RefineToggleButtonProps\n> = ({i18n, onClick, setRef}) => {\n return (\n <Button\n style=\"outline-primary\"\n class=\"w-full p-3\"\n onClick={onClick}\n text={i18n.t('sort-and-filter')}\n ref={setRef}\n part=\"button\"\n ></Button>\n );\n};\n","import {Fragment, FunctionalComponent, h} from '@stencil/core';\n\ninterface RefineToggleGuardProps {\n hasError: boolean;\n firstRequestExecuted: boolean;\n hasItems: boolean;\n}\nexport const RefineToggleGuard: FunctionalComponent<RefineToggleGuardProps> = (\n {hasError, firstRequestExecuted, hasItems},\n children\n) => {\n if (hasError) {\n return;\n }\n\n if (!firstRequestExecuted) {\n return (\n <div\n part=\"placeholder\"\n aria-hidden\n class=\"bg-neutral my-2 h-8 w-28 animate-pulse rounded\"\n ></div>\n );\n }\n\n if (!hasItems) {\n return;\n }\n\n return <Fragment>{children}</Fragment>;\n};\n","@import '../../../global/global.pcss';\n","import {\n buildSearchStatus,\n SearchStatusState,\n SearchStatus,\n} from '@coveo/headless';\nimport {Component, h, Prop, State, Element} from '@stencil/core';\nimport {\n InitializeBindings,\n InitializableComponent,\n BindStateToController,\n} from '../../../utils/initialization-utils';\nimport {RefineToggleButton} from '../../common/refine-modal/stencil-button';\nimport {RefineToggleGuard} from '../../common/refine-modal/stencil-guard';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\n\n/*\n The `atomic-refine-toggle` component displays a button that opens a modal containing the facets and the sort components.\n \n When this component is added to the `atomic-search-interface`, an `atomic-refine-modal` component is automatically created.\n * @part button - The refine toggle button.\n /\n@Component({\n tag: 'atomic-refine-toggle',\n styleUrl: 'atomic-refine-toggle.pcss',\n shadow: true,\n})\nexport class AtomicRefineToggle implements InitializableComponent {\n @Element() public host!: HTMLElement;\n public searchStatus!: SearchStatus;\n private modalRef?: HTMLAtomicRefineModalElement;\n private buttonRef?: HTMLButtonElement;\n\n @InitializeBindings() public bindings!: Bindings;\n @State() public error!: Error;\n @BindStateToController('searchStatus')\n @State()\n private searchStatusState!: SearchStatusState;\n\n /\n The number of expanded facets inside the refine modal.\n * Remaining facets are automatically collapsed.\n \n Using the value `0` collapses all facets.\n */\n @Prop({reflect: true}) public collapseFacetsAfter = 0;\n\n public initialize() {\n this.searchStatus = buildSearchStatus(this.bindings.engine);\n }\n\n private loadModal() {\n if (this.modalRef) {\n return;\n }\n\n this.modalRef = document.createElement('atomic-refine-modal');\n this.host.insertAdjacentElement('beforebegin', this.modalRef);\n this.modalRef.openButton = this.buttonRef;\n this.modalRef.collapseFacetsAfter = this.collapseFacetsAfter;\n }\n\n private enableModal() {\n this.modalRef && (this.modalRef.isOpen = true);\n }\n\n public render() {\n return (\n <RefineToggleGuard\n firstRequestExecuted={this.searchStatusState.firstSearchExecuted}\n hasError={this.searchStatusState.hasError}\n hasItems={this.searchStatusState.hasResults}\n >\n <RefineToggleButton\n i18n={this.bindings.i18n}\n onClick={() => this.enableModal()}\n setRef={(button) => {\n if (!button) {\n return;\n }\n this.buttonRef = button;\n this.loadModal();\n }}\n />\n </RefineToggleGuard>\n );\n }\n}\n"],"version":3}
1	+ {"file":"atomic-refine-toggle.entry.cjs.js","mappings":";;;;;;;;;;;;;AAUA;;;AAGO,MAAM,kBAAkB,GAE3B,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC;IAC1B,QACEA,QAACC,oBAAM,IACL,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAC/B,GAAG,EAAE,MAAM,EACX,IAAI,EAAC,QAAQ,GACL,EACV;AACJ,CAAC;;AClBD;;;AAGO,MAAM,iBAAiB,GAAgD,CAC5E,EAAC,QAAQ,EAAE,oBAAoB,EAAE,QAAQ,EAAC,EAC1C,QAAQ;IAER,IAAI,QAAQ,EAAE;QACZ,OAAO;KACR;IAED,IAAI,CAAC,oBAAoB,EAAE;QACzB,QACED,iBACE,IAAI,EAAC,aAAa,uBAElB,KAAK,EAAC,gDAAgD,GACjD,EACP;KACH;IAED,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO;KACR;IAED,OAAOA,QAACE,cAAQ,QAAE,QAAQ,CAAY,CAAC;AACzC,CAAC;;AClCD,MAAM,qBAAqB,GAAG,0ljEAA0ljE,CAAC;AACznjE,iCAAe,qBAAqB;;;;;;;;;;;;MCyBvB,kBAAkB;;;;;;;;;QAkBC,wBAAmB,GAAG,CAAC,CAAC;;;mCAAF,CAAC;;IAE9C,UAAU;QACf,IAAI,CAAC,YAAY,GAAGC,0BAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;KAC7D;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QAC9D,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC9D,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC;QAC1C,IAAI,CAAC,QAAQ,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC;KAC9D;IAEO,WAAW;QACjB,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;KAChD;IAEM,MAAM;QACX,QACEH,QAAC,iBAAiB,qDAChB,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,EAChE,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EACzC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,UAAU,IAE3CA,QAAC,kBAAkB,qDACjB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,MAAM,EAAE,CAAC,MAAM;gBACb,IAAI,CAAC,MAAM,EAAE;oBACX,OAAO;iBACR;gBACD,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;gBACxB,IAAI,CAAC,SAAS,EAAE,CAAC;aAClB,GACD,CACgB,EACpB;KACH;;;AArD4B;IAA5BI,sCAAkB,EAAE;oDAA4B;AAIzC;IAFPC,yCAAqB,CAAC,cAAc,CAAC;6DAEQ;;;;;","names":["h","Button","Fragment","buildSearchStatus","InitializeBindings","BindStateToController"],"sources":["src/components/common/refine-modal/stencil-button.tsx","src/components/common/refine-modal/stencil-guard.tsx","src/components/search/atomic-refine-toggle/atomic-refine-toggle.pcss?tag=atomic-refine-toggle&encapsulation=shadow","src/components/search/atomic-refine-toggle/atomic-refine-toggle.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {Button} from '../stencil-button';\n\ninterface RefineToggleButtonProps {\n i18n: i18n;\n onClick: () => void;\n setRef: (button: HTMLButtonElement) => void;\n}\n\n/*\n @deprecated should only be used for Stencil components.\n /\nexport const RefineToggleButton: FunctionalComponent<\n RefineToggleButtonProps\n> = ({i18n, onClick, setRef}) => {\n return (\n <Button\n style=\"outline-primary\"\n class=\"w-full p-3\"\n onClick={onClick}\n text={i18n.t('sort-and-filter')}\n ref={setRef}\n part=\"button\"\n ></Button>\n );\n};\n","import {Fragment, FunctionalComponent, h} from '@stencil/core';\n\ninterface RefineToggleGuardProps {\n hasError: boolean;\n firstRequestExecuted: boolean;\n hasItems: boolean;\n}\n\n/\n @deprecated should only be used for Stencil components.\n /\nexport const RefineToggleGuard: FunctionalComponent<RefineToggleGuardProps> = (\n {hasError, firstRequestExecuted, hasItems},\n children\n) => {\n if (hasError) {\n return;\n }\n\n if (!firstRequestExecuted) {\n return (\n <div\n part=\"placeholder\"\n aria-hidden\n class=\"bg-neutral my-2 h-8 w-28 animate-pulse rounded\"\n ></div>\n );\n }\n\n if (!hasItems) {\n return;\n }\n\n return <Fragment>{children}</Fragment>;\n};\n","@import '../../../global/global.pcss';\n","import {\n buildSearchStatus,\n SearchStatusState,\n SearchStatus,\n} from '@coveo/headless';\nimport {Component, h, Prop, State, Element} from '@stencil/core';\nimport {\n InitializeBindings,\n InitializableComponent,\n BindStateToController,\n} from '../../../utils/initialization-utils';\nimport {RefineToggleButton} from '../../common/refine-modal/stencil-button';\nimport {RefineToggleGuard} from '../../common/refine-modal/stencil-guard';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\n\n/\n The `atomic-refine-toggle` component displays a button that opens a modal containing the facets and the sort components.\n \n When this component is added to the `atomic-search-interface`, an `atomic-refine-modal` component is automatically created.\n * @part button - The refine toggle button.\n /\n@Component({\n tag: 'atomic-refine-toggle',\n styleUrl: 'atomic-refine-toggle.pcss',\n shadow: true,\n})\nexport class AtomicRefineToggle implements InitializableComponent {\n @Element() public host!: HTMLElement;\n public searchStatus!: SearchStatus;\n private modalRef?: HTMLAtomicRefineModalElement;\n private buttonRef?: HTMLButtonElement;\n\n @InitializeBindings() public bindings!: Bindings;\n @State() public error!: Error;\n @BindStateToController('searchStatus')\n @State()\n private searchStatusState!: SearchStatusState;\n\n /\n The number of expanded facets inside the refine modal.\n * Remaining facets are automatically collapsed.\n \n Using the value `0` collapses all facets.\n */\n @Prop({reflect: true}) public collapseFacetsAfter = 0;\n\n public initialize() {\n this.searchStatus = buildSearchStatus(this.bindings.engine);\n }\n\n private loadModal() {\n if (this.modalRef) {\n return;\n }\n\n this.modalRef = document.createElement('atomic-refine-modal');\n this.host.insertAdjacentElement('beforebegin', this.modalRef);\n this.modalRef.openButton = this.buttonRef;\n this.modalRef.collapseFacetsAfter = this.collapseFacetsAfter;\n }\n\n private enableModal() {\n this.modalRef && (this.modalRef.isOpen = true);\n }\n\n public render() {\n return (\n <RefineToggleGuard\n firstRequestExecuted={this.searchStatusState.firstSearchExecuted}\n hasError={this.searchStatusState.hasError}\n hasItems={this.searchStatusState.hasResults}\n >\n <RefineToggleButton\n i18n={this.bindings.i18n}\n onClick={() => this.enableModal()}\n setRef={(button) => {\n if (!button) {\n return;\n }\n this.buttonRef = button;\n this.loadModal();\n }}\n />\n </RefineToggleGuard>\n );\n }\n}\n"],"version":3}

package/dist/cjs/atomic-result-children.cjs.entry.js CHANGED Viewed

@@ -8,8 +8,8 @@ const eventUtils = require('./event-utils-9bfcf3c5.js');
 const initializationUtils = require('./initialization-utils-92f1b080.js');
 const utils = require('./utils-12b49e87.js');
 const unfoldedItem = require('./unfolded-item-148d21d6.js');
-const showHideButton = require('./show-hide-button-c4717f52.js');
-const itemTemplateProvider = require('./item-template-provider-470c1774.js');
+const showHideButton = require('./show-hide-button-12eb762b.js');
+const itemTemplateProvider = require('./item-template-provider-c639f39c.js');
 const stencilItemDecorators = require('./stencil-item-decorators-43a96f33.js');
 const stencilResultTemplateDecorators = require('./stencil-result-template-decorators-28b05aaf.js');
 require('./dom-utils-d4790328.js');
@@ -17,9 +17,7 @@ require('./init-queue-a18aa323.js');
 require('./initialization-lit-stencil-common-utils-730030b0.js');
 require('./purify-85b542e2.js');
 require('./_commonjsHelpers-b3309d7b.js');
-require('./stencil-placeholders-b8c896fa.js');
-require('./stencil-button-94b89acc.js');
-require('./stencil-button-style-ba779fe2.js');
+require('./stencil-button-aa0f9cb5.js');
 const atomicResultChildrenCss = "/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer properties {\n  *, :before, :after, ::backdrop {\n    --tw-translate-x: 0;\n    --tw-translate-y: 0;\n    --tw-translate-z: 0;\n    --tw-scale-x: 1;\n    --tw-scale-y: 1;\n    --tw-scale-z: 1;\n    --tw-rotate-x: initial;\n    --tw-rotate-y: initial;\n    --tw-rotate-z: initial;\n    --tw-skew-x: initial;\n    --tw-skew-y: initial;\n    --tw-space-x-reverse: 0;\n    --tw-divide-y-reverse: 0;\n    --tw-border-style: solid;\n    --tw-gradient-position: initial;\n    --tw-gradient-from: #0000;\n    --tw-gradient-via: #0000;\n    --tw-gradient-to: #0000;\n    --tw-gradient-stops: initial;\n    --tw-gradient-via-stops: initial;\n    --tw-gradient-from-position: 0%;\n    --tw-gradient-via-position: 50%;\n    --tw-gradient-to-position: 100%;\n    --tw-leading: initial;\n    --tw-font-weight: initial;\n    --tw-shadow: 0 0 #0000;\n    --tw-shadow-color: initial;\n    --tw-shadow-alpha: 100%;\n    --tw-inset-shadow: 0 0 #0000;\n    --tw-inset-shadow-color: initial;\n    --tw-inset-shadow-alpha: 100%;\n    --tw-ring-color: initial;\n    --tw-ring-shadow: 0 0 #0000;\n    --tw-inset-ring-color: initial;\n    --tw-inset-ring-shadow: 0 0 #0000;\n    --tw-ring-inset: initial;\n    --tw-ring-offset-width: 0px;\n    --tw-ring-offset-color: #fff;\n    --tw-ring-offset-shadow: 0 0 #0000;\n    --tw-outline-style: solid;\n    --tw-blur: initial;\n    --tw-brightness: initial;\n    --tw-contrast: initial;\n    --tw-grayscale: initial;\n    --tw-hue-rotate: initial;\n    --tw-invert: initial;\n    --tw-opacity: initial;\n    --tw-saturate: initial;\n    --tw-sepia: initial;\n    --tw-drop-shadow: initial;\n    --tw-drop-shadow-color: initial;\n    --tw-drop-shadow-alpha: 100%;\n    --tw-drop-shadow-size: initial;\n    --tw-duration: initial;\n    --tw-ease: initial;\n    --tw-content: \"\";\n  }\n}\n@layer theme, base, components, utilities;\n@layer theme;\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, var(--atomic-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n    \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n    }\n    @supports (color: color-mix(in lab, red, red)) {\n      ::placeholder {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .\\@container {\n    container-type: inline-size;\n  }\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .collapse {\n    visibility: collapse;\n  }\n  .invisible {\n    visibility: hidden;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border-width: 0;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .sticky {\n    position: sticky;\n  }\n  .inset-0 {\n    inset: calc(0.25rem * 0);\n  }\n  .-top-2 {\n    top: calc(0.25rem * -2);\n  }\n  .-top-4 {\n    top: calc(0.25rem * -4);\n  }\n  .top-0 {\n    top: calc(0.25rem * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-6 {\n    top: calc(0.25rem * 6);\n  }\n  .top-\\[4px\\] {\n    top: 4px;\n  }\n  .top-full {\n    top: 100%;\n  }\n  .top-px {\n    top: 1px;\n  }\n  .-right-2 {\n    right: calc(0.25rem * -2);\n  }\n  .right-0 {\n    right: calc(0.25rem * 0);\n  }\n  .right-2 {\n    right: calc(0.25rem * 2);\n  }\n  .right-6 {\n    right: calc(0.25rem * 6);\n  }\n  .right-12 {\n    right: calc(0.25rem * 12);\n  }\n  .right-20 {\n    right: calc(0.25rem * 20);\n  }\n  .right-px {\n    right: 1px;\n  }\n  .bottom-0 {\n    bottom: calc(0.25rem * 0);\n  }\n  .bottom-1 {\n    bottom: calc(0.25rem * 1);\n  }\n  .bottom-2 {\n    bottom: calc(0.25rem * 2);\n  }\n  .bottom-px {\n    bottom: 1px;\n  }\n  .left-0 {\n    left: calc(0.25rem * 0);\n  }\n  .left-1 {\n    left: calc(0.25rem * 1);\n  }\n  .left-2 {\n    left: calc(0.25rem * 2);\n  }\n  .left-\\[15px\\] {\n    left: 15px;\n  }\n  .isolate {\n    isolation: isolate;\n  }\n  .z-0 {\n    z-index: 0;\n  }\n  .z-1 {\n    z-index: 1;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-9998 {\n    z-index: 9998;\n  }\n  .z-9999 {\n    z-index: 9999;\n  }\n  .order-last {\n    order: 9999;\n  }\n  .col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .container {\n    width: 100%;\n  }\n  @media (width >= 1024px) {\n    .container {\n      max-width: 1024px;\n    }\n  }\n  @media (width >= 40rem) {\n    .container {\n      max-width: 40rem;\n    }\n  }\n  @media (width >= 48rem) {\n    .container {\n      max-width: 48rem;\n    }\n  }\n  @media (width >= 64rem) {\n    .container {\n      max-width: 64rem;\n    }\n  }\n  @media (width >= 80rem) {\n    .container {\n      max-width: 80rem;\n    }\n  }\n  @media (width >= 96rem) {\n    .container {\n      max-width: 96rem;\n    }\n  }\n  .m-0 {\n    margin: calc(0.25rem * 0);\n  }\n  .m-2 {\n    margin: calc(0.25rem * 2);\n  }\n  .mx-0 {\n    margin-inline: calc(0.25rem * 0);\n  }\n  .mx-0\\.5 {\n    margin-inline: calc(0.25rem * 0.5);\n  }\n  .mx-1 {\n    margin-inline: calc(0.25rem * 1);\n  }\n  .mx-6 {\n    margin-inline: calc(0.25rem * 6);\n  }\n  .mx-16 {\n    margin-inline: calc(0.25rem * 16);\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .my-2 {\n    margin-block: calc(0.25rem * 2);\n  }\n  .my-3 {\n    margin-block: calc(0.25rem * 3);\n  }\n  .my-4 {\n    margin-block: calc(0.25rem * 4);\n  }\n  .my-6 {\n    margin-block: calc(0.25rem * 6);\n  }\n  .my-auto {\n    margin-block: auto;\n  }\n  .mt-0 {\n    margin-top: calc(0.25rem * 0);\n  }\n  .mt-1 {\n    margin-top: calc(0.25rem * 1);\n  }\n  .mt-1\\.5 {\n    margin-top: calc(0.25rem * 1.5);\n  }\n  .mt-2 {\n    margin-top: calc(0.25rem * 2);\n  }\n  .mt-2\\.5 {\n    margin-top: calc(0.25rem * 2.5);\n  }\n  .mt-3 {\n    margin-top: calc(0.25rem * 3);\n  }\n  .mt-4 {\n    margin-top: calc(0.25rem * 4);\n  }\n  .mt-6 {\n    margin-top: calc(0.25rem * 6);\n  }\n  .mt-7 {\n    margin-top: calc(0.25rem * 7);\n  }\n  .mt-8 {\n    margin-top: calc(0.25rem * 8);\n  }\n  .mt-10 {\n    margin-top: calc(0.25rem * 10);\n  }\n  .mt-px {\n    margin-top: 1px;\n  }\n  .mr-0 {\n    margin-right: calc(0.25rem * 0);\n  }\n  .mr-0\\.5 {\n    margin-right: calc(0.25rem * 0.5);\n  }\n  .mr-1 {\n    margin-right: calc(0.25rem * 1);\n  }\n  .mr-1\\.5 {\n    margin-right: calc(0.25rem * 1.5);\n  }\n  .mr-2 {\n    margin-right: calc(0.25rem * 2);\n  }\n  .mr-3 {\n    margin-right: calc(0.25rem * 3);\n  }\n  .mr-6 {\n    margin-right: calc(0.25rem * 6);\n  }\n  .mb-0 {\n    margin-bottom: calc(0.25rem * 0);\n  }\n  .mb-1 {\n    margin-bottom: calc(0.25rem * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(0.25rem * 2);\n  }\n  .mb-3 {\n    margin-bottom: calc(0.25rem * 3);\n  }\n  .mb-4 {\n    margin-bottom: calc(0.25rem * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(0.25rem * 6);\n  }\n  .ml-0\\.5 {\n    margin-left: calc(0.25rem * 0.5);\n  }\n  .ml-1 {\n    margin-left: calc(0.25rem * 1);\n  }\n  .ml-2 {\n    margin-left: calc(0.25rem * 2);\n  }\n  .ml-4 {\n    margin-left: calc(0.25rem * 4);\n  }\n  .ml-6 {\n    margin-left: calc(0.25rem * 6);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .box-border {\n    box-sizing: border-box;\n  }\n  .box-content {\n    box-sizing: content-box;\n  }\n  .line-clamp-1 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n  }\n  .line-clamp-2 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n  }\n  .line-clamp-3 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n  }\n  .line-clamp-4 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 4;\n  }\n  .line-clamp-none {\n    overflow: visible;\n    display: block;\n    -webkit-box-orient: horizontal;\n    -webkit-line-clamp: unset;\n  }\n  .block {\n    display: block;\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .table {\n    display: table;\n  }\n  .aspect-square-\\[auto\\] {\n    aspect-ratio: 1 / 1;\n    height: auto;\n  }\n  @supports not (aspect-ratio: 1 / 1) {\n    .aspect-square-\\[auto\\] {\n      height: auto;\n    }\n  }\n  .aspect-square-\\[auto\\] {\n    aspect-ratio: 1 / 1;\n    height: auto;\n  }\n  @supports not (aspect-ratio: 1 / 1) {\n    .aspect-square-\\[auto\\] {\n      height: auto;\n    }\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .size-\\[27px\\] {\n    width: 27px;\n    height: 27px;\n  }\n  .h-1 {\n    height: calc(0.25rem * 1);\n  }\n  .h-2 {\n    height: calc(0.25rem * 2);\n  }\n  .h-2\\.5 {\n    height: calc(0.25rem * 2.5);\n  }\n  .h-3 {\n    height: calc(0.25rem * 3);\n  }\n  .h-4 {\n    height: calc(0.25rem * 4);\n  }\n  .h-5 {\n    height: calc(0.25rem * 5);\n  }\n  .h-5\\/6 {\n    height: calc(5/6 * 100%);\n  }\n  .h-6 {\n    height: calc(0.25rem * 6);\n  }\n  .h-7 {\n    height: calc(0.25rem * 7);\n  }\n  .h-8 {\n    height: calc(0.25rem * 8);\n  }\n  .h-9 {\n    height: calc(0.25rem * 9);\n  }\n  .h-10 {\n    height: calc(0.25rem * 10);\n  }\n  .h-12 {\n    height: calc(0.25rem * 12);\n  }\n  .h-\\[2\\.6rem\\] {\n    height: 2.6rem;\n  }\n  .h-\\[9px\\] {\n    height: 9px;\n  }\n  .h-auto {\n    height: auto;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-96 {\n    max-height: calc(0.25rem * 96);\n  }\n  .min-h-10 {\n    min-height: calc(0.25rem * 10);\n  }\n  .min-lines-2 {\n    min-height: calc(var(--line-height) * 2);\n  }\n  .min-lines-2 {\n    min-height: calc(var(--line-height) * 2);\n  }\n  .min-lines-3 {\n    min-height: calc(var(--line-height) * 3);\n  }\n  .min-lines-3 {\n    min-height: calc(var(--line-height) * 3);\n  }\n  .w-0\\.5 {\n    width: calc(0.25rem * 0.5);\n  }\n  .w-1 {\n    width: calc(0.25rem * 1);\n  }\n  .w-1\\/2 {\n    width: calc(1/2 * 100%);\n  }\n  .w-2 {\n    width: calc(0.25rem * 2);\n  }\n  .w-2\\.5 {\n    width: calc(0.25rem * 2.5);\n  }\n  .w-3 {\n    width: calc(0.25rem * 3);\n  }\n  .w-3\\.5 {\n    width: calc(0.25rem * 3.5);\n  }\n  .w-3\\/5 {\n    width: calc(3/5 * 100%);\n  }\n  .w-4 {\n    width: calc(0.25rem * 4);\n  }\n  .w-5 {\n    width: calc(0.25rem * 5);\n  }\n  .w-5\\/6 {\n    width: calc(5/6 * 100%);\n  }\n  .w-6 {\n    width: calc(0.25rem * 6);\n  }\n  .w-7 {\n    width: calc(0.25rem * 7);\n  }\n  .w-8 {\n    width: calc(0.25rem * 8);\n  }\n  .w-9 {\n    width: calc(0.25rem * 9);\n  }\n  .w-10 {\n    width: calc(0.25rem * 10);\n  }\n  .w-12 {\n    width: calc(0.25rem * 12);\n  }\n  .w-20 {\n    width: calc(0.25rem * 20);\n  }\n  .w-26 {\n    width: calc(0.25rem * 26);\n  }\n  .w-28 {\n    width: calc(0.25rem * 28);\n  }\n  .w-32 {\n    width: calc(0.25rem * 32);\n  }\n  .w-36 {\n    width: calc(0.25rem * 36);\n  }\n  .w-44 {\n    width: calc(0.25rem * 44);\n  }\n  .w-48 {\n    width: calc(0.25rem * 48);\n  }\n  .w-60 {\n    width: calc(0.25rem * 60);\n  }\n  .w-64 {\n    width: calc(0.25rem * 64);\n  }\n  .w-72 {\n    width: calc(0.25rem * 72);\n  }\n  .w-100 {\n    width: calc(0.25rem * 100);\n  }\n  .w-\\[2\\.6rem\\] {\n    width: 2.6rem;\n  }\n  .w-auto {\n    width: auto;\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .w-max {\n    width: max-content;\n  }\n  .max-w-4\\/5 {\n    max-width: calc(4/5 * 100%);\n  }\n  .max-w-60 {\n    max-width: calc(0.25rem * 60);\n  }\n  .max-w-\\[30ch\\] {\n    max-width: 30ch;\n  }\n  .max-w-full {\n    max-width: 100%;\n  }\n  .max-w-lg {\n    max-width: 32rem;\n  }\n  .max-w-max {\n    max-width: max-content;\n  }\n  .min-w-0 {\n    min-width: calc(0.25rem * 0);\n  }\n  .min-w-10 {\n    min-width: calc(0.25rem * 10);\n  }\n  .min-w-20 {\n    min-width: calc(0.25rem * 20);\n  }\n  .min-w-24 {\n    min-width: calc(0.25rem * 24);\n  }\n  .min-w-full {\n    min-width: 100%;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-none {\n    flex: none;\n  }\n  .flex-shrink {\n    flex-shrink: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .flex-grow {\n    flex-grow: 1;\n  }\n  .grow {\n    flex-grow: 1;\n  }\n  .basis-1\\/2 {\n    flex-basis: calc(1/2 * 100%);\n  }\n  .basis-8 {\n    flex-basis: calc(0.25rem * 8);\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-1\\/2 {\n    --tw-translate-x: calc(1/2 * 100%);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-75 {\n    --tw-scale-x: 75%;\n    --tw-scale-y: 75%;\n    --tw-scale-z: 75%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-100 {\n    --tw-scale-x: 100%;\n    --tw-scale-y: 100%;\n    --tw-scale-z: 100%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-pulse {\n    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n  .animate-spin {\n    animation: spin 1s linear infinite;\n  }\n  .cursor-\\[inherit\\] {\n    cursor: inherit;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .resize-none {\n    resize: none;\n  }\n  .list-outside {\n    list-style-position: outside;\n  }\n  .list-decimal {\n    list-style-type: decimal;\n  }\n  .list-disc {\n    list-style-type: disc;\n  }\n  .list-none {\n    list-style-type: none;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-\\[min-content_1fr\\] {\n    grid-template-columns: min-content 1fr;\n  }\n  .grid-cols-\\[min-content_auto\\] {\n    grid-template-columns: min-content auto;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-nowrap {\n    flex-wrap: nowrap;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .place-items-center {\n    place-items: center;\n  }\n  .content-center {\n    align-content: center;\n  }\n  .items-baseline {\n    align-items: baseline;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .gap-0\\.5 {\n    gap: calc(0.25rem * 0.5);\n  }\n  .gap-1 {\n    gap: calc(0.25rem * 1);\n  }\n  .gap-2 {\n    gap: calc(0.25rem * 2);\n  }\n  .gap-3 {\n    gap: calc(0.25rem * 3);\n  }\n  .gap-4 {\n    gap: calc(0.25rem * 4);\n  }\n  .gap-8 {\n    gap: calc(0.25rem * 8);\n  }\n  :where(.space-y-1 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(0.25rem * 1) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(0.25rem * 1) * calc(1 - var(--tw-space-y-reverse)));\n  }\n  .gap-x-1\\.5 {\n    column-gap: calc(0.25rem * 1.5);\n  }\n  .gap-x-2 {\n    column-gap: calc(0.25rem * 2);\n  }\n  .gap-x-4 {\n    column-gap: calc(0.25rem * 4);\n  }\n  :where(.space-x-1\\.5 > :not(:last-child)) {\n    --tw-space-x-reverse: 0;\n    margin-inline-start: calc(calc(0.25rem * 1.5) * var(--tw-space-x-reverse));\n    margin-inline-end: calc(calc(0.25rem * 1.5) * calc(1 - var(--tw-space-x-reverse)));\n  }\n  .gap-y-0\\.5 {\n    row-gap: calc(0.25rem * 0.5);\n  }\n  :where(.divide-y > :not(:last-child)) {\n    --tw-divide-y-reverse: 0;\n    border-bottom-style: var(--tw-border-style);\n    border-top-style: var(--tw-border-style);\n    border-top-width: calc(1px * var(--tw-divide-y-reverse));\n    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  }\n  :where(.divide-neutral > :not(:last-child)) {\n    border-color: var(--atomic-neutral);\n  }\n  .self-center {\n    align-self: center;\n  }\n  .self-start {\n    align-self: flex-start;\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .overflow-auto {\n    overflow: auto;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-auto {\n    overflow-x: auto;\n  }\n  .overflow-x-clip {\n    overflow-x: clip;\n  }\n  .overflow-x-scroll {\n    overflow-x: scroll;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .overflow-y-visible {\n    overflow-y: visible;\n  }\n  .scroll-smooth {\n    scroll-behavior: smooth;\n  }\n  .rounded {\n    border-radius: var(--atomic-border-radius);\n  }\n  .rounded-3xl {\n    border-radius: 1.5rem;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--atomic-border-radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--atomic-border-radius-md);\n  }\n  .rounded-none {\n    border-radius: 0;\n  }\n  .rounded-sm {\n    border-radius: var(--atomic-border-radius);\n  }\n  .rounded-xl {\n    border-radius: var(--atomic-border-radius-xl);\n  }\n  .rounded-tl-none {\n    border-top-left-radius: 0;\n  }\n  .rounded-r-none {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-gray-200 {\n    border-color: oklch(0.928 0.006 264.531);\n  }\n  .border-neutral {\n    border-color: var(--atomic-neutral);\n  }\n  .border-neutral-dark {\n    border-color: var(--atomic-neutral-dark);\n  }\n  .border-neutral-dim {\n    border-color: var(--atomic-neutral-dim);\n  }\n  .border-primary {\n    border-color: var(--atomic-primary);\n  }\n  .border-primary-light {\n    border-color: var(--atomic-primary-light);\n  }\n  .border-t-neutral {\n    border-top-color: var(--atomic-neutral);\n  }\n  .border-b-neutral {\n    border-bottom-color: var(--atomic-neutral);\n  }\n  .border-b-neutral-dim {\n    border-bottom-color: var(--atomic-neutral-dim);\n  }\n  .border-l-neutral {\n    border-left-color: var(--atomic-neutral);\n  }\n  .border-l-neutral-dim {\n    border-left-color: var(--atomic-neutral-dim);\n  }\n  .bg-\\[\\#F1F2FF\\] {\n    background-color: #F1F2FF;\n  }\n  .bg-\\[rgba\\(40\\,40\\,40\\,0\\.8\\)\\] {\n    background-color: rgba(40,40,40,0.8);\n  }\n  .bg-background {\n    background-color: var(--atomic-background);\n  }\n  .bg-error {\n    background-color: var(--atomic-error);\n  }\n  .bg-gray-50 {\n    background-color: oklch(0.985 0.002 247.839);\n  }\n  .bg-neutral {\n    background-color: var(--atomic-neutral);\n  }\n  .bg-neutral-dark {\n    background-color: var(--atomic-neutral-dark);\n  }\n  .bg-neutral-light {\n    background-color: var(--atomic-neutral-light);\n  }\n  .bg-primary {\n    background-color: var(--atomic-primary);\n  }\n  .bg-primary-background {\n    background-color: var(--atomic-primary-background);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: #fff;\n  }\n  .bg-linear-to-l {\n    --tw-gradient-position: to left;\n  }\n  @supports (background-image: linear-gradient(in lab, red, red)) {\n    .bg-linear-to-l {\n      --tw-gradient-position: to left in oklab;\n    }\n  }\n  .bg-linear-to-l {\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .bg-linear-to-r {\n    --tw-gradient-position: to right;\n  }\n  @supports (background-image: linear-gradient(in lab, red, red)) {\n    .bg-linear-to-r {\n      --tw-gradient-position: to right in oklab;\n    }\n  }\n  .bg-linear-to-r {\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-background\\/60 {\n    --tw-gradient-from: color-mix(in srgb, #ffffff 60%, transparent);\n  }\n  @supports (color: color-mix(in lab, red, red)) {\n    .from-background\\/60 {\n      --tw-gradient-from: color-mix(in oklab, var(--atomic-background) 60%, transparent);\n    }\n  }\n  .from-background\\/60 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .from-more-results-progress-bar-color-from {\n    --tw-gradient-from: var(\n    --atomic-more-results-progress-bar-color-from,\n    var(--atomic-primary-dark)\n  );\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .to-more-results-progress-bar-color-to {\n    --tw-gradient-to: var(\n    --atomic-more-results-progress-bar-color-to,\n    var(--atomic-primary-light)\n  );\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .fill-current {\n    fill: currentcolor;\n  }\n  .stroke-\\[1\\.25\\] {\n    stroke-width: 1.25;\n  }\n  .object-contain {\n    object-fit: contain;\n  }\n  .p-0 {\n    padding: calc(0.25rem * 0);\n  }\n  .p-1 {\n    padding: calc(0.25rem * 1);\n  }\n  .p-2 {\n    padding: calc(0.25rem * 2);\n  }\n  .p-2\\.5 {\n    padding: calc(0.25rem * 2.5);\n  }\n  .p-3 {\n    padding: calc(0.25rem * 3);\n  }\n  .p-3\\.5 {\n    padding: calc(0.25rem * 3.5);\n  }\n  .p-4 {\n    padding: calc(0.25rem * 4);\n  }\n  .p-6 {\n    padding: calc(0.25rem * 6);\n  }\n  .p-7 {\n    padding: calc(0.25rem * 7);\n  }\n  .p-8 {\n    padding: calc(0.25rem * 8);\n  }\n  .px-1 {\n    padding-inline: calc(0.25rem * 1);\n  }\n  .px-2 {\n    padding-inline: calc(0.25rem * 2);\n  }\n  .px-2\\.5 {\n    padding-inline: calc(0.25rem * 2.5);\n  }\n  .px-3 {\n    padding-inline: calc(0.25rem * 3);\n  }\n  .px-4 {\n    padding-inline: calc(0.25rem * 4);\n  }\n  .px-6 {\n    padding-inline: calc(0.25rem * 6);\n  }\n  .px-9 {\n    padding-inline: calc(0.25rem * 9);\n  }\n  .py-0\\.5 {\n    padding-block: calc(0.25rem * 0.5);\n  }\n  .py-1 {\n    padding-block: calc(0.25rem * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(0.25rem * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(0.25rem * 2);\n  }\n  .py-2\\.5 {\n    padding-block: calc(0.25rem * 2.5);\n  }\n  .py-3 {\n    padding-block: calc(0.25rem * 3);\n  }\n  .py-3\\.5 {\n    padding-block: calc(0.25rem * 3.5);\n  }\n  .py-4 {\n    padding-block: calc(0.25rem * 4);\n  }\n  .py-4\\.5 {\n    padding-block: calc(0.25rem * 4.5);\n  }\n  .py-5 {\n    padding-block: calc(0.25rem * 5);\n  }\n  .py-6 {\n    padding-block: calc(0.25rem * 6);\n  }\n  .pt-0\\.5 {\n    padding-top: calc(0.25rem * 0.5);\n  }\n  .pt-8 {\n    padding-top: calc(0.25rem * 8);\n  }\n  .pr-2 {\n    padding-right: calc(0.25rem * 2);\n  }\n  .pr-6 {\n    padding-right: calc(0.25rem * 6);\n  }\n  .pr-24 {\n    padding-right: calc(0.25rem * 24);\n  }\n  .pb-1 {\n    padding-bottom: calc(0.25rem * 1);\n  }\n  .pb-3 {\n    padding-bottom: calc(0.25rem * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(0.25rem * 4);\n  }\n  .pb-5 {\n    padding-bottom: calc(0.25rem * 5);\n  }\n  .pb-6 {\n    padding-bottom: calc(0.25rem * 6);\n  }\n  .pl-0 {\n    padding-left: calc(0.25rem * 0);\n  }\n  .pl-1 {\n    padding-left: calc(0.25rem * 1);\n  }\n  .pl-3 {\n    padding-left: calc(0.25rem * 3);\n  }\n  .pl-7 {\n    padding-left: calc(0.25rem * 7);\n  }\n  .pl-9 {\n    padding-left: calc(0.25rem * 9);\n  }\n  .pl-10 {\n    padding-left: calc(0.25rem * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .align-baseline {\n    vertical-align: baseline;\n  }\n  .align-bottom {\n    vertical-align: bottom;\n  }\n  .align-middle {\n    vertical-align: middle;\n  }\n  .font-sans {\n    font-family: var(--atomic-font-family);\n  }\n  .set-font-size-sm {\n    --font-size: var(--atomic-text-sm);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n  }\n  .set-font-size-sm {\n    --font-size: var(--atomic-text-sm);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n  }\n  .set-font-size-sm {\n    --font-size: var(--atomic-text-sm);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n  }\n  .text-2xl {\n    font-size: var(--atomic-text-2xl);\n    line-height: var(--tw-leading, calc(2 / 1.5));\n  }\n  .text-base {\n    font-size: var(--atomic-text-base);\n    line-height: var(--tw-leading, calc(1.5 / 1));\n  }\n  .text-lg {\n    font-size: var(--atomic-text-lg);\n    line-height: var(--tw-leading, calc(1.75 / 1.125));\n  }\n  .text-sm {\n    font-size: var(--atomic-text-sm);\n    line-height: var(--tw-leading, calc(1.25 / 0.875));\n  }\n  .text-xl {\n    font-size: var(--atomic-text-xl);\n    line-height: var(--tw-leading, calc(1.75 / 1.25));\n  }\n  .text-xs {\n    font-size: 0.75rem;\n    line-height: var(--tw-leading, calc(1 / 0.75));\n  }\n  .text-xs\\/\\[1rem\\] {\n    font-size: 0.75rem;\n    line-height: 1rem;\n  }\n  .leading-4 {\n    --tw-leading: calc(0.25rem * 4);\n    line-height: calc(0.25rem * 4);\n  }\n  .leading-5 {\n    --tw-leading: calc(0.25rem * 5);\n    line-height: calc(0.25rem * 5);\n  }\n  .leading-6 {\n    --tw-leading: calc(0.25rem * 6);\n    line-height: calc(0.25rem * 6);\n  }\n  .leading-8 {\n    --tw-leading: calc(0.25rem * 8);\n    line-height: calc(0.25rem * 8);\n  }\n  .leading-10 {\n    --tw-leading: calc(0.25rem * 10);\n    line-height: calc(0.25rem * 10);\n  }\n  .leading-\\[1\\.5\\] {\n    --tw-leading: 1.5;\n    line-height: 1.5;\n  }\n  .leading-\\[calc\\(1\\/\\.75\\)\\] {\n    --tw-leading: calc(1 / .75);\n    line-height: calc(1 / .75);\n  }\n  .leading-\\[var\\(--line-height\\)\\] {\n    --tw-leading: var(--line-height);\n    line-height: var(--line-height);\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-bold {\n    --tw-font-weight: var(--atomic-font-bold);\n    font-weight: var(--atomic-font-bold);\n  }\n  .font-light {\n    --tw-font-weight: 300;\n    font-weight: 300;\n  }\n  .font-medium {\n    --tw-font-weight: 500;\n    font-weight: 500;\n  }\n  .font-normal {\n    --tw-font-weight: var(--atomic-font-normal);\n    font-weight: var(--atomic-font-normal);\n  }\n  .font-semibold {\n    --tw-font-weight: 600;\n    font-weight: 600;\n  }\n  .break-words {\n    overflow-wrap: break-word;\n  }\n  .break-all {\n    word-break: break-all;\n  }\n  .break-keep {\n    word-break: keep-all;\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .whitespace-normal {\n    white-space: normal;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .text-\\[\\#54698D\\] {\n    color: #54698D;\n  }\n  .text-\\[inherit\\] {\n    color: inherit;\n  }\n  .text-black {\n    color: #000;\n  }\n  .text-error {\n    color: var(--atomic-error);\n  }\n  .text-gray-500 {\n    color: oklch(0.551 0.027 264.364);\n  }\n  .text-gray-600 {\n    color: oklch(0.446 0.03 256.802);\n  }\n  .text-gray-700 {\n    color: oklch(0.373 0.034 259.733);\n  }\n  .text-gray-900 {\n    color: oklch(0.21 0.034 264.665);\n  }\n  .text-green-600 {\n    color: oklch(0.627 0.194 149.214);\n  }\n  .text-inline-code {\n    color: var(--atomic-inline-code);\n  }\n  .text-neutral {\n    color: var(--atomic-neutral);\n  }\n  .text-neutral-dark {\n    color: var(--atomic-neutral-dark);\n  }\n  .text-on-background {\n    color: var(--atomic-on-background);\n  }\n  .text-on-primary {\n    color: var(--atomic-on-primary);\n  }\n  .text-primary {\n    color: var(--atomic-primary);\n  }\n  .text-primary-light {\n    color: var(--atomic-primary-light);\n  }\n  .text-rating-icon-active {\n    color: var(--atomic-rating-icon-active-color, #f6ce3c);\n  }\n  .text-rating-icon-inactive {\n    color: var(\n    --atomic-rating-icon-inactive-color,\n    var(--atomic-neutral)\n  );\n  }\n  .text-success {\n    color: var(--atomic-success);\n  }\n  .text-transparent {\n    color: transparent;\n  }\n  .capitalize {\n    text-transform: capitalize;\n  }\n  .lowercase {\n    text-transform: lowercase;\n  }\n  .italic {\n    font-style: italic;\n  }\n  .line-through {\n    text-decoration-line: line-through;\n  }\n  .placeholder-neutral-dark::placeholder {\n    color: var(--atomic-neutral-dark);\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-80 {\n    opacity: 80%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-inner-primary {\n    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--atomic-primary));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-lg {\n    --tw-shadow: 0px 2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-t-lg {\n    --tw-shadow: 0px -2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-1 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-3 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-primary {\n    --tw-ring-color: var(--atomic-primary);\n  }\n  .ring-primary-light {\n    --tw-ring-color: var(--atomic-primary-light);\n  }\n  .ring-ring-primary {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .outline-error {\n    outline-color: var(--atomic-error);\n  }\n  .outline-neutral {\n    outline-color: var(--atomic-neutral);\n  }\n  .outline-primary {\n    outline-color: var(--atomic-primary);\n  }\n  .blur {\n    --tw-blur: blur(8px);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .grayscale {\n    --tw-grayscale: grayscale(100%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .invert {\n    --tw-invert: invert(100%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-\\[visibility\\] {\n    transition-property: visibility;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .duration-500 {\n    --tw-duration: 500ms;\n    transition-duration: 500ms;\n  }\n  .ease-in-out {\n    --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .\\[grid-area\\:modal\\] {\n    grid-area: modal;\n  }\n  .\\[scrollbar-gutter\\:stable_both-edges\\] {\n    scrollbar-gutter: stable both-edges;\n  }\n  @media (hover: hover) {\n    .group-hover\\:visible:is(:where(.group):hover *) {\n      visibility: visible;\n    }\n  }\n  @media (hover: hover) {\n    .group-hover\\:text-error:is(:where(.group):hover *) {\n      color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .group-hover\\:text-primary:is(:where(.group):hover *) {\n      color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .group-hover\\:text-primary-light:is(:where(.group):hover *) {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .group-focus\\:text-primary:is(:where(.group):focus *) {\n    color: var(--atomic-primary);\n  }\n  .group-focus\\:text-primary-light:is(:where(.group):focus *) {\n    color: var(--atomic-primary-light);\n  }\n  .group-focus-visible\\:text-error:is(:where(.group):focus-visible *) {\n    color: var(--atomic-error);\n  }\n  .group-focus-visible\\:text-primary:is(:where(.group):focus-visible *) {\n    color: var(--atomic-primary);\n  }\n  .peer-focus-within\\:border-primary-light:is(:where(.peer):focus-within ~ *) {\n    border-color: var(--atomic-primary-light);\n  }\n  .peer-focus-within\\:text-primary-light:is(:where(.peer):focus-within ~ *) {\n    color: var(--atomic-primary-light);\n  }\n  @media (hover: hover) {\n    .peer-hover\\:border-primary-light:is(:where(.peer):hover ~ *) {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .peer-hover\\:text-error:is(:where(.peer):hover ~ *) {\n      color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .peer-hover\\:text-primary-light:is(:where(.peer):hover ~ *) {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .before\\:inline::before {\n    content: var(--tw-content);\n    display: inline;\n  }\n  .before\\:content-\\[\\'\\,\\\\00a0\\'\\]::before {\n    --tw-content: ',\\00a0';\n    content: var(--tw-content);\n  }\n  .after\\:absolute::after {\n    content: var(--tw-content);\n    position: absolute;\n  }\n  .after\\:-bottom-0\\.5::after {\n    content: var(--tw-content);\n    bottom: calc(0.25rem * -0.5);\n  }\n  .after\\:block::after {\n    content: var(--tw-content);\n    display: block;\n  }\n  .after\\:h-1::after {\n    content: var(--tw-content);\n    height: calc(0.25rem * 1);\n  }\n  .after\\:w-full::after {\n    content: var(--tw-content);\n    width: 100%;\n  }\n  .after\\:rounded::after {\n    content: var(--tw-content);\n    border-radius: var(--atomic-border-radius);\n  }\n  .after\\:bg-primary::after {\n    content: var(--tw-content);\n    background-color: var(--atomic-primary);\n  }\n  .focus-within\\:border-disabled:focus-within {\n    border-color: var(--atomic-disabled);\n  }\n  .focus-within\\:border-primary:focus-within {\n    border-color: var(--atomic-primary);\n  }\n  .focus-within\\:ring-3:focus-within {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .focus-within\\:ring-neutral:focus-within {\n    --tw-ring-color: var(--atomic-neutral);\n  }\n  .focus-within\\:ring-ring-primary:focus-within {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  @media (hover: hover) {\n    .hover\\:border:hover {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:border-error:hover {\n      border-color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:border-primary-light:hover {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-error:hover {\n      background-color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-neutral-light:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-primary-light:hover {\n      background-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-transparent:hover {\n      background-color: transparent;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:fill-white:hover {\n      fill: #fff;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:text-primary-light:hover {\n      color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:underline:hover {\n      text-decoration-line: underline;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:opacity-100:hover {\n      opacity: 100%;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:shadow-sm:hover {\n      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:opacity-100:focus {\n    opacity: 100%;\n  }\n  .focus\\:outline-hidden:focus {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  @media (forced-colors: active) {\n    .focus\\:outline-hidden:focus {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n  }\n  .focus-visible\\:border:focus-visible {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .focus-visible\\:border-error:focus-visible {\n    border-color: var(--atomic-error);\n  }\n  .focus-visible\\:border-primary:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .focus-visible\\:border-primary-light:focus-visible {\n    border-color: var(--atomic-primary-light);\n  }\n  .focus-visible\\:bg-error:focus-visible {\n    background-color: var(--atomic-error);\n  }\n  .focus-visible\\:bg-neutral-light:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .focus-visible\\:bg-primary-light:focus-visible {\n    background-color: var(--atomic-primary-light);\n  }\n  .focus-visible\\:text-primary-light:focus-visible {\n    color: var(--atomic-primary-light);\n  }\n  .focus-visible\\:underline:focus-visible {\n    text-decoration-line: underline;\n  }\n  .focus-visible\\:ring-2:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .focus-visible\\:outline-none:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  @media (width >= 40rem) {\n    .sm\\:px-6 {\n      padding-inline: calc(0.25rem * 6);\n    }\n  }\n  .\\[part\\=\\\"breadcrumb-button\\\"\\]\\:visible:is(part=\"breadcrumb-button\") {\n    visibility: visible;\n  }\n}\n@layer theme, base, components, utilities;\n@layer components {\n  .input-primary {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n  }\n  @media (hover: hover) {\n    .input-primary:hover {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  .input-primary:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .input-primary:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .input-primary:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .input-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-radio {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n  }\n  .btn-radio::before {\n    --tw-content: attr(value);\n    content: var(--tw-content);\n  }\n  .btn-primary {\n    border-radius: var(--atomic-border-radius);\n    background-color: var(--atomic-primary);\n    color: var(--atomic-on-primary);\n  }\n  @media (hover: hover) {\n    .btn-primary:hover {\n      background-color: var(--atomic-primary-light);\n    }\n  }\n  .btn-primary:focus-visible {\n    background-color: var(--atomic-primary-light);\n  }\n  .btn-primary:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-primary:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-primary:disabled {\n    cursor: not-allowed;\n  }\n  .btn-primary:disabled {\n    background-color: var(--atomic-disabled);\n  }\n  .btn-outline-primary {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-primary);\n  }\n  @media (hover: hover) {\n    .btn-outline-primary:hover {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-primary:hover {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .btn-outline-primary:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-primary:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-primary:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-primary:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-primary:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-primary:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-primary:disabled {\n    color: var(--atomic-neutral);\n  }\n  .btn-text-primary {\n    border-radius: var(--atomic-border-radius);\n    background-color: var(--atomic-background);\n    color: var(--atomic-primary);\n  }\n  @media (hover: hover) {\n    .btn-text-primary:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  .btn-text-primary:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-text-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-neutral {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-neutral:hover {\n      border-color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-neutral:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-outline-neutral:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-neutral:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-neutral:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-neutral:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-neutral:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-neutral:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-neutral:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-neutral:disabled {\n    opacity: 50%;\n  }\n  .btn-outline-bg-neutral {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-neutral:hover {\n      border-color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-neutral:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-neutral:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-bg-neutral:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-bg-neutral:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-bg-neutral:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-bg-neutral:disabled {\n    opacity: 50%;\n  }\n  .btn-outline-bg-error {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-error:hover {\n      border-color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-error:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-error:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-outline-bg-error:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-bg-error:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-outline-bg-error:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-bg-error:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-bg-error:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-bg-error:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-bg-error:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-bg-error:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-bg-error:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-bg-error:disabled {\n    opacity: 50%;\n  }\n  .btn-outline-error {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-error:hover {\n      border-color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-error:hover {\n      color: var(--atomic-error);\n    }\n  }\n  .btn-outline-error:focus-visible {\n    border-color: var(--atomic-error);\n  }\n  .btn-outline-error:focus-visible {\n    color: var(--atomic-error);\n  }\n  .btn-outline-error:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-error:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-error:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-error:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-error:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-error:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-error:disabled {\n    opacity: 50%;\n  }\n  .btn-text-neutral {\n    border-radius: var(--atomic-border-radius);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-text-neutral:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-text-neutral:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-text-neutral:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-text-neutral:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-text-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-text-transparent {\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-text-transparent:hover {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .btn-text-transparent:focus-visible {\n    color: var(--atomic-primary-light);\n  }\n  .btn-square-neutral {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-square-neutral:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  .btn-square-neutral:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-square-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-page {\n    display: grid;\n    height: calc(0.25rem * 10);\n    width: calc(0.25rem * 10);\n    place-items: center;\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n    font-size: var(--atomic-text-lg);\n    line-height: var(--tw-leading, calc(1.75 / 1.125));\n  }\n  @media (hover: hover) {\n    .btn-page:hover {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n    }\n  }\n  .btn-page:focus-visible {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .btn-page.selected {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n    border-color: var(--atomic-primary);\n    --tw-font-weight: var(--atomic-font-bold);\n    font-weight: var(--atomic-font-bold);\n  }\n}\n@layer base {\n  :host {\n    display: block;\n  }\n  :host, button, input, select {\n    font-family: var(--atomic-font-family);\n    font-size: var(--atomic-text-base);\n    line-height: var(--tw-leading, calc(1.5 / 1));\n    --tw-font-weight: var(--atomic-font-normal);\n    font-weight: var(--atomic-font-normal);\n  }\n  button {\n    cursor: pointer;\n  }\n  :host(.atomic-hidden) {\n    display: none;\n  }\n  .ripple {\n    position: absolute;\n    pointer-events: none;\n    transform: scale(0);\n    border-radius: 50%;\n    animation: ripple var(--animation-duration) linear;\n  }\n  .ripple-relative {\n    position: relative;\n  }\n  .ripple-parent {\n    overflow: hidden;\n  }\n  @keyframes ripple {\n    to {\n      transform: scale(4);\n      opacity: 0;\n    }\n  }\n}\n.show-hide-button {\n  --font-size: var(--atomic-text-sm);\n  font-size: var(--font-size);\n  --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n  line-height: var(--line-height);\n}\n.no-result-root {\n  color: var(--atomic-neutral-dark);\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-scale-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-x-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-divide-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-gradient-position {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-via {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-to {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-via-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: \"*\";\n  initial-value: \"\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-space-x-reverse: 0;\n      --tw-divide-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-content: \"\";\n    }\n  }\n}\n";
 const AtomicResultChildrenStyle0 = atomicResultChildrenCss;
@@ -139,7 +137,7 @@ const AtomicResultChildren = class {
         return (index.h(showHideButton.ChildrenWrapper, { hasChildren: children.length > 0 }, children.map((child, i) => this.renderChild(child, i === children.length - 1))));
     }
     render() {
-        return (index.h(showHideButton.ResultChildrenGuard, { key: 'af34654062e5d43cba6986228afb510599647099', inheritTemplates: this.inheritTemplates, resultTemplateRegistered: this.resultTemplateRegistered, templateHasError: this.templateHasError }, this.collection ? this.renderCollection() : this.renderFoldedResult()));
+        return (index.h(showHideButton.ResultChildrenGuard, { key: '3cc76dd7620f1914d2ab3e71e7b5702f0c9f33d8', inheritTemplates: this.inheritTemplates, resultTemplateRegistered: this.resultTemplateRegistered, templateHasError: this.templateHasError }, this.collection ? this.renderCollection() : this.renderFoldedResult()));
     }
     get host() { return index.getElement(this); }
 };