@coveo/atomic 3.30.0-pre.e8e95b2dbe → 3.30.1-pre.4b54d2bed0
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.
- package/dist/atomic/_atomic.esm.js +1 -1
- package/dist/atomic/atomic.esm.js.map +1 -1
- package/dist/atomic/components/_index.d.ts +0 -4
- package/dist/atomic/components/_index.js +0 -2
- package/dist/atomic/components/analytics-config.js +2 -2
- package/dist/atomic/components/analytics-config.js.map +1 -1
- package/dist/atomic/components/atomic-aria-live2.js +1 -1
- package/dist/atomic/components/atomic-breadbox.js +1 -1
- package/dist/atomic/components/atomic-breadbox.js.map +1 -1
- package/dist/atomic/components/atomic-category-facet.js +1 -1
- package/dist/atomic/components/atomic-citation.js +1 -1
- package/dist/atomic/components/atomic-commerce-category-facet2.js +1 -1
- package/dist/atomic/components/atomic-commerce-numeric-facet2.js +2 -2
- package/dist/atomic/components/atomic-commerce-timeframe-facet2.js +1 -1
- package/dist/atomic/components/atomic-facet-manager.js +1 -1
- package/dist/atomic/components/atomic-facet.js +1 -1
- package/dist/atomic/components/atomic-format-currency.js +1 -1
- package/dist/atomic/components/atomic-format-number.js +1 -1
- package/dist/atomic/components/atomic-format-unit.js +1 -1
- package/dist/atomic/components/atomic-generated-answer-feedback-modal.js +1 -1
- package/dist/atomic/components/atomic-html2.js +1 -1
- package/dist/atomic/components/atomic-insight-edit-toggle.js +1 -1
- package/dist/atomic/components/atomic-insight-facet.js +1 -1
- package/dist/atomic/components/atomic-insight-folded-result-list.js +1 -1
- package/dist/atomic/components/atomic-insight-full-search-button.js +1 -1
- package/dist/atomic/components/atomic-insight-history-toggle.js +1 -1
- package/dist/atomic/components/atomic-insight-no-results.js +1 -1
- package/dist/atomic/components/atomic-insight-numeric-facet.js +1 -1
- package/dist/atomic/components/atomic-insight-pager.js +3 -3
- package/dist/atomic/components/atomic-insight-query-error.js +1 -1
- package/dist/atomic/components/atomic-insight-refine-modal2.js +2 -2
- package/dist/atomic/components/atomic-insight-refine-toggle.js +1 -1
- package/dist/atomic/components/atomic-insight-result-attach-to-case-indicator.js +1 -1
- package/dist/atomic/components/atomic-insight-result-children.js +1 -1
- package/dist/atomic/components/atomic-insight-result-list.js +1 -1
- package/dist/atomic/components/atomic-insight-result-quickview-action.js +1 -1
- package/dist/atomic/components/atomic-insight-result2.js +2 -2
- package/dist/atomic/components/atomic-insight-result2.js.map +1 -1
- package/dist/atomic/components/atomic-insight-search-box.js +2 -2
- package/dist/atomic/components/atomic-insight-smart-snippet-feedback-modal2.js +2 -2
- package/dist/atomic/components/atomic-insight-tabs.js +1 -1
- package/dist/atomic/components/atomic-insight-user-actions-session2.js +1 -1
- package/dist/atomic/components/atomic-insight-user-actions-toggle.js +1 -1
- package/dist/atomic/components/atomic-ipx-body2.js +2 -2
- package/dist/atomic/components/atomic-ipx-button.js +2 -2
- package/dist/atomic/components/atomic-ipx-embedded.js +1 -1
- package/dist/atomic/components/atomic-ipx-modal.js +2 -2
- package/dist/atomic/components/atomic-ipx-recs-list.js +1 -1
- package/dist/atomic/components/atomic-ipx-refine-modal2.js +1 -1
- package/dist/atomic/components/atomic-ipx-refine-toggle.js +1 -1
- package/dist/atomic/components/atomic-ipx-result-link.js +1 -1
- package/dist/atomic/components/atomic-ipx-tabs.js +1 -1
- package/dist/atomic/components/atomic-load-more-results.js +1 -1
- package/dist/atomic/components/atomic-modal2.js +3 -3
- package/dist/atomic/components/atomic-modal2.js.map +1 -1
- package/dist/atomic/components/atomic-no-results.js +1 -1
- package/dist/atomic/components/atomic-numeric-facet.js +1 -1
- package/dist/atomic/components/atomic-pager.js +3 -3
- package/dist/atomic/components/atomic-product-price.js +1 -1
- package/dist/atomic/components/atomic-product-rating.js +1 -1
- package/dist/atomic/components/atomic-product-rating.js.map +1 -1
- package/dist/atomic/components/atomic-query-error.js +1 -1
- package/dist/atomic/components/atomic-query-summary.js +1 -1
- package/dist/atomic/components/atomic-quickview-modal2.js +1 -1
- package/dist/atomic/components/atomic-quickview.js +1 -1
- package/dist/atomic/components/atomic-rating-facet.js +1 -1
- package/dist/atomic/components/atomic-rating-facet.js.map +1 -1
- package/dist/atomic/components/atomic-rating-range-facet.js +1 -1
- package/dist/atomic/components/atomic-rating-range-facet.js.map +1 -1
- package/dist/atomic/components/atomic-recs-error.js +1 -1
- package/dist/atomic/components/atomic-recs-list.js +1 -1
- package/dist/atomic/components/atomic-recs-result2.js +1 -1
- package/dist/atomic/components/atomic-recs-result2.js.map +1 -1
- package/dist/atomic/components/atomic-refine-modal2.js +1 -1
- package/dist/atomic/components/atomic-refine-toggle.js +1 -1
- package/dist/atomic/components/atomic-relevance-inspector2.js +2 -2
- package/dist/atomic/components/atomic-result-children.js +1 -1
- package/dist/atomic/components/atomic-result-fields-list.js +1 -1
- package/dist/atomic/components/atomic-result-link.js +1 -1
- package/dist/atomic/components/atomic-result-list.js +1 -1
- package/dist/atomic/components/atomic-result-placeholder2.js +3 -3
- package/dist/atomic/components/atomic-result-placeholder2.js.map +1 -1
- package/dist/atomic/components/atomic-result-rating.js +1 -1
- package/dist/atomic/components/atomic-result-rating.js.map +1 -1
- package/dist/atomic/components/atomic-result-table-placeholder2.js +1 -1
- package/dist/atomic/components/atomic-result2.js +1 -1
- package/dist/atomic/components/atomic-result2.js.map +1 -1
- package/dist/atomic/components/atomic-results-per-page.js +1 -1
- package/dist/atomic/components/atomic-search-box-query-suggestions2.js +1 -1
- package/dist/atomic/components/atomic-search-box-recent-queries2.js +1 -1
- package/dist/atomic/components/atomic-search-box.js +9 -4
- package/dist/atomic/components/atomic-search-box.js.map +1 -1
- package/dist/atomic/components/atomic-smart-snippet-answer2.js +1 -1
- package/dist/atomic/components/atomic-smart-snippet-collapse-wrapper2.js +2 -2
- package/dist/atomic/components/atomic-smart-snippet-expandable-answer2.js +1 -1
- package/dist/atomic/components/atomic-smart-snippet-feedback-modal2.js +2 -2
- package/dist/atomic/components/atomic-smart-snippet-source2.js +1 -1
- package/dist/atomic/components/atomic-sort-dropdown.js +2 -2
- package/dist/atomic/components/atomic-sort-expression.js +1 -1
- package/dist/atomic/components/atomic-suggestion-renderer2.js +1 -1
- package/dist/atomic/components/atomic-tab-manager.js +1 -1
- package/dist/atomic/components/components/commerce/atomic-commerce-interface/atomic-commerce-interface.js +7 -0
- package/dist/atomic/components/components/commerce/atomic-commerce-layout/atomic-commerce-layout.tw.css.js +1 -1
- package/dist/atomic/components/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.js +1 -1
- package/dist/atomic/components/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.tw.css.js +1 -1
- package/dist/atomic/components/components/commerce/atomic-commerce-query-error/atomic-commerce-query-error.js +120 -0
- package/dist/atomic/components/components/commerce/atomic-commerce-refine-modal/atomic-commerce-refine-modal.tw.css.js +2 -6
- package/dist/atomic/components/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.js +5 -0
- package/dist/atomic/components/components/commerce/atomic-product/atomic-product.tw.css.js +1 -1
- package/dist/atomic/components/components/commerce/atomic-product-children/atomic-product-children.js +171 -0
- package/dist/atomic/components/components/commerce/atomic-product-children/atomic-product-children.tw.css.js +2 -0
- package/dist/atomic/components/components/commerce/atomic-product-template/atomic-product-template.js +1 -0
- package/dist/atomic/components/components/commerce/index.js +2 -0
- package/dist/atomic/components/components/commerce/lazy-index.js +2 -0
- package/dist/atomic/components/components/common/atomic-icon/atomic-icon.js +1 -1
- package/dist/atomic/components/components/common/atomic-icon/atomic-icon.tw.css.js +1 -1
- package/dist/atomic/components/components/common/query-error/container.js +4 -0
- package/dist/atomic/components/components/common/query-error/description.js +10 -0
- package/dist/atomic/components/components/common/query-error/details.js +11 -0
- package/dist/atomic/components/components/common/query-error/icon.js +28 -0
- package/dist/atomic/components/components/common/query-error/known-error-types.js +1 -0
- package/dist/atomic/components/components/common/query-error/link.js +25 -0
- package/dist/atomic/components/components/common/query-error/show-more.js +18 -0
- package/dist/atomic/components/components/common/query-error/title.js +10 -0
- package/dist/atomic/components/components/common/query-error/utils.js +33 -0
- package/dist/atomic/components/components/common/refine-modal/filters.js +2 -2
- package/dist/atomic/components/components/common/refine-modal/sort.js +2 -2
- package/dist/atomic/components/facet-date-input.js +3 -3
- package/dist/atomic/components/facet-number-input.js +2 -2
- package/dist/atomic/components/global/environment.js +1 -1
- package/dist/atomic/components/index.js.map +1 -1
- package/dist/atomic/components/mixins/commerce-layout-mixin.js +1 -1
- package/dist/atomic/components/tab-button.js +1 -1
- package/dist/atomic/components/tab-popover.js +1 -1
- package/dist/atomic/components/utils/dayjs-locales.js +1 -1
- package/dist/atomic/components/utils/tailwind-utilities/aspect-square.tw.css.js +1 -1
- package/dist/atomic/components/utils/tailwind-utilities/set-font-size.tw.css.js +1 -1
- package/dist/atomic/components/utils/tailwind-utilities/utilities.tw.css.js +3 -10
- package/dist/atomic/components/utils/tailwind.global.tw.css.js +2 -6
- package/dist/atomic/components/utils/xss-utils.js +5 -0
- package/dist/atomic/components/xss-utils.js +1 -1
- package/dist/atomic/components/xss-utils.js.map +1 -1
- package/dist/atomic/{p-f67a7223.entry.js → p-0051c09e.entry.js} +2 -2
- package/dist/atomic/{p-7b67c9b9.entry.js → p-009af1a0.entry.js} +2 -2
- package/dist/atomic/{p-c3eab374.entry.js → p-014d7074.entry.js} +2 -2
- package/dist/atomic/{p-ef486fe1.entry.js → p-03c36274.entry.js} +2 -2
- package/dist/atomic/p-03c36274.entry.js.map +1 -0
- package/dist/atomic/{p-a5abef7d.entry.js → p-0457e70e.entry.js} +2 -2
- package/dist/atomic/{p-57a5ed07.entry.js → p-053630b7.entry.js} +2 -2
- package/dist/atomic/{p-2fd51cdf.entry.js → p-05f50dc9.entry.js} +2 -2
- package/dist/atomic/{p-77d09284.entry.js → p-087ba363.entry.js} +2 -2
- package/dist/atomic/{p-7241c011.entry.js → p-0c604072.entry.js} +2 -2
- package/dist/atomic/{p-7241c011.entry.js.map → p-0c604072.entry.js.map} +1 -1
- package/dist/atomic/{p-490eccb6.entry.js → p-0caed756.entry.js} +2 -2
- package/dist/atomic/{p-0e2ed111.entry.js → p-0dbe91ef.entry.js} +2 -2
- package/dist/atomic/{p-5bf108a0.entry.js → p-0dbfef2a.entry.js} +2 -2
- package/dist/atomic/{p-140b16e3.entry.js → p-0ed3432e.entry.js} +2 -2
- package/dist/atomic/{p-140b16e3.entry.js.map → p-0ed3432e.entry.js.map} +1 -1
- package/dist/atomic/{p-5bd38b19.entry.js → p-14e07101.entry.js} +2 -2
- package/dist/atomic/{p-f456f7b6.entry.js → p-16f39309.entry.js} +2 -2
- package/dist/atomic/{p-26092163.entry.js → p-1868dae3.entry.js} +2 -2
- package/dist/atomic/{p-1f0bf1eb.entry.js → p-18a6ee18.entry.js} +2 -2
- package/dist/atomic/{p-40525df4.entry.js → p-19b2085d.entry.js} +2 -2
- package/dist/atomic/{p-bac40221.entry.js → p-1bd29155.entry.js} +2 -2
- package/dist/atomic/{p-2e9ff7ac.entry.js → p-1df62ba9.entry.js} +2 -2
- package/dist/atomic/{p-bdbce86f.entry.js → p-1e971b29.entry.js} +2 -2
- package/dist/atomic/{p-bdbce86f.entry.js.map → p-1e971b29.entry.js.map} +1 -1
- package/dist/atomic/{p-ff023985.entry.js → p-23200ea1.entry.js} +2 -2
- package/dist/atomic/{p-e09e1859.entry.js → p-254493bb.entry.js} +2 -2
- package/dist/atomic/{p-f9a25e27.entry.js → p-2553b81a.entry.js} +2 -2
- package/dist/atomic/p-2cfcffc7.entry.js +2 -0
- package/dist/atomic/{p-1c8468e7.entry.js → p-2e5900d5.entry.js} +2 -2
- package/dist/atomic/p-30417eb1.entry.js +2 -0
- package/dist/atomic/{p-833f101f.entry.js.map → p-30417eb1.entry.js.map} +1 -1
- package/dist/atomic/{p-46ef4232.entry.js → p-312ea507.entry.js} +2 -2
- package/dist/atomic/{p-187d0d34.entry.js → p-32d1d80d.entry.js} +2 -2
- package/dist/atomic/{p-5bb09cf4.entry.js → p-33197f64.entry.js} +2 -2
- package/dist/atomic/{p-5bb09cf4.entry.js.map → p-33197f64.entry.js.map} +1 -1
- package/dist/atomic/{p-f421c3ea.entry.js → p-33883a60.entry.js} +2 -2
- package/dist/atomic/p-3a9ef094.entry.js +2 -0
- package/dist/atomic/{p-561bfd3a.entry.js → p-3e4997cb.entry.js} +2 -2
- package/dist/atomic/{p-e17e600c.entry.js → p-40068301.entry.js} +2 -2
- package/dist/atomic/{p-23037179.entry.js → p-413a3e9a.entry.js} +2 -2
- package/dist/atomic/{p-edc70118.entry.js → p-4600286e.entry.js} +2 -2
- package/dist/atomic/{p-a91fef08.entry.js → p-4780a993.entry.js} +2 -2
- package/dist/atomic/{p-35beca53.entry.js → p-55c12e5f.entry.js} +2 -2
- package/dist/atomic/{p-35beca53.entry.js.map → p-55c12e5f.entry.js.map} +1 -1
- package/dist/atomic/{p-33bba59d.entry.js → p-57377cc0.entry.js} +2 -2
- package/dist/atomic/{p-4b3352dd.entry.js → p-5cae2acd.entry.js} +2 -2
- package/dist/atomic/{p-be30046e.entry.js → p-5daf65a2.entry.js} +2 -2
- package/dist/atomic/{p-1e9abe18.entry.js → p-5fb68531.entry.js} +2 -2
- package/dist/atomic/{p-5c120caf.entry.js → p-60c221c4.entry.js} +2 -2
- package/dist/atomic/{p-8e8694c8.entry.js → p-619fdbad.entry.js} +2 -2
- package/dist/atomic/{p-b1676a40.entry.js → p-66fd5541.entry.js} +2 -2
- package/dist/atomic/{p-6593c444.entry.js → p-6757d5c8.entry.js} +2 -2
- package/dist/atomic/{p-d4f3d892.entry.js → p-6a43fe66.entry.js} +2 -2
- package/dist/atomic/{p-3d66abef.entry.js → p-6c10c08c.entry.js} +2 -2
- package/dist/atomic/{p-b9895761.entry.js → p-6fafebf4.entry.js} +2 -2
- package/dist/atomic/{p-1e505f51.entry.js → p-7151eb35.entry.js} +2 -2
- package/dist/atomic/p-71d4c437.js +2 -0
- package/dist/atomic/p-71d4c437.js.map +1 -0
- package/dist/atomic/{p-a23745f5.entry.js → p-7525968c.entry.js} +2 -2
- package/dist/atomic/{p-8f58fe0a.entry.js → p-7deba242.entry.js} +2 -2
- package/dist/atomic/{p-6e261a0b.entry.js → p-7e477e6a.entry.js} +2 -2
- package/dist/atomic/{p-101e83b4.entry.js → p-7fae5dfa.entry.js} +2 -2
- package/dist/atomic/p-82f73cb7.entry.js +2 -0
- package/dist/atomic/{p-4b16bf2c.entry.js → p-86f61caa.entry.js} +2 -2
- package/dist/atomic/{p-35413667.entry.js → p-8f10d6b1.entry.js} +2 -2
- package/dist/atomic/{p-58376013.entry.js → p-90e7ab82.entry.js} +2 -2
- package/dist/atomic/p-963e508f.entry.js +2 -0
- package/dist/atomic/{p-da1849e7.entry.js.map → p-963e508f.entry.js.map} +1 -1
- package/dist/atomic/{p-5d9798dd.entry.js → p-9ea0730b.entry.js} +2 -2
- package/dist/atomic/{p-04c9e618.entry.js → p-a44740ec.entry.js} +2 -2
- package/dist/atomic/{p-04c9e618.entry.js.map → p-a44740ec.entry.js.map} +1 -1
- package/dist/atomic/{p-24b44e3d.entry.js → p-a516f15f.entry.js} +2 -2
- package/dist/atomic/{p-87e41501.js → p-a5bac939.js} +2 -2
- package/dist/atomic/{p-d826fc7e.entry.js → p-ab5284ef.entry.js} +2 -2
- package/dist/atomic/{p-ae1e6bd1.entry.js → p-b25c9315.entry.js} +2 -2
- package/dist/atomic/{p-6601699f.entry.js → p-b2778c4d.entry.js} +2 -2
- package/dist/atomic/{p-7aa2539e.entry.js → p-b7c58d1b.entry.js} +2 -2
- package/dist/atomic/{p-3358f6f2.entry.js → p-b8584d50.entry.js} +2 -2
- package/dist/atomic/{p-a245810a.entry.js → p-b9cdeb9c.entry.js} +2 -2
- package/dist/atomic/{p-8118ca18.entry.js → p-c7aea960.entry.js} +2 -2
- package/dist/atomic/{p-a8f9ba93.entry.js → p-c7e06c91.entry.js} +2 -2
- package/dist/atomic/{p-5f921429.entry.js → p-c9594881.entry.js} +2 -2
- package/dist/atomic/{p-46888edc.entry.js → p-c9b01229.entry.js} +2 -2
- package/dist/atomic/p-d2d1bbbc.entry.js +2 -0
- package/dist/atomic/{p-90461464.entry.js.map → p-d2d1bbbc.entry.js.map} +1 -1
- package/dist/atomic/{p-17f96696.entry.js → p-d376a122.entry.js} +2 -2
- package/dist/atomic/{p-449ed55b.entry.js → p-d49959ca.entry.js} +2 -2
- package/dist/atomic/{p-6a7ad933.entry.js → p-d4f88be6.entry.js} +2 -2
- package/dist/atomic/{p-3365edaa.entry.js → p-d67f0c7d.entry.js} +2 -2
- package/dist/atomic/p-db9fc2f4.entry.js +2 -0
- package/dist/atomic/{p-714340f3.entry.js → p-e67e6f25.entry.js} +2 -2
- package/dist/atomic/{p-9fe56c1e.entry.js → p-ef42977c.entry.js} +2 -2
- package/dist/atomic/{p-5f5d39bb.entry.js → p-ef6daa3c.entry.js} +2 -2
- package/dist/atomic/{p-a917b7e7.js → p-f30d6616.js} +2 -2
- package/dist/atomic/p-f30d6616.js.map +1 -0
- package/dist/atomic/{p-b1a51882.entry.js → p-f37215a3.entry.js} +2 -2
- package/dist/atomic/{p-9b4b8253.entry.js → p-f662801b.entry.js} +2 -2
- package/dist/atomic/p-f7fff4b1.entry.js +2 -0
- package/dist/atomic/{p-7f381070.entry.js.map → p-f7fff4b1.entry.js.map} +1 -1
- package/dist/atomic/{p-cf09f5ce.entry.js → p-fa1c4917.entry.js} +2 -2
- package/dist/atomic/{p-e1e7bc68.entry.js → p-fae8b0b6.entry.js} +2 -2
- package/dist/atomic/{p-4b048630.entry.js → p-fcc01555.entry.js} +2 -2
- package/dist/atomic/{p-a202e78b.entry.js → p-ff601596.entry.js} +2 -2
- package/dist/cjs/_loader.cjs.js +1 -1
- package/dist/cjs/{analytics-config-f15b3992.js → analytics-config-b087d3ae.js} +3 -3
- package/dist/cjs/{analytics-config-f15b3992.js.map → analytics-config-b087d3ae.js.map} +1 -1
- package/dist/cjs/atomic-aria-live_2.cjs.entry.js +3 -3
- package/dist/cjs/atomic-breadbox.cjs.entry.js +1 -1
- package/dist/cjs/atomic-breadbox.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-category-facet.cjs.entry.js +1 -1
- package/dist/cjs/atomic-citation.cjs.entry.js +3 -3
- package/dist/cjs/atomic-commerce-category-facet_4.cjs.entry.js +4 -4
- package/dist/cjs/atomic-facet-date-input.cjs.entry.js +3 -3
- package/dist/cjs/atomic-facet-manager.cjs.entry.js +1 -1
- package/dist/cjs/atomic-facet-number-input.cjs.entry.js +2 -2
- package/dist/cjs/atomic-facet.cjs.entry.js +1 -1
- package/dist/cjs/atomic-focus-trap_2.cjs.entry.js +3 -3
- package/dist/cjs/atomic-focus-trap_2.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-format-currency.cjs.entry.js +1 -1
- package/dist/cjs/atomic-format-number.cjs.entry.js +1 -1
- package/dist/cjs/atomic-format-unit.cjs.entry.js +1 -1
- package/dist/cjs/atomic-generated-answer-feedback-modal.cjs.entry.js +1 -1
- package/dist/cjs/atomic-html.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-edit-toggle.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-facet.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-folded-result-list.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-full-search-button.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-history-toggle.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-interface.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-no-results.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-numeric-facet.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-pager.cjs.entry.js +3 -3
- package/dist/cjs/atomic-insight-query-error.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-refine-modal.cjs.entry.js +2 -2
- package/dist/cjs/atomic-insight-refine-toggle.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-result-attach-to-case-indicator.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-result-children.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-result-list.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-result-quickview-action.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-result.cjs.entry.js +2 -2
- package/dist/cjs/atomic-insight-result.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-insight-search-box.cjs.entry.js +2 -2
- package/dist/cjs/atomic-insight-smart-snippet-feedback-modal.cjs.entry.js +2 -2
- package/dist/cjs/atomic-insight-tabs.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-user-actions-session_2.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-user-actions-toggle.cjs.entry.js +1 -1
- package/dist/cjs/atomic-ipx-body.cjs.entry.js +2 -2
- package/dist/cjs/atomic-ipx-button.cjs.entry.js +2 -2
- package/dist/cjs/atomic-ipx-embedded.cjs.entry.js +1 -1
- package/dist/cjs/atomic-ipx-modal.cjs.entry.js +2 -2
- package/dist/cjs/atomic-ipx-recs-list.cjs.entry.js +1 -1
- package/dist/cjs/atomic-ipx-refine-modal.cjs.entry.js +1 -1
- package/dist/cjs/atomic-ipx-refine-toggle.cjs.entry.js +1 -1
- package/dist/cjs/atomic-ipx-result-link.cjs.entry.js +3 -3
- package/dist/cjs/atomic-ipx-tabs.cjs.entry.js +1 -1
- package/dist/cjs/atomic-load-more-results.cjs.entry.js +1 -1
- package/dist/cjs/atomic-no-results.cjs.entry.js +1 -1
- package/dist/cjs/atomic-numeric-facet.cjs.entry.js +1 -1
- package/dist/cjs/atomic-pager.cjs.entry.js +3 -3
- package/dist/cjs/atomic-product-image.cjs.entry.js +1 -1
- package/dist/cjs/atomic-product-link.cjs.entry.js +2 -2
- package/dist/cjs/atomic-product-price.cjs.entry.js +1 -1
- package/dist/cjs/atomic-product-rating.cjs.entry.js +1 -1
- package/dist/cjs/atomic-product-rating.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-query-error.cjs.entry.js +1 -1
- package/dist/cjs/atomic-query-summary.cjs.entry.js +1 -1
- package/dist/cjs/atomic-quickview-modal.cjs.entry.js +3 -3
- package/dist/cjs/atomic-quickview.cjs.entry.js +1 -1
- package/dist/cjs/atomic-rating-facet.cjs.entry.js +1 -1
- package/dist/cjs/atomic-rating-facet.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-rating-range-facet.cjs.entry.js +1 -1
- package/dist/cjs/atomic-rating-range-facet.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-recs-error.cjs.entry.js +1 -1
- package/dist/cjs/atomic-recs-interface.cjs.entry.js +1 -1
- package/dist/cjs/atomic-recs-list.cjs.entry.js +1 -1
- package/dist/cjs/atomic-recs-result.cjs.entry.js +1 -1
- package/dist/cjs/atomic-recs-result.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-refine-modal.cjs.entry.js +1 -1
- package/dist/cjs/atomic-refine-toggle.cjs.entry.js +1 -1
- package/dist/cjs/atomic-result-children.cjs.entry.js +1 -1
- package/dist/cjs/atomic-result-fields-list.cjs.entry.js +1 -1
- package/dist/cjs/atomic-result-image.cjs.entry.js +1 -1
- package/dist/cjs/atomic-result-link.cjs.entry.js +3 -3
- package/dist/cjs/atomic-result-list.cjs.entry.js +1 -1
- package/dist/cjs/atomic-result-placeholder_8.cjs.entry.js +4 -4
- package/dist/cjs/atomic-result-placeholder_8.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-result-printable-uri.cjs.entry.js +2 -2
- package/dist/cjs/atomic-result-rating.cjs.entry.js +1 -1
- package/dist/cjs/atomic-result-rating.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-result.cjs.entry.js +1 -1
- package/dist/cjs/atomic-result.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-results-per-page.cjs.entry.js +1 -1
- package/dist/cjs/atomic-search-box-query-suggestions_2.cjs.entry.js +2 -2
- package/dist/cjs/atomic-search-box.cjs.entry.js +9 -4
- package/dist/cjs/atomic-search-box.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-search-interface.cjs.entry.js +1 -1
- package/dist/cjs/atomic-smart-snippet-answer_2.cjs.entry.js +4 -4
- package/dist/cjs/atomic-smart-snippet-collapse-wrapper_2.cjs.entry.js +3 -3
- package/dist/cjs/atomic-smart-snippet-feedback-modal.cjs.entry.js +2 -2
- package/dist/cjs/atomic-sort-dropdown.cjs.entry.js +2 -2
- package/dist/cjs/atomic-sort-expression.cjs.entry.js +1 -1
- package/dist/cjs/atomic-suggestion-renderer.cjs.entry.js +1 -1
- package/dist/cjs/atomic-tab-bar_2.cjs.entry.js +1 -1
- package/dist/cjs/atomic-tab-button.cjs.entry.js +1 -1
- package/dist/cjs/atomic-tab-manager.cjs.entry.js +1 -1
- package/dist/cjs/atomic.cjs.js +1 -1
- package/dist/cjs/index-757bc886.js +0 -8
- package/dist/cjs/{stencil-item-link-b146b350.js → stencil-item-link-9feaef61.js} +2 -2
- package/dist/cjs/{stencil-item-link-b146b350.js.map → stencil-item-link-9feaef61.js.map} +1 -1
- package/dist/cjs/version.cjs.js +2 -2
- package/dist/cjs/{xss-utils-185a1c77.js → xss-utils-f0f93bcb.js} +2 -2
- package/dist/cjs/xss-utils-f0f93bcb.js.map +1 -0
- package/dist/esm/_loader.js +1 -1
- package/dist/esm/{analytics-config-0746e2ab.js → analytics-config-02c75e30.js} +3 -3
- package/dist/esm/{analytics-config-0746e2ab.js.map → analytics-config-02c75e30.js.map} +1 -1
- package/dist/esm/atomic-aria-live_2.entry.js +3 -3
- package/dist/esm/atomic-breadbox.entry.js +1 -1
- package/dist/esm/atomic-breadbox.entry.js.map +1 -1
- package/dist/esm/atomic-category-facet.entry.js +1 -1
- package/dist/esm/atomic-citation.entry.js +3 -3
- package/dist/esm/atomic-commerce-category-facet_4.entry.js +4 -4
- package/dist/esm/atomic-facet-date-input.entry.js +3 -3
- package/dist/esm/atomic-facet-manager.entry.js +1 -1
- package/dist/esm/atomic-facet-number-input.entry.js +2 -2
- package/dist/esm/atomic-facet.entry.js +1 -1
- package/dist/esm/atomic-focus-trap_2.entry.js +3 -3
- package/dist/esm/atomic-focus-trap_2.entry.js.map +1 -1
- package/dist/esm/atomic-format-currency.entry.js +1 -1
- package/dist/esm/atomic-format-number.entry.js +1 -1
- package/dist/esm/atomic-format-unit.entry.js +1 -1
- package/dist/esm/atomic-generated-answer-feedback-modal.entry.js +1 -1
- package/dist/esm/atomic-html.entry.js +1 -1
- package/dist/esm/atomic-insight-edit-toggle.entry.js +1 -1
- package/dist/esm/atomic-insight-facet.entry.js +1 -1
- package/dist/esm/atomic-insight-folded-result-list.entry.js +1 -1
- package/dist/esm/atomic-insight-full-search-button.entry.js +1 -1
- package/dist/esm/atomic-insight-history-toggle.entry.js +1 -1
- package/dist/esm/atomic-insight-interface.entry.js +1 -1
- package/dist/esm/atomic-insight-no-results.entry.js +1 -1
- package/dist/esm/atomic-insight-numeric-facet.entry.js +1 -1
- package/dist/esm/atomic-insight-pager.entry.js +3 -3
- package/dist/esm/atomic-insight-query-error.entry.js +1 -1
- package/dist/esm/atomic-insight-refine-modal.entry.js +2 -2
- package/dist/esm/atomic-insight-refine-toggle.entry.js +1 -1
- package/dist/esm/atomic-insight-result-attach-to-case-indicator.entry.js +1 -1
- package/dist/esm/atomic-insight-result-children.entry.js +1 -1
- package/dist/esm/atomic-insight-result-list.entry.js +1 -1
- package/dist/esm/atomic-insight-result-quickview-action.entry.js +1 -1
- package/dist/esm/atomic-insight-result.entry.js +2 -2
- package/dist/esm/atomic-insight-result.entry.js.map +1 -1
- package/dist/esm/atomic-insight-search-box.entry.js +2 -2
- package/dist/esm/atomic-insight-smart-snippet-feedback-modal.entry.js +2 -2
- package/dist/esm/atomic-insight-tabs.entry.js +1 -1
- package/dist/esm/atomic-insight-user-actions-session_2.entry.js +1 -1
- package/dist/esm/atomic-insight-user-actions-toggle.entry.js +1 -1
- package/dist/esm/atomic-ipx-body.entry.js +2 -2
- package/dist/esm/atomic-ipx-button.entry.js +2 -2
- package/dist/esm/atomic-ipx-embedded.entry.js +1 -1
- package/dist/esm/atomic-ipx-modal.entry.js +2 -2
- package/dist/esm/atomic-ipx-recs-list.entry.js +1 -1
- package/dist/esm/atomic-ipx-refine-modal.entry.js +1 -1
- package/dist/esm/atomic-ipx-refine-toggle.entry.js +1 -1
- package/dist/esm/atomic-ipx-result-link.entry.js +3 -3
- package/dist/esm/atomic-ipx-tabs.entry.js +1 -1
- package/dist/esm/atomic-load-more-results.entry.js +1 -1
- package/dist/esm/atomic-no-results.entry.js +1 -1
- package/dist/esm/atomic-numeric-facet.entry.js +1 -1
- package/dist/esm/atomic-pager.entry.js +3 -3
- package/dist/esm/atomic-product-image.entry.js +1 -1
- package/dist/esm/atomic-product-link.entry.js +2 -2
- package/dist/esm/atomic-product-price.entry.js +1 -1
- package/dist/esm/atomic-product-rating.entry.js +1 -1
- package/dist/esm/atomic-product-rating.entry.js.map +1 -1
- package/dist/esm/atomic-query-error.entry.js +1 -1
- package/dist/esm/atomic-query-summary.entry.js +1 -1
- package/dist/esm/atomic-quickview-modal.entry.js +3 -3
- package/dist/esm/atomic-quickview.entry.js +1 -1
- package/dist/esm/atomic-rating-facet.entry.js +1 -1
- package/dist/esm/atomic-rating-facet.entry.js.map +1 -1
- package/dist/esm/atomic-rating-range-facet.entry.js +1 -1
- package/dist/esm/atomic-rating-range-facet.entry.js.map +1 -1
- package/dist/esm/atomic-recs-error.entry.js +1 -1
- package/dist/esm/atomic-recs-interface.entry.js +1 -1
- package/dist/esm/atomic-recs-list.entry.js +1 -1
- package/dist/esm/atomic-recs-result.entry.js +1 -1
- package/dist/esm/atomic-recs-result.entry.js.map +1 -1
- package/dist/esm/atomic-refine-modal.entry.js +1 -1
- package/dist/esm/atomic-refine-toggle.entry.js +1 -1
- package/dist/esm/atomic-result-children.entry.js +1 -1
- package/dist/esm/atomic-result-fields-list.entry.js +1 -1
- package/dist/esm/atomic-result-image.entry.js +1 -1
- package/dist/esm/atomic-result-link.entry.js +3 -3
- package/dist/esm/atomic-result-list.entry.js +1 -1
- package/dist/esm/atomic-result-placeholder_8.entry.js +4 -4
- package/dist/esm/atomic-result-placeholder_8.entry.js.map +1 -1
- package/dist/esm/atomic-result-printable-uri.entry.js +2 -2
- package/dist/esm/atomic-result-rating.entry.js +1 -1
- package/dist/esm/atomic-result-rating.entry.js.map +1 -1
- package/dist/esm/atomic-result.entry.js +1 -1
- package/dist/esm/atomic-result.entry.js.map +1 -1
- package/dist/esm/atomic-results-per-page.entry.js +1 -1
- package/dist/esm/atomic-search-box-query-suggestions_2.entry.js +2 -2
- package/dist/esm/atomic-search-box.entry.js +9 -4
- package/dist/esm/atomic-search-box.entry.js.map +1 -1
- package/dist/esm/atomic-search-interface.entry.js +1 -1
- package/dist/esm/atomic-smart-snippet-answer_2.entry.js +4 -4
- package/dist/esm/atomic-smart-snippet-collapse-wrapper_2.entry.js +3 -3
- package/dist/esm/atomic-smart-snippet-feedback-modal.entry.js +2 -2
- package/dist/esm/atomic-sort-dropdown.entry.js +2 -2
- package/dist/esm/atomic-sort-expression.entry.js +1 -1
- package/dist/esm/atomic-suggestion-renderer.entry.js +1 -1
- package/dist/esm/atomic-tab-bar_2.entry.js +1 -1
- package/dist/esm/atomic-tab-button.entry.js +1 -1
- package/dist/esm/atomic-tab-manager.entry.js +1 -1
- package/dist/esm/atomic.js +1 -1
- package/dist/esm/index-3f35faca.js +0 -8
- package/dist/esm/{stencil-item-link-8f83755f.js → stencil-item-link-5a3f8f23.js} +2 -2
- package/dist/esm/{stencil-item-link-8f83755f.js.map → stencil-item-link-5a3f8f23.js.map} +1 -1
- package/dist/esm/version.js +2 -2
- package/dist/esm/{xss-utils-3bfd8d0c.js → xss-utils-c92f3869.js} +2 -2
- package/dist/esm/xss-utils-c92f3869.js.map +1 -0
- package/dist/types/components/commerce/atomic-commerce-interface/atomic-commerce-interface.d.ts +1 -0
- package/dist/types/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.d.ts +1 -1
- package/dist/types/components/commerce/atomic-commerce-query-error/atomic-commerce-query-error.d.ts +13 -6
- package/dist/types/components/commerce/atomic-product-children/atomic-product-children.d.ts +29 -17
- package/dist/types/components/commerce/atomic-product-template/atomic-product-template.d.ts +1 -0
- package/dist/types/components/commerce/index.d.ts +2 -0
- package/dist/types/components/common/query-error/show-more.d.ts +2 -2
- package/dist/types/components.d.ts +0 -100
- package/dist/types/mixins/slots-for-no-shadow-dom-mixin.d.ts +47 -0
- package/docs/atomic-docs.json +1 -188
- package/package.json +14 -14
- package/dist/atomic/components/atomic-commerce-query-error.d.ts +0 -11
- package/dist/atomic/components/atomic-commerce-query-error.js +0 -83
- package/dist/atomic/components/atomic-commerce-query-error.js.map +0 -1
- package/dist/atomic/components/atomic-product-children.d.ts +0 -11
- package/dist/atomic/components/atomic-product-children.js +0 -141
- package/dist/atomic/components/atomic-product-children.js.map +0 -1
- package/dist/atomic/p-308c8f97.entry.js +0 -2
- package/dist/atomic/p-659d3ea8.js +0 -2
- package/dist/atomic/p-659d3ea8.js.map +0 -1
- package/dist/atomic/p-7f381070.entry.js +0 -2
- package/dist/atomic/p-833f101f.entry.js +0 -2
- package/dist/atomic/p-90461464.entry.js +0 -2
- package/dist/atomic/p-a605ba38.entry.js +0 -2
- package/dist/atomic/p-a605ba38.entry.js.map +0 -1
- package/dist/atomic/p-a917b7e7.js.map +0 -1
- package/dist/atomic/p-c32a8078.entry.js +0 -2
- package/dist/atomic/p-c32a8078.entry.js.map +0 -1
- package/dist/atomic/p-da1849e7.entry.js +0 -2
- package/dist/atomic/p-db75a4d7.entry.js +0 -2
- package/dist/atomic/p-ef486fe1.entry.js.map +0 -1
- package/dist/atomic/p-fee37590.entry.js +0 -2
- package/dist/atomic/p-ff6407a0.entry.js +0 -2
- package/dist/cjs/atomic-commerce-query-error.cjs.entry.js +0 -75
- package/dist/cjs/atomic-commerce-query-error.cjs.entry.js.map +0 -1
- package/dist/cjs/atomic-product-children.cjs.entry.js +0 -129
- package/dist/cjs/atomic-product-children.cjs.entry.js.map +0 -1
- package/dist/cjs/xss-utils-185a1c77.js.map +0 -1
- package/dist/esm/atomic-commerce-query-error.entry.js +0 -71
- package/dist/esm/atomic-commerce-query-error.entry.js.map +0 -1
- package/dist/esm/atomic-product-children.entry.js +0 -125
- package/dist/esm/atomic-product-children.entry.js.map +0 -1
- package/dist/esm/xss-utils-3bfd8d0c.js.map +0 -1
- /package/dist/atomic/components/decorators/{light-dom.js → inject-styles-for-no-shadow-dom.js} +0 -0
- /package/dist/atomic/{p-f67a7223.entry.js.map → p-0051c09e.entry.js.map} +0 -0
- /package/dist/atomic/{p-7b67c9b9.entry.js.map → p-009af1a0.entry.js.map} +0 -0
- /package/dist/atomic/{p-c3eab374.entry.js.map → p-014d7074.entry.js.map} +0 -0
- /package/dist/atomic/{p-a5abef7d.entry.js.map → p-0457e70e.entry.js.map} +0 -0
- /package/dist/atomic/{p-57a5ed07.entry.js.map → p-053630b7.entry.js.map} +0 -0
- /package/dist/atomic/{p-2fd51cdf.entry.js.map → p-05f50dc9.entry.js.map} +0 -0
- /package/dist/atomic/{p-77d09284.entry.js.map → p-087ba363.entry.js.map} +0 -0
- /package/dist/atomic/{p-490eccb6.entry.js.map → p-0caed756.entry.js.map} +0 -0
- /package/dist/atomic/{p-0e2ed111.entry.js.map → p-0dbe91ef.entry.js.map} +0 -0
- /package/dist/atomic/{p-5bf108a0.entry.js.map → p-0dbfef2a.entry.js.map} +0 -0
- /package/dist/atomic/{p-5bd38b19.entry.js.map → p-14e07101.entry.js.map} +0 -0
- /package/dist/atomic/{p-f456f7b6.entry.js.map → p-16f39309.entry.js.map} +0 -0
- /package/dist/atomic/{p-26092163.entry.js.map → p-1868dae3.entry.js.map} +0 -0
- /package/dist/atomic/{p-1f0bf1eb.entry.js.map → p-18a6ee18.entry.js.map} +0 -0
- /package/dist/atomic/{p-40525df4.entry.js.map → p-19b2085d.entry.js.map} +0 -0
- /package/dist/atomic/{p-bac40221.entry.js.map → p-1bd29155.entry.js.map} +0 -0
- /package/dist/atomic/{p-2e9ff7ac.entry.js.map → p-1df62ba9.entry.js.map} +0 -0
- /package/dist/atomic/{p-ff023985.entry.js.map → p-23200ea1.entry.js.map} +0 -0
- /package/dist/atomic/{p-e09e1859.entry.js.map → p-254493bb.entry.js.map} +0 -0
- /package/dist/atomic/{p-f9a25e27.entry.js.map → p-2553b81a.entry.js.map} +0 -0
- /package/dist/atomic/{p-fee37590.entry.js.map → p-2cfcffc7.entry.js.map} +0 -0
- /package/dist/atomic/{p-1c8468e7.entry.js.map → p-2e5900d5.entry.js.map} +0 -0
- /package/dist/atomic/{p-46ef4232.entry.js.map → p-312ea507.entry.js.map} +0 -0
- /package/dist/atomic/{p-187d0d34.entry.js.map → p-32d1d80d.entry.js.map} +0 -0
- /package/dist/atomic/{p-f421c3ea.entry.js.map → p-33883a60.entry.js.map} +0 -0
- /package/dist/atomic/{p-308c8f97.entry.js.map → p-3a9ef094.entry.js.map} +0 -0
- /package/dist/atomic/{p-561bfd3a.entry.js.map → p-3e4997cb.entry.js.map} +0 -0
- /package/dist/atomic/{p-e17e600c.entry.js.map → p-40068301.entry.js.map} +0 -0
- /package/dist/atomic/{p-23037179.entry.js.map → p-413a3e9a.entry.js.map} +0 -0
- /package/dist/atomic/{p-edc70118.entry.js.map → p-4600286e.entry.js.map} +0 -0
- /package/dist/atomic/{p-a91fef08.entry.js.map → p-4780a993.entry.js.map} +0 -0
- /package/dist/atomic/{p-33bba59d.entry.js.map → p-57377cc0.entry.js.map} +0 -0
- /package/dist/atomic/{p-4b3352dd.entry.js.map → p-5cae2acd.entry.js.map} +0 -0
- /package/dist/atomic/{p-be30046e.entry.js.map → p-5daf65a2.entry.js.map} +0 -0
- /package/dist/atomic/{p-1e9abe18.entry.js.map → p-5fb68531.entry.js.map} +0 -0
- /package/dist/atomic/{p-5c120caf.entry.js.map → p-60c221c4.entry.js.map} +0 -0
- /package/dist/atomic/{p-8e8694c8.entry.js.map → p-619fdbad.entry.js.map} +0 -0
- /package/dist/atomic/{p-b1676a40.entry.js.map → p-66fd5541.entry.js.map} +0 -0
- /package/dist/atomic/{p-6593c444.entry.js.map → p-6757d5c8.entry.js.map} +0 -0
- /package/dist/atomic/{p-d4f3d892.entry.js.map → p-6a43fe66.entry.js.map} +0 -0
- /package/dist/atomic/{p-3d66abef.entry.js.map → p-6c10c08c.entry.js.map} +0 -0
- /package/dist/atomic/{p-b9895761.entry.js.map → p-6fafebf4.entry.js.map} +0 -0
- /package/dist/atomic/{p-1e505f51.entry.js.map → p-7151eb35.entry.js.map} +0 -0
- /package/dist/atomic/{p-a23745f5.entry.js.map → p-7525968c.entry.js.map} +0 -0
- /package/dist/atomic/{p-8f58fe0a.entry.js.map → p-7deba242.entry.js.map} +0 -0
- /package/dist/atomic/{p-6e261a0b.entry.js.map → p-7e477e6a.entry.js.map} +0 -0
- /package/dist/atomic/{p-101e83b4.entry.js.map → p-7fae5dfa.entry.js.map} +0 -0
- /package/dist/atomic/{p-ff6407a0.entry.js.map → p-82f73cb7.entry.js.map} +0 -0
- /package/dist/atomic/{p-4b16bf2c.entry.js.map → p-86f61caa.entry.js.map} +0 -0
- /package/dist/atomic/{p-35413667.entry.js.map → p-8f10d6b1.entry.js.map} +0 -0
- /package/dist/atomic/{p-58376013.entry.js.map → p-90e7ab82.entry.js.map} +0 -0
- /package/dist/atomic/{p-5d9798dd.entry.js.map → p-9ea0730b.entry.js.map} +0 -0
- /package/dist/atomic/{p-24b44e3d.entry.js.map → p-a516f15f.entry.js.map} +0 -0
- /package/dist/atomic/{p-87e41501.js.map → p-a5bac939.js.map} +0 -0
- /package/dist/atomic/{p-d826fc7e.entry.js.map → p-ab5284ef.entry.js.map} +0 -0
- /package/dist/atomic/{p-ae1e6bd1.entry.js.map → p-b25c9315.entry.js.map} +0 -0
- /package/dist/atomic/{p-6601699f.entry.js.map → p-b2778c4d.entry.js.map} +0 -0
- /package/dist/atomic/{p-7aa2539e.entry.js.map → p-b7c58d1b.entry.js.map} +0 -0
- /package/dist/atomic/{p-3358f6f2.entry.js.map → p-b8584d50.entry.js.map} +0 -0
- /package/dist/atomic/{p-a245810a.entry.js.map → p-b9cdeb9c.entry.js.map} +0 -0
- /package/dist/atomic/{p-8118ca18.entry.js.map → p-c7aea960.entry.js.map} +0 -0
- /package/dist/atomic/{p-a8f9ba93.entry.js.map → p-c7e06c91.entry.js.map} +0 -0
- /package/dist/atomic/{p-5f921429.entry.js.map → p-c9594881.entry.js.map} +0 -0
- /package/dist/atomic/{p-46888edc.entry.js.map → p-c9b01229.entry.js.map} +0 -0
- /package/dist/atomic/{p-17f96696.entry.js.map → p-d376a122.entry.js.map} +0 -0
- /package/dist/atomic/{p-449ed55b.entry.js.map → p-d49959ca.entry.js.map} +0 -0
- /package/dist/atomic/{p-6a7ad933.entry.js.map → p-d4f88be6.entry.js.map} +0 -0
- /package/dist/atomic/{p-3365edaa.entry.js.map → p-d67f0c7d.entry.js.map} +0 -0
- /package/dist/atomic/{p-db75a4d7.entry.js.map → p-db9fc2f4.entry.js.map} +0 -0
- /package/dist/atomic/{p-714340f3.entry.js.map → p-e67e6f25.entry.js.map} +0 -0
- /package/dist/atomic/{p-9fe56c1e.entry.js.map → p-ef42977c.entry.js.map} +0 -0
- /package/dist/atomic/{p-5f5d39bb.entry.js.map → p-ef6daa3c.entry.js.map} +0 -0
- /package/dist/atomic/{p-b1a51882.entry.js.map → p-f37215a3.entry.js.map} +0 -0
- /package/dist/atomic/{p-9b4b8253.entry.js.map → p-f662801b.entry.js.map} +0 -0
- /package/dist/atomic/{p-cf09f5ce.entry.js.map → p-fa1c4917.entry.js.map} +0 -0
- /package/dist/atomic/{p-e1e7bc68.entry.js.map → p-fae8b0b6.entry.js.map} +0 -0
- /package/dist/atomic/{p-4b048630.entry.js.map → p-fcc01555.entry.js.map} +0 -0
- /package/dist/atomic/{p-a202e78b.entry.js.map → p-ff601596.entry.js.map} +0 -0
- /package/dist/types/decorators/{light-dom.d.ts → inject-styles-for-no-shadow-dom.d.ts} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as n,g as r,c as t,h as e,H as a}from"./p-dc3df5ce.js";import{g as i}from"./p-96a6f84f.js";import{n as o,d as l,q as s,u as c,r as d,o as w}from"./p-bc96b8f6.js";import{a as m}from"./p-c86021c8.js";import{l as h}from"./p-1580513b.js";import{I as p}from"./p-d6e6dbc3.js";import{u as b}from"./p-7dd93292.js";import"./p-f284897c.js";import"./p-0462f723.js";import"./p-c9074946.js";import"./p-05de7ca3.js";import"./p-f77160c6.js";const v=class{constructor(r){n(this,r);this.active=false;this.shouldHideSelf=true;this.scope=document.body;this.hiddenElements=[];this.active=false;this.source=undefined;this.container=undefined;this.shouldHideSelf=true;this.scope=document.body}hide(n){if(n.hasAttribute("aria-hidden")||n.hasAttribute("aria-live")||n.tagName.toLowerCase()==="atomic-aria-live"){return}n.setAttribute("aria-hidden","true");this.hiddenElements.push(n)}showAll(){let n;while(n=this.hiddenElements.pop()){n.removeAttribute("aria-hidden")}}hideSiblingsRecursively(n){const r=s(n);if(r===null){return}Array.from(r.children).forEach((r=>{if(r===n){return}if(r.assignedSlot&&o(this.host,r.assignedSlot)){return}this.hide(r)}));if(r!==this.scope){this.hideSiblingsRecursively(r)}}showSelf(){this.parentToHide.removeAttribute("aria-hidden");this.parentToHide.removeAttribute("tabindex")}hideSelf(){if(this.shouldHideSelf){this.parentToHide.setAttribute("aria-hidden","true");this.parentToHide.setAttribute("tabindex","-1")}}async onDeactivated(n){this.showAll();if(!n){await l();this.source?.focus()}this.hideSelf()}async onActivated(n){this.showSelf();if(!n){await l();i(this.host)?.focus()}this.hideSiblingsRecursively(this.host)}async activeChanged(n,r){const t=n===r;if(n){await this.onActivated(t)}else{await this.onDeactivated(t)}}onFocusChanged(n){const r=n=>o(this.host,n);const t=n=>o(this.scope,n);if(!n.target||!this.active){return}const e=c();if(e&&(r(e)||!t(e))){return}i(this.host)?.focus()}connectedCallback(){this.activeChanged(this.active,this.active)}disconnectedCallback(){this.showAll()}get parentToHide(){return this.container??this.host}get host(){return r(this)}static get watchers(){return{active:["activeChanged"]}}};const g='/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme;\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, var(--atomic-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\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 :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden="until-found"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .\\@container {\n container-type: inline-size;\n }\n .pointer-events-auto {\n pointer-events: auto;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .collapse {\n visibility: collapse;\n }\n .invisible {\n visibility: hidden;\n }\n .visible {\n visibility: visible;\n }\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .sticky {\n position: sticky;\n }\n .-top-2 {\n top: calc(0.25rem * -2);\n }\n .-top-4 {\n top: calc(0.25rem * -4);\n }\n .top-0 {\n top: calc(0.25rem * 0);\n }\n .top-1\\/2 {\n top: calc(1/2 * 100%);\n }\n .top-6 {\n top: calc(0.25rem * 6);\n }\n .top-\\[4px\\] {\n top: 4px;\n }\n .top-full {\n top: 100%;\n }\n .top-px {\n top: 1px;\n }\n .-right-2 {\n right: calc(0.25rem * -2);\n }\n .right-0 {\n right: calc(0.25rem * 0);\n }\n .right-2 {\n right: calc(0.25rem * 2);\n }\n .right-6 {\n right: calc(0.25rem * 6);\n }\n .right-12 {\n right: calc(0.25rem * 12);\n }\n .right-20 {\n right: calc(0.25rem * 20);\n }\n .right-px {\n right: 1px;\n }\n .bottom-0 {\n bottom: calc(0.25rem * 0);\n }\n .bottom-1 {\n bottom: calc(0.25rem * 1);\n }\n .bottom-2 {\n bottom: calc(0.25rem * 2);\n }\n .bottom-px {\n bottom: 1px;\n }\n .left-0 {\n left: calc(0.25rem * 0);\n }\n .left-1 {\n left: calc(0.25rem * 1);\n }\n .left-2 {\n left: calc(0.25rem * 2);\n }\n .left-\\[15px\\] {\n left: 15px;\n }\n .isolate {\n isolation: isolate;\n }\n .z-0 {\n z-index: 0;\n }\n .z-1 {\n z-index: 1;\n }\n .z-10 {\n z-index: 10;\n }\n .z-9998 {\n z-index: 9998;\n }\n .z-9999 {\n z-index: 9999;\n }\n .order-last {\n order: 9999;\n }\n .col-span-2 {\n grid-column: span 2 / span 2;\n }\n .container {\n width: 100%;\n }\n @media (width >= 1024px) {\n .container {\n max-width: 1024px;\n }\n }\n @media (width >= 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n @media (width >= 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n @media (width >= 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n @media (width >= 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n @media (width >= 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n .m-0 {\n margin: calc(0.25rem * 0);\n }\n .m-2 {\n margin: calc(0.25rem * 2);\n }\n .mx-0\\.5 {\n margin-inline: calc(0.25rem * 0.5);\n }\n .mx-1 {\n margin-inline: calc(0.25rem * 1);\n }\n .mx-6 {\n margin-inline: calc(0.25rem * 6);\n }\n .mx-16 {\n margin-inline: calc(0.25rem * 16);\n }\n .mx-auto {\n margin-inline: auto;\n }\n .my-2 {\n margin-block: calc(0.25rem * 2);\n }\n .my-3 {\n margin-block: calc(0.25rem * 3);\n }\n .my-4 {\n margin-block: calc(0.25rem * 4);\n }\n .my-6 {\n margin-block: calc(0.25rem * 6);\n }\n .my-auto {\n margin-block: auto;\n }\n .mt-0 {\n margin-top: calc(0.25rem * 0);\n }\n .mt-1 {\n margin-top: calc(0.25rem * 1);\n }\n .mt-1\\.5 {\n margin-top: calc(0.25rem * 1.5);\n }\n .mt-2 {\n margin-top: calc(0.25rem * 2);\n }\n .mt-2\\.5 {\n margin-top: calc(0.25rem * 2.5);\n }\n .mt-3 {\n margin-top: calc(0.25rem * 3);\n }\n .mt-4 {\n margin-top: calc(0.25rem * 4);\n }\n .mt-6 {\n margin-top: calc(0.25rem * 6);\n }\n .mt-7 {\n margin-top: calc(0.25rem * 7);\n }\n .mt-8 {\n margin-top: calc(0.25rem * 8);\n }\n .mt-10 {\n margin-top: calc(0.25rem * 10);\n }\n .mt-px {\n margin-top: 1px;\n }\n .mr-0 {\n margin-right: calc(0.25rem * 0);\n }\n .mr-0\\.5 {\n margin-right: calc(0.25rem * 0.5);\n }\n .mr-1 {\n margin-right: calc(0.25rem * 1);\n }\n .mr-1\\.5 {\n margin-right: calc(0.25rem * 1.5);\n }\n .mr-2 {\n margin-right: calc(0.25rem * 2);\n }\n .mr-3 {\n margin-right: calc(0.25rem * 3);\n }\n .mr-6 {\n margin-right: calc(0.25rem * 6);\n }\n .mb-0 {\n margin-bottom: calc(0.25rem * 0);\n }\n .mb-1 {\n margin-bottom: calc(0.25rem * 1);\n }\n .mb-2 {\n margin-bottom: calc(0.25rem * 2);\n }\n .mb-3 {\n margin-bottom: calc(0.25rem * 3);\n }\n .mb-4 {\n margin-bottom: calc(0.25rem * 4);\n }\n .mb-6 {\n margin-bottom: calc(0.25rem * 6);\n }\n .ml-0\\.5 {\n margin-left: calc(0.25rem * 0.5);\n }\n .ml-1 {\n margin-left: calc(0.25rem * 1);\n }\n .ml-2 {\n margin-left: calc(0.25rem * 2);\n }\n .ml-4 {\n margin-left: calc(0.25rem * 4);\n }\n .ml-6 {\n margin-left: calc(0.25rem * 6);\n }\n .ml-auto {\n margin-left: auto;\n }\n .box-border {\n box-sizing: border-box;\n }\n .box-content {\n box-sizing: content-box;\n }\n .line-clamp-1 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n }\n .line-clamp-2 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n }\n .line-clamp-3 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n }\n .line-clamp-4 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 4;\n }\n .line-clamp-none {\n overflow: visible;\n display: block;\n -webkit-box-orient: horizontal;\n -webkit-line-clamp: unset;\n }\n .block {\n display: block;\n }\n .contents {\n display: contents;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .table {\n display: table;\n }\n .aspect-square {\n aspect-ratio: 1 / 1;\n }\n .size-\\[27px\\] {\n width: 27px;\n height: 27px;\n }\n .h-1 {\n height: calc(0.25rem * 1);\n }\n .h-2 {\n height: calc(0.25rem * 2);\n }\n .h-2\\.5 {\n height: calc(0.25rem * 2.5);\n }\n .h-3 {\n height: calc(0.25rem * 3);\n }\n .h-4 {\n height: calc(0.25rem * 4);\n }\n .h-5 {\n height: calc(0.25rem * 5);\n }\n .h-5\\/6 {\n height: calc(5/6 * 100%);\n }\n .h-6 {\n height: calc(0.25rem * 6);\n }\n .h-7 {\n height: calc(0.25rem * 7);\n }\n .h-8 {\n height: calc(0.25rem * 8);\n }\n .h-9 {\n height: calc(0.25rem * 9);\n }\n .h-10 {\n height: calc(0.25rem * 10);\n }\n .h-12 {\n height: calc(0.25rem * 12);\n }\n .h-\\[2\\.6rem\\] {\n height: 2.6rem;\n }\n .h-\\[9px\\] {\n height: 9px;\n }\n .h-full {\n height: 100%;\n }\n .max-h-96 {\n max-height: calc(0.25rem * 96);\n }\n .min-h-10 {\n min-height: calc(0.25rem * 10);\n }\n .w-0\\.5 {\n width: calc(0.25rem * 0.5);\n }\n .w-1 {\n width: calc(0.25rem * 1);\n }\n .w-1\\/2 {\n width: calc(1/2 * 100%);\n }\n .w-2 {\n width: calc(0.25rem * 2);\n }\n .w-2\\.5 {\n width: calc(0.25rem * 2.5);\n }\n .w-3 {\n width: calc(0.25rem * 3);\n }\n .w-3\\.5 {\n width: calc(0.25rem * 3.5);\n }\n .w-3\\/5 {\n width: calc(3/5 * 100%);\n }\n .w-4 {\n width: calc(0.25rem * 4);\n }\n .w-5 {\n width: calc(0.25rem * 5);\n }\n .w-5\\/6 {\n width: calc(5/6 * 100%);\n }\n .w-6 {\n width: calc(0.25rem * 6);\n }\n .w-7 {\n width: calc(0.25rem * 7);\n }\n .w-8 {\n width: calc(0.25rem * 8);\n }\n .w-9 {\n width: calc(0.25rem * 9);\n }\n .w-10 {\n width: calc(0.25rem * 10);\n }\n .w-12 {\n width: calc(0.25rem * 12);\n }\n .w-20 {\n width: calc(0.25rem * 20);\n }\n .w-28 {\n width: calc(0.25rem * 28);\n }\n .w-32 {\n width: calc(0.25rem * 32);\n }\n .w-44 {\n width: calc(0.25rem * 44);\n }\n .w-48 {\n width: calc(0.25rem * 48);\n }\n .w-60 {\n width: calc(0.25rem * 60);\n }\n .w-72 {\n width: calc(0.25rem * 72);\n }\n .w-100 {\n width: calc(0.25rem * 100);\n }\n .w-\\[2\\.6rem\\] {\n width: 2.6rem;\n }\n .w-auto {\n width: auto;\n }\n .w-fit {\n width: fit-content;\n }\n .w-full {\n width: 100%;\n }\n .w-max {\n width: max-content;\n }\n .max-w-4\\/5 {\n max-width: calc(4/5 * 100%);\n }\n .max-w-60 {\n max-width: calc(0.25rem * 60);\n }\n .max-w-\\[30ch\\] {\n max-width: 30ch;\n }\n .max-w-full {\n max-width: 100%;\n }\n .max-w-lg {\n max-width: 32rem;\n }\n .max-w-max {\n max-width: max-content;\n }\n .min-w-0 {\n min-width: calc(0.25rem * 0);\n }\n .min-w-10 {\n min-width: calc(0.25rem * 10);\n }\n .min-w-20 {\n min-width: calc(0.25rem * 20);\n }\n .min-w-24 {\n min-width: calc(0.25rem * 24);\n }\n .min-w-full {\n min-width: 100%;\n }\n .flex-1 {\n flex: 1;\n }\n .flex-none {\n flex: none;\n }\n .flex-shrink {\n flex-shrink: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .flex-grow {\n flex-grow: 1;\n }\n .grow {\n flex-grow: 1;\n }\n .basis-1\\/2 {\n flex-basis: calc(1/2 * 100%);\n }\n .basis-8 {\n flex-basis: calc(0.25rem * 8);\n }\n .border-collapse {\n border-collapse: collapse;\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-1\\/2 {\n --tw-translate-x: calc(1/2 * 100%);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .scale-75 {\n --tw-scale-x: 75%;\n --tw-scale-y: 75%;\n --tw-scale-z: 75%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .scale-100 {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .rotate-180 {\n rotate: 180deg;\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n .cursor-\\[inherit\\] {\n cursor: inherit;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .resize-none {\n resize: none;\n }\n .list-outside {\n list-style-position: outside;\n }\n .list-decimal {\n list-style-type: decimal;\n }\n .list-disc {\n list-style-type: disc;\n }\n .list-none {\n list-style-type: none;\n }\n .appearance-none {\n appearance: none;\n }\n .grid-cols-\\[min-content_1fr\\] {\n grid-template-columns: min-content 1fr;\n }\n .grid-cols-\\[min-content_auto\\] {\n grid-template-columns: min-content auto;\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-row {\n flex-direction: row;\n }\n .flex-nowrap {\n flex-wrap: nowrap;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .place-items-center {\n place-items: center;\n }\n .content-center {\n align-content: center;\n }\n .items-baseline {\n align-items: baseline;\n }\n .items-center {\n align-items: center;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .gap-0\\.5 {\n gap: calc(0.25rem * 0.5);\n }\n .gap-1 {\n gap: calc(0.25rem * 1);\n }\n .gap-2 {\n gap: calc(0.25rem * 2);\n }\n .gap-3 {\n gap: calc(0.25rem * 3);\n }\n .gap-4 {\n gap: calc(0.25rem * 4);\n }\n .gap-8 {\n gap: calc(0.25rem * 8);\n }\n .gap-x-1\\.5 {\n column-gap: calc(0.25rem * 1.5);\n }\n .gap-x-2 {\n column-gap: calc(0.25rem * 2);\n }\n .gap-x-4 {\n column-gap: calc(0.25rem * 4);\n }\n :where(.space-x-1\\.5 > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(0.25rem * 1.5) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(0.25rem * 1.5) * calc(1 - var(--tw-space-x-reverse)));\n }\n .gap-y-0\\.5 {\n row-gap: calc(0.25rem * 0.5);\n }\n :where(.divide-y > :not(:last-child)) {\n --tw-divide-y-reverse: 0;\n border-bottom-style: var(--tw-border-style);\n border-top-style: var(--tw-border-style);\n border-top-width: calc(1px * var(--tw-divide-y-reverse));\n border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n }\n :where(.divide-neutral > :not(:last-child)) {\n border-color: var(--atomic-neutral);\n }\n .self-center {\n align-self: center;\n }\n .self-start {\n align-self: flex-start;\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .overflow-auto {\n overflow: auto;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-x-auto {\n overflow-x: auto;\n }\n .overflow-x-clip {\n overflow-x: clip;\n }\n .overflow-x-scroll {\n overflow-x: scroll;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .overflow-y-visible {\n overflow-y: visible;\n }\n .scroll-smooth {\n scroll-behavior: smooth;\n }\n .rounded {\n border-radius: var(--atomic-border-radius);\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--atomic-border-radius-lg);\n }\n .rounded-md {\n border-radius: var(--atomic-border-radius-md);\n }\n .rounded-none {\n border-radius: 0;\n }\n .rounded-sm {\n border-radius: var(--atomic-border-radius);\n }\n .rounded-xl {\n border-radius: var(--atomic-border-radius-xl);\n }\n .rounded-tl-none {\n border-top-left-radius: 0;\n }\n .rounded-r-none {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n .border-neutral {\n border-color: var(--atomic-neutral);\n }\n .border-neutral-dark {\n border-color: var(--atomic-neutral-dark);\n }\n .border-neutral-dim {\n border-color: var(--atomic-neutral-dim);\n }\n .border-primary {\n border-color: var(--atomic-primary);\n }\n .border-primary-light {\n border-color: var(--atomic-primary-light);\n }\n .border-t-neutral {\n border-top-color: var(--atomic-neutral);\n }\n .border-b-neutral {\n border-bottom-color: var(--atomic-neutral);\n }\n .border-b-neutral-dim {\n border-bottom-color: var(--atomic-neutral-dim);\n }\n .border-l-neutral {\n border-left-color: var(--atomic-neutral);\n }\n .border-l-neutral-dim {\n border-left-color: var(--atomic-neutral-dim);\n }\n .bg-\\[\\#F1F2FF\\] {\n background-color: #F1F2FF;\n }\n .bg-background {\n background-color: var(--atomic-background);\n }\n .bg-error {\n background-color: var(--atomic-error);\n }\n .bg-neutral {\n background-color: var(--atomic-neutral);\n }\n .bg-neutral-dark {\n background-color: var(--atomic-neutral-dark);\n }\n .bg-neutral-light {\n background-color: var(--atomic-neutral-light);\n }\n .bg-primary {\n background-color: var(--atomic-primary);\n }\n .bg-primary-background {\n background-color: var(--atomic-primary-background);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: #fff;\n }\n .bg-linear-to-l {\n --tw-gradient-position: to left;\n }\n @supports (background-image: linear-gradient(in lab, red, red)) {\n .bg-linear-to-l {\n --tw-gradient-position: to left in oklab;\n }\n }\n .bg-linear-to-l {\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .bg-linear-to-r {\n --tw-gradient-position: to right;\n }\n @supports (background-image: linear-gradient(in lab, red, red)) {\n .bg-linear-to-r {\n --tw-gradient-position: to right in oklab;\n }\n }\n .bg-linear-to-r {\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .from-background\\/60 {\n --tw-gradient-from: color-mix(in srgb, #ffffff 60%, transparent);\n }\n @supports (color: color-mix(in lab, red, red)) {\n .from-background\\/60 {\n --tw-gradient-from: color-mix(in oklab, var(--atomic-background) 60%, transparent);\n }\n }\n .from-background\\/60 {\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .fill-current {\n fill: currentcolor;\n }\n .stroke-\\[1\\.25\\] {\n stroke-width: 1.25;\n }\n .p-0 {\n padding: calc(0.25rem * 0);\n }\n .p-1 {\n padding: calc(0.25rem * 1);\n }\n .p-2 {\n padding: calc(0.25rem * 2);\n }\n .p-2\\.5 {\n padding: calc(0.25rem * 2.5);\n }\n .p-3 {\n padding: calc(0.25rem * 3);\n }\n .p-3\\.5 {\n padding: calc(0.25rem * 3.5);\n }\n .p-4 {\n padding: calc(0.25rem * 4);\n }\n .p-6 {\n padding: calc(0.25rem * 6);\n }\n .p-7 {\n padding: calc(0.25rem * 7);\n }\n .p-8 {\n padding: calc(0.25rem * 8);\n }\n .px-1 {\n padding-inline: calc(0.25rem * 1);\n }\n .px-2 {\n padding-inline: calc(0.25rem * 2);\n }\n .px-2\\.5 {\n padding-inline: calc(0.25rem * 2.5);\n }\n .px-3 {\n padding-inline: calc(0.25rem * 3);\n }\n .px-4 {\n padding-inline: calc(0.25rem * 4);\n }\n .px-6 {\n padding-inline: calc(0.25rem * 6);\n }\n .px-9 {\n padding-inline: calc(0.25rem * 9);\n }\n .py-0\\.5 {\n padding-block: calc(0.25rem * 0.5);\n }\n .py-1 {\n padding-block: calc(0.25rem * 1);\n }\n .py-1\\.5 {\n padding-block: calc(0.25rem * 1.5);\n }\n .py-2 {\n padding-block: calc(0.25rem * 2);\n }\n .py-2\\.5 {\n padding-block: calc(0.25rem * 2.5);\n }\n .py-3 {\n padding-block: calc(0.25rem * 3);\n }\n .py-3\\.5 {\n padding-block: calc(0.25rem * 3.5);\n }\n .py-4 {\n padding-block: calc(0.25rem * 4);\n }\n .py-5 {\n padding-block: calc(0.25rem * 5);\n }\n .pt-0\\.5 {\n padding-top: calc(0.25rem * 0.5);\n }\n .pt-8 {\n padding-top: calc(0.25rem * 8);\n }\n .pr-2 {\n padding-right: calc(0.25rem * 2);\n }\n .pr-6 {\n padding-right: calc(0.25rem * 6);\n }\n .pr-24 {\n padding-right: calc(0.25rem * 24);\n }\n .pb-1 {\n padding-bottom: calc(0.25rem * 1);\n }\n .pb-3 {\n padding-bottom: calc(0.25rem * 3);\n }\n .pb-4 {\n padding-bottom: calc(0.25rem * 4);\n }\n .pb-6 {\n padding-bottom: calc(0.25rem * 6);\n }\n .pl-0 {\n padding-left: calc(0.25rem * 0);\n }\n .pl-1 {\n padding-left: calc(0.25rem * 1);\n }\n .pl-3 {\n padding-left: calc(0.25rem * 3);\n }\n .pl-7 {\n padding-left: calc(0.25rem * 7);\n }\n .pl-9 {\n padding-left: calc(0.25rem * 9);\n }\n .pl-10 {\n padding-left: calc(0.25rem * 10);\n }\n .text-center {\n text-align: center;\n }\n .text-left {\n text-align: left;\n }\n .align-baseline {\n vertical-align: baseline;\n }\n .align-bottom {\n vertical-align: bottom;\n }\n .align-middle {\n vertical-align: middle;\n }\n .font-sans {\n font-family: var(--atomic-font-family);\n }\n .text-2xl {\n font-size: var(--atomic-text-2xl);\n line-height: var(--tw-leading, calc(2 / 1.5));\n }\n .text-base {\n font-size: var(--atomic-text-base);\n line-height: var(--tw-leading, calc(1.5 / 1));\n }\n .text-lg {\n font-size: var(--atomic-text-lg);\n line-height: var(--tw-leading, calc(1.75 / 1.125));\n }\n .text-sm {\n font-size: var(--atomic-text-sm);\n line-height: var(--tw-leading, calc(1.25 / 0.875));\n }\n .text-xl {\n font-size: var(--atomic-text-xl);\n line-height: var(--tw-leading, calc(1.75 / 1.25));\n }\n .text-xs {\n font-size: 0.75rem;\n line-height: var(--tw-leading, calc(1 / 0.75));\n }\n .text-xs\\/\\[1rem\\] {\n font-size: 0.75rem;\n line-height: 1rem;\n }\n .leading-4 {\n --tw-leading: calc(0.25rem * 4);\n line-height: calc(0.25rem * 4);\n }\n .leading-5 {\n --tw-leading: calc(0.25rem * 5);\n line-height: calc(0.25rem * 5);\n }\n .leading-6 {\n --tw-leading: calc(0.25rem * 6);\n line-height: calc(0.25rem * 6);\n }\n .leading-8 {\n --tw-leading: calc(0.25rem * 8);\n line-height: calc(0.25rem * 8);\n }\n .leading-10 {\n --tw-leading: calc(0.25rem * 10);\n line-height: calc(0.25rem * 10);\n }\n .leading-\\[calc\\(1\\/\\.75\\)\\] {\n --tw-leading: calc(1 / .75);\n line-height: calc(1 / .75);\n }\n .font-bold {\n --tw-font-weight: var(--atomic-font-bold);\n font-weight: var(--atomic-font-bold);\n }\n .font-light {\n --tw-font-weight: 300;\n font-weight: 300;\n }\n .font-medium {\n --tw-font-weight: 500;\n font-weight: 500;\n }\n .font-normal {\n --tw-font-weight: var(--atomic-font-normal);\n font-weight: var(--atomic-font-normal);\n }\n .font-semibold {\n --tw-font-weight: 600;\n font-weight: 600;\n }\n .break-words {\n overflow-wrap: break-word;\n }\n .break-all {\n word-break: break-all;\n }\n .break-keep {\n word-break: keep-all;\n }\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n .whitespace-normal {\n white-space: normal;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .whitespace-pre-wrap {\n white-space: pre-wrap;\n }\n .text-\\[\\#54698D\\] {\n color: #54698D;\n }\n .text-\\[inherit\\] {\n color: inherit;\n }\n .text-black {\n color: #000;\n }\n .text-error {\n color: var(--atomic-error);\n }\n .text-inline-code {\n color: var(--atomic-inline-code);\n }\n .text-neutral {\n color: var(--atomic-neutral);\n }\n .text-neutral-dark {\n color: var(--atomic-neutral-dark);\n }\n .text-on-background {\n color: var(--atomic-on-background);\n }\n .text-on-primary {\n color: var(--atomic-on-primary);\n }\n .text-primary {\n color: var(--atomic-primary);\n }\n .text-primary-light {\n color: var(--atomic-primary-light);\n }\n .text-success {\n color: var(--atomic-success);\n }\n .text-transparent {\n color: transparent;\n }\n .capitalize {\n text-transform: capitalize;\n }\n .lowercase {\n text-transform: lowercase;\n }\n .italic {\n font-style: italic;\n }\n .line-through {\n text-decoration-line: line-through;\n }\n .placeholder-neutral-dark::placeholder {\n color: var(--atomic-neutral-dark);\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-50 {\n opacity: 50%;\n }\n .opacity-80 {\n opacity: 80%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-inner-primary {\n --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--atomic-primary));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-lg {\n --tw-shadow: 0px 2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-t-lg {\n --tw-shadow: 0px -2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-1 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-3 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-primary {\n --tw-ring-color: var(--atomic-primary);\n }\n .ring-primary-light {\n --tw-ring-color: var(--atomic-primary-light);\n }\n .ring-ring-primary {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .outline-error {\n outline-color: var(--atomic-error);\n }\n .outline-neutral {\n outline-color: var(--atomic-neutral);\n }\n .outline-primary {\n outline-color: var(--atomic-primary);\n }\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .invert {\n --tw-invert: invert(100%);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n }\n .transition-\\[visibility\\] {\n transition-property: visibility;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .ease-in-out {\n --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n }\n @media (hover: hover) {\n .group-hover\\:visible:is(:where(.group):hover *) {\n visibility: visible;\n }\n }\n @media (hover: hover) {\n .group-hover\\:text-error:is(:where(.group):hover *) {\n color: var(--atomic-error);\n }\n }\n @media (hover: hover) {\n .group-hover\\:text-primary:is(:where(.group):hover *) {\n color: var(--atomic-primary);\n }\n }\n @media (hover: hover) {\n .group-hover\\:text-primary-light:is(:where(.group):hover *) {\n color: var(--atomic-primary-light);\n }\n }\n .group-focus\\:text-primary:is(:where(.group):focus *) {\n color: var(--atomic-primary);\n }\n .group-focus\\:text-primary-light:is(:where(.group):focus *) {\n color: var(--atomic-primary-light);\n }\n .group-focus-visible\\:text-error:is(:where(.group):focus-visible *) {\n color: var(--atomic-error);\n }\n .group-focus-visible\\:text-primary:is(:where(.group):focus-visible *) {\n color: var(--atomic-primary);\n }\n @media (hover: hover) {\n .peer-hover\\:text-error:is(:where(.peer):hover ~ *) {\n color: var(--atomic-error);\n }\n }\n .after\\:absolute::after {\n content: var(--tw-content);\n position: absolute;\n }\n .after\\:-bottom-0\\.5::after {\n content: var(--tw-content);\n bottom: calc(0.25rem * -0.5);\n }\n .after\\:block::after {\n content: var(--tw-content);\n display: block;\n }\n .after\\:h-1::after {\n content: var(--tw-content);\n height: calc(0.25rem * 1);\n }\n .after\\:w-full::after {\n content: var(--tw-content);\n width: 100%;\n }\n .after\\:rounded::after {\n content: var(--tw-content);\n border-radius: var(--atomic-border-radius);\n }\n .after\\:bg-primary::after {\n content: var(--tw-content);\n background-color: var(--atomic-primary);\n }\n .focus-within\\:border-disabled:focus-within {\n border-color: var(--atomic-disabled);\n }\n .focus-within\\:border-primary:focus-within {\n border-color: var(--atomic-primary);\n }\n .focus-within\\:ring-3:focus-within {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .focus-within\\:ring-neutral:focus-within {\n --tw-ring-color: var(--atomic-neutral);\n }\n .focus-within\\:ring-ring-primary:focus-within {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n @media (hover: hover) {\n .hover\\:border:hover {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n }\n @media (hover: hover) {\n .hover\\:border-error:hover {\n border-color: var(--atomic-error);\n }\n }\n @media (hover: hover) {\n .hover\\:border-primary-light:hover {\n border-color: var(--atomic-primary-light);\n }\n }\n @media (hover: hover) {\n .hover\\:bg-error:hover {\n background-color: var(--atomic-error);\n }\n }\n @media (hover: hover) {\n .hover\\:bg-neutral-light:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n @media (hover: hover) {\n .hover\\:bg-primary-light:hover {\n background-color: var(--atomic-primary-light);\n }\n }\n @media (hover: hover) {\n .hover\\:bg-transparent:hover {\n background-color: transparent;\n }\n }\n @media (hover: hover) {\n .hover\\:fill-white:hover {\n fill: #fff;\n }\n }\n @media (hover: hover) {\n .hover\\:text-primary-light:hover {\n color: var(--atomic-primary-light);\n }\n }\n @media (hover: hover) {\n .hover\\:underline:hover {\n text-decoration-line: underline;\n }\n }\n @media (hover: hover) {\n .hover\\:opacity-100:hover {\n opacity: 100%;\n }\n }\n @media (hover: hover) {\n .hover\\:shadow-sm:hover {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:opacity-100:focus {\n opacity: 100%;\n }\n .focus\\:outline-hidden:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n @media (forced-colors: active) {\n .focus\\:outline-hidden:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n }\n .focus-visible\\:border:focus-visible {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .focus-visible\\:border-error:focus-visible {\n border-color: var(--atomic-error);\n }\n .focus-visible\\:border-primary:focus-visible {\n border-color: var(--atomic-primary);\n }\n .focus-visible\\:border-primary-light:focus-visible {\n border-color: var(--atomic-primary-light);\n }\n .focus-visible\\:bg-error:focus-visible {\n background-color: var(--atomic-error);\n }\n .focus-visible\\:bg-neutral-light:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .focus-visible\\:bg-primary-light:focus-visible {\n background-color: var(--atomic-primary-light);\n }\n .focus-visible\\:text-primary-light:focus-visible {\n color: var(--atomic-primary-light);\n }\n .focus-visible\\:underline:focus-visible {\n text-decoration-line: underline;\n }\n .focus-visible\\:ring-2:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .focus-visible\\:outline-none:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n @media (width >= 40rem) {\n .sm\\:px-6 {\n padding-inline: calc(0.25rem * 6);\n }\n }\n .\\[part\\=\\"breadcrumb-button\\"\\]\\:visible:is(part="breadcrumb-button") {\n visibility: visible;\n }\n}\n@layer theme, base, components, utilities;\n@layer components {\n .input-primary {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n }\n @media (hover: hover) {\n .input-primary:hover {\n border-color: var(--atomic-primary-light);\n }\n }\n .input-primary:focus-visible {\n border-color: var(--atomic-primary);\n }\n .input-primary:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .input-primary:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .input-primary:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-radio {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .btn-radio::before {\n content: var(--tw-content);\n --tw-content: attr(value);\n content: var(--tw-content);\n }\n .btn-primary {\n border-radius: var(--atomic-border-radius);\n background-color: var(--atomic-primary);\n color: var(--atomic-on-primary);\n }\n @media (hover: hover) {\n .btn-primary:hover {\n background-color: var(--atomic-primary-light);\n }\n }\n .btn-primary:focus-visible {\n background-color: var(--atomic-primary-light);\n }\n .btn-primary:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-primary:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-primary:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-primary:disabled {\n cursor: not-allowed;\n }\n .btn-primary:disabled {\n background-color: var(--atomic-disabled);\n }\n .btn-outline-primary {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-primary);\n }\n @media (hover: hover) {\n .btn-outline-primary:hover {\n border-color: var(--atomic-primary-light);\n }\n }\n @media (hover: hover) {\n .btn-outline-primary:hover {\n color: var(--atomic-primary-light);\n }\n }\n .btn-outline-primary:focus-visible {\n border-color: var(--atomic-primary);\n }\n .btn-outline-primary:focus-visible {\n color: var(--atomic-primary);\n }\n .btn-outline-primary:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-outline-primary:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-outline-primary:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-primary:disabled {\n cursor: not-allowed;\n }\n .btn-outline-primary:disabled {\n border-color: var(--atomic-neutral);\n }\n .btn-outline-primary:disabled {\n color: var(--atomic-neutral);\n }\n .btn-text-primary {\n border-radius: var(--atomic-border-radius);\n background-color: var(--atomic-background);\n color: var(--atomic-primary);\n }\n @media (hover: hover) {\n .btn-text-primary:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n .btn-text-primary:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .btn-text-primary:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-neutral {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-outline-neutral:hover {\n border-color: var(--atomic-primary);\n }\n }\n @media (hover: hover) {\n .btn-outline-neutral:hover {\n color: var(--atomic-primary);\n }\n }\n .btn-outline-neutral:focus-visible {\n border-color: var(--atomic-primary);\n }\n .btn-outline-neutral:focus-visible {\n color: var(--atomic-primary);\n }\n .btn-outline-neutral:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-outline-neutral:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-outline-neutral:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-neutral:disabled {\n cursor: not-allowed;\n }\n .btn-outline-neutral:disabled {\n border-color: var(--atomic-neutral);\n }\n .btn-outline-neutral:disabled {\n color: var(--atomic-on-background);\n }\n .btn-outline-neutral:disabled {\n opacity: 50%;\n }\n .btn-outline-bg-neutral {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-outline-bg-neutral:hover {\n border-color: var(--atomic-primary);\n }\n }\n @media (hover: hover) {\n .btn-outline-bg-neutral:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n @media (hover: hover) {\n .btn-outline-bg-neutral:hover {\n color: var(--atomic-primary);\n }\n }\n .btn-outline-bg-neutral:focus-visible {\n border-color: var(--atomic-primary);\n }\n .btn-outline-bg-neutral:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .btn-outline-bg-neutral:focus-visible {\n color: var(--atomic-primary);\n }\n .btn-outline-bg-neutral:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-outline-bg-neutral:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-outline-bg-neutral:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-bg-neutral:disabled {\n cursor: not-allowed;\n }\n .btn-outline-bg-neutral:disabled {\n border-color: var(--atomic-neutral);\n }\n .btn-outline-bg-neutral:disabled {\n color: var(--atomic-on-background);\n }\n .btn-outline-bg-neutral:disabled {\n opacity: 50%;\n }\n .btn-outline-bg-error {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-outline-bg-error:hover {\n border-color: var(--atomic-primary);\n }\n }\n @media (hover: hover) {\n .btn-outline-bg-error:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n @media (hover: hover) {\n .btn-outline-bg-error:hover {\n color: var(--atomic-primary);\n }\n }\n .btn-outline-bg-error:focus-visible {\n border-color: var(--atomic-primary);\n }\n .btn-outline-bg-error:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .btn-outline-bg-error:focus-visible {\n color: var(--atomic-primary);\n }\n .btn-outline-bg-error:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-outline-bg-error:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-outline-bg-error:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-bg-error:disabled {\n cursor: not-allowed;\n }\n .btn-outline-bg-error:disabled {\n border-color: var(--atomic-neutral);\n }\n .btn-outline-bg-error:disabled {\n color: var(--atomic-on-background);\n }\n .btn-outline-bg-error:disabled {\n opacity: 50%;\n }\n .btn-outline-error {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-outline-error:hover {\n border-color: var(--atomic-error);\n }\n }\n @media (hover: hover) {\n .btn-outline-error:hover {\n color: var(--atomic-error);\n }\n }\n .btn-outline-error:focus-visible {\n border-color: var(--atomic-error);\n }\n .btn-outline-error:focus-visible {\n color: var(--atomic-error);\n }\n .btn-outline-error:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-outline-error:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-outline-error:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-error:disabled {\n cursor: not-allowed;\n }\n .btn-outline-error:disabled {\n border-color: var(--atomic-neutral);\n }\n .btn-outline-error:disabled {\n color: var(--atomic-on-background);\n }\n .btn-outline-error:disabled {\n opacity: 50%;\n }\n .btn-text-neutral {\n border-radius: var(--atomic-border-radius);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-text-neutral:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n @media (hover: hover) {\n .btn-text-neutral:hover {\n color: var(--atomic-primary);\n }\n }\n .btn-text-neutral:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .btn-text-neutral:focus-visible {\n color: var(--atomic-primary);\n }\n .btn-text-neutral:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-text-transparent {\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-text-transparent:hover {\n color: var(--atomic-primary-light);\n }\n }\n .btn-text-transparent:focus-visible {\n color: var(--atomic-primary-light);\n }\n .btn-square-neutral {\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-square-neutral:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n .btn-square-neutral:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .btn-square-neutral:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-page {\n display: grid;\n height: calc(0.25rem * 10);\n width: calc(0.25rem * 10);\n place-items: center;\n border-style: var(--tw-border-style);\n border-width: 0px;\n font-size: var(--atomic-text-lg);\n line-height: var(--tw-leading, calc(1.75 / 1.125));\n }\n @media (hover: hover) {\n .btn-page:hover {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n }\n .btn-page:focus-visible {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .btn-page.selected {\n border-style: var(--tw-border-style);\n border-width: 2px;\n border-color: var(--atomic-primary);\n --tw-font-weight: var(--atomic-font-bold);\n font-weight: var(--atomic-font-bold);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n border-color: oklch(0.928 0.006 264.531);\n }\n :host {\n display: block;\n }\n :host, button, input, select {\n font-family: var(--atomic-font-family);\n font-size: var(--atomic-text-base);\n line-height: var(--tw-leading, calc(1.5 / 1));\n --tw-font-weight: var(--atomic-font-normal);\n font-weight: var(--atomic-font-normal);\n }\n button {\n cursor: pointer;\n }\n :host(.atomic-hidden) {\n display: none;\n }\n .ripple {\n position: absolute;\n pointer-events: none;\n transform: scale(0);\n border-radius: 50%;\n animation: ripple var(--animation-duration) linear;\n }\n .ripple-relative {\n position: relative;\n }\n .ripple-parent {\n overflow: hidden;\n }\n @keyframes ripple {\n to {\n transform: scale(4);\n opacity: 0;\n }\n }\n}\n@keyframes scaleUp {\n 0% {\n transform: scale(0.7) translateY(150vh);\n opacity: 0.7;\n }\n 100% {\n transform: scale(1) translateY(0px);\n opacity: 1;\n }\n}\n@keyframes slideDown {\n 0% {\n transform: translateY(0px);\n opacity: 1;\n }\n 100% {\n transform: translateY(150vh);\n opacity: 0.7;\n }\n}\n[part=\'backdrop\'] {\n pointer-events: none;\n}\narticle.animate-open {\n animation: var(--animate-scale-up-modal, scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards);\n}\narticle.animate-close {\n animation: var(--animate-slide-down-modal, slideDown 0.5s linear forwards);\n}\natomic-focus-trap {\n display: contents;\n}\n[part=\'container\'] {\n overflow: hidden;\n grid-area: modal;\n}\n.animate-scaleUpModalIPX[part=\'container\'] {\n border-radius: var(--atomic-border-radius);\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:host(.open) [part=\'backdrop\'] {\n pointer-events: auto;\n}\n:host(.open.dialog) [part=\'backdrop\'] {\n background-color: rgba(40, 40, 40, 0.8);\n}\n:host(.dialog) [part=\'backdrop\'] {\n display: grid;\n padding: calc(0.25rem * 6);\n transition: background-color 500ms ease-in-out;\n grid-template-areas: \'. . .\'\n \'. modal .\'\n \'. . .\';\n grid-template-columns: 1fr min(30rem, 100%) 1fr;\n grid-template-rows: 1fr auto 3fr;\n}\n:host(.dialog) [part=\'container\'] {\n border-radius: var(--atomic-border-radius);\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:host(.dialog) [part=\'header-wrapper\'] {\n padding-inline: calc(0.25rem * 6);\n padding-block: calc(0.25rem * 4);\n}\n:host(.dialog) [part=\'header\'] {\n --tw-font-weight: var(--atomic-font-bold);\n font-weight: var(--atomic-font-bold);\n}\n:host(.dialog) [part=\'body-wrapper\'] {\n padding: calc(0.25rem * 6);\n}\n:host(.dialog) [part=\'footer-wrapper\'] {\n background-color: var(--atomic-neutral-light);\n padding: 1rem 1.125rem;\n}\n:host(.fullscreen) [part=\'container\'] {\n position: absolute;\n inset: calc(0.25rem * 0);\n}\n:host(.fullscreen) [part=\'header-wrapper\'] {\n padding: calc(0.25rem * 6);\n}\n:host(.fullscreen) [part=\'body-wrapper\'] {\n padding-inline: calc(0.25rem * 6);\n padding-top: calc(0.25rem * 8);\n padding-bottom: calc(0.25rem * 5);\n}\n:host(.fullscreen) [part=\'footer-wrapper\'] {\n padding-inline: calc(0.25rem * 6);\n padding-block: calc(0.25rem * 4);\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@property --tw-translate-x {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-scale-x {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-rotate-x {\n syntax: "*";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: "*";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: "*";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: "*";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: "*";\n inherits: false;\n}\n@property --tw-space-x-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-divide-y-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-gradient-position {\n syntax: "*";\n inherits: false;\n}\n@property --tw-gradient-from {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-via {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-to {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-stops {\n syntax: "*";\n inherits: false;\n}\n@property --tw-gradient-via-stops {\n syntax: "*";\n inherits: false;\n}\n@property --tw-gradient-from-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-leading {\n syntax: "*";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: "*";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: "<length>";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: "*";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-blur {\n syntax: "*";\n inherits: false;\n}\n@property --tw-brightness {\n syntax: "*";\n inherits: false;\n}\n@property --tw-contrast {\n syntax: "*";\n inherits: false;\n}\n@property --tw-grayscale {\n syntax: "*";\n inherits: false;\n}\n@property --tw-hue-rotate {\n syntax: "*";\n inherits: false;\n}\n@property --tw-invert {\n syntax: "*";\n inherits: false;\n}\n@property --tw-opacity {\n syntax: "*";\n inherits: false;\n}\n@property --tw-saturate {\n syntax: "*";\n inherits: false;\n}\n@property --tw-sepia {\n syntax: "*";\n inherits: false;\n}\n@property --tw-drop-shadow {\n syntax: "*";\n inherits: false;\n}\n@property --tw-drop-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n syntax: "*";\n inherits: false;\n}\n@property --tw-duration {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ease {\n syntax: "*";\n inherits: false;\n}\n@property --tw-content {\n syntax: "*";\n initial-value: "";\n inherits: false;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-x-reverse: 0;\n --tw-divide-y-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-content: "";\n }\n }\n}\n';const u=g;var f=undefined&&undefined.__decorate||function(n,r,t,e){var a=arguments.length,i=a<3?r:e===null?e=Object.getOwnPropertyDescriptor(r,t):e,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")i=Reflect.decorate(n,r,t,e);else for(var l=n.length-1;l>=0;l--)if(o=n[l])i=(a<3?o(i):a>3?o(r,t,i):o(r,t))||i;return a>3&&i&&Object.defineProperty(r,t,i),i};const y=class{constructor(r){n(this,r);this.animationEnded=t(this,"animationEnded",7);this.fullscreen=false;this.isOpen=false;this.close=()=>this.isOpen=false;this.boundary="page";this.wasEverOpened=false;this.headerId=d("atomic-modal-header-");this.currentWatchToggleOpenExecution=0;this.updateBreakpoints=w((()=>b(this.host)));this.error=undefined;this.fullscreen=false;this.source=undefined;this.container=undefined;this.isOpen=false;this.close=()=>this.isOpen=false;this.scope=undefined;this.boundary="page"}async watchToggleOpen(n){const r=++this.currentWatchToggleOpenExecution;const t="atomic-modal-opened";if(n){this.wasEverOpened=true;document.body.classList.add(t);this.bindings.interfaceElement.classList.add(t);await this.waitForAnimationEnded();if(r!==this.currentWatchToggleOpenExecution){return}this.focusTrap.active=true}else{document.body.classList.remove(t);this.bindings.interfaceElement.classList.remove(t);if(m()){await this.waitForAnimationEnded()}if(r!==this.currentWatchToggleOpenExecution){return}this.focusTrap.active=false}}handleCloseOnEscape(n){if(n.key?.toLowerCase()==="escape"){this.close()}}waitForAnimationEnded(){return new Promise((n=>h(this.animatableContainer,"animationend",n)))}getClasses(){const n=[];if(this.isOpen){n.push("open")}if(this.fullscreen){n.push("fullscreen")}else{n.push("dialog")}return n}onWindowTouchMove(n){this.isOpen&&n.preventDefault()}componentDidLoad(){this.watchToggleOpen(this.isOpen)}render(){this.updateBreakpoints();const n=()=>e("article",{key:"84b1589d6e0beb6d86573aa557001e0be829cb97",part:"container",class:`bg-background text-on-background flex flex-col justify-between ${this.isOpen?"animate-open":"animate-close"} ${this.wasEverOpened?"":"invisible"}`,onAnimationEnd:()=>this.animationEnded.emit(),ref:n=>this.animatableContainer=n},e("header",{key:"5d0b396ae2567ad583201ba607e6ec4dd97ed70d",part:"header-wrapper",class:"flex flex-col items-center"},e("div",{key:"717c0bf7530c637da4a0d8a1d97d0daa99e3c310",part:"header",class:"flex w-full max-w-lg justify-between text-xl",id:this.headerId},e("slot",{key:"b5fa5ae11d94df0175110aadde4d5cf4b248be42",name:"header"}))),e("hr",{key:"bc8aaad58a678cccbbfa724b11b15a8ddb2a44ae",part:"header-ruler",class:"border-neutral border-t"}),e("div",{key:"e0254001ad2ca62a14b8429cc01a624fecb066ae",part:"body-wrapper",class:"flex w-full grow flex-col items-center overflow-auto"},e("div",{key:"80aee0f1da45cfe5a13b7e1b89739bda904f91e4",part:"body",class:"w-full max-w-lg",ref:n=>n?.addEventListener("touchmove",(n=>this.isOpen&&n.stopPropagation()),{passive:false})},e("slot",{key:"81a0c4318a1a0ac736d4e6d823cbd49c4349faaa",name:"body"}))),e("footer",{key:"648ada450ba5d330969a3198a591b6fbcb8696c7",part:"footer-wrapper",class:"border-neutral bg-background z-10 flex w-full flex-col items-center border-t"},e("div",{key:"8aba6a3e9fc2d01f6087bcae07d349f9dac86fe1",part:"footer",class:"w-full max-w-lg"},e("slot",{key:"0efd0c6bdaf43dd2e0b570b9a45164b4699f9813",name:"footer"}))));return e(a,{key:"248dd6b7a82c74597b8e61df3d37672df43a3623",class:this.getClasses().join(" "),"data-nosnippet":true},e("div",{key:"79c3940968eaaac678bc1ec78191f1128ba26e23",part:"backdrop",class:` ${this.boundary==="page"?"fixed":"absolute"} top-0 right-0 bottom-0 left-0 z-9999`,onClick:n=>n.target===n.currentTarget&&this.close()},e("atomic-focus-trap",{key:"dca3febdf82cc32cde669ad8bf4ecd62089c8546",role:"dialog","aria-modal":this.isOpen.toString(),"aria-labelledby":this.headerId,source:this.source,container:this.container??this.host,ref:n=>this.focusTrap=n,scope:this.scope},e(n,{key:"309bd5dec36ac72dc428b819fdced7ce133e6aa3"}))))}get host(){return r(this)}static get watchers(){return{isOpen:["watchToggleOpen"]}}};f([p()],y.prototype,"bindings",void 0);y.style=u;export{v as atomic_focus_trap,y as atomic_modal};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as n,g as r,c as t,h as e,H as a}from"./p-dc3df5ce.js";import{g as i}from"./p-96a6f84f.js";import{n as o,d as l,q as s,u as c,r as d,o as w}from"./p-bc96b8f6.js";import{a as m}from"./p-c86021c8.js";import{l as h}from"./p-1580513b.js";import{I as p}from"./p-d6e6dbc3.js";import{u as b}from"./p-7dd93292.js";import"./p-f284897c.js";import"./p-0462f723.js";import"./p-c9074946.js";import"./p-05de7ca3.js";import"./p-f77160c6.js";const v=class{constructor(r){n(this,r);this.active=false;this.shouldHideSelf=true;this.scope=document.body;this.hiddenElements=[];this.active=false;this.source=undefined;this.container=undefined;this.shouldHideSelf=true;this.scope=document.body}hide(n){if(n.hasAttribute("aria-hidden")||n.hasAttribute("aria-live")||n.tagName.toLowerCase()==="atomic-aria-live"){return}n.setAttribute("aria-hidden","true");this.hiddenElements.push(n)}showAll(){let n;while(n=this.hiddenElements.pop()){n.removeAttribute("aria-hidden")}}hideSiblingsRecursively(n){const r=s(n);if(r===null){return}Array.from(r.children).forEach((r=>{if(r===n){return}if(r.assignedSlot&&o(this.host,r.assignedSlot)){return}this.hide(r)}));if(r!==this.scope){this.hideSiblingsRecursively(r)}}showSelf(){this.parentToHide.removeAttribute("aria-hidden");this.parentToHide.removeAttribute("tabindex")}hideSelf(){if(this.shouldHideSelf){this.parentToHide.setAttribute("aria-hidden","true");this.parentToHide.setAttribute("tabindex","-1")}}async onDeactivated(n){this.showAll();if(!n){await l();this.source?.focus()}this.hideSelf()}async onActivated(n){this.showSelf();if(!n){await l();i(this.host)?.focus()}this.hideSiblingsRecursively(this.host)}async activeChanged(n,r){const t=n===r;if(n){await this.onActivated(t)}else{await this.onDeactivated(t)}}onFocusChanged(n){const r=n=>o(this.host,n);const t=n=>o(this.scope,n);if(!n.target||!this.active){return}const e=c();if(e&&(r(e)||!t(e))){return}i(this.host)?.focus()}connectedCallback(){this.activeChanged(this.active,this.active)}disconnectedCallback(){this.showAll()}get parentToHide(){return this.container??this.host}get host(){return r(this)}static get watchers(){return{active:["activeChanged"]}}};const g='/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme;\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, var(--atomic-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\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 :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden="until-found"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .\\@container {\n container-type: inline-size;\n }\n .pointer-events-auto {\n pointer-events: auto;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .collapse {\n visibility: collapse;\n }\n .invisible {\n visibility: hidden;\n }\n .visible {\n visibility: visible;\n }\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .sticky {\n position: sticky;\n }\n .-top-2 {\n top: calc(0.25rem * -2);\n }\n .-top-4 {\n top: calc(0.25rem * -4);\n }\n .top-0 {\n top: calc(0.25rem * 0);\n }\n .top-1\\/2 {\n top: calc(1/2 * 100%);\n }\n .top-6 {\n top: calc(0.25rem * 6);\n }\n .top-\\[4px\\] {\n top: 4px;\n }\n .top-full {\n top: 100%;\n }\n .top-px {\n top: 1px;\n }\n .-right-2 {\n right: calc(0.25rem * -2);\n }\n .right-0 {\n right: calc(0.25rem * 0);\n }\n .right-2 {\n right: calc(0.25rem * 2);\n }\n .right-6 {\n right: calc(0.25rem * 6);\n }\n .right-12 {\n right: calc(0.25rem * 12);\n }\n .right-20 {\n right: calc(0.25rem * 20);\n }\n .right-px {\n right: 1px;\n }\n .bottom-0 {\n bottom: calc(0.25rem * 0);\n }\n .bottom-1 {\n bottom: calc(0.25rem * 1);\n }\n .bottom-2 {\n bottom: calc(0.25rem * 2);\n }\n .bottom-px {\n bottom: 1px;\n }\n .left-0 {\n left: calc(0.25rem * 0);\n }\n .left-1 {\n left: calc(0.25rem * 1);\n }\n .left-2 {\n left: calc(0.25rem * 2);\n }\n .left-\\[15px\\] {\n left: 15px;\n }\n .isolate {\n isolation: isolate;\n }\n .z-0 {\n z-index: 0;\n }\n .z-1 {\n z-index: 1;\n }\n .z-10 {\n z-index: 10;\n }\n .z-9998 {\n z-index: 9998;\n }\n .z-9999 {\n z-index: 9999;\n }\n .order-last {\n order: 9999;\n }\n .col-span-2 {\n grid-column: span 2 / span 2;\n }\n .container {\n width: 100%;\n }\n @media (width >= 1024px) {\n .container {\n max-width: 1024px;\n }\n }\n @media (width >= 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n @media (width >= 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n @media (width >= 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n @media (width >= 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n @media (width >= 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n .m-0 {\n margin: calc(0.25rem * 0);\n }\n .m-2 {\n margin: calc(0.25rem * 2);\n }\n .mx-0\\.5 {\n margin-inline: calc(0.25rem * 0.5);\n }\n .mx-1 {\n margin-inline: calc(0.25rem * 1);\n }\n .mx-6 {\n margin-inline: calc(0.25rem * 6);\n }\n .mx-16 {\n margin-inline: calc(0.25rem * 16);\n }\n .mx-auto {\n margin-inline: auto;\n }\n .my-2 {\n margin-block: calc(0.25rem * 2);\n }\n .my-3 {\n margin-block: calc(0.25rem * 3);\n }\n .my-4 {\n margin-block: calc(0.25rem * 4);\n }\n .my-6 {\n margin-block: calc(0.25rem * 6);\n }\n .my-auto {\n margin-block: auto;\n }\n .mt-0 {\n margin-top: calc(0.25rem * 0);\n }\n .mt-1 {\n margin-top: calc(0.25rem * 1);\n }\n .mt-1\\.5 {\n margin-top: calc(0.25rem * 1.5);\n }\n .mt-2 {\n margin-top: calc(0.25rem * 2);\n }\n .mt-2\\.5 {\n margin-top: calc(0.25rem * 2.5);\n }\n .mt-3 {\n margin-top: calc(0.25rem * 3);\n }\n .mt-4 {\n margin-top: calc(0.25rem * 4);\n }\n .mt-6 {\n margin-top: calc(0.25rem * 6);\n }\n .mt-7 {\n margin-top: calc(0.25rem * 7);\n }\n .mt-8 {\n margin-top: calc(0.25rem * 8);\n }\n .mt-10 {\n margin-top: calc(0.25rem * 10);\n }\n .mt-px {\n margin-top: 1px;\n }\n .mr-0 {\n margin-right: calc(0.25rem * 0);\n }\n .mr-0\\.5 {\n margin-right: calc(0.25rem * 0.5);\n }\n .mr-1 {\n margin-right: calc(0.25rem * 1);\n }\n .mr-1\\.5 {\n margin-right: calc(0.25rem * 1.5);\n }\n .mr-2 {\n margin-right: calc(0.25rem * 2);\n }\n .mr-3 {\n margin-right: calc(0.25rem * 3);\n }\n .mr-6 {\n margin-right: calc(0.25rem * 6);\n }\n .mb-0 {\n margin-bottom: calc(0.25rem * 0);\n }\n .mb-1 {\n margin-bottom: calc(0.25rem * 1);\n }\n .mb-2 {\n margin-bottom: calc(0.25rem * 2);\n }\n .mb-3 {\n margin-bottom: calc(0.25rem * 3);\n }\n .mb-4 {\n margin-bottom: calc(0.25rem * 4);\n }\n .mb-6 {\n margin-bottom: calc(0.25rem * 6);\n }\n .ml-0\\.5 {\n margin-left: calc(0.25rem * 0.5);\n }\n .ml-1 {\n margin-left: calc(0.25rem * 1);\n }\n .ml-2 {\n margin-left: calc(0.25rem * 2);\n }\n .ml-4 {\n margin-left: calc(0.25rem * 4);\n }\n .ml-6 {\n margin-left: calc(0.25rem * 6);\n }\n .ml-auto {\n margin-left: auto;\n }\n .box-border {\n box-sizing: border-box;\n }\n .box-content {\n box-sizing: content-box;\n }\n .line-clamp-1 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n }\n .line-clamp-2 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n }\n .line-clamp-3 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n }\n .line-clamp-4 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 4;\n }\n .line-clamp-none {\n overflow: visible;\n display: block;\n -webkit-box-orient: horizontal;\n -webkit-line-clamp: unset;\n }\n .block {\n display: block;\n }\n .contents {\n display: contents;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .table {\n display: table;\n }\n .aspect-square {\n aspect-ratio: 1 / 1;\n }\n .size-\\[27px\\] {\n width: 27px;\n height: 27px;\n }\n .h-1 {\n height: calc(0.25rem * 1);\n }\n .h-2 {\n height: calc(0.25rem * 2);\n }\n .h-2\\.5 {\n height: calc(0.25rem * 2.5);\n }\n .h-3 {\n height: calc(0.25rem * 3);\n }\n .h-4 {\n height: calc(0.25rem * 4);\n }\n .h-5 {\n height: calc(0.25rem * 5);\n }\n .h-5\\/6 {\n height: calc(5/6 * 100%);\n }\n .h-6 {\n height: calc(0.25rem * 6);\n }\n .h-7 {\n height: calc(0.25rem * 7);\n }\n .h-8 {\n height: calc(0.25rem * 8);\n }\n .h-9 {\n height: calc(0.25rem * 9);\n }\n .h-10 {\n height: calc(0.25rem * 10);\n }\n .h-12 {\n height: calc(0.25rem * 12);\n }\n .h-\\[2\\.6rem\\] {\n height: 2.6rem;\n }\n .h-\\[9px\\] {\n height: 9px;\n }\n .h-full {\n height: 100%;\n }\n .max-h-96 {\n max-height: calc(0.25rem * 96);\n }\n .min-h-10 {\n min-height: calc(0.25rem * 10);\n }\n .w-0\\.5 {\n width: calc(0.25rem * 0.5);\n }\n .w-1 {\n width: calc(0.25rem * 1);\n }\n .w-1\\/2 {\n width: calc(1/2 * 100%);\n }\n .w-2 {\n width: calc(0.25rem * 2);\n }\n .w-2\\.5 {\n width: calc(0.25rem * 2.5);\n }\n .w-3 {\n width: calc(0.25rem * 3);\n }\n .w-3\\.5 {\n width: calc(0.25rem * 3.5);\n }\n .w-3\\/5 {\n width: calc(3/5 * 100%);\n }\n .w-4 {\n width: calc(0.25rem * 4);\n }\n .w-5 {\n width: calc(0.25rem * 5);\n }\n .w-5\\/6 {\n width: calc(5/6 * 100%);\n }\n .w-6 {\n width: calc(0.25rem * 6);\n }\n .w-7 {\n width: calc(0.25rem * 7);\n }\n .w-8 {\n width: calc(0.25rem * 8);\n }\n .w-9 {\n width: calc(0.25rem * 9);\n }\n .w-10 {\n width: calc(0.25rem * 10);\n }\n .w-12 {\n width: calc(0.25rem * 12);\n }\n .w-20 {\n width: calc(0.25rem * 20);\n }\n .w-28 {\n width: calc(0.25rem * 28);\n }\n .w-32 {\n width: calc(0.25rem * 32);\n }\n .w-44 {\n width: calc(0.25rem * 44);\n }\n .w-48 {\n width: calc(0.25rem * 48);\n }\n .w-60 {\n width: calc(0.25rem * 60);\n }\n .w-72 {\n width: calc(0.25rem * 72);\n }\n .w-100 {\n width: calc(0.25rem * 100);\n }\n .w-\\[2\\.6rem\\] {\n width: 2.6rem;\n }\n .w-auto {\n width: auto;\n }\n .w-fit {\n width: fit-content;\n }\n .w-full {\n width: 100%;\n }\n .w-max {\n width: max-content;\n }\n .max-w-4\\/5 {\n max-width: calc(4/5 * 100%);\n }\n .max-w-60 {\n max-width: calc(0.25rem * 60);\n }\n .max-w-\\[30ch\\] {\n max-width: 30ch;\n }\n .max-w-full {\n max-width: 100%;\n }\n .max-w-lg {\n max-width: 32rem;\n }\n .max-w-max {\n max-width: max-content;\n }\n .min-w-0 {\n min-width: calc(0.25rem * 0);\n }\n .min-w-10 {\n min-width: calc(0.25rem * 10);\n }\n .min-w-20 {\n min-width: calc(0.25rem * 20);\n }\n .min-w-24 {\n min-width: calc(0.25rem * 24);\n }\n .min-w-full {\n min-width: 100%;\n }\n .flex-1 {\n flex: 1;\n }\n .flex-none {\n flex: none;\n }\n .flex-shrink {\n flex-shrink: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .flex-grow {\n flex-grow: 1;\n }\n .grow {\n flex-grow: 1;\n }\n .basis-1\\/2 {\n flex-basis: calc(1/2 * 100%);\n }\n .basis-8 {\n flex-basis: calc(0.25rem * 8);\n }\n .border-collapse {\n border-collapse: collapse;\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-1\\/2 {\n --tw-translate-x: calc(1/2 * 100%);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .scale-75 {\n --tw-scale-x: 75%;\n --tw-scale-y: 75%;\n --tw-scale-z: 75%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .scale-100 {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .rotate-180 {\n rotate: 180deg;\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n .cursor-\\[inherit\\] {\n cursor: inherit;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .resize-none {\n resize: none;\n }\n .list-outside {\n list-style-position: outside;\n }\n .list-decimal {\n list-style-type: decimal;\n }\n .list-disc {\n list-style-type: disc;\n }\n .list-none {\n list-style-type: none;\n }\n .appearance-none {\n appearance: none;\n }\n .grid-cols-\\[min-content_1fr\\] {\n grid-template-columns: min-content 1fr;\n }\n .grid-cols-\\[min-content_auto\\] {\n grid-template-columns: min-content auto;\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-row {\n flex-direction: row;\n }\n .flex-nowrap {\n flex-wrap: nowrap;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .place-items-center {\n place-items: center;\n }\n .content-center {\n align-content: center;\n }\n .items-baseline {\n align-items: baseline;\n }\n .items-center {\n align-items: center;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .gap-0\\.5 {\n gap: calc(0.25rem * 0.5);\n }\n .gap-1 {\n gap: calc(0.25rem * 1);\n }\n .gap-2 {\n gap: calc(0.25rem * 2);\n }\n .gap-3 {\n gap: calc(0.25rem * 3);\n }\n .gap-4 {\n gap: calc(0.25rem * 4);\n }\n .gap-8 {\n gap: calc(0.25rem * 8);\n }\n .gap-x-1\\.5 {\n column-gap: calc(0.25rem * 1.5);\n }\n .gap-x-2 {\n column-gap: calc(0.25rem * 2);\n }\n .gap-x-4 {\n column-gap: calc(0.25rem * 4);\n }\n :where(.space-x-1\\.5 > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(0.25rem * 1.5) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(0.25rem * 1.5) * calc(1 - var(--tw-space-x-reverse)));\n }\n .gap-y-0\\.5 {\n row-gap: calc(0.25rem * 0.5);\n }\n :where(.divide-y > :not(:last-child)) {\n --tw-divide-y-reverse: 0;\n border-bottom-style: var(--tw-border-style);\n border-top-style: var(--tw-border-style);\n border-top-width: calc(1px * var(--tw-divide-y-reverse));\n border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n }\n :where(.divide-neutral > :not(:last-child)) {\n border-color: var(--atomic-neutral);\n }\n .self-center {\n align-self: center;\n }\n .self-start {\n align-self: flex-start;\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .overflow-auto {\n overflow: auto;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-x-auto {\n overflow-x: auto;\n }\n .overflow-x-clip {\n overflow-x: clip;\n }\n .overflow-x-scroll {\n overflow-x: scroll;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .overflow-y-visible {\n overflow-y: visible;\n }\n .scroll-smooth {\n scroll-behavior: smooth;\n }\n .rounded {\n border-radius: var(--atomic-border-radius);\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--atomic-border-radius-lg);\n }\n .rounded-md {\n border-radius: var(--atomic-border-radius-md);\n }\n .rounded-none {\n border-radius: 0;\n }\n .rounded-sm {\n border-radius: var(--atomic-border-radius);\n }\n .rounded-xl {\n border-radius: var(--atomic-border-radius-xl);\n }\n .rounded-tl-none {\n border-top-left-radius: 0;\n }\n .rounded-r-none {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n .border-neutral {\n border-color: var(--atomic-neutral);\n }\n .border-neutral-dark {\n border-color: var(--atomic-neutral-dark);\n }\n .border-neutral-dim {\n border-color: var(--atomic-neutral-dim);\n }\n .border-primary {\n border-color: var(--atomic-primary);\n }\n .border-primary-light {\n border-color: var(--atomic-primary-light);\n }\n .border-t-neutral {\n border-top-color: var(--atomic-neutral);\n }\n .border-b-neutral {\n border-bottom-color: var(--atomic-neutral);\n }\n .border-b-neutral-dim {\n border-bottom-color: var(--atomic-neutral-dim);\n }\n .border-l-neutral {\n border-left-color: var(--atomic-neutral);\n }\n .border-l-neutral-dim {\n border-left-color: var(--atomic-neutral-dim);\n }\n .bg-\\[\\#F1F2FF\\] {\n background-color: #F1F2FF;\n }\n .bg-background {\n background-color: var(--atomic-background);\n }\n .bg-error {\n background-color: var(--atomic-error);\n }\n .bg-neutral {\n background-color: var(--atomic-neutral);\n }\n .bg-neutral-dark {\n background-color: var(--atomic-neutral-dark);\n }\n .bg-neutral-light {\n background-color: var(--atomic-neutral-light);\n }\n .bg-primary {\n background-color: var(--atomic-primary);\n }\n .bg-primary-background {\n background-color: var(--atomic-primary-background);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: #fff;\n }\n .bg-linear-to-l {\n --tw-gradient-position: to left;\n }\n @supports (background-image: linear-gradient(in lab, red, red)) {\n .bg-linear-to-l {\n --tw-gradient-position: to left in oklab;\n }\n }\n .bg-linear-to-l {\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .bg-linear-to-r {\n --tw-gradient-position: to right;\n }\n @supports (background-image: linear-gradient(in lab, red, red)) {\n .bg-linear-to-r {\n --tw-gradient-position: to right in oklab;\n }\n }\n .bg-linear-to-r {\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .from-background\\/60 {\n --tw-gradient-from: color-mix(in srgb, #ffffff 60%, transparent);\n }\n @supports (color: color-mix(in lab, red, red)) {\n .from-background\\/60 {\n --tw-gradient-from: color-mix(in oklab, var(--atomic-background) 60%, transparent);\n }\n }\n .from-background\\/60 {\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .fill-current {\n fill: currentcolor;\n }\n .stroke-\\[1\\.25\\] {\n stroke-width: 1.25;\n }\n .p-0 {\n padding: calc(0.25rem * 0);\n }\n .p-1 {\n padding: calc(0.25rem * 1);\n }\n .p-2 {\n padding: calc(0.25rem * 2);\n }\n .p-2\\.5 {\n padding: calc(0.25rem * 2.5);\n }\n .p-3 {\n padding: calc(0.25rem * 3);\n }\n .p-3\\.5 {\n padding: calc(0.25rem * 3.5);\n }\n .p-4 {\n padding: calc(0.25rem * 4);\n }\n .p-6 {\n padding: calc(0.25rem * 6);\n }\n .p-7 {\n padding: calc(0.25rem * 7);\n }\n .p-8 {\n padding: calc(0.25rem * 8);\n }\n .px-1 {\n padding-inline: calc(0.25rem * 1);\n }\n .px-2 {\n padding-inline: calc(0.25rem * 2);\n }\n .px-2\\.5 {\n padding-inline: calc(0.25rem * 2.5);\n }\n .px-3 {\n padding-inline: calc(0.25rem * 3);\n }\n .px-4 {\n padding-inline: calc(0.25rem * 4);\n }\n .px-6 {\n padding-inline: calc(0.25rem * 6);\n }\n .px-9 {\n padding-inline: calc(0.25rem * 9);\n }\n .py-0\\.5 {\n padding-block: calc(0.25rem * 0.5);\n }\n .py-1 {\n padding-block: calc(0.25rem * 1);\n }\n .py-1\\.5 {\n padding-block: calc(0.25rem * 1.5);\n }\n .py-2 {\n padding-block: calc(0.25rem * 2);\n }\n .py-2\\.5 {\n padding-block: calc(0.25rem * 2.5);\n }\n .py-3 {\n padding-block: calc(0.25rem * 3);\n }\n .py-3\\.5 {\n padding-block: calc(0.25rem * 3.5);\n }\n .py-4 {\n padding-block: calc(0.25rem * 4);\n }\n .py-5 {\n padding-block: calc(0.25rem * 5);\n }\n .pt-0\\.5 {\n padding-top: calc(0.25rem * 0.5);\n }\n .pt-8 {\n padding-top: calc(0.25rem * 8);\n }\n .pr-2 {\n padding-right: calc(0.25rem * 2);\n }\n .pr-6 {\n padding-right: calc(0.25rem * 6);\n }\n .pr-24 {\n padding-right: calc(0.25rem * 24);\n }\n .pb-1 {\n padding-bottom: calc(0.25rem * 1);\n }\n .pb-3 {\n padding-bottom: calc(0.25rem * 3);\n }\n .pb-4 {\n padding-bottom: calc(0.25rem * 4);\n }\n .pb-6 {\n padding-bottom: calc(0.25rem * 6);\n }\n .pl-0 {\n padding-left: calc(0.25rem * 0);\n }\n .pl-1 {\n padding-left: calc(0.25rem * 1);\n }\n .pl-3 {\n padding-left: calc(0.25rem * 3);\n }\n .pl-7 {\n padding-left: calc(0.25rem * 7);\n }\n .pl-9 {\n padding-left: calc(0.25rem * 9);\n }\n .pl-10 {\n padding-left: calc(0.25rem * 10);\n }\n .text-center {\n text-align: center;\n }\n .text-left {\n text-align: left;\n }\n .align-baseline {\n vertical-align: baseline;\n }\n .align-bottom {\n vertical-align: bottom;\n }\n .align-middle {\n vertical-align: middle;\n }\n .font-sans {\n font-family: var(--atomic-font-family);\n }\n .text-2xl {\n font-size: var(--atomic-text-2xl);\n line-height: var(--tw-leading, calc(2 / 1.5));\n }\n .text-base {\n font-size: var(--atomic-text-base);\n line-height: var(--tw-leading, calc(1.5 / 1));\n }\n .text-lg {\n font-size: var(--atomic-text-lg);\n line-height: var(--tw-leading, calc(1.75 / 1.125));\n }\n .text-sm {\n font-size: var(--atomic-text-sm);\n line-height: var(--tw-leading, calc(1.25 / 0.875));\n }\n .text-xl {\n font-size: var(--atomic-text-xl);\n line-height: var(--tw-leading, calc(1.75 / 1.25));\n }\n .text-xs {\n font-size: 0.75rem;\n line-height: var(--tw-leading, calc(1 / 0.75));\n }\n .text-xs\\/\\[1rem\\] {\n font-size: 0.75rem;\n line-height: 1rem;\n }\n .leading-4 {\n --tw-leading: calc(0.25rem * 4);\n line-height: calc(0.25rem * 4);\n }\n .leading-5 {\n --tw-leading: calc(0.25rem * 5);\n line-height: calc(0.25rem * 5);\n }\n .leading-6 {\n --tw-leading: calc(0.25rem * 6);\n line-height: calc(0.25rem * 6);\n }\n .leading-8 {\n --tw-leading: calc(0.25rem * 8);\n line-height: calc(0.25rem * 8);\n }\n .leading-10 {\n --tw-leading: calc(0.25rem * 10);\n line-height: calc(0.25rem * 10);\n }\n .leading-\\[calc\\(1\\/\\.75\\)\\] {\n --tw-leading: calc(1 / .75);\n line-height: calc(1 / .75);\n }\n .font-bold {\n --tw-font-weight: var(--atomic-font-bold);\n font-weight: var(--atomic-font-bold);\n }\n .font-light {\n --tw-font-weight: 300;\n font-weight: 300;\n }\n .font-medium {\n --tw-font-weight: 500;\n font-weight: 500;\n }\n .font-normal {\n --tw-font-weight: var(--atomic-font-normal);\n font-weight: var(--atomic-font-normal);\n }\n .font-semibold {\n --tw-font-weight: 600;\n font-weight: 600;\n }\n .break-words {\n overflow-wrap: break-word;\n }\n .break-all {\n word-break: break-all;\n }\n .break-keep {\n word-break: keep-all;\n }\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n .whitespace-normal {\n white-space: normal;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .whitespace-pre-wrap {\n white-space: pre-wrap;\n }\n .text-\\[\\#54698D\\] {\n color: #54698D;\n }\n .text-\\[inherit\\] {\n color: inherit;\n }\n .text-black {\n color: #000;\n }\n .text-error {\n color: var(--atomic-error);\n }\n .text-inline-code {\n color: var(--atomic-inline-code);\n }\n .text-neutral {\n color: var(--atomic-neutral);\n }\n .text-neutral-dark {\n color: var(--atomic-neutral-dark);\n }\n .text-on-background {\n color: var(--atomic-on-background);\n }\n .text-on-primary {\n color: var(--atomic-on-primary);\n }\n .text-primary {\n color: var(--atomic-primary);\n }\n .text-primary-light {\n color: var(--atomic-primary-light);\n }\n .text-success {\n color: var(--atomic-success);\n }\n .text-transparent {\n color: transparent;\n }\n .capitalize {\n text-transform: capitalize;\n }\n .lowercase {\n text-transform: lowercase;\n }\n .italic {\n font-style: italic;\n }\n .line-through {\n text-decoration-line: line-through;\n }\n .placeholder-neutral-dark::placeholder {\n color: var(--atomic-neutral-dark);\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-50 {\n opacity: 50%;\n }\n .opacity-80 {\n opacity: 80%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-inner-primary {\n --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--atomic-primary));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-lg {\n --tw-shadow: 0px 2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-t-lg {\n --tw-shadow: 0px -2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-1 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-3 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-primary {\n --tw-ring-color: var(--atomic-primary);\n }\n .ring-primary-light {\n --tw-ring-color: var(--atomic-primary-light);\n }\n .ring-ring-primary {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .outline-error {\n outline-color: var(--atomic-error);\n }\n .outline-neutral {\n outline-color: var(--atomic-neutral);\n }\n .outline-primary {\n outline-color: var(--atomic-primary);\n }\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .invert {\n --tw-invert: invert(100%);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n }\n .transition-\\[visibility\\] {\n transition-property: visibility;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .ease-in-out {\n --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n }\n @media (hover: hover) {\n .group-hover\\:visible:is(:where(.group):hover *) {\n visibility: visible;\n }\n }\n @media (hover: hover) {\n .group-hover\\:text-error:is(:where(.group):hover *) {\n color: var(--atomic-error);\n }\n }\n @media (hover: hover) {\n .group-hover\\:text-primary:is(:where(.group):hover *) {\n color: var(--atomic-primary);\n }\n }\n @media (hover: hover) {\n .group-hover\\:text-primary-light:is(:where(.group):hover *) {\n color: var(--atomic-primary-light);\n }\n }\n .group-focus\\:text-primary:is(:where(.group):focus *) {\n color: var(--atomic-primary);\n }\n .group-focus\\:text-primary-light:is(:where(.group):focus *) {\n color: var(--atomic-primary-light);\n }\n .group-focus-visible\\:text-error:is(:where(.group):focus-visible *) {\n color: var(--atomic-error);\n }\n .group-focus-visible\\:text-primary:is(:where(.group):focus-visible *) {\n color: var(--atomic-primary);\n }\n @media (hover: hover) {\n .peer-hover\\:text-error:is(:where(.peer):hover ~ *) {\n color: var(--atomic-error);\n }\n }\n .after\\:absolute::after {\n content: var(--tw-content);\n position: absolute;\n }\n .after\\:-bottom-0\\.5::after {\n content: var(--tw-content);\n bottom: calc(0.25rem * -0.5);\n }\n .after\\:block::after {\n content: var(--tw-content);\n display: block;\n }\n .after\\:h-1::after {\n content: var(--tw-content);\n height: calc(0.25rem * 1);\n }\n .after\\:w-full::after {\n content: var(--tw-content);\n width: 100%;\n }\n .after\\:rounded::after {\n content: var(--tw-content);\n border-radius: var(--atomic-border-radius);\n }\n .after\\:bg-primary::after {\n content: var(--tw-content);\n background-color: var(--atomic-primary);\n }\n .focus-within\\:border-disabled:focus-within {\n border-color: var(--atomic-disabled);\n }\n .focus-within\\:border-primary:focus-within {\n border-color: var(--atomic-primary);\n }\n .focus-within\\:ring-3:focus-within {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .focus-within\\:ring-neutral:focus-within {\n --tw-ring-color: var(--atomic-neutral);\n }\n .focus-within\\:ring-ring-primary:focus-within {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n @media (hover: hover) {\n .hover\\:border:hover {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n }\n @media (hover: hover) {\n .hover\\:border-error:hover {\n border-color: var(--atomic-error);\n }\n }\n @media (hover: hover) {\n .hover\\:border-primary-light:hover {\n border-color: var(--atomic-primary-light);\n }\n }\n @media (hover: hover) {\n .hover\\:bg-error:hover {\n background-color: var(--atomic-error);\n }\n }\n @media (hover: hover) {\n .hover\\:bg-neutral-light:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n @media (hover: hover) {\n .hover\\:bg-primary-light:hover {\n background-color: var(--atomic-primary-light);\n }\n }\n @media (hover: hover) {\n .hover\\:bg-transparent:hover {\n background-color: transparent;\n }\n }\n @media (hover: hover) {\n .hover\\:fill-white:hover {\n fill: #fff;\n }\n }\n @media (hover: hover) {\n .hover\\:text-primary-light:hover {\n color: var(--atomic-primary-light);\n }\n }\n @media (hover: hover) {\n .hover\\:underline:hover {\n text-decoration-line: underline;\n }\n }\n @media (hover: hover) {\n .hover\\:opacity-100:hover {\n opacity: 100%;\n }\n }\n @media (hover: hover) {\n .hover\\:shadow-sm:hover {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:opacity-100:focus {\n opacity: 100%;\n }\n .focus\\:outline-hidden:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n @media (forced-colors: active) {\n .focus\\:outline-hidden:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n }\n .focus-visible\\:border:focus-visible {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .focus-visible\\:border-error:focus-visible {\n border-color: var(--atomic-error);\n }\n .focus-visible\\:border-primary:focus-visible {\n border-color: var(--atomic-primary);\n }\n .focus-visible\\:border-primary-light:focus-visible {\n border-color: var(--atomic-primary-light);\n }\n .focus-visible\\:bg-error:focus-visible {\n background-color: var(--atomic-error);\n }\n .focus-visible\\:bg-neutral-light:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .focus-visible\\:bg-primary-light:focus-visible {\n background-color: var(--atomic-primary-light);\n }\n .focus-visible\\:text-primary-light:focus-visible {\n color: var(--atomic-primary-light);\n }\n .focus-visible\\:underline:focus-visible {\n text-decoration-line: underline;\n }\n .focus-visible\\:ring-2:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .focus-visible\\:outline-none:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n @media (width >= 40rem) {\n .sm\\:px-6 {\n padding-inline: calc(0.25rem * 6);\n }\n }\n .\\[part\\=\\"breadcrumb-button\\"\\]\\:visible:is(part="breadcrumb-button") {\n visibility: visible;\n }\n}\n@layer theme, base, components, utilities;\n@layer components {\n .input-primary {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n }\n @media (hover: hover) {\n .input-primary:hover {\n border-color: var(--atomic-primary-light);\n }\n }\n .input-primary:focus-visible {\n border-color: var(--atomic-primary);\n }\n .input-primary:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .input-primary:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .input-primary:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-radio {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .btn-radio::before {\n content: var(--tw-content);\n --tw-content: attr(value);\n content: var(--tw-content);\n }\n .btn-primary {\n border-radius: var(--atomic-border-radius);\n background-color: var(--atomic-primary);\n color: var(--atomic-on-primary);\n }\n @media (hover: hover) {\n .btn-primary:hover {\n background-color: var(--atomic-primary-light);\n }\n }\n .btn-primary:focus-visible {\n background-color: var(--atomic-primary-light);\n }\n .btn-primary:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-primary:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-primary:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-primary:disabled {\n cursor: not-allowed;\n }\n .btn-primary:disabled {\n background-color: var(--atomic-disabled);\n }\n .btn-outline-primary {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-primary);\n }\n @media (hover: hover) {\n .btn-outline-primary:hover {\n border-color: var(--atomic-primary-light);\n }\n }\n @media (hover: hover) {\n .btn-outline-primary:hover {\n color: var(--atomic-primary-light);\n }\n }\n .btn-outline-primary:focus-visible {\n border-color: var(--atomic-primary);\n }\n .btn-outline-primary:focus-visible {\n color: var(--atomic-primary);\n }\n .btn-outline-primary:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-outline-primary:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-outline-primary:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-primary:disabled {\n cursor: not-allowed;\n }\n .btn-outline-primary:disabled {\n border-color: var(--atomic-neutral);\n }\n .btn-outline-primary:disabled {\n color: var(--atomic-neutral);\n }\n .btn-text-primary {\n border-radius: var(--atomic-border-radius);\n background-color: var(--atomic-background);\n color: var(--atomic-primary);\n }\n @media (hover: hover) {\n .btn-text-primary:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n .btn-text-primary:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .btn-text-primary:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-neutral {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-outline-neutral:hover {\n border-color: var(--atomic-primary);\n }\n }\n @media (hover: hover) {\n .btn-outline-neutral:hover {\n color: var(--atomic-primary);\n }\n }\n .btn-outline-neutral:focus-visible {\n border-color: var(--atomic-primary);\n }\n .btn-outline-neutral:focus-visible {\n color: var(--atomic-primary);\n }\n .btn-outline-neutral:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-outline-neutral:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-outline-neutral:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-neutral:disabled {\n cursor: not-allowed;\n }\n .btn-outline-neutral:disabled {\n border-color: var(--atomic-neutral);\n }\n .btn-outline-neutral:disabled {\n color: var(--atomic-on-background);\n }\n .btn-outline-neutral:disabled {\n opacity: 50%;\n }\n .btn-outline-bg-neutral {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-outline-bg-neutral:hover {\n border-color: var(--atomic-primary);\n }\n }\n @media (hover: hover) {\n .btn-outline-bg-neutral:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n @media (hover: hover) {\n .btn-outline-bg-neutral:hover {\n color: var(--atomic-primary);\n }\n }\n .btn-outline-bg-neutral:focus-visible {\n border-color: var(--atomic-primary);\n }\n .btn-outline-bg-neutral:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .btn-outline-bg-neutral:focus-visible {\n color: var(--atomic-primary);\n }\n .btn-outline-bg-neutral:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-outline-bg-neutral:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-outline-bg-neutral:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-bg-neutral:disabled {\n cursor: not-allowed;\n }\n .btn-outline-bg-neutral:disabled {\n border-color: var(--atomic-neutral);\n }\n .btn-outline-bg-neutral:disabled {\n color: var(--atomic-on-background);\n }\n .btn-outline-bg-neutral:disabled {\n opacity: 50%;\n }\n .btn-outline-bg-error {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-outline-bg-error:hover {\n border-color: var(--atomic-primary);\n }\n }\n @media (hover: hover) {\n .btn-outline-bg-error:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n @media (hover: hover) {\n .btn-outline-bg-error:hover {\n color: var(--atomic-primary);\n }\n }\n .btn-outline-bg-error:focus-visible {\n border-color: var(--atomic-primary);\n }\n .btn-outline-bg-error:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .btn-outline-bg-error:focus-visible {\n color: var(--atomic-primary);\n }\n .btn-outline-bg-error:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-outline-bg-error:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-outline-bg-error:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-bg-error:disabled {\n cursor: not-allowed;\n }\n .btn-outline-bg-error:disabled {\n border-color: var(--atomic-neutral);\n }\n .btn-outline-bg-error:disabled {\n color: var(--atomic-on-background);\n }\n .btn-outline-bg-error:disabled {\n opacity: 50%;\n }\n .btn-outline-error {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-outline-error:hover {\n border-color: var(--atomic-error);\n }\n }\n @media (hover: hover) {\n .btn-outline-error:hover {\n color: var(--atomic-error);\n }\n }\n .btn-outline-error:focus-visible {\n border-color: var(--atomic-error);\n }\n .btn-outline-error:focus-visible {\n color: var(--atomic-error);\n }\n .btn-outline-error:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-outline-error:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-outline-error:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-error:disabled {\n cursor: not-allowed;\n }\n .btn-outline-error:disabled {\n border-color: var(--atomic-neutral);\n }\n .btn-outline-error:disabled {\n color: var(--atomic-on-background);\n }\n .btn-outline-error:disabled {\n opacity: 50%;\n }\n .btn-text-neutral {\n border-radius: var(--atomic-border-radius);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-text-neutral:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n @media (hover: hover) {\n .btn-text-neutral:hover {\n color: var(--atomic-primary);\n }\n }\n .btn-text-neutral:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .btn-text-neutral:focus-visible {\n color: var(--atomic-primary);\n }\n .btn-text-neutral:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-text-transparent {\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-text-transparent:hover {\n color: var(--atomic-primary-light);\n }\n }\n .btn-text-transparent:focus-visible {\n color: var(--atomic-primary-light);\n }\n .btn-square-neutral {\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-square-neutral:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n .btn-square-neutral:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .btn-square-neutral:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-page {\n display: grid;\n height: calc(0.25rem * 10);\n width: calc(0.25rem * 10);\n place-items: center;\n border-style: var(--tw-border-style);\n border-width: 0px;\n font-size: var(--atomic-text-lg);\n line-height: var(--tw-leading, calc(1.75 / 1.125));\n }\n @media (hover: hover) {\n .btn-page:hover {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n }\n .btn-page:focus-visible {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .btn-page.selected {\n border-style: var(--tw-border-style);\n border-width: 2px;\n border-color: var(--atomic-primary);\n --tw-font-weight: var(--atomic-font-bold);\n font-weight: var(--atomic-font-bold);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n border-color: oklch(0.928 0.006 264.531);\n }\n :host {\n display: block;\n }\n :host, button, input, select {\n font-family: var(--atomic-font-family);\n font-size: var(--atomic-text-base);\n line-height: var(--tw-leading, calc(1.5 / 1));\n --tw-font-weight: var(--atomic-font-normal);\n font-weight: var(--atomic-font-normal);\n }\n button {\n cursor: pointer;\n }\n :host(.atomic-hidden) {\n display: none;\n }\n .ripple {\n position: absolute;\n pointer-events: none;\n transform: scale(0);\n border-radius: 50%;\n animation: ripple var(--animation-duration) linear;\n }\n .ripple-relative {\n position: relative;\n }\n .ripple-parent {\n overflow: hidden;\n }\n @keyframes ripple {\n to {\n transform: scale(4);\n opacity: 0;\n }\n }\n}\n@keyframes scaleUp {\n 0% {\n transform: scale(0.7) translateY(150vh);\n opacity: 0.7;\n }\n 100% {\n transform: scale(1) translateY(0px);\n opacity: 1;\n }\n}\n@keyframes slideDown {\n 0% {\n transform: translateY(0px);\n opacity: 1;\n }\n 100% {\n transform: translateY(150vh);\n opacity: 0.7;\n }\n}\n[part=\'backdrop\'] {\n pointer-events: none;\n}\narticle.animate-open {\n animation: var(--animate-scale-up-modal, scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)\n forwards);\n}\narticle.animate-close {\n animation: var(--animate-slide-down-modal, slideDown 0.5s linear forwards);\n}\natomic-focus-trap {\n display: contents;\n}\n[part=\'container\'] {\n overflow: hidden;\n grid-area: modal;\n}\n.animate-scaleUpModalIPX[part=\'container\'] {\n border-radius: var(--atomic-border-radius);\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:host(.open) [part=\'backdrop\'] {\n pointer-events: auto;\n}\n:host(.open.dialog) [part=\'backdrop\'] {\n background-color: rgba(40, 40, 40, 0.8);\n}\n:host(.dialog) [part=\'backdrop\'] {\n display: grid;\n padding: calc(0.25rem * 6);\n transition: background-color 500ms ease-in-out;\n grid-template-areas: \'. . .\'\n \'. modal .\'\n \'. . .\';\n grid-template-columns: 1fr min(30rem, 100%) 1fr;\n grid-template-rows: 1fr auto 3fr;\n}\n:host(.dialog) [part=\'container\'] {\n border-radius: var(--atomic-border-radius);\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:host(.dialog) [part=\'header-wrapper\'] {\n padding-inline: calc(0.25rem * 6);\n padding-block: calc(0.25rem * 4);\n}\n:host(.dialog) [part=\'header\'] {\n --tw-font-weight: var(--atomic-font-bold);\n font-weight: var(--atomic-font-bold);\n}\n:host(.dialog) [part=\'body-wrapper\'] {\n padding: calc(0.25rem * 6);\n}\n:host(.dialog) [part=\'footer-wrapper\'] {\n background-color: var(--atomic-neutral-light);\n padding: 1rem 1.125rem;\n}\n:host(.fullscreen) [part=\'container\'] {\n position: absolute;\n inset: calc(0.25rem * 0);\n}\n:host(.fullscreen) [part=\'header-wrapper\'] {\n padding: calc(0.25rem * 6);\n}\n:host(.fullscreen) [part=\'body-wrapper\'] {\n padding-inline: calc(0.25rem * 6);\n padding-top: calc(0.25rem * 8);\n padding-bottom: calc(0.25rem * 5);\n}\n:host(.fullscreen) [part=\'footer-wrapper\'] {\n padding-inline: calc(0.25rem * 6);\n padding-block: calc(0.25rem * 4);\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@property --tw-translate-x {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-scale-x {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-rotate-x {\n syntax: "*";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: "*";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: "*";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: "*";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: "*";\n inherits: false;\n}\n@property --tw-space-x-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-divide-y-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-gradient-position {\n syntax: "*";\n inherits: false;\n}\n@property --tw-gradient-from {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-via {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-to {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-stops {\n syntax: "*";\n inherits: false;\n}\n@property --tw-gradient-via-stops {\n syntax: "*";\n inherits: false;\n}\n@property --tw-gradient-from-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-leading {\n syntax: "*";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: "*";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: "<length>";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: "*";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-blur {\n syntax: "*";\n inherits: false;\n}\n@property --tw-brightness {\n syntax: "*";\n inherits: false;\n}\n@property --tw-contrast {\n syntax: "*";\n inherits: false;\n}\n@property --tw-grayscale {\n syntax: "*";\n inherits: false;\n}\n@property --tw-hue-rotate {\n syntax: "*";\n inherits: false;\n}\n@property --tw-invert {\n syntax: "*";\n inherits: false;\n}\n@property --tw-opacity {\n syntax: "*";\n inherits: false;\n}\n@property --tw-saturate {\n syntax: "*";\n inherits: false;\n}\n@property --tw-sepia {\n syntax: "*";\n inherits: false;\n}\n@property --tw-drop-shadow {\n syntax: "*";\n inherits: false;\n}\n@property --tw-drop-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n syntax: "*";\n inherits: false;\n}\n@property --tw-duration {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ease {\n syntax: "*";\n inherits: false;\n}\n@property --tw-content {\n syntax: "*";\n initial-value: "";\n inherits: false;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-x-reverse: 0;\n --tw-divide-y-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-content: "";\n }\n }\n}\n';const u=g;var f=undefined&&undefined.__decorate||function(n,r,t,e){var a=arguments.length,i=a<3?r:e===null?e=Object.getOwnPropertyDescriptor(r,t):e,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")i=Reflect.decorate(n,r,t,e);else for(var l=n.length-1;l>=0;l--)if(o=n[l])i=(a<3?o(i):a>3?o(r,t,i):o(r,t))||i;return a>3&&i&&Object.defineProperty(r,t,i),i};const y=class{constructor(r){n(this,r);this.animationEnded=t(this,"animationEnded",7);this.fullscreen=false;this.isOpen=false;this.close=()=>this.isOpen=false;this.boundary="page";this.wasEverOpened=false;this.headerId=d("atomic-modal-header-");this.currentWatchToggleOpenExecution=0;this.updateBreakpoints=w((()=>b(this.host)));this.error=undefined;this.fullscreen=false;this.source=undefined;this.container=undefined;this.isOpen=false;this.close=()=>this.isOpen=false;this.scope=undefined;this.boundary="page"}async watchToggleOpen(n){const r=++this.currentWatchToggleOpenExecution;const t="atomic-modal-opened";if(n){this.wasEverOpened=true;document.body.classList.add(t);this.bindings.interfaceElement.classList.add(t);await this.waitForAnimationEnded();if(r!==this.currentWatchToggleOpenExecution){return}this.focusTrap.active=true}else{document.body.classList.remove(t);this.bindings.interfaceElement.classList.remove(t);if(m()){await this.waitForAnimationEnded()}if(r!==this.currentWatchToggleOpenExecution){return}this.focusTrap.active=false}}handleCloseOnEscape(n){if(n.key?.toLowerCase()==="escape"){this.close()}}waitForAnimationEnded(){return new Promise((n=>h(this.animatableContainer,"animationend",n)))}getClasses(){const n=[];if(this.isOpen){n.push("open")}if(this.fullscreen){n.push("fullscreen")}else{n.push("dialog")}return n}onWindowTouchMove(n){this.isOpen&&n.preventDefault()}componentDidLoad(){this.watchToggleOpen(this.isOpen)}render(){this.updateBreakpoints();const n=()=>e("article",{key:"749eb629b6f3141c9f6ff7d08bf5a52d5c90ea74",part:"container",class:`bg-background text-on-background flex flex-col justify-between ${this.isOpen?"animate-open":"animate-close"} ${this.wasEverOpened?"":"invisible"}`,onAnimationEnd:()=>this.animationEnded.emit(),ref:n=>this.animatableContainer=n},e("header",{key:"dd7cc67f5424fe1b05625d46b8d91aaeaa749685",part:"header-wrapper",class:"flex flex-col items-center"},e("div",{key:"04ca04e43941216205f66735c207b694ce11c67a",part:"header",class:"flex w-full max-w-lg justify-between text-xl",id:this.headerId},e("slot",{key:"09abeba813a3d949bedc45560b63d75fd27adcb3",name:"header"}))),e("hr",{key:"45d5b95049e42d72e5ba81bdead54c1d58422216",part:"header-ruler",class:"border-neutral border-t"}),e("div",{key:"30cabf8bc6ec0667c319c9be6f6c5b8f8d3fdad3",part:"body-wrapper",class:"flex w-full grow flex-col items-center overflow-auto"},e("div",{key:"021e59be3704d528b962c07cba8b4cca55eb8a4a",part:"body",class:"w-full max-w-lg",ref:n=>n?.addEventListener("touchmove",(n=>this.isOpen&&n.stopPropagation()),{passive:false})},e("slot",{key:"fba708a6e166412032d536ca7e7a9a9566802bca",name:"body"}))),e("footer",{key:"fa6e8efb1415c16e733c96131c5ad02cc9eb84c3",part:"footer-wrapper",class:"border-neutral bg-background z-10 flex w-full flex-col items-center border-t"},e("div",{key:"5b1c175177df718afab9a80033f5dd8d0c4cf39f",part:"footer",class:"w-full max-w-lg"},e("slot",{key:"3698110b32c649b996440be7ecdac6579875b713",name:"footer"}))));return e(a,{key:"c4a57fd1689c7fdb880556a6df0ee826512cc4a9",class:this.getClasses().join(" "),"data-nosnippet":true},e("div",{key:"9b474e0bccf138d02bdbb005e2f861c828426e26",part:"backdrop",class:` ${this.boundary==="page"?"fixed":"absolute"} top-0 right-0 bottom-0 left-0 z-9999`,onClick:n=>n.target===n.currentTarget&&this.close()},e("atomic-focus-trap",{key:"572c229576cbf8e10de6f013f8078be7a83164cd",role:"dialog","aria-modal":this.isOpen.toString(),"aria-labelledby":this.headerId,source:this.source,container:this.container??this.host,ref:n=>this.focusTrap=n,scope:this.scope},e(n,{key:"ea99476d9966b0573bc6458ec3ff33aebd10406f"}))))}get host(){return r(this)}static get watchers(){return{isOpen:["watchToggleOpen"]}}};f([p()],y.prototype,"bindings",void 0);y.style=u;export{v as atomic_focus_trap,y as atomic_modal};
|
|
2
|
+
//# sourceMappingURL=p-55c12e5f.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["AtomicFocusTrap","this","active","shouldHideSelf","scope","document","body","hiddenElements","hide","element","hasAttribute","tagName","toLowerCase","setAttribute","push","showAll","el","pop","removeAttribute","hideSiblingsRecursively","parent","getParent","Array","from","children","forEach","sibling","assignedSlot","isAncestorOf","host","showSelf","parentToHide","hideSelf","onDeactivated","isInitialLoad","defer","source","focus","onActivated","getFirstFocusableDescendant","activeChanged","wasActive","onFocusChanged","e","elementIsPartOfHost","focusedElement","elementIsPartOfScope","target","getFocusedElement","connectedCallback","disconnectedCallback","container","atomicModalCss","AtomicModalStyle0","AtomicModal","fullscreen","isOpen","close","boundary","wasEverOpened","headerId","randomID","currentWatchToggleOpenExecution","updateBreakpoints","once","watchToggleOpen","watchToggleOpenExecution","modalOpenedClass","classList","add","bindings","interfaceElement","waitForAnimationEnded","focusTrap","remove","isIOS","handleCloseOnEscape","key","Promise","resolve","listenOnce","animatableContainer","getClasses","classes","onWindowTouchMove","preventDefault","componentDidLoad","render","Content","h","part","class","onAnimationEnd","animationEnded","emit","ref","id","name","addEventListener","stopPropagation","passive","Host","join","onClick","currentTarget","role","toString","__decorate","InitializeBindings"],"sources":["src/components/common/atomic-focus-trap.tsx","src/components/common/atomic-modal/atomic-modal.pcss?tag=atomic-modal&encapsulation=shadow","src/components/common/atomic-modal/atomic-modal.tsx"],"sourcesContent":["import {Component, Element, Listen, Prop, Watch} from '@stencil/core';\nimport {getFirstFocusableDescendant} from '../../utils/stencil-accessibility-utils';\nimport {\n isAncestorOf,\n defer,\n getFocusedElement,\n getParent,\n} from '../../utils/utils';\n\n/**\n * @internal\n */\n@Component({\n tag: 'atomic-focus-trap',\n shadow: false,\n})\nexport class AtomicFocusTrap {\n @Element() private host!: HTMLElement;\n @Prop() public active = false;\n /**\n * The source to focus when the focus trap becomes inactive.\n */\n @Prop({mutable: true}) source?: HTMLElement;\n /**\n * The container to hide from the tabindex and accessibility DOM when the focus trap is inactive.\n */\n @Prop({mutable: true}) container?: HTMLElement;\n\n /**\n * Whether the element should be hidden from screen readers & not interactive with the tab, when not active.\n */\n @Prop() shouldHideSelf = true;\n\n /**\n * The common ancestor of the focus trap and of all the elements that should be inaccessible when inside the focus trap.\n */\n @Prop() scope = document.body;\n\n private readonly hiddenElements: Element[] = [];\n\n hide(element: Element) {\n // aria-hidden -> already hidden\n // aria-live or atomic-aria-live -> must not be hidden otherwise it won't announce dynamic changes in the live region\n if (\n element.hasAttribute('aria-hidden') ||\n element.hasAttribute('aria-live') ||\n element.tagName.toLowerCase() === 'atomic-aria-live'\n ) {\n return;\n }\n element.setAttribute('aria-hidden', 'true');\n this.hiddenElements.push(element);\n }\n\n showAll() {\n let el: Element | undefined;\n while ((el = this.hiddenElements.pop())) {\n el.removeAttribute('aria-hidden');\n }\n }\n\n hideSiblingsRecursively(element: Element | ShadowRoot) {\n const parent = getParent(element);\n if (parent === null) {\n return;\n }\n Array.from(parent.children as HTMLCollection).forEach((sibling) => {\n if (sibling === element) {\n return;\n }\n if (\n sibling.assignedSlot &&\n isAncestorOf(this.host, sibling.assignedSlot)\n ) {\n return;\n }\n this.hide(sibling);\n });\n if (parent !== this.scope) {\n this.hideSiblingsRecursively(parent);\n }\n }\n\n showSelf() {\n this.parentToHide.removeAttribute('aria-hidden');\n this.parentToHide.removeAttribute('tabindex');\n }\n\n hideSelf() {\n if (this.shouldHideSelf) {\n this.parentToHide.setAttribute('aria-hidden', 'true');\n this.parentToHide.setAttribute('tabindex', '-1');\n }\n }\n\n async onDeactivated(isInitialLoad: boolean) {\n this.showAll();\n if (!isInitialLoad) {\n await defer();\n this.source?.focus();\n }\n this.hideSelf();\n }\n\n async onActivated(isInitialLoad: boolean) {\n this.showSelf();\n if (!isInitialLoad) {\n await defer();\n getFirstFocusableDescendant(this.host)?.focus();\n }\n this.hideSiblingsRecursively(this.host);\n }\n\n @Watch('active')\n async activeChanged(active: boolean, wasActive: boolean) {\n const isInitialLoad = active === wasActive;\n if (active) {\n await this.onActivated(isInitialLoad);\n } else {\n await this.onDeactivated(isInitialLoad);\n }\n }\n\n @Listen('focusin', {target: 'document'})\n onFocusChanged(e: FocusEvent) {\n const elementIsPartOfHost = (focusedElement: Element | ShadowRoot) =>\n isAncestorOf(this.host, focusedElement);\n\n const elementIsPartOfScope = (focusedElement: Element | ShadowRoot) =>\n isAncestorOf(this.scope, focusedElement);\n\n if (!e.target || !this.active) {\n return;\n }\n\n const focusedElement = getFocusedElement();\n\n if (\n focusedElement &&\n (elementIsPartOfHost(focusedElement) ||\n !elementIsPartOfScope(focusedElement))\n ) {\n return;\n }\n\n getFirstFocusableDescendant(this.host)?.focus();\n }\n\n connectedCallback() {\n this.activeChanged(this.active, this.active);\n }\n\n disconnectedCallback() {\n this.showAll();\n }\n\n private get parentToHide() {\n return this.container ?? this.host;\n }\n}\n","@import '../../../global/global.pcss';\n\n[part='backdrop'] {\n @apply pointer-events-none;\n}\n\narticle.animate-open {\n @apply animate-scale-up-modal;\n}\narticle.animate-close {\n @apply animate-slide-down-modal;\n}\n\natomic-focus-trap {\n @apply contents;\n}\n\n[part='container'] {\n @apply overflow-hidden;\n grid-area: modal;\n}\n\n.animate-scaleUpModalIPX[part='container'] {\n @apply rounded shadow;\n}\n\n:host(.open) {\n [part='backdrop'] {\n @apply pointer-events-auto;\n }\n}\n\n:host(.open.dialog) {\n [part='backdrop'] {\n background-color: rgba(40, 40, 40, 0.8);\n }\n}\n\n:host(.dialog) {\n [part='backdrop'] {\n @apply grid p-6;\n transition: background-color 500ms ease-in-out;\n\n grid-template-areas:\n '. . .'\n '. modal .'\n '. . .';\n\n grid-template-columns: 1fr min(30rem, 100%) 1fr;\n grid-template-rows: 1fr auto 3fr;\n }\n\n [part='container'] {\n @apply rounded shadow;\n }\n\n [part='header-wrapper'] {\n @apply px-6 py-4;\n }\n\n [part='header'] {\n @apply font-bold;\n }\n\n [part='body-wrapper'] {\n @apply p-6;\n }\n\n [part='footer-wrapper'] {\n @apply bg-neutral-light;\n padding: 1rem 1.125rem;\n }\n}\n\n:host(.fullscreen) {\n [part='container'] {\n @apply absolute inset-0;\n }\n\n [part='header-wrapper'] {\n @apply p-6;\n }\n\n [part='body-wrapper'] {\n @apply px-6 pt-8 pb-5;\n }\n\n [part='footer-wrapper'] {\n @apply shadow-t-lg px-6 py-4;\n }\n}\n","import {\n Component,\n h,\n State,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Host,\n Listen,\n} from '@stencil/core';\nimport {isIOS} from '../../../utils/device-utils';\nimport {listenOnce} from '../../../utils/event-utils';\nimport {\n InitializableComponent,\n InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {updateBreakpoints} from '../../../utils/replace-breakpoint';\nimport {once, randomID} from '../../../utils/utils';\nimport {AnyBindings} from '../interface/bindings';\n\n/**\n * When the modal is opened, the class `atomic-modal-opened` is added to the interfaceElement and the body, allowing further customization.\n *\n * @part backdrop - The transparent backdrop hiding the content behind the modal.\n * @part container - The modal's outermost container with the outline and background.\n * @part header-wrapper - The wrapper around the header.\n * @part header - The header at the top of the modal.\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 footer-wrapper - The wrapper with a shadow or background color around the footer.\n * @part footer - The footer at the bottom of the modal.\n * @internal\n */\n@Component({\n tag: 'atomic-modal',\n styleUrl: 'atomic-modal.pcss',\n shadow: true,\n})\nexport class AtomicModal implements InitializableComponent<AnyBindings> {\n @InitializeBindings() public bindings!: AnyBindings;\n @Element() public host!: HTMLElement;\n\n @State() public error!: Error;\n\n @Prop({reflect: true, mutable: true}) fullscreen = false;\n @Prop({mutable: true}) source?: HTMLElement;\n /**\n * The container to hide from the tabindex and accessibility DOM when the modal is closed.\n */\n @Prop({mutable: true}) container?: HTMLElement;\n @Prop({reflect: true, mutable: true}) isOpen = false;\n @Prop({mutable: true}) close: () => void = () => (this.isOpen = false);\n @Prop({reflect: true}) scope?: HTMLElement;\n /**\n * Whether to display the open and close animations over the entire page or the atomic-modal only.\n */\n @Prop({reflect: true}) boundary: 'page' | 'element' = 'page';\n\n @Event() animationEnded!: EventEmitter<never>;\n\n private wasEverOpened = false;\n private headerId = randomID('atomic-modal-header-');\n private focusTrap?: HTMLAtomicFocusTrapElement;\n private animatableContainer?: HTMLElement;\n private currentWatchToggleOpenExecution = 0;\n\n @Watch('isOpen')\n async watchToggleOpen(isOpen: boolean) {\n const watchToggleOpenExecution = ++this.currentWatchToggleOpenExecution;\n const modalOpenedClass = 'atomic-modal-opened';\n\n if (isOpen) {\n this.wasEverOpened = true;\n document.body.classList.add(modalOpenedClass);\n this.bindings.interfaceElement.classList.add(modalOpenedClass);\n await this.waitForAnimationEnded();\n if (watchToggleOpenExecution !== this.currentWatchToggleOpenExecution) {\n return;\n }\n this.focusTrap!.active = true;\n } else {\n document.body.classList.remove(modalOpenedClass);\n this.bindings.interfaceElement.classList.remove(modalOpenedClass);\n if (isIOS()) {\n await this.waitForAnimationEnded();\n }\n if (watchToggleOpenExecution !== this.currentWatchToggleOpenExecution) {\n return;\n }\n this.focusTrap!.active = false;\n }\n }\n\n @Listen('keyup', {target: 'body'})\n handleCloseOnEscape(e: KeyboardEvent) {\n if (e.key?.toLowerCase() === 'escape') {\n this.close();\n }\n }\n\n private waitForAnimationEnded() {\n // The focus trap focuses its first child when active. It cannot do that while an animation is ongoing.\n return new Promise((resolve) =>\n listenOnce(this.animatableContainer!, 'animationend', resolve)\n );\n }\n\n private getClasses() {\n const classes: string[] = [];\n if (this.isOpen) {\n classes.push('open');\n }\n if (this.fullscreen) {\n classes.push('fullscreen');\n } else {\n classes.push('dialog');\n }\n return classes;\n }\n\n @Listen('touchmove', {passive: false})\n onWindowTouchMove(e: Event) {\n this.isOpen && e.preventDefault();\n }\n\n public componentDidLoad() {\n this.watchToggleOpen(this.isOpen);\n }\n\n private updateBreakpoints = once(() => updateBreakpoints(this.host));\n\n public render() {\n this.updateBreakpoints();\n\n const Content = () => (\n <article\n part=\"container\"\n class={`bg-background text-on-background flex flex-col justify-between ${this.isOpen ? 'animate-open' : 'animate-close'} ${this.wasEverOpened ? '' : 'invisible'}`}\n onAnimationEnd={() => this.animationEnded.emit()}\n ref={(ref) => (this.animatableContainer = ref)}\n >\n <header part=\"header-wrapper\" class=\"flex flex-col items-center\">\n <div\n part=\"header\"\n class=\"flex w-full max-w-lg justify-between text-xl\"\n id={this.headerId}\n >\n <slot name=\"header\"></slot>\n </div>\n </header>\n <hr part=\"header-ruler\" class=\"border-neutral border-t\"></hr>\n <div\n part=\"body-wrapper\"\n class=\"flex w-full grow flex-col items-center overflow-auto\"\n >\n <div\n part=\"body\"\n class=\"w-full max-w-lg\"\n ref={(element) =>\n element?.addEventListener(\n 'touchmove',\n (e) => this.isOpen && e.stopPropagation(),\n {passive: false}\n )\n }\n >\n <slot name=\"body\"></slot>\n </div>\n </div>\n <footer\n part=\"footer-wrapper\"\n class=\"border-neutral bg-background z-10 flex w-full flex-col items-center border-t\"\n >\n <div part=\"footer\" class=\"w-full max-w-lg\">\n <slot name=\"footer\"></slot>\n </div>\n </footer>\n </article>\n );\n\n return (\n <Host class={this.getClasses().join(' ')} data-nosnippet>\n <div\n part=\"backdrop\"\n class={` ${this.boundary === 'page' ? 'fixed' : 'absolute'} top-0 right-0 bottom-0 left-0 z-9999`}\n onClick={(e) => e.target === e.currentTarget && this.close()}\n >\n <atomic-focus-trap\n role=\"dialog\"\n aria-modal={this.isOpen.toString()}\n aria-labelledby={this.headerId}\n source={this.source}\n container={this.container ?? this.host}\n ref={(ref) => (this.focusTrap = ref)}\n scope={this.scope}\n >\n <Content />\n </atomic-focus-trap>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"ybAgBaA,EAAe,M,yBAEXC,KAAAC,OAAS,MAahBD,KAAAE,eAAiB,KAKjBF,KAAAG,MAAQC,SAASC,KAERL,KAAAM,eAA4B,G,YApBrB,M,mEAaC,K,WAKTF,SAASC,I,CAIzB,IAAAE,CAAKC,GAGH,GACEA,EAAQC,aAAa,gBACrBD,EAAQC,aAAa,cACrBD,EAAQE,QAAQC,gBAAkB,mBAClC,CACA,M,CAEFH,EAAQI,aAAa,cAAe,QACpCZ,KAAKM,eAAeO,KAAKL,E,CAG3B,OAAAM,GACE,IAAIC,EACJ,MAAQA,EAAKf,KAAKM,eAAeU,MAAQ,CACvCD,EAAGE,gBAAgB,c,EAIvB,uBAAAC,CAAwBV,GACtB,MAAMW,EAASC,EAAUZ,GACzB,GAAIW,IAAW,KAAM,CACnB,M,CAEFE,MAAMC,KAAKH,EAAOI,UAA4BC,SAASC,IACrD,GAAIA,IAAYjB,EAAS,CACvB,M,CAEF,GACEiB,EAAQC,cACRC,EAAa3B,KAAK4B,KAAMH,EAAQC,cAChC,CACA,M,CAEF1B,KAAKO,KAAKkB,EAAQ,IAEpB,GAAIN,IAAWnB,KAAKG,MAAO,CACzBH,KAAKkB,wBAAwBC,E,EAIjC,QAAAU,GACE7B,KAAK8B,aAAab,gBAAgB,eAClCjB,KAAK8B,aAAab,gBAAgB,W,CAGpC,QAAAc,GACE,GAAI/B,KAAKE,eAAgB,CACvBF,KAAK8B,aAAalB,aAAa,cAAe,QAC9CZ,KAAK8B,aAAalB,aAAa,WAAY,K,EAI/C,mBAAMoB,CAAcC,GAClBjC,KAAKc,UACL,IAAKmB,EAAe,OACZC,IACNlC,KAAKmC,QAAQC,O,CAEfpC,KAAK+B,U,CAGP,iBAAMM,CAAYJ,GAChBjC,KAAK6B,WACL,IAAKI,EAAe,OACZC,IACNI,EAA4BtC,KAAK4B,OAAOQ,O,CAE1CpC,KAAKkB,wBAAwBlB,KAAK4B,K,CAIpC,mBAAMW,CAActC,EAAiBuC,GACnC,MAAMP,EAAgBhC,IAAWuC,EACjC,GAAIvC,EAAQ,OACJD,KAAKqC,YAAYJ,E,KAClB,OACCjC,KAAKgC,cAAcC,E,EAK7B,cAAAQ,CAAeC,GACb,MAAMC,EAAuBC,GAC3BjB,EAAa3B,KAAK4B,KAAMgB,GAE1B,MAAMC,EAAwBD,GAC5BjB,EAAa3B,KAAKG,MAAOyC,GAE3B,IAAKF,EAAEI,SAAW9C,KAAKC,OAAQ,CAC7B,M,CAGF,MAAM2C,EAAiBG,IAEvB,GACEH,IACCD,EAAoBC,KAClBC,EAAqBD,IACxB,CACA,M,CAGFN,EAA4BtC,KAAK4B,OAAOQ,O,CAG1C,iBAAAY,GACEhD,KAAKuC,cAAcvC,KAAKC,OAAQD,KAAKC,O,CAGvC,oBAAAgD,GACEjD,KAAKc,S,CAGP,gBAAYgB,GACV,OAAO9B,KAAKkD,WAAalD,KAAK4B,I,oFC7JlC,MAAMuB,EAAiB,ww6DACvB,MAAAC,EAAeD,E,iXCwCFE,EAAW,M,wEAMgBrD,KAAAsD,WAAa,MAMbtD,KAAAuD,OAAS,MACxBvD,KAAAwD,MAAoB,IAAOxD,KAAKuD,OAAS,MAKzCvD,KAAAyD,SAA+B,OAI9CzD,KAAA0D,cAAgB,MAChB1D,KAAA2D,SAAWC,EAAS,wBAGpB5D,KAAA6D,gCAAkC,EAiElC7D,KAAA8D,kBAAoBC,GAAK,IAAMD,EAAkB9D,KAAK4B,Q,qCArFX,M,2DAMJ,M,WACJ,IAAO5B,KAAKuD,OAAS,M,mCAKV,M,CAWtD,qBAAMS,CAAgBT,GACpB,MAAMU,IAA6BjE,KAAK6D,gCACxC,MAAMK,EAAmB,sBAEzB,GAAIX,EAAQ,CACVvD,KAAK0D,cAAgB,KACrBtD,SAASC,KAAK8D,UAAUC,IAAIF,GAC5BlE,KAAKqE,SAASC,iBAAiBH,UAAUC,IAAIF,SACvClE,KAAKuE,wBACX,GAAIN,IAA6BjE,KAAK6D,gCAAiC,CACrE,M,CAEF7D,KAAKwE,UAAWvE,OAAS,I,KACpB,CACLG,SAASC,KAAK8D,UAAUM,OAAOP,GAC/BlE,KAAKqE,SAASC,iBAAiBH,UAAUM,OAAOP,GAChD,GAAIQ,IAAS,OACL1E,KAAKuE,uB,CAEb,GAAIN,IAA6BjE,KAAK6D,gCAAiC,CACrE,M,CAEF7D,KAAKwE,UAAWvE,OAAS,K,EAK7B,mBAAA0E,CAAoBjC,GAClB,GAAIA,EAAEkC,KAAKjE,gBAAkB,SAAU,CACrCX,KAAKwD,O,EAID,qBAAAe,GAEN,OAAO,IAAIM,SAASC,GAClBC,EAAW/E,KAAKgF,oBAAsB,eAAgBF,I,CAIlD,UAAAG,GACN,MAAMC,EAAoB,GAC1B,GAAIlF,KAAKuD,OAAQ,CACf2B,EAAQrE,KAAK,O,CAEf,GAAIb,KAAKsD,WAAY,CACnB4B,EAAQrE,KAAK,a,KACR,CACLqE,EAAQrE,KAAK,S,CAEf,OAAOqE,C,CAIT,iBAAAC,CAAkBzC,GAChB1C,KAAKuD,QAAUb,EAAE0C,gB,CAGZ,gBAAAC,GACLrF,KAAKgE,gBAAgBhE,KAAKuD,O,CAKrB,MAAA+B,GACLtF,KAAK8D,oBAEL,MAAMyB,EAAU,IACdC,EAAA,WAAAZ,IAAA,2CACEa,KAAK,YACLC,MAAO,kEAAkE1F,KAAKuD,OAAS,eAAiB,mBAAmBvD,KAAK0D,cAAgB,GAAK,cACrJiC,eAAgB,IAAM3F,KAAK4F,eAAeC,OAC1CC,IAAMA,GAAS9F,KAAKgF,oBAAsBc,GAE1CN,EAAA,UAAAZ,IAAA,2CAAQa,KAAK,iBAAiBC,MAAM,8BAClCF,EAAA,OAAAZ,IAAA,2CACEa,KAAK,SACLC,MAAM,+CACNK,GAAI/F,KAAK2D,UAET6B,EAAA,QAAAZ,IAAA,2CAAMoB,KAAK,aAGfR,EAAA,MAAAZ,IAAA,2CAAIa,KAAK,eAAeC,MAAM,4BAC9BF,EAAA,OAAAZ,IAAA,2CACEa,KAAK,eACLC,MAAM,wDAENF,EAAA,OAAAZ,IAAA,2CACEa,KAAK,OACLC,MAAM,kBACNI,IAAMtF,GACJA,GAASyF,iBACP,aACCvD,GAAM1C,KAAKuD,QAAUb,EAAEwD,mBACxB,CAACC,QAAS,SAIdX,EAAA,QAAAZ,IAAA,2CAAMoB,KAAK,WAGfR,EAAA,UAAAZ,IAAA,2CACEa,KAAK,iBACLC,MAAM,gFAENF,EAAA,OAAAZ,IAAA,2CAAKa,KAAK,SAASC,MAAM,mBACvBF,EAAA,QAAAZ,IAAA,2CAAMoB,KAAK,cAMnB,OACER,EAACY,EAAI,CAAAxB,IAAA,2CAACc,MAAO1F,KAAKiF,aAAaoB,KAAK,KAAI,uBACtCb,EAAA,OAAAZ,IAAA,2CACEa,KAAK,WACLC,MAAO,IAAI1F,KAAKyD,WAAa,OAAS,QAAU,kDAChD6C,QAAU5D,GAAMA,EAAEI,SAAWJ,EAAE6D,eAAiBvG,KAAKwD,SAErDgC,EAAA,qBAAAZ,IAAA,2CACE4B,KAAK,SAAQ,aACDxG,KAAKuD,OAAOkD,WAAU,kBACjBzG,KAAK2D,SACtBxB,OAAQnC,KAAKmC,OACbe,UAAWlD,KAAKkD,WAAalD,KAAK4B,KAClCkE,IAAMA,GAAS9F,KAAKwE,UAAYsB,EAChC3F,MAAOH,KAAKG,OAEZqF,EAACD,EAAO,CAAAX,IAAA,+C,sFA7JW8B,EAAA,CAA5BC,K","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["AtomicFocusTrap","this","active","shouldHideSelf","scope","document","body","hiddenElements","hide","element","hasAttribute","tagName","toLowerCase","setAttribute","push","showAll","el","pop","removeAttribute","hideSiblingsRecursively","parent","getParent","Array","from","children","forEach","sibling","assignedSlot","isAncestorOf","host","showSelf","parentToHide","hideSelf","onDeactivated","isInitialLoad","defer","source","focus","onActivated","getFirstFocusableDescendant","activeChanged","wasActive","onFocusChanged","e","elementIsPartOfHost","focusedElement","elementIsPartOfScope","target","getFocusedElement","connectedCallback","disconnectedCallback","container","atomicModalCss","AtomicModalStyle0","AtomicModal","fullscreen","isOpen","close","boundary","wasEverOpened","headerId","randomID","currentWatchToggleOpenExecution","updateBreakpoints","once","watchToggleOpen","watchToggleOpenExecution","modalOpenedClass","classList","add","bindings","interfaceElement","waitForAnimationEnded","focusTrap","remove","isIOS","handleCloseOnEscape","key","Promise","resolve","listenOnce","animatableContainer","getClasses","classes","onWindowTouchMove","preventDefault","componentDidLoad","render","Content","h","part","class","onAnimationEnd","animationEnded","emit","ref","id","name","addEventListener","stopPropagation","passive","Host","join","onClick","currentTarget","role","toString","__decorate","InitializeBindings"],"sources":["src/components/common/atomic-focus-trap.tsx","src/components/common/atomic-modal/atomic-modal.pcss?tag=atomic-modal&encapsulation=shadow","src/components/common/atomic-modal/atomic-modal.tsx"],"sourcesContent":["import {Component, Element, Listen, Prop, Watch} from '@stencil/core';\nimport {getFirstFocusableDescendant} from '../../utils/stencil-accessibility-utils';\nimport {\n isAncestorOf,\n defer,\n getFocusedElement,\n getParent,\n} from '../../utils/utils';\n\n/**\n * @internal\n */\n@Component({\n tag: 'atomic-focus-trap',\n shadow: false,\n})\nexport class AtomicFocusTrap {\n @Element() private host!: HTMLElement;\n @Prop() public active = false;\n /**\n * The source to focus when the focus trap becomes inactive.\n */\n @Prop({mutable: true}) source?: HTMLElement;\n /**\n * The container to hide from the tabindex and accessibility DOM when the focus trap is inactive.\n */\n @Prop({mutable: true}) container?: HTMLElement;\n\n /**\n * Whether the element should be hidden from screen readers & not interactive with the tab, when not active.\n */\n @Prop() shouldHideSelf = true;\n\n /**\n * The common ancestor of the focus trap and of all the elements that should be inaccessible when inside the focus trap.\n */\n @Prop() scope = document.body;\n\n private readonly hiddenElements: Element[] = [];\n\n hide(element: Element) {\n // aria-hidden -> already hidden\n // aria-live or atomic-aria-live -> must not be hidden otherwise it won't announce dynamic changes in the live region\n if (\n element.hasAttribute('aria-hidden') ||\n element.hasAttribute('aria-live') ||\n element.tagName.toLowerCase() === 'atomic-aria-live'\n ) {\n return;\n }\n element.setAttribute('aria-hidden', 'true');\n this.hiddenElements.push(element);\n }\n\n showAll() {\n let el: Element | undefined;\n while ((el = this.hiddenElements.pop())) {\n el.removeAttribute('aria-hidden');\n }\n }\n\n hideSiblingsRecursively(element: Element | ShadowRoot) {\n const parent = getParent(element);\n if (parent === null) {\n return;\n }\n Array.from(parent.children as HTMLCollection).forEach((sibling) => {\n if (sibling === element) {\n return;\n }\n if (\n sibling.assignedSlot &&\n isAncestorOf(this.host, sibling.assignedSlot)\n ) {\n return;\n }\n this.hide(sibling);\n });\n if (parent !== this.scope) {\n this.hideSiblingsRecursively(parent);\n }\n }\n\n showSelf() {\n this.parentToHide.removeAttribute('aria-hidden');\n this.parentToHide.removeAttribute('tabindex');\n }\n\n hideSelf() {\n if (this.shouldHideSelf) {\n this.parentToHide.setAttribute('aria-hidden', 'true');\n this.parentToHide.setAttribute('tabindex', '-1');\n }\n }\n\n async onDeactivated(isInitialLoad: boolean) {\n this.showAll();\n if (!isInitialLoad) {\n await defer();\n this.source?.focus();\n }\n this.hideSelf();\n }\n\n async onActivated(isInitialLoad: boolean) {\n this.showSelf();\n if (!isInitialLoad) {\n await defer();\n getFirstFocusableDescendant(this.host)?.focus();\n }\n this.hideSiblingsRecursively(this.host);\n }\n\n @Watch('active')\n async activeChanged(active: boolean, wasActive: boolean) {\n const isInitialLoad = active === wasActive;\n if (active) {\n await this.onActivated(isInitialLoad);\n } else {\n await this.onDeactivated(isInitialLoad);\n }\n }\n\n @Listen('focusin', {target: 'document'})\n onFocusChanged(e: FocusEvent) {\n const elementIsPartOfHost = (focusedElement: Element | ShadowRoot) =>\n isAncestorOf(this.host, focusedElement);\n\n const elementIsPartOfScope = (focusedElement: Element | ShadowRoot) =>\n isAncestorOf(this.scope, focusedElement);\n\n if (!e.target || !this.active) {\n return;\n }\n\n const focusedElement = getFocusedElement();\n\n if (\n focusedElement &&\n (elementIsPartOfHost(focusedElement) ||\n !elementIsPartOfScope(focusedElement))\n ) {\n return;\n }\n\n getFirstFocusableDescendant(this.host)?.focus();\n }\n\n connectedCallback() {\n this.activeChanged(this.active, this.active);\n }\n\n disconnectedCallback() {\n this.showAll();\n }\n\n private get parentToHide() {\n return this.container ?? this.host;\n }\n}\n","@import '../../../global/global.pcss';\n\n[part='backdrop'] {\n @apply pointer-events-none;\n}\n\narticle.animate-open {\n @apply animate-scale-up-modal;\n}\narticle.animate-close {\n @apply animate-slide-down-modal;\n}\n\natomic-focus-trap {\n @apply contents;\n}\n\n[part='container'] {\n @apply overflow-hidden;\n grid-area: modal;\n}\n\n.animate-scaleUpModalIPX[part='container'] {\n @apply rounded shadow;\n}\n\n:host(.open) {\n [part='backdrop'] {\n @apply pointer-events-auto;\n }\n}\n\n:host(.open.dialog) {\n [part='backdrop'] {\n background-color: rgba(40, 40, 40, 0.8);\n }\n}\n\n:host(.dialog) {\n [part='backdrop'] {\n @apply grid p-6;\n transition: background-color 500ms ease-in-out;\n\n grid-template-areas:\n '. . .'\n '. modal .'\n '. . .';\n\n grid-template-columns: 1fr min(30rem, 100%) 1fr;\n grid-template-rows: 1fr auto 3fr;\n }\n\n [part='container'] {\n @apply rounded shadow;\n }\n\n [part='header-wrapper'] {\n @apply px-6 py-4;\n }\n\n [part='header'] {\n @apply font-bold;\n }\n\n [part='body-wrapper'] {\n @apply p-6;\n }\n\n [part='footer-wrapper'] {\n @apply bg-neutral-light;\n padding: 1rem 1.125rem;\n }\n}\n\n:host(.fullscreen) {\n [part='container'] {\n @apply absolute inset-0;\n }\n\n [part='header-wrapper'] {\n @apply p-6;\n }\n\n [part='body-wrapper'] {\n @apply px-6 pt-8 pb-5;\n }\n\n [part='footer-wrapper'] {\n @apply shadow-t-lg px-6 py-4;\n }\n}\n","import {\n Component,\n h,\n State,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Host,\n Listen,\n} from '@stencil/core';\nimport {isIOS} from '../../../utils/device-utils';\nimport {listenOnce} from '../../../utils/event-utils';\nimport {\n InitializableComponent,\n InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {updateBreakpoints} from '../../../utils/replace-breakpoint';\nimport {once, randomID} from '../../../utils/utils';\nimport {AnyBindings} from '../interface/bindings';\n\n/**\n * When the modal is opened, the class `atomic-modal-opened` is added to the interfaceElement and the body, allowing further customization.\n *\n * @part backdrop - The transparent backdrop hiding the content behind the modal.\n * @part container - The modal's outermost container with the outline and background.\n * @part header-wrapper - The wrapper around the header.\n * @part header - The header at the top of the modal.\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 footer-wrapper - The wrapper with a shadow or background color around the footer.\n * @part footer - The footer at the bottom of the modal.\n * @internal\n */\n@Component({\n tag: 'atomic-modal',\n styleUrl: 'atomic-modal.pcss',\n shadow: true,\n})\nexport class AtomicModal implements InitializableComponent<AnyBindings> {\n @InitializeBindings() public bindings!: AnyBindings;\n @Element() public host!: HTMLElement;\n\n @State() public error!: Error;\n\n @Prop({reflect: true, mutable: true}) fullscreen = false;\n @Prop({mutable: true}) source?: HTMLElement;\n /**\n * The container to hide from the tabindex and accessibility DOM when the modal is closed.\n */\n @Prop({mutable: true}) container?: HTMLElement;\n @Prop({reflect: true, mutable: true}) isOpen = false;\n @Prop({mutable: true}) close: () => void = () => (this.isOpen = false);\n @Prop({reflect: true}) scope?: HTMLElement;\n /**\n * Whether to display the open and close animations over the entire page or the atomic-modal only.\n */\n @Prop({reflect: true}) boundary: 'page' | 'element' = 'page';\n\n @Event() animationEnded!: EventEmitter<never>;\n\n private wasEverOpened = false;\n private headerId = randomID('atomic-modal-header-');\n private focusTrap?: HTMLAtomicFocusTrapElement;\n private animatableContainer?: HTMLElement;\n private currentWatchToggleOpenExecution = 0;\n\n @Watch('isOpen')\n async watchToggleOpen(isOpen: boolean) {\n const watchToggleOpenExecution = ++this.currentWatchToggleOpenExecution;\n const modalOpenedClass = 'atomic-modal-opened';\n\n if (isOpen) {\n this.wasEverOpened = true;\n document.body.classList.add(modalOpenedClass);\n this.bindings.interfaceElement.classList.add(modalOpenedClass);\n await this.waitForAnimationEnded();\n if (watchToggleOpenExecution !== this.currentWatchToggleOpenExecution) {\n return;\n }\n this.focusTrap!.active = true;\n } else {\n document.body.classList.remove(modalOpenedClass);\n this.bindings.interfaceElement.classList.remove(modalOpenedClass);\n if (isIOS()) {\n await this.waitForAnimationEnded();\n }\n if (watchToggleOpenExecution !== this.currentWatchToggleOpenExecution) {\n return;\n }\n this.focusTrap!.active = false;\n }\n }\n\n @Listen('keyup', {target: 'body'})\n handleCloseOnEscape(e: KeyboardEvent) {\n if (e.key?.toLowerCase() === 'escape') {\n this.close();\n }\n }\n\n private waitForAnimationEnded() {\n // The focus trap focuses its first child when active. It cannot do that while an animation is ongoing.\n return new Promise((resolve) =>\n listenOnce(this.animatableContainer!, 'animationend', resolve)\n );\n }\n\n private getClasses() {\n const classes: string[] = [];\n if (this.isOpen) {\n classes.push('open');\n }\n if (this.fullscreen) {\n classes.push('fullscreen');\n } else {\n classes.push('dialog');\n }\n return classes;\n }\n\n @Listen('touchmove', {passive: false})\n onWindowTouchMove(e: Event) {\n this.isOpen && e.preventDefault();\n }\n\n public componentDidLoad() {\n this.watchToggleOpen(this.isOpen);\n }\n\n private updateBreakpoints = once(() => updateBreakpoints(this.host));\n\n public render() {\n this.updateBreakpoints();\n\n const Content = () => (\n <article\n part=\"container\"\n class={`bg-background text-on-background flex flex-col justify-between ${this.isOpen ? 'animate-open' : 'animate-close'} ${this.wasEverOpened ? '' : 'invisible'}`}\n onAnimationEnd={() => this.animationEnded.emit()}\n ref={(ref) => (this.animatableContainer = ref)}\n >\n <header part=\"header-wrapper\" class=\"flex flex-col items-center\">\n <div\n part=\"header\"\n class=\"flex w-full max-w-lg justify-between text-xl\"\n id={this.headerId}\n >\n <slot name=\"header\"></slot>\n </div>\n </header>\n <hr part=\"header-ruler\" class=\"border-neutral border-t\"></hr>\n <div\n part=\"body-wrapper\"\n class=\"flex w-full grow flex-col items-center overflow-auto\"\n >\n <div\n part=\"body\"\n class=\"w-full max-w-lg\"\n ref={(element) =>\n element?.addEventListener(\n 'touchmove',\n (e) => this.isOpen && e.stopPropagation(),\n {passive: false}\n )\n }\n >\n <slot name=\"body\"></slot>\n </div>\n </div>\n <footer\n part=\"footer-wrapper\"\n class=\"border-neutral bg-background z-10 flex w-full flex-col items-center border-t\"\n >\n <div part=\"footer\" class=\"w-full max-w-lg\">\n <slot name=\"footer\"></slot>\n </div>\n </footer>\n </article>\n );\n\n return (\n <Host class={this.getClasses().join(' ')} data-nosnippet>\n <div\n part=\"backdrop\"\n class={` ${this.boundary === 'page' ? 'fixed' : 'absolute'} top-0 right-0 bottom-0 left-0 z-9999`}\n onClick={(e) => e.target === e.currentTarget && this.close()}\n >\n <atomic-focus-trap\n role=\"dialog\"\n aria-modal={this.isOpen.toString()}\n aria-labelledby={this.headerId}\n source={this.source}\n container={this.container ?? this.host}\n ref={(ref) => (this.focusTrap = ref)}\n scope={this.scope}\n >\n <Content />\n </atomic-focus-trap>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"ybAgBaA,EAAe,M,yBAEXC,KAAAC,OAAS,MAahBD,KAAAE,eAAiB,KAKjBF,KAAAG,MAAQC,SAASC,KAERL,KAAAM,eAA4B,G,YApBrB,M,mEAaC,K,WAKTF,SAASC,I,CAIzB,IAAAE,CAAKC,GAGH,GACEA,EAAQC,aAAa,gBACrBD,EAAQC,aAAa,cACrBD,EAAQE,QAAQC,gBAAkB,mBAClC,CACA,M,CAEFH,EAAQI,aAAa,cAAe,QACpCZ,KAAKM,eAAeO,KAAKL,E,CAG3B,OAAAM,GACE,IAAIC,EACJ,MAAQA,EAAKf,KAAKM,eAAeU,MAAQ,CACvCD,EAAGE,gBAAgB,c,EAIvB,uBAAAC,CAAwBV,GACtB,MAAMW,EAASC,EAAUZ,GACzB,GAAIW,IAAW,KAAM,CACnB,M,CAEFE,MAAMC,KAAKH,EAAOI,UAA4BC,SAASC,IACrD,GAAIA,IAAYjB,EAAS,CACvB,M,CAEF,GACEiB,EAAQC,cACRC,EAAa3B,KAAK4B,KAAMH,EAAQC,cAChC,CACA,M,CAEF1B,KAAKO,KAAKkB,EAAQ,IAEpB,GAAIN,IAAWnB,KAAKG,MAAO,CACzBH,KAAKkB,wBAAwBC,E,EAIjC,QAAAU,GACE7B,KAAK8B,aAAab,gBAAgB,eAClCjB,KAAK8B,aAAab,gBAAgB,W,CAGpC,QAAAc,GACE,GAAI/B,KAAKE,eAAgB,CACvBF,KAAK8B,aAAalB,aAAa,cAAe,QAC9CZ,KAAK8B,aAAalB,aAAa,WAAY,K,EAI/C,mBAAMoB,CAAcC,GAClBjC,KAAKc,UACL,IAAKmB,EAAe,OACZC,IACNlC,KAAKmC,QAAQC,O,CAEfpC,KAAK+B,U,CAGP,iBAAMM,CAAYJ,GAChBjC,KAAK6B,WACL,IAAKI,EAAe,OACZC,IACNI,EAA4BtC,KAAK4B,OAAOQ,O,CAE1CpC,KAAKkB,wBAAwBlB,KAAK4B,K,CAIpC,mBAAMW,CAActC,EAAiBuC,GACnC,MAAMP,EAAgBhC,IAAWuC,EACjC,GAAIvC,EAAQ,OACJD,KAAKqC,YAAYJ,E,KAClB,OACCjC,KAAKgC,cAAcC,E,EAK7B,cAAAQ,CAAeC,GACb,MAAMC,EAAuBC,GAC3BjB,EAAa3B,KAAK4B,KAAMgB,GAE1B,MAAMC,EAAwBD,GAC5BjB,EAAa3B,KAAKG,MAAOyC,GAE3B,IAAKF,EAAEI,SAAW9C,KAAKC,OAAQ,CAC7B,M,CAGF,MAAM2C,EAAiBG,IAEvB,GACEH,IACCD,EAAoBC,KAClBC,EAAqBD,IACxB,CACA,M,CAGFN,EAA4BtC,KAAK4B,OAAOQ,O,CAG1C,iBAAAY,GACEhD,KAAKuC,cAAcvC,KAAKC,OAAQD,KAAKC,O,CAGvC,oBAAAgD,GACEjD,KAAKc,S,CAGP,gBAAYgB,GACV,OAAO9B,KAAKkD,WAAalD,KAAK4B,I,oFC7JlC,MAAMuB,EAAiB,6w6DACvB,MAAAC,EAAeD,E,iXCwCFE,EAAW,M,wEAMgBrD,KAAAsD,WAAa,MAMbtD,KAAAuD,OAAS,MACxBvD,KAAAwD,MAAoB,IAAOxD,KAAKuD,OAAS,MAKzCvD,KAAAyD,SAA+B,OAI9CzD,KAAA0D,cAAgB,MAChB1D,KAAA2D,SAAWC,EAAS,wBAGpB5D,KAAA6D,gCAAkC,EAiElC7D,KAAA8D,kBAAoBC,GAAK,IAAMD,EAAkB9D,KAAK4B,Q,qCArFX,M,2DAMJ,M,WACJ,IAAO5B,KAAKuD,OAAS,M,mCAKV,M,CAWtD,qBAAMS,CAAgBT,GACpB,MAAMU,IAA6BjE,KAAK6D,gCACxC,MAAMK,EAAmB,sBAEzB,GAAIX,EAAQ,CACVvD,KAAK0D,cAAgB,KACrBtD,SAASC,KAAK8D,UAAUC,IAAIF,GAC5BlE,KAAKqE,SAASC,iBAAiBH,UAAUC,IAAIF,SACvClE,KAAKuE,wBACX,GAAIN,IAA6BjE,KAAK6D,gCAAiC,CACrE,M,CAEF7D,KAAKwE,UAAWvE,OAAS,I,KACpB,CACLG,SAASC,KAAK8D,UAAUM,OAAOP,GAC/BlE,KAAKqE,SAASC,iBAAiBH,UAAUM,OAAOP,GAChD,GAAIQ,IAAS,OACL1E,KAAKuE,uB,CAEb,GAAIN,IAA6BjE,KAAK6D,gCAAiC,CACrE,M,CAEF7D,KAAKwE,UAAWvE,OAAS,K,EAK7B,mBAAA0E,CAAoBjC,GAClB,GAAIA,EAAEkC,KAAKjE,gBAAkB,SAAU,CACrCX,KAAKwD,O,EAID,qBAAAe,GAEN,OAAO,IAAIM,SAASC,GAClBC,EAAW/E,KAAKgF,oBAAsB,eAAgBF,I,CAIlD,UAAAG,GACN,MAAMC,EAAoB,GAC1B,GAAIlF,KAAKuD,OAAQ,CACf2B,EAAQrE,KAAK,O,CAEf,GAAIb,KAAKsD,WAAY,CACnB4B,EAAQrE,KAAK,a,KACR,CACLqE,EAAQrE,KAAK,S,CAEf,OAAOqE,C,CAIT,iBAAAC,CAAkBzC,GAChB1C,KAAKuD,QAAUb,EAAE0C,gB,CAGZ,gBAAAC,GACLrF,KAAKgE,gBAAgBhE,KAAKuD,O,CAKrB,MAAA+B,GACLtF,KAAK8D,oBAEL,MAAMyB,EAAU,IACdC,EAAA,WAAAZ,IAAA,2CACEa,KAAK,YACLC,MAAO,kEAAkE1F,KAAKuD,OAAS,eAAiB,mBAAmBvD,KAAK0D,cAAgB,GAAK,cACrJiC,eAAgB,IAAM3F,KAAK4F,eAAeC,OAC1CC,IAAMA,GAAS9F,KAAKgF,oBAAsBc,GAE1CN,EAAA,UAAAZ,IAAA,2CAAQa,KAAK,iBAAiBC,MAAM,8BAClCF,EAAA,OAAAZ,IAAA,2CACEa,KAAK,SACLC,MAAM,+CACNK,GAAI/F,KAAK2D,UAET6B,EAAA,QAAAZ,IAAA,2CAAMoB,KAAK,aAGfR,EAAA,MAAAZ,IAAA,2CAAIa,KAAK,eAAeC,MAAM,4BAC9BF,EAAA,OAAAZ,IAAA,2CACEa,KAAK,eACLC,MAAM,wDAENF,EAAA,OAAAZ,IAAA,2CACEa,KAAK,OACLC,MAAM,kBACNI,IAAMtF,GACJA,GAASyF,iBACP,aACCvD,GAAM1C,KAAKuD,QAAUb,EAAEwD,mBACxB,CAACC,QAAS,SAIdX,EAAA,QAAAZ,IAAA,2CAAMoB,KAAK,WAGfR,EAAA,UAAAZ,IAAA,2CACEa,KAAK,iBACLC,MAAM,gFAENF,EAAA,OAAAZ,IAAA,2CAAKa,KAAK,SAASC,MAAM,mBACvBF,EAAA,QAAAZ,IAAA,2CAAMoB,KAAK,cAMnB,OACER,EAACY,EAAI,CAAAxB,IAAA,2CAACc,MAAO1F,KAAKiF,aAAaoB,KAAK,KAAI,uBACtCb,EAAA,OAAAZ,IAAA,2CACEa,KAAK,WACLC,MAAO,IAAI1F,KAAKyD,WAAa,OAAS,QAAU,kDAChD6C,QAAU5D,GAAMA,EAAEI,SAAWJ,EAAE6D,eAAiBvG,KAAKwD,SAErDgC,EAAA,qBAAAZ,IAAA,2CACE4B,KAAK,SAAQ,aACDxG,KAAKuD,OAAOkD,WAAU,kBACjBzG,KAAK2D,SACtBxB,OAAQnC,KAAKmC,OACbe,UAAWlD,KAAKkD,WAAalD,KAAK4B,KAClCkE,IAAMA,GAAS9F,KAAKwE,UAAYsB,EAChC3F,MAAOH,KAAKG,OAEZqF,EAACD,EAAO,CAAAX,IAAA,+C,sFA7JW8B,EAAA,CAA5BC,K","ignoreList":[]}
|