{"version":3,"file":"outline.js","sources":["../src/components/controllers/resize-controller.ts","../src/components/controllers/screen-size-controller.ts","../node_modules/lit-html/lit-html.js","../node_modules/lit-html/directive.js","../node_modules/lit-html/directives/class-map.js","../node_modules/lit-html/directives/if-defined.js","../node_modules/lit-html/static.js","../src/components/controllers/slot-manager.ts","../node_modules/@lit/reactive-element/decorators/custom-element.js","../node_modules/@lit/reactive-element/decorators/property.js","../node_modules/@lit/reactive-element/decorators/state.js","../node_modules/@lit/reactive-element/decorators/base.js","../node_modules/@lit/reactive-element/decorators/query.js","../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js","../node_modules/@lit/reactive-element/decorators/query-assigned-nodes.js","../node_modules/@lit/reactive-element/css-tag.js","../node_modules/@lit/reactive-element/reactive-element.js","../node_modules/lit-element/lit-element.js","../src/components/chop/chop-admin-links/chop-admin-links.css.lit.ts","../node_modules/@phase2/outline-core/src/outline-element/outline-element.ts","../node_modules/@phase2/outline-core/src/controllers/container-size-controller.ts","../node_modules/@phase2/outline-core/src/controllers/mobile-controller.ts","../node_modules/@phase2/outline-core/src/controllers/screen-size-controller.ts","../node_modules/@phase2/outline-core/src/controllers/slots-controller.ts","../node_modules/@phase2/outline-core/src/internal/event.ts","../node_modules/@phase2/outline-core/src/internal/watch.ts","../node_modules/@phase2/outline-core/index.ts","../node_modules/@phase2/outline-admin-links/src/outline-admin-links.css.lit.ts","../node_modules/@phase2/outline-admin-links/src/outline-admin-links.ts","../src/components/chop/chop-admin-links/chop-admin-links.ts","../src/components/chop/chop-alert/chop-alert.css.lit.ts","../node_modules/lit-html/directives/unsafe-html.js","../node_modules/lit-html/directives/unsafe-svg.js","../src/utilities/isInType.ts","../src/components/chop/chop-icon/libraries/library.system.ts","../src/components/chop/chop-icon/library.ts","../node_modules/@phase2/outline-icon/src/libraries/library.system.ts","../node_modules/@phase2/outline-icon/src/library.ts","../node_modules/@phase2/outline-icon/src/libraries/library.bootstrap.ts","../node_modules/@phase2/outline-icon/src/libraries/library.boxicons.ts","../node_modules/@phase2/outline-icon/src/libraries/library.lucide.ts","../node_modules/@phase2/outline-icon/src/libraries/library.heroicons.ts","../node_modules/@phase2/outline-icon/src/libraries/library.iconoir.ts","../node_modules/@phase2/outline-icon/src/libraries/library.ionicons.ts","../node_modules/@phase2/outline-icon/src/libraries/library.jam.ts","../node_modules/@phase2/outline-icon/src/libraries/library.fontawesome.ts","../node_modules/@phase2/outline-icon/src/libraries/library.material.ts","../node_modules/@phase2/outline-icon/src/libraries/library.remix.ts","../node_modules/@phase2/outline-icon/src/libraries/library.unicons.ts","../node_modules/@phase2/outline-icon/src/libraries/library.custom.ts","../node_modules/@phase2/outline-include/src/outline-include.css.lit.ts","../node_modules/@phase2/outline-include/src/request.ts","../node_modules/@phase2/outline-include/src/outline-include.ts","../node_modules/@phase2/outline-icon/src/request.ts","../node_modules/@phase2/outline-icon/src/outline-icon.css.lit.ts","../node_modules/@phase2/outline-icon/src/outline-icon.ts","../src/components/chop/chop-icon/chop-icon.css.lit.ts","../src/utilities/isValidCssSize.ts","../src/components/chop/chop-icon/chop-icon.ts","../src/components/chop/chop-collapsible-panel/chop-collapsible-panel.css.lit.ts","../src/components/chop/chop-collapsible-panel/chop-collapsible-panel.ts","../src/components/chop/chop-heading/chop-heading.css.lit.ts","../src/components/chop/chop-heading/chop-heading.ts","../src/components/chop/chop-styled-text/chop-styled-text.css.lit.ts","../src/components/chop/chop-styled-text/chop-styled-text.ts","../src/components/chop/chop-alert/chop-alert.ts","../src/components/chop/chop-alphabet-results/chop-alphabet-results.css.lit.ts","../src/components/chop/chop-alphabet-results/chop-alphabet-results.ts","../src/components/chop/chop-article-hero/chop-article-hero.css.lit.ts","../src/components/chop/chop-woven-svgs/libraries/library.woven.ts","../src/components/chop/chop-woven-svgs/library.ts","../src/components/chop/chop-woven-svgs/request.ts","../src/components/chop/chop-woven-svgs/chop-woven-svgs.css.lit.ts","../src/components/chop/chop-woven-svgs/chop-woven-svgs.ts","../src/components/chop/chop-container/chop-container.css.lit.ts","../src/components/chop/chop-container/chop-container.ts","../src/components/chop/chop-breadcrumb/chop-breadcrumb.css.lit.ts","../src/components/chop/chop-text-hero/chop-text-hero.ts","../src/components/chop/chop-text-hero/chop-text-hero.css.lit.ts","../src/components/chop/chop-basic-hero/chop-basic-hero.css.lit.ts","../src/components/chop/chop-basic-hero/chop-basic-hero.ts","../src/components/chop/chop-location-hero/chop-location-hero.css.lit.ts","../src/components/chop/chop-core-link/chop-core-link.css.lit.ts","../src/components/chop/chop-core-link/chop-core-link.ts","../src/components/chop/chop-link/chop-link.ts","../src/components/chop/chop-cta-link/chop-cta-link.css.lit.ts","../src/components/chop/chop-cta-link/chop-cta-link.ts","../src/components/chop/chop-video-player/chop-video-player.css.lit.ts","../src/resolved-tailwind-config.ts","../src/components/chop/chop-accordion/chop-accordion-wrapper/chop-accordion.css.lit.ts","../src/components/chop/chop-accordion/chop-accordion-wrapper/chop-accordion.ts","../src/components/chop/chop-accordion/chop-accordion-panel/chop-accordion-panel.css.lit.ts","../src/components/chop/chop-accordion/chop-accordion-panel/chop-accordion-panel.ts","../node_modules/@phase2/outline-video-youtube/src/outline-video-youtube.css.lit.ts","../node_modules/@phase2/outline-video-youtube/src/outline-video-youtube.ts","../src/components/chop/chop-video-player/chop-video-player.ts","../src/utilities/utils.ts","../src/components/chop/chop-location-hero/chop-location-hero.ts","../src/components/chop/chop-image-hero/chop-image-hero.css.lit.ts","../src/components/chop/chop-image-hero/chop-image-hero.ts","../src/components/chop/chop-ways-to-give-hero/chop-ways-to-give-hero.css.lit.ts","../src/components/chop/chop-grid/chop-grid.ts","../src/components/chop/chop-grid/chop-grid.css.lit.ts","../src/components/chop/chop-column/chop-column.css.lit.ts","../src/components/chop/chop-column/chop-column.ts","../src/components/chop/chop-ways-to-give-hero/chop-ways-to-give-hero.ts","../src/components/chop/chop-breadcrumb-pacman/chop-breadcrumb-pacman.css.lit.ts","../src/components/chop/chop-breadcrumb-pacman/chop-breadcrumb-pacman.ts","../src/components/chop/chop-breadcrumb/chop-breadcrumb.ts","../src/components/chop/chop-article-hero/chop-article-hero.ts","../src/components/chop/chop-attribute-cascade/chop-attribute-cascade.css.lit.ts","../src/components/chop/chop-attribute-cascade/chop-attribute-cascade.ts","../src/components/chop/chop-basic-card/chop-basic-card.css.lit.ts","../src/components/chop/chop-basic-card/chop-basic-card.ts","../src/utilities/isValidUrl.ts","../src/components/chop/chop-blockquote/chop-blockquote.css.lit.ts","../src/components/chop/chop-blockquote/chop-blockquote.ts","../src/components/chop/chop-button/chop-button.css.lit.ts","../src/components/chop/chop-button/chop-button.ts","../src/components/chop/chop-callout-card/chop-callout-card.css.lit.ts","../src/components/chop/chop-callout-card/chop-callout-card.ts","../src/components/chop/chop-callout-card-two-column/chop-callout-card-two-column.css.lit.ts","../src/components/chop/chop-callout-card-two-column/chop-callout-card-two-column.ts","../src/components/chop/chop-card-grid/chop-card-grid.css.lit.ts","../node_modules/lit-html/directives/style-map.js","../src/components/chop/chop-card-grid/chop-card-grid.ts","../node_modules/swiper/shared/ssr-window.esm.mjs","../node_modules/swiper/shared/utils.mjs","../node_modules/swiper/shared/swiper-core.mjs","../node_modules/swiper/shared/create-element-if-not-defined.mjs","../node_modules/swiper/shared/classes-to-selector.mjs","../node_modules/swiper/modules/manipulation.mjs","../node_modules/swiper/shared/effect-init.mjs","../node_modules/swiper/shared/effect-target.mjs","../node_modules/swiper/shared/effect-virtual-transition-end.mjs","../node_modules/swiper/shared/create-shadow.mjs","../node_modules/swiper/swiper-bundle.mjs","../node_modules/swiper/modules/virtual.mjs","../node_modules/swiper/modules/keyboard.mjs","../node_modules/swiper/modules/mousewheel.mjs","../node_modules/swiper/modules/navigation.mjs","../node_modules/swiper/modules/pagination.mjs","../node_modules/swiper/modules/scrollbar.mjs","../node_modules/swiper/modules/parallax.mjs","../node_modules/swiper/modules/zoom.mjs","../node_modules/swiper/modules/controller.mjs","../node_modules/swiper/modules/a11y.mjs","../node_modules/swiper/modules/history.mjs","../node_modules/swiper/modules/hash-navigation.mjs","../node_modules/swiper/modules/autoplay.mjs","../node_modules/swiper/modules/thumbs.mjs","../node_modules/swiper/modules/free-mode.mjs","../node_modules/swiper/modules/grid.mjs","../node_modules/swiper/modules/effect-fade.mjs","../node_modules/swiper/modules/effect-cube.mjs","../node_modules/swiper/modules/effect-flip.mjs","../node_modules/swiper/modules/effect-coverflow.mjs","../node_modules/swiper/modules/effect-creative.mjs","../node_modules/swiper/modules/effect-cards.mjs","../node_modules/swiper/shared/update-swiper.mjs","../node_modules/swiper/shared/get-element-params.mjs","../node_modules/swiper/swiper-element-bundle.mjs","../src/components/chop/chop-carousel/chop-carousel.css.lit.ts","../src/components/chop/chop-carousel/chop-carousel.ts","../src/components/chop/chop-carousel-card/chop-carousel-card.css.lit.ts","../src/components/chop/chop-carousel-card/chop-carousel-card.ts","../src/components/chop/chop-chart-wrapper/chop-chart-wrapper.ts","../src/components/chop/chop-color-cta/chop-color-cta.css.lit.ts","../src/components/chop/chop-color-cta/chop-color-cta.ts","../src/components/chop/chop-contact-block/chop-contact-block.css.lit.ts","../src/components/chop/chop-contact-block/chop-contact-block.ts","../src/components/chop/chop-content-quote/chop-content-quote-card.css.lit.ts","../src/components/chop/chop-content-quote/chop-content-quote-card.ts","../src/components/chop/chop-content-width-card/chop-content-width-card.css.lit.ts","../src/components/chop/chop-content-width-card/chop-content-width-card.ts","../src/components/chop/chop-dialog/chop-dialog.css.lit.ts","../src/utilities/dialog.ts","../src/components/chop/chop-dialog/chop-dialog.ts","../src/components/chop/chop-embedded-form-container/chop-embedded-form-container.css.lit.ts","../src/components/chop/chop-embedded-form-container/chop-embedded-form-container.ts","../src/components/chop/chop-event-bar/chop-event-bar.css.lit.ts","../src/components/chop/chop-event-bar/chop-event-bar.ts","../src/components/chop/chop-expandible-container/chop-expandible-container.css.lit.ts","../src/components/chop/chop-expandible-container/chop-expandible-container.ts","../src/components/chop/chop-expandible-link-list/chop-expandible-link-list.css.lit.ts","../src/components/chop/chop-expandible-link-list/chop-expandible-link-list.ts","../src/components/chop/chop-feature-card/chop-feature-card.css.lit.ts","../src/components/chop/chop-feature-card/chop-feature-card.ts","../src/components/chop/chop-featured-articles/chop-featured-articles.css.lit.ts","../src/components/chop/chop-featured-articles/chop-featured-articles.ts","../src/components/chop/chop-field-label-value/chop-field-label-value.css.lit.ts","../src/components/chop/chop-field-label-value/chop-field-label-value.ts","../src/components/chop/chop-filter-dropdown/chop-filter-dropdown.css.lit.ts","../src/components/chop/chop-styled-text/chop-styled-text.global.scoped.css.lit.ts","../src/components/chop/chop-filter-dropdown/chop-filter-dropdown.ts","../src/components/chop/chop-footer/chop-footer.css.lit.ts","../src/components/chop/chop-hr/chop-hr.css.lit.ts","../src/components/chop/chop-hr/chop-hr.ts","../src/components/chop/chop-logo/chop-logo.css.lit.ts","../src/components/chop/chop-logo/chop-logo-svg.ts","../src/components/chop/chop-logo/chop-foundation-logo-svg.ts","../src/components/chop/chop-logo/chop-vec-logo-svg.ts","../src/components/chop/chop-logo/chop-pack-logo-svg.ts","../src/components/chop/chop-logo/chop-vuhp-logo-svg.ts","../src/components/chop/chop-logo/chop-logo.ts","../src/components/chop/chop-footer/chop-footer.ts","../src/components/chop/chop-full-feature/chop-full-feature.css.lit.ts","../src/components/chop/chop-full-feature/chop-full-feature.ts","../src/components/chop/chop-fullscreen-cta/chop-fullscreen-cta.css.lit.ts","../src/components/chop/chop-fullscreen-cta/chop-fullscreen-cta.ts","../src/components/chop/chop-hamburger-menu/chop-hamburger-menu.css.lit.ts","../src/components/chop/chop-hamburger-menu/chop-hamburger-menu.ts","../src/components/chop/chop-header/chop-header.css.lit.ts","../src/components/chop/chop-menu/chop-menu.css.lit.ts","../src/components/chop/chop-menu/chop-menu.ts","../src/components/chop/chop-header/chop-header.ts","../src/components/chop/chop-header/logo-markup.ts","../src/components/chop/chop-header-wrapper/chop-header-wrapper.css.lit.ts","../src/components/chop/chop-utility-nav/chop-utility-nav.css.lit.ts","../src/components/chop/chop-utility-nav/chop-utility-nav.ts","../src/components/chop/chop-promotional-model/chop-promotional-model.css.lit.ts","../src/components/chop/chop-promotional-model/chop-promotional-model.ts","../src/components/chop/chop-menu-dialog/chop-menu-dialog.css.lit.ts","../src/components/chop/chop-menu-dialog/chop-menu-dialog.ts","../src/components/chop/chop-search-bar/chop-search-bar.css.lit.ts","../src/components/chop/chop-search-bar/chop-search-bar.ts","../src/components/chop/chop-menu-cards/chop-menu-card/chop-menu-card.css.lit.ts","../src/components/chop/chop-menu-cards/chop-menu-card/chop-menu-card.ts","../src/components/chop/chop-header-wrapper/chop-header-wrapper.ts","../src/components/chop/chop-health-professional-hero/chop-health-professional-hero.css.lit.ts","../src/components/chop/chop-health-professional-hero/chop-health-professional-hero.ts","../src/components/chop/chop-health-professional-list/chop-health-professional-list.css.lit.ts","../src/components/chop/chop-health-professional-list/chop-health-professional-list.ts","../src/components/chop/chop-hours-block/chop-hours-block.css.lit.ts","../src/components/chop/chop-hours-block/chop-hours-block.ts","../src/components/chop/chop-icon/request.ts","../src/components/chop/chop-icon-heading/chop-icon-heading.css.lit.ts","../src/components/chop/chop-icon-heading/chop-icon-heading.ts","../src/components/chop/chop-icon-list/chop-icon-list.css.lit.ts","../src/components/chop/chop-icon-list/chop-icon-list.ts","../src/components/chop/chop-image-fallback/chop-image-fallback.css.lit.ts","../src/components/chop/chop-image-fallback/chop-image-fallback.ts","../src/components/chop/chop-jump-link-visibility-toggle/chop-jump-link-visibility-toggle.ts","../src/components/chop/chop-jump-nav/chop-jump-nav.css.lit.ts","../src/components/chop/chop-jump-nav-item/chop-jump-nav-item.css.lit.ts","../src/components/chop/chop-jump-nav-item/chop-jump-nav-item.ts","../src/components/chop/chop-jump-nav/chop-jump-nav.ts","../src/components/chop/chop-large-circle-feature/chop-large-circle-feature.css.lit.ts","../src/components/chop/chop-large-circle-feature/chop-large-circle-feature.ts","../src/components/chop/chop-link-list/chop-link-list.css.lit.ts","../src/components/chop/chop-link-list/chop-link-list.ts","../src/components/chop/chop-pagination/chop-pagination.css.lit.ts","../src/components/chop/chop-pagination/chop-pagination.ts","../src/components/chop/chop-rating/chop-rating.css.lit.ts","../src/components/chop/chop-rating/chop-rating.ts","../src/components/chop/chop-rating-line/chop-rating-line.css.lit.ts","../src/components/chop/chop-rating-line/chop-rating-line.ts","../src/components/chop/chop-research-studies-hero/chop-research-studies-hero.css.lit.ts","../src/components/chop/chop-research-studies-hero/chop-research-studies-hero.ts","../src/components/chop/chop-research-studies-search/chop-research-studies-search.css.lit.ts","../src/components/chop/chop-research-studies-search/chop-research-studies-search.ts","../src/components/chop/chop-resource-search/chop-resource-search.css.lit.ts","../src/components/chop/chop-resource-search/chop-resource-search.ts","../src/components/chop/chop-search-category/chop-search-category.css.lit.ts","../src/components/chop/chop-search-category/chop-search-category.ts","../src/components/chop/chop-search-filter-sidebar/chop-search-filter-sidebar.css.lit.ts","../src/components/chop/chop-search-filter-sidebar/chop-search-filter-sidebar.ts","../src/components/chop/chop-search-hero/chop-search-hero.css.lit.ts","../src/components/chop/chop-search-hero/chop-search-hero.ts","../src/components/chop/chop-search-result/chop-search-result.css.lit.ts","../src/components/chop/chop-search-result/chop-search-result.ts","../src/components/chop/chop-side-menu/chop-side-menu.css.lit.ts","../src/components/chop/chop-side-menu/chop-side-menu.ts","../src/components/chop/chop-side-utility-nav/chop-side-utility-nav.css.lit.ts","../src/components/chop/chop-side-utility-nav/chop-side-utility-nav.ts","../src/components/chop/chop-small-circle-feature/chop-small-circle-feature.css.lit.ts","../src/components/chop/chop-small-circle-feature/chop-small-circle-feature.ts","../src/components/chop/chop-stat/chop-stat.css.lit.ts","../src/components/chop/chop-stat/chop-stat.ts","../src/components/chop/chop-text-box/chop-text-box.css.lit.ts","../src/components/chop/chop-text-box/chop-text-box.ts","../src/components/chop/chop-timeline-card/chop-timeline-card.css.lit.ts","../src/components/chop/chop-timeline-card/chop-timeline-card.ts","../src/components/chop/chop-typeahead/chop-typeahead.css.lit.ts","../src/components/chop/chop-typeahead/chop-typeahead.ts","../src/components/chop/chop-video-hero/chop-video-hero.css.lit.ts","../src/components/chop/chop-video-hero/chop-video-hero.ts","../src/components/chop/chop-wysiwyg-card/chop-wysiwyg-card.css.lit.ts","../src/components/chop/chop-wysiwyg-card/chop-wysiwyg-card.ts","../src/components/utility/outline-swatch/outline-swatch.css.lit.ts","../src/components/utility/outline-swatch/outline-swatch.ts","../src/components/utility/outline-swatch-set/outline-swatch-set.css.lit.ts","../src/components/utility/outline-swatch-set/outline-swatch-set.ts","../src/components/utility/sb-section-link/sb-section-link.css.lit.ts","../src/components/utility/sb-section-link/sb-section-link.ts","../src/components/chop/chop-alphabet-results/chop-alphabet-category/chop-alphabet-category.css.lit.ts","../src/components/chop/chop-alphabet-results/chop-alphabet-category/chop-alphabet-category.ts","../src/components/chop/chop-contact-block/chop-contact-card/chop-contact-card.css.lit.ts","../src/components/chop/chop-contact-block/chop-contact-card/chop-contact-card.ts","../src/components/chop/chop-featured-articles/chop-featured-articles-category/chop-featured-articles-category.css.lit.ts","../src/components/chop/chop-featured-articles/chop-featured-articles-category/chop-featured-articles-category.ts","../src/components/chop/chop-kyruus/chop-kyruus-checkbox-facet/chop-kyruus-checkbox-facet.css.lit.ts","../src/components/chop/chop-kyruus/chop-kyruus-checkbox-facet/chop-kyruus-checkbox-facet.ts","../src/components/chop/chop-kyruus/chop-kyruus-facet-wrapper/chop-kyruus-facet-wrapper.css.lit.ts","../src/components/chop/chop-kyruus/chop-kyruus-facet-wrapper/chop-kyruus-facet-wrapper.ts","../src/components/chop/chop-kyruus/chop-kyruus-location-facet/chop-kyruus-location-facet.css.lit.ts","../src/components/chop/chop-kyruus/chop-kyruus-location-facet/chop-kyruus-location-facet.ts","../src/components/chop/chop-kyruus/chop-kyruus-result-summary/chop-kyruus-result-summary.css.lit.ts","../src/components/chop/chop-kyruus/chop-kyruus-result-summary/chop-kyruus-result-summary.ts","../src/components/chop/chop-kyruus/chop-kyruus-search-block/chop-kyruus-search-block.css.lit.ts","../src/components/chop/chop-kyruus/chop-kyruus-search-block/chop-kyruus-search-block.ts","../src/components/chop/chop-menu-cards/chop-menu-card-link-list/chop-menu-card-link-list.css.lit.ts","../src/components/chop/chop-menu-cards/chop-menu-card-link-list/chop-menu-card-link-list.ts","../src/components/chop/chop-search-map/chop-leaflet-map/chop-leaflet-map.css.lit.ts","../node_modules/leaflet/dist/leaflet-src.js","../src/components/chop/chop-search-map/chop-leaflet-map/chop-leaflet-map.ts","../node_modules/leaflet.markercluster/dist/leaflet.markercluster-src.js","../src/components/chop/chop-search-map/chop-location-listing/chop-location-listing.css.lit.ts","../node_modules/@lit-labs/task/task.js","../src/components/chop/chop-search-map/chop-location-result/chop-location-result.css.lit.ts","../src/components/chop/chop-search-map/chop-location-result/chop-location-result.ts","../src/components/chop/chop-search-map/chop-location-listing/chop-location-listing.ts"],"sourcesContent":["import { ReactiveControllerHost, ReactiveController } from 'lit';\n\n/**\n * Debounces a function\n * @template T\n * @param {T} func - The function to debounce\n * @param {number} delay - The delay in milliseconds\n * @param {boolean} [immediate=false] - Whether to execute the function immediately\n * @returns {(...args: Parameters) => void} - The debounced function\n */\nexport const debounce = ) => void>(\n func: T,\n delay: number,\n immediate = false\n): ((...args: Parameters) => void) => {\n let timeoutId: ReturnType | undefined = undefined;\n\n return function debounced(...args: Parameters) {\n const executeFunc = () => func(...args);\n\n clearTimeout(timeoutId);\n\n if (immediate && timeoutId === undefined) {\n executeFunc();\n }\n\n timeoutId = setTimeout(executeFunc, delay);\n };\n};\n\nexport type breakpointsRangeType = {\n min: number;\n max: number;\n};\n\n/**\n * ResizeController class\n * @implements {ReactiveController}\n */\nexport class ResizeController implements ReactiveController {\n host: ReactiveControllerHost & HTMLElement;\n resizeObserver: ResizeObserver;\n elementToObserve: Element;\n options: {\n debounce: number;\n breakpoints: number[];\n elementToRerender: ReactiveControllerHost & HTMLElement;\n containerQuery?: boolean;\n };\n currentComponentWidth: number;\n currentBreakpointRange: number;\n breakpointsRangeArray: breakpointsRangeType[] = [];\n\n /**\n * Create a constructor that takes a host and options\n * @param {ReactiveControllerHost & Element} host - The host element\n * @param {{debounce?: number; breakpoints?: number[]}} [options={}] - The options object\n */\n constructor(\n host: ReactiveControllerHost & HTMLElement,\n options: {\n debounce?: number;\n breakpoints?: number[];\n elementToRerender?: ReactiveControllerHost & HTMLElement;\n containerQuery?: boolean;\n } = {}\n ) {\n const defaultOptions = {\n debounce: 0,\n breakpoints: [320, 360, 668, 860, 1100, 1400],\n elementToRerender: host,\n containerQuery: true,\n };\n\n /**\n * Remove any undefined variables from options object\n */\n const filteredOptionsObject = Object.fromEntries(\n Object.entries(options).filter(([_, value]) => value !== undefined)\n );\n this.options = { ...defaultOptions, ...filteredOptionsObject };\n\n this.host = host;\n this.host.addController(this);\n\n this.initializeBreakpointsRangeType();\n }\n\n /**\n * Initialize the breakpoints range array\n *\n * The default breakpoints array ([768]) will create this breakpoints range array:\n * [{min: 0, max: 767}, {min: 768, max: 100000}]\n *\n * If custom breakpoints array is provided, (for example [768, 1200, 2000]) this breakpoints range array will be created:\n * [{min: 0, max: 767}, {min: 768, max: 1199}, {min: 1200, max: 1999}, {min: 2000, max: 100000}]\n *\n */\n initializeBreakpointsRangeType() {\n // This will allow create an additional breakpoint from the last custom breakpoint to 100000\n this.options.breakpoints?.push(100000);\n\n let minBreakpoint = 0;\n this.options.breakpoints?.forEach(breakpoint => {\n const newBreakpointRange = {\n min: minBreakpoint,\n max: breakpoint - 1,\n };\n minBreakpoint = breakpoint;\n this.breakpointsRangeArray.push(newBreakpointRange);\n });\n }\n\n /**\n * Called when the host element is connected to the DOM\n */\n hostConnected() {\n if (!this.host.style.display) {\n // adding `display: block` to :host of component\n this.host.style.setProperty(\n 'display',\n 'var(--style-added-by-resize-controller, block)'\n );\n }\n\n // Create a new ResizeObserver and pass in the function to be called when the element is resized\n this.resizeObserver = new ResizeObserver(\n (entries: ResizeObserverEntry[]) => {\n // Create a debounced version of the onElementResize function\n debounce(\n this.onElementResize.bind(this),\n this.options.debounce\n )(entries);\n }\n );\n\n // Get a reference to the element you want to observe\n this.elementToObserve = this.options.containerQuery\n ? this.host\n : document.documentElement;\n\n // Observe the element for size changes\n this.resizeObserver.observe(this.elementToObserve);\n }\n\n /**\n * Called when the host element is disconnected from the DOM\n */\n hostDisconnected() {\n this.resizeObserver.disconnect();\n }\n\n /**\n * Called when the element is resized\n * @param {ResizeObserverEntry[]} _entries - The ResizeObserverEntry array\n */\n onElementResize(_entries: ResizeObserverEntry[]) {\n this.currentComponentWidth = _entries[0].contentRect.width;\n\n // skip if width is not yet set\n if (this.currentComponentWidth) {\n this.calculateNewBreakpointRange();\n }\n }\n\n /**\n * Calculate the new breakpoint based on the current width\n */\n calculateNewBreakpointRange() {\n let newBreakpointRange = this.currentBreakpointRange;\n\n this.breakpointsRangeArray.forEach((breakpoint, index) => {\n if (\n this.currentComponentWidth >= breakpoint.min &&\n this.currentComponentWidth <= breakpoint.max\n ) {\n newBreakpointRange = index;\n }\n });\n\n if (newBreakpointRange !== this.currentBreakpointRange) {\n this.currentBreakpointRange = newBreakpointRange;\n this.options.elementToRerender.requestUpdate();\n }\n }\n}\n","import { ReactiveControllerHost, ReactiveController } from 'lit';\nimport tokens from '../../../dist/tokens.default.json';\n\n/**\n * Screen size lookup, ordered small to large.\n *\n * Notice: If you get a linting issue, `Parsing error: Cannot read properties of undefined (reading 'map')`, you need to update your packages.\n * At least:\n * \"@typescript-eslint/eslint-plugin\": \"^4.0.0\",\n * \"@typescript-eslint/parser\": \"^4.0.0\",\n */\n\nexport const screenSizeMap = new Map(\n (\n Object.entries(tokens.breakpoint).map(([screen, { value }]) => {\n return [screen, value];\n }) as [string, number][]\n ).sort(([, sizeA], [, sizeB]) => {\n return sizeA - sizeB;\n })\n);\n\n/**\n * Usage:\n *\n * Import `screenSizeMap` and `ScreenSizeController`:\n * import {\n * screenSizeMap,\n * ScreenSizeController,\n * } from '../../controllers/screen-size-controller';\n *\n * Add the property to your class:\n *\n * // eslint-disable-next-line\n * // @ts-ignore\n * // We are using the controller to watch for screen size changes, but don't need to use it otherwise.\n * private _screenSizeController = new ScreenSizeController(this);\n *\n * Set a variable as needed:\n * const isMobile = window.innerWidth < (screenSizeMap.get('lg') as number);\n */\nexport class ScreenSizeController implements ReactiveController {\n isMobile = false;\n\n screenSize = 'xxs';\n\n host: ReactiveControllerHost;\n\n resizeObserver: ResizeObserver;\n\n constructor(host: ReactiveControllerHost) {\n (this.host = host).addController(this);\n this.handleResize();\n }\n\n hostConnected() {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n\n this.resizeObserver.observe(document.querySelector('body') as HTMLElement);\n }\n\n hostDisconnected() {\n this.resizeObserver.disconnect();\n }\n\n handleResize = () => {\n const propertyValuesPreUpdate = [\n ['isMobile', this.isMobile],\n ['screenSize', this.screenSize],\n ] as [keyof ScreenSizeController, boolean | string][];\n\n this.isMobile = window.innerWidth <= (screenSizeMap.get('sm') as number);\n\n this.screenSize = Array.from(screenSizeMap).reduce(\n (previousValue, [screen, size]) => {\n return window.innerWidth >= size ? screen : previousValue;\n },\n 'xxs'\n );\n\n if (\n propertyValuesPreUpdate\n .map(([propertyName, preUpdateValue]) => {\n return this[propertyName] !== preUpdateValue;\n })\n .reduce((previous, current) => previous || current)\n ) {\n this.host.requestUpdate();\n }\n };\n}\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nvar t;const i=window,s=i.trustedTypes,e=s?s.createPolicy(\"lit-html\",{createHTML:t=>t}):void 0,o=\"$lit$\",n=`lit$${(Math.random()+\"\").slice(9)}$`,l=\"?\"+n,h=`<${l}>`,r=document,u=()=>r.createComment(\"\"),d=t=>null===t||\"object\"!=typeof t&&\"function\"!=typeof t,c=Array.isArray,v=t=>c(t)||\"function\"==typeof(null==t?void 0:t[Symbol.iterator]),a=\"[ \\t\\n\\f\\r]\",f=/<(?:(!--|\\/[^a-zA-Z])|(\\/?[a-zA-Z][^>\\s]*)|(\\/?$))/g,_=/-->/g,m=/>/g,p=RegExp(`>|${a}(?:([^\\\\s\"'>=/]+)(${a}*=${a}*(?:[^ \\t\\n\\f\\r\"'\\`<>=]|(\"|')|))|$)`,\"g\"),g=/'/g,$=/\"/g,y=/^(?:script|style|textarea|title)$/i,w=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=w(1),b=w(2),T=Symbol.for(\"lit-noChange\"),A=Symbol.for(\"lit-nothing\"),E=new WeakMap,C=r.createTreeWalker(r,129,null,!1);function P(t,i){if(!Array.isArray(t)||!t.hasOwnProperty(\"raw\"))throw Error(\"invalid template strings array\");return void 0!==e?e.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,e=[];let l,r=2===i?\"\":\"\",u=f;for(let i=0;i\"===c[0]?(u=null!=l?l:f,v=-1):void 0===c[1]?v=-2:(v=u.lastIndex-c[2].length,d=c[1],u=void 0===c[3]?p:'\"'===c[3]?$:g):u===$||u===g?u=p:u===_||u===m?u=f:(u=p,l=void 0);const w=u===p&&t[i+1].startsWith(\"/>\")?\" \":\"\";r+=u===f?s+h:v>=0?(e.push(d),s.slice(0,v)+o+s.slice(v)+n+w):s+n+(-2===v?(e.push(void 0),i):w)}return[P(t,r+(t[s]||\"\")+(2===i?\"\":\"\")),e]};class N{constructor({strings:t,_$litType$:i},e){let h;this.parts=[];let r=0,d=0;const c=t.length-1,v=this.parts,[a,f]=V(t,i);if(this.el=N.createElement(a,e),C.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(h=C.nextNode())&&v.length0){h.textContent=s?s.emptyScript:\"\";for(let s=0;s2||\"\"!==s[0]||\"\"!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=S(this,t,i,0),n=!d(t)||t!==this._$AH&&t!==T,n&&(this._$AH=t);else{const e=t;let l,h;for(t=o[0],l=0;l{var e,o;const n=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new R(i.insertBefore(u(),t),t,void 0,null!=s?s:{})}return l._$AI(t),l};export{j as _$LH,x as html,T as noChange,A as nothing,D as render,b as svg};\n//# sourceMappingURL=lit-html.js.map\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}export{i as Directive,t as PartType,e as directive};\n//# sourceMappingURL=directive.js.map\n","import{noChange as t}from\"../lit-html.js\";import{directive as i,Directive as s,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=i(class extends s{constructor(t){var i;if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter((i=>t[i])).join(\" \")+\" \"}update(i,[s]){var r,o;if(void 0===this.it){this.it=new Set,void 0!==i.strings&&(this.nt=new Set(i.strings.join(\" \").split(/\\s/).filter((t=>\"\"!==t))));for(const t in s)s[t]&&!(null===(r=this.nt)||void 0===r?void 0:r.has(t))&&this.it.add(t);return this.render(s)}const e=i.element.classList;this.it.forEach((t=>{t in s||(e.remove(t),this.it.delete(t))}));for(const t in s){const i=!!s[t];i===this.it.has(t)||(null===(o=this.nt)||void 0===o?void 0:o.has(t))||(i?(e.add(t),this.it.add(t)):(e.remove(t),this.it.delete(t)))}return t}});export{o as classMap};\n//# sourceMappingURL=class-map.js.map\n","import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const l=l=>null!=l?l:t;export{l as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n","import{html as t,svg as r}from\"./lit-html.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=Symbol.for(\"\"),l=t=>{if((null==t?void 0:t.r)===e)return null==t?void 0:t._$litStatic$},o=t=>({_$litStatic$:t,r:e}),i=(t,...r)=>({_$litStatic$:r.reduce(((r,e,l)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\\n take care to ensure page security.`)})(e)+t[l+1]),t[0]),r:e}),s=new Map,a=t=>(r,...e)=>{const o=e.length;let i,a;const n=[],u=[];let c,$=0,f=!1;for(;$ this.isDefaultSlotText(node) || this.isDefaultSlotElement(node)\n );\n } else {\n slottedNodes = Array.from(\n this.host.querySelectorAll(`:scope > [slot=${slotName}]`)\n );\n }\n\n if (slottedNodes.length) {\n return slottedNodes;\n } else {\n return false;\n }\n }\n\n /**\n * Check if a slot exists.\n * @param {string | null} slotName - The slot name to check for.\n * @returns {boolean} True if the slot exists, false otherwise.\n */\n exist(slotName: string | null = null) {\n return Boolean(this.getSlottedNodes(slotName));\n }\n\n /**\n * Check if a node is a default slot text.\n * @param {Node} node - The node to check.\n * @returns {boolean} True if the node is a default slot text, false otherwise.\n */\n isDefaultSlotText(node: Node) {\n return node.nodeType === node.TEXT_NODE && node.textContent!.trim() !== '';\n }\n\n /**\n * Check if a node is a default slot element.\n * @param {Node} node - The node to check.\n * @returns {boolean} True if the node is a default slot element, false otherwise.\n */\n isDefaultSlotElement(node: Node) {\n return (\n node.nodeType === node.ELEMENT_NODE &&\n (node as HTMLElement).getAttribute('slot') === null\n );\n }\n\n /**\n * Add annotations to a slot.\n * @param {string} slotName - The slot name.\n * @param {ChildNode} lightDomSlot - The light DOM slot.\n * @returns {HTMLElement} The annotated slot.\n */\n addAnnotations(slotName: string, lightDomSlot: ChildNode) {\n // Create cloned-node element\n const clonedSlot = lightDomSlot.cloneNode(true) as HTMLElement;\n\n // Add a comment above the slot in light DOM, to indicate it was cloned to shadow DOM\n const annotationComment =\n `SlotManager cloned this ` +\n (slotName === '' ? 'default-slot' : `named-slot '${slotName}'`) +\n ` into the shadow DOM`;\n\n // Add the comment only once, avoid duplicate comments when requestUpdate() runs\n // Check if a light DOM comment already exist\n const commentExist = Array.from(this.host.childNodes).some(\n node => node.nodeValue === annotationComment\n );\n if (!commentExist) {\n lightDomSlot.before(document.createComment(annotationComment));\n }\n\n if (slotName !== '') {\n clonedSlot.setAttribute('cloned-slot-type', 'named-slot');\n clonedSlot.setAttribute('cloned-slot-name', slotName);\n clonedSlot.removeAttribute('slot');\n return clonedSlot;\n }\n\n if (this.isDefaultSlotElement(lightDomSlot)) {\n clonedSlot.setAttribute('cloned-slot-type', 'default-slot--element');\n clonedSlot.setAttribute('cloned-slot-name', 'default');\n clonedSlot.removeAttribute('slot');\n return clonedSlot;\n } else {\n // Insert the text-only default slot into a node element\n const slotWrapper = document.createElement('cloned-slot');\n clonedSlot.parentNode?.insertBefore(slotWrapper, clonedSlot);\n slotWrapper.appendChild(clonedSlot);\n slotWrapper.setAttribute('cloned-slot-type', 'default-slot--text');\n slotWrapper.setAttribute('cloned-slot-name', 'default');\n return slotWrapper;\n }\n }\n\n /**\n * Dispatch events from cloned slots in shadow DOM to the equivalent light DOM slot.\n * @param {string[]} eventsToDispatch - The events to dispatch.\n * @param {HTMLElement} clonedSlot - The cloned slot.\n *\n * As there is no way (aside from devtools) to determine what events are occurring in the DOM,\n * what we can do is simulate an event that originated in the shadow DOM.\n * Therefore, clicking on an element in a slotted shadow DOM would simulate a click event\n * on a parallel element in a slotted light DOM.\n *\n * When an event triggers -\n * Step 1 -\n * In the Shadow DOM, identify the path that leads to the element that triggered the event.\n *\n * Step 2 -\n * In the Light DOM, find the equivalent path to the one found in step 1.\n *\n * Step 3 -\n * Dispatch the event to the light DOM, following the same path that was found in step 2.\n *\n * Step 4 -\n * Wait for the component to refresh (by using timeout 0), then focus is reset to the component that hosts the element.\n *\n * Step 5 -\n * Focus the browser on the original element in Shadow DOM that triggered the event found in step 1\n */\n dispatchEventsToLightDom(\n eventsToDispatch: string[],\n clonedSlot: HTMLElement\n ) {\n // Dispatch events from shadow DOM to original node in light DOM\n eventsToDispatch.forEach(eventType => {\n clonedSlot.addEventListener(eventType, event => {\n if (event.target) {\n const elementPathInShadowDom = this.getElementPathInShadowDom(event);\n const elementPathInLightDom = this.getElementPathInLightDom(\n elementPathInShadowDom\n );\n\n // Dispatch same event to element in Light DOM\n if (elementPathInLightDom) {\n elementPathInLightDom.dispatchEvent(new Event(eventType));\n }\n\n // dispatchEvent focuses on the main component,\n // use setTimeout 0 to allow for display update to happen,\n // then restore the last focused element.\n setTimeout(() => {\n const originElementFocus = this.getElementPathInLightDom(\n elementPathInShadowDom,\n true\n ) as HTMLElement;\n if (originElementFocus) {\n originElementFocus.focus();\n }\n }, 0);\n }\n });\n });\n }\n\n /**\n * Render a slot in the shadow DOM.\n * @param {string} [slotName=''] - The slot name.\n * @param {string[]} [eventsToDispatch=[]] - The events to dispatch.\n * @param {boolean} [addAnnotations=true] - Whether to add annotations to the slot.\n * @returns {Array | null} An array of cloned slots or null if no slots found.\n */\n renderInShadow(\n slotName = '',\n eventsToDispatch = [] as string[],\n addAnnotations = true\n ) {\n // Cloning node allow us to re-use slots, as well a keep a copy in the light DOM.\n const slots = this.getSlottedNodes(slotName);\n\n if (slots) {\n const allClonedSlots = slots.map(slot => {\n const lightDomSlot = slot;\n let clonedSlot: HTMLElement;\n\n if (addAnnotations) {\n // Add additional annotations - cloned-slot attributes and a comment in light DOM\n clonedSlot = this.addAnnotations(slotName, lightDomSlot);\n } else {\n // Clone the slot into the shadow DOM as is with no annotations\n clonedSlot = lightDomSlot.cloneNode(true) as HTMLElement;\n }\n\n this.dispatchEventsToLightDom(eventsToDispatch, clonedSlot);\n\n return clonedSlot;\n });\n\n // Add mutation observer to watch for changes in the light DOM\n this._mutationObserver.observe(this.host, {\n subtree: true,\n childList: true,\n attributes: true,\n characterData: true,\n });\n return allClonedSlots;\n }\n return null;\n }\n\n /**\n * Get an array of CSS selectors that can be used to select the target of the event.\n * @param {Event} event - The event whose target we are trying to find.\n * @returns {Array} An array of CSS selectors that can be used to select the target of the event.\n */\n getElementPathInShadowDom(event: Event) {\n // Get the path of the event\n const path = event.composedPath() as HTMLElement[];\n\n // The selectors we will return\n const selectors = [];\n\n // Loop through the path until we find a shadow root\n let shadowFound = false;\n\n for (let i = 0; !shadowFound && i < path.length; i++) {\n const el = path[i];\n // If we find a shadow root, we are done\n if (el.nodeName === '#document-fragment') {\n shadowFound = true;\n } else {\n // Get a CSS selector for this element\n const selector = this.getSelectorForSingleElement(el);\n // If we found a selector, add it to our array\n if (selector) {\n selectors.push(selector);\n }\n }\n }\n\n // Return the selectors in the right order (we processed them in reverse)\n const reversedSelector = selectors.reverse();\n return reversedSelector;\n }\n\n /**\n * Get the class selector for a single element.\n * @param {HTMLElement} currentElement - The current element.\n * @returns {Object | null} The selector object or null if the element has no parent.\n */\n getSelectorForSingleElement(currentElement: HTMLElement) {\n // If the element has no parent element, it is the root element\n if (!currentElement.parentElement) {\n return null;\n }\n\n // Create a selector for the current element\n const currentSelectorClassName = Array.from(currentElement.classList).join(\n '.'\n );\n const currentSelector = `${currentElement.localName}${\n currentSelectorClassName !== '' ? '.' + currentSelectorClassName : ''\n }`;\n\n // Get all siblings of the current element\n const siblings = Array.from(\n currentElement.parentElement.querySelectorAll(currentSelector)\n );\n\n // Get the current element's index\n const currentIndex = siblings.indexOf(currentElement);\n\n // Create the final selector object\n const selector = {\n name: currentSelector,\n index: currentIndex,\n };\n return selector;\n }\n\n /**\n * Gets the targeted element from the event path.\n * @param {Array} elementPathInShadowDom - The path of the event.\n * @param {boolean} [isShadow=false] - Whether to search in the shadow DOM.\n * @returns {Element | null} The targeted element or null if not found.\n */\n getElementPathInLightDom(\n elementPathInShadowDom: {\n name: string;\n index: number;\n }[],\n isShadow = false\n ) {\n // start at the host element\n let El = isShadow\n ? (this.host.shadowRoot as Element | null)\n : (this.host as Element);\n\n if (!El) {\n return null;\n }\n\n // loop through the event path\n for (let i = 0; i < elementPathInShadowDom.length; i++) {\n // get the element with the name in the event path\n El = El.querySelectorAll(elementPathInShadowDom[i].name)[\n elementPathInShadowDom[i].index\n ];\n }\n // return the targeted element\n return El;\n }\n\n printExtraAttributes(extraAttributes: { name: string; value: string }[]) {\n return unsafeStatic(\n extraAttributes\n .map(attribute => `${attribute.name}=${attribute.value}`)\n .join(' ')\n );\n }\n\n /**\n * Conditionally render a slot with a wrapper and additional classes.\n * @param {string} slotName - The slot name.\n * @param {boolean} [renderInShadow=true] - Whether to render the slot in the shadow DOM.\n * @param {string | null} [classes=null] - Additional classes to add to the wrapper.\n * @param {string | null} [attributes=null] - Additional attributes to add to the wrapper.\n * @returns {TemplateResult | null} The rendered slot or null if the slot does not exist.\n */\n conditionalSlot(\n slotName: string,\n renderInShadow = true,\n extraClasses: string | null = null,\n extraAttributes: { name: string; value: string }[] = []\n ) {\n const defaultSlot = slotName === '' || slotName === null;\n const wrapperClasses = {\n 'default-slot': defaultSlot,\n [`${slotName}`]: !defaultSlot,\n [`${extraClasses}`]: extraClasses ?? false,\n };\n\n if (this.exist(slotName)) {\n return html` \n ${renderInShadow\n ? html`${this.renderInShadow(slotName)}`\n : html` `}\n `;\n } else {\n return null;\n }\n }\n}\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst e=e=>n=>\"function\"==typeof n?((e,n)=>(customElements.define(e,n),n))(e,n):((e,n)=>{const{kind:t,elements:s}=n;return{kind:t,elements:s,finisher(n){customElements.define(e,n)}}})(e,n);export{e as customElement};\n//# sourceMappingURL=custom-element.js.map\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst i=(i,e)=>\"method\"===e.kind&&e.descriptor&&!(\"value\"in e.descriptor)?{...e,finisher(n){n.createProperty(e.key,i)}}:{kind:\"field\",key:Symbol(),placement:\"own\",descriptor:{},originalKey:e.key,initializer(){\"function\"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(n){n.createProperty(e.key,i)}},e=(i,e,n)=>{e.constructor.createProperty(n,i)};function n(n){return(t,o)=>void 0!==o?e(n,t,o):i(n,t)}export{n as property};\n//# sourceMappingURL=property.js.map\n","import{property as r}from\"./property.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function t(t){return r({...t,state:!0})}export{t as state};\n//# sourceMappingURL=state.js.map\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst e=(e,t,o)=>{Object.defineProperty(t,o,e)},t=(e,t)=>({kind:\"method\",placement:\"prototype\",key:t.key,descriptor:e}),o=({finisher:e,descriptor:t})=>(o,n)=>{var r;if(void 0===n){const n=null!==(r=o.originalKey)&&void 0!==r?r:o.key,i=null!=t?{kind:\"method\",placement:\"prototype\",key:n,descriptor:t(o.key)}:{...o,key:n};return null!=e&&(i.finisher=function(t){e(t,n)}),i}{const r=o.constructor;void 0!==t&&Object.defineProperty(o,n,t(n)),null==e||e(r,n)}};export{o as decorateProperty,e as legacyPrototypeMethod,t as standardPrototypeMethod};\n//# sourceMappingURL=base.js.map\n","import{decorateProperty as o}from\"./base.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function i(i,n){return o({descriptor:o=>{const t={get(){var o,n;return null!==(n=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(i))&&void 0!==n?n:null},enumerable:!0,configurable:!0};if(n){const n=\"symbol\"==typeof o?Symbol():\"__\"+o;t.get=function(){var o,t;return void 0===this[n]&&(this[n]=null!==(t=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(i))&&void 0!==t?t:null),this[n]}}return t}})}export{i as query};\n//# sourceMappingURL=query.js.map\n","import{decorateProperty as o}from\"./base.js\";\n/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */var n;const e=null!=(null===(n=window.HTMLSlotElement)||void 0===n?void 0:n.prototype.assignedElements)?(o,n)=>o.assignedElements(n):(o,n)=>o.assignedNodes(n).filter((o=>o.nodeType===Node.ELEMENT_NODE));function l(n){const{slot:l,selector:t}=null!=n?n:{};return o({descriptor:o=>({get(){var o;const r=\"slot\"+(l?`[name=${l}]`:\":not([name])\"),i=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(r),s=null!=i?e(i,n):[];return t?s.filter((o=>o.matches(t))):s},enumerable:!0,configurable:!0})})}export{l as queryAssignedElements};\n//# sourceMappingURL=query-assigned-elements.js.map\n","import{decorateProperty as e}from\"./base.js\";import{queryAssignedElements as t}from\"./query-assigned-elements.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function o(o,n,r){let l,s=o;return\"object\"==typeof o?(s=o.slot,l=o):l={flatten:n},r?t({slot:s,flatten:n,selector:r}):e({descriptor:e=>({get(){var e,t;const o=\"slot\"+(s?`[name=${s}]`:\":not([name])\"),n=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(o);return null!==(t=null==n?void 0:n.assignedNodes(l))&&void 0!==t?t:[]},enumerable:!0,configurable:!0})})}export{o as queryAssignedNodes};\n//# sourceMappingURL=query-assigned-nodes.js.map\n","/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst t=window,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&\"adoptedStyleSheets\"in Document.prototype&&\"replace\"in CSSStyleSheet.prototype,s=Symbol(),n=new WeakMap;class o{constructor(t,e,n){if(this._$cssResult$=!0,n!==s)throw Error(\"CSSResult is not constructable. Use `unsafeCSS` or `css` instead.\");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const s=this.t;if(e&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=n.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&n.set(s,t))}return t}toString(){return this.cssText}}const r=t=>new o(\"string\"==typeof t?t:t+\"\",void 0,s),i=(t,...e)=>{const n=1===t.length?t[0]:e.reduce(((e,s,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if(\"number\"==typeof t)return t;throw Error(\"Value passed to 'css' function must be a 'css' function result: \"+t+\". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.\")})(s)+t[n+1]),t[0]);return new o(n,t,s)},S=(s,n)=>{e?s.adoptedStyleSheets=n.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):n.forEach((e=>{const n=document.createElement(\"style\"),o=t.litNonce;void 0!==o&&n.setAttribute(\"nonce\",o),n.textContent=e.cssText,s.appendChild(n)}))},c=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e=\"\";for(const s of t.cssRules)e+=s.cssText;return r(e)})(t):t;export{o as CSSResult,S as adoptStyles,i as css,c as getCompatibleStyle,e as supportsAdoptingStyleSheets,r as unsafeCSS};\n//# sourceMappingURL=css-tag.js.map\n","import{getCompatibleStyle as t,adoptStyles as i}from\"./css-tag.js\";export{CSSResult,adoptStyles,css,getCompatibleStyle,supportsAdoptingStyleSheets,unsafeCSS}from\"./css-tag.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */var s;const e=window,r=e.trustedTypes,h=r?r.emptyScript:\"\",o=e.reactiveElementPolyfillSupport,n={toAttribute(t,i){switch(i){case Boolean:t=t?h:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},a=(t,i)=>i!==t&&(i==i||t==t),l={attribute:!0,type:String,converter:n,reflect:!1,hasChanged:a},d=\"finalized\";class u extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this._$Eu()}static addInitializer(t){var i;this.finalize(),(null!==(i=this.h)&&void 0!==i?i:this.h=[]).push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Ep(s,i);void 0!==e&&(this._$Ev.set(e,s),t.push(e))})),t}static createProperty(t,i=l){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s=\"symbol\"==typeof t?Symbol():\"__\"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e)}}static getPropertyDescriptor(t,i,s){return{get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||l}static finalize(){if(this.hasOwnProperty(d))return!1;this[d]=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.h&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty(\"properties\")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(t(i))}else void 0!==i&&s.push(t(i));return s}static _$Ep(t,i){const s=i.attribute;return!1===s?void 0:\"string\"==typeof s?s:\"string\"==typeof t?t.toLowerCase():void 0}_$Eu(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)))}addController(t){var i,s;(null!==(i=this._$ES)&&void 0!==i?i:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t))}removeController(t){var i;null===(i=this._$ES)||void 0===i||i.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Ei.set(i,this[i]),delete this[i])}))}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return i(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}))}attributeChangedCallback(t,i,s){this._$AK(t,s)}_$EO(t,i,s=l){var e;const r=this.constructor._$Ep(t,s);if(void 0!==r&&!0===s.reflect){const h=(void 0!==(null===(e=s.converter)||void 0===e?void 0:e.toAttribute)?s.converter:n).toAttribute(i,s.type);this._$El=t,null==h?this.removeAttribute(r):this.setAttribute(r,h),this._$El=null}}_$AK(t,i){var s;const e=this.constructor,r=e._$Ev.get(t);if(void 0!==r&&this._$El!==r){const t=e.getPropertyOptions(r),h=\"function\"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:n;this._$El=r,this[r]=h.fromAttribute(i,t.type),this._$El=null}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||a)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,i)=>this[i]=t)),this._$Ei=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$Ek()}catch(t){throw i=!1,this._$Ek(),t}i&&this._$AE(s)}willUpdate(t){}_$AE(t){var i;null===(i=this._$ES)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,i)=>this._$EO(i,this[i],t))),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}}u[d]=!0,u.elementProperties=new Map,u.elementStyles=[],u.shadowRootOptions={mode:\"open\"},null==o||o({ReactiveElement:u}),(null!==(s=e.reactiveElementVersions)&&void 0!==s?s:e.reactiveElementVersions=[]).push(\"1.6.3\");export{u as ReactiveElement,n as defaultConverter,a as notEqual};\n//# sourceMappingURL=reactive-element.js.map\n","import{ReactiveElement as t}from\"@lit/reactive-element\";export*from\"@lit/reactive-element\";import{render as e,noChange as i}from\"lit-html\";export*from\"lit-html\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */var l,o;const r=t;class s extends t{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=e(i,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return i}}s.finalized=!0,s._$litElement$=!0,null===(l=globalThis.litElementHydrateSupport)||void 0===l||l.call(globalThis,{LitElement:s});const n=globalThis.litElementPolyfillSupport;null==n||n({LitElement:s});const h={_$AK:(t,e,i)=>{t._$AK(e,i)},_$AL:t=>t._$AL};(null!==(o=globalThis.litElementVersions)&&void 0!==o?o:globalThis.litElementVersions=[]).push(\"3.3.3\");export{s as LitElement,r as UpdatingElement,h as _$LE};\n//# sourceMappingURL=lit-element.js.map\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n`;","import { LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n/* @TODO: Remove Outline Element because it doesn't seem to add value? */\n@customElement('outline-element')\nexport class OutlineElement extends LitElement {}\ndeclare global {\n interface HTMLElementTagNameMap {\n 'outline-element': OutlineElement;\n }\n}\n","import { ReactiveControllerHost, ReactiveController } from 'lit';\n// @todo: Figure out why outline-config isn't working.\n// import { defaultScreenSizes } from '@phase2/outline-config';\nconst defaultScreenSizes = {\n xs: '480px',\n sm: '640px',\n md: '768px',\n lg: '1024px',\n xl: '1280px',\n xxl: '1440px',\n xxxl: '2160px',\n};\n\n/**\n * Container size lookup, ordered small to large.\n *\n * We are using screen sizes to avoid making additional size groups.\n */\nexport const containerSizeMap = new Map(\n (\n Object.entries(defaultScreenSizes).map(([container, sizeString]) => {\n return [container, parseInt(sizeString.slice(0, -2))];\n }) as [string, number][]\n ).sort(([, sizeA], [, sizeB]) => {\n return sizeA - sizeB;\n })\n);\n\n/**\n * Can be used to get the container size of the element. Useful if we want to display components differently based on container size rather than the screen size, such as with different sized columns.\n *\n * This attempts to fit the mobile first pattern.\n *\n * Will set a `container-size-??` attributes on the component that indicate if the container is at least that size.\n *\n * Example: `@screen md` translates to `container-size-xs container-size-sm container-size-md`.\n */\nexport class ContainerSizeController implements ReactiveController {\n containerSizes: string[] = [];\n\n host: ReactiveControllerHost;\n\n resizeObserver: ResizeObserver;\n\n constructor(host: ReactiveControllerHost) {\n this.host = host;\n this.host.addController(this);\n\n this.handleResize();\n }\n\n hostConnected() {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n\n this.resizeObserver.observe(document.querySelector('body') as HTMLElement);\n }\n\n hostDisconnected() {\n this.resizeObserver.disconnect();\n }\n\n handleResize = () => {\n const containerSizesPreUpdate = this.containerSizes;\n\n const containerWidth =\n (this.host as unknown as HTMLElement).parentElement?.clientWidth ?? 0;\n\n this.containerSizes = Array.from(containerSizeMap)\n .filter(([, size]) => containerWidth >= size)\n .map(([container]) => container);\n\n // Since this is mobile first and we just add more sizes as we get larger, the length will tell us if we have the same size.\n if (this.containerSizes.length !== containerSizesPreUpdate.length) {\n Array.from(containerSizeMap).forEach(([containerSize]) => {\n if (this.containerSizes.includes(containerSize)) {\n (this.host as unknown as HTMLElement).setAttribute(\n `container-size-${containerSize}`,\n 'true'\n );\n }\n\n if (this.containerSizes.includes(containerSize) === false) {\n (this.host as unknown as HTMLElement).removeAttribute(\n `container-size-${containerSize}`\n );\n }\n });\n\n this.host.requestUpdate();\n }\n };\n}\n","import { ReactiveControllerHost, ReactiveController } from 'lit';\n// @todo: Figure out why outline-config isn't working.\n// import { defaultScreenSizes } from '@phase2/outline-config';\nconst defaultScreenSizes = {\n xs: '480px',\n sm: '640px',\n md: '768px',\n lg: '1024px',\n xl: '1280px',\n xxl: '1440px',\n xxxl: '2160px',\n};\n\n//TODO: add functionality to receive array of screen sizes to map to object in controller state\nexport class MobileController implements ReactiveController {\n isMobile = false;\n host: ReactiveControllerHost;\n mobileBreakpoint: string;\n\n constructor(host: ReactiveControllerHost, mobileBreakpoint = 'md') {\n this.mobileBreakpoint = mobileBreakpoint;\n (this.host = host).addController(this);\n this.handleResize();\n }\n\n hostConnected() {\n window.addEventListener('resize', this.handleResize);\n }\n\n hostDisconnected() {\n window.removeEventListener('resize', this.handleResize);\n }\n\n handleResize = () => {\n const mobileScreen = this.formatScreenSize(\n // eslint-disable-next-line\n // @ts-ignore\n defaultScreenSizes[this.mobileBreakpoint]\n );\n if (window.innerWidth < mobileScreen) {\n this.isMobile = true;\n } else {\n this.isMobile = false;\n }\n this.host.requestUpdate();\n };\n\n formatScreenSize = (screen: string): number => {\n return parseInt(screen.slice(0, -2));\n };\n}\n","import { ReactiveControllerHost, ReactiveController } from 'lit';\n// @todo: Figure out why outline-config isn't working.\n// import { defaultScreenSizes } from '@phase2/outline-config';\nconst defaultScreenSizes = {\n xs: '480px',\n sm: '640px',\n md: '768px',\n lg: '1024px',\n xl: '1280px',\n xxl: '1440px',\n xxxl: '2160px',\n};\n\n/**\n * Screen size lookup, ordered small to large.\n *\n * Notice: If you get a linting issue, `Parsing error: Cannot read properties of undefined (reading 'map')`, you need to update your packages.\n * At least:\n * \"@typescript-eslint/eslint-plugin\": \"^5.0.0\",\n * \"@typescript-eslint/parser\": \"^5.0.0\",\n */\nexport const screenSizeMap = new Map(\n (\n Object.entries(defaultScreenSizes).map(([screen, sizeString]) => {\n return [screen, parseInt(sizeString.slice(0, -2))];\n }) as [string, number][]\n ).sort(([, sizeA], [, sizeB]) => {\n return sizeA - sizeB;\n })\n);\n\n/**\n * Usage:\n *\n * Import `screenSizeMap` and `ScreenSizeController`:\n * import {\n * screenSizeMap,\n * ScreenSizeController,\n * } from '../../controllers/screen-size-controller';\n *\n * Add the property to your class:\n *\n * // eslint-disable-next-line\n * // @ts-ignore\n * // We are using the controller to watch for screen size changes, but don't need to use it otherwise.\n * private _screenSizeController = new ScreenSizeController(this);\n *\n * Set a variable as needed:\n * const isMobile = window.innerWidth < (screenSizeMap.get('lg') as number);\n */\nexport class ScreenSizeController implements ReactiveController {\n isMobile = false;\n\n screenSize = 'xxs';\n\n host: ReactiveControllerHost;\n\n resizeObserver: ResizeObserver;\n\n constructor(host: ReactiveControllerHost) {\n (this.host = host).addController(this);\n this.handleResize();\n }\n\n hostConnected() {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n\n this.resizeObserver.observe(document.querySelector('body') as HTMLElement);\n }\n\n hostDisconnected() {\n this.resizeObserver.disconnect();\n }\n\n handleResize = () => {\n const propertyValuesPreUpdate = [\n ['isMobile', this.isMobile],\n ['screenSize', this.screenSize],\n ] as [keyof ScreenSizeController, boolean | string][];\n\n this.isMobile = window.innerWidth <= (screenSizeMap.get('sm') as number);\n\n this.screenSize = Array.from(screenSizeMap).reduce(\n (previousValue, [screen, size]) => {\n return window.innerWidth >= size ? screen : previousValue;\n },\n 'xxs'\n );\n\n if (\n propertyValuesPreUpdate\n .map(([propertyName, preUpdateValue]) => {\n return this[propertyName] !== preUpdateValue;\n })\n .reduce((previous, current) => previous || current)\n ) {\n this.host.requestUpdate();\n }\n };\n}\n","import { ReactiveControllerHost } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { html, unsafeStatic } from 'lit/static-html.js';\n\n/**\n * The SlotsController ReactiveController.\n *\n * This controller allows cloning slots into the shadow DOM,\n * by calling a function inside render() of the component.\n * Any changes in the light DOM trigger requestUpdate() and thus re-cloning\n * of the slots into the shadow DOM.\n * The controller dispatches any events that were specified when they are triggered\n * in the cloned slots in shadow DOM to the equivalent light DOM slot.\n *\n * @param host The host element\n */\n\nexport class SlotsController {\n host: ReactiveControllerHost & Element;\n /**\n * Watches for changes to components childlist and clones nodes to shadow dom.\n */\n _mutationObserver = new MutationObserver(this._handleMutation.bind(this));\n\n constructor(host: ReactiveControllerHost & Element) {\n // Store a reference to the host\n this.host = host;\n // Register for lifecycle updates\n host.addController(this);\n }\n\n hostConnected(): void {}\n\n /**\n * MutationObserver callback.\n */\n _handleMutation() {\n // disconnect observer before making updates (to avoid infinite loop when adding comment)\n this._mutationObserver.disconnect();\n this.host.requestUpdate();\n }\n\n /**\n * Get slotted nodes by slot name.\n * @param {string | null} slotName - The slot name to search for.\n * @returns {Array} An array of slotted nodes.\n */\n getSlottedNodes(slotName: string | null = null) {\n const defaultSlot = slotName === '' || slotName === null;\n let slottedNodes = [];\n\n if (defaultSlot) {\n slottedNodes = Array.from(this.host.childNodes).filter(\n node => this.isDefaultSlotText(node) || this.isDefaultSlotElement(node)\n );\n } else {\n slottedNodes = Array.from(\n this.host.querySelectorAll(`[slot=${slotName}]`)\n );\n }\n\n if (slottedNodes.length) {\n return slottedNodes;\n } else {\n return false;\n }\n }\n\n /**\n * Check if a slot exists.\n * @param {string | null} slotName - The slot name to check for.\n * @returns {boolean} True if the slot exists, false otherwise.\n */\n exist(slotName: string | null = null) {\n return Boolean(this.getSlottedNodes(slotName));\n }\n\n /**\n * Check if a node is a default slot text.\n * @param {Node} node - The node to check.\n * @returns {boolean} True if the node is a default slot text, false otherwise.\n */\n isDefaultSlotText(node: Node) {\n return node.nodeType === node.TEXT_NODE && node.textContent!.trim() !== '';\n }\n\n /**\n * Check if a node is a default slot element.\n * @param {Node} node - The node to check.\n * @returns {boolean} True if the node is a default slot element, false otherwise.\n */\n isDefaultSlotElement(node: Node) {\n return (\n node.nodeType === node.ELEMENT_NODE &&\n (node as HTMLElement).getAttribute('slot') === null\n );\n }\n\n /**\n * Add annotations to a slot.\n * @param {string} slotName - The slot name.\n * @param {ChildNode} lightDomSlot - The light DOM slot.\n * @returns {HTMLElement} The annotated slot.\n */\n addAnnotations(slotName: string, lightDomSlot: ChildNode) {\n // Create cloned-node element\n const clonedSlot = lightDomSlot.cloneNode(true) as HTMLElement;\n\n // Add a comment above the slot in light DOM, to indicate it was cloned to shadow DOM\n const annotationComment =\n `slotsController cloned this ` +\n (slotName === '' ? 'default-slot' : `named-slot '${slotName}'`) +\n ` into the shadow DOM`;\n\n // Add the comment only once, avoid duplicate comments when requestUpdate() runs\n // Check if a light DOM comment already exist\n const commentExist = Array.from(this.host.childNodes).some(\n node => node.nodeValue === annotationComment\n );\n if (!commentExist) {\n lightDomSlot.before(document.createComment(annotationComment));\n }\n\n if (slotName !== '') {\n clonedSlot.setAttribute('cloned-slot-type', 'named-slot');\n clonedSlot.setAttribute('cloned-slot-name', slotName);\n clonedSlot.removeAttribute('slot');\n return clonedSlot;\n }\n\n if (this.isDefaultSlotElement(lightDomSlot)) {\n clonedSlot.setAttribute('cloned-slot-type', 'default-slot--element');\n clonedSlot.setAttribute('cloned-slot-name', 'default');\n clonedSlot.removeAttribute('slot');\n return clonedSlot;\n } else {\n // Insert the text-only default slot into a node element\n const slotWrapper = document.createElement('cloned-slot');\n clonedSlot.parentNode?.insertBefore(slotWrapper, clonedSlot);\n slotWrapper.appendChild(clonedSlot);\n slotWrapper.setAttribute('cloned-slot-type', 'default-slot--text');\n slotWrapper.setAttribute('cloned-slot-name', 'default');\n return slotWrapper;\n }\n }\n\n /**\n * Dispatch events from cloned slots in shadow DOM to the equivalent light DOM slot.\n * @param {string[]} eventsToDispatch - The events to dispatch.\n * @param {HTMLElement} clonedSlot - The cloned slot.\n *\n * As there is no way (aside from devtools) to determine what events are occurring in the DOM,\n * what we can do is simulate an event that originated in the shadow DOM.\n * Therefore, clicking on an element in a slotted shadow DOM would simulate a click event\n * on a parallel element in a slotted light DOM.\n *\n * When an event triggers -\n * Step 1 -\n * In the Shadow DOM, identify the path that leads to the element that triggered the event.\n *\n * Step 2 -\n * In the Light DOM, find the equivalent path to the one found in step 1.\n *\n * Step 3 -\n * Dispatch the event to the light DOM, following the same path that was found in step 2.\n *\n * Step 4 -\n * Wait for the component to refresh (by using timeout 0), then focus is reset to the component that hosts the element.\n *\n * Step 5 -\n * Focus the browser on the original element in Shadow DOM that triggered the event found in step 1\n */\n dispatchEventsToLightDom(\n eventsToDispatch: string[],\n clonedSlot: HTMLElement\n ) {\n // Dispatch events from shadow DOM to original node in light DOM\n eventsToDispatch.forEach(eventType => {\n clonedSlot.addEventListener(eventType, event => {\n if (event.target) {\n const elementPathInShadowDom = this.getElementPathInShadowDom(event);\n const elementPathInLightDom = this.getElementPathInLightDom(\n elementPathInShadowDom\n );\n\n // Dispatch same event to element in Light DOM\n if (elementPathInLightDom) {\n elementPathInLightDom.dispatchEvent(new Event(eventType));\n }\n\n // dispatchEvent focuses on the main component,\n // use setTimeout 0 to allow for display update to happen,\n // then restore the last focused element.\n setTimeout(() => {\n const originElementFocus = this.getElementPathInLightDom(\n elementPathInShadowDom,\n true\n ) as HTMLElement;\n if (originElementFocus) {\n originElementFocus.focus();\n }\n }, 0);\n }\n });\n });\n }\n\n /**\n * Render a slot in the shadow DOM.\n * @param {string} [slotName=''] - The slot name.\n * @param {string[]} [eventsToDispatch=[]] - The events to dispatch.\n * @param {boolean} [addAnnotations=true] - Whether to add annotations to the slot.\n * @returns {Array | null} An array of cloned slots or null if no slots found.\n */\n renderInShadow(\n slotName = '',\n eventsToDispatch = [] as string[],\n addAnnotations = true\n ) {\n // Cloning node allow us to re-use slots, as well a keep a copy in the light DOM.\n const slots = this.getSlottedNodes(slotName);\n\n if (slots) {\n const allClonedSlots = slots.map(slot => {\n const lightDomSlot = slot;\n let clonedSlot: HTMLElement;\n\n if (addAnnotations) {\n // Add additional annotations - cloned-slot attributes and a comment in light DOM\n clonedSlot = this.addAnnotations(slotName, lightDomSlot);\n } else {\n // Clone the slot into the shadow DOM as is with no annotations\n clonedSlot = lightDomSlot.cloneNode(true) as HTMLElement;\n }\n\n this.dispatchEventsToLightDom(eventsToDispatch, clonedSlot);\n\n return clonedSlot;\n });\n\n // Add mutation observer to watch for changes in the light DOM\n this._mutationObserver.observe(this.host, {\n subtree: true,\n childList: true,\n attributes: true,\n characterData: true,\n });\n return allClonedSlots;\n }\n return null;\n }\n\n /**\n * Get an array of CSS selectors that can be used to select the target of the event.\n * @param {Event} event - The event whose target we are trying to find.\n * @returns {Array} An array of CSS selectors that can be used to select the target of the event.\n */\n getElementPathInShadowDom(event: Event) {\n // Get the path of the event\n const path = event.composedPath() as HTMLElement[];\n\n // The selectors we will return\n const selectors = [];\n\n // Loop through the path until we find a shadow root\n let shadowFound = false;\n\n for (let i = 0; !shadowFound && i < path.length; i++) {\n const el = path[i];\n // If we find a shadow root, we are done\n if (el.nodeName === '#document-fragment') {\n shadowFound = true;\n } else {\n // Get a CSS selector for this element\n const selector = this.getSelectorForSingleElement(el);\n // If we found a selector, add it to our array\n if (selector) {\n selectors.push(selector);\n }\n }\n }\n\n // Return the selectors in the right order (we processed them in reverse)\n const reversedSelector = selectors.reverse();\n return reversedSelector;\n }\n\n /**\n * Get the class selector for a single element.\n * @param {HTMLElement} currentElement - The current element.\n * @returns {Object | null} The selector object or null if the element has no parent.\n */\n getSelectorForSingleElement(currentElement: HTMLElement) {\n // If the element has no parent element, it is the root element\n if (!currentElement.parentElement) {\n return null;\n }\n\n // Create a selector for the current element\n const currentSelectorClassName = Array.from(currentElement.classList).join(\n '.'\n );\n const currentSelector = `${currentElement.localName}${\n currentSelectorClassName !== '' ? '.' + currentSelectorClassName : ''\n }`;\n\n // Get all siblings of the current element\n const siblings = Array.from(\n currentElement.parentElement.querySelectorAll(currentSelector)\n );\n\n // Get the current element's index\n const currentIndex = siblings.indexOf(currentElement);\n\n // Create the final selector object\n const selector = {\n name: currentSelector,\n index: currentIndex,\n };\n return selector;\n }\n\n /**\n * Gets the targeted element from the event path.\n * @param {Array} elementPathInShadowDom - The path of the event.\n * @param {boolean} [isShadow=false] - Whether to search in the shadow DOM.\n * @returns {Element | null} The targeted element or null if not found.\n */\n getElementPathInLightDom(\n elementPathInShadowDom: {\n name: string;\n index: number;\n }[],\n isShadow = false\n ) {\n // start at the host element\n let El = isShadow\n ? (this.host.shadowRoot as Element | null)\n : (this.host as Element);\n\n if (!El) {\n return null;\n }\n\n // loop through the event path\n for (let i = 0; i < elementPathInShadowDom.length; i++) {\n // get the element with the name in the event path\n El = El.querySelectorAll(elementPathInShadowDom[i].name)[\n elementPathInShadowDom[i].index\n ];\n }\n // return the targeted element\n return El;\n }\n\n printExtraAttributes(extraAttributes: { name: string; value: string }[]) {\n return unsafeStatic(\n extraAttributes\n .map(attribute => `${attribute.name}=${attribute.value}`)\n .join(' ')\n );\n }\n\n /**\n * Conditionally render a slot with a wrapper and additional classes.\n * @param {string} slotName - The slot name.\n * @param {boolean} [renderInShadow=true] - Whether to render the slot in the shadow DOM.\n * @param {string | null} [classes=null] - Additional classes to add to the wrapper.\n * @param {string | null} [attributes=null] - Additional attributes to add to the wrapper.\n * @returns {TemplateResult | null} The rendered slot or null if the slot does not exist.\n */\n conditionalSlot(\n slotName: string,\n renderInShadow = true,\n extraClasses: string | null = null,\n extraAttributes: { name: string; value: string }[] = []\n ) {\n const defaultSlot = slotName === '' || slotName === null;\n const wrapperClasses = {\n 'default-slot': defaultSlot,\n [`${slotName}`]: !defaultSlot,\n [`${extraClasses}`]: extraClasses ?? false,\n };\n\n if (this.exist(slotName)) {\n return html` \n ${renderInShadow\n ? html`${this.renderInShadow(slotName)}`\n : html` `}\n `;\n } else {\n return null;\n }\n }\n}\n","//\n// Emits a custom event with more convenient defaults.\n//\nexport function emit(el: HTMLElement, name: string, options?: CustomEventInit) {\n const event = new CustomEvent(name, {\n bubbles: true,\n cancelable: false,\n composed: true,\n detail: {},\n ...options,\n });\n el.dispatchEvent(event);\n return event;\n}\n\n//\n// Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements.\n//\nexport function waitForEvent(el: HTMLElement, eventName: string) {\n return new Promise(resolve => {\n function done(event: Event) {\n if (event.target === el) {\n el.removeEventListener(eventName, done);\n resolve();\n }\n }\n\n el.addEventListener(eventName, done);\n });\n}\n","// @watch decorator\n//\n// Runs when an observed property changes, e.g. @property or @state, but before the component updates.\n//\n// To wait for an update to complete after a change occurs, use `await this.updateComplete` in the handler. To start\n// watching after the initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.\n//\n// Usage:\n//\n// @watch('propName')\n// handlePropChange(oldValue, newValue) {\n// ...\n// }\n\nimport type { LitElement } from 'lit';\n\ntype UpdateHandler = (prev?: unknown, next?: unknown) => void;\n\ntype NonUndefined = A extends undefined ? never : A;\n\ntype UpdateHandlerFunctionKeys = {\n [K in keyof T]-?: NonUndefined extends UpdateHandler ? K : never;\n}[keyof T];\n\ninterface WatchOptions {\n /**\n * If true, will only start watching after the initial update/render\n */\n waitUntilFirstUpdate?: boolean;\n}\n\nexport function watch(propName: string, options?: WatchOptions) {\n const resolvedOptions: Required = {\n waitUntilFirstUpdate: false,\n ...options,\n };\n return (\n proto: ElemClass,\n decoratedFnName: UpdateHandlerFunctionKeys\n ): void => {\n // @ts-expect-error -- update is a protected property\n const { update } = proto;\n if (propName in proto) {\n const propNameKey = propName as keyof ElemClass;\n // @ts-expect-error -- update is a protected property\n proto.update = function (\n this: ElemClass,\n changedProps: Map\n ) {\n if (changedProps.has(propNameKey)) {\n const oldValue = changedProps.get(propNameKey);\n const newValue = this[propNameKey];\n\n if (oldValue !== newValue) {\n if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {\n (this[decoratedFnName] as unknown as UpdateHandler)(\n oldValue,\n newValue\n );\n }\n }\n }\n\n update.call(this, changedProps);\n };\n }\n };\n}\n","export { OutlineElement } from './src/outline-element/outline-element';\n\nexport { ContainerSizeController } from './src/controllers/container-size-controller';\nexport { IsHoverableDeviceController } from './src/controllers/is-hoverable-device-controller';\nexport { LinkedBlockController } from './src/controllers/linked-block-controller';\nexport { MobileController } from './src/controllers/mobile-controller';\nexport { ScreenSizeController } from './src/controllers/screen-size-controller';\nexport { SlotsController } from './src/controllers/slots-controller';\nexport { animateTo } from './src/internal/animate';\nexport { emit, waitForEvent } from './src/internal/event';\nexport { watch } from './src/internal/watch';\nexport { scrollIntoView } from './src/internal/scroll';\nexport { getOffset } from './src/internal/offset';\n\nexport type {\n Size,\n VerticalAlignment,\n HorizontalAlignment,\n Orientation,\n TextInput,\n LinkType,\n} from './src/utils/types';\nexport {\n format,\n extractPx,\n argTypeSlotContent,\n argTypeOrientation,\n argTypeColSpan,\n argTypeRowSpan,\n argTypeGapSize,\n argTypeVerticalAlign,\n argTypeHorizontalAlign,\n argTypeSize,\n argTypeImageUrl,\n argTypeHidden,\n argTypeMapMarkers,\n} from './src/utils/utils';\n\nexport const defaultColorSets = {\n sets: ['outline', 'primary', 'secondary', 'tertiary', 'neutral'],\n};\n\nexport const defaultIconConfig = {\n libraries: {\n bootstrap: true,\n boxicons: true,\n fontawesome: true,\n heroicons: true,\n iconoir: true,\n ionicons: true,\n jam: true,\n lucide: true,\n material: true,\n remix: true,\n unicons: true,\n },\n defaults: {\n library: 'bootstrap',\n size: '16px',\n icon: 'chevron-right',\n },\n};\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n --outline-admin-links--color--computed:var(--outline-admin-links--color, var(--outline-gray-600));\n --outline-admin-links--color-hover--computed:var(--outline-admin-links--color-hover, var(--outline-soft-black));\n --outline-admin-links--color-focus--computed:var(--outline-admin-links--color-focus, var(--outline-soft-black));\n --outline-admin-links--color-active--computed:var(--outline-admin-links--color-active,var( --outline-white));\n --outline-admin-links--bg--computed:var(--outline-admin-links--bg, var(--outline-gray-100));\n --outline-admin-links--bg-hover--computed:var(--outline-admin-links--bg-hover,var( --outline-gray-300));\n --outline-admin-links--bg-focus--computed:var(--outline-admin-links--bg-focus,var( --outline-gray-300));\n --outline-admin-links--bg-active--computed:var(--outline-admin-links--bg-active, var(--outline-blue-600));\n --outline-admin-links--spacing-y--computed:var(--outline-admin-links--spacing-y, var(--spacing-4));\n --outline-admin-links--link-spacing-y--computed:var(--outline-admin-links--link-spacing-y, var(--spacing-4));\n --outline-admin-links--link-spacing-x--computed:var(--outline-admin-links--link-spacing-x, var(--spacing-6));\n}\n\n.links{\n padding-top:var(--outline-admin-links--spacing-y--computed);\n padding-bottom:var(--outline-admin-links--spacing-y--computed);\n}\n\nul{\n display:flex;\n list-style-type:none;\n margin:0;\n padding:0;\n}\n\nli{\n margin:0;\n padding:0;\n display:block;\n}\n\na{\n position:relative;\n text-decoration:none;\n padding-top:var(--outline-admin-links--link-spacing-y--computed);\n padding-bottom:var(--outline-admin-links--link-spacing-y--computed);\n padding-left:var(--outline-admin-links--link-spacing-x--computed);\n padding-right:var(--outline-admin-links--link-spacing-x--computed);\n background:var(--outline-admin-links--bg--computed);\n color:var(--outline-admin-links--color--computed);\n}\n\na:hover{\n outline:none;\n background:var(--outline-admin-links--bg-hover--computed);\n color:var(--outline-admin-links--color-hover--computed);\n }\n\na:focus{\n outline:none;\n background:var(--outline-admin-links--bg-focus--computed);\n color:var(--outline-admin-links--color-focus--computed);\n }\n\na:not(.is-active):hover::before,\n a:not(.is-active):focus::before{\n position:absolute;\n top:50%;\n left:50%;\n width:calc(100%);\n height:100%;\n content:'';\n transform:translate(-50%, -50%);\n border:solid 2px var(--outline-admin-links--color-hover--computed);\n border-radius:0.25rem;\n }\n\na.is-active{\n outline:solid 2px var(--outline-admin-links--color-hover--computed);\n background:var(--outline-admin-links--bg-active--computed);\n color:var(--outline-admin-links--color-active--computed);\n z-index:1;\n }\n\na.is-active:hover,\n a.is-active:focus{\n outline-offset:2px;\n }\n`;","import { CSSResultGroup, TemplateResult, html } from 'lit';\nimport { OutlineElement, SlotsController } from '@phase2/outline-core';\nimport { customElement } from 'lit/decorators.js';\nimport componentStyles from './outline-admin-links.css.lit';\n\n/**\n * The Outline Admin Links component\n * @element outline-admin-links\n * @extends OutlineElement\n * @slot - The default slot for this element.\n * @cssprop --outline-admin-links--color: The default text color for the admin links.\n * @cssprop --outline-admin-links--color-hover: The hover text color for the admin links.\n * @cssprop --outline-admin-links--color-focus: The focus text color for the admin links.\n * @cssprop --outline-admin-links--color-active: The active text color for the admin links.\n * @cssprop --outline-admin-links--bg-default: The default background color for the admin links.\n * @cssprop --outline-admin-links--bg-hover: The hover background color for the admin links.\n * @cssprop --outline-admin-links--bg-focus: The focus background color for the admin links.\n * @cssprop --outline-admin-links--bg-active: The active background color for the admin links.\n * @cssprop --outline-admin-links--spacing-y: The vertical spacing for the admin links group.\n * @cssprop --outline-admin-links--link-spacing-y: The vertical padding for the individual admin links.\n * @cssprop --outline-admin-links--link-spacing-x: The horizontal padding for the individual admin links.\n * @todo: Ensure this component is more mobile friendly.\n */\n@customElement('outline-admin-links')\nexport class OutlineAdminLinks extends OutlineElement {\n slots = new SlotsController(this);\n static styles: CSSResultGroup = [componentStyles];\n\n render(): TemplateResult {\n return html`
${this.slots.renderInShadow('')}
`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'outline-admin-links': OutlineAdminLinks;\n }\n}\n","import { CSSResultGroup } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport componentStyles from './chop-admin-links.css.lit';\n\nimport { OutlineAdminLinks } from '@phase2/outline-admin-links';\n\n/**\n * The Admin links component.\n * @element chop-admin-links\n */\n@customElement('chop-admin-links')\nexport class CHOPAdminLinks extends OutlineAdminLinks {\n static styles: CSSResultGroup = [OutlineAdminLinks.styles, componentStyles];\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-admin-links': CHOPAdminLinks;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n color:var(--color-brown-900);\n background-color:var(--color-neutral-100);\n width:100%;\n}\n\n.card-wrapper{\n background-color:var(--color-neutral-100);\n padding:24px;\n border:1px solid;\n border-bottom-right-radius:7px;\n border-bottom-left-radius:7px;\n border-top:6px solid;\n display:flex;\n flex-direction:column;\n flex:1;\n}\n\n.card-wrapper.border-color-blue{\n border-color:var(--color-blue-500);\n }\n\n.card-wrapper.border-color-green{\n border-color:var(--color-green-500);\n }\n\n.card-wrapper.border-color-pink{\n border-color:var(--color-pink-700);\n }\n\n.card-wrapper.border-color-yellow{\n border-color:var(--color-yellow-500);\n }\n\n@media (min-width: 860px){\n\n.card-wrapper{\n min-width:416px\n}\n }\n\n.card-wrapper chop-styled-text{\n padding:0;\n }\n`;","import{nothing as t,noChange as i}from\"../lit-html.js\";import{Directive as r,PartType as s,directive as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends r{constructor(i){if(super(i),this.et=t,i.type!==s.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this.ft=void 0,this.et=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.et)return this.ft;this.et=r;const s=[r];return s.raw=s,this.ft={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=n(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n","import{directive as s}from\"../directive.js\";import{UnsafeHTMLDirective as e}from\"./unsafe-html.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class t extends e{}t.directiveName=\"unsafeSVG\",t.resultType=2;const o=s(t);export{o as unsafeSVG};\n//# sourceMappingURL=unsafe-svg.js.map\n","//\n// Returns a boolean whether the value is in the provided type\n//\nexport function isInType(x: T, values: readonly T[], name = ''): x is T {\n const result = values.includes(x);\n // Many patterns default to an empty string if there is no available value.\n // We don't want to be logging errors for (correctly set) empty values.\n if (!result && x !== '') {\n typeWarning(x, values, name);\n }\n return result;\n}\n\nexport function typeWarning(x: T, values: readonly T[], name = '') {\n // eslint-disable-next-line\n console.warn(\n `Warning: \"${x}\" is not ${\n name ? `of type ${name}` : `in type`\n }. Allowed '${values.join(' | ')}'.`\n );\n}\n","import type { IconLibrary } from '../library';\n\n//\n// System icons are a separate library to ensure they're always available, regardless of how the default icon library is\n// configured or if its icons resolve properly.\n//\n// All Outline components must use the system library instead of the default library. For visual consistency, system\n// icons are a subset of Bootstrap Icons.\n//\nexport const icons = {\n 'alarm': `\n \n \n \n \n \n \n \n \n \n `,\n 'apple': `\n \n \n \n \n \n \n \n `,\n 'arrow-right': `\n \n \n \n \n \n `,\n 'arrow-left': `\n \n \n \n `,\n 'campaign': `\n \n \n \n \n \n `,\n 'calendar-today': `\n \n \n \n \n \n \n \n \n `,\n 'chevron-down': `\n \n \n \n `,\n 'chevron-left': `\n \n \n \n `,\n 'chevron-right': `\n \n \n \n `,\n 'chevron-up': `\n \n \n \n `,\n 'chemistry': `\n \n \n \n \n \n \n \n \n \n \n \n \n `,\n 'children': `\n \n \n \n \n \n \n \n \n \n `,\n 'clipboard': `\n \n \n \n \n \n \n `,\n 'chop-logo': `\n \n \n \n \n \n \n `,\n 'clock': `\n \n \n \n \n `,\n 'close': `\n \n \n \n \n \n \n `,\n 'conversation': `\n \n \n \n \n \n \n \n \n \n `,\n 'credit-card': `\n \n \n \n \n \n \n \n \n `,\n 'error': `\n \n \n \n `,\n 'email-filled': `\n \n \n \n \n \n \n \n \n \n `,\n 'emergency-filled': `\n \n \n \n \n \n \n \n \n \n `,\n 'event-filled': `\n \n \n \n \n \n \n \n \n \n `,\n 'event': `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n 'external': `\n \n \n \n `,\n 'globe': `\n \n \n \n \n \n \n `,\n 'group': `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n 'hamburger-menu': `\n \n \n \n \n \n `,\n 'heart': `\n \n \n \n \n \n `,\n 'heart-burst': `\n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n 'heart-small': `\n \n \n \n `,\n 'home': `\n \n \n \n `,\n 'information': `\n \n \n \n `,\n 'location-pin': `\n \n \n \n \n \n \n \n \n `,\n 'location-filled': `\n \n \n \n \n \n \n \n \n \n `,\n 'location-plus': `\n \n \n \n \n `,\n 'location-target': `\n \n \n \n `,\n 'logomark': `\n \n \n \n \n \n `,\n 'logo-filled': `\n \n \n \n \n \n \n `,\n 'map': `\n \n \n \n \n \n \n \n `,\n 'medical-arrow-circle': `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n 'medical-bill': `\n \n \n \n \n \n \n \n `,\n 'medical-cross': `\n \n \n \n \n `,\n 'menu-mobile': `\n \n \n \n \n \n \n `,\n 'microphone': `\n \n \n \n \n \n \n \n `,\n 'paper': `\n \n \n \n \n \n \n \n \n \n `,\n 'people': `\n \n \n \n \n \n \n \n \n `,\n 'person-heart': `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n 'phone-filled': `\n \n \n \n \n \n \n \n \n \n `,\n 'phone-in-talk': `\n \n \n \n \n \n \n \n \n `,\n 'quote-opened': `\n \n \n \n `,\n 'quote-closed': `\n \n \n \n `,\n 'replay': `\n \n \n \n `,\n 'search': `\n \n \n \n `,\n 'search-mobile': `\n \n \n \n \n `,\n 'video-pause': `\n \n \n \n \n \n `,\n 'video-play': `\n \n \n \n \n `,\n 'walk-up-chart': `\n \n \n \n \n \n \n \n \n \n \n \n `,\n 'asterisk-filled': `\n \n \n \n \n \n \n \n \n \n `,\n 'twitter': `\n \n \n \n `,\n 'facebook': `\n \n \n \n `,\n 'linkedin': `\n \n \n \n `,\n 'youtube': `\n \n \n \n `,\n 'instagram': `\n \n \n \n `,\n 'plus': `\n \n \n \n `,\n 'minus': `\n \n \n \n `,\n 'filter': `\n \n \n\n `,\n 'document': `\n \n \n \n `,\n};\n\nconst systemLibrary: IconLibrary = {\n name: 'system',\n // @ts-expect-error - shrug.\n resolver: (name: keyof typeof icons) => {\n if (name in icons) {\n return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;\n }\n return '';\n },\n};\n\nexport default systemLibrary;\n","import { CHOPIcon } from './chop-icon';\nimport systemLibrary from './libraries/library.system';\n\nexport type IconLibraryResolver = (name: string) => string;\nexport type IconLibraryMutator = (svg: SVGElement) => void;\nexport interface IconLibrary {\n name: string;\n resolver: IconLibraryResolver;\n mutator?: IconLibraryMutator;\n}\n\nlet registry: IconLibrary[] = [systemLibrary];\nlet watchedIcons: CHOPIcon[] = [];\n\nexport function watchIcon(icon: CHOPIcon) {\n watchedIcons.push(icon);\n}\n\nexport function unwatchIcon(icon: CHOPIcon) {\n watchedIcons = watchedIcons.filter(el => el !== icon);\n}\n\nexport function getIconLibrary(name?: string) {\n return registry.find(lib => lib.name === name);\n}\n\nexport function registerIconLibrary(\n name: string,\n options: { resolver: IconLibraryResolver; mutator?: IconLibraryMutator }\n) {\n unregisterIconLibrary(name);\n registry.push({\n name,\n resolver: options.resolver,\n mutator: options.mutator,\n });\n\n // Redraw watched icons\n watchedIcons.forEach(icon => {\n if (icon.library === name) {\n icon.redraw();\n }\n });\n}\n\nexport function unregisterIconLibrary(name: string) {\n registry = registry.filter(lib => lib.name !== name);\n}\n","import type { IconLibrary } from '../library';\n\n//\n// System icons are a separate library to ensure they're always available, regardless of how the default icon library is\n// configured or if its icons resolve properly.\n//\n// All Outline components must use the system library instead of the default library. For visual consistency, system\n// icons are a subset of Bootstrap Icons.\n//\nconst icons = {\n 'check-lg': `\n \n \n \n `,\n 'chevron-down': `\n \n \n \n `,\n 'chevron-left': `\n \n \n \n `,\n 'chevron-right': `\n \n \n \n `,\n 'chevron-up': `\n \n \n \n `,\n 'x': `\n \n \n \n `,\n 'x-circle-fill': `\n \n \n \n `,\n};\n\nconst systemLibrary: IconLibrary = {\n name: 'system',\n // @ts-expect-error - shrug.\n resolver: (name: keyof typeof icons) => {\n if (name in icons) {\n return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;\n }\n return '';\n },\n};\n\nexport default systemLibrary;\n","import { OutlineIcon } from '@phase2/outline-icon';\n\nimport systemLibrary from './libraries/library.system';\nimport bootstrapLibrary from './libraries/library.bootstrap';\nimport boxiconLibrary from './libraries/library.boxicons';\nimport lucideLibrary from './libraries/library.lucide';\nimport heroiconsLibrary from './libraries/library.heroicons';\nimport iconoirLibrary from './libraries/library.iconoir';\nimport ioniconsLibrary from './libraries/library.ionicons';\nimport jamLibrary from './libraries/library.jam';\nimport fontawesomeLibrary from './libraries/library.fontawesome';\nimport materialLibrary from './libraries/library.material';\nimport remixLibrary from './libraries/library.remix';\nimport uniconsLibrary from './libraries/library.unicons';\nimport customLibrary from './libraries/library.custom';\n\nexport type IconLibraryResolver = (name: string) => string;\nexport type IconLibraryMutator = (svg: SVGElement) => void;\nexport interface IconLibrary {\n name: string;\n resolver: IconLibraryResolver;\n mutator?: IconLibraryMutator;\n}\n\nlet registry: IconLibrary[] = [\n systemLibrary,\n bootstrapLibrary,\n boxiconLibrary,\n lucideLibrary,\n heroiconsLibrary,\n iconoirLibrary,\n ioniconsLibrary,\n jamLibrary,\n fontawesomeLibrary,\n materialLibrary,\n remixLibrary,\n uniconsLibrary,\n customLibrary,\n];\nlet watchedIcons: OutlineIcon[] = [];\n\nexport function watchIcon(icon: OutlineIcon) {\n watchedIcons.push(icon);\n}\n\nexport function unwatchIcon(icon: OutlineIcon) {\n watchedIcons = watchedIcons.filter(el => el !== icon);\n}\n\nexport function getIconLibrary(name?: string) {\n return registry.find(lib => lib.name === name);\n}\n\nexport function registerIconLibrary(\n name: string,\n options: { resolver: IconLibraryResolver; mutator?: IconLibraryMutator }\n) {\n unregisterIconLibrary(name);\n registry.push({\n name,\n resolver: options.resolver,\n mutator: options.mutator,\n });\n\n // Redraw watched icons\n watchedIcons.forEach(icon => {\n if (icon.library === name) {\n icon.redraw();\n }\n });\n}\n\nexport function unregisterIconLibrary(name: string) {\n registry = registry.filter(lib => lib.name !== name);\n}\n","import type { IconLibrary } from '../library';\n\nconst library: IconLibrary = {\n name: 'bootstrap',\n resolver: name =>\n `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.0.0/icons/${name}.svg`,\n};\n\nexport default library;\n","import { IconLibrary } from '../library';\n\nconst library: IconLibrary = {\n name: 'boxicons',\n resolver: name => {\n let folder = 'regular';\n if (name.substring(0, 4) === 'bxs-') folder = 'solid';\n if (name.substring(0, 4) === 'bxl-') folder = 'logos';\n return `https://cdn.jsdelivr.net/npm/boxicons@2.0.5/svg/${folder}/${name}.svg`;\n },\n mutator: svg => svg.setAttribute('fill', 'currentColor'),\n};\n\nexport default library;\n","import { IconLibrary } from '../library';\n\nconst library: IconLibrary = {\n name: 'lucide',\n resolver: name =>\n `https://cdn.jsdelivr.net/npm/lucide-static@0.16.29/icons/${name}.svg`,\n};\n\nexport default library;\n","import type { IconLibrary } from '../library';\n\nconst library: IconLibrary = {\n name: 'heroicons',\n resolver: name =>\n `https://cdn.jsdelivr.net/npm/heroicons@0.4.2/outline/${name}.svg`,\n mutator: svg => {\n svg.setAttribute('width', '16px');\n svg.setAttribute('height', '16px');\n },\n};\n\nexport default library;\n","import type { IconLibrary } from '../library';\n\nconst library: IconLibrary = {\n name: 'iconoir',\n resolver: name =>\n `https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@latest/icons/${name}.svg`,\n};\n\nexport default library;\n","import { IconLibrary } from '../library';\n\nconst library: IconLibrary = {\n name: 'ionicons',\n resolver: name =>\n `https://cdn.jsdelivr.net/npm/ionicons@5.1.2/dist/ionicons/svg/${name}.svg`,\n mutator: svg => {\n svg.setAttribute('fill', 'currentColor');\n svg.setAttribute('stroke', 'currentColor');\n [...svg.querySelectorAll('.ionicon-fill-none')].map(el =>\n el.setAttribute('fill', 'none')\n );\n [...svg.querySelectorAll('.ionicon-stroke-width')].map(el =>\n el.setAttribute('stroke-width', '32px')\n );\n },\n};\n\nexport default library;\n","import type { IconLibrary } from '../library';\n\nconst library: IconLibrary = {\n name: 'jam',\n resolver: name =>\n `https://cdn.jsdelivr.net/npm/jam-icons@2.0.0/svg/${name}.svg`,\n mutator: svg => svg.setAttribute('fill', 'currentColor'),\n};\n\nexport default library;\n","import type { IconLibrary } from '../library';\n\nconst library: IconLibrary = {\n name: 'fa',\n resolver: name => {\n const filename = name.replace(/^fa[rbs]-/, '');\n let folder = 'regular';\n if (name.substring(0, 4) === 'fas-') folder = 'solid';\n if (name.substring(0, 4) === 'fab-') folder = 'brands';\n return `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/svgs/${folder}/${filename}.svg`;\n },\n mutator: svg => svg.setAttribute('fill', 'currentColor'),\n};\n\nexport default library;\n","import { IconLibrary } from '../library';\n\nconst library: IconLibrary = {\n name: 'material',\n resolver: name => {\n const match = name.match(/^(.*?)(_(round|sharp))?$/);\n // prettier-ignore\n // @ts-expect-error ts-mismatch\n return `https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.5/svg/${match[1]}/${match[3] || 'outline'}.svg`;\n },\n mutator: svg => svg.setAttribute('fill', 'currentColor'),\n};\n\nexport default library;\n","/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-ignore\nimport { IconLibrary } from '../library';\n\nconst library: IconLibrary = {\n name: 'remix',\n resolver: name => {\n const match = name.match(/^(.*?)\\/(.*?)?$/);\n // prettier-ignore\n // @ts-expect-error ts-mismatch\n match[1] = match[1].charAt(0).toUpperCase() + match[1].slice(1);\n // prettier-ignore\n // @ts-expect-error ts-mismatch\n return `https://cdn.jsdelivr.net/npm/remixicon@2.5.0/icons/${match[1]}/${match[2]}.svg`;\n },\n mutator: svg => svg.setAttribute('fill', 'currentColor'),\n};\n\nexport default library;\n","import { IconLibrary } from '../library';\n\nconst library: IconLibrary = {\n name: 'unicons',\n resolver: name => {\n const match = name.match(/^(.*?)(-s)?$/);\n // prettier-ignore\n // @ts-expect-error ts-mismatch\n return `https://cdn.jsdelivr.net/npm/@iconscout/unicons@3.0.3/svg/${match[2] === '-s' ? 'solid' : 'line'}/${match[1]}.svg`;\n },\n mutator: svg => svg.setAttribute('fill', 'currentColor'),\n};\n\nexport default library;\n","import { IconLibrary } from '../library';\n\nconst library: IconLibrary = {\n name: 'custom',\n resolver: name => `./dist/assets/svg/custom/${name}.svg`,\n //mutator: svg => svg.setAttribute('fill', 'currentColor'),\n};\n\nexport default library;\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:block;\n box-sizing:border-box;\n}\n\n:host *,\n:host *::before,\n:host *::after{\n box-sizing:inherit;\n}\n\n[hidden]{\n display:none !important;\n}\n`;","interface IncludeFile {\n ok: boolean;\n status: number;\n html: string;\n}\n\nconst includeFiles = new Map>();\n\nexport function requestInclude(\n src: string,\n mode: 'cors' | 'no-cors' | 'same-origin' = 'cors'\n): Promise {\n if (includeFiles.has(src)) {\n return includeFiles.get(src)!;\n }\n const fileDataPromise = fetch(src, { mode: mode }).then(async response => {\n return {\n ok: response.ok,\n status: response.status,\n html: await response.text(),\n };\n });\n includeFiles.set(src, fileDataPromise);\n return fileDataPromise;\n}\n","import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { OutlineElement, emit, watch } from '@phase2/outline-core';\nimport componentStyles from './outline-include.css.lit';\nimport { requestInclude } from './request';\n\n/**\n * @since 2.0\n * @status stable\n *\n * @event outline-load - Emitted when the included file is loaded.\n * @event {{ status: number }} outline-error - Emitted when the included file fails to load due to an error.\n */\n@customElement('outline-include')\nexport class OutlineInclude extends OutlineElement {\n static styles = [componentStyles];\n\n /**\n * The location of the HTML file to include.\n *\n * WARNING: Be sure you trust the content you are including as it will be executed as code and can result in XSS attacks.\n */\n @property() src: string;\n\n /** The fetch mode to use. */\n @property() mode: 'cors' | 'no-cors' | 'same-origin' = 'cors';\n\n /**\n * Allows included scripts to be executed. You must ensure the content you're including is trusted, otherwise this\n * option can lead to XSS vulnerabilities in your app!\n */\n @property({ attribute: 'allow-scripts', type: Boolean }) allowScripts = false;\n\n executeScript(script: HTMLScriptElement) {\n // Create a copy of the script and swap it out so the browser executes it\n const newScript = document.createElement('script');\n [...script.attributes].forEach(attr =>\n newScript.setAttribute(attr.name, attr.value)\n );\n newScript.textContent = script.textContent;\n script.parentNode!.replaceChild(newScript, script);\n }\n\n @watch('src')\n async handleSrcChange() {\n try {\n const src = this.src;\n const file = await requestInclude(src, this.mode);\n\n // If the src changed since the request started do nothing, otherwise we risk overwriting a subsequent response\n if (src !== this.src) {\n return;\n }\n\n if (!file.ok) {\n emit(this, 'outline-error', { detail: { status: file.status } });\n return;\n }\n\n this.innerHTML = file.html;\n\n if (this.allowScripts) {\n [...this.querySelectorAll('script')].forEach(script =>\n this.executeScript(script)\n );\n }\n\n emit(this, 'outline-load');\n } catch {\n emit(this, 'outline-error', { detail: { status: -1 } });\n }\n }\n\n render() {\n return html``;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'outline-include': OutlineInclude;\n }\n}\n","import { requestInclude } from '@phase2/outline-include';\n\ntype IconFile =\n | {\n ok: true;\n status: number;\n svg: string;\n }\n | {\n ok: false;\n status: number;\n svg: null;\n };\n\ninterface IconFileUnknown {\n ok: boolean;\n status: number;\n svg: string | null;\n}\n\nconst iconFiles = new Map();\n\nexport async function requestIcon(url: string): Promise {\n if (iconFiles.has(url)) {\n return iconFiles.get(url)!;\n }\n const fileData = await requestInclude(url);\n const iconFileData: IconFileUnknown = {\n ok: fileData.ok,\n status: fileData.status,\n svg: null,\n };\n if (fileData.ok) {\n const div = document.createElement('div');\n div.innerHTML = fileData.html;\n const svg = div.firstElementChild;\n iconFileData.svg =\n svg?.tagName.toLowerCase() === 'svg' ? svg.outerHTML : '';\n }\n\n iconFiles.set(url, iconFileData as IconFile);\n return iconFileData as IconFile;\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host svg{\n height:inherit;\n width:inherit;\n display:flex;\n}\n`;","import { CSSResultGroup, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport {\n OutlineElement,\n watch,\n emit,\n defaultIconConfig,\n} from '@phase2/outline-core';\nimport { getIconLibrary, unwatchIcon, watchIcon } from './library';\nimport { requestIcon } from './request';\nimport componentStyles from './outline-icon.css.lit';\n\nconst parser = new DOMParser();\n\n/**\n * @since 1.0\n * @status stable\n *\n * @event outline-load - Emitted when the icon has loaded.\n * @event outline-error - Emitted when the icon fails to load due to an error.\n *\n * @csspart base - The component's base wrapper.\n */\n@customElement('outline-icon')\nexport class OutlineIcon extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n @state() private svg = '';\n\n /** The name of the icon to draw. */\n @property({ type: String, reflect: true, attribute: 'name' })\n name?: string;\n\n /**\n * An external URL of an SVG file.\n *\n * WARNING: Be sure you trust the content you are including as it will be executed as code and can result in XSS attacks.\n */\n @property({ type: String, attribute: 'src' })\n src?: string;\n\n /** An alternate description to use for accessibility. If omitted, the icon will be ignored by assistive devices. */\n /** @todo: Make this default to \"true\" and be turned off when an icon is decorative. */\n @property({ attribute: 'label' })\n label: string | boolean = false;\n\n /** The name of a registered custom icon library. */\n @property({ type: String, attribute: 'library' })\n library = defaultIconConfig.defaults.library;\n\n /**\n * The width and height of the icon.\n * @param size in pixels\n * @default 32px\n */\n @property({ attribute: 'size' })\n size: string | boolean = defaultIconConfig.defaults.size;\n\n connectedCallback() {\n super.connectedCallback();\n watchIcon(this);\n }\n\n firstUpdated() {\n this.setIcon();\n this.sizeIcon();\n }\n\n updated() {\n this.setIcon();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n unwatchIcon(this);\n }\n\n private sizeIcon() {\n if (\n this.size &&\n typeof this.size === 'string' &&\n this.size !== defaultIconConfig.defaults.size\n ) {\n const icon: HTMLElement | null | undefined =\n this.shadowRoot?.querySelector('.icon');\n icon?.style.setProperty('width', this.size);\n icon?.style.setProperty('height', this.size);\n }\n }\n\n private getUrl() {\n const library = getIconLibrary(this.library);\n if (this.name && library) {\n return library.resolver(this.name);\n }\n return this.src;\n }\n\n /** @internal Fetches the icon and redraws it. Used to handle library registrations. */\n redraw() {\n this.setIcon();\n }\n\n @watch('name')\n @watch('src')\n @watch('library')\n async setIcon() {\n const library = getIconLibrary(this.library);\n const url = this.getUrl();\n if (url) {\n try {\n const file = await requestIcon(url);\n if (url !== this.getUrl()) {\n // If the url has changed while fetching the icon, ignore this request\n return;\n } else if (file.ok) {\n const doc = parser.parseFromString(file.svg, 'text/html');\n const svgEl = doc.body.querySelector('svg');\n\n if (svgEl !== null) {\n library?.mutator?.(svgEl);\n\n this.svg = svgEl.outerHTML;\n emit(this, 'outline-load');\n } else {\n this.svg = '';\n emit(this, 'outline-error', { detail: { status: file.status } });\n }\n } else {\n this.svg = '';\n emit(this, 'outline-error', { detail: { status: file.status } });\n }\n } catch {\n emit(this, 'outline-error', { detail: { status: -1 } });\n }\n } else if (this.svg.length > 0) {\n // If we can't resolve a URL and an icon was previously set, remove it\n this.svg = '';\n }\n }\n\n render() {\n const hasLabel = typeof this.label === 'string' && this.label.length > 0;\n\n const wrapperClasses = {\n icon: true,\n [`icon-library--${this.library}`]: this.library,\n };\n // aria-hidden=${ifDefined(hasLabel ? undefined : 'true')}\n return html` \n ${unsafeSVG(this.svg)}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'outline-icon': OutlineIcon;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host svg{\n height:inherit;\n width:inherit;\n display:flex;\n color:inherit;\n}\n:host .icon-primary-color--currentcolor svg path.primary{\n fill:currentColor;\n}\n:host .icon-primary-color--white svg path.primary{\n fill:var(--color-neutral-100);\n}\n:host .icon-primary-color--blue svg path.primary{\n fill:var(--color-blue-700);\n}\n:host .icon-primary-color--light_blue svg path.primary{\n fill:var(--color-blue-500);\n}\n:host .icon-primary-color--dark_blue svg path.primary{\n fill:var(--color-blue-800);\n}\n:host .icon-primary-color--pink svg path.primary{\n fill:var(--color-pink-500);\n}\n:host .icon-primary-color--dark_pink svg path.primary{\n fill:var(--color-pink-800);\n}\n:host .icon-primary-color--light_pink svg path.primary{\n fill:var(--color-pink-500);\n}\n:host .icon-primary-color--green svg path.primary{\n fill:var(--color-green-500);\n}\n:host .icon-primary-color--dark_green svg path.primary{\n fill:var(--color-green-800);\n}\n:host .icon-primary-color--light_green svg path.primary{\n fill:var(--color-green-500);\n}\n:host .icon-primary-color--brown svg path.primary{\n fill:var(--color-brown-700);\n}\n:host .icon-primary-color--dark_brown svg path.primary{\n fill:var(--color-brown-800);\n}\n:host .icon-accent-color--none svg path.primary{\n fill:currentColor;\n}\n:host .icon-accent-color--currentcolor svg path.accent{\n fill:currentColor;\n}\n:host .icon-accent-color--white svg path.accent{\n fill:var(--color-neutral-100);\n}\n:host .icon-accent-color--light_blue svg path.accent{\n fill:var(--color-blue-500);\n}\n:host .icon-accent-color--blue svg path.accent{\n fill:var(--color-blue-700);\n}\n:host .icon-accent-color--green svg path.accent{\n fill:var(--color-green-500);\n}\n:host .icon-accent-color--brown svg path.accent{\n fill:var(--color-brown-700);\n}\n:host .icon-accent-color--dark_brown svg path.accent{\n fill:var(--color-brown-800);\n}\n:host .icon-accent-color--pink svg path.accent{\n fill:var(--color-pink-500);\n}\n:host .icon-accent-color--dark_pink svg path.accent{\n fill:var(--color-pink-700);\n}\n:host .icon-accent-color--dark_green svg path.accent{\n fill:var(--color-green-800);\n}\n:host .icon-accent-color--light_green svg path.accent{\n fill:var(--color-green-500);\n}\n:host .icon-accent-color--light_pink svg path.accent{\n fill:var(--color-pink-500);\n}\n:host .icon-accent-color--dark_blue svg path.accent{\n fill:var(--color-blue-600);\n}\n:host .icon-accent-color--none svg path.accent{\n fill:currentColor;\n}\n:host .icon-is-filled{\n background-color:var(--color-green-700);\n border-radius:50%;\n position:relative;\n}\n:host .icon-is-filled svg{\n width:60%;\n height:60%;\n top:50%;\n left:50%;\n position:absolute;\n transform:translate(-50%, -50%);\n}\n:host .icon-is-filled svg path.primary,\n:host .icon-is-filled svg path.accent{\n fill:var(--color-neutral-100);\n}\n`;","//\n// Returns a boolean whether the value is a valid css size\n//\nexport function isValidCssSize(value: string | null) {\n if (!value) {\n return false;\n }\n try {\n return new RegExp(/(\\d+px$|\\d+rem$|\\d+em$|\\d+%$)/).test(value);\n } catch (e) {\n return false;\n }\n}\n","import { CSSResultGroup, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { isInType } from '../../../utilities/isInType';\n\nimport { OutlineElement, watch, emit } from '@phase2/outline-core';\nimport { getIconLibrary, unwatchIcon, watchIcon } from './library';\nimport { requestIcon } from '@phase2/outline-icon';\nimport componentStyles from './chop-icon.css.lit';\nimport { isValidCssSize } from '../../../utilities/isValidCssSize';\n\nconst parser = new DOMParser();\n\nexport enum iconPrimaryColors {\n 'Currentcolor' = 'currentcolor',\n 'White' = 'white',\n 'Blue' = 'blue',\n 'Light Blue' = 'light_blue',\n 'Green' = 'green',\n 'Brown' = 'brown',\n 'Dark Brown' = 'dark_brown',\n 'Pink' = 'pink',\n 'Dark Pink' = 'dark_pink',\n 'Dark Green' = 'dark_green',\n 'Light Green' = 'light_green',\n 'Light Pink' = 'light_pink',\n 'Dark Blue' = 'dark_blue',\n}\n\nexport type IconPrimaryColors = `${iconPrimaryColors}`;\n\nexport enum iconAccentColors {\n 'Currentcolor' = 'currentcolor',\n 'White' = 'white',\n 'Blue' = 'blue',\n 'Light Blue' = 'light_blue',\n 'Green' = 'green',\n 'Brown' = 'brown',\n 'Dark Brown' = 'dark_brown',\n 'Pink' = 'pink',\n 'Dark Pink' = 'dark_pink',\n 'Dark Green' = 'dark_green',\n 'Light Green' = 'light_green',\n 'Light Pink' = 'light_pink',\n 'Dark Blue' = 'dark_blue',\n 'None' = 'none',\n}\nexport type IconAccentColors = `${iconAccentColors}`;\n\n/**\n * @since 1.0\n * @status stable\n *\n * @event outline-load - Emitted when the icon has loaded.\n * @event outline-error - Emitted when the icon fails to load due to an error.\n *\n * @csspart base - The component's base wrapper.\n */\n@customElement('chop-icon')\nexport class CHOPIcon extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n @state() private svg = '';\n\n /** The name of the icon to draw. */\n @property({ type: String, reflect: true, attribute: 'name' })\n name?: string;\n\n /**\n * An external URL of an SVG file.\n *\n * WARNING: Be sure you trust the content you are including as it will be executed as code and can result in XSS attacks.\n */\n @property({ type: String, attribute: 'src' })\n src?: string;\n\n /**\n * If this is excluded, it suggests that the icon serves a purely decorative purpose.\n * If the intention is for the icon to provide information, ensure that the label\n * attribute is included to be accessible by assistive devices.\n */\n @property({ attribute: 'label' })\n label: string | boolean = false;\n\n /** The name of a registered custom icon library. */\n @property({ type: String, attribute: 'library' })\n library = 'system';\n\n /**\n * The width and height of the icon.\n * @param size in pixels\n * @default 32px\n */\n @property({\n attribute: 'size',\n converter: value => (isValidCssSize(value) ? value : null),\n })\n size: string | null = '';\n\n /**\n * The width of the icon. Overrides size.\n * @param width in pixels\n * @default 32px\n */\n @property({\n attribute: 'width',\n converter: value => (isValidCssSize(value) ? value : null),\n })\n width: string | null = '';\n\n /**\n * The height of the icon.\n * @param height in pixels\n * @default 32px\n */\n @property({\n attribute: 'height',\n converter: value => (isValidCssSize(value) ? value : null),\n })\n height: string | null = '';\n\n /**\n * The primary color of the icon.\n * @param primary in IconPrimaryColors\n * @default currentcolor\n */\n @property({\n attribute: 'primary',\n converter: value => {\n return isInType(\n value,\n Object.values(iconPrimaryColors),\n 'IconPrimaryColors'\n )\n ? value\n : 'currentcolor';\n },\n })\n primary = 'currentcolor';\n\n /**\n * The accent color of the icon.\n * @param accent in IconAccentColors\n * @default currentcolor\n */\n @property({\n attribute: 'accent',\n converter: value => {\n return isInType(\n value,\n Object.values(iconAccentColors),\n 'IconAccentColors'\n )\n ? value\n : 'currentcolor';\n },\n })\n accent = 'currentcolor';\n\n /**\n * If the icon should be filled in.\n * @param isFilled\n * @default false\n */\n @property({ type: Boolean, reflect: true, attribute: 'is-filled' })\n isFilled = false;\n\n connectedCallback() {\n super.connectedCallback();\n watchIcon(this);\n }\n\n firstUpdated() {\n this.setIcon();\n this.setIconSize();\n }\n\n updated() {\n this.setIcon();\n this.setIconSize();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n unwatchIcon(this);\n }\n\n setIconSize() {\n if (this.size) {\n this.sizeIcon('size', this.size);\n }\n if (this.width) {\n this.sizeIcon('width', this.width);\n }\n if (this.height) {\n this.sizeIcon('height', this.height);\n }\n }\n\n private sizeIcon(property = '', value = '') {\n if (value.length) {\n const icon: HTMLElement | null | undefined =\n this.shadowRoot?.querySelector('.icon');\n switch (property) {\n case 'height':\n case 'width':\n icon?.style.setProperty(property, value);\n break;\n default:\n icon?.style.setProperty('width', value);\n icon?.style.setProperty('height', value);\n break;\n }\n }\n }\n\n private getUrl() {\n const library = getIconLibrary(this.library);\n if (this.name && library) {\n return library.resolver(this.name);\n }\n return this.src;\n }\n\n /** @internal Fetches the icon and redraws it. Used to handle library registrations. */\n redraw() {\n this.setIcon();\n }\n\n @watch('name')\n @watch('src')\n @watch('library')\n async setIcon() {\n const library = getIconLibrary(this.library);\n const url = this.getUrl();\n if (url) {\n try {\n const file = await requestIcon(url);\n if (url !== this.getUrl()) {\n // If the url has changed while fetching the icon, ignore this request\n return;\n } else if (file.ok) {\n const doc = parser.parseFromString(file.svg, 'text/html');\n const svgEl = doc.body.querySelector('svg');\n\n if (svgEl !== null) {\n library?.mutator?.(svgEl);\n\n this.svg = svgEl.outerHTML;\n emit(this, 'outline-load');\n } else {\n this.svg = '';\n emit(this, 'outline-error', { detail: { status: file.status } });\n }\n } else {\n this.svg = '';\n emit(this, 'outline-error', { detail: { status: file.status } });\n }\n } catch {\n emit(this, 'outline-error', { detail: { status: -1 } });\n }\n } else if (this.svg.length > 0) {\n // If we can't resolve a URL and an icon was previously set, remove it\n this.svg = '';\n }\n }\n\n render() {\n const hasLabel = typeof this.label === 'string' && this.label.length > 0;\n\n const wrapperClasses = {\n 'icon': true,\n [`icon-library--${this.library}`]: this.library,\n [`icon-primary-color--${this.primary}`]: true,\n [`icon-accent-color--${this.accent}`]: true,\n 'icon-is-filled': this.isFilled,\n };\n\n return html` \n ${unsafeSVG(this.svg)}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-icon': CHOPIcon;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n::slotted(.multiple){\n display:grid;\n gap:32px;\n grid-template-columns:1fr;\n}\n @media (min-width: 1100px){::slotted(.multiple){\n grid-template-columns:1fr 1fr\n}\n }\n\n.card-wrapper{\n border-radius:6px;\n background:#faf9f7;\n background:var(--color-brown-100, #faf9f7);\n padding:20px 32px;\n}\n\n.chop-collapsible-panel-heading{\n display:flex;\n justify-content:space-between;\n}\n\n.chop-collapsible-panel-heading .heading-title{\n font-family:var(--ff-display);\n }\n\n.chop-collapsible-panel-heading .heading-title .icon-wrapper{\n margin-right:10px;\n }\n\n.chop-collapsible-panel-heading .heading-link{\n color:var(--color-blue-700);\n font-weight:var(--fw-medium);\n font-size:var(--fs-sm);\n cursor:pointer;\n }\n\n.chop-collapsible-panel-heading .heading-link .icon-wrapper{\n margin-left:16px;\n }\n\n.chop-collapsible-panel-heading .heading-link span{\n display:none;\n }\n\n@media (min-width: 668px){\n\n.chop-collapsible-panel-heading .heading-link span{\n display:block\n }\n }\n\n.chop-collapsible-panel-heading .heading-title,\n .chop-collapsible-panel-heading .heading-link{\n display:flex;\n }\n\n.chop-collapsible-panel-content{\n margin-top:18px;\n}\n\n.chop-collapsible-panel-content .content-wrapper{\n display:flex;\n }\n`;","import { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { icons } from '../chop-icon/libraries/library.system';\nimport { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '../chop-icon/chop-icon';\nimport componentStyles from './chop-collapsible-panel.css.lit';\n\n/**\n * The collapsible panel component.\n * @element chop-collapsible-panel\n *\n * @slot panel-title\n * @slot link-title\n * @slot content\n */\n\n@customElement('chop-collapsible-panel')\nexport class CHOPCollapsiblePanel extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n\n /**\n * Used to provided a unique ID\n * for accordion component and accessibility purposes.\n */\n @property({ type: String, reflect: true, attribute: 'id' })\n id: '';\n\n @property({ type: String, reflect: true, attribute: 'icon-name' })\n iconName?: typeof icons;\n\n @property({ type: Boolean, reflect: true, attribute: true })\n active = true;\n\n @property({ type: Boolean, reflect: true, attribute: true })\n isCollapsible = false;\n\n containsMultiple() {\n const parent = this.querySelector(\n 'div[slot=\"panel-content\"]'\n ) as HTMLDivElement;\n const alerts = this.querySelectorAll('chop-alert');\n\n const childCount = parent?.childElementCount ?? 1;\n\n let multiple = false;\n\n if (childCount > 1) {\n parent.classList.add('multiple');\n\n alerts?.forEach(element => {\n const alert: HTMLElement = element as HTMLElement;\n alert.classList.add('multiple');\n });\n multiple = true;\n }\n return multiple;\n }\n\n render(): TemplateResult {\n const classes = {\n 'card-wrapper': true,\n 'collapsible-panel-main': true,\n 'multiple': this.containsMultiple(),\n };\n\n return html`
\n
\n
${this.panelTitleTemplate()}
\n ${this.linkCollapseTemplate()}\n
\n \n ${this.panelContentTemplate()}\n
\n `;\n }\n\n panelTitleTemplate() {\n if (this.slots.exist('panel-title')) {\n return html`
\n \n
\n
\n ${this.slots.conditionalSlot('panel-title', false)}\n
`;\n } else {\n return nothing;\n }\n }\n\n panelContentTemplate() {\n if (this.slots.exist('panel-content')) {\n return html`${this.slots.conditionalSlot('panel-content', false)}`;\n } else {\n return nothing;\n }\n }\n\n linkCollapseTemplate() {\n const status = this.active ? 'Hide' : 'Show';\n if (this.isCollapsible) {\n return html`\n \n ${status} notifications\n \n `;\n } else {\n return nothing;\n }\n }\n\n setActive() {\n this.active = !this.active;\n // Saving status of the panel to local storage.\n localStorage.setItem('chop-panel-' + this.id, this.active.toString());\n this.requestUpdate();\n }\n\n connectedCallback() {\n super.connectedCallback();\n const storedState = localStorage.getItem('chop-panel-' + this.id);\n // @see https://phase2tech.atlassian.net/browse/CHOP-450\n // Store the ID in localStorage.\n localStorage.setItem('chop-collapsible-panel' + this.id, this.id);\n const storedId = localStorage.getItem('chop-collapsible-panel' + this.id);\n // Select the first DOM element that matches the 'chop-collapsible-panel' selector.\n const panel = document.querySelector('chop-collapsible-panel');\n if (panel) {\n // Gets the current panel element's ID.\n const panelId = panel.id;\n // Compare the panel ID in the DOM with the stored ID in localStorage.\n if (panelId !== storedId) {\n // Updates the 'active' property of the component.\n this.active = storedState === 'true';\n }\n }\n if (storedState !== null) {\n this.active = storedState === 'true';\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-collapsible-panel': CHOPCollapsiblePanel;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:block;\n}\n\n.chop-headline{\n color:inherit;\n font-family:var(--headline-2xl-mid-font-family);\n display:block;\n margin:0;\n font-weight:inherit;\n word-break:keep-all;\n\n}\n\n.chop-headline a{\n text-decoration:none;\n }\n\n.chop-headline a:hover{\n text-decoration:underline;\n }\n\n.chop-headline p{\n padding:0;\n margin:0;\n text-align:left;\n }\n\n.chop-headline.brown-900{\n color:var(--color-brown-900);\n }\n\n.clickable-card h1,\n .clickable-card h2,\n .clickable-card h3,\n .clickable-card h4,\n .clickable-card h5,\n .clickable-card h6,\n .clickable-card a{\n color:var(--color-blue-600);\n text-decoration:none;\n word-break:keep-all;\n }\n\n.clickable-card h1:hover, .clickable-card h2:hover, .clickable-card h3:hover, .clickable-card h4:hover, .clickable-card h5:hover, .clickable-card h6:hover, .clickable-card a:hover{\n text-decoration:underline;\n cursor:pointer;\n }\n\n.clickable-card h1:focus,\n .clickable-card h1:focus-visible,\n .clickable-card h2:focus,\n .clickable-card h2:focus-visible,\n .clickable-card h3:focus,\n .clickable-card h3:focus-visible,\n .clickable-card h4:focus,\n .clickable-card h4:focus-visible,\n .clickable-card h5:focus,\n .clickable-card h5:focus-visible,\n .clickable-card h6:focus,\n .clickable-card h6:focus-visible,\n .clickable-card a:focus,\n .clickable-card a:focus-visible{\n outline:2px solid var(--color-blue-600);\n outline-offset:2px;\n border-radius:8px;\n }\n\n.clickable-card h1:after, .clickable-card h2:after, .clickable-card h3:after, .clickable-card h4:after, .clickable-card h5:after, .clickable-card h6:after, .clickable-card a:after{\n position:absolute;\n inset:0;\n content:'';\n }\n\n.clickable-card.dark-mode h1,\n .clickable-card.dark-mode h2,\n .clickable-card.dark-mode h3,\n .clickable-card.dark-mode h4,\n .clickable-card.dark-mode h5,\n .clickable-card.dark-mode h6,\n .clickable-card.dark-mode a{\n color:var(--color-neutral-100);\n text-decoration:none;\n }\n\n.clickable-card.dark-mode h1:hover, .clickable-card.dark-mode h2:hover, .clickable-card.dark-mode h3:hover, .clickable-card.dark-mode h4:hover, .clickable-card.dark-mode h5:hover, .clickable-card.dark-mode h6:hover, .clickable-card.dark-mode a:hover{\n text-decoration:underline;\n cursor:pointer;\n }\n\n.clickable-card.dark-mode h1:focus,\n .clickable-card.dark-mode h1:focus-visible,\n .clickable-card.dark-mode h2:focus,\n .clickable-card.dark-mode h2:focus-visible,\n .clickable-card.dark-mode h3:focus,\n .clickable-card.dark-mode h3:focus-visible,\n .clickable-card.dark-mode h4:focus,\n .clickable-card.dark-mode h4:focus-visible,\n .clickable-card.dark-mode h5:focus,\n .clickable-card.dark-mode h5:focus-visible,\n .clickable-card.dark-mode h6:focus,\n .clickable-card.dark-mode h6:focus-visible,\n .clickable-card.dark-mode a:focus,\n .clickable-card.dark-mode a:focus-visible{\n outline:2px solid var(--color-neutral-100);\n outline-offset:2px;\n border-radius:8px;\n }\n\n.clickable-card.dark-mode h1:after, .clickable-card.dark-mode h2:after, .clickable-card.dark-mode h3:after, .clickable-card.dark-mode h4:after, .clickable-card.dark-mode h5:after, .clickable-card.dark-mode h6:after, .clickable-card.dark-mode a:after{\n position:absolute;\n inset:0;\n content:'';\n }\n\n.headline-3xl{\n font-size:var(--fs-4half-xl);\n line-height:var(--headline-3xl-min-line-height);\n font-family:var(--headline-3xl-min-font-family);\n letter-spacing:var(--headline-3xl-min-letter-spacing);\n text-transform:var(--headline-3xl-min-text-case);\n font-weight:var(--headline-3xl-min-font-weight);\n}\n\n@media (min-width: 860px){\n\n.headline-3xl{\n font-size:clamp(2.5rem, 2.5rem + 3.125vw, 4.5rem);\n line-height:var(--headline-3xl-mid-line-height);\n font-family:var(--headline-3xl-mid-font-family);\n letter-spacing:var(--headline-3xl-mid-letter-spacing);\n text-transform:var(--headline-3xl-mid-text-case);\n font-weight:var(--headline-3xl-mid-font-weight)\n}\n }\n\n@media (min-width: 1100px){\n\n.headline-3xl{\n line-height:var(--headline-3xl-max-line-height);\n font-family:var(--headline-3xl-max-font-family);\n letter-spacing:var(--headline-3xl-max-letter-spacing);\n text-transform:var(--headline-3xl-max-text-case);\n font-weight:var(--headline-3xl-max-font-weight)\n}\n }\n\n.headline-2xl{\n font-size:clamp(2.25rem, 2.25rem + 2.734375vw, 4rem);\n font-weight:var(--headline-2xl-min-font-weight);\n line-height:var(--headline-2xl-min-line-height);\n font-family:var(--headline-2xl-min-font-family);\n letter-spacing:var(--headline-2xl-min-letter-spacing);\n text-transform:var(--headline-2xl-min-text-case);\n}\n\n@media (min-width: 860px){\n\n.headline-2xl{\n font-weight:var(--headline-2xl-mid-font-weight);\n line-height:var(--headline-2xl-mid-line-height);\n font-family:var(--headline-2xl-mid-font-family);\n letter-spacing:var(--headline-2xl-mid-letter-spacing);\n text-transform:var(--headline-2xl-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\n.headline-2xl{\n font-weight:var(--headline-2xl-max-font-weight);\n line-height:var(--headline-2xl-max-line-height);\n font-family:var(--headline-2xl-max-font-family);\n letter-spacing:var(--headline-2xl-max-letter-spacing);\n text-transform:var(--headline-2xl-max-text-case)\n}\n }\n\n.headline-xl{\n font-size:clamp(2rem, 2rem + 2.34375vw, 3.5rem);\n font-weight:var(--headline-xl-min-font-weight);\n line-height:var(--headline-xl-min-line-height);\n font-family:var(--headline-xl-min-font-family);\n letter-spacing:var(--headline-xl-min-letter-spacing);\n text-transform:var(--headline-xl-min-text-case);\n}\n\n@media (min-width: 860px){\n\n.headline-xl{\n font-weight:var(--headline-xl-mid-font-weight);\n line-height:var(--headline-xl-mid-line-height);\n font-family:var(--headline-xl-mid-font-family);\n letter-spacing:var(--headline-xl-mid-letter-spacing);\n text-transform:var(--headline-xl-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\n.headline-xl{\n font-weight:var(--headline-xl-max-font-weight);\n line-height:var(--headline-xl-max-line-height);\n font-family:var(--headline-xl-max-font-family);\n letter-spacing:var(--headline-xl-max-letter-spacing);\n text-transform:var(--headline-xl-max-text-case)\n}\n }\n\n.headline-lg{\n font-weight:var(--headline-lg-min-font-weight);\n font-size:clamp(1.75rem, 1.75rem + 1.5625vw, 2.75rem);\n font-size:clamp(1.625rem, 1.625rem + 1.3672vw, 2.5rem);\n line-height:var(--headline-lg-min-line-height);\n font-family:var(--headline-lg-min-font-family);\n letter-spacing:var(--headline-lg-min-letter-spacing);\n text-transform:var(--headline-lg-min-text-case);\n}\n\n@media (min-width: 860px){\n\n.headline-lg{\n font-weight:var(--headline-lg-mid-font-weight);\n line-height:var(--headline-lg-mid-line-height);\n font-family:var(--headline-lg-mid-font-family);\n letter-spacing:var(--headline-lg-mid-letter-spacing);\n text-transform:var(--headline-lg-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\n.headline-lg{\n font-weight:var(--headline-lg-max-font-weight);\n line-height:var(--headline-lg-max-line-height);\n font-family:var(--headline-lg-max-font-family);\n letter-spacing:var(--headline-lg-max-letter-spacing);\n text-transform:var(--headline-lg-max-text-case)\n}\n }\n\n.headline-md{\n font-size:clamp(1.5rem, 1.5rem + 1.171875vw, 2.25rem);\n line-height:var(--headline-md-min-line-height);\n font-family:var(--headline-md-min-font-family);\n font-weight:var(--headline-md-min-font-weight);\n}\n\n@media (min-width: 860px){\n\n.headline-md{\n font-weight:var(--headline-md-mid-font-weight);\n line-height:var(--headline-md-mid-line-height);\n font-family:var(--headline-md-mid-font-family);\n letter-spacing:var(--headline-md-mid-letter-spacing);\n text-transform:var(--headline-md-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\n.headline-md{\n font-weight:var(--headline-md-max-font-weight);\n line-height:var(--headline-md-max-line-height);\n font-family:var(--headline-md-max-font-family);\n letter-spacing:var(--headline-md-max-letter-spacing);\n text-transform:var(--headline-md-max-text-case)\n}\n }\n\n.headline-sm{\n font-weight:var(--headline-sm-min-font-weight);\n font-size:clamp(1.25rem, 1.25rem + 0.78125vw, 1.75rem);\n line-height:var(--headline-sm-min-line-height);\n font-family:var(--headline-sm-min-font-family);\n letter-spacing:var(--headline-sm-min-letter-spacing);\n text-transform:var(--headline-sm-min-text-case);\n}\n\n@media (min-width: 860px){\n\n.headline-sm{\n font-weight:var(--headline-sm-mid-font-weight);\n line-height:var(--headline-md-mid-line-height);\n font-family:var(--headline-md-mid-font-family);\n letter-spacing:var(--headline-md-mid-letter-spacing);\n text-transform:var(--headline-md-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\n.headline-sm{\n font-weight:var(--headline-sm-max-font-weight);\n line-height:var(--headline-sm-max-line-height);\n font-family:var(--headline-sm-max-font-family);\n letter-spacing:var(--headline-sm-max-letter-spacing);\n text-transform:var(--headline-sm-max-text-case)\n}\n }\n\n.headline-xs{\n font-size:clamp(1.125rem, 1.125rem + 0.5859375vw, 1.5rem);\n font-weight:var(--headline-xs-min-font-weight);\n line-height:var(--headline-xs-min-line-height);\n font-family:var(--headline-xs-min-font-family);\n letter-spacing:var(--headline-xs-min-letter-spacing);\n text-transform:var(--headline-xs-min-text-case);\n}\n\n@media (min-width: 860px){\n\n.headline-xs{\n font-weight:var(--headline-xs-mid-font-weight);\n line-height:var(--headline-xs-mid-line-height);\n font-family:var(--headline-xs-mid-font-family);\n letter-spacing:var(--headline-xs-mid-letter-spacing);\n text-transform:var(--headline-xs-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\n.headline-xs{\n font-weight:var(--headline-xs-max-font-weight);\n line-height:var(--headline-xs-max-line-height);\n font-family:var(--headline-xs-max-font-family);\n letter-spacing:var(--headline-xs-max-letter-spacing);\n text-transform:var(--headline-xs-max-text-case)\n}\n }\n\n.headline-eyebrow{\n font-size:clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);\n font-weight:700;\n letter-spacing:3px;\n text-transform:uppercase;\n line-height:var(--headline-eyebrow-min-line-height);\n font-family:var(--headline-eyebrow-min-font-family);\n}\n\n@media (min-width: 860px){\n\n.headline-eyebrow{\n line-height:var(--headline-eyebrow-mid-line-height);\n font-family:var(--headline-eyebrow-mid-font-family)\n}\n }\n\n@media (min-width: 1100px){\n\n.headline-eyebrow{\n line-height:var(--headline-eyebrow-max-line-height);\n font-family:var(--headline-eyebrow-max-font-family)\n}\n }\n\n@media (min-width: 860px){\n .less-margin-bottom--xs{\n margin-bottom:-0.5rem;\n }\n .less-margin-bottom--sm{\n margin-bottom:-1rem;\n }\n .less-margin-bottom--md{\n margin-bottom:-2rem;\n }\n .less-margin-bottom--lg{\n margin-bottom:-3rem;\n }\n .less-margin-bottom--xl{\n margin-bottom:-4rem;\n }\n .less-margin-bottom--2xl{\n margin-bottom:-5rem;\n }\n .less-margin-bottom--3xl{\n margin-bottom:-6rem;\n }\n}\n`;","import { customElement, property, query } from 'lit/decorators.js';\nimport { OutlineElement } from '@phase2/outline-core';\nimport globalTokens from '../../../figma.tokens.json';\nimport componentStyles from './chop-heading.css.lit';\nimport { CSSResultGroup, html } from 'lit';\n\nexport type AllowedHeadingSizes =\n keyof (typeof globalTokens.semantic)['headline'];\nexport type AllowedHeadingStyles =\n keyof (typeof globalTokens.global)['font-weight'];\n\nexport type AllowedColors = keyof (typeof globalTokens.global)['color'];\n\n/**\n * The CHOP Heading component.\n *\n * @element chop-heading\n *\n * @slot - Default slot for the heading content\n *\n * @property {AllowedHeadingSizes} levelSize - The font-size of the heading, defined by the semantic headline sizes in the global tokens\n * @attr {string} level-size - Reflects the `levelSize` property to an attribute\n *\n * @property {boolean} clickableCard - Determines if the heading is part of a clickable card\n * @attr {boolean} clickable-card - Reflects the `clickableCard` property to an attribute\n *\n * @property {AllowedHeadingSizes} lessMarginBottom - This is to reduce the button margin of the heading.\n * @attr {string} less-margin-bottom - Reflects the `lessMarginBottom` property to an attribute.\n *\n */\n@customElement('chop-heading')\nexport class CHOPHeading extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n @query('slot')\n defaultSlot!: HTMLSlotElement;\n\n @property({ type: String, reflect: true, attribute: 'level-size' })\n levelSize: AllowedHeadingSizes;\n\n @property({ type: Boolean, reflect: true, attribute: 'clickable-card' })\n clickableCard = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'dark-mode' })\n darkMode = false;\n\n @property({ type: String, reflect: true, attribute: 'color' })\n color: AllowedHeadingStyles;\n\n @property({ type: String, reflect: true, attribute: 'less-margin-bottom' })\n lessMarginBottom: AllowedHeadingSizes;\n\n updated(changedProperties: Map) {\n super.updated(changedProperties);\n\n const elementClasses = {\n 'chop-headline': true,\n [`headline-${this.levelSize}`]: this.levelSize,\n 'clickable-card': !!this.clickableCard,\n 'dark-mode': !!this.darkMode,\n [`${this.color}`]: !!this.color,\n [`less-margin-bottom--${this.lessMarginBottom}`]: this.lessMarginBottom,\n };\n\n const element = this.getTopLevelElementInSlot();\n if (element) {\n // Clear all classes\n element.className = '';\n\n Object.keys(elementClasses).forEach(key => {\n if (elementClasses[key]) {\n element.classList.add(key);\n }\n });\n }\n }\n\n render() {\n return html``;\n }\n\n getTopLevelElementInSlot() {\n const assignedElements = this.defaultSlot?.assignedElements();\n return assignedElements?.[0];\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-heading': CHOPHeading;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n--element-margin-top:var(--spacing-6);\n--element-margin-bottom:var(--spacing-6);\n--element-margin-top-sm:var(--spacing-4);\n--element-margin-bottom-sm:var(--spacing-4);\n--list-y-spacing:var(--spacing-3);\n--list-x-spacing:var(--spacing-12);\nh1,\nh2,\nh3,\nh4,\nh5,\nh6{\n display:block;\n color:currentColor;\n}\n.headline-3xl{\n font-size:clamp(2.5rem, 2.5rem + 3.125vw, 4.5rem);\n line-height:var(--headline-3xl-min-line-height);\n font-family:var(--headline-3xl-min-font-family);\n letter-spacing:var(--headline-3xl-min-letter-spacing);\n text-transform:var(--headline-3xl-min-text-case);\n font-weight:var(--headline-3xl-min-font-weight);\n}\n@media (min-width: 860px){\n.headline-3xl{\n line-height:var(--headline-3xl-mid-line-height);\n font-family:var(--headline-3xl-mid-font-family);\n letter-spacing:var(--headline-3xl-mid-letter-spacing);\n text-transform:var(--headline-3xl-mid-text-case);\n font-weight:var(--headline-3xl-mid-font-weight)\n}\n }\n@media (min-width: 1100px){\n.headline-3xl{\n line-height:var(--headline-3xl-max-line-height);\n font-family:var(--headline-3xl-max-font-family);\n letter-spacing:var(--headline-3xl-max-letter-spacing);\n text-transform:var(--headline-3xl-max-text-case);\n font-weight:var(--headline-3xl-max-font-weight)\n}\n }\n.headline-2xl{\n font-size:clamp(2.25rem, 2.25rem + 2.734375vw, 4rem);\n font-weight:var(--headline-2xl-min-font-weight);\n line-height:var(--headline-2xl-min-line-height);\n font-family:var(--headline-2xl-min-font-family);\n letter-spacing:var(--headline-2xl-min-letter-spacing);\n text-transform:var(--headline-2xl-min-text-case);\n}\n@media (min-width: 860px){\n.headline-2xl{\n font-weight:var(--headline-2xl-mid-font-weight);\n line-height:var(--headline-2xl-mid-line-height);\n font-family:var(--headline-2xl-mid-font-family);\n letter-spacing:var(--headline-2xl-mid-letter-spacing);\n text-transform:var(--headline-2xl-mid-text-case)\n}\n }\n@media (min-width: 1100px){\n.headline-2xl{\n font-weight:var(--headline-2xl-max-font-weight);\n line-height:var(--headline-2xl-max-line-height);\n font-family:var(--headline-2xl-max-font-family);\n letter-spacing:var(--headline-2xl-max-letter-spacing);\n text-transform:var(--headline-2xl-max-text-case)\n}\n }\nh1,\n.headline-xl,\nh1 a,\n.headline-xl a{\n font-size:clamp(2rem, 2rem + 2.34375vw, 3.5rem);\n font-weight:var(--headline-xl-min-font-weight);\n line-height:var(--headline-xl-min-line-height);\n font-family:var(--headline-xl-min-font-family);\n letter-spacing:var(--headline-xl-min-letter-spacing);\n text-transform:var(--headline-xl-min-text-case);\n}\n@media (min-width: 860px){\nh1,\n.headline-xl,\nh1 a,\n.headline-xl a{\n font-weight:var(--headline-xl-mid-font-weight);\n line-height:var(--headline-xl-mid-line-height);\n font-family:var(--headline-xl-mid-font-family);\n letter-spacing:var(--headline-xl-mid-letter-spacing);\n text-transform:var(--headline-xl-mid-text-case)\n}\n }\n@media (min-width: 1100px){\nh1,\n.headline-xl,\nh1 a,\n.headline-xl a{\n font-weight:var(--headline-xl-max-font-weight);\n line-height:var(--headline-xl-max-line-height);\n font-family:var(--headline-xl-max-font-family);\n letter-spacing:var(--headline-xl-max-letter-spacing);\n text-transform:var(--headline-xl-max-text-case)\n}\n }\nh2,\n.headline-lg,\nh2 a,\n.headline-lg a{\n font-weight:var(--headline-lg-min-font-weight);\n font-size:clamp(1.75rem, 1.75rem + 1.5625vw, 2.5rem);\n font-size:clamp(1.625rem, 1.625rem + 1.3672vw, 2.5rem);\n line-height:var(--headline-lg-min-line-height);\n font-family:var(--headline-lg-min-font-family);\n letter-spacing:var(--headline-lg-min-letter-spacing);\n text-transform:var(--headline-lg-min-text-case);\n}\n@media (min-width: 860px){\nh2,\n.headline-lg,\nh2 a,\n.headline-lg a{\n font-weight:var(--headline-lg-mid-font-weight);\n line-height:var(--headline-lg-mid-line-height);\n font-family:var(--headline-lg-mid-font-family);\n letter-spacing:var(--headline-lg-mid-letter-spacing);\n text-transform:var(--headline-lg-mid-text-case)\n}\n }\n@media (min-width: 1100px){\nh2,\n.headline-lg,\nh2 a,\n.headline-lg a{\n font-weight:var(--headline-lg-max-font-weight);\n line-height:var(--headline-lg-max-line-height);\n font-family:var(--headline-lg-max-font-family);\n letter-spacing:var(--headline-lg-max-letter-spacing);\n text-transform:var(--headline-lg-max-text-case)\n}\n }\nh3,\n.headline-md,\nh3 a,\n.headline-md a{\n font-size:clamp(1.5rem, 1.5rem + 1.171875vw, 2.25rem);\n line-height:var(--headline-md-min-line-height);\n font-family:var(--headline-md-min-font-family);\n font-weight:var(--headline-md-min-font-weight);\n}\n@media (min-width: 860px){\nh3,\n.headline-md,\nh3 a,\n.headline-md a{\n font-weight:var(--headline-md-mid-font-weight);\n line-height:var(--headline-md-mid-line-height);\n font-family:var(--headline-md-mid-font-family);\n letter-spacing:var(--headline-md-mid-letter-spacing);\n text-transform:var(--headline-md-mid-text-case)\n}\n }\n@media (min-width: 1100px){\nh3,\n.headline-md,\nh3 a,\n.headline-md a{\n font-weight:var(--headline-md-max-font-weight);\n line-height:var(--headline-md-max-line-height);\n font-family:var(--headline-md-max-font-family);\n letter-spacing:var(--headline-md-max-letter-spacing);\n text-transform:var(--headline-md-max-text-case)\n}\n }\nh4,\n.headline-sm,\nh4 a,\n.headline-sm a{\n font-weight:var(--headline-sm-min-font-weight);\n font-size:clamp(1.25rem, 1.25rem + 0.78125vw, 1.75rem);\n line-height:var(--headline-sm-min-line-height);\n font-family:var(--headline-sm-min-font-family);\n letter-spacing:var(--headline-sm-min-letter-spacing);\n text-transform:var(--headline-sm-min-text-case);\n}\n@media (min-width: 860px){\nh4,\n.headline-sm,\nh4 a,\n.headline-sm a{\n font-weight:var(--headline-sm-mid-font-weight);\n line-height:var(--headline-md-mid-line-height);\n font-family:var(--headline-md-mid-font-family);\n letter-spacing:var(--headline-md-mid-letter-spacing);\n text-transform:var(--headline-md-mid-text-case)\n}\n }\n@media (min-width: 1100px){\nh4,\n.headline-sm,\nh4 a,\n.headline-sm a{\n font-weight:var(--headline-sm-max-font-weight);\n line-height:var(--headline-sm-max-line-height);\n font-family:var(--headline-sm-max-font-family);\n letter-spacing:var(--headline-sm-max-letter-spacing);\n text-transform:var(--headline-sm-max-text-case)\n}\n }\nh5,\n.headline-xs,\nh5 a,\n.headline-xs a{\n font-weight:var(--headline-xs-min-font-weight);\n font-size:clamp(1.125rem, 1.125rem + 0.78125vw, 1.35rem);\n line-height:var(--headline-xs-min-line-height);\n font-family:var(--headline-xs-min-font-family);\n letter-spacing:var(--headline-xs-min-letter-spacing);\n text-transform:var(--headline-xs-min-text-case);\n}\n@media (min-width: 860px){\nh5,\n.headline-xs,\nh5 a,\n.headline-xs a{\n font-weight:var(--headline-xs-mid-font-weight);\n line-height:var(--headline-xs-mid-line-height);\n font-family:var(--headline-xs-mid-font-family);\n letter-spacing:var(--headline-xs-mid-letter-spacing);\n text-transform:var(--headline-xs-mid-text-case)\n}\n }\n@media (min-width: 1100px){\nh5,\n.headline-xs,\nh5 a,\n.headline-xs a{\n font-weight:var(--headline-xs-max-font-weight);\n line-height:var(--headline-xs-max-line-height);\n font-family:var(--headline-xs-max-font-family);\n letter-spacing:var(--headline-xs-max-letter-spacing);\n text-transform:var(--headline-xs-max-text-case)\n}\n }\nh6,\nh6 a{\n font-weight:var(--headline-xs-min-font-weight);\n font-size:clamp(1.075rem, 1.075rem + 0.78125vw, 0.85rem);\n line-height:var(--headline-xs-min-line-height);\n font-family:var(--headline-xs-min-font-family);\n letter-spacing:var(--headline-xs-min-letter-spacing);\n text-transform:var(--headline-xs-min-text-case);\n}\n@media (min-width: 860px){\nh6,\nh6 a{\n font-weight:var(--headline-xs-mid-font-weight);\n line-height:var(--headline-xs-mid-line-height);\n font-family:var(--headline-xs-mid-font-family);\n letter-spacing:var(--headline-xs-mid-letter-spacing);\n text-transform:var(--headline-xs-mid-text-case)\n}\n }\n@media (min-width: 1100px){\nh6,\nh6 a{\n font-weight:var(--headline-xs-max-font-weight);\n line-height:var(--headline-xs-max-line-height);\n font-family:var(--headline-xs-max-font-family);\n letter-spacing:var(--headline-xs-max-letter-spacing);\n text-transform:var(--headline-xs-max-text-case)\n}\n }\nh1 a,\n.headline-xl a,\nh2 a,\n.headline-lg a,\nh3 a,\n.headline-md a,\nh4 a,\n.headline-sm a,\nh5 a,\n.headline-xs a,\nh6 a{\n color:inherit;\n}\nstrong{\n font-family:var(--ff-bold);\n}\nchop-styled-text p,\np,\na,\nul,\nol{\n font-family:var(--body-md-max-reg-font-family);\n font-weight:var(--body-font-weight);\n font-size:var(--fs-lg);\n line-height:var(--body-md-max-reg-line-height);\n}\n@media (min-width: 1100px){\n chop-styled-text p,\n p,\n a,\n ul,\n ol{\n font-size:var(--body-md-max-reg-font-size);\n }\n}\nchop-styled-text p,\np{\n display:block;\n margin-top:var(--element-margin-top);\n margin-bottom:var(--element-margin-bottom);\n}\nh2,\nh3,\nh4,\nh5,\nh6{\n margin-bottom:var(--element-margin-bottom);\n}\np:first-child{\n margin-top:0;\n}\np:last-child{\n margin-bottom:0;\n}\nol,\nul{\n counter-reset:ol-counter;\n list-style-position:outside;\n padding-left:var(--spacing-12);\n}\nol{\n list-style-type:decimal;\n}\nol[type='a']{\n list-style-type:lower-alpha;\n}\nol[data-type='a']{\n list-style-type:lower-alpha;\n}\nol[data-type='A']{\n list-style-type:upper-alpha;\n}\nol[type='i']{\n list-style-type:lower-roman;\n}\nol[data-type='i']{\n list-style-type:lower-roman;\n}\nol[data-type='I']{\n list-style-type:upper-roman;\n}\nul ul,\nol ol{\n margin-top:var(--list-y-spacing);\n}\nul li{\n position:relative;\n margin-bottom:var(--list-y-spacing);\n list-style:disc url(\"data:image/svg+xml,%3Csvg width='8' height='27' viewBox='0 0 8 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='20.2783' r='4' fill='%2395B350'/%3E%3C/svg%3E%0A\");\n padding-left:20px;\n}\nul > li > ul li{\n list-style:circle url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='27' viewBox='0 0 8 27' fill='none'%3E%3Ccircle cx='4' cy='20.8291' r='3' stroke='%2395B350' stroke-width='2'/%3E%3C/svg%3E\");\n}\n@media (min-width: 1100px){\n ul li::before,\n ul > li > ul li::before{\n margin-right:12px;\n background-size:7px 26px;\n background-position:center -8px;\n }\n}\nul li .ck-list-bogus-paragraph,\nul li span{\n display:initial !important;\n}\nol li{\n position:relative;\n padding-left:8px;\n}\n> ul,\n> ol{\n margin-bottom:var(--element-margin-bottom);\n}\nol > li{\n position:relative;\n margin-bottom:var(--list-y-spacing);\n counter-increment:ol-counter;\n margin-left:var(--spacing-5);\n}\nli li{\n margin-left:0;\n}\nli ul,\nli ol{\n margin-left:var(--list-x-spacing);\n}\nul ol li{\n margin-left:var(--list-x-spacing);\n}\nul ul,\nol ol{\n padding-left:0;\n}\nol ol li{\n margin-left:var(--spacing-2);\n}\nol > li::marker{\n color:var(--list-marker-color);\n font-size:16px;\n}\n@media (min-width: 1100px){\n ol li{\n padding-left:10px;\n }\n ol > li::marker{\n font-size:var(--fs-xl);\n }\n}\nul.checkbox li::before{\n width:17px;\n height:27px;\n background-image:url(\"data:image/svg+xml,%3Csvg width='17' height='27' viewBox='0 0 17 27' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_388_2842)'%3E%3Cpath d='M6.15 22.2283L0 16.0783L1.9 14.1783L6.15 18.4533L15.3 9.27832L17.2 11.1783L6.15 22.2283Z' fill='%2341B6E6'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_388_2842'%3E%3Crect width='17' height='26' fill='white' transform='translate(0 0.27832)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A\");\n background-size:12px 22px;\n background-position:center 8px;\n}\nul.x-bullet li::before{\n width:15px;\n height:16px;\n background-image:url(\"data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_388_2846)'%3E%3Cpath d='M14.6672 1.12246C14.2235 0.678776 13.5068 0.678776 13.0631 1.12246L7.5 6.67423L1.93686 1.11108C1.49317 0.667399 0.776451 0.667399 0.332765 1.11108C-0.110922 1.55477 -0.110922 2.27149 0.332765 2.71518L5.89591 8.27832L0.332765 13.8415C-0.110922 14.2851 -0.110922 15.0019 0.332765 15.4456C0.776451 15.8892 1.49317 15.8892 1.93686 15.4456L7.5 9.88242L13.0631 15.4456C13.5068 15.8892 14.2235 15.8892 14.6672 15.4456C15.1109 15.0019 15.1109 14.2851 14.6672 13.8415L9.1041 8.27832L14.6672 2.71518C15.0995 2.28287 15.0995 1.55477 14.6672 1.12246Z' fill='%2341B6E6'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_388_2846'%3E%3Crect width='15' height='15' fill='white' transform='translate(0 0.77832)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A\");\n background-size:10px 11px;\n background-position:center 4px;\n}\n@media (min-width: 1100px){\n ul.checkbox li::before{\n background-size:17px 27px;\n background-position:center 4px;\n }\n ul.x-bullet li::before{\n background-size:15px 16px;\n background-position:center;\n }\n}\n.align-left,\n.align-right,\n.align-center{\n float:none;\n height:100%;\n width:auto;\n clear:both;\n margin-left:auto;\n margin-right:auto;\n}\n.align-left:first-child, .align-right:first-child, .align-center:first-child{\n margin-top:var(--element-margin-top);\n }\n.align-left div, .align-right div, .align-center div{\n height:100%;\n width:100%;\n }\n.align-left img, .align-right img, .align-center img{\n margin:0 auto;\n }\n@media (min-width: 860px){\n .align-left,\n .align-right,\n .align-center{\n max-width:50%;\n margin-bottom:var(--element-margin-bottom);\n }\n\n .align-left img, .align-right img, .align-center img{\n margin:initial;\n }\n\n .align-right{\n float:right;\n margin-left:var(--spacing-6);\n }\n\n .align-left{\n float:left;\n margin-right:var(--spacing-6);\n }\n\n .align-center{\n clear:both;\n display:block;\n margin-left:auto;\n margin-right:auto;\n }\n}\niframe{\n width:100%;\n height:100%;\n aspect-ratio:16/9;\n}\nfigure:has(.media--type-remote-video){\n display:block;\n}\nfigure{\n display:table;\n}\nfigcaption{\n display:block;\n caption-side:bottom;\n color:var(--color-brown-900);\n background-color:var(--bg-color--transparent);\n font-style:normal;\n font-size:var(--fs-sm);\n line-height:var(--lh-sm);\n padding:var(--spacing-004) 0;\n}\nfigcaption a{\n font-size:var(--fs-sm);\n }\nblockquote{\n font-style:italic;\n position:relative;\n padding-left:var(--spacing-12);\n}\nblockquote:before{\n content:'';\n display:block;\n position:absolute;\n top:0;\n left:0;\n width:4px;\n height:100%;\n border-radius:2px;\n background-color:var(--outline-gray-400);\n }\ntable.chop-table{\n width:100%;\n table-layout:fixed;\n}\ntable.chop-table tr{\n vertical-align:top;\n }\ntable.chop-table thead{\n background:var(--color-brown-300);\n }\ntable.chop-table thead tr th{\n padding:var(--spacing-03) var(--spacing-04);\n font-size:var(--fs-lg);\n font-weight:var(--fw-semibold);\n }\ntable.chop-table tbody tr:nth-child(even){\n background-color:var(--color-brown-100);\n }\ntable.chop-table tbody tr td{\n padding:var(--spacing-03) var(--spacing-04);\n }\ntable.chop-table ul,\n table.chop-table ol{\n padding-left:0;\n }\na.btn.link{\n display:inline-flex;\n}\n`;","import { OutlineElement } from '@phase2/outline-core';\nimport { html, TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport componentStyles from './chop-styled-text.css.lit';\n\n/**\n * The CHOP Styled Text component.\n * @element chop-styled-text\n * @slot defaultSlot\n * @prop Padding applied around the text when `hasPadding` is true.\n */\n@customElement('chop-styled-text')\nexport class CHOPStyledText extends OutlineElement {\n static styles = [componentStyles];\n render(): TemplateResult {\n return html` `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-styled-text': CHOPStyledText;\n }\n}\n","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport componentStyles from './chop-alert.css.lit';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '../chop-collapsible-panel/chop-collapsible-panel';\nimport '../chop-heading/chop-heading';\nimport '../chop-styled-text/chop-styled-text';\n\n/**\n * The alert component.\n * @element chop-alert\n *\n * @property border color - The border color to show in the alert.\n *\n * @slot heading\n * @slot chop-styled-text\n */\ntype borderColorOptions = 'blue' | 'pink' | 'green' | 'yellow';\n\n@customElement('chop-alert')\nexport class CHOPAlert extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n\n @property({ type: String, attribute: 'border-color' })\n borderColor: borderColorOptions = 'blue';\n\n render(): TemplateResult {\n const classes = {\n 'card-wrapper': true,\n [`border-color-${this.borderColor}`]: this.borderColor,\n };\n\n return html`
\n
\n ${this.slotTemplate('heading')} ${this.slotTemplate('chop-styled-text')}\n
\n
`;\n }\n\n headingTemplate() {\n if (this.slots.exist('heading')) {\n return html``;\n } else {\n return nothing;\n }\n }\n\n slotTemplate(name = '') {\n if (!this.slots.exist(name)) {\n return nothing;\n } else {\n return html` `;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-alert': CHOPAlert;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n.chop-alphabet-results{\n margin:0 var(--spacing-6);\n}\n`;","import { CSSResultGroup, html, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { OutlineElement } from '@phase2/outline-core';\n\nimport componentStyles from './chop-alphabet-results.css.lit';\nimport { CHOPAlphabetCategory } from './chop-alphabet-category/chop-alphabet-category';\n\n/**\n * @extends OutlineElement\n * @element chop-alphabet-results\n *\n * @slot categories - The categories of the alphabet\n *\n */\n\n@customElement('chop-alphabet-results')\nexport class CHOPAlphabetResults extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n alphabetCategories: NodeListOf;\n\n /**\n * Whether the top heading should be displayed.\n */\n @property({ type: Boolean, attribute: 'top-heading' })\n topHeading = false;\n\n firstUpdated() {\n this.setLastCategoryVariant();\n }\n\n render(): TemplateResult {\n return html`\n
\n \n
\n `;\n }\n\n /**\n * Sets the 'variant' attribute to 'last' for the last alphabet category element.\n * This is used to style the last category differently.\n */\n setLastCategoryVariant() {\n this.alphabetCategories = this.querySelectorAll('chop-alphabet-category');\n this.alphabetCategories.forEach((category, index) => {\n if (index === this.alphabetCategories.length - 1) {\n category.setAttribute('variant', 'last');\n }\n if (this.topHeading) {\n category.setAttribute('variant', 'top-heading');\n }\n });\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-alphabet-results': CHOPAlphabetResults;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:block;\n position:relative;\n overflow:hidden;\n}\n\nchop-column{\n padding:var(--spacing-10) 0 var(--spacing-8);\n}\n\n@media (min-width: var(--screen-lg)){\n\nchop-column{\n padding:var(--spacing-16) 0 var(--spacing-64)\n}\n }\n\nchop-column[remove-gap]{\n padding:initial;\n flex-direction:row;\n}\n\nchop-woven-svgs{\n position:absolute;\n aspect-ratio:3/1;\n height:auto;\n max-height:300px;\n}\n\n.breadcrumb{\n margin-left:var(--spacing-2);\n}\n\n.article-content-wrapper{\n width:100%;\n height:100%;\n}\n\n.article-content-wrapper .eyebrow{\n margin-bottom:var(--spacing-3);\n }\n\n@media (min-width: var(--screen-lg)){\n\n.article-content-wrapper .eyebrow{\n margin-bottom:var(--spacing-2)\n }\n }\n\n.article-content-wrapper .title{\n margin-bottom:var(--spacing-3);\n }\n\n@media (min-width: var(--screen-lg)){\n\n.article-content-wrapper .title{\n margin-bottom:var(--spacing-6)\n }\n }\n\n.article-content-wrapper .subheading{\n margin-bottom:var(--spacing-4);\n }\n\n@media (min-width: var(--screen-lg)){\n\n.article-content-wrapper .subheading{\n margin-bottom:var(--spacing-6)\n }\n }\n\n.article-content-wrapper .publication-date{\n margin-bottom:var(--spacing-8);\n }\n\n@media (min-width: var(--screen-lg)){\n\n.article-content-wrapper .publication-date{\n margin-bottom:var(--spacing-12)\n }\n }\n\n.article-content-wrapper .image{\n margin-bottom:var(--spacing-2);\n }\n\n@media (min-width: var(--screen-lg)){\n\n.article-content-wrapper .image{\n margin-bottom:var(--spacing-3)\n }\n }\n\n@media print{\n chop-grid:has(chop-breadcrumb){\n display:none;\n }\n}\n`;","import type { SVGLibrary } from '../library';\n\nexport const wovenSVGs = {\n desktop_middle_story_feature: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n mobile_middle_story_feature: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n desktop_left_block: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n desktop_left_block_wide: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n desktop_left_story: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n desktop_left_ribbon: `\n \n \n \n \n \n \n `,\n mobile_left_story: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n mobile_left_beige_ribbon: `\n \n \n \n \n \n \n \n \n \n \n \n `,\n desktop_top_right_quote: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n desktop_top_right_feature_card: `\n \n \n \n \n \n \n \n \n \n \n `,\n desktop_top_right: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n mobile_top_right: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n desktop_bottom_right: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n desktop_left: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n mobile_left: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n\n desktop_bottom: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n mobile_bottom: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n desktop_top_pink_blue: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n mobile_top_pink_blue: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n desktop_bottom_pink_blue: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n mobile_bottom_pink_blue: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n desktop_lg_footer: `\n \n \n \n \n `,\n desktop_footer: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n mobile_footer: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n desktop_left_beige_location_card: `\n \n \n \n \n `,\n mobile_bottom_beige_location_card: `\n \n \n \n \n \n \n \n \n \n \n `,\n grid_light_blue: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n grid_light_beige: `\n \n \n \n`,\n\n desktop_left_search_hero: `\n \n \n \n \n \n \n `,\n mobile_bottom_search_hero: `\n \n \n \n \n `,\n desktop_right_hero_basic_v1: `\n \n \n \n \n \n \n \n \n \n \n `,\n mobile_bottom_hero_basic_v1: `\n \n \n \n \n \n \n \n \n \n \n `,\n desktop_bottom_hero_basic_v2: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n mobile_bottom_hero_basic_v2: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n desktop_hero_ways_to_give: `\n \n \n \n \n \n `,\n};\n\nconst wovenLibrary: SVGLibrary = {\n name: 'woven',\n // @ts-expect-error - shrug.\n resolver: (name: keyof typeof wovenSVGs) => {\n if (name in wovenSVGs) {\n return `data:image/svg+xml,${encodeURIComponent(wovenSVGs[name])}`;\n }\n return '';\n },\n};\n\nexport default wovenLibrary;\n","import { CHOPWovenSVGs } from './chop-woven-svgs';\nimport systemLibrary from './libraries/library.woven';\n\nexport type SVGLibraryResolver = (name: string) => string;\nexport type SVGLibraryMutator = (svg: SVGElement) => void;\nexport interface SVGLibrary {\n name: string;\n resolver: SVGLibraryResolver;\n mutator?: SVGLibraryMutator;\n}\n\nlet registry: SVGLibrary[] = [systemLibrary];\nlet watchedSVGs: CHOPWovenSVGs[] = [];\n\nexport function watchSVG(svg: CHOPWovenSVGs) {\n watchedSVGs.push(svg);\n}\n\nexport function unwatchSVG(svg: CHOPWovenSVGs) {\n watchedSVGs = watchedSVGs.filter(el => el !== svg);\n}\n\nexport function getSVGLibrary(name?: string) {\n return registry.find(lib => lib.name === name);\n}\n\nexport function registerSVGLibrary(\n name: string,\n options: { resolver: SVGLibraryResolver; mutator?: SVGLibraryMutator }\n) {\n unregisterSVGLibrary(name);\n registry.push({\n name,\n resolver: options.resolver,\n mutator: options.mutator,\n });\n\n // Redraw watched svgs\n watchedSVGs.forEach(svg => {\n if (svg.library === name) {\n svg.redraw();\n }\n });\n}\n\nexport function unregisterSVGLibrary(name: string) {\n registry = registry.filter(lib => lib.name !== name);\n}\n","import { requestInclude } from '@phase2/outline-include';\n\ntype SVGFile =\n | {\n ok: true;\n status: number;\n svg: string;\n }\n | {\n ok: false;\n status: number;\n svg: null;\n };\n\ninterface SVGFileUnknown {\n ok: boolean;\n status: number;\n svg: string | null;\n}\n\nconst svgFiles = new Map();\n\nexport async function requestSVG(url: string): Promise {\n if (svgFiles.has(url)) {\n return svgFiles.get(url)!;\n }\n const fileData = await requestInclude(url);\n const svgFileData: SVGFileUnknown = {\n ok: fileData.ok,\n status: fileData.status,\n svg: null,\n };\n if (fileData.ok) {\n const div = document.createElement('div');\n div.innerHTML = fileData.html;\n const svg = div.firstElementChild;\n svgFileData.svg = svg?.tagName.toLowerCase() === 'svg' ? svg.outerHTML : '';\n }\n\n svgFiles.set(url, svgFileData as SVGFile);\n return svgFileData as SVGFile;\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:contents;\n height:100%;\n width:100%;\n}\n\n:host .svg-color--lightest_pink svg path.primary{\n fill:var(--color-pink-200);\n}\n\n:host .svg-color--lightest_pink svg path.accent{\n fill:var(--color-pink-100);\n}\n\n:host .svg-color--lightest_pink-reverse svg path.primary{\n fill:var(--color-pink-100);\n}\n\n:host .svg-color--lightest_pink-reverse svg path.accent{\n fill:var(--color-pink-200);\n}\n\n:host .svg-color--light_pink-reverse svg path.primary{\n fill:var(--color-pink-400);\n}\n\n:host .svg-color--light_pink-reverse svg path.accent{\n fill:var(--color-pink-600);\n}\n\n:host .svg-color--pink svg path.primary{\n fill:var(--color-pink-700);\n}\n\n:host .svg-color--pink svg path.accent{\n fill:var(--color-pink-500);\n}\n\n:host .svg-color--pink-reverse svg path.primary{\n fill:var(--color-pink-500);\n}\n\n:host .svg-color--pink-reverse svg path.accent{\n fill:var(--color-pink-700);\n}\n\n:host .svg-color--dark_pink svg path.primary{\n fill:var(--color-pink-800);\n}\n\n:host .svg-color--dark_pink svg path.accent{\n fill:var(--color-pink-600);\n}\n\n:host .svg-color--dark_pink-reverse svg path.primary{\n fill:var(--color-pink-700);\n}\n\n:host .svg-color--dark_pink-reverse svg path.accent{\n fill:var(--color-pink-800);\n}\n\n:host .svg-color--darker_pink svg path.primary{\n fill:var(--color-pink-900);\n}\n\n:host .svg-color--darker_pink svg path.accent{\n fill:var(--color-pink-800);\n}\n\n:host .svg-color--darker_pink-reverse svg path.primary{\n fill:var(--color-pink-800);\n}\n\n:host .svg-color--darker_pink-reverse svg path.accent{\n fill:var(--color-pink-900);\n}\n\n:host .svg-color--lighter_pink svg path.primary{\n fill:var(--color-pink-300);\n}\n\n:host .svg-color--lighter_pink svg path.accent{\n fill:var(--color-pink-700);\n}\n\n:host .svg-color--lighter_pink svg path.secondary{\n fill:var(--color-pink-100);\n}\n\n:host .svg-color--lightest_blue svg path.primary{\n fill:var(--color-blue-200);\n}\n\n:host .svg-color--lightest_blue svg path.accent{\n fill:var(--color-blue-100);\n}\n\n:host .svg-color--lightest_blue-reverse svg path.primary{\n fill:var(--color-blue-100);\n}\n\n:host .svg-color--lightest_blue-reverse svg path.accent{\n fill:var(--color-blue-200);\n}\n\n:host .svg-color--lighter_blue svg path.primary{\n fill:var(--color-blue-300);\n}\n\n:host .svg-color--lighter_blue svg path.accent{\n fill:var(--color-blue-400);\n}\n\n:host .svg-color--light_blue svg path.primary{\n fill:var(--color-blue-500);\n}\n\n:host .svg-color--light_blue svg path.accent{\n fill:var(--color-blue-400);\n}\n\n:host .svg-color--light_blue-reverse svg path.primary{\n fill:var(--color-blue-400);\n}\n\n:host .svg-color--light_blue-reverse svg path.accent{\n fill:var(--color-blue-500);\n}\n\n:host .svg-color--blue svg path.primary{\n fill:var(--color-blue-600);\n}\n\n:host .svg-color--blue svg path.accent{\n fill:var(--color-blue-700);\n}\n\n:host .svg-color--dark_blue svg path.primary{\n fill:var(--color-blue-700);\n}\n\n:host .svg-color--dark_blue svg path.accent{\n fill:var(--color-blue-500);\n}\n\n:host .svg-color--darker_blue svg path.primary{\n fill:var(--color-blue-800);\n}\n\n:host .svg-color--darker_blue svg path.accent{\n fill:var(--color-blue-600);\n}\n\n:host .svg-color--darker_blue-reverse svg path.primary{\n fill:var(--color-blue-600);\n}\n\n:host .svg-color--darker_blue-reverse svg path.accent{\n fill:var(--color-blue-800);\n}\n\n:host .svg-color--darkest_blue svg path.primary{\n fill:var(--color-blue-900);\n}\n\n:host .svg-color--darkest_blue svg path.accent{\n fill:var(--color-blue-800);\n}\n\n:host .svg-color--lighter_blue svg path.primary{\n fill:var(--color-blue-300);\n}\n\n:host .svg-color--lighter_blue svg path.accent{\n fill:var(--color-blue-500);\n}\n\n:host .svg-color--lighter_blue svg path.secondary{\n fill:var(--color-blue-100);\n}\n\n:host .svg-color--lightest_green svg path.primary{\n fill:var(--color-green-200);\n}\n\n:host .svg-color--lightest_green svg path.accent{\n fill:var(--color-green-100);\n}\n\n:host .svg-color--lightest_green-reverse svg path.primary{\n fill:var(--color-green-100);\n}\n\n:host .svg-color--lightest_green-reverse svg path.accent{\n fill:var(--color-green-200);\n}\n\n:host .svg-color--lighter_green svg path.primary{\n fill:var(--color-green-400);\n}\n\n:host .svg-color--lighter_green svg path.accent{\n fill:var(--color-green-300);\n}\n\n:host .svg-color--lighter_green-reverse svg path.primary{\n fill:var(--color-green-300);\n}\n\n:host .svg-color--lighter_green-reverse svg path.accent{\n fill:var(--color-green-400);\n}\n\n:host .svg-color--lighter_green-reverse svg path.secondary{\n fill:var(--color-green-100);\n}\n\n:host .svg-color--light_green svg path.primary{\n fill:var(--color-green-500);\n}\n\n:host .svg-color--light_green svg path.accent{\n fill:var(--color-green-400);\n}\n\n:host .svg-color--light_green-reverse svg path.primary{\n fill:var(--color-green-400);\n}\n\n:host .svg-color--light_green-reverse svg path.accent{\n fill:var(--color-green-500);\n}\n\n:host .svg-color--dark_green svg path.primary{\n fill:var(--color-green-700);\n}\n\n:host .svg-color--dark_green svg path.accent{\n fill:var(--color-green-500);\n}\n\n:host .svg-color--darker_green svg path.primary{\n fill:var(--color-green-800);\n}\n\n:host .svg-color--darker_green svg path.accent{\n fill:var(--color-green-700);\n}\n\n:host .svg-color--darkest_green svg path.primary{\n fill:var(--color-green-900);\n}\n\n:host .svg-color--lightest_beige svg path.primary{\n fill:var(--color-brown-100);\n}\n\n:host .svg-color--lightest_beige svg path.accent{\n fill:var(--color-brown-200);\n}\n\n:host .svg-color--lighter_beige svg path.primary{\n fill:var(--color-brown-200);\n}\n\n:host .svg-color--lighter_beige svg path.accent{\n fill:var(--color-brown-300);\n}\n\n:host .svg-color--light_beige svg path.primary{\n fill:var(--color-brown-300);\n}\n\n:host .svg-color--light_beige svg path.accent{\n fill:var(--color-brown-500);\n}\n\n:host .svg-color--light_beige svg path.primary{\n fill:var(--color-brown-300);\n}\n\n:host .svg-color--light_beige svg path.secondary{\n fill:var(--color-brown-100);\n}\n\n:host .svg-color--beige svg path.primary{\n fill:var(--color-brown-400);\n}\n\n:host .svg-color--beige svg path.accent{\n fill:var(--color-brown-500);\n}\n\nsvg{\n height:100%;\n width:100%;\n}\n\n@media (min-width: 1400px){\n\n.fixed-size{\n width:100%\n}\n }\n\n.fixed-size svg{\n width:auto;\n}\n\n@media (min-width: 1400px){\n\n.fixed-size svg{\n width:100%\n}\n }\n\n.story_feature svg{\n width:auto;\n}\n\n.story_feature.left.flip svg{\n transform:translateX(0.5px);\n}\n\n.middle.svg-library--woven{\n position:relative;\n}\n\n.svg-library--woven{\n height:100%;\n display:block;\n overflow:hidden;\n position:absolute;\n z-index:0;\n}\n\n@media (min-width: 1100px){\n\n.woven-bg.transparent{\n width:auto;\n height:auto\n}\n }\n\n.full{\n width:100%;\n min-width:100%;\n}\n\n.full:has(.hero-location.desktop){\n width:90%;\n min-width:90%;\n}\n\n.center{\n left:50%;\n transform:translateX(-50%);\n}\n\n.mobile.center-offset-left{\n left:50%;\n transform:translateX(-57%);\n}\n\n@media (min-width: 668px){\n\n.mobile.center-offset-left{\n transform:translateX(-53%)\n}\n }\n\n@media (min-width: 860px){\n\n.mobile.center-offset-left{\n transform:translateX(-50%)\n}\n }\n\n.bottom{\n bottom:0;\n}\n\n.top{\n top:0;\n}\n\n.top.pink_blue{\n top:auto;\n bottom:calc(100% - 175px);\n}\n\n.bottom.pink_blue{\n bottom:auto;\n top:calc(100% - 175px);\n}\n\n.left{\n left:0;\n}\n\n.left-250{\n left:-250px;\n}\n\n@media (min-width: 1790px){\n\n.left-250{\n left:-125px\n}\n }\n\n@media (min-width: 2000px){\n\n.left-250{\n left:0px\n}\n }\n\n.right{\n right:0;\n}\n\n.flip{\n transform:scaleX(-1);\n}\n\n.footer{\n width:100%;\n}\n\n.hero-basic-v1.mobile{\n height:auto;\n position:absolute;\n bottom:0;\n}\n\n.hero-basic-v1.desktop{\n width:auto;\n position:absolute;\n right:0;\n}\n\n.hero-basic-v2.mobile{\n height:auto;\n position:absolute;\n bottom:0;\n}\n\n.hero-basic-v2.desktop{\n width:auto;\n height:auto;\n position:absolute;\n left:0;\n bottom:0;\n}\n\n.hero-search.desktop,\n.hero-location.desktop{\n position:absolute;\n width:auto;\n left:0;\n top:0;\n}\n\n.mobile.ways_to_give{\n right:-460px;\n}\n\n.ways_to_give{\n right:-115px;\n}\n\n@media (min-width: 1100px){\n .location.desktop-left{\n max-width:580px;\n }\n}\n\n@media (min-width: 1400px){\n .location.desktop-left{\n max-width:780px;\n }\n}\n\n.location.woven-bg.mobile-bottom{\n width:auto;\n height:auto;\n left:0;\n top:-100px;\n}\n\n@media (min-width: 668px){\n .location.woven-bg.mobile-bottom{\n top:-150px;\n }\n}\n\n.pink_blue{\n height:auto;\n}\n\n@media (max-width: 860px){\n .bottom.pink_blue.center{\n transform:translateX(-53%);\n }\n .top.pink_blue.center{\n transform:translateX(-47%);\n }\n}\n\n@media print{\n :host{\n display:none;\n }\n}\n`;","import { CSSResultGroup, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport { OutlineElement, watch, emit } from '@phase2/outline-core';\nimport { isInType } from '../../../utilities/isInType';\nimport { getSVGLibrary, unwatchSVG, watchSVG } from './library';\nimport { requestSVG } from './request';\nimport componentStyles from './chop-woven-svgs.css.lit';\n\n/**\n * Blockquote:\n * light_blue-reverse - blue-400, blue-500\n * dark_blue - blue-700, blue-500\n * light_green-reverse - green-400, green-500\n * dark_pink - pink-800, pink-600\n * pink - pink-700, pink-500\n * light_beige - brown-300, brown-500\n *\n * Callout Cards:\n * dark_pink - pink-800, pink-600\n * dark_green - green-700, green-500\n * dark_blue - blue-700, blue-500\n * beige - brown-400, brown-500\n *\n * Content Quote Card:\n * beige - brown-400, brown-500\n * light_blue - blue-500, blue-400\n * light_green-reverese - green-400, green-500\n * pink - pink-700, pink-500\n *\n * Content Width Card: (Mobile - Content Quote Card)\n * blue - blue-600\n * darker_blue - blue-800\n * darker_green - green-800\n * dark_pink - pink-800\n * lighter_beige - brown-200\n *\n * Feature Card:\n * dark_blue - blue-700, blue-500\n * darker_green - green-800, green-700\n * pink - pink-700, pink-500\n *\n * Image Hero Card:\n * darker_pink-reverse - pink-900, pink-800\n * lightest_pink-reverse - pink-200, pink-100\n * lightest_beige - brown-100\n * lighter_beige - brown-300, brown-200\n * lightest_green-reverse - green-200, green-100\n * blue - blue-600, blue-700\n * darkest_blue - blue-900, blue-800\n * lightest_blue-reverse - blue-200, blue-100\n */\n\nexport enum svgColors {\n 'Bright Blue' = 'bright_blue',\n 'Lightest Blue' = 'lightest_blue',\n 'Lightest Blue Reverse' = 'lightest_blue-reverse',\n 'Lighter Blue' = 'lighter_blue',\n 'Light Blue' = 'light_blue',\n 'Light Blue Reverse' = 'light_blue-reverse',\n 'Blue' = 'blue',\n 'Dark Blue' = 'dark_blue',\n 'Darker Blue' = 'darker_blue',\n 'Darker Blue-reverse' = 'darker_blue-reverse',\n 'Darkest Blue' = 'darkest_blue',\n 'Lightest Green' = 'lightest_green',\n 'Lightest Green Reverse' = 'lightest_green-reverse',\n 'Lighter Green' = 'lighter_green',\n 'Lighter Green Reverse' = 'lighter_green-reverse',\n 'Light Green' = 'light_green',\n 'Light Green Reverse' = 'light_green-reverse',\n 'Dark Green' = 'dark_green',\n 'Darker Green' = 'darker_green',\n 'Darkest Green' = 'darkest_green',\n 'Lightest Beige' = 'lightest_beige',\n 'Lighter Beige' = 'lighter_beige',\n 'Light Beige' = 'light_beige',\n 'Beige' = 'beige',\n 'Lightest Pink' = 'lightest_pink',\n 'Lightest Pink Reverse' = 'lightest_pink-reverse',\n 'Light Pink' = 'light_pink',\n 'Light Pink Reverse' = 'light_pink-reverse',\n 'Pink' = 'pink',\n 'Pink Reverse' = 'pink-reverse',\n 'Dark Pink' = 'dark_pink',\n 'Dark Pink Reverse' = 'dark_pink-reverse',\n 'Darker Pink' = 'darker_pink',\n 'Darker Pink Reverse' = 'darker_pink-reverse',\n 'Pink Blue' = 'pink_blue',\n 'Lighter Pink' = 'lighter_pink',\n}\nexport type SVGColor = `${svgColors}`;\n\nexport enum verticalPosition {\n 'Top' = 'top',\n 'Middle' = 'middle',\n 'Bottom' = 'bottom',\n}\nexport type VerticalPosition = `${verticalPosition}`;\n\nexport enum horizontalPosition {\n 'Left' = 'left',\n 'Left -250' = 'left-250',\n 'Center' = 'center',\n 'Center Offset Left' = 'center-offset-left',\n 'Right' = 'right',\n}\nexport type HorizontalPosition = `${horizontalPosition}`;\n\nconst parser = new DOMParser();\n\n/**\n * @since 1.0\n * @status stable\n *\n * @event outline-load - Emitted when the svg has loaded.\n * @event outline-error - Emitted when the svg fails to load due to an error.\n *\n * @csspart base - The component's base wrapper.\n */\n@customElement('chop-woven-svgs')\nexport class CHOPWovenSVGs extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n @state() private svg = '';\n\n /** The name of the svg to draw. */\n @property({ type: String, reflect: true, attribute: 'name' })\n name?: string;\n\n /** Is mobile. */\n @property({ type: Boolean, reflect: true, attribute: 'is-mobile' })\n isMobile = false;\n\n /** Whether the image scales with the component width. */\n @property({ type: Boolean, reflect: true, attribute: 'fixed-size' })\n fixedSize = false;\n\n /** Always stretch to the component width. */\n @property({ type: Boolean, reflect: true, attribute: 'full' })\n full = false;\n\n /** Flip the svg horizontally. */\n @property({ type: Boolean, reflect: true, attribute: 'flip' })\n flip = false;\n\n /** The color of the svg to draw. */\n @property({\n type: String,\n reflect: true,\n attribute: 'color',\n converter: value => {\n return isInType(value, Object.values(svgColors), 'SVGColor')\n ? value\n : 'dark_pink';\n },\n })\n color: SVGColor;\n\n /** The variant of the svg to draw. */\n @property({ type: String, reflect: true, attribute: 'variant' })\n variant = '';\n\n /**\n * An external URL of an SVG file.\n *\n * WARNING: Be sure you trust the content you are including as it will be executed as code and can result in XSS attacks.\n */\n @property({ type: String, attribute: 'src' })\n src?: string;\n\n /**\n * If this is excluded, it suggests that the svg serves a purely decorative purpose.\n * If the intention is for the svg to provide information, ensure that the label\n * attribute is included to be accessible by assistive devices.\n */\n @property({ attribute: 'label' })\n label: string | boolean = false;\n\n /**\n * Where is the SVG element located vertically in the component.\n */\n @property({ type: String, attribute: 'vertical-position' })\n verticalPosition: VerticalPosition = 'bottom';\n\n /**\n * Where is the SVG element located horizontally in the component.\n */\n @property({ type: String, attribute: 'horizontal-position' })\n horizontalPosition: HorizontalPosition = 'left';\n\n /** The library of a registered custom svg library. */\n @property({ type: String, attribute: 'library' })\n library = 'woven';\n\n connectedCallback() {\n super.connectedCallback();\n watchSVG(this);\n }\n\n firstUpdated() {\n this.setSVG();\n }\n\n updated() {\n this.setSVG();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n unwatchSVG(this);\n }\n\n private getUrl() {\n const library = getSVGLibrary(this.library);\n if (this.name && library) {\n const file = this.variant ? `${this.name}_${this.variant}` : this.name;\n return library.resolver(file);\n }\n\n return this.src;\n }\n\n /** @internal Fetches the svg and redraws it. Used to handle library registrations. */\n redraw() {\n this.setSVG();\n }\n\n @watch('name')\n @watch('src')\n @watch('library')\n async setSVG() {\n const library = getSVGLibrary(this.library);\n const url = this.getUrl();\n if (url) {\n try {\n const file = await requestSVG(url);\n if (url !== this.getUrl()) {\n // If the url has changed while fetching the svg, ignore this request\n return;\n } else if (file.ok) {\n const doc = parser.parseFromString(file.svg, 'text/html');\n const svgEl = doc.body.querySelector('svg');\n\n if (svgEl !== null) {\n library?.mutator?.(svgEl);\n\n this.svg = svgEl.outerHTML;\n emit(this, 'outline-load');\n } else {\n this.svg = '';\n emit(this, 'outline-error', { detail: { status: file.status } });\n }\n } else {\n this.svg = '';\n emit(this, 'outline-error', { detail: { status: file.status } });\n }\n } catch {\n emit(this, 'outline-error', { detail: { status: -1 } });\n }\n } else if (this.svg.length > 0) {\n // If we can't resolve a URL and an svg was previously set, remove it\n this.svg = '';\n }\n }\n\n render() {\n const hasLabel = typeof this.label === 'string' && this.label.length > 0;\n\n const wrapperClasses = {\n svg: true,\n [`${this.verticalPosition}`]: this.verticalPosition,\n [`${this.horizontalPosition}`]: this.horizontalPosition,\n [`${this.variant}`]: this.variant,\n [`mobile`]: this.isMobile,\n ['fixed-size']: this.fixedSize,\n ['flip']: this.flip,\n ['full']: this.full,\n [`svg-library--${this.library}`]: this.library,\n [`svg-color--${this.color}`]: true,\n };\n\n return html` \n ${unsafeSVG(this.svg)}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-woven-svgs': CHOPWovenSVGs;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n width:100%;\n}\n\n.full{\n --container-max-content-width:100%;\n}\n\n.wide{\n --container-max-content-width:1312px;\n}\n\n.medium{\n --container-max-content-width:1088px;\n}\n\n.narrow{\n --container-max-content-width:864px;\n}\n\n@media (min-width: 860px){\n\n.seventy{\n --container-max-content-width:70%\n}\n }\n\n.transparent{\n --container-bg-color:transparent;\n --container-text-color:var(--color-brown-900);\n}\n\n.white{\n --container-bg-color:var(--color-white-100);\n --container-text-color:var(--color-brown-900);\n}\n\n.light_beige{\n --container-bg-color:var(--color-brown-100);\n --container-text-color:var(--color-brown-900);\n}\n\n.beige{\n --container-bg-color:var(--color-brown-200);\n --container-text-color:var(--color-brown-900);\n}\n\n.light_blue{\n --container-bg-color:var(--color-blue-100);\n --container-text-color:var(--color-brown-900);\n}\n\n.bright_blue{\n --container-bg-color:var(--color-blue-600);\n --container-text-color:var(--color-neutral-100);\n}\n\n.dark_blue{\n --container-bg-color:var(--color-blue-900);\n --container-text-color:var(--color-neutral-100);\n}\n\n.blue_800{\n --container-bg-color:var(--color-blue-800);\n --container-text-color:var(--color-neutral-100);\n}\n\n.light_green{\n --container-bg-color:var(--color-green-100);\n --container-text-color:var(--color-brown-900);\n}\n\n.bright_green{\n --container-bg-color:var(--color-green-400);\n --container-text-color:var(--color-neutral-100);\n}\n\n.dark_green{\n --container-bg-color:var(--color-green-900);\n --container-text-color:var(--color-neutral-100);\n}\n\n.light_pink{\n --container-bg-color:var(--color-pink-100);\n --container-text-color:var(--color-brown-900);\n}\n\n.dark_pink{\n --container-bg-color:var(--color-pink-900);\n --container-text-color:var(--color-neutral-100);\n}\n\n.container{\n position:relative;\n width:100%;\n max-width:calc(var(--container-max-content-width));\n margin:0 auto;\n background-color:var(--container-bg-color);\n color:var(--container-text-color);\n}\n\n.container.left{\n margin:0;\n }\n\n.container.right{\n margin-left:auto;\n margin-right:0;\n }\n\n:host([h-full]){\n height:100%;\n}\n\n:host([h-full]) .container{\n height:100%;\n }\n`;","import { CSSResultGroup, TemplateResult, html } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport componentStyles from './chop-container.css.lit';\nimport { isInType } from '../../../utilities/isInType';\n\nexport enum containerWidths {\n 'Narrow' = 'narrow',\n 'Medium' = 'medium',\n 'Wide' = 'wide',\n 'Full' = 'full',\n 'Seventy' = '70',\n}\nexport type ContainerWidth = `${containerWidths}`;\n\nexport enum themeColors {\n 'Transparent' = 'transparent',\n 'White' = 'white',\n 'Beige' = 'beige',\n 'Light Beige' = 'light_beige',\n 'Light Blue' = 'light_blue',\n 'Bright Blue' = 'bright_blue',\n 'Dark Blue' = 'dark_blue',\n 'Blue 800' = 'blue_800',\n 'Light Green' = 'light_green',\n 'Bright Green' = 'bright_green',\n 'Dark Green' = 'dark_green',\n 'Light Pink' = 'light_pink',\n 'Dark Pink' = 'dark_pink',\n}\nexport type ThemeColor = `${themeColors}`;\n\nexport enum alignments {\n 'Left' = 'left',\n 'Center' = 'center',\n 'Right' = 'right',\n}\nexport type ContainerAlignment = `${alignments}`;\n\n/**\n * The CHOP Container component\n * @slot - The default, and only slot for this element.\n * @attr container-width\n * @attr background-color\n */\n@customElement('chop-container')\nexport class CHOPContainer extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n // Container Properties.\n @property({\n type: String,\n reflect: true,\n attribute: 'container-width',\n })\n containerWidth: ContainerWidth = 'full';\n\n @property({\n type: String,\n reflect: true,\n attribute: 'container-align',\n })\n containerAlign: ContainerAlignment = 'center';\n\n @property({\n type: String,\n reflect: true,\n attribute: 'background-color',\n converter: value => {\n return isInType(value, Object.values(themeColors), 'ThemeColor')\n ? value\n : 'transparent';\n },\n })\n backgroundColor: ThemeColor = 'transparent';\n\n @property({ type: Boolean, reflect: true, attribute: 'h-full' })\n hFull = false;\n\n render(): TemplateResult {\n const containerWidth = this.containerWidth;\n const containerAlign = this.containerAlign;\n const classes = {\n container: true,\n [containerWidth]: true,\n [containerAlign]: true,\n [this.backgroundColor]: this.backgroundColor,\n };\n return html`\n
\n \n
\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-container': CHOPContainer;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n.breadcrumb-wrapper{\n display:flex;\n align-items:center;\n flex-direction:row;\n flex-wrap:wrap;\n list-style:none;\n margin-left:var(--spacing-06);\n z-index:10;\n position:relative;\n font-size:var(--fs-sm);\n}\n\n .breadcrumb-wrapper.detached.ways-to-give-hero a,\n .breadcrumb-wrapper.detached.ways-to-give-hero chop-icon,\n .breadcrumb-wrapper.detached.dark_pink a,\n .breadcrumb-wrapper.detached.dark_pink chop-icon,\n .breadcrumb-wrapper.detached.bright_blue a,\n .breadcrumb-wrapper.detached.bright_blue chop-icon,\n .breadcrumb-wrapper.detached.dark_blue a,\n .breadcrumb-wrapper.detached.dark_blue chop-icon{\n color:var(--color-neutral-100);\n }\n\n .breadcrumb-wrapper.detached.light_blue{\n color:var(--color-brown-900);\n }\n\n .breadcrumb-wrapper.breadcrumb-pacman,\n .breadcrumb-wrapper.form-container{\n margin-left:initial;\n }\n\n.backlink-wrapper{\n display:flex;\n align-items:center;\n gap:var(--spacing-02);\n}\n\n.backlink-wrapper li{\n list-style:none;\n display:flex;\n flex-direction:row;\n align-items:center;\n position:relative;\n\n padding:var(--spacing-02) 0;\n }\n\n.backlink-wrapper li a{\n text-decoration:none;\n display:inline-flex;\n align-items:center;\n\n color:var(--color-blue-600);\n font-family:var(--ff-display);\n font-size:var(--fs-sm);\n line-height:170%;\n\n padding:var(--spacing-02) var(--spacing-02) var(--spacing-02) 0;\n }\n\n.backlink-wrapper li a:hover{\n text-decoration:underline;\n }\n\n.backlink-wrapper li a:focus,\n .backlink-wrapper li a:focus-visible{\n outline:solid 3px blue;\n border-radius:var(--border-radius-button-default);\n outline-offset:var(--spacing-px);\n }\n\n@media (min-width: 1100px){\n\n.backlink-wrapper li a:focus,\n .backlink-wrapper li a:focus-visible{\n outline:solid 3px blue\n }\n }\n\n.backlink-wrapper:hover{\n text-decoration:underline;\n }\n\n[name='arrow-left']{\n padding-top:var(--spacing-01);\n color:var(--color-blue-600);\n}\n\nchop-icon{\n color:#544334;\n color:var(--color-brown-900, #544334);\n}\n\n.breadcrumb-wrapper .mobile{\n display:flex;\n flex-direction:row;\n align-items:center;\n gap:10px;\n}\n\n.breadcrumb-wrapper .mobile a{\n text-decoration:none;\n display:inline-flex;\n align-items:center;\n\n color:#0c7bbb;\n\n color:var(--color-blue-600, #0c7bbb);\n font-family:var(--ff-display);\n font-size:var(--fs-sm);\n line-height:150%;\n\n padding:var(--spacing-02) var(--spacing-02) var(--spacing-02) 0;\n }\n\n.breadcrumb-wrapper .mobile a:hover{\n text-decoration:underline;\n }\n\n.breadcrumb-wrapper .mobile a:focus,\n .breadcrumb-wrapper .mobile a:focus-visible{\n outline:solid 3px var(--color-blue-600);\n border-radius:var(--border-radius-button-default);\n outline-offset:var(--spacing-px);\n }\n\n@media (min-width: 1100px){\n\n.breadcrumb-wrapper .mobile a:focus,\n .breadcrumb-wrapper .mobile a:focus-visible{\n outline:solid 3px var(--color-blue-600)\n }\n }\n\n.breadcrumb-wrapper .mobile a chop-icon{\n color:#544334;\n color:var(--color-blue-600, #544334);\n }\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`;","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport componentStyles from './chop-text-hero.css.lit';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport '../chop-heading/chop-heading';\nimport '../chop-container/chop-container';\nimport '../chop-woven-svgs/chop-woven-svgs';\nimport '../chop-icon/chop-icon';\n\n/**\n * The chop text hero\n * @property backgroundColor - The background color for the card\n * @property ctaLink - The link for the cta link\n * @property buttonLabel\n *\n * @slot heading - NOTE: Styles are in the heading component\n * @slot breadcrumb\n * @slot description\n * @slot cta-link\n * @prop {Boolean} marginBottom - Indicates if margin bottom is applied. Defaults to false.\n *\n */\n\nexport enum textHeroBackgroundColors {\n 'Dark Blue' = 'dark_blue',\n 'Light Blue' = 'light_blue',\n 'Light Green' = 'light_green',\n 'Beige' = 'light_beige',\n 'Dark Pink' = 'dark_pink',\n}\n\nexport type TextHeroBackgroundColor = `${textHeroBackgroundColors}`;\n\n// maps the component BG color desired colors in wovenSVG\nenum wovenSVGColorMap {\n 'dark_pink' = 'dark_pink',\n 'dark_blue' = 'darker_blue',\n 'light_blue' = 'light_blue-reverse',\n 'light_green' = 'lighter_green-reverse',\n 'light_beige' = 'lighter_beige',\n}\n\nenum transparentWovenSVGColorMap {\n 'dark_pink' = 'light_pink-reverse',\n 'dark_blue' = 'darker_blue-reverse',\n 'light_blue' = 'light_blue-reverse',\n 'light_green' = 'lighter_green-reverse',\n 'light_beige' = 'lightest_beige',\n}\n\n@customElement('chop-text-hero')\nexport class CHOPTextHero extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n resizeController = new ResizeController(this);\n isMobile = this.resizeController.currentBreakpointRange <= 2;\n isHeroWithSpecialties = false;\n\n @property({ type: String, reflect: true, attribute: 'background-color' })\n backgroundColor: TextHeroBackgroundColor;\n\n @property({ type: String, attribute: 'label' })\n buttonLabel: string;\n\n @property({ type: Boolean, attribute: 'transparent-background' })\n transparentBackground: false;\n\n @property({ type: Boolean, reflect: true, attribute: 'margin-bottom' })\n marginBottom = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'overlapped' })\n overlapped = false;\n\n render(): TemplateResult {\n this.isMobile = this.resizeController.currentBreakpointRange <= 2;\n this.isHeroWithSpecialties = this.hasSpeciality(\n 'contact-body-1',\n 'contact-phone-1'\n );\n\n const classes = {\n 'card-wrapper': true,\n [`background-color-${this.backgroundColor}`]: true,\n 'mobile': this.isMobile,\n 'transparent': this.transparentBackground,\n 'solid': !this.transparentBackground,\n 'hero-with-specialty': this.isHeroWithSpecialties,\n 'margin-bottom': this.marginBottom,\n 'overlapped': this.overlapped,\n };\n\n return html`\n ${this.wovenSVGTemplate()}\n \n ${this.slotTemplate('breadcrumb')}\n \n
\n
\n
\n
\n ${this.slotTemplate('cta-heading')}\n \n
\n ${this.slotTemplate('description')} ${this.slotTemplate('cta-text')}\n
\n ${this.contactWrapperTemplate()}\n
\n
\n `;\n }\n\n wovenSVGTemplate() {\n const svgName = this.isMobile ? `mobile_top_right` : `desktop_top_right`;\n const color = this.transparentBackground\n ? transparentWovenSVGColorMap[this.backgroundColor]\n : wovenSVGColorMap[this.backgroundColor];\n return html`\n \n `;\n }\n\n hasSpeciality(bodySlot: string, phoneSlot: string) {\n if (this.slots.exist(bodySlot) && this.slots.exist(phoneSlot)) {\n return true;\n } else {\n return false;\n }\n }\n\n slotTemplate(name = '') {\n if (!this.slots.exist(name)) {\n return nothing;\n } else {\n return html`
\n \n
`;\n }\n }\n\n contactWrapperTemplate() {\n if (\n (this.slots.exist('contact-body-1') &&\n this.slots.exist('contact-phone-1')) ||\n (this.slots.exist('contact-body-2') &&\n this.slots.exist('contact-phone-2')) ||\n this.slots.exist('cta-link-1') ||\n this.slots.exist('cta-link-2')\n ) {\n return html`\n
\n ${this.contactTemplate('contact-body-1', 'contact-phone-1')}\n ${this.contactTemplate('contact-body-2', 'contact-phone-2')}\n ${this.slotTemplate('cta-link-1')} ${this.slotTemplate('cta-link-2')}\n
\n `;\n } else {\n return nothing;\n }\n }\n\n contactTemplate(bodySlot: string, phoneSlot: string) {\n if (this.slots.exist(bodySlot) && this.slots.exist(phoneSlot)) {\n return html`\n
\n
\n \n
\n
\n
\n \n
\n
\n \n
\n
\n
\n \n `;\n } else {\n return nothing;\n }\n }\n\n attachBreadcrumb(element: Node, slotName: string) {\n this.appendChild(element as HTMLElement);\n if ((element as HTMLElement).setAttribute) {\n (element as HTMLElement).setAttribute('slot', slotName);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-text-hero': CHOPTextHero;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n.card-wrapper{\n padding:var(--spacing-04) var(--spacing-04) 0;\n display:flex;\n justify-content:center;\n}\n\n@media (min-width: 860px){\n .card-wrapper.margin-bottom{\n margin-bottom:3rem;\n }\n}\n\n@media (min-width: 1024px){\n .card-wrapper{\n padding:0 var(--spacing-04);\n }\n\n .card-wrapper.margin-bottom{\n margin-bottom:4rem;\n }\n}\n\n.transparent{\n background-color:var(--color-neutral-100);\n}\n\n.card-wrapper.background-color-dark_pink.solid .content-wrap.card-wrapper{\n padding:var(--spacing-08) var(--spacing-04) var(--spacing-06);\n display:flex;\n justify-content:center;\n}\n\n@media (min-width: 1024px){\n\n.card-wrapper.background-color-dark_pink.solid .content-wrap.card-wrapper{\n padding:0 var(--spacing-04)\n}\n }\n\n.transparent{\n background-color:var(--color-neutral-100);\n}\n\n.content-wrapper{\n display:flex;\n flex-direction:column;\n row-gap:var(--spacing-12);\n z-index:10;\n position:relative;\n padding:var(--spacing-12) 0 var(--spacing-11) 0;\n color:var(--color-brown-900);\n width:100%;\n max-width:var(--max-w-medium);\n}\n\n@media (min-width: 1024px){\n\n.content-wrapper{\n padding:var(--spacing-24) 0 var(--spacing-16) 0\n}\n }\n\n@media (min-width: 860px){\n .content-wrapper{\n width:var(--w-percent-medium);\n }\n}\n\n.overlapped{\n padding-bottom:var(--spacing-24);\n}\n\n.contact-wrapper{\n color:var(--color-brown-900);\n}\n\n.info-wrapper{\n display:flex;\n flex-direction:column;\n row-gap:var(--spacing-04);\n}\n\n@media (min-width: 768px){\n\n.info-wrapper{\n row-gap:var(--spacing-12)\n}\n }\n\n.info-wrapper chop-heading{\n margin-bottom:var(--spacing-10);\n }\n\n@media (min-width: 1024px){\n .info-wrapper{\n width:var(--w-percent-medium);\n }\n}\n\n.card-wrapper.background-color-dark_pink.solid .info-wrapper,\n .card-wrapper.background-color-dark_pink.solid .contact-wrapper,\n .card-wrapper.background-color-dark_blue.solid .info-wrapper,\n .card-wrapper.background-color-dark_blue.solid .contact-wrapper{\n color:var(--color-neutral-100);\n }\n\n.card-wrapper.background-color-dark_pink.transparent .info-wrapper,\n .card-wrapper.background-color-dark_pink.transparent .contact-wrapper,\n .card-wrapper.background-color-dark_blue.transparent .info-wrapper,\n .card-wrapper.background-color-dark_blue.transparent .contact-wrapper{\n color:var(--color-brown-900);\n }\n\n.background-color-beige{\n background-color:var(--color-brown-100);\n}\n\n.background-color-beige.transparent{\n background-color:var(--color-neutral-100);\n }\n\n.hero-with-specialty .content-wrapper{\n flex-direction:column;\n gap:var(--spacing-08);\n}\n\n@media (min-width: 1024px){\n\n.hero-with-specialty .content-wrapper{\n flex-direction:row;\n gap:var(--spacing-04)\n}\n }\n\n.hero-with-specialty .content-wrapper .info-wrapper{\n display:flex;\n flex-direction:column;\n }\n\n@media (min-width: 1024px){\n\n.hero-with-specialty .content-wrapper .info-wrapper{\n justify-content:space-between;\n width:70%\n }\n }\n\n.hero-with-specialty .content-wrapper .contact-wrapper{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-08);\n }\n\n@media (min-width: 1024px){\n\n.hero-with-specialty .content-wrapper .contact-wrapper{\n width:30%;\n gap:var(--spacing-06)\n }\n }\n\n.hero-with-specialty .content-wrapper .contact-wrapper .contact-content{\n display:flex;\n align-items:center;\n gap:var(--spacing-04);\n }\n\n.hero-with-specialty .content-wrapper .contact-wrapper .icon-wrapper{\n color:var(--color-green-500);\n }\n\n.hero-with-specialty .content-wrapper .contact-wrapper .contact-body{\n font-family:var(--ff-serif);\n font-size:var(--fs-lg);\n line-height:var(--lh-xl);\n }\n\n.hero-with-specialty .content-wrapper .contact-wrapper .contact-phone{\n font-family:var(--ff-display);\n font-size:var(--fs-xl);\n }\n\nper,\n.card-wrapper.background-color-dark_blue.solid .content-wrapper{\n color:var(--color-neutral-100);\n}\n\n.card-wrapper.background-color-dark_pink.transparent .content-wrapper,\n.card-wrapper.background-color-dark_blue.transparent .content-wrapper{\n color:var(--color-brown-900);\n}\n\n.background-color-beige{\n background-color:var(--color-brown-100);\n}\n\n.background-color-beige.transparent{\n background-color:var(--color-neutral-100);\n }\n\n@media print{\n .content-wrapper{\n padding-top:0;\n }\n}\n`;","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n.basic-hero{\n position:relative;\n}\n\n.breadcrumb{\n padding:24px 0 32px;\n}\n\n.content-wrapper{\n margin:0 auto;\n max-width:var(--max-w-medium);\n padding-bottom:var(--spacing-18);\n}\n\n.content{\n margin-top:var(--spacing-16);\n z-index:1;\n position:relative;\n}\n\n@media (min-width: 860px){\n .content-wrapper{\n padding-bottom:var(--spacing-16);\n width:var(--w-percent-medium);\n }\n}\n\n@media print{\n chop-column:has(.breadcrumb){\n display:none;\n }\n .content{\n margin-top:0;\n }\n}\n`;","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport { screenSizeMap } from '../../controllers/screen-size-controller';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { isInType } from '../../../utilities/isInType';\nimport componentStyles from './chop-basic-hero.css.lit';\nimport '../chop-woven-svgs/chop-woven-svgs';\nimport '../chop-container/chop-container';\nimport { SVGColor } from '../chop-woven-svgs/chop-woven-svgs';\n\n/**\n * @extends OutlineElement\n * @element chop-basic-hero\n *\n * @slot breadcrumb\n * @slot contentx\n *\n * @attribute {string} background-color\n * @attribute {string} background-svg\n */\n\nexport enum svgBackgroundOptions {\n 'health-professional-hero' = 'health-professional-hero',\n 'research-studies-hero' = 'research-studies-hero',\n}\n\nexport enum backgroundOptions {\n 'Light Beige' = 'light_beige',\n 'Transparent' = 'transparent',\n}\n\ntype BackgroundOptions = `${backgroundOptions}`;\ntype SvgBackgroundOptions = `${svgBackgroundOptions}`;\n\n@customElement('chop-basic-hero')\nexport class CHOPBasicHero extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n slots = new SlotManager(this);\n resizeController = new ResizeController(this, {\n breakpoints: [screenSizeMap.get('md') as number],\n containerQuery: false,\n });\n\n isMobile: boolean;\n\n svgBackgrounds = {\n 'health-professional-hero': {\n mobile: 'mobile_bottom_hero_basic_v1',\n desktop: 'desktop_right_hero_basic_v1',\n color: 'lighter_beige',\n },\n 'research-studies-hero': {\n mobile: 'mobile_bottom_hero_basic_v2',\n desktop: 'desktop_bottom_hero_basic_v2',\n color: 'lightest_beige',\n },\n };\n\n @property({\n type: String,\n attribute: 'background-color',\n converter: value => {\n return isInType(\n value,\n Object.values(backgroundOptions),\n 'BackgroundOptions'\n )\n ? value\n : 'light_beige';\n },\n })\n backgroundColor: BackgroundOptions = 'light_beige';\n\n @property({\n type: String,\n attribute: 'svg-background',\n converter: value => {\n return isInType(\n value,\n Object.values(svgBackgroundOptions),\n 'SvgBackgroundOptions'\n )\n ? value\n : 'health-professional-hero';\n },\n })\n svgBackground: SvgBackgroundOptions = 'health-professional-hero';\n\n render(): TemplateResult {\n this.isMobile = this.resizeController.currentBreakpointRange === 0;\n\n return html`
\n \n ${this.backgroundSVGTemplate()}\n \n ${this.slotTemplate('breadcrumb')}\n \n
\n
\n \n
\n
\n \n
`;\n }\n\n slotTemplate(name = '') {\n if (!this.slots.exist(name)) {\n return nothing;\n } else {\n return html`
\n \n
`;\n }\n }\n\n backgroundSVGTemplate() {\n const color = this.svgBackgrounds[this.svgBackground].color as SVGColor;\n if (this.isMobile) {\n return html`\n \n `;\n } else {\n return html`\n \n `;\n }\n }\n\n attachBreadcrumb(element: Node, slotName: string) {\n this.appendChild(element as HTMLElement);\n if ((element as HTMLElement).setAttribute) {\n (element as HTMLElement).setAttribute('slot', slotName);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-basic-hero': CHOPBasicHero;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n.location-hero-wrapper{\n position:relative;\n overflow:hidden;\n background-color:var(--color-brown-100);\n}\n\n.content-wrapper{\n position:relative;\n z-index:2;\n padding:70px 16px 50px;\n background-color:var(--color-brown-100);\n}\n\n.woven-svg-wrapper{\n z-index:2;\n}\n\n.contact-items div, .contact-emergency div{\n display:flex;\n align-items:center;\n font-family:var(--ff-body);\n font-size:var(--fs-xl);\n color:var(--color-brown-900);\n }\n\n.contact-items{\n margin-top:var(--spacing-4);\n display:flex;\n flex-direction:column;\n gap:var(--spacing-4);\n}\n\n.contact-emergency{\n border-top:1px solid var(--color-brown-700);\n margin-top:var(--spacing-4);\n padding-top:var(--spacing-4);\n}\n\n.contact-emergency div{\n font-family:var(--ff-serif);\n }\n\n.heading,\n.contact-items,\n.contact-emergency,\n.appointment,\n.button,\n.cta{\n position:relative;\n z-index:2;\n}\n\n.button,\n.cta{\n margin-top:var(--spacing-6);\n}\n\n.video-wrapper{\n z-index:1;\n}\n\n.video-wrapper .video{\n height:100%;\n }\n\n::slotted([slot='video']){\n height:100%;\n}\n\n.image-wrapper{\n max-height:260px;\n}\n\n.image-wrapper img{\n width:100%;\n height:100%;\n object-fit:cover;\n }\n\n.image,\n[cloned-slot-name='image']{\n height:100%;\n}\n\n.image div:not(.contextual), [cloned-slot-name='image'] div:not(.contextual){\n height:100%;\n width:100%;\n }\n\n.contextual{\n display:none;\n}\n\nchop-icon{\n margin-right:16px;\n}\n\n.content-wrapper.mobile .woven-svg-wrapper{\n position:absolute;\n bottom:calc(100% - 1px);\n left:0;\n height:100%;\n max-height:85px;\n width:100%;\n }\n\n@media (min-width: 668px){\n .image-wrapper{\n max-height:330px;\n }\n}\n\n@media (min-width: 860px){\n .image-wrapper{\n max-height:350px;\n }\n}\n\n@media (min-width: 1100px){\n .location-hero-wrapper{\n z-index:0;\n background-color:var(--color-brown-400);\n }\n .content-wrapper{\n padding:70px 0 100px 70px;\n background:none;\n max-width:440px;\n }\n .image-wrapper,\n .video-wrapper{\n height:100%;\n max-height:none;\n overflow:hidden;\n position:absolute;\n top:0;\n left:300px;\n width:calc(100% - 300px);\n z-index:-1;\n }\n}\n\n@media (min-width: 1400px){\n .content-wrapper{\n padding:170px 0 150px 100px;\n max-width:350px;\n }\n .image-wrapper,\n .video-wrapper{\n left:420px;\n width:calc(100% - 420px);\n }\n}\n`;","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n --outline-core-link--color--computed:var(--outline-core-link--color, var(--outline-blue-600));\n --outline-core-link--text-decoration--computed:var(--outline-core-link--text-decoration, none);\n --outline-core-link--color-hover--computed:var(--outline-core-link--color-hover, var(--outline-gray-600));\n --outline-core-link--text-decoration-hover--computed:var(--outline-core-link--text-decoration-hover, underline);\n --outline-core-link--color-focus--computed:var(--outline-core-link--color-focus, var(--outline-gray-600));\n --outline-core-link--text-decoration-focus--computed:var(--outline-core-link--text-decoration-focus, underline);\n --outline-core-link--transition-property--computed:var(--outline-core-link--transition-property, color, background-color, border-color, text-decoration-color, fill, stroke);\n --outline-core-link--transition-duration--computed:var(--outline-core-link--transition-duration, 150ms);\n --outline-core-link--transition-timing-function--computed:var(--outline-core-link--transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\na,\n::slotted(a){\n font-family:var(--ff-body) !important;\n text-decoration:var(\n --outline-core-link--text-decoration--computed\n ) !important;\n color:var(--outline-core-link--color--computed) !important;\n transition-property:var(\n --outline-core-link--transition-property--computed\n ) !important;\n transition-timing-function:var(\n --outline-core-link--transition-timing-function--computed\n ) !important;\n transition-duration:var(\n --outline-core-link--transition-duration--computed\n ) !important;\n}\n\na:hover,\n::slotted(a:hover){\n text-decoration:var(\n --outline-core-link--text-decoration-hover--computed\n ) !important;\n color:var(--outline-core-link--color-hover--computed) !important;\n}\n\na:focus,\n::slotted(a:focus){\n text-decoration:var(\n --outline-core-link--text-decoration-focus--computed\n ) !important;\n color:var(--outline-core-link--color-focus--computed) !important;\n}\n`;","import { html, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n// Our base component, which all others extend.\nimport { OutlineElement } from '@phase2/outline-core';\n\nimport type { LinkTargetType, LinkRelType } from './config';\nimport componentStyles from './chop-core-link.css.lit';\n\n/** The element name, reused throughout the codebase */\nconst componentName = 'chop-core-link';\n\n/**\n *\n * The Chop Core Link component\n *\n * This is a fork of 0.0.7 of the Outline Core Link component, customized here for the CHOP project.\n * NOTE: this component is not, and should not be, used anywhere. It exists purely for extension by other components.\n *\n * @element chop-core-link\n * @extends OutlineElement\n * @slot - The default slot for this element.\n * @cssprop --outline-core-link-transition-property: The CSS transition property to use for the link.\n * @cssprop --outline-core-link-transition-duration: The CSS transition duration to use for the link.\n * @cssprop --outline-core-link-transition-timing-function: The CSS transition timing function to use for the link.\n * @cssprop --outline-core-link-color-default: The default link color.\n * @cssprop --outline-core-link-color-default-decoration: Text decoration for the default link.\n * @cssprop --outline-core-link-color-hover: The link color when hovering on the link.\n * @cssprop --outline-core-link-color-hover-decoration: Text decoration for the link when hovering.\n * @cssprop --outline-core-link-color-focus: The link color when focusing on the link.\n * @todo - Add support for outline/ring on the focus state of the link.\n */\n@customElement(componentName)\nexport class ChopCoreLink extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n /**\n * Link url\n */\n @property({ type: String, attribute: 'link-href' })\n linkHref: string;\n\n /**\n * Link text\n */\n @property({ type: String, attribute: 'link-text' })\n linkText: string;\n\n /**\n * Link target\n */\n @property({ type: String, attribute: 'link-target' })\n linkTarget: LinkTargetType;\n\n /**\n * Link rel\n */\n @property({ type: String, attribute: 'link-rel' })\n linkRel: LinkRelType;\n\n /**\n * Check to see if the link is external, pass target=\"_blank\" and rel=\"external\" if so. Returns true if the link is external.\n */\n isURLExternal(url: string): boolean {\n return (\n new URL(url, window.location.href).hostname !== window.location.hostname\n );\n }\n\n /**\n * You can override Rel manually, but if not, we'll set it to \"noreferrer noopener\" if the link is external.\n * Tabnabbing vulnerability 🤯\n * TLDR: when a link has the attribute target=\"_blank\", always add ref=\"noreferrer noopener\"\n * https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#tabnabbing\n */\n linkRelRender(): string | undefined {\n if (this.linkRel) {\n return this.linkRel;\n }\n return this.isURLExternal(this.linkHref)\n ? 'noreferrer noopener'\n : undefined;\n }\n\n /**\n * You can override target manually, but if not, we'll set it to \"_blank\" if the link is external.\n */\n linkTargetRender(): LinkTargetType | undefined {\n if (this.linkTarget) {\n return this.linkTarget;\n }\n return this.isURLExternal(this.linkHref) ? '_blank' : undefined;\n }\n\n generateLink(): TemplateResult {\n return html` \n ${this.linkText ? html`${this.linkText}` : html``}\n
`;\n }\n\n /**\n * Get all elements in the default slot.\n * @todo - Move method to a controller.\n *\n * @returns NodeList of all elements in the default slot.\n */\n getSlottedContent(): NodeList {\n return this.querySelectorAll('*');\n }\n\n /**\n * Check to see if the element is slotted properly.\n * This method checks for an `a` tag anywhere in the content provided to the Light DOM of a component.\n * @todo - Move method to a controller.\n *\n * @returns boolean\n */\n hasSlottedLink(): boolean {\n const slot: NodeList = this.getSlottedContent();\n for (let i = 0; i < slot.length; i++) {\n if (slot[i].nodeName === 'A') {\n return true;\n }\n }\n return false;\n }\n\n /**\n * If the element is not slotted properly, log an error to the console.\n * @todo - Enable a global debug mode in outline.config.js that will determine if the console.group is logged in this and other component level debugging code.\n * @todo - Implement a controller to handle debugging Outline components.\n *\n * @returns void\n */\n debugSlottedContent(): void {\n // eslint-disable-next-line no-console\n console.group(componentName);\n // eslint-disable-next-line no-console\n console.error(\n `${componentName} must have a single tag as a child of the default slot.`\n );\n // eslint-disable-next-line no-console\n console.log(this.getSlottedContent());\n // eslint-disable-next-line no-console\n console.groupEnd();\n }\n\n /**\n * Adjust attributes on a slotted link.\n *\n * When the link is slotted, we'll test, modify & render the slotted link,\n * and adjust the target and rel attributes if they are set on the chop-core-link element.\n */\n adjustSlottedContent(): void {\n const slottedLink = this.querySelector('a') as HTMLAnchorElement | null;\n if (this.linkTarget) {\n slottedLink?.setAttribute('target', this.linkTarget);\n }\n if (this.linkRel) {\n slottedLink?.setAttribute('rel', this.linkRel);\n }\n }\n\n /**\n * If the element is fully slotted, return the full markup in the default slot.\n *\n * @todo - Enable a global debug mode in outline.config.js that will determine if the console.group is logged.\n * @returns HTMLSlotElement\n */\n fullMarkupInSlot(): TemplateResult {\n if (this.hasSlottedLink()) {\n this.adjustSlottedContent();\n } else {\n this.debugSlottedContent();\n }\n return html` `;\n }\n\n render(): TemplateResult {\n if (this.linkHref) {\n return this.generateLink();\n } else {\n return this.fullMarkupInSlot();\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [componentName]: ChopCoreLink;\n }\n}\n","import { ChopCoreLink } from '../chop-core-link/chop-core-link';\n// @todo: Document the ability to use \"component mode\" as it is disabled here.\n// import componentVariables from './chop-link.vars.css.lit';\n// import componentStyles from './chop-link.css.lit';\nimport { customElement } from 'lit/decorators.js';\n/**\n * The chop Link component.\n *\n * This component used to extend the `outline-core-link` component,\n * however was altered to extend the chop-core-link component which is\n * a fork thereof.\n *\n * @class CHOPLink\n * @element chop-link\n * @extends ChopCoreLink\n * @see {@link https://www.npmjs.com/package/@phase2/outline-core-link|@phase2/outline-core-link on npmjs}\n * @slot - The default slot for this element.\n * @cssprop --outline-core-link--text-decoration: The text decoration style for the link.\n * @cssprop --outline-core-link--color: The color of the link.\n * @cssprop --outline-core-link--transition-property: The CSS transition property to use for the link.\n * @cssprop --outline-core-link--transition-timing-function: The CSS transition timing function to use for the link.\n * @cssprop --outline-core-link--transition-duration: The CSS transition duration to use for the link.\n * @cssprop --outline-core-link--margin-x: The horizontal margin value for the link.\n * @cssprop --outline-core-link--margin-y: The vertical margin value for the link.\n * @cssprop --outline-core-link--padding-x: The horizontal padding value for the link.\n * @cssprop --outline-core-link--padding-y: The vertical padding value for the link.\n * @cssprop --outline-core-link--text-decoration-hover: The text decoration style for the link when hovering.\n * @cssprop --outline-core-link--color-hover: The color of the link when hovering.\n * @cssprop --outline-core-link--text-decoration-focus: The text decoration style for the link when focusing.\n * @cssprop --outline-core-link--color-focus: The color of the link when focusing.\n * @cssprop --outline-core-link--background-color: The background color of the link.\n * @cssprop --outline-core-link--background-color-hover: The background color of the link when hovering.\n * @cssprop --outline-core-link--background-color-focus: The background color of the link when focusing.\n */\n\n@customElement('chop-link')\nexport class CHOPLink extends ChopCoreLink {\n /**\n * The following is commented out, as well as the corresponding import statements, because\n * we are relying on the `globalStyles` import, which is a lit template string.\n *\n * This is an example of how to use the \"component mode\" of the `chop-core-link` component.\n *\n */\n //static styles = [componentVariables, componentStyles];\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-link': CHOPLink;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n.btn{\n display:flex;\n width:fit-content;\n flex-wrap:nowrap;\n align-items:center;\n cursor:pointer;\n transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration:300ms;\n text-decoration-line:none;\n outline:none;\n border:none;\n border-radius:0.5rem;\n line-height:1.5;\n background:transparent;\n\n font-family:var(--chop-cta-link--family--computed);\n font-weight:var(--chop-cta-link--weight--computed);\n padding:var(--chop-cta-link--padding-default--computed);\n}\n\n.btn[aria-disabled='true']{\n pointer-events:none;\n cursor:not-allowed;\n user-select:none;\n}\n\n.btn.small{\n font-size:var(--fs-sm);\n line-height:var(--lh-base);\n padding:var(--chop-cta-link--padding-small--computed);\n}\n\n.btn.small.no-icon{\n padding:var(--spacing-02) var(--spacing-4);\n }\n\n.btn.medium,\n.btn.default{\n font-size:var(--fs-base);\n line-height:var(--lh-md);\n}\n\n.btn.medium.no-icon, .btn.default.no-icon{\n padding:var(--spacing-02) var(--spacing-6);\n }\n\n.btn.large{\n font-size:var(--fs-lg);\n line-height:var(--lh-sm);\n padding:var(--chop-cta-link--padding-large--computed);\n}\n\n.btn.large.no-icon{\n padding:var(--spacing-03) var(--spacing-8);\n }\n\n.btn.primary{\n background-color:var(--chop-cta-link--primary-bg-color--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight--computed);\n border:2px solid var(--chop-cta-link--primary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring--computed);\n}\n\n.btn.primary:hover,\n .btn.primary:active{\n background-color:var(--chop-cta-link--primary-color--computed);\n color:var(--chop-cta-link--primary-bg-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring-hover--computed);\n }\n\n.btn.primary:focus{\n background-color:var(--chop-cta-link--primary-bg-color-focus--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\n\n.btn.primary[aria-disabled='true']{\n background-color:var(--chop-cta-link--primary-disabled-bg-color--computed);\n color:var(--chop-cta-link--primary-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-disabled-ring--computed);\n}\n\n.btn.primary.reversed{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n}\n\n.btn.primary.reversed:hover,\n .btn.primary.reversed:active{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n }\n\n.btn.primary.reversed:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\n\n.btn.primary.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\n\n.btn.outline{\n background-color:var(--chop-cta-link--outline-bg-color--computed);\n color:var(--chop-cta-link--outline-color--computed);\n font-weight:var(--chop-cta-link--outline-weight--computed);\n border:2px solid var(--chop-cta-link--outline-ring--computed);\n box-shadow:var(--chop-cta-link--outline-ring--computed);\n}\n\n.btn.outline:hover{\n background-color:var(--chop-cta-link--outline-bg-color-hover--computed);\n color:var(--chop-cta-link--outline-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-ring-hover--computed);\n }\n\n.btn.outline:focus{\n background-color:var(--chop-cta-link--outline-bg-color-focus--computed);\n color:var(--chop-cta-link--outline-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-ring-focus--computed);\n outline-offset:2px;\n }\n\n.btn.outline[aria-disabled='true']{\n background-color:var(--chop-cta-link--outline-disabled-bg-color--computed);\n color:var(--chop-cta-link--outline-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-disabled-ring--computed);\n}\n\n.btn.outline.reversed{\n background-color:var(--chop-cta-link--outline-reversed-bg-color--computed);\n color:var(--chop-cta-link--outline-reversed-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-ring--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring--computed);\n}\n\n.btn.outline.reversed:hover,\n .btn.outline.reversed:active{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-hover--computed);\n }\n\n.btn.outline.reversed:focus{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-focus--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-reversed-ring-focus--computed);\n }\n\n.btn.outline.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--outline-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--outline-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-disabled-ring--computed);\n}\n\n.btn.outline-transparent{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n}\n\n.btn.outline-transparent:hover,\n .btn.outline-transparent:active{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n }\n\n.btn.outline-transparent:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n }\n\n.btn.outline-transparent[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\n\n.btn.secondary{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n color:var(--chop-cta-link--secondary-color--computed);\n font-weight:var(--chop-cta-link--secondary-weight--computed);\n border:2px solid var(--chop-cta-link--secondary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring--computed);\n}\n\n.btn.secondary:hover{\n background-color:var(--chop-cta-link--secondary-bg-color-hover--computed);\n color:var(--chop-cta-link--secondary-color-hover--computed);\n font-weight:var(--chop-cta-link--secondary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-hover--computed);\n }\n\n.btn.secondary:focus{\n background-color:var(--chop-cta-link--secondary-bg-color-focus--computed);\n color:var(--chop-cta-link--secondary-color-focus--computed);\n font-weight:var(--chop-cta-link--secondary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--secondary-ring-focus--computed);\n outline-offset:2px;\n }\n\n.btn.secondary:active{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n }\n\n.btn.secondary[aria-disabled='true']{\n background-color:var(--chop-cta-link--secondary-disabled-bg-color--computed);\n color:var(--chop-cta-link--secondary-disabled-color--computed);\n font-weight:var(--chop-cta-link--secondary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--secondary-disabled-ring--computed);\n}\n\n.btn.link{\n position:relative;\n padding:0;\n color:var(--chop-cta-link--link-color--computed);\n font-weight:var(--fw-semibold);\n border-radius:0.5rem;\n text-decoration:none;\n background:transparent;\n}\n\n.btn.link::after{\n content:'';\n display:none;\n position:absolute;\n bottom:0;\n left:0;\n right:0;\n margin-left:auto;\n margin-right:auto;\n border:1px solid var(--chop-cta-link--link-color--computed);\n }\n\n.btn.link .chevron-icon{\n transition:0.3s ease-in-out;\n }\n\n.btn.link:hover{\n color:var(--chop-cta-link--link-color-hover--computed);\n }\n\n.btn.link:hover::after{\n display:block;\n }\n\n.btn.link:hover > .chevron-icon{\n transform:translateX(8px);\n }\n\n.btn.link:focus{\n color:var(--chop-cta-link--link-color-focus--computed);\n font-weight:var(--chop-cta-link--link-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-ring--computed);\n }\n\n.btn.link[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\n\n.btn.link.reversed{\n background-color:transparent;\n color:var(--chop-cta-link--link-reversed-color--computed);\n}\n\n.btn.link.reversed::after{\n border:1px solid var(--chop-cta-link--link-reversed-color--computed);\n }\n\n.btn.link.reversed:hover::after{\n display:block;\n }\n\n.btn.link.reversed:focus{\n color:var(--chop-cta-link--link-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--link-reversed-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-reversed-color--computed);\n }\n\n.btn.link.no-hover::after{\n display:none !important;\n }\n\n.btn.link.reversed[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\n\n.btn.full-width{\n display:flex;\n width:100%;\n justify-content:space-between;\n}\n\n.heart-icon{\n margin-right:var(--spacing-01);\n}\n\n.external-icon{\n margin-left:var(--spacing-01);\n}\n\n.chevron-icon{\n margin-left:auto;\n}\n\n@media print{\n .btn.link.reversed{\n color:currentColor;\n background:transparent;\n }\n}\n`;","import { customElement, property } from 'lit/decorators.js';\nimport { CHOPLink } from '../chop-link/chop-link';\nimport componentStyles from './chop-cta-link.css.lit';\nimport { CSSResultGroup, html } from 'lit';\n\nexport enum linkSizes {\n 'Small' = 'small',\n 'Default' = 'default',\n 'Large' = 'large',\n}\nexport type LinkSize = `${linkSizes}`;\n\nexport enum linkVariants {\n 'Primary' = 'primary',\n 'Outline' = 'outline',\n 'OutlineTransparent' = 'outline-transparent',\n 'Secondary' = 'secondary',\n 'Link' = 'link',\n}\nexport type LinkVariant = `${linkVariants}`;\n\n/**\n * The chop CTA Link component.\n * @class CHOPCtaLink\n * @element chop-cta-link\n * @extends CHOPLink\n * @property --linkHref: Link url\n * @property --linkText: Link text\n * @property --linkTarget: Link target\n * @property --linkRel: Link rel\n * @slot - The default slot for this element.\n * @cssprop --outline-core-link-transition-property: The CSS transition property to use for the link.\n * @cssprop --outline-core-link-transition-duration: The CSS transition duration to use for the link.\n * @cssprop --outline-core-link-transition-timing-function: The CSS transition timing function to use for the link.\n * @cssprop --outline-core-link-color-default: The default link color.\n * @cssprop --outline-core-link-color-default-decoration: Text decoration for the default link.\n * @cssprop --outline-core-link-color-hover: The link color when hovering on the link.\n * @cssprop --outline-core-link-color-hover-decoration: Text decoration for the link when hovering.\n * @cssprop --outline-core-link-color-focus: The link color when focusing on the link.\n * @cssprop --outline-core-link--margin-x: The margin-x value for the link.\n * @cssprop --outline-core-link--margin-y: The margin-y value for the link.\n * @cssprop --outline-core-link--padding-x: The padding-x value for the link.\n * @cssprop --outline-core-link--padding-y: The padding-y value for the link.\n */\n\n@customElement('chop-cta-link')\nexport class CHOPCtaLink extends CHOPLink {\n static styles: CSSResultGroup = [componentStyles];\n\n /**\n * Represents the size of the link. This property is reflected to the attribute 'link-size'.\n * It is a string type property and can be used to control the size of the link.\n * For example, you can set this property to 'small', 'medium', or 'large' to render a link of the corresponding size.\n *\n * @type {LinkSize}\n * @attr link-size\n */\n @property({ type: String, attribute: 'link-size', reflect: true })\n linkSize: LinkSize = 'default';\n\n /**\n * Represents the variant of the link. This property is reflected to the attribute 'link-variant'.\n * It is a string type property and can be used to control the visual style of the link.\n * For example, you can set this property to 'primary', 'secondary', or 'tertiary' to render a link of the corresponding style.\n *\n * @type {LinkVariant}\n * @attr link-variant\n */\n @property({ type: String, attribute: 'link-variant', reflect: true })\n linkVariant: LinkVariant = 'primary';\n\n /**\n * Represents whether the style of the button is reversed or not. This property is reflected to the attribute 'is-reversed'.\n * It is a boolean type property and can be used to control the visual style of the button.\n * For example, you can set this property to 'true' to render a button with reversed style.\n *\n * @type {boolean}\n * @attr is-reversed\n */\n @property({ type: Boolean, attribute: 'is-reversed' }) isReversed = false;\n\n /**\n * Represents whether to show hover effect on the button or not. This property is reflected to the attribute 'no-hover'.\n * It is a boolean type property and can be used to control the hover effect of the button.\n * For example, you can set this property to 'true' to disable the hover effect on the button.\n *\n * @type {boolean}\n * @attr no-hover\n */\n @property({ type: Boolean, attribute: 'no-hover' }) noHover = false;\n\n /**\n * Represents whether the button is disabled or not.\n * This property is reflected to the attribute 'is-disabled'.\n * It is a boolean type property and can be used to control the disabled state of the button.\n * For example, you can set this property to 'true' to disable the button.\n * Note: This property only applies to implementations not using the url property.\n *\n * @type {boolean}\n * @attr is-disabled\n */\n @property({ type: Boolean, attribute: 'is-disabled' })\n isDisabled = false;\n\n /**\n * Whether to show border on the button or not.\n */\n @property({ type: Boolean, attribute: 'no-border' }) noBorder = false;\n\n /**\n * Whether the button is full width or not.\n */\n @property({ type: Boolean, attribute: 'full-width' }) fullWidth = false;\n\n /**\n * Represents whether the button has a chevron icon or not. This property is reflected to the attribute 'chevron-icon'.\n * It is a boolean type property and can be used to control the presence of a chevron icon on the button.\n * For example, you can set this property to 'true' to render a button with a chevron icon.\n *\n * @type {boolean}\n * @attr chevron-icon\n */\n @property({ type: Boolean, attribute: 'chevron-icon' }) chevronIcon = false;\n\n /**\n * Whether the button is active or not.\n */\n @property({ type: Boolean, attribute: 'is-active' }) isActive = false;\n\n /**\n * Represents whether the button has a heart icon or not. This property is reflected to the attribute 'heart-icon'.\n * It is a boolean type property and can be used to control the presence of a heart icon on the button.\n * For example, you can set this property to 'true' to render a button with a heart icon.\n *\n * @type {boolean}\n * @attr heart-icon\n */\n @property({ type: String, attribute: 'icon-position' }) iconPosition =\n 'right';\n\n /**\n * Represents whether the button has a icon.\n */\n @property({ type: String, attribute: 'icon-name' })\n iconName = '';\n\n /**\n * Sets the icon size.\n */\n @property({ type: String, attribute: 'icon-size' })\n iconSize = '';\n\n /**\n * The `updated` method is a lifecycle method in LitElement, called after any property changes.\n * Here, we're using it to update the class of the `a` tag in the slot.\n * @param {Map} changedProperties - Contains the properties that were changed.\n */\n updated(changedProperties: Map) {\n super.updated(changedProperties);\n this.generateCTALink();\n }\n\n generateCTALink() {\n // Get the slot\n const slot = this.shadowRoot?.querySelector('slot');\n // Get the `a` tag inside the slot\n const aTag = slot\n ?.assignedNodes()\n .find(node => node.nodeName === 'A') as HTMLAnchorElement;\n if (aTag) {\n // Get existing classes\n const existingClasses = aTag.className;\n\n // Generate new classes\n const newClasses = this.generateClassString();\n\n if (existingClasses.includes(newClasses)) {\n return;\n }\n\n // Append new classes to existing ones\n aTag.className = `${existingClasses} ${newClasses}`.trim();\n\n // If icons are named add them to then innerHTML\n const iconTemplate = this.iconTemplate();\n const iconStrings = iconTemplate.strings;\n const iconValues: string = iconTemplate.values[0] as string;\n const icon = iconStrings.join(iconValues);\n const innerHtmlWithIcon =\n this.iconPosition === 'left'\n ? `${icon}${aTag.innerHTML}`\n : `${aTag.innerHTML}${icon}`;\n const innerHtml = this.iconName ? innerHtmlWithIcon : aTag.innerHTML;\n\n aTag.innerHTML = innerHtml;\n\n if (this.iconSize) {\n aTag.querySelector('chop-icon')?.setAttribute('size', this.iconSize);\n }\n }\n\n // checks the is-disabled prop and manages disabled attribute\n if (this.hasAttribute('is-disabled')) {\n aTag.setAttribute('disabled', 'true')!;\n } else {\n aTag.setAttribute('disabled', 'false');\n }\n }\n\n /**\n * This method generates a class string based on the properties provided.\n * @returns {string} The class string.\n */\n generateClassString(): string {\n // Is used to remove the padding when there is no icon on button.\n let removeIconPadding = !this.iconName;\n removeIconPadding = this.linkVariant === 'link' ? false : true;\n\n const ctaClasses = {\n 'btn': true,\n [this.linkSize]: true,\n [this.linkVariant]: true,\n 'reversed': this.isReversed,\n 'active': this.isActive,\n 'no-hover': this.noHover,\n 'no-border': this.noBorder,\n 'full-width': this.fullWidth,\n 'no-icon': removeIconPadding,\n };\n\n // Convert the ctaClasses object to a string\n return Object.keys(ctaClasses)\n .filter(key => ctaClasses[key])\n .join(' ');\n }\n\n /**\n * Icon template\n */\n iconTemplate() {\n return html`\n \n \n \n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-cta-link': CHOPCtaLink;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:block;\n width:100%;\n}\n\n :host > div{\n height:100%;\n }\n\n:host([variation='location-hero']){\n height:100%;\n}\n\n.chop-video--wrapper{\n display:flex;\n}\n\n.chop-video--player{\n width:100%;\n height:100%;\n aspect-ratio:16/9;\n}\n\n.chop-video--button{\n position:absolute;\n top:45%;\n left:50%;\n width:10%;\n height:auto;\n margin:0;\n padding:0;\n background-color:transparent;\n border:none;\n transform:translate(-50%, -50%);\n cursor:pointer;\n}\n\n.chop-video--button .shown{\n opacity:1;\n visibility:visible;\n transition:all 0.4s;\n }\n\n.chop-video--button .hidden{\n opacity:0;\n height:0;\n overflow:hidden;\n visibility:hidden;\n transition:all 0.4s;\n }\n\n.chop-video--caption{\n display:flex;\n padding:var(--spacing-2) 0;\n font-family:var(--ff-body);\n font-family:var(--chop-cta-link--family, var(--ff-body));\n}\n\n.variation--hero .chop-video--button{\n width:auto;\n top:50%;\n }\n\n.variation--ways-to-give-hero{\n height:100%;\n}\n\n.variation--ways-to-give-hero .chop-video--player{\n object-fit:cover;\n }\n\n@media (min-width: 860px){\n .overlay{\n position:absolute;\n top:0;\n left:0;\n width:100%;\n height:100%;\n background:linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0.73) 7.06%,\n rgba(0, 0, 0, 0) 84.34%\n );\n }\n .variation--ways-to-give-hero .chop-video--player, .variation--hero .chop-video--player{\n aspect-ratio:none;\n object-fit:cover;\n max-height:530px;\n width:100%;\n height:100%;\n }\n .variation--ways-to-give-hero.small-button .chop-video--button, .variation--hero.small-button .chop-video--button{\n top:auto;\n left:auto;\n bottom:0;\n right:0;\n width:auto;\n }\n .variation--ways-to-give-hero::before{\n content:' ';\n height:100%;\n width:100%;\n position:absolute;\n background:rgba(0, 0, 0, 0.5);\n }\n .variation--ways-to-give-hero .chop-video--player{\n max-height:none;\n }\n}\n\n@media (min-width: 1100px){\n .variation--location-hero{\n height:100%;\n }\n .variation--location-hero .chop-video--player{\n aspect-ratio:none;\n object-fit:cover;\n width:100%;\n height:100%;\n }\n .variation--location-hero.small-button .chop-video--button{\n top:auto;\n left:auto;\n bottom:0;\n right:0;\n width:auto;\n }\n .variation--hero .chop-video--player{\n max-height:720px;\n }\n}\n`;","/**\n * This file is auto generated via npm run generate.resolved-tailwind\n */\n\nexport type Color =\n | 'outline-phase2-blue'\n | 'outline-karma-coral'\n | 'outline-soft-black'\n | 'outline-not-gray'\n | 'outline-misty-teal'\n | 'outline-electric-violet'\n | 'outline-dusty-blue'\n | 'outline-transparent'\n | 'outline-white'\n | 'outline-black'\n | 'brand-blue'\n | 'brand-pink'\n | 'brand-green'\n | 'brand-brown'\n | 'brand-blue-blue-100'\n | 'brand-blue-blue-200'\n | 'brand-blue-blue-300'\n | 'brand-blue-blue-400'\n | 'brand-blue-blue-500'\n | 'brand-blue-blue-600'\n | 'brand-blue-blue-700'\n | 'brand-blue-blue-800'\n | 'brand-blue-blue-900'\n | 'brand-pink-pink-100'\n | 'brand-pink-pink-200'\n | 'brand-pink-pink-300'\n | 'brand-pink-pink-400'\n | 'brand-pink-pink-500'\n | 'brand-pink-pink-700'\n | 'brand-pink-pink-800'\n | 'brand-pink-pink-900'\n | 'brand-green-green-100'\n | 'brand-green-green-200'\n | 'brand-green-green-300'\n | 'brand-green-green-400'\n | 'brand-green-green-500'\n | 'brand-green-green-700'\n | 'brand-green-green-800'\n | 'brand-green-green-900'\n | 'brand-brown-brown-100'\n | 'brand-brown-brown-200'\n | 'brand-brown-brown-300'\n | 'brand-brown-brown-400'\n | 'brand-brown-brown-500'\n | 'brand-brown-brown-700'\n | 'brand-brown-brown-800'\n | 'brand-brown-brown-900'\n | 'neutral-neutral-100'\n | 'neutral-neutral-300'\n | 'neutral-neutral-400'\n | 'neutral-neutral-500'\n | 'neutral-neutral-800'\n | 'neutral-neutral-900'\n | 'system-success-green-500'\n | 'system-info-blue-500'\n | 'system-warning-yellow-500'\n | 'system-error-pink-800'\n | 'ui-error'\n | 'ui-warning'\n | 'ui-info'\n | 'ui-success'\n | 'outline-gray-50'\n | 'outline-gray-100'\n | 'outline-gray-200'\n | 'outline-gray-300'\n | 'outline-gray-400'\n | 'outline-gray-500'\n | 'outline-gray-600'\n | 'outline-gray-700'\n | 'outline-gray-800'\n | 'outline-gray-900'\n | 'outline-blue-50'\n | 'outline-blue-100'\n | 'outline-blue-200'\n | 'outline-blue-300'\n | 'outline-blue-400'\n | 'outline-blue-500'\n | 'outline-blue-600'\n | 'outline-blue-700'\n | 'outline-blue-800'\n | 'outline-blue-900'\n | 'gray-50'\n | 'gray-100'\n | 'gray-200'\n | 'gray-300'\n | 'gray-400'\n | 'gray-500'\n | 'gray-600'\n | 'gray-700'\n | 'gray-800'\n | 'gray-900'\n | 'red-50'\n | 'red-100'\n | 'red-200'\n | 'red-300'\n | 'red-400'\n | 'red-500'\n | 'red-600'\n | 'red-700'\n | 'red-800'\n | 'red-900'\n | 'yellow-50'\n | 'yellow-100'\n | 'yellow-200'\n | 'yellow-300'\n | 'yellow-400'\n | 'yellow-500'\n | 'yellow-600'\n | 'yellow-700'\n | 'yellow-800'\n | 'yellow-900'\n | 'green-50'\n | 'green-100'\n | 'green-200'\n | 'green-300'\n | 'green-400'\n | 'green-500'\n | 'green-600'\n | 'green-700'\n | 'green-800'\n | 'green-900'\n | 'indigo-50'\n | 'indigo-100'\n | 'indigo-200'\n | 'indigo-300'\n | 'indigo-400'\n | 'indigo-500'\n | 'indigo-600'\n | 'indigo-700'\n | 'indigo-800'\n | 'indigo-900'\n | 'purple-50'\n | 'purple-100'\n | 'purple-200'\n | 'purple-300'\n | 'purple-400'\n | 'purple-500'\n | 'purple-600'\n | 'purple-700'\n | 'purple-800'\n | 'purple-900'\n | 'pink-50'\n | 'pink-100'\n | 'pink-200'\n | 'pink-300'\n | 'pink-400'\n | 'pink-500'\n | 'pink-600'\n | 'pink-700'\n | 'pink-800'\n | 'pink-900';\n\nexport const ALL_COLORS: Color[] = [\n 'outline-phase2-blue',\n 'outline-karma-coral',\n 'outline-soft-black',\n 'outline-not-gray',\n 'outline-misty-teal',\n 'outline-electric-violet',\n 'outline-dusty-blue',\n 'outline-transparent',\n 'outline-white',\n 'outline-black',\n 'brand-blue',\n 'brand-pink',\n 'brand-green',\n 'brand-brown',\n 'brand-blue-blue-100',\n 'brand-blue-blue-200',\n 'brand-blue-blue-300',\n 'brand-blue-blue-400',\n 'brand-blue-blue-500',\n 'brand-blue-blue-600',\n 'brand-blue-blue-700',\n 'brand-blue-blue-800',\n 'brand-blue-blue-900',\n 'brand-pink-pink-100',\n 'brand-pink-pink-200',\n 'brand-pink-pink-300',\n 'brand-pink-pink-400',\n 'brand-pink-pink-500',\n 'brand-pink-pink-700',\n 'brand-pink-pink-800',\n 'brand-pink-pink-900',\n 'brand-green-green-100',\n 'brand-green-green-200',\n 'brand-green-green-300',\n 'brand-green-green-400',\n 'brand-green-green-500',\n 'brand-green-green-700',\n 'brand-green-green-800',\n 'brand-green-green-900',\n 'brand-brown-brown-100',\n 'brand-brown-brown-200',\n 'brand-brown-brown-300',\n 'brand-brown-brown-400',\n 'brand-brown-brown-500',\n 'brand-brown-brown-700',\n 'brand-brown-brown-800',\n 'brand-brown-brown-900',\n 'neutral-neutral-100',\n 'neutral-neutral-300',\n 'neutral-neutral-400',\n 'neutral-neutral-500',\n 'neutral-neutral-800',\n 'neutral-neutral-900',\n 'system-success-green-500',\n 'system-info-blue-500',\n 'system-warning-yellow-500',\n 'system-error-pink-800',\n 'ui-error',\n 'ui-warning',\n 'ui-info',\n 'ui-success',\n 'outline-gray-50',\n 'outline-gray-100',\n 'outline-gray-200',\n 'outline-gray-300',\n 'outline-gray-400',\n 'outline-gray-500',\n 'outline-gray-600',\n 'outline-gray-700',\n 'outline-gray-800',\n 'outline-gray-900',\n 'outline-blue-50',\n 'outline-blue-100',\n 'outline-blue-200',\n 'outline-blue-300',\n 'outline-blue-400',\n 'outline-blue-500',\n 'outline-blue-600',\n 'outline-blue-700',\n 'outline-blue-800',\n 'outline-blue-900',\n 'gray-50',\n 'gray-100',\n 'gray-200',\n 'gray-300',\n 'gray-400',\n 'gray-500',\n 'gray-600',\n 'gray-700',\n 'gray-800',\n 'gray-900',\n 'red-50',\n 'red-100',\n 'red-200',\n 'red-300',\n 'red-400',\n 'red-500',\n 'red-600',\n 'red-700',\n 'red-800',\n 'red-900',\n 'yellow-50',\n 'yellow-100',\n 'yellow-200',\n 'yellow-300',\n 'yellow-400',\n 'yellow-500',\n 'yellow-600',\n 'yellow-700',\n 'yellow-800',\n 'yellow-900',\n 'green-50',\n 'green-100',\n 'green-200',\n 'green-300',\n 'green-400',\n 'green-500',\n 'green-600',\n 'green-700',\n 'green-800',\n 'green-900',\n 'indigo-50',\n 'indigo-100',\n 'indigo-200',\n 'indigo-300',\n 'indigo-400',\n 'indigo-500',\n 'indigo-600',\n 'indigo-700',\n 'indigo-800',\n 'indigo-900',\n 'purple-50',\n 'purple-100',\n 'purple-200',\n 'purple-300',\n 'purple-400',\n 'purple-500',\n 'purple-600',\n 'purple-700',\n 'purple-800',\n 'purple-900',\n 'pink-50',\n 'pink-100',\n 'pink-200',\n 'pink-300',\n 'pink-400',\n 'pink-500',\n 'pink-600',\n 'pink-700',\n 'pink-800',\n 'pink-900',\n];\n\nexport default {\n screens: {\n '2xs': '320px',\n 'xs': '360px',\n 'sm': '668px',\n 'md': '860px',\n 'lg': '1100px',\n 'xl': '1400px',\n 'xxl': '2000px',\n },\n spacing: {\n '1': 'var(--spacing-01)',\n '2': 'var(--spacing-02)',\n '3': 'var(--spacing-03)',\n '4': 'var(--spacing-04)',\n '5': 'var(--spacing-05)',\n '6': 'var(--spacing-06)',\n '8': 'var(--spacing-08)',\n '10': 'var(--spacing-10)',\n '12': 'var(--spacing-12)',\n '16': 'var(--spacing-16)',\n '20': 'var(--spacing-20)',\n '24': 'var(--spacing-24)',\n '32': 'var(--spacing-32)',\n '40': 'var(--spacing-40)',\n '48': 'var(--spacing-48)',\n '56': 'var(--spacing-56)',\n '64': 'var(--spacing-64)',\n },\n colors: {\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n },\n fontSize: {\n 'xs': ['var(--fs-xs)', { lineHeight: 'var(--lh-xs)' }],\n 'sm': ['var(--fs-sm)', { lineHeight: 'var(--lh-sm)' }],\n 'base': ['var(--fs-base)', { lineHeight: 'var(--lh-base)' }],\n 'lg': ['var(--fs-lg)', { lineHeight: 'var(--lh-lg)' }],\n 'xl': ['var(--fs-xl)', { lineHeight: 'var(--lh-xl)' }],\n '2xl': ['var(--fs-2xl)', { lineHeight: 'var(--lh-2xl)' }],\n '3xl': ['var(--fs-3xl)', { lineHeight: 'var(--lh-3xl)' }],\n '4xl': ['var(--fs-4xl)', { lineHeight: 'var(--lh-4xl)' }],\n '5xl': ['var(--fs-5xl)', { lineHeight: 'var(--lh-5xl)' }],\n '6xl': ['var(--fs-6xl)', { lineHeight: 'var(--lh-6xl)' }],\n '7xl': ['var(--fs-7xl)', { lineHeight: 'var(--lh-7xl)' }],\n '8xl': ['var(--fs-8xl)', { lineHeight: 'var(--lh-8xl)' }],\n '9xl': ['var(--fs-9xl)', { lineHeight: 'var(--lh-9lx)' }],\n 'body-helper': [\n 'var(--body-helper-font-size)',\n { lineHeight: 'var(--body-helper-line-height)' },\n ],\n 'body-01': [\n 'var(--body-01-font-size)',\n { lineHeight: 'var(--body-01-line-height)' },\n ],\n 'body-02': [\n 'var(--body-02-font-size)',\n { lineHeight: 'var(--body-02-line-height)' },\n ],\n 'body-03': [\n 'var(--body-03-font-size)',\n { lineHeight: 'var(--body-03-line-height)' },\n ],\n 'body-04': [\n 'var(--body-04-font-size)',\n { lineHeight: 'var(--body-04-line-height)' },\n ],\n 'headline-eyebrow': [\n 'var(--headline-eyebrow-font-size)',\n { lineHeight: 'var(--headline-eyebrow-line-height)' },\n ],\n 'h1-responsive': [\n 'var(--fs-headline-3xl-responsive)',\n { lineHeight: 'var(--lh-headline-3xl)' },\n ],\n 'h2-responsive': [\n 'var(--fs-headline-2xl-responsive)',\n { lineHeight: 'var(--lh-headline-2xl)' },\n ],\n 'h3-responsive': [\n 'var(--fs-headline-xl-responsive)',\n { lineHeight: 'var(--lh-headline-xl)' },\n ],\n 'h4-responsive': [\n 'var(--fs-headline-lg-responsive)',\n { lineHeight: 'var(--lh-headline-lg)' },\n ],\n 'h5-responsive': [\n 'var(--fs-headline-md-responsive)',\n { lineHeight: 'var(--lh-headline-md)' },\n ],\n 'h6-responsive': [\n 'var(--fs-headline-sm-responsive)',\n { lineHeight: 'var(--lh-headline-sm)' },\n ],\n 'h7-responsive': [\n 'var(--fs-headline-xl-responsive)',\n { lineHeight: 'var(--lh-headline-xs)' },\n ],\n },\n fontWeight: {\n thin: 'var(--fw-extralight)',\n extralight: 'var(--fw-thin)',\n light: 'var(--fw-light)',\n normal: 'var(--fw-normal)',\n medium: 'var(--fw-medium)',\n semibold: 'var(--fw-semibold)',\n bold: 'var(--fw-bold)',\n extrabold: 'var(--fw-extrabold)',\n black: 'var(--fw-black)',\n },\n accentColor: {\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n 'auto': 'auto',\n },\n animation: {\n none: 'none',\n spin: 'spin 1s linear infinite',\n ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',\n pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n bounce: 'bounce 1s infinite',\n },\n aria: {\n checked: 'checked=\"true\"',\n disabled: 'disabled=\"true\"',\n expanded: 'expanded=\"true\"',\n hidden: 'hidden=\"true\"',\n pressed: 'pressed=\"true\"',\n readonly: 'readonly=\"true\"',\n required: 'required=\"true\"',\n selected: 'selected=\"true\"',\n },\n aspectRatio: { auto: 'auto', square: '1 / 1', video: '16 / 9' },\n backdropBlur: {\n '0': '0',\n 'none': '0',\n 'sm': '4px',\n 'DEFAULT': '8px',\n 'md': '12px',\n 'lg': '16px',\n 'xl': '24px',\n '2xl': '40px',\n '3xl': '64px',\n },\n backdropBrightness: {\n '0': '0',\n '50': '.5',\n '75': '.75',\n '90': '.9',\n '95': '.95',\n '100': '1',\n '105': '1.05',\n '110': '1.1',\n '125': '1.25',\n '150': '1.5',\n '200': '2',\n },\n backdropContrast: {\n '0': '0',\n '50': '.5',\n '75': '.75',\n '100': '1',\n '125': '1.25',\n '150': '1.5',\n '200': '2',\n },\n backdropGrayscale: { '0': '0', 'DEFAULT': '100%' },\n backdropHueRotate: {\n '0': '0deg',\n '15': '15deg',\n '30': '30deg',\n '60': '60deg',\n '90': '90deg',\n '180': '180deg',\n },\n backdropInvert: { '0': '0', 'DEFAULT': '100%' },\n backdropOpacity: {\n '0': '0',\n '5': '0.05',\n '10': '0.1',\n '20': '0.2',\n '25': '0.25',\n '30': '0.3',\n '40': '0.4',\n '50': '0.5',\n '60': '0.6',\n '70': '0.7',\n '75': '0.75',\n '80': '0.8',\n '90': '0.9',\n '95': '0.95',\n '100': '1',\n },\n backdropSaturate: {\n '0': '0',\n '50': '.5',\n '100': '1',\n '150': '1.5',\n '200': '2',\n },\n backdropSepia: { '0': '0', 'DEFAULT': '100%' },\n backgroundColor: {\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n },\n backgroundImage: {\n 'none': 'none',\n 'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',\n 'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',\n 'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',\n 'gradient-to-br':\n 'linear-gradient(to bottom right, var(--tw-gradient-stops))',\n 'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',\n 'gradient-to-bl':\n 'linear-gradient(to bottom left, var(--tw-gradient-stops))',\n 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',\n 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',\n },\n backgroundOpacity: {\n '0': '0',\n '5': '0.05',\n '10': '0.1',\n '20': '0.2',\n '25': '0.25',\n '30': '0.3',\n '40': '0.4',\n '50': '0.5',\n '60': '0.6',\n '70': '0.7',\n '75': '0.75',\n '80': '0.8',\n '90': '0.9',\n '95': '0.95',\n '100': '1',\n },\n backgroundPosition: {\n 'bottom': 'bottom',\n 'center': 'center',\n 'left': 'left',\n 'left-bottom': 'left bottom',\n 'left-top': 'left top',\n 'right': 'right',\n 'right-bottom': 'right bottom',\n 'right-top': 'right top',\n 'top': 'top',\n },\n backgroundSize: { auto: 'auto', cover: 'cover', contain: 'contain' },\n blur: {\n '0': '0',\n 'none': '0',\n 'sm': '4px',\n 'DEFAULT': '8px',\n 'md': '12px',\n 'lg': '16px',\n 'xl': '24px',\n '2xl': '40px',\n '3xl': '64px',\n },\n borderColor: {\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n 'DEFAULT': 'var(--red-200)',\n },\n borderOpacity: {\n '0': '0',\n '5': '0.05',\n '10': '0.1',\n '20': '0.2',\n '25': '0.25',\n '30': '0.3',\n '40': '0.4',\n '50': '0.5',\n '60': '0.6',\n '70': '0.7',\n '75': '0.75',\n '80': '0.8',\n '90': '0.9',\n '95': '0.95',\n '100': '1',\n },\n borderRadius: {\n 'none': '0px',\n 'sm': '0.125rem',\n 'DEFAULT': '0.25rem',\n 'md': '0.375rem',\n 'lg': '0.5rem',\n 'xl': '0.75rem',\n '2xl': '1rem',\n '3xl': '1.5rem',\n 'full': '9999px',\n },\n borderSpacing: {\n '1': 'var(--spacing-01)',\n '2': 'var(--spacing-02)',\n '3': 'var(--spacing-03)',\n '4': 'var(--spacing-04)',\n '5': 'var(--spacing-05)',\n '6': 'var(--spacing-06)',\n '8': 'var(--spacing-08)',\n '10': 'var(--spacing-10)',\n '12': 'var(--spacing-12)',\n '16': 'var(--spacing-16)',\n '20': 'var(--spacing-20)',\n '24': 'var(--spacing-24)',\n '32': 'var(--spacing-32)',\n '40': 'var(--spacing-40)',\n '48': 'var(--spacing-48)',\n '56': 'var(--spacing-56)',\n '64': 'var(--spacing-64)',\n },\n borderWidth: {\n '0': '0px',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n 'DEFAULT': '1px',\n },\n boxShadow: {\n 'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',\n 'DEFAULT': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n 'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n 'lg': '0px 8px 32px rgba(0, 0, 0, 0.06)',\n 'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',\n 'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',\n 'none': 'none',\n 'focus': '0 0 0 1px rgb(33, 74, 222)',\n 'focus-2': '0 0 0 2px rgb(33, 74, 222)',\n 'focus-error': '0 0 0 1px rgb(225, 9, 9)',\n },\n boxShadowColor: {\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n },\n brightness: {\n '0': '0',\n '50': '.5',\n '75': '.75',\n '90': '.9',\n '95': '.95',\n '100': '1',\n '105': '1.05',\n '110': '1.1',\n '125': '1.25',\n '150': '1.5',\n '200': '2',\n },\n caretColor: {\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n },\n columns: {\n '1': '1',\n '2': '2',\n '3': '3',\n '4': '4',\n '5': '5',\n '6': '6',\n '7': '7',\n '8': '8',\n '9': '9',\n '10': '10',\n '11': '11',\n '12': '12',\n 'auto': 'auto',\n '3xs': '16rem',\n '2xs': '18rem',\n 'xs': '20rem',\n 'sm': '24rem',\n 'md': '28rem',\n 'lg': '32rem',\n 'xl': '36rem',\n '2xl': '42rem',\n '3xl': '48rem',\n '4xl': '56rem',\n '5xl': '64rem',\n '6xl': '72rem',\n '7xl': '80rem',\n },\n container: {},\n content: { none: 'none' },\n contrast: {\n '0': '0',\n '50': '.5',\n '75': '.75',\n '100': '1',\n '125': '1.25',\n '150': '1.5',\n '200': '2',\n },\n cursor: {\n 'auto': 'auto',\n 'default': 'default',\n 'pointer': 'pointer',\n 'wait': 'wait',\n 'text': 'text',\n 'move': 'move',\n 'help': 'help',\n 'not-allowed': 'not-allowed',\n 'none': 'none',\n 'context-menu': 'context-menu',\n 'progress': 'progress',\n 'cell': 'cell',\n 'crosshair': 'crosshair',\n 'vertical-text': 'vertical-text',\n 'alias': 'alias',\n 'copy': 'copy',\n 'no-drop': 'no-drop',\n 'grab': 'grab',\n 'grabbing': 'grabbing',\n 'all-scroll': 'all-scroll',\n 'col-resize': 'col-resize',\n 'row-resize': 'row-resize',\n 'n-resize': 'n-resize',\n 'e-resize': 'e-resize',\n 's-resize': 's-resize',\n 'w-resize': 'w-resize',\n 'ne-resize': 'ne-resize',\n 'nw-resize': 'nw-resize',\n 'se-resize': 'se-resize',\n 'sw-resize': 'sw-resize',\n 'ew-resize': 'ew-resize',\n 'ns-resize': 'ns-resize',\n 'nesw-resize': 'nesw-resize',\n 'nwse-resize': 'nwse-resize',\n 'zoom-in': 'zoom-in',\n 'zoom-out': 'zoom-out',\n },\n divideColor: {\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n 'DEFAULT': 'var(--red-200)',\n },\n divideOpacity: {\n '0': '0',\n '5': '0.05',\n '10': '0.1',\n '20': '0.2',\n '25': '0.25',\n '30': '0.3',\n '40': '0.4',\n '50': '0.5',\n '60': '0.6',\n '70': '0.7',\n '75': '0.75',\n '80': '0.8',\n '90': '0.9',\n '95': '0.95',\n '100': '1',\n },\n divideWidth: {\n '0': '0px',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n 'DEFAULT': '1px',\n },\n dropShadow: {\n 'sm': '0 1px 1px rgb(0 0 0 / 0.05)',\n 'DEFAULT': ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],\n 'md': ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'],\n 'lg': ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'],\n 'xl': ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'],\n '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',\n 'none': '0 0 #0000',\n },\n fill: {\n 'none': 'none',\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n },\n flex: {\n '1': '1 1 0%',\n 'auto': '1 1 auto',\n 'initial': '0 1 auto',\n 'none': 'none',\n },\n flexBasis: {\n '1': 'var(--spacing-01)',\n '2': 'var(--spacing-02)',\n '3': 'var(--spacing-03)',\n '4': 'var(--spacing-04)',\n '5': 'var(--spacing-05)',\n '6': 'var(--spacing-06)',\n '8': 'var(--spacing-08)',\n '10': 'var(--spacing-10)',\n '12': 'var(--spacing-12)',\n '16': 'var(--spacing-16)',\n '20': 'var(--spacing-20)',\n '24': 'var(--spacing-24)',\n '32': 'var(--spacing-32)',\n '40': 'var(--spacing-40)',\n '48': 'var(--spacing-48)',\n '56': 'var(--spacing-56)',\n '64': 'var(--spacing-64)',\n 'auto': 'auto',\n '1/2': '50%',\n '1/3': '33.333333%',\n '2/3': '66.666667%',\n '1/4': '25%',\n '2/4': '50%',\n '3/4': '75%',\n '1/5': '20%',\n '2/5': '40%',\n '3/5': '60%',\n '4/5': '80%',\n '1/6': '16.666667%',\n '2/6': '33.333333%',\n '3/6': '50%',\n '4/6': '66.666667%',\n '5/6': '83.333333%',\n '1/12': '8.333333%',\n '2/12': '16.666667%',\n '3/12': '25%',\n '4/12': '33.333333%',\n '5/12': '41.666667%',\n '6/12': '50%',\n '7/12': '58.333333%',\n '8/12': '66.666667%',\n '9/12': '75%',\n '10/12': '83.333333%',\n '11/12': '91.666667%',\n 'full': '100%',\n },\n flexGrow: { '0': '0', 'DEFAULT': '1' },\n flexShrink: { '0': '0', 'DEFAULT': '1' },\n fontFamily: {\n sans: [\n 'ui-sans-serif',\n 'system-ui',\n '-apple-system',\n 'BlinkMacSystemFont',\n '\"Segoe UI\"',\n 'Roboto',\n '\"Helvetica Neue\"',\n 'Arial',\n '\"Noto Sans\"',\n 'sans-serif',\n '\"Apple Color Emoji\"',\n '\"Segoe UI Emoji\"',\n '\"Segoe UI Symbol\"',\n '\"Noto Color Emoji\"',\n ],\n serif: [\n 'ui-serif',\n 'Georgia',\n 'Cambria',\n '\"Times New Roman\"',\n 'Times',\n 'serif',\n ],\n mono: [\n 'ui-monospace',\n 'SFMono-Regular',\n 'Menlo',\n 'Monaco',\n 'Consolas',\n '\"Liberation Mono\"',\n '\"Courier New\"',\n 'monospace',\n ],\n display: ['var(--ff-display)'],\n body: ['var(--ff-body)'],\n demo: ['var(--ff-demo)'],\n },\n gap: {\n '1': 'var(--spacing-01)',\n '2': 'var(--spacing-02)',\n '3': 'var(--spacing-03)',\n '4': 'var(--spacing-04)',\n '5': 'var(--spacing-05)',\n '6': 'var(--spacing-06)',\n '8': 'var(--spacing-08)',\n '10': 'var(--spacing-10)',\n '12': 'var(--spacing-12)',\n '16': 'var(--spacing-16)',\n '20': 'var(--spacing-20)',\n '24': 'var(--spacing-24)',\n '32': 'var(--spacing-32)',\n '40': 'var(--spacing-40)',\n '48': 'var(--spacing-48)',\n '56': 'var(--spacing-56)',\n '64': 'var(--spacing-64)',\n },\n gradientColorStops: {\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n },\n gradientColorStopPositions: {\n '0%': '0%',\n '5%': '5%',\n '10%': '10%',\n '15%': '15%',\n '20%': '20%',\n '25%': '25%',\n '30%': '30%',\n '35%': '35%',\n '40%': '40%',\n '45%': '45%',\n '50%': '50%',\n '55%': '55%',\n '60%': '60%',\n '65%': '65%',\n '70%': '70%',\n '75%': '75%',\n '80%': '80%',\n '85%': '85%',\n '90%': '90%',\n '95%': '95%',\n '100%': '100%',\n },\n grayscale: { '0': '0', 'DEFAULT': '100%' },\n gridAutoColumns: {\n auto: 'auto',\n min: 'min-content',\n max: 'max-content',\n fr: 'minmax(0, 1fr)',\n },\n gridAutoRows: {\n auto: 'auto',\n min: 'min-content',\n max: 'max-content',\n fr: 'minmax(0, 1fr)',\n },\n gridColumn: {\n 'auto': 'auto',\n 'span-1': 'span 1 / span 1',\n 'span-2': 'span 2 / span 2',\n 'span-3': 'span 3 / span 3',\n 'span-4': 'span 4 / span 4',\n 'span-5': 'span 5 / span 5',\n 'span-6': 'span 6 / span 6',\n 'span-7': 'span 7 / span 7',\n 'span-8': 'span 8 / span 8',\n 'span-9': 'span 9 / span 9',\n 'span-10': 'span 10 / span 10',\n 'span-11': 'span 11 / span 11',\n 'span-12': 'span 12 / span 12',\n 'span-full': '1 / -1',\n },\n gridColumnEnd: {\n '1': '1',\n '2': '2',\n '3': '3',\n '4': '4',\n '5': '5',\n '6': '6',\n '7': '7',\n '8': '8',\n '9': '9',\n '10': '10',\n '11': '11',\n '12': '12',\n '13': '13',\n 'auto': 'auto',\n },\n gridColumnStart: {\n '1': '1',\n '2': '2',\n '3': '3',\n '4': '4',\n '5': '5',\n '6': '6',\n '7': '7',\n '8': '8',\n '9': '9',\n '10': '10',\n '11': '11',\n '12': '12',\n '13': '13',\n 'auto': 'auto',\n },\n gridRow: {\n 'auto': 'auto',\n 'span-1': 'span 1 / span 1',\n 'span-2': 'span 2 / span 2',\n 'span-3': 'span 3 / span 3',\n 'span-4': 'span 4 / span 4',\n 'span-5': 'span 5 / span 5',\n 'span-6': 'span 6 / span 6',\n 'span-full': '1 / -1',\n },\n gridRowEnd: {\n '1': '1',\n '2': '2',\n '3': '3',\n '4': '4',\n '5': '5',\n '6': '6',\n '7': '7',\n 'auto': 'auto',\n },\n gridRowStart: {\n '1': '1',\n '2': '2',\n '3': '3',\n '4': '4',\n '5': '5',\n '6': '6',\n '7': '7',\n 'auto': 'auto',\n },\n gridTemplateColumns: {\n '1': 'repeat(1, minmax(0, 1fr))',\n '2': 'repeat(2, minmax(0, 1fr))',\n '3': 'repeat(3, minmax(0, 1fr))',\n '4': 'repeat(4, minmax(0, 1fr))',\n '5': 'repeat(5, minmax(0, 1fr))',\n '6': 'repeat(6, minmax(0, 1fr))',\n '7': 'repeat(7, minmax(0, 1fr))',\n '8': 'repeat(8, minmax(0, 1fr))',\n '9': 'repeat(9, minmax(0, 1fr))',\n '10': 'repeat(10, minmax(0, 1fr))',\n '11': 'repeat(11, minmax(0, 1fr))',\n '12': 'repeat(12, minmax(0, 1fr))',\n 'none': 'none',\n '1-2': '4fr 8fr',\n '2-1': '8fr 4fr',\n },\n gridTemplateRows: {\n '1': 'repeat(1, minmax(0, 1fr))',\n '2': 'repeat(2, minmax(0, 1fr))',\n '3': 'repeat(3, minmax(0, 1fr))',\n '4': 'repeat(4, minmax(0, 1fr))',\n '5': 'repeat(5, minmax(0, 1fr))',\n '6': 'repeat(6, minmax(0, 1fr))',\n 'none': 'none',\n },\n height: {\n '1': 'var(--spacing-01)',\n '2': 'var(--spacing-02)',\n '3': 'var(--spacing-03)',\n '4': 'var(--spacing-04)',\n '5': 'var(--spacing-05)',\n '6': 'var(--spacing-06)',\n '8': 'var(--spacing-08)',\n '10': 'var(--spacing-10)',\n '12': 'var(--spacing-12)',\n '16': 'var(--spacing-16)',\n '20': 'var(--spacing-20)',\n '24': 'var(--spacing-24)',\n '32': 'var(--spacing-32)',\n '40': 'var(--spacing-40)',\n '48': 'var(--spacing-48)',\n '56': 'var(--spacing-56)',\n '64': 'var(--spacing-64)',\n 'auto': 'auto',\n '1/2': '50%',\n '1/3': '33.333333%',\n '2/3': '66.666667%',\n '1/4': '25%',\n '2/4': '50%',\n '3/4': '75%',\n '1/5': '20%',\n '2/5': '40%',\n '3/5': '60%',\n '4/5': '80%',\n '1/6': '16.666667%',\n '2/6': '33.333333%',\n '3/6': '50%',\n '4/6': '66.666667%',\n '5/6': '83.333333%',\n 'full': '100%',\n 'screen': '100vh',\n 'min': 'min-content',\n 'max': 'max-content',\n 'fit': 'fit-content',\n 'full-screen-w': '100vw',\n 'half-screen-w': '50vw',\n 'quarter-screen-w': '25vw',\n 'full-screen-h': '100vh',\n 'half-screen-h': '50vh',\n 'quarter-screen-h': '25vh',\n },\n hueRotate: {\n '0': '0deg',\n '15': '15deg',\n '30': '30deg',\n '60': '60deg',\n '90': '90deg',\n '180': '180deg',\n },\n inset: {\n '1': 'var(--spacing-01)',\n '2': 'var(--spacing-02)',\n '3': 'var(--spacing-03)',\n '4': 'var(--spacing-04)',\n '5': 'var(--spacing-05)',\n '6': 'var(--spacing-06)',\n '8': 'var(--spacing-08)',\n '10': 'var(--spacing-10)',\n '12': 'var(--spacing-12)',\n '16': 'var(--spacing-16)',\n '20': 'var(--spacing-20)',\n '24': 'var(--spacing-24)',\n '32': 'var(--spacing-32)',\n '40': 'var(--spacing-40)',\n '48': 'var(--spacing-48)',\n '56': 'var(--spacing-56)',\n '64': 'var(--spacing-64)',\n 'auto': 'auto',\n '1/2': '50%',\n '1/3': '33.333333%',\n '2/3': '66.666667%',\n '1/4': '25%',\n '2/4': '50%',\n '3/4': '75%',\n 'full': '100%',\n },\n invert: { '0': '0', 'DEFAULT': '100%' },\n keyframes: {\n spin: { to: { transform: 'rotate(360deg)' } },\n ping: { '75%, 100%': { transform: 'scale(2)', opacity: '0' } },\n pulse: { '50%': { opacity: '.5' } },\n bounce: {\n '0%, 100%': {\n transform: 'translateY(-25%)',\n animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',\n },\n '50%': {\n transform: 'none',\n animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',\n },\n },\n },\n letterSpacing: {\n tighter: '-0.05em',\n tight: '-0.025em',\n normal: '0em',\n wide: '0.025em',\n wider: '0.05em',\n widest: '0.1em',\n },\n lineHeight: {\n '3': '.75rem',\n '4': '1rem',\n '5': '1.25rem',\n '6': '1.5rem',\n '7': '1.75rem',\n '8': '2rem',\n '9': '2.25rem',\n '10': '2.5rem',\n 'none': '1',\n 'tight': '1.25',\n 'snug': '1.375',\n 'normal': '1.5',\n 'relaxed': '1.625',\n 'loose': '2',\n },\n listStyleType: { none: 'none', disc: 'disc', decimal: 'decimal' },\n listStyleImage: { none: 'none' },\n margin: {\n '1': 'var(--spacing-01)',\n '2': 'var(--spacing-02)',\n '3': 'var(--spacing-03)',\n '4': 'var(--spacing-04)',\n '5': 'var(--spacing-05)',\n '6': 'var(--spacing-06)',\n '8': 'var(--spacing-08)',\n '10': 'var(--spacing-10)',\n '12': 'var(--spacing-12)',\n '16': 'var(--spacing-16)',\n '20': 'var(--spacing-20)',\n '24': 'var(--spacing-24)',\n '32': 'var(--spacing-32)',\n '40': 'var(--spacing-40)',\n '48': 'var(--spacing-48)',\n '56': 'var(--spacing-56)',\n '64': 'var(--spacing-64)',\n 'auto': 'auto',\n },\n lineClamp: { '1': '1', '2': '2', '3': '3', '4': '4', '5': '5', '6': '6' },\n maxHeight: {\n '1': 'var(--spacing-01)',\n '2': 'var(--spacing-02)',\n '3': 'var(--spacing-03)',\n '4': 'var(--spacing-04)',\n '5': 'var(--spacing-05)',\n '6': 'var(--spacing-06)',\n '8': 'var(--spacing-08)',\n '10': 'var(--spacing-10)',\n '12': 'var(--spacing-12)',\n '16': 'var(--spacing-16)',\n '20': 'var(--spacing-20)',\n '24': 'var(--spacing-24)',\n '32': 'var(--spacing-32)',\n '40': 'var(--spacing-40)',\n '48': 'var(--spacing-48)',\n '56': 'var(--spacing-56)',\n '64': 'var(--spacing-64)',\n 'none': 'none',\n 'full': '100%',\n 'screen': '100vh',\n 'min': 'min-content',\n 'max': 'max-content',\n 'fit': 'fit-content',\n 'full-screen-w': '100vw',\n 'half-screen-w': '50vw',\n 'quarter-screen-w': '25vw',\n 'full-screen-h': '100vh',\n 'half-screen-h': '50vh',\n 'quarter-screen-h': '25vh',\n },\n maxWidth: {\n '0': '0rem',\n 'none': 'none',\n 'xs': '20rem',\n 'sm': '24rem',\n 'md': '28rem',\n 'lg': '32rem',\n 'xl': '36rem',\n '2xl': '42rem',\n '3xl': '48rem',\n '4xl': '56rem',\n '5xl': '64rem',\n '6xl': '72rem',\n '7xl': '80rem',\n 'full': '100%',\n 'min': 'min-content',\n 'max': 'max-content',\n 'fit': 'fit-content',\n 'prose': '65ch',\n 'screen-2xs': '320px',\n 'screen-xs': '360px',\n 'screen-sm': '668px',\n 'screen-md': '860px',\n 'screen-lg': '1100px',\n 'screen-xl': '1400px',\n 'screen-xxl': '2000px',\n 'full-screen-w': '100vw',\n 'half-screen-w': '50vw',\n 'quarter-screen-w': '25vw',\n 'full-screen-h': '100vh',\n 'half-screen-h': '50vh',\n 'quarter-screen-h': '25vh',\n },\n minHeight: {\n '0': '0px',\n 'full': '100%',\n 'screen': '100vh',\n 'min': 'min-content',\n 'max': 'max-content',\n 'fit': 'fit-content',\n },\n minWidth: {\n '0': '0px',\n 'full': '100%',\n 'min': 'min-content',\n 'max': 'max-content',\n 'fit': 'fit-content',\n },\n objectPosition: {\n 'bottom': 'bottom',\n 'center': 'center',\n 'left': 'left',\n 'left-bottom': 'left bottom',\n 'left-top': 'left top',\n 'right': 'right',\n 'right-bottom': 'right bottom',\n 'right-top': 'right top',\n 'top': 'top',\n },\n opacity: {\n '0': '0',\n '5': '0.05',\n '10': '0.1',\n '20': '0.2',\n '25': '0.25',\n '30': '0.3',\n '40': '0.4',\n '50': '0.5',\n '60': '0.6',\n '70': '0.7',\n '75': '0.75',\n '80': '0.8',\n '90': '0.9',\n '95': '0.95',\n '100': '1',\n },\n order: {\n '1': '1',\n '2': '2',\n '3': '3',\n '4': '4',\n '5': '5',\n '6': '6',\n '7': '7',\n '8': '8',\n '9': '9',\n '10': '10',\n '11': '11',\n '12': '12',\n 'first': '-9999',\n 'last': '9999',\n 'none': '0',\n },\n outlineColor: {\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n },\n outlineOffset: { '0': '0px', '1': '1px', '2': '2px', '4': '4px', '8': '8px' },\n outlineWidth: { '0': '0px', '1': '1px', '2': '2px', '4': '4px', '8': '8px' },\n padding: {\n '1': 'var(--spacing-01)',\n '2': 'var(--spacing-02)',\n '3': 'var(--spacing-03)',\n '4': 'var(--spacing-04)',\n '5': 'var(--spacing-05)',\n '6': 'var(--spacing-06)',\n '8': 'var(--spacing-08)',\n '10': 'var(--spacing-10)',\n '12': 'var(--spacing-12)',\n '16': 'var(--spacing-16)',\n '20': 'var(--spacing-20)',\n '24': 'var(--spacing-24)',\n '32': 'var(--spacing-32)',\n '40': 'var(--spacing-40)',\n '48': 'var(--spacing-48)',\n '56': 'var(--spacing-56)',\n '64': 'var(--spacing-64)',\n },\n placeholderColor: {\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n },\n placeholderOpacity: {\n '0': '0',\n '5': '0.05',\n '10': '0.1',\n '20': '0.2',\n '25': '0.25',\n '30': '0.3',\n '40': '0.4',\n '50': '0.5',\n '60': '0.6',\n '70': '0.7',\n '75': '0.75',\n '80': '0.8',\n '90': '0.9',\n '95': '0.95',\n '100': '1',\n },\n ringColor: {\n 'DEFAULT': '#3b82f6',\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n },\n ringOffsetColor: {\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n },\n ringOffsetWidth: {\n '0': '0px',\n '1': '1px',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n },\n ringOpacity: {\n '0': '0',\n '5': '0.05',\n '10': '0.1',\n '20': '0.2',\n '25': '0.25',\n '30': '0.3',\n '40': '0.4',\n '50': '0.5',\n '60': '0.6',\n '70': '0.7',\n '75': '0.75',\n '80': '0.8',\n '90': '0.9',\n '95': '0.95',\n '100': '1',\n 'DEFAULT': '0.5',\n },\n ringWidth: {\n '0': '0px',\n '1': '1px',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n 'DEFAULT': '3px',\n },\n rotate: {\n '0': '0deg',\n '1': '1deg',\n '2': '2deg',\n '3': '3deg',\n '6': '6deg',\n '12': '12deg',\n '45': '45deg',\n '90': '90deg',\n '180': '180deg',\n },\n saturate: { '0': '0', '50': '.5', '100': '1', '150': '1.5', '200': '2' },\n scale: {\n '0': '0',\n '50': '.5',\n '75': '.75',\n '90': '.9',\n '95': '.95',\n '100': '1',\n '105': '1.05',\n '110': '1.1',\n '125': '1.25',\n '150': '1.5',\n },\n scrollMargin: {\n '1': 'var(--spacing-01)',\n '2': 'var(--spacing-02)',\n '3': 'var(--spacing-03)',\n '4': 'var(--spacing-04)',\n '5': 'var(--spacing-05)',\n '6': 'var(--spacing-06)',\n '8': 'var(--spacing-08)',\n '10': 'var(--spacing-10)',\n '12': 'var(--spacing-12)',\n '16': 'var(--spacing-16)',\n '20': 'var(--spacing-20)',\n '24': 'var(--spacing-24)',\n '32': 'var(--spacing-32)',\n '40': 'var(--spacing-40)',\n '48': 'var(--spacing-48)',\n '56': 'var(--spacing-56)',\n '64': 'var(--spacing-64)',\n },\n scrollPadding: {\n '1': 'var(--spacing-01)',\n '2': 'var(--spacing-02)',\n '3': 'var(--spacing-03)',\n '4': 'var(--spacing-04)',\n '5': 'var(--spacing-05)',\n '6': 'var(--spacing-06)',\n '8': 'var(--spacing-08)',\n '10': 'var(--spacing-10)',\n '12': 'var(--spacing-12)',\n '16': 'var(--spacing-16)',\n '20': 'var(--spacing-20)',\n '24': 'var(--spacing-24)',\n '32': 'var(--spacing-32)',\n '40': 'var(--spacing-40)',\n '48': 'var(--spacing-48)',\n '56': 'var(--spacing-56)',\n '64': 'var(--spacing-64)',\n },\n sepia: { '0': '0', 'DEFAULT': '100%' },\n skew: {\n '0': '0deg',\n '1': '1deg',\n '2': '2deg',\n '3': '3deg',\n '6': '6deg',\n '12': '12deg',\n },\n space: {\n '1': 'var(--spacing-01)',\n '2': 'var(--spacing-02)',\n '3': 'var(--spacing-03)',\n '4': 'var(--spacing-04)',\n '5': 'var(--spacing-05)',\n '6': 'var(--spacing-06)',\n '8': 'var(--spacing-08)',\n '10': 'var(--spacing-10)',\n '12': 'var(--spacing-12)',\n '16': 'var(--spacing-16)',\n '20': 'var(--spacing-20)',\n '24': 'var(--spacing-24)',\n '32': 'var(--spacing-32)',\n '40': 'var(--spacing-40)',\n '48': 'var(--spacing-48)',\n '56': 'var(--spacing-56)',\n '64': 'var(--spacing-64)',\n },\n stroke: {\n 'none': 'none',\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n },\n strokeWidth: { '0': '0', '1': '1', '2': '2' },\n supports: {},\n data: {},\n textColor: {\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n },\n textDecorationColor: {\n 'outline': {\n 'phase2-blue': 'var(--outline-phase2-blue)',\n 'karma-coral': 'var(--outline-karma-coral)',\n 'soft-black': 'var(--outline-soft-black)',\n 'not-gray': 'var(--outline-not-gray)',\n 'misty-teal': 'var(--outline-misty-teal)',\n 'electric-violet': 'var(--outline-electric-violet)',\n 'dusty-blue': 'var(--outline-dusty-blue)',\n 'transparent': 'var(--outline-transparent)',\n 'white': 'var(--outline-white)',\n 'black': 'var(--outline-black)',\n },\n 'brand': {\n blue: 'var(--brand-blue)',\n pink: 'var(--brand-pink)',\n green: 'var(--brand-green)',\n brown: 'var(--brand-brown)',\n },\n 'brand-blue': {\n 'blue-100': 'var(--color-blue-100)',\n 'blue-200': 'var(--color-blue-200)',\n 'blue-300': 'var(--color-blue-300)',\n 'blue-400': 'var(--color-blue-400)',\n 'blue-500': 'var(--color-blue-500)',\n 'blue-600': 'var(--color-blue-600)',\n 'blue-700': 'var(--color-blue-700)',\n 'blue-800': 'var(--color-blue-800)',\n 'blue-900': 'var(--color-blue-900)',\n },\n 'brand-pink': {\n 'pink-100': 'var(--color-pink-100)',\n 'pink-200': 'var(--color-pink-200)',\n 'pink-300': 'var(--color-pink-300)',\n 'pink-400': 'var(--color-pink-400)',\n 'pink-500': 'var(--color-pink-500)',\n 'pink-700': 'var(--color-pink-700)',\n 'pink-800': 'var(--color-pink-800)',\n 'pink-900': 'var(--color-pink-900)',\n },\n 'brand-green': {\n 'green-100': 'var(--color-green-100)',\n 'green-200': 'var(--color-green-200)',\n 'green-300': 'var(--color-green-300)',\n 'green-400': 'var(--color-green-400)',\n 'green-500': 'var(--color-green-500)',\n 'green-700': 'var(--color-green-700)',\n 'green-800': 'var(--color-green-800)',\n 'green-900': 'var(--color-green-900)',\n },\n 'brand-brown': {\n 'brown-100': 'var(--color-brown-100)',\n 'brown-200': 'var(--color-brown-200)',\n 'brown-300': 'var(--color-brown-300)',\n 'brown-400': 'var(--color-brown-400)',\n 'brown-500': 'var(--color-brown-500)',\n 'brown-700': 'var(--color-brown-700)',\n 'brown-800': 'var(--color-brown-800)',\n 'brown-900': 'var(--color-brown-900)',\n },\n 'neutral': {\n 'neutral-100': 'var(--color-neutral-100)',\n 'neutral-300': 'var(--color-neutral-300)',\n 'neutral-400': 'var(--color-neutral-400)',\n 'neutral-500': 'var(--color-neutral-500)',\n 'neutral-800': 'var(--color-neutral-800)',\n 'neutral-900': 'var(--color-neutral-900)',\n },\n 'system-success': { 'green-500': 'var(--color-green-500)' },\n 'system-info': { 'blue-500': 'var(--color-blue-500)' },\n 'system-warning': { 'yellow-500': 'var(--color-yellow-500)' },\n 'system-error': { 'pink-800': 'var(--color-pink-800)' },\n 'ui': {\n error: 'var(--status-error)',\n warning: 'var(--status-warning)',\n info: 'var(--status-info)',\n success: 'var(--status-success)',\n },\n 'outline-gray': {\n '50': 'var(--outline-gray-50)',\n '100': 'var(--outline-gray-100)',\n '200': 'var(--outline-gray-200)',\n '300': 'var(--outline-gray-300)',\n '400': 'var(--outline-gray-400)',\n '500': 'var(--outline-gray-500)',\n '600': 'var(--outline-gray-600)',\n '700': 'var(--outline-gray-700)',\n '800': 'var(--outline-gray-800)',\n '900': 'var(--outline-gray-900)',\n },\n 'outline-blue': {\n '50': 'var(--outline-blue-50)',\n '100': 'var(--outline-blue-100)',\n '200': 'var(--outline-blue-200)',\n '300': 'var(--outline-blue-300)',\n '400': 'var(--outline-blue-400)',\n '500': 'var(--outline-blue-500)',\n '600': 'var(--outline-blue-600)',\n '700': 'var(--outline-blue-700)',\n '800': 'var(--outline-blue-800)',\n '900': 'var(--outline-blue-900)',\n },\n 'gray': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--color-gray)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'red': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'yellow': {\n '50': 'var(--yellow-50)',\n '100': 'var(--yellow-100)',\n '200': 'var(--yellow-200)',\n '300': 'var(--yellow-300)',\n '400': 'var(--yellow-400)',\n '500': 'var(--yellow-500)',\n '600': 'var(--yellow-600)',\n '700': 'var(--yellow-700)',\n '800': 'var(--yellow-800)',\n '900': 'var(--yellow-900)',\n },\n 'green': {\n '50': 'var(--green-50)',\n '100': 'var(--green-100)',\n '200': 'var(--green-200)',\n '300': 'var(--green-300)',\n '400': 'var(--green-400)',\n '500': 'var(--green-500)',\n '600': 'var(--green-600)',\n '700': 'var(--green-700)',\n '800': 'var(--green-800)',\n '900': 'var(--green-900)',\n },\n 'indigo': {\n '50': 'var(--red-50)',\n '100': 'var(--red-100)',\n '200': 'var(--red-200)',\n '300': 'var(--red-300)',\n '400': 'var(--red-400)',\n '500': 'var(--red-500)',\n '600': 'var(--red-600)',\n '700': 'var(--red-700)',\n '800': 'var(--red-800)',\n '900': 'var(--red-900)',\n },\n 'purple': {\n '50': 'var(--purple-50)',\n '100': 'var(--purple-100)',\n '200': 'var(--purple-200)',\n '300': 'var(--purple-300)',\n '400': 'var(--purple-400)',\n '500': 'var(--purple-500)',\n '600': 'var(--purple-600)',\n '700': 'var(--purple-700)',\n '800': 'var(--purple-800)',\n '900': 'var(--purple-900)',\n },\n 'pink': {\n '50': 'var(--pink-50)',\n '100': 'var(--pink-100)',\n '200': 'var(--pink-200)',\n '300': 'var(--pink-300)',\n '400': 'var(--pink-400)',\n '500': 'var(--pink-500)',\n '600': 'var(--pink-600)',\n '700': 'var(--pink-700)',\n '800': 'var(--pink-800)',\n '900': 'var(--pink-900)',\n },\n },\n textDecorationThickness: {\n '0': '0px',\n '1': '1px',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n 'auto': 'auto',\n 'from-font': 'from-font',\n },\n textIndent: {\n '1': 'var(--spacing-01)',\n '2': 'var(--spacing-02)',\n '3': 'var(--spacing-03)',\n '4': 'var(--spacing-04)',\n '5': 'var(--spacing-05)',\n '6': 'var(--spacing-06)',\n '8': 'var(--spacing-08)',\n '10': 'var(--spacing-10)',\n '12': 'var(--spacing-12)',\n '16': 'var(--spacing-16)',\n '20': 'var(--spacing-20)',\n '24': 'var(--spacing-24)',\n '32': 'var(--spacing-32)',\n '40': 'var(--spacing-40)',\n '48': 'var(--spacing-48)',\n '56': 'var(--spacing-56)',\n '64': 'var(--spacing-64)',\n },\n textOpacity: {\n '0': '0',\n '5': '0.05',\n '10': '0.1',\n '20': '0.2',\n '25': '0.25',\n '30': '0.3',\n '40': '0.4',\n '50': '0.5',\n '60': '0.6',\n '70': '0.7',\n '75': '0.75',\n '80': '0.8',\n '90': '0.9',\n '95': '0.95',\n '100': '1',\n },\n textUnderlineOffset: {\n '0': '0px',\n '1': '1px',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n 'auto': 'auto',\n },\n transformOrigin: {\n 'center': 'center',\n 'top': 'top',\n 'top-right': 'top right',\n 'right': 'right',\n 'bottom-right': 'bottom right',\n 'bottom': 'bottom',\n 'bottom-left': 'bottom left',\n 'left': 'left',\n 'top-left': 'top left',\n },\n transitionDelay: {\n '0': '0s',\n '75': '75ms',\n '100': '100ms',\n '150': '150ms',\n '200': '200ms',\n '300': '300ms',\n '500': '500ms',\n '700': '700ms',\n '1000': '1000ms',\n },\n transitionDuration: {\n '0': '0s',\n '75': '75ms',\n '100': '100ms',\n '150': '150ms',\n '200': '200ms',\n '300': '300ms',\n '500': '500ms',\n '700': '700ms',\n '1000': '1000ms',\n 'DEFAULT': '150ms',\n },\n transitionProperty: {\n none: 'none',\n all: 'all',\n DEFAULT:\n 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',\n colors:\n 'color, background-color, border-color, text-decoration-color, fill, stroke',\n opacity: 'opacity',\n shadow: 'box-shadow',\n transform: 'transform',\n },\n transitionTimingFunction: {\n 'DEFAULT': 'cubic-bezier(0.4, 0, 0.2, 1)',\n 'linear': 'linear',\n 'in': 'cubic-bezier(0.4, 0, 1, 1)',\n 'out': 'cubic-bezier(0, 0, 0.2, 1)',\n 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',\n },\n translate: {\n '1': 'var(--spacing-01)',\n '2': 'var(--spacing-02)',\n '3': 'var(--spacing-03)',\n '4': 'var(--spacing-04)',\n '5': 'var(--spacing-05)',\n '6': 'var(--spacing-06)',\n '8': 'var(--spacing-08)',\n '10': 'var(--spacing-10)',\n '12': 'var(--spacing-12)',\n '16': 'var(--spacing-16)',\n '20': 'var(--spacing-20)',\n '24': 'var(--spacing-24)',\n '32': 'var(--spacing-32)',\n '40': 'var(--spacing-40)',\n '48': 'var(--spacing-48)',\n '56': 'var(--spacing-56)',\n '64': 'var(--spacing-64)',\n '1/2': '50%',\n '1/3': '33.333333%',\n '2/3': '66.666667%',\n '1/4': '25%',\n '2/4': '50%',\n '3/4': '75%',\n 'full': '100%',\n },\n width: {\n '1': 'var(--spacing-01)',\n '2': 'var(--spacing-02)',\n '3': 'var(--spacing-03)',\n '4': 'var(--spacing-04)',\n '5': 'var(--spacing-05)',\n '6': 'var(--spacing-06)',\n '8': 'var(--spacing-08)',\n '10': 'var(--spacing-10)',\n '12': 'var(--spacing-12)',\n '16': 'var(--spacing-16)',\n '20': 'var(--spacing-20)',\n '24': 'var(--spacing-24)',\n '32': 'var(--spacing-32)',\n '40': 'var(--spacing-40)',\n '48': 'var(--spacing-48)',\n '56': 'var(--spacing-56)',\n '64': 'var(--spacing-64)',\n 'auto': 'auto',\n '1/2': '50%',\n '1/3': '33.333333%',\n '2/3': '66.666667%',\n '1/4': '25%',\n '2/4': '50%',\n '3/4': '75%',\n '1/5': '20%',\n '2/5': '40%',\n '3/5': '60%',\n '4/5': '80%',\n '1/6': '16.666667%',\n '2/6': '33.333333%',\n '3/6': '50%',\n '4/6': '66.666667%',\n '5/6': '83.333333%',\n '1/12': '8.333333%',\n '2/12': '16.666667%',\n '3/12': '25%',\n '4/12': '33.333333%',\n '5/12': '41.666667%',\n '6/12': '50%',\n '7/12': '58.333333%',\n '8/12': '66.666667%',\n '9/12': '75%',\n '10/12': '83.333333%',\n '11/12': '91.666667%',\n 'full': '100%',\n 'screen': '100vw',\n 'min': 'min-content',\n 'max': 'max-content',\n 'fit': 'fit-content',\n 'full-screen-w': '100vw',\n 'half-screen-w': '50vw',\n 'quarter-screen-w': '25vw',\n 'full-screen-h': '100vh',\n 'half-screen-h': '50vh',\n 'quarter-screen-h': '25vh',\n },\n willChange: {\n auto: 'auto',\n scroll: 'scroll-position',\n contents: 'contents',\n transform: 'transform',\n },\n zIndex: {\n '0': '0',\n '10': '10',\n '20': '20',\n '30': '30',\n '40': '40',\n '50': '50',\n 'auto': 'auto',\n },\n};\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n`;","import { CSSResultGroup, TemplateResult, html } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n state,\n} from 'lit/decorators.js';\nimport {\n OutlineElement,\n MobileController,\n SlotsController,\n} from '@phase2/outline-core';\nimport componentStyles from './chop-accordion.css.lit';\nimport '../../chop-icon/chop-icon';\nimport { CHOPAccordionPanel } from '../chop-accordion-panel/chop-accordion-panel';\n\n/**\n * The CHOPAccordion component\n * @element chop-accordion\n * @extends OutlineElement\n *\n * @slot chop-label: The title text for the panel component.\n * @slot chop-panels: The main panel content, visible when the panel is open.\n */\n@customElement('chop-accordion')\nexport class CHOPAccordion extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n private mobileController = new MobileController(this);\n slots = new SlotsController(this);\n\n /**\n * Set to 'true' to create an accordion that can only have one panel open at a time.\n */\n @property({ type: Boolean, attribute: 'single-panel' })\n singlePanel = false;\n\n @state()\n hasLabel = false;\n\n /**\n * Reference to in panels slot.\n */\n @queryAssignedElements({ slot: 'chop-panels' })\n panels: CHOPAccordionPanel[];\n\n connectedCallback(): void {\n super.connectedCallback();\n }\n\n handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes();\n this.hasLabel = nodes && nodes.length > 0;\n }\n\n /**\n * @returns string | null\n * Checks if the window is at mobile size.\n */\n isMobile = () => (this.mobileController.isMobile ? 'mobile' : null);\n\n /**\n * @param event\n * @returns void\n * Adds up/down arrow keyboard navigation.\n * TODO: try to refactor to something simpler.\n */\n handleKeyboardNav(event: KeyboardEvent) {\n let index = 0;\n const panels = this.panels;\n const start = Array.prototype.indexOf.call(\n panels,\n event.target as HTMLElement\n );\n\n // bail on wrong key\n if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {\n return;\n }\n if (event.key === 'ArrowDown') {\n if (panels?.length && start + 1 > panels?.length - 1) {\n index = 0;\n } else index = start + 1;\n }\n if (event.key === 'ArrowUp') {\n if (panels?.length && start - 1 < 0) {\n index = panels?.length - 1;\n } else index = start - 1;\n }\n const focusTarget = panels?.[index] as unknown as HTMLElement;\n focusTarget.shadowRoot?.querySelector('button')?.focus();\n }\n\n render(): TemplateResult {\n return html`\n ${this.hasLabel\n ? html`
`\n : null}\n
\n \n
\n `;\n }\n\n updated() {\n if (this.singlePanel) {\n this.panels.forEach(panel => {\n if (panel.id === this.id) {\n panel.setAttribute('active', 'true');\n } else {\n panel.removeAttribute('active');\n }\n });\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-accordion': CHOPAccordion;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n.panel-wrapper{\n border-bottom:1px solid #dfd2c9;\n margin:0;\n}\n\n .panel-wrapper .panel-content{\n padding:0 var(--spacing-6);\n }\n\nbutton.accordion-button{\n padding:var(--spacing-03) var(--spacing-04);\n background-color:var(--color-white);\n width:100%;\n border:none;\n text-align:left;\n display:flex;\n flex-direction:row;\n justify-content:space-between;\n align-items:center;\n}\n\nbutton.accordion-button:hover{\n background-color:var(--color-brown-100);\n cursor:pointer;\n }\n\nbutton.accordion-button:focus{\n background-color:var(--color-white);\n outline:2px solid var(--indigo-1000);\n }\n\nbutton.accordion-button.transcript{\n color:var(--color-blue-700);\n font-feature-settings:'clig' off, 'liga' off;\n font-family:var(--ff-display);\n font-style:normal;\n font-weight:700;\n line-height:140%;\n }\n\n:host([active]) button.accordion-button{\n background-color:var(--color-brown-100);\n }\n\n:host([active]) button.accordion-button:hover{\n background-color:var(--color-brown-100);\n outline:2px solid var(--indigo-1000);\n }\n\n:host([active]) button.accordion-button:focus{\n background-color:var(--color-brown-100);\n }\n\n@media screen and (min-width: 1100px){\n button.accordion-button{\n padding:var(--spacing-04);\n }\n}\n\nspan.accordion-icon{\n color:var(--indigo-1000);\n}\n`;","import { CSSResultGroup, TemplateResult, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport componentStyles from './chop-accordion-panel.css.lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ResizeController } from '../../../controllers/resize-controller';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { CHOPAccordion } from '../chop-accordion-wrapper/chop-accordion';\nimport '../../chop-icon/chop-icon';\n\ntype PanelStyle = 'default' | 'transcript';\n\n/**\n * The CHOPAccordionPanel component\n * @element chop-accordion-panel\n * @extends OutlineAccordionPanel\n *\n * @slot panel-heading: The title text for the panel component.\n * @slot panel-content: The main panel content, visible when the panel is open.\n *\n * @attr active: Whether the panel is active/open. Controlled by parent accordion component.\n * @attr id: Used to provide a unique ID for accordion component and accessibility purposes.\n */\n@customElement('chop-accordion-panel')\nexport class CHOPAccordionPanel extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n resizeController = new ResizeController(this);\n /**\n * Wether the panel is active/open.\n * Controlled by parent accordion component.\n */\n @property({ type: Boolean, reflect: true, attribute: true })\n active = false;\n\n /**\n * Used to provided a unique ID\n * for accordion component and accessibility purposes.\n */\n @property({ type: String, reflect: true })\n id: string = Math.floor(Math.random() * 10000).toString();\n\n /**\n * Style of the panel.\n */\n @property({ type: String, attribute: 'panel-style' })\n panelStyle: PanelStyle = 'default';\n\n connectedCallback(): void {\n super.connectedCallback();\n }\n\n render(): TemplateResult {\n const isMobile = this.resizeController.currentBreakpointRange <= 3;\n const screenSizes =\n this.resizeController.currentBreakpointRange <= 3 ? 'mobile' : 'desktop';\n const isActive = this.active ? 'active' : 'inactive';\n const panelStyle = this.panelStyle;\n\n const buttonClasses = {\n 'accordion-button': true,\n 'mobile': isMobile,\n 'active': this.active,\n [screenSizes]: true,\n [panelStyle]: true,\n };\n\n const iconClasses = {\n 'accordion-icon': true,\n 'mobile': isMobile,\n 'active': this.active,\n [panelStyle]: true,\n };\n\n return html`
\n
\n \n \n \n \n ${this.setIcon()} \n \n
\n \n \n
\n `;\n }\n\n setActive() {\n const parentWrapper = this.parentElement as CHOPAccordion;\n const singlePanel = parentWrapper.singlePanel;\n\n if (singlePanel) {\n const activePanels = [...parentWrapper.panels].filter(\n panel => panel.active == true\n );\n\n if (activePanels.length < 1) {\n this.active = true;\n }\n\n if (activePanels.length > 0) {\n activePanels.map(panel => {\n if (panel.id === this.id) {\n this.active = false;\n } else {\n panel.active = false;\n this.active = true;\n }\n });\n }\n } else {\n this.active = !this.active;\n }\n }\n\n passFocus() {\n const parentButton = this.querySelector(\n '.accordion-button'\n ) as HTMLButtonElement;\n if (parentButton) {\n parentButton.focus();\n }\n }\n\n setIcon() {\n let iconName;\n if (this.panelStyle === 'transcript') {\n iconName = this.active ? 'minus' : 'plus';\n } else {\n iconName = this.active ? 'chevron-up' : 'chevron-down';\n }\n\n return html``;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host {\n position:relative;\n display:block;\n height:0px;\n padding-bottom:calc(9 / 16 * 100%)\n}\n\niframe {\n position:absolute;\n top:0px;\n bottom:0px;\n left:0px;\n right:0px;\n display:block;\n height:100%;\n width:100%\n}\n`;","import { html, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { OutlineElement } from '@phase2/outline-core';\nimport componentStyles from './outline-video-youtube.css.lit';\n\nexport interface OutlineVideoYoutubeInterface extends HTMLElement {\n videoID: string;\n}\n\n/**\n * The Outline VideoYoutube component\n *\n * @element outline-video-youtube\n */\n@customElement('outline-video-youtube')\nexport class OutlineVideoYoutube\n extends OutlineElement\n implements OutlineVideoYoutubeInterface\n{\n static styles: CSSResultGroup = [componentStyles];\n\n @property({ type: String, attribute: 'video-id', reflect: true })\n videoID: string;\n\n render(): TemplateResult {\n return html`\n \n `;\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n 'outline-video-youtube': OutlineVideoYoutube;\n }\n}\n","import { CSSResultGroup, TemplateResult, html } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport { screenSizeMap } from '../../controllers/screen-size-controller';\nimport componentStyles from './chop-video-player.css.lit';\nimport { getYouTubeVideoId } from '../../../utilities/utils';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport '../chop-accordion/chop-accordion-wrapper/chop-accordion';\nimport '../chop-accordion/chop-accordion-panel/chop-accordion-panel';\nimport '../chop-heading/chop-heading';\nimport '../chop-icon/chop-icon';\nimport '../chop-styled-text/chop-styled-text';\nimport '@phase2/outline-video-youtube';\n\ntype VideoPlayerVariation = 'default' | 'hero' | 'location-hero';\n\n/**\n * The CHOP Video Player component\n * @element chop-video-player\n * @slot - The video player content.\n * @attr {boolean} playing - Turns off video auto play on load.\n * @attr {string} video-url - The video URL.\n * @attr {string} text-behavior - The behavior of text.\n * @attr {string} video-caption - The video caption.\n * @attr {string} variation - The video player variation.\n */\n@customElement('chop-video-player')\nexport class CHOPVideoPlayer extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n resizeController = new ResizeController(this, {\n breakpoints: [screenSizeMap.get('md') as number],\n containerQuery: false,\n });\n isMobile = this.resizeController.currentBreakpointRange === 0;\n\n /**\n * The video player variation.\n */\n @property({ type: String, attribute: 'variation' })\n variation: VideoPlayerVariation = 'default';\n\n /**\n * The ref to slotted video element.\n */\n videoContent: HTMLMediaElement;\n\n /**\n * The video URL.\n */\n @property({ type: String, attribute: 'video-url' })\n videoURL: string;\n\n /**\n * The behavior for text.\n */\n @property({ type: String, attribute: 'text-behavior' })\n textBehavior: string;\n\n /**\n * The video caption.\n */\n @property({ type: String, attribute: 'video-caption' })\n videoCaption: string;\n\n /**\n * Set the video player autoplay to off.\n */\n @property({ type: Boolean })\n playing = false;\n\n /**\n * Overlay.\n */\n @property({ type: Boolean, attribute: 'overlay' })\n overlay = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.jumpNavExclude();\n setTimeout(() => this.getVideo(), 300);\n }\n\n jumpNavExclude() {\n this.playing = this.variation === 'hero';\n const h2Elements = this.querySelectorAll('h2');\n h2Elements.forEach(h2 => h2.setAttribute('data', 'data-jump-nav-exclude'));\n }\n\n render(): TemplateResult {\n this.isMobile = this.resizeController.currentBreakpointRange === 0;\n return html`${this.videoURL\n ? html`\n
\n ${this.playerTemplate()} ${this.captionTemplate()}\n \n
\n `\n : null} `;\n }\n\n playerTemplate() {\n const classes = {\n 'chop-video--wrapper': true,\n [`variation--${this.variation}`]: true,\n 'small-button': this.variation !== 'default',\n };\n\n return html`\n ${!this.videoURL.includes('youtube')\n ? html`
\n \n ${this.variation === 'hero'\n ? html` `\n : html`\n \n `}\n ${this.overlay ? html`
` : ''}\n ${this.buttonTemplate()}\n
`\n : html`\n \n `}\n `;\n }\n\n buttonTemplate() {\n return html`\n ${!this.playing\n ? html`\n \n ${this.playIcon()}\n \n `\n : ''}\n ${this.playing && this.variation !== 'default'\n ? html`\n \n ${this.pauseIcon()}\n \n `\n : ''}\n `;\n }\n\n captionTemplate(): TemplateResult | null {\n const templates = {\n transcript: html`\n \n
\n \n

Transcript

\n
\n
\n
${unsafeHTML(this.videoCaption)}
\n
\n
`,\n caption: html`
\n ${unsafeHTML(this.videoCaption)}\n
`,\n };\n\n return this.videoCaption\n ? templates[this.textBehavior as keyof typeof templates] || null\n : null;\n }\n\n playIcon() {\n const iconSizeNotDefault = this.isMobile ? '5rem' : '3rem';\n return html` `;\n }\n\n pauseIcon() {\n const iconSizeNotDefault = this.isMobile ? '5rem' : '3rem';\n return html``;\n }\n\n playVideo() {\n const playIcon = this.renderRoot.querySelector('#play-icon') as HTMLElement;\n if (this.variation === 'default') {\n if (this.playing) {\n this.videoContent.pause();\n playIcon.classList.remove('hidden');\n } else {\n this.videoContent.play();\n playIcon.classList.add('hidden');\n }\n } else {\n this.videoContent.play();\n }\n return (this.playing = !this.playing);\n }\n\n pauseVideo() {\n this.videoContent.pause();\n return (this.playing = !this.playing);\n }\n\n getVideo() {\n const video = this.renderRoot.querySelector('video') as HTMLMediaElement;\n if (video === null || video === undefined) {\n // bail\n return;\n } else {\n this.videoContent = video;\n this.videoContent.controls = this.variation === 'default';\n this.videoContent.loop = this.variation !== 'location-hero';\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-video-player': CHOPVideoPlayer;\n }\n}\n","import tailwindConfig from '../resolved-tailwind-config';\n\nexport type SpacingTokens = keyof typeof tailwindConfig.spacing;\n\nexport const ALL_SPACING_TOKENS = Object.keys(\n tailwindConfig.spacing\n) as SpacingTokens[];\n\n/**\n * Turn a rem string like `4rem` into a px string like `64px`.\n * If css var() passes will return value or calculate px.\n * @param {string} remVal\n * @param {boolean} px\n */\nexport const extractPxCalc = (remVal: string, px = true): string => {\n const styles = getComputedStyle(document.documentElement);\n\n if (remVal.includes('var(--')) {\n const regex = /\\(([^)]*)\\)/;\n const match = regex.exec(remVal);\n\n if (match) {\n const cssVar = match[1];\n const cssVarValue = styles.getPropertyValue(cssVar);\n\n if (cssVarValue.includes('calc(1rem*') && px) {\n const value = cssVarValue.split('calc(1rem*');\n console.log(value); //eslint-disable-line\n const valueClean = value[1].slice(0, -1);\n return `${parseFloat(valueClean) * 16}px`;\n }\n return cssVarValue;\n } else {\n return '';\n }\n } else {\n const [num, unit] = remVal.split('rem');\n\n return unit === 'px' || unit === undefined\n ? remVal\n : `${parseFloat(num) * 16}px`;\n }\n};\n\n/**\n * Get the YouTube video ID from a URL.\n * @param {string} url - The YouTube video URL.\n * @returns {string | null} - The YouTube video ID.\n */\nexport const getYouTubeVideoId = (url: string): string | null => {\n // Regular expressions to match the various YouTube URL patterns\n // Adding a fix to support lookbehing asseritions `(?>=...)` in regex.\n // See CHOP-1927, since the solution will be avoiding lookbehind assertions.\n // Escaping periods will fix the issue.\n const patterns = [\n /(?:v=|v\\/|embed\\/|youtu\\.be\\/|user\\/\\w+\\/|watch\\?v=)([^#&?]*)/,\n /(?:youtu\\.be\\/|embed\\/|v\\/|v=|user\\/\\w+\\/|watch\\?v=)([^#&?]*)/,\n ];\n\n for (const pattern of patterns) {\n const match = url.match(pattern);\n if (match) {\n return match[1];\n }\n }\n\n return null;\n};\n","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement } from 'lit/decorators.js';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport { screenSizeMap } from '../../controllers/screen-size-controller';\nimport componentStyles from './chop-location-hero.css.lit';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport '../chop-container/chop-container';\nimport '../chop-woven-svgs/chop-woven-svgs';\nimport '../chop-icon/chop-icon';\nimport '../chop-cta-link/chop-cta-link';\nimport '../chop-video-player/chop-video-player';\n\n/**\n * @extends OutlineElement\n * @element chop-location-hero\n *\n * @slot image\n * @slot breadcrumb\n * @slot video\n * @slot eyebrow\n * @slot heading\n * @slot phone-number - The phone number to display and includes static icon\n * @slot secondary-phone-number - The phone number to display and includes static icon\n * @slot emergency-text - The emergency text to display and includes static icon\n * @slot location-label - The location label to display and includes static icon\n * @slot apoointment-text - The appointment text to display and includes static icon\n * @slot button - The button to display\n * @slot cta - The cta to display\n */\n\n@customElement('chop-location-hero')\nexport class CHOPLocationHero extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n resizeController = new ResizeController(this, {\n breakpoints: [screenSizeMap.get('lg') as number],\n containerQuery: false,\n });\n isMobile = this.resizeController.currentBreakpointRange === 0;\n\n render(): TemplateResult {\n this.isMobile = this.resizeController.currentBreakpointRange === 0;\n\n const svgName = this.isMobile\n ? `mobile_bottom_beige_location_card`\n : `desktop_left_beige_location_card`;\n\n return html` \n ${this.slotTemplate('breadcrumb')}\n
\n ${!this.isMobile ? this.wovenSVGTemplate(svgName) : ''}\n ${this.isMobile ? this.mediaTemplate() : ''}\n
\n ${this.isMobile ? this.wovenSVGTemplate(svgName) : ''}\n ${this.slotTemplate('eyebrow')} ${this.slotTemplate('heading')}\n ${this.locationsTemplate()} ${this.emergencyTemplate()}\n ${this.slotTemplate('button')} ${this.slotTemplate('cta')}\n
\n ${!this.isMobile ? this.mediaTemplate() : ''}\n
\n `;\n }\n\n mediaTemplate() {\n return html`\n ${this.slots.exist('video')\n ? html`\n ${this.isMobile\n ? html`\n
\n ${this.slots.conditionalSlot('image')}\n
\n `\n : html`\n
\n ${this.slots.conditionalSlot('video', false)}\n
\n `}\n `\n : html`\n
\n ${this.slots.conditionalSlot('image')}\n
\n `}\n `;\n }\n\n slotTemplate(name = '') {\n if (!this.slots.exist(name)) {\n return nothing;\n } else {\n return html`
\n \n
`;\n }\n }\n\n locationsTemplate() {\n return html`\n
\n ${this.slots.exist('phone-number')\n ? html`\n
\n ${this.iconTemplate('phone-filled')}\n \n
\n `\n : nothing}\n ${this.slots.exist('secondary-phone-number')\n ? html`\n
\n ${this.iconTemplate('phone-filled')}\n \n
\n `\n : nothing}\n ${this.slots.exist('location-label')\n ? html`
\n ${this.iconTemplate('location-filled')}\n \n
`\n : nothing}\n ${this.slots.exist('appointment-text')\n ? html`
\n ${this.iconTemplate('logo-filled')}\n \n
`\n : nothing}\n
\n `;\n }\n\n emergencyTemplate() {\n return this.slots.exist('emergency-text')\n ? html`\n
\n
\n ${this.iconTemplate('asterisk-filled')}\n \n
\n
\n `\n : nothing;\n }\n\n iconTemplate(iconName: string) {\n return html`\n \n \n `;\n }\n\n wovenSVGTemplate(svgName: string) {\n return html`\n
\n \n
\n `;\n }\n\n attachBreadcrumb(element: Node, slotName: string) {\n this.appendChild(element as HTMLElement);\n if ((element as HTMLElement).setAttribute) {\n (element as HTMLElement).setAttribute('slot', slotName);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-location-hero': CHOPLocationHero;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n@media (min-width: 1100px){:host{\n max-height:689px;\n overflow:hidden\n}\n }\n\n.image-hero-wrapper{\n display:flex;\n flex-direction:column;\n height:100%;\n}\n\n@media (min-width: 668px){\n\n.image-hero-wrapper{\n min-height:var(--spacing-64)\n}\n }\n\n@media (min-width: 1100px){\n\n.image-hero-wrapper{\n flex-direction:row-reverse\n}\n }\n\n.absolute-wrapper{\n position:relative;\n width:100%;\n height:100%;\n display:flex;\n align-items:center;\n}\n\n@media (min-width: 1100px){\n\n.absolute-wrapper{\n position:absolute\n}\n }\n\n.content-wrapper{\n margin:0 auto;\n width:100%;\n max-width:var(--max-w-medium);\n}\n\n@media (min-width: 860px){\n\n.content-wrapper{\n width:var(--w-percent-medium)\n}\n }\n\n@media (min-width: 1100px){\n .overlaps .content-wrapper{\n padding-bottom:5rem;\n }\n}\n\n.image-wrapper{\n position:relative;\n width:100%;\n}\n\n@media (min-width: 1100px){\n\n.image-wrapper{\n display:flex\n}\n }\n\n.image-wrapper > .image{\n width:100%;\n}\n\n@media (min-width: 1100px){\n\n.image-wrapper > .image{\n padding-left:34%\n}\n }\n\n@media only screen and (min-width: 2000px){\n\n.image-wrapper > .image{\n padding-left:38%\n}\n }\n\n[cloned-slot-name='image']{\n height:100%;\n}\n\n@media (min-width: 1100px){\n\n[cloned-slot-name='image']{\n min-height:689px\n}\n [cloned-slot-name='image'] img,\n [cloned-slot-name='image'] picture{\n object-fit:cover;\n }\n }\n\n[cloned-slot-name='image'] img,\n [cloned-slot-name='image'] div:not(.contextual){\n width:100%;\n height:100%;\n max-height:689px;\n }\n\n@media (min-width: 3000px){\n\n[cloned-slot-name='image'] img,\n [cloned-slot-name='image'] div:not(.contextual){\n max-height:760px\n }\n }\n\n[cloned-slot-name='image'] .contextual{\n display:none;\n }\n\n.info-wrapper{\n display:flex;\n flex-direction:column;\n justify-content:center;\n padding:var(--spacing-04);\n gap:var(--spacing-08);\n z-index:3;\n position:relative;\n}\n\n@media (min-width: 1100px){\n\n.info-wrapper{\n width:30%;\n gap:var(--spacing-06)\n}\n }\n\n@media (min-width: 1296px){\n\n.info-wrapper{\n padding:var(--spacing-04) 0\n}\n }\n\n.body{\n font-family:var(--ff-serif);\n font-size:var(--fs-xl);\n line-height:var(--lh-xl);\n}\n\n.contact-wrapper{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-08);\n color:inherit;\n}\n\n@media (min-width: 1100px){\n\n.contact-wrapper{\n min-width:410px\n}\n }\n\n.contact-wrapper .contact-content{\n display:flex;\n align-items:center;\n gap:var(--spacing-04);\n }\n\n.contact-wrapper .icon-wrapper{\n color:var(--color-green-500);\n }\n\n.contact-wrapper .contact-body{\n font-family:var(--ff-serif);\n font-size:var(--fs-lg);\n line-height:var(--lh-xl);\n }\n\n.contact-wrapper .contact-phone{\n font-family:var(--ff-display);\n font-size:var(--fs-xl);\n }\n\n.woven-svg-wrapper{\n z-index:1;\n}\n\n.image-hero-wrapper.mobile .info-wrapper{\n position:relative;\n }\n\n.image-hero-wrapper.mobile .woven-svg-wrapper{\n position:absolute;\n height:85px;\n bottom:100%;\n width:100%;\n left:0;\n min-height:auto;\n }\n`;","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport { screenSizeMap } from '../../controllers/screen-size-controller';\nimport componentStyles from './chop-image-hero.css.lit';\nimport '../chop-container/chop-container';\nimport '../chop-woven-svgs/chop-woven-svgs';\nimport '../chop-icon/chop-icon';\nimport '../chop-cta-link/chop-cta-link';\nimport '../chop-breadcrumb/chop-breadcrumb';\nimport { isInType } from '../../../utilities/isInType';\n\nexport enum imageHeroColors {\n 'Dark Blue' = 'dark_blue',\n 'Bright Blue' = 'bright_blue',\n 'Light Blue' = 'light_blue',\n 'Light Green' = 'light_green',\n 'Beige' = 'light_beige',\n 'Dark Pink' = 'dark_pink',\n 'Light Pink' = 'light_pink',\n}\n\nexport type ImageHeroColor = `${imageHeroColors}`;\n\n// maps the component BG color desired colors in wovenSVG\nenum wovenSVGColorMap {\n 'bright_blue' = 'blue',\n 'dark_blue' = 'darkest_blue',\n 'light_blue' = 'lightest_blue-reverse',\n 'light_green' = 'lightest_green-reverse',\n 'light_beige' = 'lighter_beige',\n 'dark_pink' = 'darker_pink-reverse',\n 'light_pink' = 'lightest_pink-reverse',\n}\n\nenum mobileWovenSVGColorMap {\n 'bright_blue' = 'blue',\n 'dark_blue' = 'darkest_blue',\n 'light_blue' = 'lightest_blue-reverse',\n 'light_green' = 'lightest_green-reverse',\n 'light_beige' = 'lightest_beige',\n 'dark_pink' = 'darker_pink',\n 'light_pink' = 'lightest_pink-reverse',\n}\n\n/**\n * The Image Hero component\n * @element chop-image-hero\n * @slot breadcrumb\n * @slot image\n * @slot heading\n * @slot body\n * @slot cta-link-1\n * @slot cta-link-2\n */\n@customElement('chop-image-hero')\nexport class CHOPImageHero extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n resizeController = new ResizeController(this, {\n breakpoints: [\n screenSizeMap.get('lg') as number,\n screenSizeMap.get('xxl') as number,\n ],\n containerQuery: false,\n });\n isMobile = this.resizeController.currentBreakpointRange === 0;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'theme-color',\n converter: value => {\n return isInType(value, Object.values(imageHeroColors), 'ImageHeroColor')\n ? value\n : 'dark_pink';\n },\n })\n themeColor: ImageHeroColor;\n\n @property({ type: Boolean, attribute: 'hero-overlaps' })\n heroOverlaps = false;\n\n render(): TemplateResult {\n this.isMobile = this.resizeController.currentBreakpointRange === 0;\n const classes = {\n 'image-hero-wrapper': true,\n 'mobile': this.isMobile,\n 'overlaps': this.heroOverlaps,\n };\n\n return html` \n ${this.slotTemplate('breadcrumb')}\n
\n
${this.slots.conditionalSlot('image')}
\n
\n ${this.isMobile ? '' : this.wovenSVGTemplate()}\n
\n
\n ${this.isMobile ? this.wovenSVGTemplate() : ''}\n ${this.slots.conditionalSlot('heading', false)}\n ${this.slots.conditionalSlot('body', false)}\n ${this.contactTemplate('contact-body-1', 'contact-phone-1')}\n ${this.contactTemplate('contact-body-2', 'contact-phone-2')}\n ${this.slotTemplate('cta-link-1')}\n ${this.slotTemplate('cta-link-2')}\n
\n
\n
\n
\n `;\n }\n\n slotTemplate(name = '') {\n if (!this.slots.exist(name)) {\n return nothing;\n } else {\n return html` `;\n }\n }\n\n wovenSVGTemplate() {\n const svgName = this.isMobile ? `mobile_left` : `desktop_left`;\n let variant = this.isMobile ? 'story' : 'block';\n variant =\n this.resizeController.currentBreakpointRange == 2\n ? 'block_wide'\n : variant;\n const color = this.isMobile\n ? mobileWovenSVGColorMap[this.themeColor]\n : wovenSVGColorMap[this.themeColor];\n return html`\n
\n \n
\n `;\n }\n\n contactTemplate(bodySlot: string, phoneSlot: string) {\n if (this.slots.exist(bodySlot) && this.slots.exist(phoneSlot)) {\n return html`\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n \n `;\n } else {\n return nothing;\n }\n }\n\n attachBreadcrumb(element: Node, slotName: string) {\n this.appendChild(element as HTMLElement);\n if ((element as HTMLElement).setAttribute) {\n (element as HTMLElement).setAttribute('slot', slotName);\n }\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\nchop-cta-link{\n --chop-cta-link--family--computed:var(--chop-cta-link--family, var(--ff-body));\n --chop-cta-link--weight--computed:var(--fw-bold);\n --chop-cta-link--padding-small--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);\n --chop-cta-link--padding-small-hover--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);\n --chop-cta-link--padding-default--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);\n --chop-cta-link--padding-default-hover--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);\n --chop-cta-link--padding-large--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);\n --chop-cta-link--padding-large-hover--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);\n --chop-cta-link--primary-bg-color--computed:var(--color-blue-700);\n --chop-cta-link--primary-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring--computed:var(--chop-cta-link--primary-ring, none);\n --chop-cta-link--primary-bg-color-hover--computed:var(--color-neutral-100);\n --chop-cta-linknknk--primary-color-hover--computed:var(\n --chop-cta-link--primary-color-hover,\n var(--color-blue-600)\n);\n --chop-cta-link--primary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring-hover--computed:var(--color-blue-700);\n --chop-cta-link--primary-bg-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--primary-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--primary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--primary-disabled-bg-color--computed:var(--color-neutral-400);\n --chop-cta-link--primary-disabled-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-disabled-ring--computed:var(--outline-transparent);\n --chop-cta-link--primary-reversed-bg-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-color--computed:var(--color-blue-700);\n --chop-cta-link--primary-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring--computed:var(\n --chop-cta-link--primary-reversed-ring,\n none\n);\n --chop-cta-link--primary-reversed-bg-color-hover--computed:var(\n --bg-color--transparent\n);\n --chop-cta-link--primary-reversed-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring-hover--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-bg-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--primary-reversed-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--primary-reversed-disabled-bg-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--primary-reversed-disabled-color--computed:var(\n --color-neutral-500\n);\n --chop-cta-link--primary-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-bg-color--computed:var(--color-neutral-100);\n --chop-cta-link--outline-color--computed:var(--color-blue-700);\n --chop-cta-link--outline-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring--computed:var(--color-blue-700);\n --chop-cta-link--outline-bg-color-hover--computed:var(--color-blue-700);\n --chop-cta-link--outline-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--outline-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring-hover--computed:var(--color-blue-700);\n --chop-cta-link--outline-bg-color-focus--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--outline-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--outline-disabled-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--outline-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-color--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-bg-color-hover--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-color-hover--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring-hover--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-bg-color-focus--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-color-focus--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring-focus--computed:var(\n --color-blue-500\n);\n --chop-cta-link--outline-reversed-disabled-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--outline-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--secondary-bg-color--computed:var(--color-pink-800);\n --chop-cta-link--secondary-color--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring--computed:var(\n --chop-cta-link--secondary-ring,\n none\n);\n --chop-cta-link--secondary-bg-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-color-hover--computed:var(\n --chop-cta-link--secondary-color-hover,\n var(--color-pink-800)\n);\n --chop-cta-link--secondary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring-hover--computed:var(--color-pink-800);\n --chop-cta-link--secondary-bg-color-focus--computed:var(--color-pink-800);\n --chop-cta-link--secondary-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring-focus--computed:var(--color-pink-800);\n --chop-cta-link--secondary-disabled-bg-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--secondary-disabled-color--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-disabled-ring--computed:var(--outline-transparent);\n --chop-cta-link--link-bg-color--computed:var(--outline-transparent);\n --chop-cta-link--link-color--computed:var(--color-blue-700);\n --chop-cta-link--link-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-ring--computed:var(--color-blue-700);\n --chop-cta-link--link-color-hover--computed:var(--color-blue-800);\n --chop-cta-link--link-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--link-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-disabled-color--computed:var(--color-neutral-400);\n --chop-cta-link--link-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color--computed:var(--color-neutral-100);\n --chop-cta-link--link-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color-hover--computed:var(--color-blue-700);\n --chop-cta-link--link-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--link-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--link-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n}\n chop-cta-link .btn{\n display:flex;\n width:fit-content;\n flex-wrap:nowrap;\n align-items:center;\n cursor:pointer;\n transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration:300ms;\n text-decoration-line:none;\n outline:none;\n border:none;\n border-radius:0.5rem;\n line-height:1.5;\n background:transparent;\n\n font-family:var(--chop-cta-link--family--computed);\n font-weight:var(--chop-cta-link--weight--computed);\n padding:var(--chop-cta-link--padding-default--computed);\n}\n chop-cta-link .btn[aria-disabled='true']{\n pointer-events:none;\n cursor:not-allowed;\n user-select:none;\n}\n chop-cta-link .btn.small{\n font-size:var(--fs-sm);\n line-height:var(--lh-base);\n padding:var(--chop-cta-link--padding-small--computed);\n}\n chop-cta-link .btn.small.no-icon{\n padding:var(--spacing-02) var(--spacing-4);\n }\n chop-cta-link .btn.medium,\nchop-cta-link .btn.default{\n font-size:var(--fs-base);\n line-height:var(--lh-md);\n}\n chop-cta-link .btn.medium.no-icon, chop-cta-link .btn.default.no-icon{\n padding:var(--spacing-02) var(--spacing-6);\n }\n chop-cta-link .btn.large{\n font-size:var(--fs-lg);\n line-height:var(--lh-sm);\n padding:var(--chop-cta-link--padding-large--computed);\n}\n chop-cta-link .btn.large.no-icon{\n padding:var(--spacing-03) var(--spacing-8);\n }\n chop-cta-link .btn.primary{\n background-color:var(--chop-cta-link--primary-bg-color--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight--computed);\n border:2px solid var(--chop-cta-link--primary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring--computed);\n}\n chop-cta-link .btn.primary:hover,\n chop-cta-link .btn.primary:active{\n background-color:var(--chop-cta-link--primary-color--computed);\n color:var(--chop-cta-link--primary-bg-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring-hover--computed);\n }\n chop-cta-link .btn.primary:focus{\n background-color:var(--chop-cta-link--primary-bg-color-focus--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\n chop-cta-link .btn.primary[aria-disabled='true']{\n background-color:var(--chop-cta-link--primary-disabled-bg-color--computed);\n color:var(--chop-cta-link--primary-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-disabled-ring--computed);\n}\n chop-cta-link .btn.primary.reversed{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n}\n chop-cta-link .btn.primary.reversed:hover,\n chop-cta-link .btn.primary.reversed:active{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n }\n chop-cta-link .btn.primary.reversed:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\n chop-cta-link .btn.primary.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\n chop-cta-link .btn.outline{\n background-color:var(--chop-cta-link--outline-bg-color--computed);\n color:var(--chop-cta-link--outline-color--computed);\n font-weight:var(--chop-cta-link--outline-weight--computed);\n border:2px solid var(--chop-cta-link--outline-ring--computed);\n box-shadow:var(--chop-cta-link--outline-ring--computed);\n}\n chop-cta-link .btn.outline:hover{\n background-color:var(--chop-cta-link--outline-bg-color-hover--computed);\n color:var(--chop-cta-link--outline-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-ring-hover--computed);\n }\n chop-cta-link .btn.outline:focus{\n background-color:var(--chop-cta-link--outline-bg-color-focus--computed);\n color:var(--chop-cta-link--outline-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-ring-focus--computed);\n outline-offset:2px;\n }\n chop-cta-link .btn.outline[aria-disabled='true']{\n background-color:var(--chop-cta-link--outline-disabled-bg-color--computed);\n color:var(--chop-cta-link--outline-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-disabled-ring--computed);\n}\n chop-cta-link .btn.outline.reversed{\n background-color:var(--chop-cta-link--outline-reversed-bg-color--computed);\n color:var(--chop-cta-link--outline-reversed-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-ring--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring--computed);\n}\n chop-cta-link .btn.outline.reversed:hover,\n chop-cta-link .btn.outline.reversed:active{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-hover--computed);\n }\n chop-cta-link .btn.outline.reversed:focus{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-focus--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-reversed-ring-focus--computed);\n }\n chop-cta-link .btn.outline.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--outline-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--outline-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-disabled-ring--computed);\n}\n chop-cta-link .btn.outline-transparent{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n}\n chop-cta-link .btn.outline-transparent:hover,\n chop-cta-link .btn.outline-transparent:active{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n }\n chop-cta-link .btn.outline-transparent:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n }\n chop-cta-link .btn.outline-transparent[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\n chop-cta-link .btn.secondary{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n color:var(--chop-cta-link--secondary-color--computed);\n font-weight:var(--chop-cta-link--secondary-weight--computed);\n border:2px solid var(--chop-cta-link--secondary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring--computed);\n}\n chop-cta-link .btn.secondary:hover{\n background-color:var(--chop-cta-link--secondary-bg-color-hover--computed);\n color:var(--chop-cta-link--secondary-color-hover--computed);\n font-weight:var(--chop-cta-link--secondary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-hover--computed);\n }\n chop-cta-link .btn.secondary:focus{\n background-color:var(--chop-cta-link--secondary-bg-color-focus--computed);\n color:var(--chop-cta-link--secondary-color-focus--computed);\n font-weight:var(--chop-cta-link--secondary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--secondary-ring-focus--computed);\n outline-offset:2px;\n }\n chop-cta-link .btn.secondary:active{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n }\n chop-cta-link .btn.secondary[aria-disabled='true']{\n background-color:var(--chop-cta-link--secondary-disabled-bg-color--computed);\n color:var(--chop-cta-link--secondary-disabled-color--computed);\n font-weight:var(--chop-cta-link--secondary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--secondary-disabled-ring--computed);\n}\n chop-cta-link .btn.link{\n position:relative;\n padding:0;\n color:var(--chop-cta-link--link-color--computed);\n font-weight:var(--fw-semibold);\n border-radius:0.5rem;\n text-decoration:none;\n background:transparent;\n}\n chop-cta-link .btn.link::after{\n content:'';\n display:none;\n position:absolute;\n bottom:0;\n left:0;\n right:0;\n margin-left:auto;\n margin-right:auto;\n border:1px solid var(--chop-cta-link--link-color--computed);\n }\n chop-cta-link .btn.link .chevron-icon{\n transition:0.3s ease-in-out;\n }\n chop-cta-link .btn.link:hover{\n color:var(--chop-cta-link--link-color-hover--computed);\n }\n chop-cta-link .btn.link:hover::after{\n display:block;\n }\n chop-cta-link .btn.link:hover > .chevron-icon{\n transform:translateX(8px);\n }\n chop-cta-link .btn.link:focus{\n color:var(--chop-cta-link--link-color-focus--computed);\n font-weight:var(--chop-cta-link--link-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-ring--computed);\n }\n chop-cta-link .btn.link[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\n chop-cta-link .btn.link.reversed{\n background-color:transparent;\n color:var(--chop-cta-link--link-reversed-color--computed);\n}\n chop-cta-link .btn.link.reversed::after{\n border:1px solid var(--chop-cta-link--link-reversed-color--computed);\n }\n chop-cta-link .btn.link.reversed:hover::after{\n display:block;\n }\n chop-cta-link .btn.link.reversed:focus{\n color:var(--chop-cta-link--link-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--link-reversed-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-reversed-color--computed);\n }\n chop-cta-link .btn.link.no-hover::after{\n display:none !important;\n }\n chop-cta-link .btn.link.reversed[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\n chop-cta-link .btn.full-width{\n display:flex;\n width:100%;\n justify-content:space-between;\n}\n chop-cta-link .heart-icon{\n margin-right:var(--spacing-01);\n}\n chop-cta-link .external-icon{\n margin-left:var(--spacing-01);\n}\n chop-cta-link .chevron-icon{\n margin-left:auto;\n}\n @media print{\n chop-cta-link .btn.link.reversed{\n color:currentColor;\n background:transparent;\n }\n}\n.ways-to-give-hero-wrapper{\n position:relative;\n background-color:var(--color-pink-900);\n color:var(--color-neutral-100);\n}\n.content-wrapper{\n position:relative;\n z-index:2;\n display:flex;\n flex-direction:row;\n gap:var(--spacing-12);\n margin:120px 0;\n}\n.background-wrapper{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-10);\n margin-top:var(--spacing-08);\n}\n.frequency-wrapper{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:var(--spacing-03);\n}\n.frequency-wrapper .btn.option{\n cursor:pointer;\n flex-grow:1;\n }\n.description-wrapper{\n gap:var(--spacing-03);\n padding-right:var(--spacing-10);\n display:grid;\n grid-template-columns:0.1fr 1fr;\n grid-template-areas:'icon heading' 'description description';\n height:fit-content;\n}\n.header-description__wrapper{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-08);\n}\n.giving-wrapper{\n display:flex;\n flex-direction:column;\n}\n.designation-option,\n.amount-options-wrapper{\n display:flex;\n flex-direction:row;\n gap:var(--spacing-03);\n}\n.amount-option{\n display:flex;\n flex-direction:row;\n}\n.amount-option .option-input,\n .amount-option .btn.option{\n box-sizing:border-box;\n width:80px;\n padding:var(--spacing-03) 0;\n }\n.amount-option .btn.option{\n cursor:pointer;\n }\n.amount-option .option-input-wrapper{\n position:relative;\n }\n.amount-option .option-input.pill{\n padding-left:var(--spacing-04);\n border-radius:0 4px 4px 0;\n }\n.amount-option .btn.option.pill{\n border-radius:4px 0 0 4px;\n }\n.amount-option .option-input-wrapper::before{\n content:'$';\n position:absolute;\n top:0;\n left:0;\n height:100%;\n width:20px;\n justify-content:center;\n display:flex;\n align-items:center;\n color:#544334;\n color:var(--color-brown-900, #544334);\n font-size:var(--fs-lg);\n font-family:var(--ff-display);\n}\n.option-label{\n margin-bottom:var(--spacing-05);\n}\n.option-input,\n.btn.option{\n background:#fff;\n background:var(--color-neutral-100, #fff);\n color:#544334;\n color:var(--color-brown-900, #544334);\n font-family:var(--ff-display);\n font-size:var(--fs-lg);\n font-weight:var(--fw-medium);\n line-height:var(--line-height-xl);\n border:2px solid #fff;\n border:2px solid var(--color-neutral-100, #fff);\n border-radius:4px;\n flex-grow:1;\n padding:var(--spacing-03);\n}\n.btn.option:disabled{\n background:#e8dfd9;\n background:var(--color-brown-400, #e8dfd9);\n opacity:1;\n}\n.btn.option.selected,\n.btn.option:hover{\n background:transparent;\n color:#fff;\n color:var(--color-neutral-100, #fff);\n}\n.option-input-wrapper,\n.option-label{\n display:inline-block;\n font-family:var(--ff-display);\n font-size:var(--fs-2xl);\n font-weight:var(--fw-normal);\n line-height:var(--line-height-sm);\n}\n.woven-svg-wrapper{\n z-index:2;\n}\n.heading,\n.description{\n position:relative;\n z-index:2;\n}\n.heading{\n grid-area:heading;\n height:fit-content;\n}\n.description{\n grid-area:description;\n}\n.video{\n position:absolute;\n width:100%;\n height:100%;\n max-height:none;\n overflow:hidden;\n z-index:1;\n left:0;\n bottom:0;\n}\nchop-icon{\n display:flex;\n grid-area:icon;\n height:fit-content;\n}\n.variant-video .background-wrapper{\n margin-top:var(--spacing-04);\n border-radius:6px;\n background-color:var(--color-pink-900);\n padding:var(--spacing-04) var(--spacing-08) var(--spacing-08) var(--spacing-08);\n }\n.variant-video .frequency-wrapper .btn.option{\n background-color:#fff;\n background-color:var(--color-neutral-100, #fff);\n border-color:#fff;\n border-color:var(--color-neutral-100, #fff);\n color:var(--color-pink-900);\n }\n.variant-video .frequency-wrapper .btn.option.selected{\n background-color:var(--color-pink-900);\n border-color:var(--color-pink-900);\n color:#fff;\n color:var(--color-neutral-100, #fff);\n }\n.mobile .content-wrapper{\n flex-direction:column;\n margin:var(--spacing-08) 0;\n padding:0;\n }\n.mobile .content-wrapper .woven-svg-wrapper{\n position:absolute;\n bottom:calc(100% - 1px);\n left:0;\n height:100%;\n max-height:85px;\n width:100%;\n }\n.mobile .content-wrapper .designation-option{\n flex-direction:column;\n }\n.mobile .description-wrapper{\n padding-right:0;\n display:grid;\n grid-template-columns:0.1fr 1fr;\n grid-template-areas:'icon heading' 'description description';\n }\n.mobile.video{\n position:relative;\n width:auto;\n grid-column:span 12 / span 12;\n margin:0 -1rem;\n top:0;\n }\n.mobile.variant-video .content-wrapper{\n margin-top:var(--spacing-05);\n }\n.mobile.variant-video .background-wrapper{\n padding:0;\n }\n.mobile.variant-video .frequency-wrapper .btn.option.selected{\n border-color:#fff;\n border-color:var(--color-neutral-100, #fff);\n }\n.mobile .amount-options-wrapper, .narrow .amount-options-wrapper{\n display:grid;\n grid-template-columns:1fr 1fr;\n }\n.mobile .amount-option:last-child, .narrow .amount-option:last-child{\n grid-column:1 / span 2;\n display:grid;\n grid-template-columns:1fr 1fr;\n }\n.mobile .designation-option, .narrow .designation-option{\n flex-direction:column;\n }\n.mobile .amount-option .option-input.pill,\n .mobile .amount-option .btn.option.pill,\n .narrow .amount-option .option-input.pill,\n .narrow .amount-option .btn.option.pill{\n width:100%;\n }\n.mobile .designation-option .btn, .narrow .designation-option .btn{\n width:auto;\n justify-content:center;\n }\n.narrow.ways-to-give-hero-wrapper{\n display:flex;\n }\n.narrow .content-wrapper{\n padding:120px 32px;\n background:none;\n }\n.narrow .description-wrapper{\n grid-template-areas:'icon icon' 'heading heading' 'description description';\n }\n`;","import { OutlineElement } from '@phase2/outline-core';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html, TemplateResult, CSSResultGroup, nothing } from 'lit';\nimport { VerticalAlignment } from '@phase2/outline-core/src/utils/types';\nimport { customElement, property } from 'lit/decorators.js';\nimport componentStyles from './chop-grid.css.lit';\nimport { isInType } from '../../../utilities/isInType';\nimport '../chop-woven-svgs/chop-woven-svgs';\n\nexport enum contentAlign {\n '3-9 Column' = '3-9',\n '9-3 Column' = '9-3',\n '12 Column' = '12',\n}\nexport type ContentAlign = `${contentAlign}`;\n\nexport enum gridBackgroundColors {\n 'White' = 'white',\n 'Blue' = 'blue',\n 'Lightest Blue' = 'lightest_blue',\n 'Light Blue' = 'light_blue',\n 'Dark Blue' = 'dark_blue',\n 'Lightest Green' = 'lightest_green',\n 'Light Green' = 'light_green',\n 'Dark Green' = 'dark_green',\n 'Light Beige' = 'light_beige',\n 'Beige' = 'beige',\n 'Dark Pink' = 'dark_pink',\n 'Transparent' = 'transparent',\n}\n\nexport type GridBackgroundColor = `${gridBackgroundColors}`;\n\nexport enum gridBackgroundSvgOptions {\n 'Light Blue' = 'light_blue',\n 'Light Beige' = 'light_beige',\n 'Wave' = 'wave',\n 'None' = 'none',\n}\n\nexport type GridBackgroundSvg = `${gridBackgroundSvgOptions}`;\n\n/**\n * The Grid component\n * @slot - The default, and only slot for this element.\n */\n@customElement('chop-grid')\nexport class CHOPGrid extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n /**\n * The background-color.\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'background-color',\n converter: value => {\n return isInType(\n value,\n Object.values(gridBackgroundColors),\n 'GridBackgroundColor'\n )\n ? value\n : 'transparent';\n },\n })\n backgroundColor: GridBackgroundColor;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'background-svg',\n converter: value => {\n if (value === undefined || value === '') {\n return 'none'; // Default value when not set\n }\n const isValid = isInType(\n value,\n Object.values(gridBackgroundSvgOptions),\n 'GridBackgroundSvg'\n );\n if (!isValid) {\n console.warn(\n `Warning: \"${value}\" is not a valid GridBackgroundSvg. Allowed values are 'light_blue', 'light_beige', 'wave' or 'none'.`\n );\n }\n return value;\n },\n })\n backgroundSVG: GridBackgroundSvg;\n\n /**\n * Whether or not this is a full bleed container.\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'content-max-width',\n })\n contentMaxWidth: 'small' | 'medium' | 'none' | 'limit' = 'medium';\n\n /**\n * The vertical placement of content inside of the column.\n */\n @property({ type: String, reflect: true, attribute: 'vertical-align' })\n verticalAlign: VerticalAlignment = 'top';\n\n /**\n * How much of a gap should exist between columns? (This affects both the vertical and horizontal column/row gaps.)\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'gap-size',\n })\n gapSize: 'small' | 'medium' | 'extra-small' | 'none' = 'small';\n\n /**\n * Whether or not this container has top/bottom padding.\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'y-padding',\n })\n yPadding: 'small' | 'medium' | 'large' | 'none';\n\n /**\n * Whether or not this container has top/bottom padding.\n */\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'x-padding',\n })\n xPadding: boolean;\n\n render(): TemplateResult {\n const gridClasses = {\n [`background-color-${this.backgroundColor}`]: true,\n [`background-svg-${this.backgroundSVG}`]: true,\n 'grid-wrapper': true,\n [`gap-${this.gapSize}`]: true,\n [`max-w-${this.contentMaxWidth}`]: true,\n [`y-padding-${this.yPadding}`]: true,\n [`vertical-align-${this.verticalAlign}`]: true,\n };\n\n return html`\n
\n ${this.backgroundSVGTemplate()}\n \n
\n `;\n }\n\n backgroundSVGTemplate() {\n switch (this.backgroundSVG) {\n case 'light_blue':\n return html`\n \n `;\n case 'light_beige':\n return html`\n \n `;\n case 'wave':\n return html`\n \n `;\n default:\n return nothing;\n }\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:block;\n position:relative;\n width:100%;\n box-sizing:border-box;\n\n --grid-wrapper-display:grid;\n\n --gap-xs:1rem;\n --gap-sm:2rem;\n --gap-md:4rem;\n\n --padding-x:1rem;\n\n --padding-y-xs:clamp(\n 1rem,\n 1.2857142857142858rem + 1.4285714285714286vw,\n 2rem\n );\n\n --padding-y-sm:clamp(\n 2rem,\n 1.4285714285714286rem + 2.857142857142857vw,\n 4rem\n );\n\n --padding-y-md:clamp(3rem, 2.142857142857143rem + 4.285714285714286vw, 6rem);\n\n --padding-y-lg:clamp(\n 4rem,\n 2.5714285714285716rem + 7.142857142857142vw,\n 9rem\n );\n}\n\n :host .grid-wrapper{\n margin:0 auto;\n display:var(--grid-wrapper-display);\n grid-template-columns:repeat(12, minmax(0, 1fr));\n }\n\n:host([background-color='transparent']){\n background-color:transparent;\n}\n\n:host([background-color='white']){\n background-color:var(--brand-gray-100);\n}\n\n:host([background-color='lightest_blue']){\n background-color:var(--color-blue-100);\n color:var(--color-brown-900);\n}\n\n:host([background-color='light_blue']){\n background-color:var(--color-blue-600);\n color:var(--color-neutral-100);\n}\n\n:host([background-color='blue-800']){\n background-color:var(--color-blue-800);\n color:var(--color-neutral-100);\n}\n\n:host([background-color='blue']){\n background-color:var(--brand-primary-dark-blue);\n color:var(--brand-gray-100);\n}\n\n:host([background-color='dark_blue']){\n background-color:var(--color-blue-900);\n color:var(--color-neutral-100);\n}\n\n:host([background-color='dark_pink']){\n background-color:var(--color-pink-900);\n color:var(--color-neutral-100);\n}\n\n:host([background-color='lightest_green']){\n background-color:var(--color-green-100);\n color:var(--color-brown-900);\n}\n\n:host([background-color='light_green']){\n background-color:var(--color-green-300);\n color:var(--color-brown-900);\n}\n\n:host([background-color='dark_green']){\n background-color:var(--color-green-900);\n color:var(--color-neutral-100);\n}\n\n:host([background-color='light_beige']){\n background-color:var(--color-brown-100);\n color:var(--color-brown-900);\n}\n\n:host([background-color='beige']){\n background-color:var(--color-brown-200);\n color:var(--color-brown-900);\n}\n\n:host([x-padding]){\n padding-left:var(--padding-x);\n padding-right:var(--padding-x);\n}\n\n:host([overlap]){\n padding-bottom:8rem;\n}\n\n.max-w-small{\n max-width:var(--max-w-small);\n}\n\n.max-w-medium{\n max-width:var(--max-w-medium);\n}\n\n.max-w-none{\n max-width:var(--max-w-none);\n margin-left:auto;\n margin-right:auto;\n}\n\n.max-w-limit{\n max-width:var(--max-w-limit);\n margin-left:auto;\n margin-right:auto;\n}\n\n@media (min-width: 860px){\n .max-w-small{\n width:var(--w-percent-small);\n }\n\n .max-w-medium{\n width:var(--w-percent-medium);\n }\n}\n\n.y-padding-none{\n padding-top:0;\n padding-bottom:0;\n}\n\n.y-padding-extra-small{\n padding-top:var(--padding-y-xs);\n padding-bottom:var(--padding-y-xs);\n}\n\n.y-padding-small{\n padding-top:var(--padding-y-sm);\n padding-bottom:var(--padding-y-sm);\n}\n\n.y-padding-medium{\n padding-top:var(--padding-y-md);\n padding-bottom:var(--padding-y-md);\n}\n\n.y-padding-large{\n padding-top:var(--padding-y-lg);\n padding-bottom:var(--padding-y-lg);\n}\n\n.gap-extra-small{\n gap:var(--gap-xs) 0;\n}\n\n.gap-small{\n gap:var(--gap-sm) 0;\n}\n\n.gap-medium{\n gap:var(--gap-md) 0;\n}\n\n@media (min-width: 860px){\n .gap-extra-small{\n gap:var(--gap-xs);\n }\n\n .gap-small{\n gap:var(--gap-sm);\n }\n\n .gap-medium{\n gap:var(--gap-md);\n }\n .vertical-align-top{\n align-items:flex-start;\n }\n\n .vertical-align-middle{\n align-items:center;\n }\n\n .vertical-align-bottom{\n align-items:flex-end;\n }\n}\n`;","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n grid-column:span 12 / span 12;\n display:flex;\n flex-direction:column;\n grid-row:var(--row-span);\n grid-column:var(--col-span-default);\n}\n\n :host([row-span='1']){\n grid-row:span 1 / span 1;\n }\n\n :host([row-span='2']){\n grid-row:span 2 / span 2;\n }\n\n :host([row-span='3']){\n grid-row:span 3 / span 3;\n }\n\n :host([row-span='4']){\n grid-row:span 4 / span 4;\n }\n\n :host([row-span='5']){\n grid-row:span 5 / span 5;\n }\n\n :host([row-span='6']){\n grid-row:span 6 / span 6;\n }\n\n :host([col-span-default='1']){\n grid-column:span 1 / span 1;\n }\n\n :host([col-span-default='2']){\n grid-column:span 2 / span 2;\n }\n\n :host([col-span-default='3']){\n grid-column:span 3 / span 3;\n }\n\n :host([col-span-default='4']){\n grid-column:span 4 / span 4;\n }\n\n :host([col-span-default='5']){\n grid-column:span 5 / span 5;\n }\n\n :host([col-span-default='6']){\n grid-column:span 6 / span 6;\n }\n\n :host([col-span-default='7']){\n grid-column:span 7 / span 7;\n }\n\n :host([col-span-default='8']){\n grid-column:span 8 / span 8;\n }\n\n :host([col-span-default='9']){\n grid-column:span 9 / span 9;\n }\n\n :host([col-span-default='10']){\n grid-column:span 10 / span 10;\n }\n\n :host([col-span-default='11']){\n grid-column:span 11 / span 11;\n }\n\n :host([col-span-default='12']){\n grid-column:span 12 / span 12;\n }\n\n @media (min-width: 668px){\n :host([col-span-sm='1']){\n grid-column:span 1 / span 1;\n }\n\n :host([col-span-sm='2']){\n grid-column:span 2 / span 2;\n }\n\n :host([col-span-sm='3']){\n grid-column:span 3 / span 3;\n }\n\n :host([col-span-sm='4']){\n grid-column:span 4 / span 4;\n }\n\n :host([col-span-sm='5']){\n grid-column:span 5 / span 5;\n }\n\n :host([col-span-sm='6']){\n grid-column:span 6 / span 6;\n }\n\n :host([col-span-sm='7']){\n grid-column:span 7 / span 7;\n }\n\n :host([col-span-sm='8']){\n grid-column:span 8 / span 8;\n }\n\n :host([col-span-sm='9']){\n grid-column:span 9 / span 9;\n }\n\n :host([col-span-sm='10']){\n grid-column:span 10 / span 10;\n }\n\n :host([col-span-sm='11']){\n grid-column:span 11 / span 11;\n }\n\n :host([col-span-sm='12']){\n grid-column:span 12 / span 12;\n }\n }\n\n @media (min-width: 860px){\n :host([col-span-md='1']){\n grid-column:span 1 / span 1;\n }\n\n :host([col-span-md='2']){\n grid-column:span 2 / span 2;\n }\n\n :host([col-span-md='3']){\n grid-column:span 3 / span 3;\n }\n\n :host([col-span-md='4']){\n grid-column:span 4 / span 4;\n }\n\n :host([col-span-md='5']){\n grid-column:span 5 / span 5;\n }\n\n :host([col-span-md='6']){\n grid-column:span 6 / span 6;\n }\n\n :host([col-span-md='7']){\n grid-column:span 7 / span 7;\n }\n\n :host([col-span-md='8']){\n grid-column:span 8 / span 8;\n }\n\n :host([col-span-md='9']){\n grid-column:span 9 / span 9;\n }\n\n :host([col-span-md='10']){\n grid-column:span 10 / span 10;\n }\n\n :host([col-span-md='11']){\n grid-column:span 11 / span 11;\n }\n\n :host([col-span-md='12']){\n grid-column:span 12 / span 12;\n }\n }\n\n :host([border-gap-size=\"small\"]){\n margin-bottom:var(--spacing-04);\n}\n\n :host([border-gap-size=\"medium\"]){\n margin-bottom:var(--spacing-10);\n}\n\n :host([border-gap-size=\"large\"]){\n margin-bottom:var(--spacing-16);\n}\n\n @media (min-width: 1100px){\n :host([col-span-lg='1']){\n grid-column:span 1 / span 1;\n }\n\n :host([col-span-lg='2']){\n grid-column:span 2 / span 2;\n }\n\n :host([col-span-lg='3']){\n grid-column:span 3 / span 3;\n }\n\n :host([col-span-lg='4']){\n grid-column:span 4 / span 4;\n }\n\n :host([col-span-lg='5']){\n grid-column:span 5 / span 5;\n }\n\n :host([col-span-lg='6']){\n grid-column:span 6 / span 6;\n }\n\n :host([col-span-lg='7']){\n grid-column:span 7 / span 7;\n }\n\n :host([col-span-lg='8']){\n grid-column:span 8 / span 8;\n }\n\n :host([col-span-lg='9']){\n grid-column:span 9 / span 9;\n }\n\n :host([col-span-lg='10']){\n grid-column:span 10 / span 10;\n }\n\n :host([col-span-lg='11']){\n grid-column:span 11 / span 11;\n }\n\n :host([col-span-lg='12']){\n grid-column:span 12 / span 12;\n }\n }\n\n @media (min-width: 1400px){\n :host([col-span-xl='1']){\n grid-column:span 1 / span 1;\n }\n\n :host([col-span-xl='2']){\n grid-column:span 2 / span 2;\n }\n\n :host([col-span-xl='3']){\n grid-column:span 3 / span 3;\n }\n\n :host([col-span-xl='4']){\n grid-column:span 4 / span 4;\n }\n\n :host([col-span-xl='5']){\n grid-column:span 5 / span 5;\n }\n\n :host([col-span-xl='6']){\n grid-column:span 6 / span 6;\n }\n\n :host([col-span-xl='7']){\n grid-column:span 7 / span 7;\n }\n\n :host([col-span-xl='8']){\n grid-column:span 8 / span 8;\n }\n\n :host([col-span-xl='9']){\n grid-column:span 9 / span 9;\n }\n\n :host([col-span-xl='10']){\n grid-column:span 10 / span 10;\n }\n\n :host([col-span-xl='11']){\n grid-column:span 11 / span 11;\n }\n\n :host([col-span-xl='12']){\n grid-column:span 12 / span 12;\n }\n }\n\n :host([vertical-align='middle']){\n justify-content:center;\n }\n\n :host([vertical-align='bottom']){\n justify-content:flex-end;\n }\n\n :host([horizontal-align='left']){\n align-items:flex-start;\n text-align:left;\n }\n\n :host([horizontal-align='center']){\n align-items:center;\n text-align:center;\n }\n\n :host([horizontal-align='right']){\n align-items:flex-end;\n text-align:right;\n }\n\n::slotted(div){\n width:100%;\n}\n`;","import { OutlineElement } from '@phase2/outline-core';\nimport {\n HorizontalAlignment,\n VerticalAlignment,\n} from '@phase2/outline-core/src/utils/types';\nimport { html, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport componentStyles from './chop-column.css.lit';\n\ntype colSpanRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\ntype rowSpanRange = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * The CHOP Column component\n * @element chop-column\n *\n * @slot - The default slot for this element.\n */\n@customElement('chop-column')\nexport class CHOPColumn extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n /**\n * The number of columns wide this column should be.\n */\n @property({ type: Number, reflect: true, attribute: 'col-span-default' })\n colSpanDefault: colSpanRange = 12;\n\n /**\n * The number of columns wide this column should be on small+ screens.\n */\n @property({ type: Number, reflect: true, attribute: 'col-span-sm' })\n colSpanSm: colSpanRange;\n\n /**\n * The number of columns wide this column should be on medium+ screens.\n */\n @property({ type: Number, reflect: true, attribute: 'col-span-md' })\n colSpanMd: colSpanRange;\n\n /**\n * The number of columns wide this column should be on large+ screens.\n */\n @property({ type: Number, reflect: true, attribute: 'col-span-lg' })\n colSpanLg: colSpanRange;\n\n /**\n * The number of columns wide this column should be on extra large+ screens.\n */\n @property({ type: Number, reflect: true, attribute: 'col-span-xl' })\n colSpanXl: colSpanRange;\n\n /**\n * The number of rows this column will span.\n */\n @property({ type: Number, reflect: true, attribute: 'row-span' })\n rowSpan: rowSpanRange = 1;\n\n /**\n * The vertical placement of content inside of the column.\n */\n @property({ type: String, reflect: true, attribute: 'vertical-align' })\n verticalAlign: VerticalAlignment = 'top';\n\n /**\n * The horizontal placement of content inside of the column.\n */\n @property({ type: String, attribute: 'horizontal-align' })\n horizontalAlign: HorizontalAlignment = 'left';\n\n /**\n * A boolean property to hide the first jump nav item.\n */\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'hide-first-jumpnav-jump',\n })\n hideFirstJumpnavJump = false;\n\n render(): TemplateResult {\n return html``;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-column': CHOPColumn;\n }\n}\n","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport componentStyles from './chop-ways-to-give-hero.css.lit';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport '../chop-grid/chop-grid';\nimport '../chop-column/chop-column';\nimport '../chop-woven-svgs/chop-woven-svgs';\nimport '../chop-icon/chop-icon';\nimport '../chop-cta-link/chop-cta-link';\nimport '../chop-video-player/chop-video-player';\n\n/**\n * @extends OutlineElement\n * @element chop-ways-to-give-hero\n *\n * @slot breadcrumb\n * @slot image\n * @slot video\n * @slot eyebrow\n * @slot heading\n * @slot phone-number - The phone number to display and includes static icon\n * @slot emergency-text - The emergency text to display and includes static icon\n * @slot ways-to-give-label - The ways-to-give label to display and includes static icon\n * @slot apoointment-text - The appointment text to display and includes static icon\n * @slot button - The button to display\n * @slot cta - The cta to display\n */\n\n@customElement('chop-ways-to-give-hero')\nexport class CHOPWaysToGiveHero extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n resizeController = new ResizeController(this);\n isMobile = this.resizeController.currentBreakpointRange === 0;\n isNarrow = this.resizeController.currentBreakpointRange === 4;\n monthlyAmountOptions = [19, 24, 35, 50];\n oneTimeAmountOptions = [50, 100, 500, 2500];\n\n USDollar = new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n maximumFractionDigits: 0,\n });\n\n @property({ type: Array, reflect: false, attribute: 'designation-data' })\n designationData = [\n { id: 80809, name: 'The Children’s Fund (greatest need)' },\n { id: 80808, name: 'Community & Advocacy' },\n { id: 80805, name: 'Patient-family Experience' },\n { id: 80803, name: 'Research' },\n { id: 80807, name: 'Training & Education' },\n ];\n\n @property({ type: String, reflect: true, attribute: 'give-url' })\n giveBaseUrl = 'https://give2.chop.edu/give/590787/#!/donation/checkout';\n\n @property({\n type: String,\n reflect: true,\n attribute: 'give-url-specific-area',\n })\n giveBaseUrlSpecificArea =\n 'https://give2.chop.edu/give/241805/#!/donation/checkout';\n\n @property({\n type: String,\n reflect: true,\n attribute: 'icon-name',\n })\n iconName: 'clipboard';\n\n @property({ type: Boolean, reflect: true })\n overlap = false;\n\n @state() recurring: 0 | 1 = 0;\n @state() amount = 50;\n @state() designation = '80809'; // Default to The Children’s Fund.\n @state() giveLinkUrl = this.giveBaseUrl;\n\n protected updated(_changedProperties: Map): void {\n if (this.designation != '80809') {\n this.giveLinkUrl = `${this.giveBaseUrlSpecificArea}?amount=${this.amount}&recurring=${this.recurring}&designation=${this.designation}`;\n } else {\n this.giveLinkUrl = `${this.giveBaseUrl}?amount=${this.amount}&recurring=${this.recurring}&designation=${this.designation}`;\n }\n }\n\n render(): TemplateResult {\n this.isMobile = this.resizeController.currentBreakpointRange <= 3;\n this.isNarrow = this.resizeController.currentBreakpointRange === 4;\n const classes = {\n 'ways-to-give-hero-wrapper': true,\n 'variant-video': this.slots.exist('video'),\n 'mobile': this.isMobile,\n 'narrow': this.isNarrow,\n };\n\n return html` \n ${this.slotTemplate('video')}\n \n ${this.slotTemplate('breadcrumb')}\n
\n ${!this.isMobile && !this.slots.exist('video')\n ? this.wovenSVGTemplate()\n : ''}\n\n
\n
\n ${this.iconTemplate(this.iconName)}\n
\n ${this.slotTemplate('heading')}\n ${this.slotTemplate('description')}\n
\n
\n ${this.slotGivingTemplate()}\n
\n
\n \n `;\n }\n\n slotTemplate(name = '') {\n if (!this.slots.exist(name)) {\n return nothing;\n } else {\n return html`
\n \n
`;\n }\n }\n\n slotGivingTemplate() {\n const amountOptions =\n this.recurring === 1\n ? this.monthlyAmountOptions\n : this.oneTimeAmountOptions;\n return html`\n
\n
\n (this.recurring = 0)}\n >\n One Time\n \n (this.recurring = 1)}\n >\n Monthly\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n `;\n }\n\n handleSelect(e: { target: HTMLInputElement }) {\n const option = e.target.value ? e.target.value : null;\n if (option) {\n this.designation = option;\n }\n }\n\n iconTemplate(iconName: string) {\n return html`\n \n \n `;\n }\n\n wovenSVGTemplate() {\n return html`\n
\n \n
\n `;\n }\n\n attachBreadcrumb(element: Node, slotName: string) {\n this.appendChild(element as HTMLElement);\n if ((element as HTMLElement).setAttribute) {\n (element as HTMLElement).setAttribute('slot', slotName);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-ways-to-give-hero': CHOPWaysToGiveHero;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:block;\n width:100%;\n max-width:var(--max-w-medium);\n padding-bottom:var(--spacing-08);\n margin:0 auto;\n}\n`;","import { CSSResultGroup, TemplateResult, html } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement } from 'lit/decorators.js';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport componentStyles from './chop-breadcrumb-pacman.css.lit';\nimport '../chop-woven-svgs/chop-woven-svgs';\nimport '../chop-container/chop-container';\nimport '../chop-breadcrumb/chop-breadcrumb';\n\n/**\n * The CHOP Breadcrumb Pacman Component\n *\n * The purpose of this component is to pull the (globally placed) breadcrumb to a specific location on the page.\n * @element chop-breadcrumb-pacman\n * @slot breadcrumb - The breadcrumb slot\n */\n@customElement('chop-breadcrumb-pacman')\nexport class CHOPBreadcrumbPacman extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n\n render(): TemplateResult {\n return html` `;\n }\n\n attachBreadcrumb(element: Node, slotName: string) {\n this.appendChild(element as HTMLElement);\n if ((element as HTMLElement).setAttribute) {\n (element as HTMLElement).setAttribute('slot', slotName);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-breadcrumb-pacman': CHOPBreadcrumbPacman;\n }\n}\n","import { html, TemplateResult, CSSResultGroup, css } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { OutlineElement, SlotsController } from '@phase2/outline-core';\nimport componentStyles from './chop-breadcrumb.css.lit';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport '../chop-icon/chop-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { CHOPTextHero } from '../chop-text-hero/chop-text-hero';\nimport { CHOPBasicHero } from '../chop-basic-hero/chop-basic-hero';\nimport { CHOPArticleHero } from '../chop-article-hero/chop-article-hero';\nimport { CHOPLocationHero } from '../chop-location-hero/chop-location-hero';\nimport { CHOPImageHero } from '../chop-image-hero/chop-image-hero';\nimport { CHOPWaysToGiveHero } from '../chop-ways-to-give-hero/chop-ways-to-give-hero';\nimport { CHOPBreadcrumbPacman } from '../chop-breadcrumb-pacman/chop-breadcrumb-pacman';\n\n/** The element name, reused throughout the codebase */\nconst componentName = 'chop-breadcrumb';\ntype heroClasses =\n | typeof CHOPTextHero\n | typeof CHOPBasicHero\n | typeof CHOPArticleHero\n | typeof CHOPLocationHero\n | typeof CHOPImageHero\n | typeof CHOPWaysToGiveHero\n | typeof CHOPBreadcrumbPacman;\n\n/**\n *\n * The Outline Core Breadcrumb component\n *\n * @element chop-breadcrumb\n * @extends OutlineElement\n * @slot breadcrumb - The slot for ul.\n * @slot home-url - The slot for home url.\n * @prop {String} breadcrumb - The breadcrumb items to display in an unordered list\n *\n */\n\n@customElement(componentName)\nexport class CHOPBreadcrumb extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles, css``];\n isMobile = false;\n\n slots = new SlotsController(this);\n resizeController = new ResizeController(this);\n // State of the breadcrumb.\n detached = false;\n heroBackground = '';\n waysToGive = false;\n imageHero = false;\n basicHero = false;\n researchHero = false;\n pacmanBreadcrumb = document.querySelector('chop-breadcrumb-pacman')\n ? true\n : false;\n formContainer =\n this.nextElementSibling?.tagName == 'CHOP-EMBEDDED-FORM-CONTAINER'\n ? true\n : false;\n private detachedBreadcrumb: Node | null = null;\n\n firstUpdated() {\n if (!this.formContainer) {\n this.detachedBreadcrumb = this as HTMLElement;\n const herosComponentClasses: heroClasses[] = [\n CHOPTextHero,\n CHOPBasicHero,\n CHOPArticleHero,\n CHOPLocationHero,\n CHOPImageHero,\n CHOPWaysToGiveHero,\n CHOPBreadcrumbPacman,\n ];\n this.breadcrumbHeroInjection(herosComponentClasses);\n this.breadcrumbPathOverrides();\n }\n }\n\n /**\n * Overrides the breadcrumb path for special cases.\n *\n * These special cases occur due to the view_mode_page module providing only the entity canonical path\n * for the breadcrumb, rather than appending the extra path segment.\n * This method checks the last segment of the current URL against a predefined list of strings.\n * If there is a match, it converts the last breadcrumb list item into a link, excluding the matched segment.\n * Additionally, it appends a new list item to the breadcrumb with the matched segment formatted to capital case.\n */\n breadcrumbPathOverrides(): void {\n const viewModePagePaths = ['our-team', 'book-appointment'];\n const currentPath = window.location.pathname;\n // Split and remove empty segments\n const pathSegments = currentPath.split('/').filter(Boolean);\n const lastSegment = pathSegments.pop(); // Get the last segment\n const ulElement = this.querySelector('[slot=\"breadcrumb\"] ul');\n // If we don't have a last segment, the last segment isn't one of the special cases, or we don't have a UL element, bail.\n if (\n !lastSegment ||\n !viewModePagePaths.includes(lastSegment) ||\n !ulElement\n ) {\n return;\n }\n\n const listItems = ulElement?.getElementsByTagName('li');\n const lastItem = listItems[listItems.length - 1];\n\n // If we're missing a last item, bail!\n if (!lastItem) {\n return;\n }\n\n // Convert last list item text to a link, if it isn't already.\n if (!lastItem.querySelector('a')) {\n const newPath = pathSegments.join('/');\n lastItem.innerHTML = `
${lastItem.textContent}`;\n }\n\n // Add new list item with formatted last segment\n const formattedLastSegment = lastSegment\n .replace(/-/g, ' ')\n .replace(/\\b\\w/g, l => l.toUpperCase());\n const newListItem = document.createElement('li');\n newListItem.textContent = formattedLastSegment;\n ulElement.appendChild(newListItem);\n }\n\n breadcrumbHeroInjection(herosComponentClasses: heroClasses[]): void {\n herosComponentClasses.forEach(heroClass => {\n const heroInstance = new heroClass();\n const heroTag = document.querySelector(\n heroInstance.tagName\n ) as InstanceType;\n if (heroTag) {\n this.researchHero =\n heroTag.getAttribute('svg-background') === 'research-studies-hero' ??\n true;\n this.waysToGive = heroTag instanceof CHOPWaysToGiveHero ? true : false;\n this.imageHero = heroTag instanceof CHOPImageHero ?? true;\n this.heroBackground =\n heroTag.getAttribute('background-color')! ||\n heroTag.getAttribute('theme-color')!;\n this.basicHero = heroTag instanceof CHOPBasicHero ?? true;\n if (!(heroTag instanceof CHOPBreadcrumbPacman)) {\n this.detached = true;\n this.classList.add('detached');\n }\n this.classList.add(\n this.heroBackground ? this.heroBackground : 'breadcrumb-hero'\n );\n if (\n heroTag instanceof CHOPLocationHero ||\n heroTag instanceof CHOPBasicHero ||\n heroTag instanceof CHOPImageHero ||\n heroTag instanceof CHOPWaysToGiveHero\n ) {\n this.classList.add('location-hero');\n }\n if (heroTag instanceof CHOPTextHero) {\n this.classList.add('text-hero');\n }\n if (heroTag instanceof CHOPArticleHero) {\n this.classList.add('article-hero');\n }\n this.waysToGive ? this.classList.add('ways-to-give-hero') : '';\n this.detachBreadcrumb();\n heroTag.attachBreadcrumb(this.detachedBreadcrumb!, 'breadcrumb');\n }\n });\n }\n\n detachBreadcrumb(): void {\n if (this.detachedBreadcrumb && this.detachedBreadcrumb.parentNode) {\n this.detachedBreadcrumb.parentNode.removeChild(this.detachedBreadcrumb);\n // Removing block enterely.\n const breadcrumbBlock = document.getElementById(\n 'block-outline-frontend-breadcrumbs'\n );\n breadcrumbBlock?.classList.add('visually-hidden');\n }\n }\n\n render(): TemplateResult {\n this.isMobile = this.resizeController.currentBreakpointRange <= 4;\n const screenSizes =\n this.resizeController.currentBreakpointRange <= 4 ? 'mobile' : 'desktop';\n const listItems = this.getElementsByTagName('li');\n const totalListItems = listItems.length;\n const backLinkPosition = totalListItems > 2 ? totalListItems - 2 : 0;\n const backLink = listItems[backLinkPosition].cloneNode(true);\n\n // Get the anchor tag within backLink\n const backLinkAnchor = (backLink as Element).querySelector('a');\n\n // Create a new chop-icon element\n const icon = document.createElement('chop-icon');\n icon.name = 'arrow-left';\n icon.library = 'system';\n icon.size = '1rem';\n\n // Adding class to identify if breadcrumb is inside a form-container.\n if (this.formContainer) this.classList.add('embedded-form');\n\n // Prepend the chop-icon to the anchor tag\n backLinkAnchor?.prepend(icon);\n // Back to normal on mobile.\n if (this.resizeController.currentBreakpointRange <= 4) {\n this.classList.add('mobile');\n } else {\n this.classList.remove('mobile');\n }\n\n // The 'at' method is not supported on HTMLCollectionOf.\n // Instead, we can convert the HTMLCollectionOf to an array and then use the 'at' method.\n // const backLink = Array.from(listItems).at(-2);\n // This caused a bug where the links would disappear on resize the weren't supposed to.\n const classes = {\n 'breadcrumb-wrapper': true,\n [screenSizes]: true,\n 'detached': this.detached,\n 'image-hero': this.imageHero,\n 'ways-to-give-hero': this.waysToGive,\n 'mobile-only': this.isMobile,\n [this.heroBackground]: this.heroBackground,\n 'breadcrumb-hero':\n (!this.heroBackground &&\n this.heroBackground === '' &&\n !this.imageHero &&\n !this.formContainer &&\n !this.basicHero) ||\n this.researchHero,\n 'breadcrumb-pacman': this.pacmanBreadcrumb,\n 'form-container': this.formContainer,\n };\n\n return html`\n
\n ${screenSizes === 'desktop'\n ? html`\n \n Return to the homepage\n \n `\n : html``}\n
\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [componentName]: CHOPBreadcrumb;\n }\n}\n","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement } from 'lit/decorators.js';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport componentStyles from './chop-article-hero.css.lit';\nimport '../chop-woven-svgs/chop-woven-svgs';\nimport '../chop-container/chop-container';\nimport '../chop-breadcrumb/chop-breadcrumb';\n\n/**\n * The CHOP Article Hero Component\n * @element chop-article-hero\n * @slot breadcrumb - The breadcrumb slot\n * @slot eyebrow - The eyebrow slot\n * @slot title - The title slot\n * @slot subheading - The subheading slot\n * @slot author - The author slot\n * @slot publication-date - The publication date slot\n * @slot image - The image slot\n * @slot image-caption - The image caption slot\n */\n@customElement('chop-article-hero')\nexport class CHOPArticleHero extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n\n render(): TemplateResult {\n return html`\n \n \n \n \n ${this.slots.exist('breadcrumb')\n ? html`\n \n \n ${this.slotTemplate('breadcrumb')}\n \n `\n : nothing}\n \n \n
\n ${this.slotTemplate('eyebrow')} ${this.slotTemplate('title')}\n ${this.slotTemplate('subheading')} ${this.slotTemplate('author')}\n ${this.slotTemplate('publication-date')}\n ${this.slotTemplate('image')} ${this.slotTemplate('image-caption')}\n
\n
\n \n `;\n }\n\n slotTemplate(name = '') {\n if (!this.slots.exist(name)) {\n return nothing;\n } else {\n return html`\n
\n \n
\n `;\n }\n }\n\n attachBreadcrumb(element: Node, slotName: string) {\n this.appendChild(element as HTMLElement);\n if ((element as HTMLElement).setAttribute) {\n (element as HTMLElement).setAttribute('slot', slotName);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-article-hero': CHOPArticleHero;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:block;\n height:100%;\n width:100%;\n}\n:host([overlap]){\n margin-bottom:-16rem;\n position:relative;\n z-index:2;\n}\n`;","import { CSSResultGroup, html, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport componentStyles from './chop-attribute-cascade.css.lit';\nimport { OutlineElement } from '@phase2/outline-core';\n\n/**\n * @extends OutlineElement\n * @element chop-attribute-cascade\n * This element can be used as a setter for other element's attributes. This is\n * particularly useful in Drupal when components at different render levels\n * require properties to be set concurrently based off a value on a parent\n * entity which may not have been created yet at the time of first render.\n *\n * @property {string} dataString - The string containing the data to be parsed\n * for attribute application. Comes in the format of\n * queryselector,attribute,value;queryselector,attribute,value;etc\n *\n */\n\n@customElement('chop-attribute-cascade')\nexport class ChopAttributeCascade extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n @property({ type: String, attribute: 'data-string' })\n dataString: string;\n\n private parseDataString(): Array> {\n return this.dataString.split(';').map(item => item.split(','));\n }\n\n private applyAttributes(): void {\n const parsedData = this.parseDataString();\n parsedData.forEach(([selector, attribute, value]) => {\n const elements = this.querySelectorAll(selector);\n elements.forEach(element => {\n element.setAttribute(attribute, value);\n });\n });\n }\n\n updated(changedProperties: Map): void {\n if (changedProperties.has('dataString')) {\n this.applyAttributes();\n }\n }\n\n render(): TemplateResult {\n return html` `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-attribute-cascade': ChopAttributeCascade;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n color:var(--color-brown-900) !important;\n z-index:1;\n}\n\nchop-heading :host{\n display:block;\n}\n\nchop-heading .chop-headline{\n color:inherit;\n font-family:var(--headline-2xl-mid-font-family);\n display:block;\n margin:0;\n font-weight:inherit;\n word-break:keep-all;\n\n}\n\nchop-heading .chop-headline a{\n text-decoration:none;\n }\n\nchop-heading .chop-headline a:hover{\n text-decoration:underline;\n }\n\nchop-heading .chop-headline p{\n padding:0;\n margin:0;\n text-align:left;\n }\n\nchop-heading .chop-headline.brown-900{\n color:var(--color-brown-900);\n }\n\nchop-heading .clickable-card h1,\n chop-heading .clickable-card h2,\n chop-heading .clickable-card h3,\n chop-heading .clickable-card h4,\n chop-heading .clickable-card h5,\n chop-heading .clickable-card h6,\n chop-heading .clickable-card a{\n color:var(--color-blue-600);\n text-decoration:none;\n word-break:keep-all;\n }\n\nchop-heading .clickable-card h1:hover, chop-heading .clickable-card h2:hover, chop-heading .clickable-card h3:hover, chop-heading .clickable-card h4:hover, chop-heading .clickable-card h5:hover, chop-heading .clickable-card h6:hover, chop-heading .clickable-card a:hover{\n text-decoration:underline;\n cursor:pointer;\n }\n\nchop-heading .clickable-card h1:focus,\n chop-heading .clickable-card h1:focus-visible,\n chop-heading .clickable-card h2:focus,\n chop-heading .clickable-card h2:focus-visible,\n chop-heading .clickable-card h3:focus,\n chop-heading .clickable-card h3:focus-visible,\n chop-heading .clickable-card h4:focus,\n chop-heading .clickable-card h4:focus-visible,\n chop-heading .clickable-card h5:focus,\n chop-heading .clickable-card h5:focus-visible,\n chop-heading .clickable-card h6:focus,\n chop-heading .clickable-card h6:focus-visible,\n chop-heading .clickable-card a:focus,\n chop-heading .clickable-card a:focus-visible{\n outline:2px solid var(--color-blue-600);\n outline-offset:2px;\n border-radius:8px;\n }\n\nchop-heading .clickable-card h1:after, chop-heading .clickable-card h2:after, chop-heading .clickable-card h3:after, chop-heading .clickable-card h4:after, chop-heading .clickable-card h5:after, chop-heading .clickable-card h6:after, chop-heading .clickable-card a:after{\n position:absolute;\n inset:0;\n content:'';\n }\n\nchop-heading .clickable-card.dark-mode h1,\n chop-heading .clickable-card.dark-mode h2,\n chop-heading .clickable-card.dark-mode h3,\n chop-heading .clickable-card.dark-mode h4,\n chop-heading .clickable-card.dark-mode h5,\n chop-heading .clickable-card.dark-mode h6,\n chop-heading .clickable-card.dark-mode a{\n color:var(--color-neutral-100);\n text-decoration:none;\n }\n\nchop-heading .clickable-card.dark-mode h1:hover, chop-heading .clickable-card.dark-mode h2:hover, chop-heading .clickable-card.dark-mode h3:hover, chop-heading .clickable-card.dark-mode h4:hover, chop-heading .clickable-card.dark-mode h5:hover, chop-heading .clickable-card.dark-mode h6:hover, chop-heading .clickable-card.dark-mode a:hover{\n text-decoration:underline;\n cursor:pointer;\n }\n\nchop-heading .clickable-card.dark-mode h1:focus,\n chop-heading .clickable-card.dark-mode h1:focus-visible,\n chop-heading .clickable-card.dark-mode h2:focus,\n chop-heading .clickable-card.dark-mode h2:focus-visible,\n chop-heading .clickable-card.dark-mode h3:focus,\n chop-heading .clickable-card.dark-mode h3:focus-visible,\n chop-heading .clickable-card.dark-mode h4:focus,\n chop-heading .clickable-card.dark-mode h4:focus-visible,\n chop-heading .clickable-card.dark-mode h5:focus,\n chop-heading .clickable-card.dark-mode h5:focus-visible,\n chop-heading .clickable-card.dark-mode h6:focus,\n chop-heading .clickable-card.dark-mode h6:focus-visible,\n chop-heading .clickable-card.dark-mode a:focus,\n chop-heading .clickable-card.dark-mode a:focus-visible{\n outline:2px solid var(--color-neutral-100);\n outline-offset:2px;\n border-radius:8px;\n }\n\nchop-heading .clickable-card.dark-mode h1:after, chop-heading .clickable-card.dark-mode h2:after, chop-heading .clickable-card.dark-mode h3:after, chop-heading .clickable-card.dark-mode h4:after, chop-heading .clickable-card.dark-mode h5:after, chop-heading .clickable-card.dark-mode h6:after, chop-heading .clickable-card.dark-mode a:after{\n position:absolute;\n inset:0;\n content:'';\n }\n\nchop-heading .headline-3xl{\n font-size:var(--fs-4half-xl);\n line-height:var(--headline-3xl-min-line-height);\n font-family:var(--headline-3xl-min-font-family);\n letter-spacing:var(--headline-3xl-min-letter-spacing);\n text-transform:var(--headline-3xl-min-text-case);\n font-weight:var(--headline-3xl-min-font-weight);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-3xl{\n font-size:clamp(2.5rem, 2.5rem + 3.125vw, 4.5rem);\n line-height:var(--headline-3xl-mid-line-height);\n font-family:var(--headline-3xl-mid-font-family);\n letter-spacing:var(--headline-3xl-mid-letter-spacing);\n text-transform:var(--headline-3xl-mid-text-case);\n font-weight:var(--headline-3xl-mid-font-weight)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-3xl{\n line-height:var(--headline-3xl-max-line-height);\n font-family:var(--headline-3xl-max-font-family);\n letter-spacing:var(--headline-3xl-max-letter-spacing);\n text-transform:var(--headline-3xl-max-text-case);\n font-weight:var(--headline-3xl-max-font-weight)\n}\n }\n\nchop-heading .headline-2xl{\n font-size:clamp(2.25rem, 2.25rem + 2.734375vw, 4rem);\n font-weight:var(--headline-2xl-min-font-weight);\n line-height:var(--headline-2xl-min-line-height);\n font-family:var(--headline-2xl-min-font-family);\n letter-spacing:var(--headline-2xl-min-letter-spacing);\n text-transform:var(--headline-2xl-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-2xl{\n font-weight:var(--headline-2xl-mid-font-weight);\n line-height:var(--headline-2xl-mid-line-height);\n font-family:var(--headline-2xl-mid-font-family);\n letter-spacing:var(--headline-2xl-mid-letter-spacing);\n text-transform:var(--headline-2xl-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-2xl{\n font-weight:var(--headline-2xl-max-font-weight);\n line-height:var(--headline-2xl-max-line-height);\n font-family:var(--headline-2xl-max-font-family);\n letter-spacing:var(--headline-2xl-max-letter-spacing);\n text-transform:var(--headline-2xl-max-text-case)\n}\n }\n\nchop-heading .headline-xl{\n font-size:clamp(2rem, 2rem + 2.34375vw, 3.5rem);\n font-weight:var(--headline-xl-min-font-weight);\n line-height:var(--headline-xl-min-line-height);\n font-family:var(--headline-xl-min-font-family);\n letter-spacing:var(--headline-xl-min-letter-spacing);\n text-transform:var(--headline-xl-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-xl{\n font-weight:var(--headline-xl-mid-font-weight);\n line-height:var(--headline-xl-mid-line-height);\n font-family:var(--headline-xl-mid-font-family);\n letter-spacing:var(--headline-xl-mid-letter-spacing);\n text-transform:var(--headline-xl-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-xl{\n font-weight:var(--headline-xl-max-font-weight);\n line-height:var(--headline-xl-max-line-height);\n font-family:var(--headline-xl-max-font-family);\n letter-spacing:var(--headline-xl-max-letter-spacing);\n text-transform:var(--headline-xl-max-text-case)\n}\n }\n\nchop-heading .headline-lg{\n font-weight:var(--headline-lg-min-font-weight);\n font-size:clamp(1.75rem, 1.75rem + 1.5625vw, 2.75rem);\n font-size:clamp(1.625rem, 1.625rem + 1.3672vw, 2.5rem);\n line-height:var(--headline-lg-min-line-height);\n font-family:var(--headline-lg-min-font-family);\n letter-spacing:var(--headline-lg-min-letter-spacing);\n text-transform:var(--headline-lg-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-lg{\n font-weight:var(--headline-lg-mid-font-weight);\n line-height:var(--headline-lg-mid-line-height);\n font-family:var(--headline-lg-mid-font-family);\n letter-spacing:var(--headline-lg-mid-letter-spacing);\n text-transform:var(--headline-lg-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-lg{\n font-weight:var(--headline-lg-max-font-weight);\n line-height:var(--headline-lg-max-line-height);\n font-family:var(--headline-lg-max-font-family);\n letter-spacing:var(--headline-lg-max-letter-spacing);\n text-transform:var(--headline-lg-max-text-case)\n}\n }\n\nchop-heading .headline-md{\n font-size:clamp(1.5rem, 1.5rem + 1.171875vw, 2.25rem);\n line-height:var(--headline-md-min-line-height);\n font-family:var(--headline-md-min-font-family);\n font-weight:var(--headline-md-min-font-weight);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-md{\n font-weight:var(--headline-md-mid-font-weight);\n line-height:var(--headline-md-mid-line-height);\n font-family:var(--headline-md-mid-font-family);\n letter-spacing:var(--headline-md-mid-letter-spacing);\n text-transform:var(--headline-md-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-md{\n font-weight:var(--headline-md-max-font-weight);\n line-height:var(--headline-md-max-line-height);\n font-family:var(--headline-md-max-font-family);\n letter-spacing:var(--headline-md-max-letter-spacing);\n text-transform:var(--headline-md-max-text-case)\n}\n }\n\nchop-heading .headline-sm{\n font-weight:var(--headline-sm-min-font-weight);\n font-size:clamp(1.25rem, 1.25rem + 0.78125vw, 1.75rem);\n line-height:var(--headline-sm-min-line-height);\n font-family:var(--headline-sm-min-font-family);\n letter-spacing:var(--headline-sm-min-letter-spacing);\n text-transform:var(--headline-sm-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-sm{\n font-weight:var(--headline-sm-mid-font-weight);\n line-height:var(--headline-md-mid-line-height);\n font-family:var(--headline-md-mid-font-family);\n letter-spacing:var(--headline-md-mid-letter-spacing);\n text-transform:var(--headline-md-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-sm{\n font-weight:var(--headline-sm-max-font-weight);\n line-height:var(--headline-sm-max-line-height);\n font-family:var(--headline-sm-max-font-family);\n letter-spacing:var(--headline-sm-max-letter-spacing);\n text-transform:var(--headline-sm-max-text-case)\n}\n }\n\nchop-heading .headline-xs{\n font-size:clamp(1.125rem, 1.125rem + 0.5859375vw, 1.5rem);\n font-weight:var(--headline-xs-min-font-weight);\n line-height:var(--headline-xs-min-line-height);\n font-family:var(--headline-xs-min-font-family);\n letter-spacing:var(--headline-xs-min-letter-spacing);\n text-transform:var(--headline-xs-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-xs{\n font-weight:var(--headline-xs-mid-font-weight);\n line-height:var(--headline-xs-mid-line-height);\n font-family:var(--headline-xs-mid-font-family);\n letter-spacing:var(--headline-xs-mid-letter-spacing);\n text-transform:var(--headline-xs-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-xs{\n font-weight:var(--headline-xs-max-font-weight);\n line-height:var(--headline-xs-max-line-height);\n font-family:var(--headline-xs-max-font-family);\n letter-spacing:var(--headline-xs-max-letter-spacing);\n text-transform:var(--headline-xs-max-text-case)\n}\n }\n\nchop-heading .headline-eyebrow{\n font-size:clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);\n font-weight:700;\n letter-spacing:3px;\n text-transform:uppercase;\n line-height:var(--headline-eyebrow-min-line-height);\n font-family:var(--headline-eyebrow-min-font-family);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-eyebrow{\n line-height:var(--headline-eyebrow-mid-line-height);\n font-family:var(--headline-eyebrow-mid-font-family)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-eyebrow{\n line-height:var(--headline-eyebrow-max-line-height);\n font-family:var(--headline-eyebrow-max-font-family)\n}\n }\n\n@media (min-width: 860px){\n chop-heading .less-margin-bottom--xs{\n margin-bottom:-0.5rem;\n }\n chop-heading .less-margin-bottom--sm{\n margin-bottom:-1rem;\n }\n chop-heading .less-margin-bottom--md{\n margin-bottom:-2rem;\n }\n chop-heading .less-margin-bottom--lg{\n margin-bottom:-3rem;\n }\n chop-heading .less-margin-bottom--xl{\n margin-bottom:-4rem;\n }\n chop-heading .less-margin-bottom--2xl{\n margin-bottom:-5rem;\n }\n chop-heading .less-margin-bottom--3xl{\n margin-bottom:-6rem;\n }\n}\n\nchop-cta-link{\n --chop-cta-link--family--computed:var(--chop-cta-link--family, var(--ff-body));\n --chop-cta-link--weight--computed:var(--fw-bold);\n --chop-cta-link--padding-small--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);\n --chop-cta-link--padding-small-hover--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);\n --chop-cta-link--padding-default--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);\n --chop-cta-link--padding-default-hover--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);\n --chop-cta-link--padding-large--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);\n --chop-cta-link--padding-large-hover--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);\n --chop-cta-link--primary-bg-color--computed:var(--color-blue-700);\n --chop-cta-link--primary-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring--computed:var(--chop-cta-link--primary-ring, none);\n --chop-cta-link--primary-bg-color-hover--computed:var(--color-neutral-100);\n --chop-cta-linknknk--primary-color-hover--computed:var(\n --chop-cta-link--primary-color-hover,\n var(--color-blue-600)\n);\n --chop-cta-link--primary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring-hover--computed:var(--color-blue-700);\n --chop-cta-link--primary-bg-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--primary-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--primary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--primary-disabled-bg-color--computed:var(--color-neutral-400);\n --chop-cta-link--primary-disabled-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-disabled-ring--computed:var(--outline-transparent);\n --chop-cta-link--primary-reversed-bg-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-color--computed:var(--color-blue-700);\n --chop-cta-link--primary-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring--computed:var(\n --chop-cta-link--primary-reversed-ring,\n none\n);\n --chop-cta-link--primary-reversed-bg-color-hover--computed:var(\n --bg-color--transparent\n);\n --chop-cta-link--primary-reversed-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring-hover--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-bg-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--primary-reversed-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--primary-reversed-disabled-bg-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--primary-reversed-disabled-color--computed:var(\n --color-neutral-500\n);\n --chop-cta-link--primary-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-bg-color--computed:var(--color-neutral-100);\n --chop-cta-link--outline-color--computed:var(--color-blue-700);\n --chop-cta-link--outline-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring--computed:var(--color-blue-700);\n --chop-cta-link--outline-bg-color-hover--computed:var(--color-blue-700);\n --chop-cta-link--outline-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--outline-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring-hover--computed:var(--color-blue-700);\n --chop-cta-link--outline-bg-color-focus--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--outline-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--outline-disabled-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--outline-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-color--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-bg-color-hover--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-color-hover--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring-hover--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-bg-color-focus--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-color-focus--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring-focus--computed:var(\n --color-blue-500\n);\n --chop-cta-link--outline-reversed-disabled-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--outline-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--secondary-bg-color--computed:var(--color-pink-800);\n --chop-cta-link--secondary-color--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring--computed:var(\n --chop-cta-link--secondary-ring,\n none\n);\n --chop-cta-link--secondary-bg-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-color-hover--computed:var(\n --chop-cta-link--secondary-color-hover,\n var(--color-pink-800)\n);\n --chop-cta-link--secondary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring-hover--computed:var(--color-pink-800);\n --chop-cta-link--secondary-bg-color-focus--computed:var(--color-pink-800);\n --chop-cta-link--secondary-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring-focus--computed:var(--color-pink-800);\n --chop-cta-link--secondary-disabled-bg-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--secondary-disabled-color--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-disabled-ring--computed:var(--outline-transparent);\n --chop-cta-link--link-bg-color--computed:var(--outline-transparent);\n --chop-cta-link--link-color--computed:var(--color-blue-700);\n --chop-cta-link--link-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-ring--computed:var(--color-blue-700);\n --chop-cta-link--link-color-hover--computed:var(--color-blue-800);\n --chop-cta-link--link-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--link-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-disabled-color--computed:var(--color-neutral-400);\n --chop-cta-link--link-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color--computed:var(--color-neutral-100);\n --chop-cta-link--link-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color-hover--computed:var(--color-blue-700);\n --chop-cta-link--link-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--link-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--link-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n}\n\nchop-cta-link .btn{\n display:flex;\n width:fit-content;\n flex-wrap:nowrap;\n align-items:center;\n cursor:pointer;\n transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration:300ms;\n text-decoration-line:none;\n outline:none;\n border:none;\n border-radius:0.5rem;\n line-height:1.5;\n background:transparent;\n\n font-family:var(--chop-cta-link--family--computed);\n font-weight:var(--chop-cta-link--weight--computed);\n padding:var(--chop-cta-link--padding-default--computed);\n}\n\nchop-cta-link .btn[aria-disabled='true']{\n pointer-events:none;\n cursor:not-allowed;\n user-select:none;\n}\n\nchop-cta-link .btn.small{\n font-size:var(--fs-sm);\n line-height:var(--lh-base);\n padding:var(--chop-cta-link--padding-small--computed);\n}\n\nchop-cta-link .btn.small.no-icon{\n padding:var(--spacing-02) var(--spacing-4);\n }\n\nchop-cta-link .btn.medium,\nchop-cta-link .btn.default{\n font-size:var(--fs-base);\n line-height:var(--lh-md);\n}\n\nchop-cta-link .btn.medium.no-icon, chop-cta-link .btn.default.no-icon{\n padding:var(--spacing-02) var(--spacing-6);\n }\n\nchop-cta-link .btn.large{\n font-size:var(--fs-lg);\n line-height:var(--lh-sm);\n padding:var(--chop-cta-link--padding-large--computed);\n}\n\nchop-cta-link .btn.large.no-icon{\n padding:var(--spacing-03) var(--spacing-8);\n }\n\nchop-cta-link .btn.primary{\n background-color:var(--chop-cta-link--primary-bg-color--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight--computed);\n border:2px solid var(--chop-cta-link--primary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring--computed);\n}\n\nchop-cta-link .btn.primary:hover,\n chop-cta-link .btn.primary:active{\n background-color:var(--chop-cta-link--primary-color--computed);\n color:var(--chop-cta-link--primary-bg-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring-hover--computed);\n }\n\nchop-cta-link .btn.primary:focus{\n background-color:var(--chop-cta-link--primary-bg-color-focus--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\n\nchop-cta-link .btn.primary[aria-disabled='true']{\n background-color:var(--chop-cta-link--primary-disabled-bg-color--computed);\n color:var(--chop-cta-link--primary-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-disabled-ring--computed);\n}\n\nchop-cta-link .btn.primary.reversed{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n}\n\nchop-cta-link .btn.primary.reversed:hover,\n chop-cta-link .btn.primary.reversed:active{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n }\n\nchop-cta-link .btn.primary.reversed:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\n\nchop-cta-link .btn.primary.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\n\nchop-cta-link .btn.outline{\n background-color:var(--chop-cta-link--outline-bg-color--computed);\n color:var(--chop-cta-link--outline-color--computed);\n font-weight:var(--chop-cta-link--outline-weight--computed);\n border:2px solid var(--chop-cta-link--outline-ring--computed);\n box-shadow:var(--chop-cta-link--outline-ring--computed);\n}\n\nchop-cta-link .btn.outline:hover{\n background-color:var(--chop-cta-link--outline-bg-color-hover--computed);\n color:var(--chop-cta-link--outline-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-ring-hover--computed);\n }\n\nchop-cta-link .btn.outline:focus{\n background-color:var(--chop-cta-link--outline-bg-color-focus--computed);\n color:var(--chop-cta-link--outline-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-ring-focus--computed);\n outline-offset:2px;\n }\n\nchop-cta-link .btn.outline[aria-disabled='true']{\n background-color:var(--chop-cta-link--outline-disabled-bg-color--computed);\n color:var(--chop-cta-link--outline-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-disabled-ring--computed);\n}\n\nchop-cta-link .btn.outline.reversed{\n background-color:var(--chop-cta-link--outline-reversed-bg-color--computed);\n color:var(--chop-cta-link--outline-reversed-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-ring--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring--computed);\n}\n\nchop-cta-link .btn.outline.reversed:hover,\n chop-cta-link .btn.outline.reversed:active{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-hover--computed);\n }\n\nchop-cta-link .btn.outline.reversed:focus{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-focus--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-reversed-ring-focus--computed);\n }\n\nchop-cta-link .btn.outline.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--outline-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--outline-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-disabled-ring--computed);\n}\n\nchop-cta-link .btn.outline-transparent{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n}\n\nchop-cta-link .btn.outline-transparent:hover,\n chop-cta-link .btn.outline-transparent:active{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n }\n\nchop-cta-link .btn.outline-transparent:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n }\n\nchop-cta-link .btn.outline-transparent[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\n\nchop-cta-link .btn.secondary{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n color:var(--chop-cta-link--secondary-color--computed);\n font-weight:var(--chop-cta-link--secondary-weight--computed);\n border:2px solid var(--chop-cta-link--secondary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring--computed);\n}\n\nchop-cta-link .btn.secondary:hover{\n background-color:var(--chop-cta-link--secondary-bg-color-hover--computed);\n color:var(--chop-cta-link--secondary-color-hover--computed);\n font-weight:var(--chop-cta-link--secondary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-hover--computed);\n }\n\nchop-cta-link .btn.secondary:focus{\n background-color:var(--chop-cta-link--secondary-bg-color-focus--computed);\n color:var(--chop-cta-link--secondary-color-focus--computed);\n font-weight:var(--chop-cta-link--secondary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--secondary-ring-focus--computed);\n outline-offset:2px;\n }\n\nchop-cta-link .btn.secondary:active{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n }\n\nchop-cta-link .btn.secondary[aria-disabled='true']{\n background-color:var(--chop-cta-link--secondary-disabled-bg-color--computed);\n color:var(--chop-cta-link--secondary-disabled-color--computed);\n font-weight:var(--chop-cta-link--secondary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--secondary-disabled-ring--computed);\n}\n\nchop-cta-link .btn.link{\n position:relative;\n padding:0;\n color:var(--chop-cta-link--link-color--computed);\n font-weight:var(--fw-semibold);\n border-radius:0.5rem;\n text-decoration:none;\n background:transparent;\n}\n\nchop-cta-link .btn.link::after{\n content:'';\n display:none;\n position:absolute;\n bottom:0;\n left:0;\n right:0;\n margin-left:auto;\n margin-right:auto;\n border:1px solid var(--chop-cta-link--link-color--computed);\n }\n\nchop-cta-link .btn.link .chevron-icon{\n transition:0.3s ease-in-out;\n }\n\nchop-cta-link .btn.link:hover{\n color:var(--chop-cta-link--link-color-hover--computed);\n }\n\nchop-cta-link .btn.link:hover::after{\n display:block;\n }\n\nchop-cta-link .btn.link:hover > .chevron-icon{\n transform:translateX(8px);\n }\n\nchop-cta-link .btn.link:focus{\n color:var(--chop-cta-link--link-color-focus--computed);\n font-weight:var(--chop-cta-link--link-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-ring--computed);\n }\n\nchop-cta-link .btn.link[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\n\nchop-cta-link .btn.link.reversed{\n background-color:transparent;\n color:var(--chop-cta-link--link-reversed-color--computed);\n}\n\nchop-cta-link .btn.link.reversed::after{\n border:1px solid var(--chop-cta-link--link-reversed-color--computed);\n }\n\nchop-cta-link .btn.link.reversed:hover::after{\n display:block;\n }\n\nchop-cta-link .btn.link.reversed:focus{\n color:var(--chop-cta-link--link-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--link-reversed-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-reversed-color--computed);\n }\n\nchop-cta-link .btn.link.no-hover::after{\n display:none !important;\n }\n\nchop-cta-link .btn.link.reversed[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\n\nchop-cta-link .btn.full-width{\n display:flex;\n width:100%;\n justify-content:space-between;\n}\n\nchop-cta-link .heart-icon{\n margin-right:var(--spacing-01);\n}\n\nchop-cta-link .external-icon{\n margin-left:var(--spacing-01);\n}\n\nchop-cta-link .chevron-icon{\n margin-left:auto;\n}\n\n@media print{\n chop-cta-link .btn.link.reversed{\n color:currentColor;\n background:transparent;\n }\n}\n\n.card-wrapper{\n border-radius:6px;\n display:flex;\n flex-direction:column;\n align-items:flex-start;\n background-color:var(--color-brown-100);\n height:100%;\n}\n\n.image-wrapper{\n position:relative;\n overflow:hidden;\n border-radius:6px 6px 0 0;\n background-color:#f5f5f5;\n}\n\n.image-wrapper img{\n width:100%;\n height:auto;\n object-fit:cover;\n }\n\n.content-wrapper{\n display:flex;\n flex-direction:column;\n align-items:stretch;\n justify-content:space-between;\n width:100%;\n flex-wrap:wrap;\n flex:1 0 auto;\n}\n\n.content-inner-wrapper{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-04);\n margin:var(--spacing-06) var(--spacing-08);\n}\n\n.content-inner-wrapper .eyebrow-wrapper{\n color:var(--color-brown-900);\n }\n\n.content-inner-wrapper .eyebrow-wrapper:hover{\n text-decoration:underline;\n }\n\n.content-inner-wrapper .date-wrapper{\n color:var(--color-brown-900);\n font-family:var(--ff-display);\n font-size:var(--spacing-05);\n line-height:120%;\n }\n\n.content-inner-wrapper .description{\n color:var(--color-brown-900);\n font-family:'Georgia', 'Arial', 'serif';\n font-size:var(--spacing-05);\n font-weight:400;\n line-height:30px;\n }\n\n.content-inner-wrapper .location-wrapper{\n display:flex;\n align-items:center;\n gap:var(--spacing-04);\n }\n\n.content-inner-wrapper .location-wrapper .location{\n color:var(--color-brown-900);\n font-family:var(--ff-display);\n font-size:var(--spacing-05);\n font-weight:400;\n line-height:30px;\n }\n\n.content-inner-wrapper .location-wrapper .icon-wrapper{\n width:40px;\n color:var(--color-green-500);\n height:100%;\n padding-top:var(--spacing-02);\n }\n\n.content-inner-wrapper .location-wrapper .icon-wrapper svg{\n width:40px;\n height:40px;\n }\n\n.cta-position{\n display:flex;\n justify-content:flex-end;\n}\n\n.cta-position a{\n color:var(--color-blue-600);\n text-decoration:none;\n }\n\n.cta-position a:hover{\n cursor:pointer;\n }\n\n.cta-position a:focus{\n outline:2px solid var(--color-blue-600);\n outline-offset:2px;\n }\n\n.cta-position .cta-wrapper{\n border-radius:6px 0 6px 0;\n display:flex;\n align-items:center;\n justify-content:center;\n height:48px;\n width:48px;\n color:var(--color-blue-600);\n background-color:var(--color-brown-200);\n z-index:5;\n }\n\n.cta-position .cta-wrapper svg{\n width:24px;\n height:24px;\n }\n\n.card-linked a{\n display:flex;\n flex-direction:column;\n height:100%;\n width:100%;\n text-decoration:none !important;\n}\n\n.card-linked a [level-size='eyebrow']{\n color:var(--color-brown-900);\n }\n\n.card-linked a [level-size='eyebrow']:hover{\n color:var(--color-brown-900);\n }\n\n.card-linked a [level-size='md']{\n color:var(--color-blue-600);\n }\n\n.card-linked a .heading{\n color:var(--color-blue-700);\n }\n\n.card-linked a:hover{\n cursor:pointer;\n }\n\n.card-linked a:hover .heading{\n color:var(--color-blue-800);\n }\n\n.card-linked a:focus,\n .card-linked a:hover{\n outline-offset:8px;\n border-radius:8px;\n }\n\n.card-linked a:focus .cta-wrapper, .card-linked a:hover .cta-wrapper{\n background-color:var(--color-blue-600);\n color:var(--color-brown-200);\n cursor:pointer;\n }\n\n.card-linked a:focus .heading, .card-linked a:hover .heading{\n text-decoration:underline;\n }\n\n.card-linked a:focus{\n outline:2px solid var(--color-blue-600);\n }\n\n.border-color-blue{\n border-top:6px solid var(--color-blue-500);\n border-radius:6px 6px 0 0;\n}\n\n.border-color-pink{\n border-top:6px solid var(--color-pink-800);\n border-radius:6px 6px 0 0;\n}\n\n.border-color-green{\n border-top:6px solid var(--color-green-500);\n border-radius:6px 6px 0 0;\n}\n\n.border-color-dark_blue{\n border-top:6px solid var(--color-blue-600);\n border-radius:6px 6px 0 0;\n}\n\n.border-color-beige{\n border-top:6px solid var(--color-brown-800);\n border-radius:6px 6px 0 0;\n}\n\n.border-color-none{\n border-top:6px solid transparent;\n border-radius:6px 6px 0 0;\n}\n`;","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport componentStyles from './chop-basic-card.css.lit';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { isValidUrl } from '../../../utilities/isValidUrl';\nimport { isInType } from '../../../utilities/isInType';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '../chop-icon/chop-icon';\nimport '../chop-heading/chop-heading';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n/**\n * The basic card component\n * @element chop-card\n *\n * @property top color - The border color to show up when there is no image\n *\n * @slot image\n * @slot eyebrow\n * @slot heading - NOTE: Styles are in the heading component\n * @slot sub-heading\n * @slot date\n * @slot description\n * @slot location\n * @slot cta-link\n */\n\nexport enum topColorOptions {\n 'Blue' = 'blue',\n 'Dark Blue' = 'dark_blue',\n 'Green' = 'green',\n 'Beige' = 'beige',\n 'Dark Pink' = 'pink',\n 'None' = 'none',\n}\ntype TopColorOptions = `${topColorOptions}`;\n\n@customElement('chop-basic-card')\nexport class CHOPBasicCard extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n slots = new SlotManager(this);\n\n @property({\n reflect: true,\n type: String,\n attribute: 'top-border-color',\n converter: value => {\n return isInType(value, Object.values(topColorOptions), 'TopColorOptions')\n ? value\n : 'blue';\n },\n })\n topBorderColor: TopColorOptions = 'none';\n\n @property({\n type: String,\n attribute: 'link-href',\n converter: value => {\n return isValidUrl(value) ? value : null;\n },\n })\n linkHREF: String | null = null;\n\n @property({\n type: String,\n attribute: 'link-text',\n converter: value => {\n return value ? value : null;\n },\n })\n linkText: String | null = null;\n\n render(): TemplateResult {\n const classes = {\n 'card-linked': this.linkHREF !== null,\n 'card-wrapper': true,\n [`border-color-${this.topBorderColor}`]:\n !this.slots.exist('image') && this.topBorderColor,\n };\n\n return this.linkHREF\n ? html` `\n : html`
\n ${this.imageTemplate()}\n
\n ${this.eyebrowTemplate()} ${this.headingTemplate()}\n ${this.dateTemplate()} ${this.descriptionTemplate()}\n ${this.locationTemplate()}\n
\n
`;\n }\n\n /**\n * This method is used to create a template for the 'image' slot.\n * It first checks if the 'image' slot exists.\n * If the 'image' slot does not exist, it returns an empty template.\n * If the 'image' slot exists, it returns a template with a div wrapper and the 'image' slot.\n *\n * @returns {TemplateResult} - A lit-html `TemplateResult`. If the 'image' slot exists, it will return a template with the 'image' slot. Otherwise, it will return an empty template.\n */\n imageTemplate(): TemplateResult | typeof nothing {\n // Check if the 'image' slot exists.\n if (!this.slots.exist('image')) {\n // If the 'image' slot does not exist, return early with an empty template.\n return nothing;\n }\n\n // If the 'image' slot exists, return the appropriate template.\n return html`
\n \n
`;\n }\n\n /**\n * This method is used to create a template for the 'eyebrow' slot.\n * It first checks if the 'eyebrow' slot exists.\n * If the 'eyebrow' slot does not exist, it returns an empty template.\n * If the 'eyebrow' slot exists, it returns a template with a `chop-heading` element and the 'eyebrow' slot.\n *\n * @returns {TemplateResult} - A lit-html `TemplateResult`. If the 'eyebrow' slot exists, it will return a template with the 'eyebrow' slot. Otherwise, it will return an empty template.\n */\n eyebrowTemplate(): TemplateResult | typeof nothing {\n // Check if the 'eyebrow' slot exists.\n if (!this.slots.exist('eyebrow')) {\n // If the 'eyebrow' slot does not exist, return early with an empty template.\n return nothing;\n }\n\n // If the 'eyebrow' slot exists, return the appropriate template.\n return html`\n
\n \n
\n `;\n }\n\n /**\n * This method is used to create a template for the 'heading' slot.\n * It first checks if the 'heading' slot exists.\n * If the 'heading' slot does not exist, it returns an empty template.\n * If the 'heading' slot exists, it returns a template with a `chop-heading` element and the 'heading' slot.\n *\n * @returns {TemplateResult} - A lit-html `TemplateResult`. If the 'heading' slot exists, it will return a template with the 'heading' slot. Otherwise, it will return an empty template.\n */\n headingTemplate(): TemplateResult | typeof nothing {\n // Check if the 'heading' slot exists.\n if (!this.slots.exist('heading')) {\n // If the 'heading' slot does not exist, return early with an empty template.\n return nothing;\n }\n\n // If the 'heading' slot exists, return the appropriate template.\n return html`
\n \n
`;\n }\n\n /**\n * This method is used to create a template for the 'date' slot.\n * It first checks if the 'date' slot exists.\n * If the 'date' slot does not exist, it returns an empty template.\n * If the 'date' slot exists, it returns a template with a div wrapper and the 'date' slot.\n *\n * @returns {TemplateResult} - A lit-html `TemplateResult`. If the 'date' slot exists, it will return a template with the 'date' slot. Otherwise, it will return an empty template.\n */\n dateTemplate(): TemplateResult | typeof nothing {\n // Check if the 'date' slot exists.\n if (!this.slots.exist('date')) {\n // If the 'date' slot does not exist, return early with an empty template.\n return nothing;\n }\n\n // If the 'date' slot exists, return the appropriate template.\n return html`
\n \n
`;\n }\n\n /**\n * This method is used to create a template for the 'description' slot.\n * It first checks if the 'description' slot exists.\n * If the 'description' slot does not exist, it returns an empty template.\n * If the 'description' slot exists, it returns a template with a div wrapper and the 'description' slot.\n *\n * @returns {TemplateResult} - A lit-html `TemplateResult`. If the 'description' slot exists, it will return a template with the 'description' slot. Otherwise, it will return an empty template.\n */\n descriptionTemplate(): TemplateResult | typeof nothing {\n // Check if the 'description' slot exists.\n if (!this.slots.exist('description')) {\n // If the 'description' slot does not exist, return early with an empty template.\n return nothing;\n }\n\n // If the 'description' slot exists, return the appropriate template.\n return html`
\n \n
`;\n }\n\n /**\n * This method is used to create a template for the 'location' slot.\n * It first checks if the 'location' slot exists.\n * If the 'location' slot does not exist, it returns an empty template.\n * If the 'location' slot exists, it returns a template with a div wrapper, an icon, and the 'location' slot.\n *\n * @returns {TemplateResult} - A lit-html `TemplateResult`. If the 'location' slot exists, it will return a template with the 'location' slot. Otherwise, it will return an empty template.\n */\n locationTemplate(): TemplateResult | typeof nothing {\n // Check if the 'location' slot exists.\n if (!this.slots.exist('location')) {\n // If the 'location' slot does not exist, return early with an empty template.\n return nothing;\n }\n\n // If the 'location' slot exists, return the appropriate template.\n return html`\n
\n
\n \n
\n
\n \n
\n
\n `;\n }\n\n CTATemplate() {\n return html`\n
\n
\n \n \n
\n
\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-basic-card': CHOPBasicCard;\n }\n}\n","//\n// Returns a boolean whether the value is a valid URL\n//\nexport function isValidUrl(urlString: string | null) {\n if (!urlString) {\n return false;\n }\n try {\n return Boolean(new URL(urlString));\n } catch (e) {\n return false;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n overflow:hidden;\n}\n\n.blockquote-wrapper{\n display:flex;\n flex-direction:column;\n padding-right:3.5rem;\n padding-left:2rem;\n border-width:6px;\n border-style:solid;\n border-width:0 0 0 6px;\n}\n\n.blockquote-wrapper.mobile{\n border-left-width:0;\n border-top-width:6px;\n text-align:center;\n padding-left:2rem;\n padding-right:2rem;\n }\n\n.blockquote-wrapper.light_green{\n border-color:var(--color-green-500);\n }\n\n.blockquote-wrapper.dark_pink{\n border-color:var(--color-pink-500);\n }\n\n.blockquote-wrapper.light_blue{\n border-color:var(--color-blue-500);\n }\n\n.blockquote-wrapper.dark_blue{\n border-color:var(--color-blue-500);\n }\n\n.blockquote-wrapper.beige{\n border-color:var(--color-brown-700);\n }\n\n.content-wrapper{\n position:relative;\n display:flex;\n flex-direction:row;\n align-items:center;\n align-self:center;\n justify-content:space-between;\n gap:var(--spacing-08);\n margin-bottom:0;\n padding:var(--spacing-16) 0;\n z-index:3;\n width:100%;\n}\n\n.mobile .content-wrapper{\n flex-direction:column;\n padding:var(--spacing-08) var(--spacing-06);\n margin-bottom:10%;\n}\n\n.icon-wrapper{\n width:100%;\n height:100%;\n max-width:38px;\n}\n\n.quote-wrapper{\n display:flex;\n flex-direction:column;\n padding-top:var(--spacing-04);\n gap:var(--spacing-08);\n}\n\n.mobile .quote-wrapper{\n padding-top:0;\n gap:var(--spacing-04);\n}\n\n.quote{\n font-family:'Georgia', 'Arial', 'serif';\n font-size:var(--fs-xl);\n line-height:var(--lh-xl);\n}\n\n.attribution{\n display:flex;\n align-items:center;\n gap:var(--spacing-04);\n font-family:'TP Rubrik';\n font-family:var(--ff-display, 'TP Rubrik');\n font-size:16px;\n font-size:var(--fs-base, 16px);\n}\n\n.attribution::before{\n content:'';\n border:1px solid;\n width:var(--spacing-08);\n }\n\n@media screen and (min-width: 1100px){\n button.accordion-button{\n padding:var(--spacing-04);\n }\n}\n`;","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport { screenSizeMap } from '../../controllers/screen-size-controller';\nimport componentStyles from './chop-blockquote.css.lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '../chop-container/chop-container';\nimport '../chop-woven-svgs/chop-woven-svgs';\nimport '../chop-icon/chop-icon';\nimport { isInType } from '../../../utilities/isInType';\n\nexport enum blockquoteBackgroundColors {\n 'Light Blue' = 'light_blue',\n 'Dark Blue' = 'dark_blue',\n 'Light Green' = 'light_green',\n 'Beige' = 'beige',\n 'Dark Pink' = 'dark_pink',\n}\n\nexport type BlockquoteBackgroundColors = `${blockquoteBackgroundColors}`;\n\n// maps the component BG color desired colors in wovenSVG\nenum wovenSVGColorMap {\n 'light_blue' = 'light_blue-reverse',\n 'dark_blue' = 'darker_blue',\n 'light_green' = 'light_green-reverse',\n 'beige' = 'beige',\n 'dark_pink' = 'dark_pink',\n}\nenum mobileWovenSVGColorMap {\n 'light_blue' = 'light_blue-reverse',\n 'dark_blue' = 'dark_blue',\n 'light_green' = 'lighter_green-reverse',\n 'beige' = 'light_beige',\n 'dark_pink' = 'pink',\n}\n\n/*\n * The CHOP Blockquote component\n * @element chop-blockquote\n * @slot default - slot for quote\n * @slot attribution - slot for attribution\n */\n@customElement('chop-blockquote')\nexport class CHOPBlockquote extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n resizeController = new ResizeController(this);\n mobileBreakpoint = screenSizeMap.get('md') as number;\n isMobile =\n this.resizeController.currentComponentWidth <= this.mobileBreakpoint;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'theme-color',\n converter: value => {\n return isInType(\n value,\n Object.values(blockquoteBackgroundColors),\n 'BlockquoteBackgroundColors'\n )\n ? value\n : 'dark_pink';\n },\n })\n themeColor: BlockquoteBackgroundColors;\n\n render(): TemplateResult {\n this.isMobile =\n this.resizeController.currentComponentWidth <= this.mobileBreakpoint;\n const classes = {\n 'blockquote-wrapper': true,\n [`${this.themeColor}`]: this.themeColor,\n 'mobile': this.isMobile,\n };\n\n return html` \n
\n ${this.wovenSVGTemplate()}\n
\n
\n \n
\n
${this.quoteTemplate()}
\n
\n \n
\n
\n
\n `;\n }\n\n wovenSVGTemplate() {\n const wovenSVG = this.isMobile ? `desktop_bottom` : `desktop_top_right`;\n const hPos = this.isMobile ? 'center-offset-left' : 'right';\n const color = this.isMobile\n ? mobileWovenSVGColorMap[this.themeColor]\n : wovenSVGColorMap[this.themeColor];\n return html`\n
\n \n
\n `;\n }\n\n quoteTemplate() {\n if (this.slots.exist('quote')) {\n return html`
\n \n
\n ${this.attributionTemplate()}`;\n } else {\n return nothing;\n }\n }\n\n attributionTemplate() {\n if (this.slots.exist('attribution')) {\n return html`
\n \n
`;\n } else {\n return nothing;\n }\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n.btn{\n display:inline-flex;\n flex-wrap:nowrap;\n align-items:center;\n cursor:pointer;\n transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, outline, outline-color;\n transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration:300ms;\n text-decoration-line:none;\n outline:none;\n border:none;\n border-radius:0.5rem;\n line-height:1.5;\n background:transparent;\n\n font-family:var(--chop-button--family--computed);\n font-weight:var(--chop-button--weight--computed);\n padding:var(--chop-button--padding--computed);\n}\n\n.btn[aria-disabled='true']{\n pointer-events:none;\n cursor:not-allowed;\n user-select:none;\n}\n\n.btn.small{\n font-size:var(--fs-sm);\n line-height:var(--lh-sm);\n}\n\n.btn.medium{\n font-size:var(--fs-base);\n line-height:var(--lh-md);\n}\n\n.btn.large{\n font-size:var(--fs-lg);\n line-height:var(--lh-lg);\n}\n\n.btn.primary{\n width:100%;\n justify-content:center;\n background-color:var(--chop-button--primary-bg-color--computed);\n color:var(--chop-button--primary-color--computed);\n font-weight:var(--chop-button--primary-weight--computed);\n border:2px solid var(--chop-button--primary-ring-hover--computed);\n box-shadow:var(--chop-button--primary-ring--computed);\n}\n\n@media (min-width: 1100px){\n\n.btn.primary{\n justify-content:space-evenly\n}\n }\n\n.btn.primary:hover,\n .btn.primary:active{\n background-color:var(--chop-button--primary-color--computed);\n color:var(--chop-button--primary-bg-color--computed);\n font-weight:var(--chop-button--primary-weight-hover--computed);\n box-shadow:var(--chop-button--primary-ring-hover--computed);\n }\n\n.btn.primary:focus{\n background-color:var(--chop-button--primary-bg-color-focus--computed);\n color:var(--chop-button--primary-color--computed);\n font-weight:var(--chop-button--primary-weight-focus--computed);\n box-shadow:var(--chop-button--primary-ring-focus--computed);\n outline:2px solid var(--chop-button--primary-ring-focus--computed);\n }\n\n.btn.primary[aria-disabled='true']{\n background-color:var(--chop-button--primary-disabled-bg-color--computed);\n color:var(--chop-button--primary-disabled-color--computed);\n font-weight:var(--chop-button--primary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-button--primary-disabled-ring--computed);\n}\n\n.btn.primary.reversed{\n background-color:var(--chop-button--primary-reversed-bg-color--computed);\n color:var(--chop-button--primary-reversed-color--computed);\n font-weight:var(--chop-button--primary-reversed-weight--computed);\n box-shadow:var(--chop-button--primary-reversed-ring--computed);\n}\n\n.btn.primary.reversed:hover,\n .btn.primary.reversed:active{\n background-color:var(\n --chop-button--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-button--primary-reversed-color-hover--computed);\n font-weight:var(--chop-button--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-button--primary-color--computed);\n box-shadow:var(--chop-button--primary-reversed-ring-hover--computed);\n }\n\n.btn.primary.reversed:focus{\n background-color:var(--chop-button--primary-color-focus--computed);\n font-weight:var(--chop-button--primary-weight-focus--computed);\n box-shadow:var(--chop-button--primary-ring-focus--computed);\n outline:2px solid var(--chop-button--primary-ring-focus--computed);\n }\n\n.btn.primary.reversed[aria-disabled='true']{\n background-color:var(\n --chop-button--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-button--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-button--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-button--primary-reversed-disabled-ring--computed);\n}\n\n.btn.outline{\n background-color:var(--chop-button--outline-bg-color--computed);\n color:var(--chop-button--outline-color--computed);\n font-weight:var(--chop-button--outline-weight--computed);\n border:2px solid var(--chop-button--outline-ring--computed);\n box-shadow:var(--chop-button--outline-ring--computed);\n}\n\n.btn.outline:hover{\n background-color:var(--chop-button--outline-bg-color-hover--computed);\n color:var(--chop-button--outline-color-hover--computed);\n font-weight:var(--chop-button--outline-weight-hover--computed);\n box-shadow:var(--chop-button--outline-ring-hover--computed);\n }\n\n.btn.outline:focus{\n color:var(--chop-button--outline-color-focus--computed);\n font-weight:var(--chop-button--outline-weight-focus--computed);\n box-shadow:var(--chop-button--outline-ring-focus--computed);\n outline:2px solid var(--chop-button--outline-ring-focus--computed);\n outline-offset:2px;\n }\n\n.btn.outline[aria-disabled='true']{\n background-color:var(--chop-button--outline-disabled-bg-color--computed);\n color:var(--chop-button--outline-disabled-color--computed);\n font-weight:var(--chop-button--outline-disabled-weight--computed);\n border:2px solid var(--chop-button--outline-disabled-color--computed);\n box-shadow:var(--chop-button--outline-disabled-ring--computed);\n}\n\n.btn.outline.reversed{\n background-color:var(--chop-button--outline-reversed-bg-color--computed);\n color:var(--chop-button--outline-reversed-color--computed);\n font-weight:var(--chop-button--outline-reversed-weight--computed);\n border:2px solid var(--chop-button--outline-reversed-ring--computed);\n box-shadow:var(--chop-button--outline-reversed-ring--computed);\n}\n\n.btn.outline.reversed:hover,\n .btn.outline.reversed:active{\n background-color:var(\n --chop-button--outline-reversed-bg-color-hover--computed\n );\n color:var(--chop-button--outline-reversed-color-hover--computed);\n font-weight:var(--chop-button--outline-reversed-weight-hover--computed);\n box-shadow:var(--chop-button--outline-reversed-ring-hover--computed);\n }\n\n.btn.outline.reversed:focus{\n color:var(--chop-button--outline-reversed-color-focus--computed);\n font-weight:var(--chop-button--outline-reversed-weight-focus--computed);\n box-shadow:var(--chop-button--outline-reversed-ring-focus--computed);\n outline:2px solid var(--chop-button--outline-reversed-ring-focus--computed);\n }\n\n.btn.outline.reversed[aria-disabled='true']{\n background-color:var(\n --chop-button--outline-reversed-disabled-bg-color--computed\n );\n color:var(--chop-button--outline-reversed-disabled-color--computed);\n font-weight:var(--chop-button--outline-reversed-disabled-weight--computed);\n border:2px solid var(--chop-button--outline-reversed-disabled-color--computed);\n box-shadow:var(--chop-button--outline-reversed-disabled-ring--computed);\n}\n\n.btn.secondary{\n background-color:var(--chop-button--secondary-bg-color--computed);\n color:var(--chop-button--secondary-color--computed);\n font-weight:var(--chop-button--secondary-weight--computed);\n border:2px solid var(--chop-button--secondary-ring-hover--computed);\n box-shadow:var(--chop-button--secondary-ring--computed);\n}\n\n.btn.secondary:hover{\n background-color:var(--chop-button--secondary-bg-color-hover--computed);\n color:var(--chop-button--secondary-color-hover--computed);\n font-weight:var(--chop-button--secondary-weight-hover--computed);\n box-shadow:var(--chop-button--secondary-ring-hover--computed);\n }\n\n.btn.secondary:focus{\n background-color:var(--chop-button--secondary-bg-color-focus--computed);\n color:var(--chop-button--secondary-color-focus--computed);\n font-weight:var(--chop-button--secondary-weight-focus--computed);\n box-shadow:var(--chop-button--secondary-ring-focus--computed);\n outline:2px solid var(--chop-button--secondary-ring-focus--computed);\n outline-offset:2px;\n }\n\n.btn.secondary:active{\n background-color:var(--chop-button--secondary-bg-color--computed);\n }\n\n.btn.secondary[aria-disabled='true']{\n background-color:var(--chop-button--secondary-disabled-bg-color--computed);\n color:var(--chop-button--secondary-disabled-color--computed);\n font-weight:var(--chop-button--secondary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-button--secondary-disabled-ring--computed);\n}\n\n.btn.link{\n position:relative;\n padding:0;\n color:inherit;\n font-weight:var(--fw-medium);\n border-radius:0.5rem;\n text-decoration:none;\n background:transparent;\n}\n\n.btn.link::after{\n content:'';\n display:none;\n position:absolute;\n bottom:0;\n left:0;\n right:0;\n margin-left:auto;\n margin-right:auto;\n border:1px solid var(--chop-button--link-color--computed);\n }\n\n.btn.link .icon{\n transition:0.3s ease-in-out;\n }\n\n.btn.link:hover::after{\n display:block;\n }\n\n.btn.link:hover > .icon{\n transform:translateX(8px);\n }\n\n.btn.link:focus{\n color:var(--chop-button--link-color-focus--computed);\n font-weight:var(--chop-button--link-weight-focus--computed);\n outline:2px solid var(--chop-button--link-ring--computed);\n }\n\n.btn.link[aria-disabled='true']{\n color:var(--chop-button--link-disabled-color--computed);\n font-weight:var(--chop-button--link-disabled-weight--computed);\n}\n\n.btn.link.reversed{\n background-color:transparent;\n}\n\n.btn.link.reversed::after{\n border:1px solid var(--chop-button--link-reversed-color--computed);\n }\n\n.btn.link.reversed:hover::after{\n display:block;\n }\n\n.btn.link.reversed:focus{\n color:var(--chop-button--link-reversed-color-focus--computed);\n font-weight:var(--chop-button--link-reversed-weight-focus--computed);\n outline:2px solid var(--chop-button--link-reversed-color--computed);\n }\n\n.btn.link.reversed[aria-disabled='true']{\n color:var(--chop-button--link-disabled-color--computed);\n font-weight:var(--chop-button--link-disabled-weight--computed);\n}\n\n.btn.link.no-hover::after{\n display:none !important;\n }\n\n.btn.no-border{\n border:2px solid transparent;\n}\n\n.heart-icon{\n margin-right:var(--spacing-01);\n}\n`;","import { CSSResultGroup, html, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { OutlineElement, SlotsController } from '@phase2/outline-core';\nimport { LinkTargetType } from '@phase2/outline-core-link';\nimport componentStyles from './chop-button.css.lit';\nimport '../chop-icon/chop-icon';\n\nexport type ButtonVariant = 'primary' | 'outline' | 'secondary' | 'link';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\n/**\n * The Outline Button component\n * @element chop-button\n * @since 1.0.0\n * @attr {string} button-url - The url to use for a link. This will render an anchor element.\n * @attr {string} button-target - The target to use for a link, used in conjunction with the url attribute.\n * @attr {string} button-label -ARIA label attribute to pass down to the resulting button or a element.\n * @attr {string} button-variant - The button variant. One of: link, primary, secondary.\n * @attr {string} button-size - The button size. One of: small, medium, large.\n * @attr {string} icon-name - The icon name to use.\n * @attr {boolean} is-reversed - Whether the button style is reversed.\n * @attr {boolean} is-disabled - Whether the button is disabled.\n * @attr {boolean} heart-icon - Whether the button has a heart icon.\n * @slot - default slot, used for button text.\n * @slot left - slot used for left side icon.\n * @slot right - slot used for right side icon.\n * @todo Convert styles to utilize CSS Variables.\n */\n@customElement('chop-button')\nexport class CHOPButton extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotsController(this);\n\n /**\n * The url to use for a link. This will render an anchor element.\n * Do not set this prop if you want to render a button element.\n */\n @property({ type: String, attribute: 'button-url' })\n buttonUrl: string;\n\n /**\n * ARIA label attribute to pass down to the resulting button or a\n * element. This is required for accessibility if we use a button\n * with an icon only.\n */\n @property({ type: String, attribute: 'button-label' })\n buttonLabel: string;\n\n /**\n * The target to use for a link, used in conjunction with the url attribute.\n */\n @property({ type: String, attribute: 'button-target' })\n buttonTarget: LinkTargetType;\n\n /**\n * The button style variant to use.\n */\n @property({ type: String, attribute: 'button-variant' })\n buttonVariant: ButtonVariant = 'primary';\n\n /**\n * The button size to use.\n */\n @property({ type: String, attribute: 'button-size' })\n buttonSize: ButtonSize = 'medium';\n\n /**\n * Whether the button style is reversed.\n */\n @property({ type: Boolean, attribute: 'is-reversed' }) isReversed = false;\n\n /**\n * Whether to show hover effect on the button or not.\n */\n @property({ type: Boolean, attribute: 'no-hover' }) noHover = false;\n\n /**\n * Whether to show border on the button or not.\n */\n @property({ type: Boolean, attribute: 'no-border' }) noBorder = false;\n\n /**\n * Whether the button is disabled. Only applies to\n * implementations not using the url property\n */\n @property({ type: Boolean, attribute: 'is-disabled' })\n isDisabled = false;\n\n /**\n * Whether the button style is reversed.\n */\n @property({ type: String, attribute: 'icon-name' })\n iconName: string;\n\n /**\n * Whether the button style is reversed.\n */\n @property({ type: Boolean, attribute: 'heart-icon' }) heartIcon = false;\n\n /**\n * A click handler to be passed only to onClick. DO NOT USE @click on this component.\n */\n @property() onClick: () => void;\n\n /**\n * A keyUp handler to be passed to the onKeyUp. DO NOT USE @keyup on this component.\n */\n @property() onKeyUp: () => void;\n\n @state() hasLeftIcon: boolean;\n @state() hasRightIcon: boolean;\n\n firstUpdated(): void {\n this.hasLeftIcon = Boolean(this.slots.exist('left'));\n this.hasRightIcon = Boolean(this.slots.exist('right'));\n }\n\n /**\n * Component render function\n * @returns TemplateResult\n * @todo This should utilize `outline-link` component.\n */\n render(): TemplateResult {\n const buttonVariant = this.buttonVariant;\n const buttonSize = this.buttonSize;\n const buttonClasses = {\n 'btn': true,\n [buttonVariant]: true,\n [buttonSize]: true,\n 'reversed': this.isReversed,\n 'no-hover': this.noHover,\n 'no-border': this.noBorder,\n };\n return this.buttonUrl\n ? html` \n ${this.heartIcon ? this.HeartIconTemplate() : null}\n \n ${this.iconName ? this.iconTemplate() : null}\n `\n : html`\n ${this.heartIcon ? this.HeartIconTemplate() : null}\n \n ${this.iconName ? this.iconTemplate() : null}\n `;\n }\n\n /**\n * Icon template\n */\n iconTemplate() {\n return html`\n \n \n \n `;\n }\n\n /**\n * Heart Icon template\n */\n HeartIconTemplate() {\n return html`\n \n \n \n `;\n }\n\n updated() {\n // checks the is-disabled prop and manages aria-disabled attributes on the element itself.\n if (this.hasAttribute('is-disabled')) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.setAttribute('aria-disabled', 'false');\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-button': CHOPButton;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:flex;\n flex-direction:column;\n flex-grow:1;\n overflow:hidden;\n}\n\nchop-grid.overlap{\n padding-bottom:6rem;\n}\n\nchop-styled-text :host{\n padding:0;\n}\n\nchop-styled-text :host h2,\n chop-styled-text :host h3,\n chop-styled-text :host h4,\n chop-styled-text :host h5,\n chop-styled-text :host h6{\n margin:0;\n margin-block-start:0;\n }\n\nchop-styled-text{\n\n padding:0;\n}\n\nchop-styled-text p:first-child{\n margin-top:0;\n }\n\nchop-styled-text p:last-child{\n margin-bottom:0;\n }\n\n:host([theme-color='dark_pink']) chop-styled-text a{\n color:var(--color-white);\n}\n\n:host([theme-color='dark_blue']) chop-styled-text a{\n color:var(--color-white);\n}\n\n:host([theme-color='dark_green']) chop-styled-text a{\n color:var(--color-white);\n}\n\n:host([theme-color='beige']) chop-styled-text a{\n color:var(--color-brown-900);\n}\n\nchop-cta-link{\n --chop-cta-link--family--computed:var(--chop-cta-link--family, var(--ff-body));\n --chop-cta-link--weight--computed:var(--fw-bold);\n --chop-cta-link--padding-small--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);\n --chop-cta-link--padding-small-hover--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);\n --chop-cta-link--padding-default--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);\n --chop-cta-link--padding-default-hover--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);\n --chop-cta-link--padding-large--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);\n --chop-cta-link--padding-large-hover--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);\n --chop-cta-link--primary-bg-color--computed:var(--color-blue-700);\n --chop-cta-link--primary-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring--computed:var(--chop-cta-link--primary-ring, none);\n --chop-cta-link--primary-bg-color-hover--computed:var(--color-neutral-100);\n --chop-cta-linknknk--primary-color-hover--computed:var(\n --chop-cta-link--primary-color-hover,\n var(--color-blue-600)\n);\n --chop-cta-link--primary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring-hover--computed:var(--color-blue-700);\n --chop-cta-link--primary-bg-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--primary-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--primary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--primary-disabled-bg-color--computed:var(--color-neutral-400);\n --chop-cta-link--primary-disabled-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-disabled-ring--computed:var(--outline-transparent);\n --chop-cta-link--primary-reversed-bg-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-color--computed:var(--color-blue-700);\n --chop-cta-link--primary-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring--computed:var(\n --chop-cta-link--primary-reversed-ring,\n none\n);\n --chop-cta-link--primary-reversed-bg-color-hover--computed:var(\n --bg-color--transparent\n);\n --chop-cta-link--primary-reversed-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring-hover--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-bg-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--primary-reversed-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--primary-reversed-disabled-bg-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--primary-reversed-disabled-color--computed:var(\n --color-neutral-500\n);\n --chop-cta-link--primary-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-bg-color--computed:var(--color-neutral-100);\n --chop-cta-link--outline-color--computed:var(--color-blue-700);\n --chop-cta-link--outline-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring--computed:var(--color-blue-700);\n --chop-cta-link--outline-bg-color-hover--computed:var(--color-blue-700);\n --chop-cta-link--outline-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--outline-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring-hover--computed:var(--color-blue-700);\n --chop-cta-link--outline-bg-color-focus--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--outline-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--outline-disabled-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--outline-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-color--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-bg-color-hover--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-color-hover--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring-hover--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-bg-color-focus--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-color-focus--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring-focus--computed:var(\n --color-blue-500\n);\n --chop-cta-link--outline-reversed-disabled-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--outline-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--secondary-bg-color--computed:var(--color-pink-800);\n --chop-cta-link--secondary-color--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring--computed:var(\n --chop-cta-link--secondary-ring,\n none\n);\n --chop-cta-link--secondary-bg-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-color-hover--computed:var(\n --chop-cta-link--secondary-color-hover,\n var(--color-pink-800)\n);\n --chop-cta-link--secondary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring-hover--computed:var(--color-pink-800);\n --chop-cta-link--secondary-bg-color-focus--computed:var(--color-pink-800);\n --chop-cta-link--secondary-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring-focus--computed:var(--color-pink-800);\n --chop-cta-link--secondary-disabled-bg-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--secondary-disabled-color--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-disabled-ring--computed:var(--outline-transparent);\n --chop-cta-link--link-bg-color--computed:var(--outline-transparent);\n --chop-cta-link--link-color--computed:var(--color-blue-700);\n --chop-cta-link--link-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-ring--computed:var(--color-blue-700);\n --chop-cta-link--link-color-hover--computed:var(--color-blue-800);\n --chop-cta-link--link-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--link-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-disabled-color--computed:var(--color-neutral-400);\n --chop-cta-link--link-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color--computed:var(--color-neutral-100);\n --chop-cta-link--link-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color-hover--computed:var(--color-blue-700);\n --chop-cta-link--link-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--link-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--link-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n}\n\nchop-cta-link .btn{\n display:flex;\n width:fit-content;\n flex-wrap:nowrap;\n align-items:center;\n cursor:pointer;\n transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration:300ms;\n text-decoration-line:none;\n outline:none;\n border:none;\n border-radius:0.5rem;\n line-height:1.5;\n background:transparent;\n\n font-family:var(--chop-cta-link--family--computed);\n font-weight:var(--chop-cta-link--weight--computed);\n padding:var(--chop-cta-link--padding-default--computed);\n}\n\nchop-cta-link .btn[aria-disabled='true']{\n pointer-events:none;\n cursor:not-allowed;\n user-select:none;\n}\n\nchop-cta-link .btn.small{\n font-size:var(--fs-sm);\n line-height:var(--lh-base);\n padding:var(--chop-cta-link--padding-small--computed);\n}\n\nchop-cta-link .btn.small.no-icon{\n padding:var(--spacing-02) var(--spacing-4);\n }\n\nchop-cta-link .btn.medium,\nchop-cta-link .btn.default{\n font-size:var(--fs-base);\n line-height:var(--lh-md);\n}\n\nchop-cta-link .btn.medium.no-icon, chop-cta-link .btn.default.no-icon{\n padding:var(--spacing-02) var(--spacing-6);\n }\n\nchop-cta-link .btn.large{\n font-size:var(--fs-lg);\n line-height:var(--lh-sm);\n padding:var(--chop-cta-link--padding-large--computed);\n}\n\nchop-cta-link .btn.large.no-icon{\n padding:var(--spacing-03) var(--spacing-8);\n }\n\nchop-cta-link .btn.primary{\n background-color:var(--chop-cta-link--primary-bg-color--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight--computed);\n border:2px solid var(--chop-cta-link--primary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring--computed);\n}\n\nchop-cta-link .btn.primary:hover,\n chop-cta-link .btn.primary:active{\n background-color:var(--chop-cta-link--primary-color--computed);\n color:var(--chop-cta-link--primary-bg-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring-hover--computed);\n }\n\nchop-cta-link .btn.primary:focus{\n background-color:var(--chop-cta-link--primary-bg-color-focus--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\n\nchop-cta-link .btn.primary[aria-disabled='true']{\n background-color:var(--chop-cta-link--primary-disabled-bg-color--computed);\n color:var(--chop-cta-link--primary-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-disabled-ring--computed);\n}\n\nchop-cta-link .btn.primary.reversed{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n}\n\nchop-cta-link .btn.primary.reversed:hover,\n chop-cta-link .btn.primary.reversed:active{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n }\n\nchop-cta-link .btn.primary.reversed:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\n\nchop-cta-link .btn.primary.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\n\nchop-cta-link .btn.outline{\n background-color:var(--chop-cta-link--outline-bg-color--computed);\n color:var(--chop-cta-link--outline-color--computed);\n font-weight:var(--chop-cta-link--outline-weight--computed);\n border:2px solid var(--chop-cta-link--outline-ring--computed);\n box-shadow:var(--chop-cta-link--outline-ring--computed);\n}\n\nchop-cta-link .btn.outline:hover{\n background-color:var(--chop-cta-link--outline-bg-color-hover--computed);\n color:var(--chop-cta-link--outline-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-ring-hover--computed);\n }\n\nchop-cta-link .btn.outline:focus{\n background-color:var(--chop-cta-link--outline-bg-color-focus--computed);\n color:var(--chop-cta-link--outline-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-ring-focus--computed);\n outline-offset:2px;\n }\n\nchop-cta-link .btn.outline[aria-disabled='true']{\n background-color:var(--chop-cta-link--outline-disabled-bg-color--computed);\n color:var(--chop-cta-link--outline-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-disabled-ring--computed);\n}\n\nchop-cta-link .btn.outline.reversed{\n background-color:var(--chop-cta-link--outline-reversed-bg-color--computed);\n color:var(--chop-cta-link--outline-reversed-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-ring--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring--computed);\n}\n\nchop-cta-link .btn.outline.reversed:hover,\n chop-cta-link .btn.outline.reversed:active{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-hover--computed);\n }\n\nchop-cta-link .btn.outline.reversed:focus{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-focus--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-reversed-ring-focus--computed);\n }\n\nchop-cta-link .btn.outline.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--outline-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--outline-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-disabled-ring--computed);\n}\n\nchop-cta-link .btn.outline-transparent{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n}\n\nchop-cta-link .btn.outline-transparent:hover,\n chop-cta-link .btn.outline-transparent:active{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n }\n\nchop-cta-link .btn.outline-transparent:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n }\n\nchop-cta-link .btn.outline-transparent[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\n\nchop-cta-link .btn.secondary{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n color:var(--chop-cta-link--secondary-color--computed);\n font-weight:var(--chop-cta-link--secondary-weight--computed);\n border:2px solid var(--chop-cta-link--secondary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring--computed);\n}\n\nchop-cta-link .btn.secondary:hover{\n background-color:var(--chop-cta-link--secondary-bg-color-hover--computed);\n color:var(--chop-cta-link--secondary-color-hover--computed);\n font-weight:var(--chop-cta-link--secondary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-hover--computed);\n }\n\nchop-cta-link .btn.secondary:focus{\n background-color:var(--chop-cta-link--secondary-bg-color-focus--computed);\n color:var(--chop-cta-link--secondary-color-focus--computed);\n font-weight:var(--chop-cta-link--secondary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--secondary-ring-focus--computed);\n outline-offset:2px;\n }\n\nchop-cta-link .btn.secondary:active{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n }\n\nchop-cta-link .btn.secondary[aria-disabled='true']{\n background-color:var(--chop-cta-link--secondary-disabled-bg-color--computed);\n color:var(--chop-cta-link--secondary-disabled-color--computed);\n font-weight:var(--chop-cta-link--secondary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--secondary-disabled-ring--computed);\n}\n\nchop-cta-link .btn.link{\n position:relative;\n padding:0;\n color:var(--chop-cta-link--link-color--computed);\n font-weight:var(--fw-semibold);\n border-radius:0.5rem;\n text-decoration:none;\n background:transparent;\n}\n\nchop-cta-link .btn.link::after{\n content:'';\n display:none;\n position:absolute;\n bottom:0;\n left:0;\n right:0;\n margin-left:auto;\n margin-right:auto;\n border:1px solid var(--chop-cta-link--link-color--computed);\n }\n\nchop-cta-link .btn.link .chevron-icon{\n transition:0.3s ease-in-out;\n }\n\nchop-cta-link .btn.link:hover{\n color:var(--chop-cta-link--link-color-hover--computed);\n }\n\nchop-cta-link .btn.link:hover::after{\n display:block;\n }\n\nchop-cta-link .btn.link:hover > .chevron-icon{\n transform:translateX(8px);\n }\n\nchop-cta-link .btn.link:focus{\n color:var(--chop-cta-link--link-color-focus--computed);\n font-weight:var(--chop-cta-link--link-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-ring--computed);\n }\n\nchop-cta-link .btn.link[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\n\nchop-cta-link .btn.link.reversed{\n background-color:transparent;\n color:var(--chop-cta-link--link-reversed-color--computed);\n}\n\nchop-cta-link .btn.link.reversed::after{\n border:1px solid var(--chop-cta-link--link-reversed-color--computed);\n }\n\nchop-cta-link .btn.link.reversed:hover::after{\n display:block;\n }\n\nchop-cta-link .btn.link.reversed:focus{\n color:var(--chop-cta-link--link-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--link-reversed-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-reversed-color--computed);\n }\n\nchop-cta-link .btn.link.no-hover::after{\n display:none !important;\n }\n\nchop-cta-link .btn.link.reversed[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\n\nchop-cta-link .btn.full-width{\n display:flex;\n width:100%;\n justify-content:space-between;\n}\n\nchop-cta-link .heart-icon{\n margin-right:var(--spacing-01);\n}\n\nchop-cta-link .external-icon{\n margin-left:var(--spacing-01);\n}\n\nchop-cta-link .chevron-icon{\n margin-left:auto;\n}\n\n@media print{\n chop-cta-link .btn.link.reversed{\n color:currentColor;\n background:transparent;\n }\n}\n\n.callout-card-wrapper{\n display:flex;\n justify-content:center;\n}\n\n.content-wrapper{\n position:relative;\n display:flex;\n flex-direction:column;\n grid-gap:var(--spacing-1);\n margin:var(--spacing-12) var(--spacing-4) 12%;\n z-index:2;\n\n column-gap:2rem;\n width:100%;\n max-width:var(--max-w-medium);\n}\n\n.cta-link-wrapper{\n margin-top:var(--spacing-3);\n margin-bottom:var(--spacing-6);\n}\n\n@media (min-width: 860px){\n .content-wrapper{\n grid-column-start:2;\n grid-gap:var(--spacing-6);\n }\n .cta-link-wrapper{\n margin-top:0;\n margin-bottom:var(--spacing-6);\n }\n}\n\n@media (min-width: 1100px){\n .content-wrapper{\n margin-bottom:10%;\n }\n}\n\n@media (min-width: 1400px){\n .content-wrapper{\n margin-top:var(--spacing-20);\n margin-bottom:12%;\n }\n}\n\n.heading-wrapper{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-04);\n}\n\n@media (min-width: 860px){\n\n.heading-wrapper{\n flex-direction:row;\n align-items:center\n}\n }\n\n.heading-wrapper .icon{\n display:inline-grid;\n align-items:center;\n width:100%;\n height:100%;\n width:fit-content;\n }\n\n.description{\n font-family:--font-family-sans-serif;\n font-family:var(--body-md-max-reg-font-family, --font-family-sans-serif);\n font-size:var(--fs-xl);\n}\n\n[slot='links'] > chop-cta-link{\n display:flex;\n flex-direction:column;\n padding:1rem 0;\n color:inherit;\n border-bottom:1px solid;\n}\n\n@media (min-width: 1100px){\n chop-column:first-child{\n display:flex;\n }\n}\n\n.border.links{\n display:flex;\n flex-direction:column;\n margin-bottom:var(--spacing-08);\n border-top:4px solid;\n}\n\n:host .border.color-currentcolor{\n border-color:currentColor;\n}\n\n:host .border.color-white{\n border-color:var(--color-neutral-100);\n}\n\n:host .border.color-light_blue{\n border-color:var(--color-blue-500);\n}\n\n:host .border.color-blue{\n border-color:var(--color-blue-700);\n}\n\n:host .border.color-green{\n border-color:var(--color-green-500);\n}\n\n:host .border.color-brown{\n border-color:var(--color-brown-700);\n}\n\n:host .border.color-dark_brown{\n border-color:var(--color-brown-800);\n}\n\n:host .border.color-pink{\n border-color:var(--color-pink-500);\n}\n\n:host .border.color-dark_pink{\n border-color:var(--color-pink-700);\n}\n`;","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { isInType } from '../../../utilities/isInType';\nimport { contentAlign, ContentAlign } from '../chop-grid/chop-grid';\nimport type { ThemeColor } from '../chop-container/chop-container';\nimport { IconAccentColors, iconAccentColors } from '../chop-icon/chop-icon';\nimport componentStyles from './chop-callout-card.css.lit';\nimport '../chop-container/chop-container';\nimport '../chop-woven-svgs/chop-woven-svgs';\nimport '../chop-cta-link/chop-cta-link';\nimport '../chop-grid/chop-grid';\nimport '../chop-column/chop-column';\nimport '../chop-icon/chop-icon';\n\n/**\n * The CHOP Callout Card Component\n * @element chop-callout-card\n * @property contentAlign - The alignment options\n * @property themeColor - The background color and font colors\n * @property iconName - The name of the icon\n * @property accentColor - The accent color for icon and border\n * @slot icon - The icon slot\n * @slot heading - The heading slot\n * @slot description - The description slot\n * @slot links - The links slot\n */\n\nexport enum themeColors {\n 'Dark Pink' = 'dark_pink',\n 'Dark Green' = 'dark_green',\n 'Dark Blue' = 'dark_blue',\n 'Beige' = 'beige',\n}\n\n@customElement('chop-callout-card')\nexport class CHOPCalloutCard extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n accentColors = iconAccentColors;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'content-align',\n converter: value => {\n return isInType(value, Object.values(contentAlign), 'ContentAlign')\n ? value\n : '12';\n },\n })\n contentAlign: ContentAlign;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'theme-color',\n converter: value => {\n return isInType(value, Object.values(themeColors), 'ThemeColor')\n ? value\n : 'dark_pink';\n },\n })\n themeColor: ThemeColor;\n\n @property({ type: Boolean, reflect: true })\n overlap = false;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'icon-name',\n })\n @property({\n type: String,\n reflect: true,\n attribute: 'icon-name',\n })\n iconName: 'clipboard';\n\n @property({\n type: String,\n attribute: 'accent-color',\n converter: value => {\n return isInType(\n value,\n Object.values(iconAccentColors),\n 'IconAccentColors'\n )\n ? value\n : 'blue';\n },\n })\n accentColor: IconAccentColors;\n\n render(): TemplateResult {\n const classes = {\n 'callout-card-wrapper': true,\n [`border-color-${this.accentColor}`]: this.accentColor,\n };\n\n const ruleClasses = {\n border: true,\n [`color-${this.accentColor}`]: this.accentColor,\n };\n\n return html`\n \n ${this.contentAlign === '3-9' ? this.asideTemplate() : nothing}\n \n
\n
\n
\n ${this.iconTemplate()}\n ${this.slots.conditionalSlot(\n 'heading',\n false,\n 'heading-wrapper'\n )}\n
\n ${this.slotTemplate('description')}\n ${this.slotTemplate('cta-link')}\n ${this.slots.exist('links')\n ? html` \n \n
`\n : nothing}\n
\n \n \n ${this.contentAlign === '9-3' ? this.asideTemplate() : nothing}\n ${!this.overlap ? this.wovenSVGTemplate() : nothing}\n \n `;\n }\n\n iconTemplate() {\n const primaryColor = this.themeColor === 'white' ? 'dark_blue' : 'white';\n\n return html`\n \n `;\n }\n\n slotTemplate(name = '') {\n if (!this.slots.exist(name)) {\n return nothing;\n } else {\n return html`\n ${this.slots.conditionalSlot(name, true, `${name}-wrapper`)}\n `;\n }\n }\n\n asideTemplate() {\n return html`\n \n `;\n }\n\n wovenSVGTemplate() {\n return html`\n
\n \n
\n `;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n overflow:hidden;\n}\n\nchop-grid.overlap{\n padding-bottom:14rem;\n}\n\nchop-cta-link{\n --chop-cta-link--family--computed:var(--chop-cta-link--family, var(--ff-body));\n --chop-cta-link--weight--computed:var(--fw-bold);\n --chop-cta-link--padding-small--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);\n --chop-cta-link--padding-small-hover--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);\n --chop-cta-link--padding-default--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);\n --chop-cta-link--padding-default-hover--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);\n --chop-cta-link--padding-large--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);\n --chop-cta-link--padding-large-hover--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);\n --chop-cta-link--primary-bg-color--computed:var(--color-blue-700);\n --chop-cta-link--primary-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring--computed:var(--chop-cta-link--primary-ring, none);\n --chop-cta-link--primary-bg-color-hover--computed:var(--color-neutral-100);\n --chop-cta-linknknk--primary-color-hover--computed:var(\n --chop-cta-link--primary-color-hover,\n var(--color-blue-600)\n);\n --chop-cta-link--primary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring-hover--computed:var(--color-blue-700);\n --chop-cta-link--primary-bg-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--primary-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--primary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--primary-disabled-bg-color--computed:var(--color-neutral-400);\n --chop-cta-link--primary-disabled-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-disabled-ring--computed:var(--outline-transparent);\n --chop-cta-link--primary-reversed-bg-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-color--computed:var(--color-blue-700);\n --chop-cta-link--primary-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring--computed:var(\n --chop-cta-link--primary-reversed-ring,\n none\n);\n --chop-cta-link--primary-reversed-bg-color-hover--computed:var(\n --bg-color--transparent\n);\n --chop-cta-link--primary-reversed-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring-hover--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-bg-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--primary-reversed-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--primary-reversed-disabled-bg-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--primary-reversed-disabled-color--computed:var(\n --color-neutral-500\n);\n --chop-cta-link--primary-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-bg-color--computed:var(--color-neutral-100);\n --chop-cta-link--outline-color--computed:var(--color-blue-700);\n --chop-cta-link--outline-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring--computed:var(--color-blue-700);\n --chop-cta-link--outline-bg-color-hover--computed:var(--color-blue-700);\n --chop-cta-link--outline-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--outline-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring-hover--computed:var(--color-blue-700);\n --chop-cta-link--outline-bg-color-focus--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--outline-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--outline-disabled-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--outline-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-color--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-bg-color-hover--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-color-hover--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring-hover--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-bg-color-focus--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-color-focus--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring-focus--computed:var(\n --color-blue-500\n);\n --chop-cta-link--outline-reversed-disabled-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--outline-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--secondary-bg-color--computed:var(--color-pink-800);\n --chop-cta-link--secondary-color--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring--computed:var(\n --chop-cta-link--secondary-ring,\n none\n);\n --chop-cta-link--secondary-bg-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-color-hover--computed:var(\n --chop-cta-link--secondary-color-hover,\n var(--color-pink-800)\n);\n --chop-cta-link--secondary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring-hover--computed:var(--color-pink-800);\n --chop-cta-link--secondary-bg-color-focus--computed:var(--color-pink-800);\n --chop-cta-link--secondary-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring-focus--computed:var(--color-pink-800);\n --chop-cta-link--secondary-disabled-bg-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--secondary-disabled-color--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-disabled-ring--computed:var(--outline-transparent);\n}\n\nchop-cta-link .btn{\n display:flex;\n width:fit-content;\n flex-wrap:nowrap;\n align-items:center;\n cursor:pointer;\n transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration:300ms;\n text-decoration-line:none;\n outline:none;\n border:none;\n border-radius:0.5rem;\n line-height:1.5;\n background:transparent;\n\n font-family:var(--chop-cta-link--family--computed);\n font-weight:var(--chop-cta-link--weight--computed);\n padding:var(--chop-cta-link--padding-default--computed);\n}\n\nchop-cta-link .btn[aria-disabled='true']{\n pointer-events:none;\n cursor:not-allowed;\n user-select:none;\n}\n\nchop-cta-link .btn.small{\n font-size:var(--fs-sm);\n line-height:var(--lh-base);\n padding:var(--chop-cta-link--padding-small--computed);\n}\n\nchop-cta-link .btn.small.no-icon{\n padding:var(--spacing-02) var(--spacing-4);\n }\n\nchop-cta-link .btn.medium,\nchop-cta-link .btn.default{\n font-size:var(--fs-base);\n line-height:var(--lh-md);\n}\n\nchop-cta-link .btn.medium.no-icon, chop-cta-link .btn.default.no-icon{\n padding:var(--spacing-02) var(--spacing-6);\n }\n\nchop-cta-link .btn.large{\n font-size:var(--fs-lg);\n line-height:var(--lh-sm);\n padding:var(--chop-cta-link--padding-large--computed);\n}\n\nchop-cta-link .btn.large.no-icon{\n padding:var(--spacing-03) var(--spacing-8);\n }\n\nchop-cta-link .btn.primary{\n background-color:var(--chop-cta-link--primary-bg-color--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight--computed);\n border:2px solid var(--chop-cta-link--primary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring--computed);\n}\n\nchop-cta-link .btn.primary:hover,\n chop-cta-link .btn.primary:active{\n background-color:var(--chop-cta-link--primary-color--computed);\n color:var(--chop-cta-link--primary-bg-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring-hover--computed);\n }\n\nchop-cta-link .btn.primary:focus{\n background-color:var(--chop-cta-link--primary-bg-color-focus--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\n\nchop-cta-link .btn.primary[aria-disabled='true']{\n background-color:var(--chop-cta-link--primary-disabled-bg-color--computed);\n color:var(--chop-cta-link--primary-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-disabled-ring--computed);\n}\n\nchop-cta-link .btn.primary.reversed{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n}\n\nchop-cta-link .btn.primary.reversed:hover,\n chop-cta-link .btn.primary.reversed:active{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n }\n\nchop-cta-link .btn.primary.reversed:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\n\nchop-cta-link .btn.primary.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\n\nchop-cta-link .btn.outline{\n background-color:var(--chop-cta-link--outline-bg-color--computed);\n color:var(--chop-cta-link--outline-color--computed);\n font-weight:var(--chop-cta-link--outline-weight--computed);\n border:2px solid var(--chop-cta-link--outline-ring--computed);\n box-shadow:var(--chop-cta-link--outline-ring--computed);\n}\n\nchop-cta-link .btn.outline:hover{\n background-color:var(--chop-cta-link--outline-bg-color-hover--computed);\n color:var(--chop-cta-link--outline-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-ring-hover--computed);\n }\n\nchop-cta-link .btn.outline:focus{\n background-color:var(--chop-cta-link--outline-bg-color-focus--computed);\n color:var(--chop-cta-link--outline-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-ring-focus--computed);\n outline-offset:2px;\n }\n\nchop-cta-link .btn.outline[aria-disabled='true']{\n background-color:var(--chop-cta-link--outline-disabled-bg-color--computed);\n color:var(--chop-cta-link--outline-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-disabled-ring--computed);\n}\n\nchop-cta-link .btn.outline.reversed{\n background-color:var(--chop-cta-link--outline-reversed-bg-color--computed);\n color:var(--chop-cta-link--outline-reversed-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-ring--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring--computed);\n}\n\nchop-cta-link .btn.outline.reversed:hover,\n chop-cta-link .btn.outline.reversed:active{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-hover--computed);\n }\n\nchop-cta-link .btn.outline.reversed:focus{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-focus--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-reversed-ring-focus--computed);\n }\n\nchop-cta-link .btn.outline.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--outline-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--outline-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-disabled-ring--computed);\n}\n\nchop-cta-link .btn.outline-transparent{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n}\n\nchop-cta-link .btn.outline-transparent:hover,\n chop-cta-link .btn.outline-transparent:active{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n }\n\nchop-cta-link .btn.outline-transparent:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n }\n\nchop-cta-link .btn.outline-transparent[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\n\nchop-cta-link .btn.secondary{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n color:var(--chop-cta-link--secondary-color--computed);\n font-weight:var(--chop-cta-link--secondary-weight--computed);\n border:2px solid var(--chop-cta-link--secondary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring--computed);\n}\n\nchop-cta-link .btn.secondary:hover{\n background-color:var(--chop-cta-link--secondary-bg-color-hover--computed);\n color:var(--chop-cta-link--secondary-color-hover--computed);\n font-weight:var(--chop-cta-link--secondary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-hover--computed);\n }\n\nchop-cta-link .btn.secondary:focus{\n background-color:var(--chop-cta-link--secondary-bg-color-focus--computed);\n color:var(--chop-cta-link--secondary-color-focus--computed);\n font-weight:var(--chop-cta-link--secondary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--secondary-ring-focus--computed);\n outline-offset:2px;\n }\n\nchop-cta-link .btn.secondary:active{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n }\n\nchop-cta-link .btn.secondary[aria-disabled='true']{\n background-color:var(--chop-cta-link--secondary-disabled-bg-color--computed);\n color:var(--chop-cta-link--secondary-disabled-color--computed);\n font-weight:var(--chop-cta-link--secondary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--secondary-disabled-ring--computed);\n}\n\nchop-cta-link .btn.link{\n position:relative;\n padding:0;\n color:var(--chop-cta-link--link-color--computed);\n font-weight:var(--fw-semibold);\n border-radius:0.5rem;\n text-decoration:none;\n background:transparent;\n}\n\nchop-cta-link .btn.link::after{\n content:'';\n display:none;\n position:absolute;\n bottom:0;\n left:0;\n right:0;\n margin-left:auto;\n margin-right:auto;\n border:1px solid var(--chop-cta-link--link-color--computed);\n }\n\nchop-cta-link .btn.link .chevron-icon{\n transition:0.3s ease-in-out;\n }\n\nchop-cta-link .btn.link:hover{\n color:var(--chop-cta-link--link-color-hover--computed);\n }\n\nchop-cta-link .btn.link:hover::after{\n display:block;\n }\n\nchop-cta-link .btn.link:hover > .chevron-icon{\n transform:translateX(8px);\n }\n\nchop-cta-link .btn.link:focus{\n color:var(--chop-cta-link--link-color-focus--computed);\n font-weight:var(--chop-cta-link--link-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-ring--computed);\n }\n\nchop-cta-link .btn.link[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\n\nchop-cta-link .btn.link.reversed{\n background-color:transparent;\n color:var(--chop-cta-link--link-reversed-color--computed);\n}\n\nchop-cta-link .btn.link.reversed::after{\n border:1px solid var(--chop-cta-link--link-reversed-color--computed);\n }\n\nchop-cta-link .btn.link.reversed:hover::after{\n display:block;\n }\n\nchop-cta-link .btn.link.reversed:focus{\n color:var(--chop-cta-link--link-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--link-reversed-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-reversed-color--computed);\n }\n\nchop-cta-link .btn.link.no-hover::after{\n display:none !important;\n }\n\nchop-cta-link .btn.link.reversed[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\n\nchop-cta-link .btn.full-width{\n display:flex;\n width:100%;\n justify-content:space-between;\n}\n\nchop-cta-link .heart-icon{\n margin-right:var(--spacing-01);\n}\n\nchop-cta-link .external-icon{\n margin-left:var(--spacing-01);\n}\n\nchop-cta-link .chevron-icon{\n margin-left:auto;\n}\n\n@media print{\n chop-cta-link .btn.link.reversed{\n color:currentColor;\n background:transparent;\n }\n}\n\n.callout-card-two-column-wrapper{\n display:flex;\n justify-content:center;\n max-width:var(--max-w-medium);\n flex-direction:column;\n flex-wrap:wrap;\n padding:0 var(--spacing-04);\n gap:var(--spacing-08);\n box-sizing:border-box;\n}\n\n.callout-card-container{\n display:flex;\n flex-direction:column;\n row-gap:var(--spacing-8);\n margin-top:var(--spacing-6);\n max-width:100%;\n}\n\n@media (min-width: 1100px){\n .callout-card-two-column-wrapper{\n padding:var(--spacing-04) 0 var(--spacing-12);\n }\n .callout-card-container{\n row-gap:var(--spacing-8);\n }\n}\n\n.content-wrapper{\n position:relative;\n display:flex;\n flex-direction:column;\n margin-bottom:12%;\n padding-bottom:2rem;\n gap:var(--spacing-12);\n z-index:4;\n}\n\n@media (min-width: 1100px){\n\n.content-wrapper{\n flex-direction:row;\n margin-bottom:0;\n padding-bottom:0\n}\n }\n\n.column{\n display:flex;\n flex:1;\n justify-content:space-between;\n flex-direction:column;\n padding:0 0 0 2rem;\n border-left:6px solid;\n gap:var(--spacing-06);\n width:100%;\n box-sizing:border-box;\n}\n\n@media (min-width: 1100px){\n\n.column{\n justify-content:space-between;\n padding:0 2rem\n}\n }\n\n.content-inner{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-06);\n}\n\n.body{\n font-family:--font-family-sans-serif;\n font-family:var(--body-md-max-reg-font-family, --font-family-sans-serif);\n font-size:var(--fs-lg);\n}\n\n@media (min-width: 1100px){\n\n.body{\n font-size:var(--fs-xl)\n}\n }\n\n.cta-link{\n text-align:left;\n}\n\nchop-column{\n z-index:10;\n}\n\n:host .border.color-currentcolor .column{\n border-color:currentColor;\n}\n\n:host .border.color-white .column{\n border-color:var(--color-neutral-100);\n}\n\n:host .border.color-light_blue .column{\n border-color:var(--color-blue-500);\n}\n\n:host .border.color-blue .column{\n border-color:var(--color-blue-700);\n}\n\n:host .border.color-green .column{\n border-color:var(--color-green-500);\n}\n\n:host .border.color-brown .column{\n border-color:var(--color-brown-700);\n}\n\n:host .border.color-dark_brown .column{\n border-color:var(--color-brown-800);\n}\n\n:host .border.color-pink .column{\n border-color:var(--color-pink-500);\n}\n\n:host .border.color-dark_pink .column{\n border-color:var(--color-pink-700);\n}\n`;","import { CSSResultGroup, TemplateResult, html } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport { screenSizeMap } from '../../controllers/screen-size-controller';\nimport { isInType } from '../../../utilities/isInType';\nimport { contentAlign, ContentAlign } from '../chop-grid/chop-grid';\nimport type { ThemeColor } from '../chop-container/chop-container';\nimport { themeColors } from '../chop-container/chop-container';\nimport componentStyles from './chop-callout-card-two-column.css.lit';\nimport { IconAccentColors, iconAccentColors } from '../chop-icon/chop-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '../chop-container/chop-container';\nimport '../chop-woven-svgs/chop-woven-svgs';\nimport '../chop-cta-link/chop-cta-link';\nimport '../chop-grid/chop-grid';\nimport '../chop-column/chop-column';\nimport { nothing } from 'lit';\n\n/**\n * The CHOP Callout Card Two Column Component\n * @element chop-callout-card-two-column\n * @property contentAlign - The alignment options\n * @property themeColor - The background color and font colors\n * @property accentColor - The accent color for icon and border\n * @slot heading - The heading slot\n * @slot title-1 - The title 1 slot\n * @slot title-2 - The title 2 slot\n * @slot body-1 - The body 1 slot\n * @slot body-2 - The body 2 slot\n * @slot cta-link-1 - The cta link 1 slot\n * @slot cta-link-2 - The cta link 2 slot\n */\n@customElement('chop-callout-card-two-column')\nexport class CHOPCalloutCardTwoColumn extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n resizeController = new ResizeController(this, {\n breakpoints: [screenSizeMap.get('lg') as number],\n containerQuery: false,\n });\n\n @property({\n type: String,\n reflect: true,\n attribute: 'content-align',\n converter: value => {\n return isInType(value, Object.values(contentAlign), 'ContentAlign')\n ? value\n : '12';\n },\n })\n contentAlign: ContentAlign;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'theme-color',\n converter: value => {\n return isInType(value, Object.values(themeColors), 'ThemeColor')\n ? value\n : 'dark_pink';\n },\n })\n themeColor: ThemeColor;\n\n @property({\n type: String,\n attribute: 'accent-color',\n converter: value => {\n return isInType(\n value,\n Object.values(iconAccentColors),\n 'IconAccentColors'\n )\n ? value\n : 'blue';\n },\n })\n accentColor: IconAccentColors;\n\n @property({ type: Boolean, reflect: true })\n overlap = false;\n\n // Helper method to check if slots are filled\n hasContent = (slotNames: string[]): boolean => {\n return slotNames.some(name => this.slots.exist(name));\n };\n\n render(): TemplateResult {\n const isMobile = this.resizeController.currentBreakpointRange === 0;\n\n const classes = {\n 'callout-card-two-column-wrapper': true,\n 'border': true,\n [`color-${this.accentColor}`]: this.accentColor,\n };\n\n // Check for content in each column\n const hasFirstColumnContent = this.hasContent([\n 'title-1',\n 'body-1',\n 'cta-link-1',\n ]);\n const hasSecondColumnContent = this.hasContent([\n 'title-2',\n 'body-2',\n 'cta-link-2',\n ]);\n\n return html`\n \n ${this.contentAlign === '3-9' ? this.asideTemplate() : nothing}\n ${hasFirstColumnContent || hasSecondColumnContent\n ? html`\n \n
\n
\n
\n ${this.slots.conditionalSlot('heading', false)}\n
\n
\n ${hasFirstColumnContent\n ? this.renderColumn('1')\n : nothing}\n ${hasSecondColumnContent\n ? this.renderColumn('2')\n : nothing}\n
\n
\n
\n \n `\n : nothing}\n ${this.contentAlign === '9-3' ? this.asideTemplate() : nothing}\n ${isMobile ? this.wovenSVGMobileTemplate() : this.wovenSVGTemplate()}\n \n `;\n }\n\n // Method to render each column\n renderColumn(columnId: string) {\n return html`\n
\n
\n ${this.slots.conditionalSlot(`title-${columnId}`, false)}\n ${this.slots.conditionalSlot(`body-${columnId}`, false, 'body')}\n
\n ${this.slotTemplate(`cta-link-${columnId}`)}\n
\n `;\n }\n\n slotTemplate(name = '') {\n if (!this.slots.exist(name)) {\n return nothing;\n } else {\n return html` `;\n }\n }\n\n asideTemplate() {\n return html`\n \n `;\n }\n\n wovenSVGMobileTemplate() {\n if (this.overlap) {\n return nothing;\n }\n return html`\n
\n \n
\n `;\n }\n\n wovenSVGTemplate() {\n if (this.overlap) {\n return nothing;\n }\n const hPos = this.contentAlign === '3-9' ? 'left' : 'left-250';\n return html`\n
\n \n
\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-callout-card-two-column': CHOPCalloutCardTwoColumn;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:block;\n width:100%;\n}\n.grid-wrapper{\n --gap-count:calc(var(--grid-card--max-count) - 1);\n --gap-count-two:calc(var(--grid-card--max-count) + 2);\n --total-gap-width:calc(var(--gap-count) * var(--grid-layout-column-gap));\n --grid-item--max-width:calc(\n (100% - var(--total-gap-width)) / var(--grid-card--max-count)\n );\n display:grid;\n justify-content:center;\n grid-template-columns:1fr;\n grid-gap:var(--spacing-04);\n}\n@media (min-width: 860px){\n.grid-wrapper{\n grid-gap:var(--spacing-08)\n}\n }\n@media (min-width: 1100px){\n.grid-wrapper{\n --gap-count:calc(var(--grid-card--max-count))\n}\n }\n.solo-breakpoint{\n display:flex;\n width:50%;\n margin:0 25%;\n}\n.solo-breakpoint.person{\n display:block;\n margin:initial;\n width:initial;\n }\n@media (min-width: 860px){\n.solo-breakpoint.person{\n width:50%\n }\n }\n@media screen and (min-width: 669px){\n .grid-wrapper.large-breakpoint,\n .grid-wrapper.medium-breakpoint{\n grid-template-columns:repeat(var(--gap-count), 1fr);\n grid-gap:var(--spacing-08);\n }\n .grid-wrapper.small-breakpoint{\n grid-template-columns:repeat(2, 1fr);\n }\n .equal-height{\n grid-auto-rows:1fr;\n }\n .equal-height > *{\n height:100%;\n }\n}\n@media screen and (min-width: 860px){\n .grid-wrapper.large-breakpoint{\n grid-template-columns:repeat(var(--grid-card--max-count), 1fr);\n }\n}\npicture{\n height:100%;\n width:100%;\n object-fit:cover;\n}\n.justify-self > *{\n justify-self:var(--justify-self);\n }\n.align-self > *{\n align-self:var(--align-self);\n }\n.overlaps{\n margin-top:var(--spacing-04);\n}\n.x-margin{\n margin:0 var(--spacing-04);\n}\n.y-padding-none{\n padding-top:0;\n padding-bottom:0;\n}\n.y-padding-extra-small{\n padding-top:var(--padding-y-xs);\n padding-bottom:var(--padding-y-xs);\n}\n.y-padding-small{\n padding-top:var(--padding-y-sm);\n padding-bottom:var(--padding-y-sm);\n}\n.y-padding-medium{\n padding-top:var(--padding-y-md);\n padding-bottom:var(--padding-y-md);\n}\n.y-padding-large{\n padding-top:var(--padding-y-lg);\n padding-bottom:var(--padding-y-lg);\n}\n@media (min-width: 1100px){\n .overlaps{\n margin-top:-5rem;\n z-index:10;\n position:relative;\n }\n}\n.cta{\n display:flex;\n justify-content:flex-end;\n margin-top:var(--spacing-18);\n}\n.cta.x-margin{\n margin:var(--spacing-18) var(--spacing-04) 0;\n }\n@media (max-width: 1099px){\n :host([left-align-cta-mobile]) .cta{\n justify-content:flex-start;\n }\n }\n@media (min-width: 1100px){\n :host([left-align-cta-desktop]) .cta{\n justify-content:flex-start;\n }\n }\n.has-border{\n --grid-border-offset:calc(var(--grid-border-gap) / 2);\n --grid-border-thickness:1px;\n --grid-border-color:var(--color-brown-700);\n overflow:hidden;\n gap:var(--grid-border-gap);\n}\n`;","import{noChange as t}from\"../lit-html.js\";import{directive as e,Directive as r,PartType as s}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const i=\"important\",n=\" !\"+i,o=e(class extends r{constructor(t){var e;if(super(t),t.type!==s.ATTRIBUTE||\"style\"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error(\"The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.\")}render(t){return Object.keys(t).reduce(((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes(\"-\")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,\"-$&\").toLowerCase()}:${s};`}),\"\")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ht){this.ht=new Set;for(const t in r)this.ht.add(t);return this.render(r)}this.ht.forEach((t=>{null==r[t]&&(this.ht.delete(t),t.includes(\"-\")?s.removeProperty(t):s[t]=\"\")}));for(const t in r){const e=r[t];if(null!=e){this.ht.add(t);const r=\"string\"==typeof e&&e.endsWith(n);t.includes(\"-\")||r?s.setProperty(t,r?e.slice(0,-11):e,r?i:\"\"):s[t]=e}}return t}});export{o as styleMap};\n//# sourceMappingURL=style-map.js.map\n","// Our base component, which all others extend.\nimport { OutlineElement, SlotsController } from '@phase2/outline-core';\nimport { html, TemplateResult, CSSResultGroup, PropertyValueMap } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport componentStyles from './chop-card-grid.css.lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * The Outline Link component\n * @slot - The default, and only slot for this element.\n * @slot cta - The cta slot\n */\n@customElement('chop-card-grid')\nexport class ChopCardGrid extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotsController(this);\n updatedCalled = false;\n\n /**\n * Query selector for the target elements you want to be the top level of the grid. (default slot)\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'unwrap-selector',\n })\n unwrapSelector: string;\n\n /**\n * Vertical gap between items.\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'row-gap',\n })\n rowGap = '1rem';\n\n /**\n * Horizontal gap between items.\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'col-gap',\n })\n colGap = '1rem';\n\n /**\n * Maximum amount of cards.\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'cards',\n })\n cards = '3';\n\n /**\n * Maximum amount of cards.\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'max-cards',\n })\n maxCards = '3';\n\n /**\n * Minimum width of each item\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'item-min-width',\n })\n itemMinWidth = '200px';\n\n /**\n * Minimum width of each item\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'align-self',\n })\n alignSelf = '';\n\n /**\n * Minimum width of each item\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'justify-self',\n })\n justifySelf = '';\n\n /**\n * Whether or not all rows will have equal height.\n */\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'equal-height',\n })\n equalHeight = false;\n\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'border',\n })\n border = false;\n\n /**\n * Gap between items when there's a border present.\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'border-gap',\n })\n borderGap = '4rem';\n\n /**\n * Person property to override solo-breakpoint.\n */\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'person',\n })\n person = false;\n\n @property({ type: Boolean, attribute: 'overlaps' })\n overlaps = false;\n\n @property({ type: Boolean, attribute: 'reverse' })\n reverse = false;\n\n @property({ type: Boolean, attribute: 'x-margin' })\n xMargin = false;\n\n @property({ type: Number, reflect: false })\n slotElementsLength = 3;\n\n /**\n * Whether to left align CTA on mobile.\n */\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'left-align-cta-mobile',\n })\n leftAlignCtaMobile = false;\n\n /**\n * Whether to left align CTA on desktop.\n */\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'left-align-cta-desktop',\n })\n leftAlignCtaDesktop = false;\n\n /**\n * full-with avoid the solo-breakpoint class.\n */\n @property({ type: Boolean, attribute: 'full-width' })\n fullWidth = false;\n\n /**\n * Whether or not this container has top/bottom padding.\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'y-padding',\n })\n yPadding: 'small' | 'medium' | 'large' | 'none';\n\n getSlotElementsLength() {\n const slot = this.shadowRoot?.querySelector('slot');\n const slotElements = slot?.assignedElements({ flatten: true }) || [];\n this.slotElementsLength = slotElements.length;\n }\n\n protected firstUpdated(): void {\n // Call unwrap method after the component is connected and rendered.\n this.unwrapSlottedElements();\n }\n\n updated(changedProperties: PropertyValueMap) {\n super.updated(changedProperties);\n this.updatedCalled = true;\n this.getSlotElementsLength();\n }\n\n /**\n * Unwraps the slotted elements based on the unwrapSelector property.\n */\n unwrapSlottedElements() {\n // Make sure we have a selector, if not bail!\n if (!this.unwrapSelector) {\n return;\n }\n\n try {\n const slot = this.shadowRoot?.querySelector(\n 'slot:not([name])'\n ) as HTMLSlotElement | null;\n const slottedElements = slot?.assignedElements({ flatten: false });\n\n // Loop over the contents of each default slot.\n slottedElements?.forEach(element => {\n const selectedElements = element.querySelectorAll(this.unwrapSelector);\n // Move all selected elements to be direct children of the custom element.\n selectedElements.forEach((selectedElement: Element) => {\n this.appendChild(selectedElement);\n });\n });\n\n // Filter child nodes for elements and remove non-matching elements.\n Array.from(this.childNodes)\n .filter((node): node is Element => node.nodeType === Node.ELEMENT_NODE)\n .forEach(element => {\n if (\n !element.matches(this.unwrapSelector) &&\n !element.hasAttribute('slot')\n ) {\n element.remove();\n }\n });\n } catch (error) {\n console.error('Error in chop-card-grid unwrapSlottedElements:', error);\n }\n }\n\n render(): TemplateResult {\n const gridStyles = {\n '--grid-layout-column-gap': this.colGap,\n '--grid-layout-row-gap': this.rowGap,\n '--grid-card--max-count':\n this.slotElementsLength < parseInt(this.maxCards)\n ? this.slotElementsLength\n : this.maxCards,\n '--grid-item--min-width': this.itemMinWidth,\n '--align-self': this.alignSelf || 'auto',\n '--justify-self': this.justifySelf || 'auto',\n '--grid-overlaps': this.overlaps ? 'true' : 'false',\n '--grid-border-gap': this.borderGap,\n };\n\n const classes = {\n 'grid-wrapper': true,\n 'align-self': this.alignSelf,\n 'justify-self': this.justifySelf,\n 'equal-height': this.equalHeight,\n 'has-border': this.border,\n 'overlaps': this.overlaps,\n 'x-margin': this.xMargin,\n 'person': this.slotElementsLength === 1 && this.person,\n 'solo-breakpoint': this.slotElementsLength === 1 && !this.fullWidth,\n 'small-breakpoint': this.slotElementsLength === 2 && !this.fullWidth,\n 'medium-breakpoint': this.slotElementsLength === 3 && !this.fullWidth,\n 'large-breakpoint': this.slotElementsLength >= 4,\n [`y-padding-${this.yPadding}`]: true,\n };\n\n const ctaClasses = {\n 'cta': true,\n 'x-margin': this.xMargin,\n };\n\n return html`
\n \n
\n ${this.slots.exist('cta')\n ? html`
\n \n
`\n : ''}`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-card-grid': ChopCardGrid;\n }\n}\n","/**\n * SSR Window 4.0.2\n * Better handling for window object in SSR environment\n * https://github.com/nolimits4web/ssr-window\n *\n * Copyright 2021, Vladimir Kharlampidi\n *\n * Licensed under MIT\n *\n * Released on: December 13, 2021\n */\n/* eslint-disable no-param-reassign */\nfunction isObject(obj) {\n return obj !== null && typeof obj === 'object' && 'constructor' in obj && obj.constructor === Object;\n}\nfunction extend(target, src) {\n if (target === void 0) {\n target = {};\n }\n if (src === void 0) {\n src = {};\n }\n Object.keys(src).forEach(key => {\n if (typeof target[key] === 'undefined') target[key] = src[key];else if (isObject(src[key]) && isObject(target[key]) && Object.keys(src[key]).length > 0) {\n extend(target[key], src[key]);\n }\n });\n}\nconst ssrDocument = {\n body: {},\n addEventListener() {},\n removeEventListener() {},\n activeElement: {\n blur() {},\n nodeName: ''\n },\n querySelector() {\n return null;\n },\n querySelectorAll() {\n return [];\n },\n getElementById() {\n return null;\n },\n createEvent() {\n return {\n initEvent() {}\n };\n },\n createElement() {\n return {\n children: [],\n childNodes: [],\n style: {},\n setAttribute() {},\n getElementsByTagName() {\n return [];\n }\n };\n },\n createElementNS() {\n return {};\n },\n importNode() {\n return null;\n },\n location: {\n hash: '',\n host: '',\n hostname: '',\n href: '',\n origin: '',\n pathname: '',\n protocol: '',\n search: ''\n }\n};\nfunction getDocument() {\n const doc = typeof document !== 'undefined' ? document : {};\n extend(doc, ssrDocument);\n return doc;\n}\nconst ssrWindow = {\n document: ssrDocument,\n navigator: {\n userAgent: ''\n },\n location: {\n hash: '',\n host: '',\n hostname: '',\n href: '',\n origin: '',\n pathname: '',\n protocol: '',\n search: ''\n },\n history: {\n replaceState() {},\n pushState() {},\n go() {},\n back() {}\n },\n CustomEvent: function CustomEvent() {\n return this;\n },\n addEventListener() {},\n removeEventListener() {},\n getComputedStyle() {\n return {\n getPropertyValue() {\n return '';\n }\n };\n },\n Image() {},\n Date() {},\n screen: {},\n setTimeout() {},\n clearTimeout() {},\n matchMedia() {\n return {};\n },\n requestAnimationFrame(callback) {\n if (typeof setTimeout === 'undefined') {\n callback();\n return null;\n }\n return setTimeout(callback, 0);\n },\n cancelAnimationFrame(id) {\n if (typeof setTimeout === 'undefined') {\n return;\n }\n clearTimeout(id);\n }\n};\nfunction getWindow() {\n const win = typeof window !== 'undefined' ? window : {};\n extend(win, ssrWindow);\n return win;\n}\n\nexport { getWindow as a, getDocument as g };\n","import { a as getWindow, g as getDocument } from './ssr-window.esm.mjs';\n\nfunction classesToTokens(classes) {\n if (classes === void 0) {\n classes = '';\n }\n return classes.trim().split(' ').filter(c => !!c.trim());\n}\n\nfunction deleteProps(obj) {\n const object = obj;\n Object.keys(object).forEach(key => {\n try {\n object[key] = null;\n } catch (e) {\n // no getter for object\n }\n try {\n delete object[key];\n } catch (e) {\n // something got wrong\n }\n });\n}\nfunction nextTick(callback, delay) {\n if (delay === void 0) {\n delay = 0;\n }\n return setTimeout(callback, delay);\n}\nfunction now() {\n return Date.now();\n}\nfunction getComputedStyle(el) {\n const window = getWindow();\n let style;\n if (window.getComputedStyle) {\n style = window.getComputedStyle(el, null);\n }\n if (!style && el.currentStyle) {\n style = el.currentStyle;\n }\n if (!style) {\n style = el.style;\n }\n return style;\n}\nfunction getTranslate(el, axis) {\n if (axis === void 0) {\n axis = 'x';\n }\n const window = getWindow();\n let matrix;\n let curTransform;\n let transformMatrix;\n const curStyle = getComputedStyle(el);\n if (window.WebKitCSSMatrix) {\n curTransform = curStyle.transform || curStyle.webkitTransform;\n if (curTransform.split(',').length > 6) {\n curTransform = curTransform.split(', ').map(a => a.replace(',', '.')).join(', ');\n }\n // Some old versions of Webkit choke when 'none' is passed; pass\n // empty string instead in this case\n transformMatrix = new window.WebKitCSSMatrix(curTransform === 'none' ? '' : curTransform);\n } else {\n transformMatrix = curStyle.MozTransform || curStyle.OTransform || curStyle.MsTransform || curStyle.msTransform || curStyle.transform || curStyle.getPropertyValue('transform').replace('translate(', 'matrix(1, 0, 0, 1,');\n matrix = transformMatrix.toString().split(',');\n }\n if (axis === 'x') {\n // Latest Chrome and webkits Fix\n if (window.WebKitCSSMatrix) curTransform = transformMatrix.m41;\n // Crazy IE10 Matrix\n else if (matrix.length === 16) curTransform = parseFloat(matrix[12]);\n // Normal Browsers\n else curTransform = parseFloat(matrix[4]);\n }\n if (axis === 'y') {\n // Latest Chrome and webkits Fix\n if (window.WebKitCSSMatrix) curTransform = transformMatrix.m42;\n // Crazy IE10 Matrix\n else if (matrix.length === 16) curTransform = parseFloat(matrix[13]);\n // Normal Browsers\n else curTransform = parseFloat(matrix[5]);\n }\n return curTransform || 0;\n}\nfunction isObject(o) {\n return typeof o === 'object' && o !== null && o.constructor && Object.prototype.toString.call(o).slice(8, -1) === 'Object';\n}\nfunction isNode(node) {\n // eslint-disable-next-line\n if (typeof window !== 'undefined' && typeof window.HTMLElement !== 'undefined') {\n return node instanceof HTMLElement;\n }\n return node && (node.nodeType === 1 || node.nodeType === 11);\n}\nfunction extend() {\n const to = Object(arguments.length <= 0 ? undefined : arguments[0]);\n const noExtend = ['__proto__', 'constructor', 'prototype'];\n for (let i = 1; i < arguments.length; i += 1) {\n const nextSource = i < 0 || arguments.length <= i ? undefined : arguments[i];\n if (nextSource !== undefined && nextSource !== null && !isNode(nextSource)) {\n const keysArray = Object.keys(Object(nextSource)).filter(key => noExtend.indexOf(key) < 0);\n for (let nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex += 1) {\n const nextKey = keysArray[nextIndex];\n const desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);\n if (desc !== undefined && desc.enumerable) {\n if (isObject(to[nextKey]) && isObject(nextSource[nextKey])) {\n if (nextSource[nextKey].__swiper__) {\n to[nextKey] = nextSource[nextKey];\n } else {\n extend(to[nextKey], nextSource[nextKey]);\n }\n } else if (!isObject(to[nextKey]) && isObject(nextSource[nextKey])) {\n to[nextKey] = {};\n if (nextSource[nextKey].__swiper__) {\n to[nextKey] = nextSource[nextKey];\n } else {\n extend(to[nextKey], nextSource[nextKey]);\n }\n } else {\n to[nextKey] = nextSource[nextKey];\n }\n }\n }\n }\n }\n return to;\n}\nfunction setCSSProperty(el, varName, varValue) {\n el.style.setProperty(varName, varValue);\n}\nfunction animateCSSModeScroll(_ref) {\n let {\n swiper,\n targetPosition,\n side\n } = _ref;\n const window = getWindow();\n const startPosition = -swiper.translate;\n let startTime = null;\n let time;\n const duration = swiper.params.speed;\n swiper.wrapperEl.style.scrollSnapType = 'none';\n window.cancelAnimationFrame(swiper.cssModeFrameID);\n const dir = targetPosition > startPosition ? 'next' : 'prev';\n const isOutOfBound = (current, target) => {\n return dir === 'next' && current >= target || dir === 'prev' && current <= target;\n };\n const animate = () => {\n time = new Date().getTime();\n if (startTime === null) {\n startTime = time;\n }\n const progress = Math.max(Math.min((time - startTime) / duration, 1), 0);\n const easeProgress = 0.5 - Math.cos(progress * Math.PI) / 2;\n let currentPosition = startPosition + easeProgress * (targetPosition - startPosition);\n if (isOutOfBound(currentPosition, targetPosition)) {\n currentPosition = targetPosition;\n }\n swiper.wrapperEl.scrollTo({\n [side]: currentPosition\n });\n if (isOutOfBound(currentPosition, targetPosition)) {\n swiper.wrapperEl.style.overflow = 'hidden';\n swiper.wrapperEl.style.scrollSnapType = '';\n setTimeout(() => {\n swiper.wrapperEl.style.overflow = '';\n swiper.wrapperEl.scrollTo({\n [side]: currentPosition\n });\n });\n window.cancelAnimationFrame(swiper.cssModeFrameID);\n return;\n }\n swiper.cssModeFrameID = window.requestAnimationFrame(animate);\n };\n animate();\n}\nfunction getSlideTransformEl(slideEl) {\n return slideEl.querySelector('.swiper-slide-transform') || slideEl.shadowRoot && slideEl.shadowRoot.querySelector('.swiper-slide-transform') || slideEl;\n}\nfunction elementChildren(element, selector) {\n if (selector === void 0) {\n selector = '';\n }\n return [...element.children].filter(el => el.matches(selector));\n}\nfunction showWarning(text) {\n try {\n console.warn(text);\n return;\n } catch (err) {\n // err\n }\n}\nfunction createElement(tag, classes) {\n if (classes === void 0) {\n classes = [];\n }\n const el = document.createElement(tag);\n el.classList.add(...(Array.isArray(classes) ? classes : classesToTokens(classes)));\n return el;\n}\nfunction elementOffset(el) {\n const window = getWindow();\n const document = getDocument();\n const box = el.getBoundingClientRect();\n const body = document.body;\n const clientTop = el.clientTop || body.clientTop || 0;\n const clientLeft = el.clientLeft || body.clientLeft || 0;\n const scrollTop = el === window ? window.scrollY : el.scrollTop;\n const scrollLeft = el === window ? window.scrollX : el.scrollLeft;\n return {\n top: box.top + scrollTop - clientTop,\n left: box.left + scrollLeft - clientLeft\n };\n}\nfunction elementPrevAll(el, selector) {\n const prevEls = [];\n while (el.previousElementSibling) {\n const prev = el.previousElementSibling; // eslint-disable-line\n if (selector) {\n if (prev.matches(selector)) prevEls.push(prev);\n } else prevEls.push(prev);\n el = prev;\n }\n return prevEls;\n}\nfunction elementNextAll(el, selector) {\n const nextEls = [];\n while (el.nextElementSibling) {\n const next = el.nextElementSibling; // eslint-disable-line\n if (selector) {\n if (next.matches(selector)) nextEls.push(next);\n } else nextEls.push(next);\n el = next;\n }\n return nextEls;\n}\nfunction elementStyle(el, prop) {\n const window = getWindow();\n return window.getComputedStyle(el, null).getPropertyValue(prop);\n}\nfunction elementIndex(el) {\n let child = el;\n let i;\n if (child) {\n i = 0;\n // eslint-disable-next-line\n while ((child = child.previousSibling) !== null) {\n if (child.nodeType === 1) i += 1;\n }\n return i;\n }\n return undefined;\n}\nfunction elementParents(el, selector) {\n const parents = []; // eslint-disable-line\n let parent = el.parentElement; // eslint-disable-line\n while (parent) {\n if (selector) {\n if (parent.matches(selector)) parents.push(parent);\n } else {\n parents.push(parent);\n }\n parent = parent.parentElement;\n }\n return parents;\n}\nfunction elementTransitionEnd(el, callback) {\n function fireCallBack(e) {\n if (e.target !== el) return;\n callback.call(el, e);\n el.removeEventListener('transitionend', fireCallBack);\n }\n if (callback) {\n el.addEventListener('transitionend', fireCallBack);\n }\n}\nfunction elementOuterSize(el, size, includeMargins) {\n const window = getWindow();\n if (includeMargins) {\n return el[size === 'width' ? 'offsetWidth' : 'offsetHeight'] + parseFloat(window.getComputedStyle(el, null).getPropertyValue(size === 'width' ? 'margin-right' : 'margin-top')) + parseFloat(window.getComputedStyle(el, null).getPropertyValue(size === 'width' ? 'margin-left' : 'margin-bottom'));\n }\n return el.offsetWidth;\n}\n\nexport { elementParents as a, elementOffset as b, createElement as c, now as d, elementChildren as e, elementOuterSize as f, elementIndex as g, classesToTokens as h, getTranslate as i, elementTransitionEnd as j, isObject as k, getSlideTransformEl as l, elementStyle as m, nextTick as n, elementNextAll as o, elementPrevAll as p, animateCSSModeScroll as q, showWarning as r, setCSSProperty as s, extend as t, deleteProps as u };\n","import { a as getWindow, g as getDocument } from './ssr-window.esm.mjs';\nimport { a as elementParents, m as elementStyle, e as elementChildren, s as setCSSProperty, f as elementOuterSize, o as elementNextAll, p as elementPrevAll, i as getTranslate, q as animateCSSModeScroll, n as nextTick, r as showWarning, c as createElement, d as now, t as extend, g as elementIndex, u as deleteProps } from './utils.mjs';\n\nlet support;\nfunction calcSupport() {\n const window = getWindow();\n const document = getDocument();\n return {\n smoothScroll: document.documentElement && document.documentElement.style && 'scrollBehavior' in document.documentElement.style,\n touch: !!('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch)\n };\n}\nfunction getSupport() {\n if (!support) {\n support = calcSupport();\n }\n return support;\n}\n\nlet deviceCached;\nfunction calcDevice(_temp) {\n let {\n userAgent\n } = _temp === void 0 ? {} : _temp;\n const support = getSupport();\n const window = getWindow();\n const platform = window.navigator.platform;\n const ua = userAgent || window.navigator.userAgent;\n const device = {\n ios: false,\n android: false\n };\n const screenWidth = window.screen.width;\n const screenHeight = window.screen.height;\n const android = ua.match(/(Android);?[\\s\\/]+([\\d.]+)?/); // eslint-disable-line\n let ipad = ua.match(/(iPad).*OS\\s([\\d_]+)/);\n const ipod = ua.match(/(iPod)(.*OS\\s([\\d_]+))?/);\n const iphone = !ipad && ua.match(/(iPhone\\sOS|iOS)\\s([\\d_]+)/);\n const windows = platform === 'Win32';\n let macos = platform === 'MacIntel';\n\n // iPadOs 13 fix\n const iPadScreens = ['1024x1366', '1366x1024', '834x1194', '1194x834', '834x1112', '1112x834', '768x1024', '1024x768', '820x1180', '1180x820', '810x1080', '1080x810'];\n if (!ipad && macos && support.touch && iPadScreens.indexOf(`${screenWidth}x${screenHeight}`) >= 0) {\n ipad = ua.match(/(Version)\\/([\\d.]+)/);\n if (!ipad) ipad = [0, 1, '13_0_0'];\n macos = false;\n }\n\n // Android\n if (android && !windows) {\n device.os = 'android';\n device.android = true;\n }\n if (ipad || iphone || ipod) {\n device.os = 'ios';\n device.ios = true;\n }\n\n // Export object\n return device;\n}\nfunction getDevice(overrides) {\n if (overrides === void 0) {\n overrides = {};\n }\n if (!deviceCached) {\n deviceCached = calcDevice(overrides);\n }\n return deviceCached;\n}\n\nlet browser;\nfunction calcBrowser() {\n const window = getWindow();\n let needPerspectiveFix = false;\n function isSafari() {\n const ua = window.navigator.userAgent.toLowerCase();\n return ua.indexOf('safari') >= 0 && ua.indexOf('chrome') < 0 && ua.indexOf('android') < 0;\n }\n if (isSafari()) {\n const ua = String(window.navigator.userAgent);\n if (ua.includes('Version/')) {\n const [major, minor] = ua.split('Version/')[1].split(' ')[0].split('.').map(num => Number(num));\n needPerspectiveFix = major < 16 || major === 16 && minor < 2;\n }\n }\n return {\n isSafari: needPerspectiveFix || isSafari(),\n needPerspectiveFix,\n isWebView: /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(window.navigator.userAgent)\n };\n}\nfunction getBrowser() {\n if (!browser) {\n browser = calcBrowser();\n }\n return browser;\n}\n\nfunction Resize(_ref) {\n let {\n swiper,\n on,\n emit\n } = _ref;\n const window = getWindow();\n let observer = null;\n let animationFrame = null;\n const resizeHandler = () => {\n if (!swiper || swiper.destroyed || !swiper.initialized) return;\n emit('beforeResize');\n emit('resize');\n };\n const createObserver = () => {\n if (!swiper || swiper.destroyed || !swiper.initialized) return;\n observer = new ResizeObserver(entries => {\n animationFrame = window.requestAnimationFrame(() => {\n const {\n width,\n height\n } = swiper;\n let newWidth = width;\n let newHeight = height;\n entries.forEach(_ref2 => {\n let {\n contentBoxSize,\n contentRect,\n target\n } = _ref2;\n if (target && target !== swiper.el) return;\n newWidth = contentRect ? contentRect.width : (contentBoxSize[0] || contentBoxSize).inlineSize;\n newHeight = contentRect ? contentRect.height : (contentBoxSize[0] || contentBoxSize).blockSize;\n });\n if (newWidth !== width || newHeight !== height) {\n resizeHandler();\n }\n });\n });\n observer.observe(swiper.el);\n };\n const removeObserver = () => {\n if (animationFrame) {\n window.cancelAnimationFrame(animationFrame);\n }\n if (observer && observer.unobserve && swiper.el) {\n observer.unobserve(swiper.el);\n observer = null;\n }\n };\n const orientationChangeHandler = () => {\n if (!swiper || swiper.destroyed || !swiper.initialized) return;\n emit('orientationchange');\n };\n on('init', () => {\n if (swiper.params.resizeObserver && typeof window.ResizeObserver !== 'undefined') {\n createObserver();\n return;\n }\n window.addEventListener('resize', resizeHandler);\n window.addEventListener('orientationchange', orientationChangeHandler);\n });\n on('destroy', () => {\n removeObserver();\n window.removeEventListener('resize', resizeHandler);\n window.removeEventListener('orientationchange', orientationChangeHandler);\n });\n}\n\nfunction Observer(_ref) {\n let {\n swiper,\n extendParams,\n on,\n emit\n } = _ref;\n const observers = [];\n const window = getWindow();\n const attach = function (target, options) {\n if (options === void 0) {\n options = {};\n }\n const ObserverFunc = window.MutationObserver || window.WebkitMutationObserver;\n const observer = new ObserverFunc(mutations => {\n // The observerUpdate event should only be triggered\n // once despite the number of mutations. Additional\n // triggers are redundant and are very costly\n if (swiper.__preventObserver__) return;\n if (mutations.length === 1) {\n emit('observerUpdate', mutations[0]);\n return;\n }\n const observerUpdate = function observerUpdate() {\n emit('observerUpdate', mutations[0]);\n };\n if (window.requestAnimationFrame) {\n window.requestAnimationFrame(observerUpdate);\n } else {\n window.setTimeout(observerUpdate, 0);\n }\n });\n observer.observe(target, {\n attributes: typeof options.attributes === 'undefined' ? true : options.attributes,\n childList: typeof options.childList === 'undefined' ? true : options.childList,\n characterData: typeof options.characterData === 'undefined' ? true : options.characterData\n });\n observers.push(observer);\n };\n const init = () => {\n if (!swiper.params.observer) return;\n if (swiper.params.observeParents) {\n const containerParents = elementParents(swiper.hostEl);\n for (let i = 0; i < containerParents.length; i += 1) {\n attach(containerParents[i]);\n }\n }\n // Observe container\n attach(swiper.hostEl, {\n childList: swiper.params.observeSlideChildren\n });\n\n // Observe wrapper\n attach(swiper.wrapperEl, {\n attributes: false\n });\n };\n const destroy = () => {\n observers.forEach(observer => {\n observer.disconnect();\n });\n observers.splice(0, observers.length);\n };\n extendParams({\n observer: false,\n observeParents: false,\n observeSlideChildren: false\n });\n on('init', init);\n on('destroy', destroy);\n}\n\n/* eslint-disable no-underscore-dangle */\n\nvar eventsEmitter = {\n on(events, handler, priority) {\n const self = this;\n if (!self.eventsListeners || self.destroyed) return self;\n if (typeof handler !== 'function') return self;\n const method = priority ? 'unshift' : 'push';\n events.split(' ').forEach(event => {\n if (!self.eventsListeners[event]) self.eventsListeners[event] = [];\n self.eventsListeners[event][method](handler);\n });\n return self;\n },\n once(events, handler, priority) {\n const self = this;\n if (!self.eventsListeners || self.destroyed) return self;\n if (typeof handler !== 'function') return self;\n function onceHandler() {\n self.off(events, onceHandler);\n if (onceHandler.__emitterProxy) {\n delete onceHandler.__emitterProxy;\n }\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n handler.apply(self, args);\n }\n onceHandler.__emitterProxy = handler;\n return self.on(events, onceHandler, priority);\n },\n onAny(handler, priority) {\n const self = this;\n if (!self.eventsListeners || self.destroyed) return self;\n if (typeof handler !== 'function') return self;\n const method = priority ? 'unshift' : 'push';\n if (self.eventsAnyListeners.indexOf(handler) < 0) {\n self.eventsAnyListeners[method](handler);\n }\n return self;\n },\n offAny(handler) {\n const self = this;\n if (!self.eventsListeners || self.destroyed) return self;\n if (!self.eventsAnyListeners) return self;\n const index = self.eventsAnyListeners.indexOf(handler);\n if (index >= 0) {\n self.eventsAnyListeners.splice(index, 1);\n }\n return self;\n },\n off(events, handler) {\n const self = this;\n if (!self.eventsListeners || self.destroyed) return self;\n if (!self.eventsListeners) return self;\n events.split(' ').forEach(event => {\n if (typeof handler === 'undefined') {\n self.eventsListeners[event] = [];\n } else if (self.eventsListeners[event]) {\n self.eventsListeners[event].forEach((eventHandler, index) => {\n if (eventHandler === handler || eventHandler.__emitterProxy && eventHandler.__emitterProxy === handler) {\n self.eventsListeners[event].splice(index, 1);\n }\n });\n }\n });\n return self;\n },\n emit() {\n const self = this;\n if (!self.eventsListeners || self.destroyed) return self;\n if (!self.eventsListeners) return self;\n let events;\n let data;\n let context;\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n if (typeof args[0] === 'string' || Array.isArray(args[0])) {\n events = args[0];\n data = args.slice(1, args.length);\n context = self;\n } else {\n events = args[0].events;\n data = args[0].data;\n context = args[0].context || self;\n }\n data.unshift(context);\n const eventsArray = Array.isArray(events) ? events : events.split(' ');\n eventsArray.forEach(event => {\n if (self.eventsAnyListeners && self.eventsAnyListeners.length) {\n self.eventsAnyListeners.forEach(eventHandler => {\n eventHandler.apply(context, [event, ...data]);\n });\n }\n if (self.eventsListeners && self.eventsListeners[event]) {\n self.eventsListeners[event].forEach(eventHandler => {\n eventHandler.apply(context, data);\n });\n }\n });\n return self;\n }\n};\n\nfunction updateSize() {\n const swiper = this;\n let width;\n let height;\n const el = swiper.el;\n if (typeof swiper.params.width !== 'undefined' && swiper.params.width !== null) {\n width = swiper.params.width;\n } else {\n width = el.clientWidth;\n }\n if (typeof swiper.params.height !== 'undefined' && swiper.params.height !== null) {\n height = swiper.params.height;\n } else {\n height = el.clientHeight;\n }\n if (width === 0 && swiper.isHorizontal() || height === 0 && swiper.isVertical()) {\n return;\n }\n\n // Subtract paddings\n width = width - parseInt(elementStyle(el, 'padding-left') || 0, 10) - parseInt(elementStyle(el, 'padding-right') || 0, 10);\n height = height - parseInt(elementStyle(el, 'padding-top') || 0, 10) - parseInt(elementStyle(el, 'padding-bottom') || 0, 10);\n if (Number.isNaN(width)) width = 0;\n if (Number.isNaN(height)) height = 0;\n Object.assign(swiper, {\n width,\n height,\n size: swiper.isHorizontal() ? width : height\n });\n}\n\nfunction updateSlides() {\n const swiper = this;\n function getDirectionPropertyValue(node, label) {\n return parseFloat(node.getPropertyValue(swiper.getDirectionLabel(label)) || 0);\n }\n const params = swiper.params;\n const {\n wrapperEl,\n slidesEl,\n size: swiperSize,\n rtlTranslate: rtl,\n wrongRTL\n } = swiper;\n const isVirtual = swiper.virtual && params.virtual.enabled;\n const previousSlidesLength = isVirtual ? swiper.virtual.slides.length : swiper.slides.length;\n const slides = elementChildren(slidesEl, `.${swiper.params.slideClass}, swiper-slide`);\n const slidesLength = isVirtual ? swiper.virtual.slides.length : slides.length;\n let snapGrid = [];\n const slidesGrid = [];\n const slidesSizesGrid = [];\n let offsetBefore = params.slidesOffsetBefore;\n if (typeof offsetBefore === 'function') {\n offsetBefore = params.slidesOffsetBefore.call(swiper);\n }\n let offsetAfter = params.slidesOffsetAfter;\n if (typeof offsetAfter === 'function') {\n offsetAfter = params.slidesOffsetAfter.call(swiper);\n }\n const previousSnapGridLength = swiper.snapGrid.length;\n const previousSlidesGridLength = swiper.slidesGrid.length;\n let spaceBetween = params.spaceBetween;\n let slidePosition = -offsetBefore;\n let prevSlideSize = 0;\n let index = 0;\n if (typeof swiperSize === 'undefined') {\n return;\n }\n if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {\n spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiperSize;\n } else if (typeof spaceBetween === 'string') {\n spaceBetween = parseFloat(spaceBetween);\n }\n swiper.virtualSize = -spaceBetween;\n\n // reset margins\n slides.forEach(slideEl => {\n if (rtl) {\n slideEl.style.marginLeft = '';\n } else {\n slideEl.style.marginRight = '';\n }\n slideEl.style.marginBottom = '';\n slideEl.style.marginTop = '';\n });\n\n // reset cssMode offsets\n if (params.centeredSlides && params.cssMode) {\n setCSSProperty(wrapperEl, '--swiper-centered-offset-before', '');\n setCSSProperty(wrapperEl, '--swiper-centered-offset-after', '');\n }\n const gridEnabled = params.grid && params.grid.rows > 1 && swiper.grid;\n if (gridEnabled) {\n swiper.grid.initSlides(slides);\n } else if (swiper.grid) {\n swiper.grid.unsetSlides();\n }\n\n // Calc slides\n let slideSize;\n const shouldResetSlideSize = params.slidesPerView === 'auto' && params.breakpoints && Object.keys(params.breakpoints).filter(key => {\n return typeof params.breakpoints[key].slidesPerView !== 'undefined';\n }).length > 0;\n for (let i = 0; i < slidesLength; i += 1) {\n slideSize = 0;\n let slide;\n if (slides[i]) slide = slides[i];\n if (gridEnabled) {\n swiper.grid.updateSlide(i, slide, slides);\n }\n if (slides[i] && elementStyle(slide, 'display') === 'none') continue; // eslint-disable-line\n\n if (params.slidesPerView === 'auto') {\n if (shouldResetSlideSize) {\n slides[i].style[swiper.getDirectionLabel('width')] = ``;\n }\n const slideStyles = getComputedStyle(slide);\n const currentTransform = slide.style.transform;\n const currentWebKitTransform = slide.style.webkitTransform;\n if (currentTransform) {\n slide.style.transform = 'none';\n }\n if (currentWebKitTransform) {\n slide.style.webkitTransform = 'none';\n }\n if (params.roundLengths) {\n slideSize = swiper.isHorizontal() ? elementOuterSize(slide, 'width', true) : elementOuterSize(slide, 'height', true);\n } else {\n // eslint-disable-next-line\n const width = getDirectionPropertyValue(slideStyles, 'width');\n const paddingLeft = getDirectionPropertyValue(slideStyles, 'padding-left');\n const paddingRight = getDirectionPropertyValue(slideStyles, 'padding-right');\n const marginLeft = getDirectionPropertyValue(slideStyles, 'margin-left');\n const marginRight = getDirectionPropertyValue(slideStyles, 'margin-right');\n const boxSizing = slideStyles.getPropertyValue('box-sizing');\n if (boxSizing && boxSizing === 'border-box') {\n slideSize = width + marginLeft + marginRight;\n } else {\n const {\n clientWidth,\n offsetWidth\n } = slide;\n slideSize = width + paddingLeft + paddingRight + marginLeft + marginRight + (offsetWidth - clientWidth);\n }\n }\n if (currentTransform) {\n slide.style.transform = currentTransform;\n }\n if (currentWebKitTransform) {\n slide.style.webkitTransform = currentWebKitTransform;\n }\n if (params.roundLengths) slideSize = Math.floor(slideSize);\n } else {\n slideSize = (swiperSize - (params.slidesPerView - 1) * spaceBetween) / params.slidesPerView;\n if (params.roundLengths) slideSize = Math.floor(slideSize);\n if (slides[i]) {\n slides[i].style[swiper.getDirectionLabel('width')] = `${slideSize}px`;\n }\n }\n if (slides[i]) {\n slides[i].swiperSlideSize = slideSize;\n }\n slidesSizesGrid.push(slideSize);\n if (params.centeredSlides) {\n slidePosition = slidePosition + slideSize / 2 + prevSlideSize / 2 + spaceBetween;\n if (prevSlideSize === 0 && i !== 0) slidePosition = slidePosition - swiperSize / 2 - spaceBetween;\n if (i === 0) slidePosition = slidePosition - swiperSize / 2 - spaceBetween;\n if (Math.abs(slidePosition) < 1 / 1000) slidePosition = 0;\n if (params.roundLengths) slidePosition = Math.floor(slidePosition);\n if (index % params.slidesPerGroup === 0) snapGrid.push(slidePosition);\n slidesGrid.push(slidePosition);\n } else {\n if (params.roundLengths) slidePosition = Math.floor(slidePosition);\n if ((index - Math.min(swiper.params.slidesPerGroupSkip, index)) % swiper.params.slidesPerGroup === 0) snapGrid.push(slidePosition);\n slidesGrid.push(slidePosition);\n slidePosition = slidePosition + slideSize + spaceBetween;\n }\n swiper.virtualSize += slideSize + spaceBetween;\n prevSlideSize = slideSize;\n index += 1;\n }\n swiper.virtualSize = Math.max(swiper.virtualSize, swiperSize) + offsetAfter;\n if (rtl && wrongRTL && (params.effect === 'slide' || params.effect === 'coverflow')) {\n wrapperEl.style.width = `${swiper.virtualSize + spaceBetween}px`;\n }\n if (params.setWrapperSize) {\n wrapperEl.style[swiper.getDirectionLabel('width')] = `${swiper.virtualSize + spaceBetween}px`;\n }\n if (gridEnabled) {\n swiper.grid.updateWrapperSize(slideSize, snapGrid);\n }\n\n // Remove last grid elements depending on width\n if (!params.centeredSlides) {\n const newSlidesGrid = [];\n for (let i = 0; i < snapGrid.length; i += 1) {\n let slidesGridItem = snapGrid[i];\n if (params.roundLengths) slidesGridItem = Math.floor(slidesGridItem);\n if (snapGrid[i] <= swiper.virtualSize - swiperSize) {\n newSlidesGrid.push(slidesGridItem);\n }\n }\n snapGrid = newSlidesGrid;\n if (Math.floor(swiper.virtualSize - swiperSize) - Math.floor(snapGrid[snapGrid.length - 1]) > 1) {\n snapGrid.push(swiper.virtualSize - swiperSize);\n }\n }\n if (isVirtual && params.loop) {\n const size = slidesSizesGrid[0] + spaceBetween;\n if (params.slidesPerGroup > 1) {\n const groups = Math.ceil((swiper.virtual.slidesBefore + swiper.virtual.slidesAfter) / params.slidesPerGroup);\n const groupSize = size * params.slidesPerGroup;\n for (let i = 0; i < groups; i += 1) {\n snapGrid.push(snapGrid[snapGrid.length - 1] + groupSize);\n }\n }\n for (let i = 0; i < swiper.virtual.slidesBefore + swiper.virtual.slidesAfter; i += 1) {\n if (params.slidesPerGroup === 1) {\n snapGrid.push(snapGrid[snapGrid.length - 1] + size);\n }\n slidesGrid.push(slidesGrid[slidesGrid.length - 1] + size);\n swiper.virtualSize += size;\n }\n }\n if (snapGrid.length === 0) snapGrid = [0];\n if (spaceBetween !== 0) {\n const key = swiper.isHorizontal() && rtl ? 'marginLeft' : swiper.getDirectionLabel('marginRight');\n slides.filter((_, slideIndex) => {\n if (!params.cssMode || params.loop) return true;\n if (slideIndex === slides.length - 1) {\n return false;\n }\n return true;\n }).forEach(slideEl => {\n slideEl.style[key] = `${spaceBetween}px`;\n });\n }\n if (params.centeredSlides && params.centeredSlidesBounds) {\n let allSlidesSize = 0;\n slidesSizesGrid.forEach(slideSizeValue => {\n allSlidesSize += slideSizeValue + (spaceBetween || 0);\n });\n allSlidesSize -= spaceBetween;\n const maxSnap = allSlidesSize - swiperSize;\n snapGrid = snapGrid.map(snap => {\n if (snap <= 0) return -offsetBefore;\n if (snap > maxSnap) return maxSnap + offsetAfter;\n return snap;\n });\n }\n if (params.centerInsufficientSlides) {\n let allSlidesSize = 0;\n slidesSizesGrid.forEach(slideSizeValue => {\n allSlidesSize += slideSizeValue + (spaceBetween || 0);\n });\n allSlidesSize -= spaceBetween;\n if (allSlidesSize < swiperSize) {\n const allSlidesOffset = (swiperSize - allSlidesSize) / 2;\n snapGrid.forEach((snap, snapIndex) => {\n snapGrid[snapIndex] = snap - allSlidesOffset;\n });\n slidesGrid.forEach((snap, snapIndex) => {\n slidesGrid[snapIndex] = snap + allSlidesOffset;\n });\n }\n }\n Object.assign(swiper, {\n slides,\n snapGrid,\n slidesGrid,\n slidesSizesGrid\n });\n if (params.centeredSlides && params.cssMode && !params.centeredSlidesBounds) {\n setCSSProperty(wrapperEl, '--swiper-centered-offset-before', `${-snapGrid[0]}px`);\n setCSSProperty(wrapperEl, '--swiper-centered-offset-after', `${swiper.size / 2 - slidesSizesGrid[slidesSizesGrid.length - 1] / 2}px`);\n const addToSnapGrid = -swiper.snapGrid[0];\n const addToSlidesGrid = -swiper.slidesGrid[0];\n swiper.snapGrid = swiper.snapGrid.map(v => v + addToSnapGrid);\n swiper.slidesGrid = swiper.slidesGrid.map(v => v + addToSlidesGrid);\n }\n if (slidesLength !== previousSlidesLength) {\n swiper.emit('slidesLengthChange');\n }\n if (snapGrid.length !== previousSnapGridLength) {\n if (swiper.params.watchOverflow) swiper.checkOverflow();\n swiper.emit('snapGridLengthChange');\n }\n if (slidesGrid.length !== previousSlidesGridLength) {\n swiper.emit('slidesGridLengthChange');\n }\n if (params.watchSlidesProgress) {\n swiper.updateSlidesOffset();\n }\n swiper.emit('slidesUpdated');\n if (!isVirtual && !params.cssMode && (params.effect === 'slide' || params.effect === 'fade')) {\n const backFaceHiddenClass = `${params.containerModifierClass}backface-hidden`;\n const hasClassBackfaceClassAdded = swiper.el.classList.contains(backFaceHiddenClass);\n if (slidesLength <= params.maxBackfaceHiddenSlides) {\n if (!hasClassBackfaceClassAdded) swiper.el.classList.add(backFaceHiddenClass);\n } else if (hasClassBackfaceClassAdded) {\n swiper.el.classList.remove(backFaceHiddenClass);\n }\n }\n}\n\nfunction updateAutoHeight(speed) {\n const swiper = this;\n const activeSlides = [];\n const isVirtual = swiper.virtual && swiper.params.virtual.enabled;\n let newHeight = 0;\n let i;\n if (typeof speed === 'number') {\n swiper.setTransition(speed);\n } else if (speed === true) {\n swiper.setTransition(swiper.params.speed);\n }\n const getSlideByIndex = index => {\n if (isVirtual) {\n return swiper.slides[swiper.getSlideIndexByData(index)];\n }\n return swiper.slides[index];\n };\n // Find slides currently in view\n if (swiper.params.slidesPerView !== 'auto' && swiper.params.slidesPerView > 1) {\n if (swiper.params.centeredSlides) {\n (swiper.visibleSlides || []).forEach(slide => {\n activeSlides.push(slide);\n });\n } else {\n for (i = 0; i < Math.ceil(swiper.params.slidesPerView); i += 1) {\n const index = swiper.activeIndex + i;\n if (index > swiper.slides.length && !isVirtual) break;\n activeSlides.push(getSlideByIndex(index));\n }\n }\n } else {\n activeSlides.push(getSlideByIndex(swiper.activeIndex));\n }\n\n // Find new height from highest slide in view\n for (i = 0; i < activeSlides.length; i += 1) {\n if (typeof activeSlides[i] !== 'undefined') {\n const height = activeSlides[i].offsetHeight;\n newHeight = height > newHeight ? height : newHeight;\n }\n }\n\n // Update Height\n if (newHeight || newHeight === 0) swiper.wrapperEl.style.height = `${newHeight}px`;\n}\n\nfunction updateSlidesOffset() {\n const swiper = this;\n const slides = swiper.slides;\n // eslint-disable-next-line\n const minusOffset = swiper.isElement ? swiper.isHorizontal() ? swiper.wrapperEl.offsetLeft : swiper.wrapperEl.offsetTop : 0;\n for (let i = 0; i < slides.length; i += 1) {\n slides[i].swiperSlideOffset = (swiper.isHorizontal() ? slides[i].offsetLeft : slides[i].offsetTop) - minusOffset - swiper.cssOverflowAdjustment();\n }\n}\n\nfunction updateSlidesProgress(translate) {\n if (translate === void 0) {\n translate = this && this.translate || 0;\n }\n const swiper = this;\n const params = swiper.params;\n const {\n slides,\n rtlTranslate: rtl,\n snapGrid\n } = swiper;\n if (slides.length === 0) return;\n if (typeof slides[0].swiperSlideOffset === 'undefined') swiper.updateSlidesOffset();\n let offsetCenter = -translate;\n if (rtl) offsetCenter = translate;\n\n // Visible Slides\n slides.forEach(slideEl => {\n slideEl.classList.remove(params.slideVisibleClass, params.slideFullyVisibleClass);\n });\n swiper.visibleSlidesIndexes = [];\n swiper.visibleSlides = [];\n let spaceBetween = params.spaceBetween;\n if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {\n spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiper.size;\n } else if (typeof spaceBetween === 'string') {\n spaceBetween = parseFloat(spaceBetween);\n }\n for (let i = 0; i < slides.length; i += 1) {\n const slide = slides[i];\n let slideOffset = slide.swiperSlideOffset;\n if (params.cssMode && params.centeredSlides) {\n slideOffset -= slides[0].swiperSlideOffset;\n }\n const slideProgress = (offsetCenter + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) / (slide.swiperSlideSize + spaceBetween);\n const originalSlideProgress = (offsetCenter - snapGrid[0] + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) / (slide.swiperSlideSize + spaceBetween);\n const slideBefore = -(offsetCenter - slideOffset);\n const slideAfter = slideBefore + swiper.slidesSizesGrid[i];\n const isFullyVisible = slideBefore >= 0 && slideBefore <= swiper.size - swiper.slidesSizesGrid[i];\n const isVisible = slideBefore >= 0 && slideBefore < swiper.size - 1 || slideAfter > 1 && slideAfter <= swiper.size || slideBefore <= 0 && slideAfter >= swiper.size;\n if (isVisible) {\n swiper.visibleSlides.push(slide);\n swiper.visibleSlidesIndexes.push(i);\n slides[i].classList.add(params.slideVisibleClass);\n }\n if (isFullyVisible) {\n slides[i].classList.add(params.slideFullyVisibleClass);\n }\n slide.progress = rtl ? -slideProgress : slideProgress;\n slide.originalProgress = rtl ? -originalSlideProgress : originalSlideProgress;\n }\n}\n\nfunction updateProgress(translate) {\n const swiper = this;\n if (typeof translate === 'undefined') {\n const multiplier = swiper.rtlTranslate ? -1 : 1;\n // eslint-disable-next-line\n translate = swiper && swiper.translate && swiper.translate * multiplier || 0;\n }\n const params = swiper.params;\n const translatesDiff = swiper.maxTranslate() - swiper.minTranslate();\n let {\n progress,\n isBeginning,\n isEnd,\n progressLoop\n } = swiper;\n const wasBeginning = isBeginning;\n const wasEnd = isEnd;\n if (translatesDiff === 0) {\n progress = 0;\n isBeginning = true;\n isEnd = true;\n } else {\n progress = (translate - swiper.minTranslate()) / translatesDiff;\n const isBeginningRounded = Math.abs(translate - swiper.minTranslate()) < 1;\n const isEndRounded = Math.abs(translate - swiper.maxTranslate()) < 1;\n isBeginning = isBeginningRounded || progress <= 0;\n isEnd = isEndRounded || progress >= 1;\n if (isBeginningRounded) progress = 0;\n if (isEndRounded) progress = 1;\n }\n if (params.loop) {\n const firstSlideIndex = swiper.getSlideIndexByData(0);\n const lastSlideIndex = swiper.getSlideIndexByData(swiper.slides.length - 1);\n const firstSlideTranslate = swiper.slidesGrid[firstSlideIndex];\n const lastSlideTranslate = swiper.slidesGrid[lastSlideIndex];\n const translateMax = swiper.slidesGrid[swiper.slidesGrid.length - 1];\n const translateAbs = Math.abs(translate);\n if (translateAbs >= firstSlideTranslate) {\n progressLoop = (translateAbs - firstSlideTranslate) / translateMax;\n } else {\n progressLoop = (translateAbs + translateMax - lastSlideTranslate) / translateMax;\n }\n if (progressLoop > 1) progressLoop -= 1;\n }\n Object.assign(swiper, {\n progress,\n progressLoop,\n isBeginning,\n isEnd\n });\n if (params.watchSlidesProgress || params.centeredSlides && params.autoHeight) swiper.updateSlidesProgress(translate);\n if (isBeginning && !wasBeginning) {\n swiper.emit('reachBeginning toEdge');\n }\n if (isEnd && !wasEnd) {\n swiper.emit('reachEnd toEdge');\n }\n if (wasBeginning && !isBeginning || wasEnd && !isEnd) {\n swiper.emit('fromEdge');\n }\n swiper.emit('progress', progress);\n}\n\nfunction updateSlidesClasses() {\n const swiper = this;\n const {\n slides,\n params,\n slidesEl,\n activeIndex\n } = swiper;\n const isVirtual = swiper.virtual && params.virtual.enabled;\n const gridEnabled = swiper.grid && params.grid && params.grid.rows > 1;\n const getFilteredSlide = selector => {\n return elementChildren(slidesEl, `.${params.slideClass}${selector}, swiper-slide${selector}`)[0];\n };\n slides.forEach(slideEl => {\n slideEl.classList.remove(params.slideActiveClass, params.slideNextClass, params.slidePrevClass);\n });\n let activeSlide;\n let prevSlide;\n let nextSlide;\n if (isVirtual) {\n if (params.loop) {\n let slideIndex = activeIndex - swiper.virtual.slidesBefore;\n if (slideIndex < 0) slideIndex = swiper.virtual.slides.length + slideIndex;\n if (slideIndex >= swiper.virtual.slides.length) slideIndex -= swiper.virtual.slides.length;\n activeSlide = getFilteredSlide(`[data-swiper-slide-index=\"${slideIndex}\"]`);\n } else {\n activeSlide = getFilteredSlide(`[data-swiper-slide-index=\"${activeIndex}\"]`);\n }\n } else {\n if (gridEnabled) {\n activeSlide = slides.filter(slideEl => slideEl.column === activeIndex)[0];\n nextSlide = slides.filter(slideEl => slideEl.column === activeIndex + 1)[0];\n prevSlide = slides.filter(slideEl => slideEl.column === activeIndex - 1)[0];\n } else {\n activeSlide = slides[activeIndex];\n }\n }\n if (activeSlide) {\n // Active classes\n activeSlide.classList.add(params.slideActiveClass);\n if (gridEnabled) {\n if (nextSlide) {\n nextSlide.classList.add(params.slideNextClass);\n }\n if (prevSlide) {\n prevSlide.classList.add(params.slidePrevClass);\n }\n } else {\n // Next Slide\n nextSlide = elementNextAll(activeSlide, `.${params.slideClass}, swiper-slide`)[0];\n if (params.loop && !nextSlide) {\n nextSlide = slides[0];\n }\n if (nextSlide) {\n nextSlide.classList.add(params.slideNextClass);\n }\n\n // Prev Slide\n prevSlide = elementPrevAll(activeSlide, `.${params.slideClass}, swiper-slide`)[0];\n if (params.loop && !prevSlide === 0) {\n prevSlide = slides[slides.length - 1];\n }\n if (prevSlide) {\n prevSlide.classList.add(params.slidePrevClass);\n }\n }\n }\n swiper.emitSlidesClasses();\n}\n\nconst processLazyPreloader = (swiper, imageEl) => {\n if (!swiper || swiper.destroyed || !swiper.params) return;\n const slideSelector = () => swiper.isElement ? `swiper-slide` : `.${swiper.params.slideClass}`;\n const slideEl = imageEl.closest(slideSelector());\n if (slideEl) {\n let lazyEl = slideEl.querySelector(`.${swiper.params.lazyPreloaderClass}`);\n if (!lazyEl && swiper.isElement) {\n if (slideEl.shadowRoot) {\n lazyEl = slideEl.shadowRoot.querySelector(`.${swiper.params.lazyPreloaderClass}`);\n } else {\n // init later\n requestAnimationFrame(() => {\n if (slideEl.shadowRoot) {\n lazyEl = slideEl.shadowRoot.querySelector(`.${swiper.params.lazyPreloaderClass}`);\n if (lazyEl) lazyEl.remove();\n }\n });\n }\n }\n if (lazyEl) lazyEl.remove();\n }\n};\nconst unlazy = (swiper, index) => {\n if (!swiper.slides[index]) return;\n const imageEl = swiper.slides[index].querySelector('[loading=\"lazy\"]');\n if (imageEl) imageEl.removeAttribute('loading');\n};\nconst preload = swiper => {\n if (!swiper || swiper.destroyed || !swiper.params) return;\n let amount = swiper.params.lazyPreloadPrevNext;\n const len = swiper.slides.length;\n if (!len || !amount || amount < 0) return;\n amount = Math.min(amount, len);\n const slidesPerView = swiper.params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(swiper.params.slidesPerView);\n const activeIndex = swiper.activeIndex;\n if (swiper.params.grid && swiper.params.grid.rows > 1) {\n const activeColumn = activeIndex;\n const preloadColumns = [activeColumn - amount];\n preloadColumns.push(...Array.from({\n length: amount\n }).map((_, i) => {\n return activeColumn + slidesPerView + i;\n }));\n swiper.slides.forEach((slideEl, i) => {\n if (preloadColumns.includes(slideEl.column)) unlazy(swiper, i);\n });\n return;\n }\n const slideIndexLastInView = activeIndex + slidesPerView - 1;\n if (swiper.params.rewind || swiper.params.loop) {\n for (let i = activeIndex - amount; i <= slideIndexLastInView + amount; i += 1) {\n const realIndex = (i % len + len) % len;\n if (realIndex < activeIndex || realIndex > slideIndexLastInView) unlazy(swiper, realIndex);\n }\n } else {\n for (let i = Math.max(activeIndex - amount, 0); i <= Math.min(slideIndexLastInView + amount, len - 1); i += 1) {\n if (i !== activeIndex && (i > slideIndexLastInView || i < activeIndex)) {\n unlazy(swiper, i);\n }\n }\n }\n};\n\nfunction getActiveIndexByTranslate(swiper) {\n const {\n slidesGrid,\n params\n } = swiper;\n const translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate;\n let activeIndex;\n for (let i = 0; i < slidesGrid.length; i += 1) {\n if (typeof slidesGrid[i + 1] !== 'undefined') {\n if (translate >= slidesGrid[i] && translate < slidesGrid[i + 1] - (slidesGrid[i + 1] - slidesGrid[i]) / 2) {\n activeIndex = i;\n } else if (translate >= slidesGrid[i] && translate < slidesGrid[i + 1]) {\n activeIndex = i + 1;\n }\n } else if (translate >= slidesGrid[i]) {\n activeIndex = i;\n }\n }\n // Normalize slideIndex\n if (params.normalizeSlideIndex) {\n if (activeIndex < 0 || typeof activeIndex === 'undefined') activeIndex = 0;\n }\n return activeIndex;\n}\nfunction updateActiveIndex(newActiveIndex) {\n const swiper = this;\n const translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate;\n const {\n snapGrid,\n params,\n activeIndex: previousIndex,\n realIndex: previousRealIndex,\n snapIndex: previousSnapIndex\n } = swiper;\n let activeIndex = newActiveIndex;\n let snapIndex;\n const getVirtualRealIndex = aIndex => {\n let realIndex = aIndex - swiper.virtual.slidesBefore;\n if (realIndex < 0) {\n realIndex = swiper.virtual.slides.length + realIndex;\n }\n if (realIndex >= swiper.virtual.slides.length) {\n realIndex -= swiper.virtual.slides.length;\n }\n return realIndex;\n };\n if (typeof activeIndex === 'undefined') {\n activeIndex = getActiveIndexByTranslate(swiper);\n }\n if (snapGrid.indexOf(translate) >= 0) {\n snapIndex = snapGrid.indexOf(translate);\n } else {\n const skip = Math.min(params.slidesPerGroupSkip, activeIndex);\n snapIndex = skip + Math.floor((activeIndex - skip) / params.slidesPerGroup);\n }\n if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;\n if (activeIndex === previousIndex && !swiper.params.loop) {\n if (snapIndex !== previousSnapIndex) {\n swiper.snapIndex = snapIndex;\n swiper.emit('snapIndexChange');\n }\n return;\n }\n if (activeIndex === previousIndex && swiper.params.loop && swiper.virtual && swiper.params.virtual.enabled) {\n swiper.realIndex = getVirtualRealIndex(activeIndex);\n return;\n }\n const gridEnabled = swiper.grid && params.grid && params.grid.rows > 1;\n\n // Get real index\n let realIndex;\n if (swiper.virtual && params.virtual.enabled && params.loop) {\n realIndex = getVirtualRealIndex(activeIndex);\n } else if (gridEnabled) {\n const firstSlideInColumn = swiper.slides.filter(slideEl => slideEl.column === activeIndex)[0];\n let activeSlideIndex = parseInt(firstSlideInColumn.getAttribute('data-swiper-slide-index'), 10);\n if (Number.isNaN(activeSlideIndex)) {\n activeSlideIndex = Math.max(swiper.slides.indexOf(firstSlideInColumn), 0);\n }\n realIndex = Math.floor(activeSlideIndex / params.grid.rows);\n } else if (swiper.slides[activeIndex]) {\n const slideIndex = swiper.slides[activeIndex].getAttribute('data-swiper-slide-index');\n if (slideIndex) {\n realIndex = parseInt(slideIndex, 10);\n } else {\n realIndex = activeIndex;\n }\n } else {\n realIndex = activeIndex;\n }\n Object.assign(swiper, {\n previousSnapIndex,\n snapIndex,\n previousRealIndex,\n realIndex,\n previousIndex,\n activeIndex\n });\n if (swiper.initialized) {\n preload(swiper);\n }\n swiper.emit('activeIndexChange');\n swiper.emit('snapIndexChange');\n if (swiper.initialized || swiper.params.runCallbacksOnInit) {\n if (previousRealIndex !== realIndex) {\n swiper.emit('realIndexChange');\n }\n swiper.emit('slideChange');\n }\n}\n\nfunction updateClickedSlide(el, path) {\n const swiper = this;\n const params = swiper.params;\n let slide = el.closest(`.${params.slideClass}, swiper-slide`);\n if (!slide && swiper.isElement && path && path.length > 1 && path.includes(el)) {\n [...path.slice(path.indexOf(el) + 1, path.length)].forEach(pathEl => {\n if (!slide && pathEl.matches && pathEl.matches(`.${params.slideClass}, swiper-slide`)) {\n slide = pathEl;\n }\n });\n }\n let slideFound = false;\n let slideIndex;\n if (slide) {\n for (let i = 0; i < swiper.slides.length; i += 1) {\n if (swiper.slides[i] === slide) {\n slideFound = true;\n slideIndex = i;\n break;\n }\n }\n }\n if (slide && slideFound) {\n swiper.clickedSlide = slide;\n if (swiper.virtual && swiper.params.virtual.enabled) {\n swiper.clickedIndex = parseInt(slide.getAttribute('data-swiper-slide-index'), 10);\n } else {\n swiper.clickedIndex = slideIndex;\n }\n } else {\n swiper.clickedSlide = undefined;\n swiper.clickedIndex = undefined;\n return;\n }\n if (params.slideToClickedSlide && swiper.clickedIndex !== undefined && swiper.clickedIndex !== swiper.activeIndex) {\n swiper.slideToClickedSlide();\n }\n}\n\nvar update = {\n updateSize,\n updateSlides,\n updateAutoHeight,\n updateSlidesOffset,\n updateSlidesProgress,\n updateProgress,\n updateSlidesClasses,\n updateActiveIndex,\n updateClickedSlide\n};\n\nfunction getSwiperTranslate(axis) {\n if (axis === void 0) {\n axis = this.isHorizontal() ? 'x' : 'y';\n }\n const swiper = this;\n const {\n params,\n rtlTranslate: rtl,\n translate,\n wrapperEl\n } = swiper;\n if (params.virtualTranslate) {\n return rtl ? -translate : translate;\n }\n if (params.cssMode) {\n return translate;\n }\n let currentTranslate = getTranslate(wrapperEl, axis);\n currentTranslate += swiper.cssOverflowAdjustment();\n if (rtl) currentTranslate = -currentTranslate;\n return currentTranslate || 0;\n}\n\nfunction setTranslate(translate, byController) {\n const swiper = this;\n const {\n rtlTranslate: rtl,\n params,\n wrapperEl,\n progress\n } = swiper;\n let x = 0;\n let y = 0;\n const z = 0;\n if (swiper.isHorizontal()) {\n x = rtl ? -translate : translate;\n } else {\n y = translate;\n }\n if (params.roundLengths) {\n x = Math.floor(x);\n y = Math.floor(y);\n }\n swiper.previousTranslate = swiper.translate;\n swiper.translate = swiper.isHorizontal() ? x : y;\n if (params.cssMode) {\n wrapperEl[swiper.isHorizontal() ? 'scrollLeft' : 'scrollTop'] = swiper.isHorizontal() ? -x : -y;\n } else if (!params.virtualTranslate) {\n if (swiper.isHorizontal()) {\n x -= swiper.cssOverflowAdjustment();\n } else {\n y -= swiper.cssOverflowAdjustment();\n }\n wrapperEl.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`;\n }\n\n // Check if we need to update progress\n let newProgress;\n const translatesDiff = swiper.maxTranslate() - swiper.minTranslate();\n if (translatesDiff === 0) {\n newProgress = 0;\n } else {\n newProgress = (translate - swiper.minTranslate()) / translatesDiff;\n }\n if (newProgress !== progress) {\n swiper.updateProgress(translate);\n }\n swiper.emit('setTranslate', swiper.translate, byController);\n}\n\nfunction minTranslate() {\n return -this.snapGrid[0];\n}\n\nfunction maxTranslate() {\n return -this.snapGrid[this.snapGrid.length - 1];\n}\n\nfunction translateTo(translate, speed, runCallbacks, translateBounds, internal) {\n if (translate === void 0) {\n translate = 0;\n }\n if (speed === void 0) {\n speed = this.params.speed;\n }\n if (runCallbacks === void 0) {\n runCallbacks = true;\n }\n if (translateBounds === void 0) {\n translateBounds = true;\n }\n const swiper = this;\n const {\n params,\n wrapperEl\n } = swiper;\n if (swiper.animating && params.preventInteractionOnTransition) {\n return false;\n }\n const minTranslate = swiper.minTranslate();\n const maxTranslate = swiper.maxTranslate();\n let newTranslate;\n if (translateBounds && translate > minTranslate) newTranslate = minTranslate;else if (translateBounds && translate < maxTranslate) newTranslate = maxTranslate;else newTranslate = translate;\n\n // Update progress\n swiper.updateProgress(newTranslate);\n if (params.cssMode) {\n const isH = swiper.isHorizontal();\n if (speed === 0) {\n wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = -newTranslate;\n } else {\n if (!swiper.support.smoothScroll) {\n animateCSSModeScroll({\n swiper,\n targetPosition: -newTranslate,\n side: isH ? 'left' : 'top'\n });\n return true;\n }\n wrapperEl.scrollTo({\n [isH ? 'left' : 'top']: -newTranslate,\n behavior: 'smooth'\n });\n }\n return true;\n }\n if (speed === 0) {\n swiper.setTransition(0);\n swiper.setTranslate(newTranslate);\n if (runCallbacks) {\n swiper.emit('beforeTransitionStart', speed, internal);\n swiper.emit('transitionEnd');\n }\n } else {\n swiper.setTransition(speed);\n swiper.setTranslate(newTranslate);\n if (runCallbacks) {\n swiper.emit('beforeTransitionStart', speed, internal);\n swiper.emit('transitionStart');\n }\n if (!swiper.animating) {\n swiper.animating = true;\n if (!swiper.onTranslateToWrapperTransitionEnd) {\n swiper.onTranslateToWrapperTransitionEnd = function transitionEnd(e) {\n if (!swiper || swiper.destroyed) return;\n if (e.target !== this) return;\n swiper.wrapperEl.removeEventListener('transitionend', swiper.onTranslateToWrapperTransitionEnd);\n swiper.onTranslateToWrapperTransitionEnd = null;\n delete swiper.onTranslateToWrapperTransitionEnd;\n if (runCallbacks) {\n swiper.emit('transitionEnd');\n }\n };\n }\n swiper.wrapperEl.addEventListener('transitionend', swiper.onTranslateToWrapperTransitionEnd);\n }\n }\n return true;\n}\n\nvar translate = {\n getTranslate: getSwiperTranslate,\n setTranslate,\n minTranslate,\n maxTranslate,\n translateTo\n};\n\nfunction setTransition(duration, byController) {\n const swiper = this;\n if (!swiper.params.cssMode) {\n swiper.wrapperEl.style.transitionDuration = `${duration}ms`;\n swiper.wrapperEl.style.transitionDelay = duration === 0 ? `0ms` : '';\n }\n swiper.emit('setTransition', duration, byController);\n}\n\nfunction transitionEmit(_ref) {\n let {\n swiper,\n runCallbacks,\n direction,\n step\n } = _ref;\n const {\n activeIndex,\n previousIndex\n } = swiper;\n let dir = direction;\n if (!dir) {\n if (activeIndex > previousIndex) dir = 'next';else if (activeIndex < previousIndex) dir = 'prev';else dir = 'reset';\n }\n swiper.emit(`transition${step}`);\n if (runCallbacks && activeIndex !== previousIndex) {\n if (dir === 'reset') {\n swiper.emit(`slideResetTransition${step}`);\n return;\n }\n swiper.emit(`slideChangeTransition${step}`);\n if (dir === 'next') {\n swiper.emit(`slideNextTransition${step}`);\n } else {\n swiper.emit(`slidePrevTransition${step}`);\n }\n }\n}\n\nfunction transitionStart(runCallbacks, direction) {\n if (runCallbacks === void 0) {\n runCallbacks = true;\n }\n const swiper = this;\n const {\n params\n } = swiper;\n if (params.cssMode) return;\n if (params.autoHeight) {\n swiper.updateAutoHeight();\n }\n transitionEmit({\n swiper,\n runCallbacks,\n direction,\n step: 'Start'\n });\n}\n\nfunction transitionEnd(runCallbacks, direction) {\n if (runCallbacks === void 0) {\n runCallbacks = true;\n }\n const swiper = this;\n const {\n params\n } = swiper;\n swiper.animating = false;\n if (params.cssMode) return;\n swiper.setTransition(0);\n transitionEmit({\n swiper,\n runCallbacks,\n direction,\n step: 'End'\n });\n}\n\nvar transition = {\n setTransition,\n transitionStart,\n transitionEnd\n};\n\nfunction slideTo(index, speed, runCallbacks, internal, initial) {\n if (index === void 0) {\n index = 0;\n }\n if (speed === void 0) {\n speed = this.params.speed;\n }\n if (runCallbacks === void 0) {\n runCallbacks = true;\n }\n if (typeof index === 'string') {\n index = parseInt(index, 10);\n }\n const swiper = this;\n let slideIndex = index;\n if (slideIndex < 0) slideIndex = 0;\n const {\n params,\n snapGrid,\n slidesGrid,\n previousIndex,\n activeIndex,\n rtlTranslate: rtl,\n wrapperEl,\n enabled\n } = swiper;\n if (swiper.animating && params.preventInteractionOnTransition || !enabled && !internal && !initial) {\n return false;\n }\n const skip = Math.min(swiper.params.slidesPerGroupSkip, slideIndex);\n let snapIndex = skip + Math.floor((slideIndex - skip) / swiper.params.slidesPerGroup);\n if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;\n const translate = -snapGrid[snapIndex];\n // Normalize slideIndex\n if (params.normalizeSlideIndex) {\n for (let i = 0; i < slidesGrid.length; i += 1) {\n const normalizedTranslate = -Math.floor(translate * 100);\n const normalizedGrid = Math.floor(slidesGrid[i] * 100);\n const normalizedGridNext = Math.floor(slidesGrid[i + 1] * 100);\n if (typeof slidesGrid[i + 1] !== 'undefined') {\n if (normalizedTranslate >= normalizedGrid && normalizedTranslate < normalizedGridNext - (normalizedGridNext - normalizedGrid) / 2) {\n slideIndex = i;\n } else if (normalizedTranslate >= normalizedGrid && normalizedTranslate < normalizedGridNext) {\n slideIndex = i + 1;\n }\n } else if (normalizedTranslate >= normalizedGrid) {\n slideIndex = i;\n }\n }\n }\n // Directions locks\n if (swiper.initialized && slideIndex !== activeIndex) {\n if (!swiper.allowSlideNext && (rtl ? translate > swiper.translate && translate > swiper.minTranslate() : translate < swiper.translate && translate < swiper.minTranslate())) {\n return false;\n }\n if (!swiper.allowSlidePrev && translate > swiper.translate && translate > swiper.maxTranslate()) {\n if ((activeIndex || 0) !== slideIndex) {\n return false;\n }\n }\n }\n if (slideIndex !== (previousIndex || 0) && runCallbacks) {\n swiper.emit('beforeSlideChangeStart');\n }\n\n // Update progress\n swiper.updateProgress(translate);\n let direction;\n if (slideIndex > activeIndex) direction = 'next';else if (slideIndex < activeIndex) direction = 'prev';else direction = 'reset';\n\n // Update Index\n if (rtl && -translate === swiper.translate || !rtl && translate === swiper.translate) {\n swiper.updateActiveIndex(slideIndex);\n // Update Height\n if (params.autoHeight) {\n swiper.updateAutoHeight();\n }\n swiper.updateSlidesClasses();\n if (params.effect !== 'slide') {\n swiper.setTranslate(translate);\n }\n if (direction !== 'reset') {\n swiper.transitionStart(runCallbacks, direction);\n swiper.transitionEnd(runCallbacks, direction);\n }\n return false;\n }\n if (params.cssMode) {\n const isH = swiper.isHorizontal();\n const t = rtl ? translate : -translate;\n if (speed === 0) {\n const isVirtual = swiper.virtual && swiper.params.virtual.enabled;\n if (isVirtual) {\n swiper.wrapperEl.style.scrollSnapType = 'none';\n swiper._immediateVirtual = true;\n }\n if (isVirtual && !swiper._cssModeVirtualInitialSet && swiper.params.initialSlide > 0) {\n swiper._cssModeVirtualInitialSet = true;\n requestAnimationFrame(() => {\n wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = t;\n });\n } else {\n wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = t;\n }\n if (isVirtual) {\n requestAnimationFrame(() => {\n swiper.wrapperEl.style.scrollSnapType = '';\n swiper._immediateVirtual = false;\n });\n }\n } else {\n if (!swiper.support.smoothScroll) {\n animateCSSModeScroll({\n swiper,\n targetPosition: t,\n side: isH ? 'left' : 'top'\n });\n return true;\n }\n wrapperEl.scrollTo({\n [isH ? 'left' : 'top']: t,\n behavior: 'smooth'\n });\n }\n return true;\n }\n swiper.setTransition(speed);\n swiper.setTranslate(translate);\n swiper.updateActiveIndex(slideIndex);\n swiper.updateSlidesClasses();\n swiper.emit('beforeTransitionStart', speed, internal);\n swiper.transitionStart(runCallbacks, direction);\n if (speed === 0) {\n swiper.transitionEnd(runCallbacks, direction);\n } else if (!swiper.animating) {\n swiper.animating = true;\n if (!swiper.onSlideToWrapperTransitionEnd) {\n swiper.onSlideToWrapperTransitionEnd = function transitionEnd(e) {\n if (!swiper || swiper.destroyed) return;\n if (e.target !== this) return;\n swiper.wrapperEl.removeEventListener('transitionend', swiper.onSlideToWrapperTransitionEnd);\n swiper.onSlideToWrapperTransitionEnd = null;\n delete swiper.onSlideToWrapperTransitionEnd;\n swiper.transitionEnd(runCallbacks, direction);\n };\n }\n swiper.wrapperEl.addEventListener('transitionend', swiper.onSlideToWrapperTransitionEnd);\n }\n return true;\n}\n\nfunction slideToLoop(index, speed, runCallbacks, internal) {\n if (index === void 0) {\n index = 0;\n }\n if (speed === void 0) {\n speed = this.params.speed;\n }\n if (runCallbacks === void 0) {\n runCallbacks = true;\n }\n if (typeof index === 'string') {\n const indexAsNumber = parseInt(index, 10);\n index = indexAsNumber;\n }\n const swiper = this;\n const gridEnabled = swiper.grid && swiper.params.grid && swiper.params.grid.rows > 1;\n let newIndex = index;\n if (swiper.params.loop) {\n if (swiper.virtual && swiper.params.virtual.enabled) {\n // eslint-disable-next-line\n newIndex = newIndex + swiper.virtual.slidesBefore;\n } else {\n let targetSlideIndex;\n if (gridEnabled) {\n const slideIndex = newIndex * swiper.params.grid.rows;\n targetSlideIndex = swiper.slides.filter(slideEl => slideEl.getAttribute('data-swiper-slide-index') * 1 === slideIndex)[0].column;\n } else {\n targetSlideIndex = swiper.getSlideIndexByData(newIndex);\n }\n const cols = gridEnabled ? Math.ceil(swiper.slides.length / swiper.params.grid.rows) : swiper.slides.length;\n const {\n centeredSlides\n } = swiper.params;\n let slidesPerView = swiper.params.slidesPerView;\n if (slidesPerView === 'auto') {\n slidesPerView = swiper.slidesPerViewDynamic();\n } else {\n slidesPerView = Math.ceil(parseFloat(swiper.params.slidesPerView, 10));\n if (centeredSlides && slidesPerView % 2 === 0) {\n slidesPerView = slidesPerView + 1;\n }\n }\n let needLoopFix = cols - targetSlideIndex < slidesPerView;\n if (centeredSlides) {\n needLoopFix = needLoopFix || targetSlideIndex < Math.ceil(slidesPerView / 2);\n }\n if (needLoopFix) {\n const direction = centeredSlides ? targetSlideIndex < swiper.activeIndex ? 'prev' : 'next' : targetSlideIndex - swiper.activeIndex - 1 < swiper.params.slidesPerView ? 'next' : 'prev';\n swiper.loopFix({\n direction,\n slideTo: true,\n activeSlideIndex: direction === 'next' ? targetSlideIndex + 1 : targetSlideIndex - cols + 1,\n slideRealIndex: direction === 'next' ? swiper.realIndex : undefined\n });\n }\n if (gridEnabled) {\n const slideIndex = newIndex * swiper.params.grid.rows;\n newIndex = swiper.slides.filter(slideEl => slideEl.getAttribute('data-swiper-slide-index') * 1 === slideIndex)[0].column;\n } else {\n newIndex = swiper.getSlideIndexByData(newIndex);\n }\n }\n }\n requestAnimationFrame(() => {\n swiper.slideTo(newIndex, speed, runCallbacks, internal);\n });\n return swiper;\n}\n\n/* eslint no-unused-vars: \"off\" */\nfunction slideNext(speed, runCallbacks, internal) {\n if (speed === void 0) {\n speed = this.params.speed;\n }\n if (runCallbacks === void 0) {\n runCallbacks = true;\n }\n const swiper = this;\n const {\n enabled,\n params,\n animating\n } = swiper;\n if (!enabled) return swiper;\n let perGroup = params.slidesPerGroup;\n if (params.slidesPerView === 'auto' && params.slidesPerGroup === 1 && params.slidesPerGroupAuto) {\n perGroup = Math.max(swiper.slidesPerViewDynamic('current', true), 1);\n }\n const increment = swiper.activeIndex < params.slidesPerGroupSkip ? 1 : perGroup;\n const isVirtual = swiper.virtual && params.virtual.enabled;\n if (params.loop) {\n if (animating && !isVirtual && params.loopPreventsSliding) return false;\n swiper.loopFix({\n direction: 'next'\n });\n // eslint-disable-next-line\n swiper._clientLeft = swiper.wrapperEl.clientLeft;\n if (swiper.activeIndex === swiper.slides.length - 1 && params.cssMode) {\n requestAnimationFrame(() => {\n swiper.slideTo(swiper.activeIndex + increment, speed, runCallbacks, internal);\n });\n return true;\n }\n }\n if (params.rewind && swiper.isEnd) {\n return swiper.slideTo(0, speed, runCallbacks, internal);\n }\n return swiper.slideTo(swiper.activeIndex + increment, speed, runCallbacks, internal);\n}\n\n/* eslint no-unused-vars: \"off\" */\nfunction slidePrev(speed, runCallbacks, internal) {\n if (speed === void 0) {\n speed = this.params.speed;\n }\n if (runCallbacks === void 0) {\n runCallbacks = true;\n }\n const swiper = this;\n const {\n params,\n snapGrid,\n slidesGrid,\n rtlTranslate,\n enabled,\n animating\n } = swiper;\n if (!enabled) return swiper;\n const isVirtual = swiper.virtual && params.virtual.enabled;\n if (params.loop) {\n if (animating && !isVirtual && params.loopPreventsSliding) return false;\n swiper.loopFix({\n direction: 'prev'\n });\n // eslint-disable-next-line\n swiper._clientLeft = swiper.wrapperEl.clientLeft;\n }\n const translate = rtlTranslate ? swiper.translate : -swiper.translate;\n function normalize(val) {\n if (val < 0) return -Math.floor(Math.abs(val));\n return Math.floor(val);\n }\n const normalizedTranslate = normalize(translate);\n const normalizedSnapGrid = snapGrid.map(val => normalize(val));\n let prevSnap = snapGrid[normalizedSnapGrid.indexOf(normalizedTranslate) - 1];\n if (typeof prevSnap === 'undefined' && params.cssMode) {\n let prevSnapIndex;\n snapGrid.forEach((snap, snapIndex) => {\n if (normalizedTranslate >= snap) {\n // prevSnap = snap;\n prevSnapIndex = snapIndex;\n }\n });\n if (typeof prevSnapIndex !== 'undefined') {\n prevSnap = snapGrid[prevSnapIndex > 0 ? prevSnapIndex - 1 : prevSnapIndex];\n }\n }\n let prevIndex = 0;\n if (typeof prevSnap !== 'undefined') {\n prevIndex = slidesGrid.indexOf(prevSnap);\n if (prevIndex < 0) prevIndex = swiper.activeIndex - 1;\n if (params.slidesPerView === 'auto' && params.slidesPerGroup === 1 && params.slidesPerGroupAuto) {\n prevIndex = prevIndex - swiper.slidesPerViewDynamic('previous', true) + 1;\n prevIndex = Math.max(prevIndex, 0);\n }\n }\n if (params.rewind && swiper.isBeginning) {\n const lastIndex = swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual ? swiper.virtual.slides.length - 1 : swiper.slides.length - 1;\n return swiper.slideTo(lastIndex, speed, runCallbacks, internal);\n } else if (params.loop && swiper.activeIndex === 0 && params.cssMode) {\n requestAnimationFrame(() => {\n swiper.slideTo(prevIndex, speed, runCallbacks, internal);\n });\n return true;\n }\n return swiper.slideTo(prevIndex, speed, runCallbacks, internal);\n}\n\n/* eslint no-unused-vars: \"off\" */\nfunction slideReset(speed, runCallbacks, internal) {\n if (speed === void 0) {\n speed = this.params.speed;\n }\n if (runCallbacks === void 0) {\n runCallbacks = true;\n }\n const swiper = this;\n return swiper.slideTo(swiper.activeIndex, speed, runCallbacks, internal);\n}\n\n/* eslint no-unused-vars: \"off\" */\nfunction slideToClosest(speed, runCallbacks, internal, threshold) {\n if (speed === void 0) {\n speed = this.params.speed;\n }\n if (runCallbacks === void 0) {\n runCallbacks = true;\n }\n if (threshold === void 0) {\n threshold = 0.5;\n }\n const swiper = this;\n let index = swiper.activeIndex;\n const skip = Math.min(swiper.params.slidesPerGroupSkip, index);\n const snapIndex = skip + Math.floor((index - skip) / swiper.params.slidesPerGroup);\n const translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate;\n if (translate >= swiper.snapGrid[snapIndex]) {\n // The current translate is on or after the current snap index, so the choice\n // is between the current index and the one after it.\n const currentSnap = swiper.snapGrid[snapIndex];\n const nextSnap = swiper.snapGrid[snapIndex + 1];\n if (translate - currentSnap > (nextSnap - currentSnap) * threshold) {\n index += swiper.params.slidesPerGroup;\n }\n } else {\n // The current translate is before the current snap index, so the choice\n // is between the current index and the one before it.\n const prevSnap = swiper.snapGrid[snapIndex - 1];\n const currentSnap = swiper.snapGrid[snapIndex];\n if (translate - prevSnap <= (currentSnap - prevSnap) * threshold) {\n index -= swiper.params.slidesPerGroup;\n }\n }\n index = Math.max(index, 0);\n index = Math.min(index, swiper.slidesGrid.length - 1);\n return swiper.slideTo(index, speed, runCallbacks, internal);\n}\n\nfunction slideToClickedSlide() {\n const swiper = this;\n const {\n params,\n slidesEl\n } = swiper;\n const slidesPerView = params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : params.slidesPerView;\n let slideToIndex = swiper.clickedIndex;\n let realIndex;\n const slideSelector = swiper.isElement ? `swiper-slide` : `.${params.slideClass}`;\n if (params.loop) {\n if (swiper.animating) return;\n realIndex = parseInt(swiper.clickedSlide.getAttribute('data-swiper-slide-index'), 10);\n if (params.centeredSlides) {\n if (slideToIndex < swiper.loopedSlides - slidesPerView / 2 || slideToIndex > swiper.slides.length - swiper.loopedSlides + slidesPerView / 2) {\n swiper.loopFix();\n slideToIndex = swiper.getSlideIndex(elementChildren(slidesEl, `${slideSelector}[data-swiper-slide-index=\"${realIndex}\"]`)[0]);\n nextTick(() => {\n swiper.slideTo(slideToIndex);\n });\n } else {\n swiper.slideTo(slideToIndex);\n }\n } else if (slideToIndex > swiper.slides.length - slidesPerView) {\n swiper.loopFix();\n slideToIndex = swiper.getSlideIndex(elementChildren(slidesEl, `${slideSelector}[data-swiper-slide-index=\"${realIndex}\"]`)[0]);\n nextTick(() => {\n swiper.slideTo(slideToIndex);\n });\n } else {\n swiper.slideTo(slideToIndex);\n }\n } else {\n swiper.slideTo(slideToIndex);\n }\n}\n\nvar slide = {\n slideTo,\n slideToLoop,\n slideNext,\n slidePrev,\n slideReset,\n slideToClosest,\n slideToClickedSlide\n};\n\nfunction loopCreate(slideRealIndex) {\n const swiper = this;\n const {\n params,\n slidesEl\n } = swiper;\n if (!params.loop || swiper.virtual && swiper.params.virtual.enabled) return;\n const initSlides = () => {\n const slides = elementChildren(slidesEl, `.${params.slideClass}, swiper-slide`);\n slides.forEach((el, index) => {\n el.setAttribute('data-swiper-slide-index', index);\n });\n };\n const gridEnabled = swiper.grid && params.grid && params.grid.rows > 1;\n const slidesPerGroup = params.slidesPerGroup * (gridEnabled ? params.grid.rows : 1);\n const shouldFillGroup = swiper.slides.length % slidesPerGroup !== 0;\n const shouldFillGrid = gridEnabled && swiper.slides.length % params.grid.rows !== 0;\n const addBlankSlides = amountOfSlides => {\n for (let i = 0; i < amountOfSlides; i += 1) {\n const slideEl = swiper.isElement ? createElement('swiper-slide', [params.slideBlankClass]) : createElement('div', [params.slideClass, params.slideBlankClass]);\n swiper.slidesEl.append(slideEl);\n }\n };\n if (shouldFillGroup) {\n if (params.loopAddBlankSlides) {\n const slidesToAdd = slidesPerGroup - swiper.slides.length % slidesPerGroup;\n addBlankSlides(slidesToAdd);\n swiper.recalcSlides();\n swiper.updateSlides();\n } else {\n showWarning('Swiper Loop Warning: The number of slides is not even to slidesPerGroup, loop mode may not function properly. You need to add more slides (or make duplicates, or empty slides)');\n }\n initSlides();\n } else if (shouldFillGrid) {\n if (params.loopAddBlankSlides) {\n const slidesToAdd = params.grid.rows - swiper.slides.length % params.grid.rows;\n addBlankSlides(slidesToAdd);\n swiper.recalcSlides();\n swiper.updateSlides();\n } else {\n showWarning('Swiper Loop Warning: The number of slides is not even to grid.rows, loop mode may not function properly. You need to add more slides (or make duplicates, or empty slides)');\n }\n initSlides();\n } else {\n initSlides();\n }\n swiper.loopFix({\n slideRealIndex,\n direction: params.centeredSlides ? undefined : 'next'\n });\n}\n\nfunction loopFix(_temp) {\n let {\n slideRealIndex,\n slideTo = true,\n direction,\n setTranslate,\n activeSlideIndex,\n byController,\n byMousewheel\n } = _temp === void 0 ? {} : _temp;\n const swiper = this;\n if (!swiper.params.loop) return;\n swiper.emit('beforeLoopFix');\n const {\n slides,\n allowSlidePrev,\n allowSlideNext,\n slidesEl,\n params\n } = swiper;\n const {\n centeredSlides\n } = params;\n swiper.allowSlidePrev = true;\n swiper.allowSlideNext = true;\n if (swiper.virtual && params.virtual.enabled) {\n if (slideTo) {\n if (!params.centeredSlides && swiper.snapIndex === 0) {\n swiper.slideTo(swiper.virtual.slides.length, 0, false, true);\n } else if (params.centeredSlides && swiper.snapIndex < params.slidesPerView) {\n swiper.slideTo(swiper.virtual.slides.length + swiper.snapIndex, 0, false, true);\n } else if (swiper.snapIndex === swiper.snapGrid.length - 1) {\n swiper.slideTo(swiper.virtual.slidesBefore, 0, false, true);\n }\n }\n swiper.allowSlidePrev = allowSlidePrev;\n swiper.allowSlideNext = allowSlideNext;\n swiper.emit('loopFix');\n return;\n }\n let slidesPerView = params.slidesPerView;\n if (slidesPerView === 'auto') {\n slidesPerView = swiper.slidesPerViewDynamic();\n } else {\n slidesPerView = Math.ceil(parseFloat(params.slidesPerView, 10));\n if (centeredSlides && slidesPerView % 2 === 0) {\n slidesPerView = slidesPerView + 1;\n }\n }\n const slidesPerGroup = params.slidesPerGroupAuto ? slidesPerView : params.slidesPerGroup;\n let loopedSlides = slidesPerGroup;\n if (loopedSlides % slidesPerGroup !== 0) {\n loopedSlides += slidesPerGroup - loopedSlides % slidesPerGroup;\n }\n loopedSlides += params.loopAdditionalSlides;\n swiper.loopedSlides = loopedSlides;\n const gridEnabled = swiper.grid && params.grid && params.grid.rows > 1;\n if (slides.length < slidesPerView + loopedSlides) {\n showWarning('Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled and not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters');\n } else if (gridEnabled && params.grid.fill === 'row') {\n showWarning('Swiper Loop Warning: Loop mode is not compatible with grid.fill = `row`');\n }\n const prependSlidesIndexes = [];\n const appendSlidesIndexes = [];\n let activeIndex = swiper.activeIndex;\n if (typeof activeSlideIndex === 'undefined') {\n activeSlideIndex = swiper.getSlideIndex(slides.filter(el => el.classList.contains(params.slideActiveClass))[0]);\n } else {\n activeIndex = activeSlideIndex;\n }\n const isNext = direction === 'next' || !direction;\n const isPrev = direction === 'prev' || !direction;\n let slidesPrepended = 0;\n let slidesAppended = 0;\n const cols = gridEnabled ? Math.ceil(slides.length / params.grid.rows) : slides.length;\n const activeColIndex = gridEnabled ? slides[activeSlideIndex].column : activeSlideIndex;\n const activeColIndexWithShift = activeColIndex + (centeredSlides && typeof setTranslate === 'undefined' ? -slidesPerView / 2 + 0.5 : 0);\n // prepend last slides before start\n if (activeColIndexWithShift < loopedSlides) {\n slidesPrepended = Math.max(loopedSlides - activeColIndexWithShift, slidesPerGroup);\n for (let i = 0; i < loopedSlides - activeColIndexWithShift; i += 1) {\n const index = i - Math.floor(i / cols) * cols;\n if (gridEnabled) {\n const colIndexToPrepend = cols - index - 1;\n for (let i = slides.length - 1; i >= 0; i -= 1) {\n if (slides[i].column === colIndexToPrepend) prependSlidesIndexes.push(i);\n }\n // slides.forEach((slide, slideIndex) => {\n // if (slide.column === colIndexToPrepend) prependSlidesIndexes.push(slideIndex);\n // });\n } else {\n prependSlidesIndexes.push(cols - index - 1);\n }\n }\n } else if (activeColIndexWithShift + slidesPerView > cols - loopedSlides) {\n slidesAppended = Math.max(activeColIndexWithShift - (cols - loopedSlides * 2), slidesPerGroup);\n for (let i = 0; i < slidesAppended; i += 1) {\n const index = i - Math.floor(i / cols) * cols;\n if (gridEnabled) {\n slides.forEach((slide, slideIndex) => {\n if (slide.column === index) appendSlidesIndexes.push(slideIndex);\n });\n } else {\n appendSlidesIndexes.push(index);\n }\n }\n }\n swiper.__preventObserver__ = true;\n requestAnimationFrame(() => {\n swiper.__preventObserver__ = false;\n });\n if (isPrev) {\n prependSlidesIndexes.forEach(index => {\n slides[index].swiperLoopMoveDOM = true;\n slidesEl.prepend(slides[index]);\n slides[index].swiperLoopMoveDOM = false;\n });\n }\n if (isNext) {\n appendSlidesIndexes.forEach(index => {\n slides[index].swiperLoopMoveDOM = true;\n slidesEl.append(slides[index]);\n slides[index].swiperLoopMoveDOM = false;\n });\n }\n swiper.recalcSlides();\n if (params.slidesPerView === 'auto') {\n swiper.updateSlides();\n } else if (gridEnabled && (prependSlidesIndexes.length > 0 && isPrev || appendSlidesIndexes.length > 0 && isNext)) {\n swiper.slides.forEach((slide, slideIndex) => {\n swiper.grid.updateSlide(slideIndex, slide, swiper.slides);\n });\n }\n if (params.watchSlidesProgress) {\n swiper.updateSlidesOffset();\n }\n if (slideTo) {\n if (prependSlidesIndexes.length > 0 && isPrev) {\n if (typeof slideRealIndex === 'undefined') {\n const currentSlideTranslate = swiper.slidesGrid[activeIndex];\n const newSlideTranslate = swiper.slidesGrid[activeIndex + slidesPrepended];\n const diff = newSlideTranslate - currentSlideTranslate;\n if (byMousewheel) {\n swiper.setTranslate(swiper.translate - diff);\n } else {\n swiper.slideTo(activeIndex + slidesPrepended, 0, false, true);\n if (setTranslate) {\n swiper.touchEventsData.startTranslate = swiper.touchEventsData.startTranslate - diff;\n swiper.touchEventsData.currentTranslate = swiper.touchEventsData.currentTranslate - diff;\n }\n }\n } else {\n if (setTranslate) {\n const shift = gridEnabled ? prependSlidesIndexes.length / params.grid.rows : prependSlidesIndexes.length;\n swiper.slideTo(swiper.activeIndex + shift, 0, false, true);\n swiper.touchEventsData.currentTranslate = swiper.translate;\n }\n }\n } else if (appendSlidesIndexes.length > 0 && isNext) {\n if (typeof slideRealIndex === 'undefined') {\n const currentSlideTranslate = swiper.slidesGrid[activeIndex];\n const newSlideTranslate = swiper.slidesGrid[activeIndex - slidesAppended];\n const diff = newSlideTranslate - currentSlideTranslate;\n if (byMousewheel) {\n swiper.setTranslate(swiper.translate - diff);\n } else {\n swiper.slideTo(activeIndex - slidesAppended, 0, false, true);\n if (setTranslate) {\n swiper.touchEventsData.startTranslate = swiper.touchEventsData.startTranslate - diff;\n swiper.touchEventsData.currentTranslate = swiper.touchEventsData.currentTranslate - diff;\n }\n }\n } else {\n const shift = gridEnabled ? appendSlidesIndexes.length / params.grid.rows : appendSlidesIndexes.length;\n swiper.slideTo(swiper.activeIndex - shift, 0, false, true);\n }\n }\n }\n swiper.allowSlidePrev = allowSlidePrev;\n swiper.allowSlideNext = allowSlideNext;\n if (swiper.controller && swiper.controller.control && !byController) {\n const loopParams = {\n slideRealIndex,\n direction,\n setTranslate,\n activeSlideIndex,\n byController: true\n };\n if (Array.isArray(swiper.controller.control)) {\n swiper.controller.control.forEach(c => {\n if (!c.destroyed && c.params.loop) c.loopFix({\n ...loopParams,\n slideTo: c.params.slidesPerView === params.slidesPerView ? slideTo : false\n });\n });\n } else if (swiper.controller.control instanceof swiper.constructor && swiper.controller.control.params.loop) {\n swiper.controller.control.loopFix({\n ...loopParams,\n slideTo: swiper.controller.control.params.slidesPerView === params.slidesPerView ? slideTo : false\n });\n }\n }\n swiper.emit('loopFix');\n}\n\nfunction loopDestroy() {\n const swiper = this;\n const {\n params,\n slidesEl\n } = swiper;\n if (!params.loop || swiper.virtual && swiper.params.virtual.enabled) return;\n swiper.recalcSlides();\n const newSlidesOrder = [];\n swiper.slides.forEach(slideEl => {\n const index = typeof slideEl.swiperSlideIndex === 'undefined' ? slideEl.getAttribute('data-swiper-slide-index') * 1 : slideEl.swiperSlideIndex;\n newSlidesOrder[index] = slideEl;\n });\n swiper.slides.forEach(slideEl => {\n slideEl.removeAttribute('data-swiper-slide-index');\n });\n newSlidesOrder.forEach(slideEl => {\n slidesEl.append(slideEl);\n });\n swiper.recalcSlides();\n swiper.slideTo(swiper.realIndex, 0);\n}\n\nvar loop = {\n loopCreate,\n loopFix,\n loopDestroy\n};\n\nfunction setGrabCursor(moving) {\n const swiper = this;\n if (!swiper.params.simulateTouch || swiper.params.watchOverflow && swiper.isLocked || swiper.params.cssMode) return;\n const el = swiper.params.touchEventsTarget === 'container' ? swiper.el : swiper.wrapperEl;\n if (swiper.isElement) {\n swiper.__preventObserver__ = true;\n }\n el.style.cursor = 'move';\n el.style.cursor = moving ? 'grabbing' : 'grab';\n if (swiper.isElement) {\n requestAnimationFrame(() => {\n swiper.__preventObserver__ = false;\n });\n }\n}\n\nfunction unsetGrabCursor() {\n const swiper = this;\n if (swiper.params.watchOverflow && swiper.isLocked || swiper.params.cssMode) {\n return;\n }\n if (swiper.isElement) {\n swiper.__preventObserver__ = true;\n }\n swiper[swiper.params.touchEventsTarget === 'container' ? 'el' : 'wrapperEl'].style.cursor = '';\n if (swiper.isElement) {\n requestAnimationFrame(() => {\n swiper.__preventObserver__ = false;\n });\n }\n}\n\nvar grabCursor = {\n setGrabCursor,\n unsetGrabCursor\n};\n\n// Modified from https://stackoverflow.com/questions/54520554/custom-element-getrootnode-closest-function-crossing-multiple-parent-shadowd\nfunction closestElement(selector, base) {\n if (base === void 0) {\n base = this;\n }\n function __closestFrom(el) {\n if (!el || el === getDocument() || el === getWindow()) return null;\n if (el.assignedSlot) el = el.assignedSlot;\n const found = el.closest(selector);\n if (!found && !el.getRootNode) {\n return null;\n }\n return found || __closestFrom(el.getRootNode().host);\n }\n return __closestFrom(base);\n}\nfunction preventEdgeSwipe(swiper, event, startX) {\n const window = getWindow();\n const {\n params\n } = swiper;\n const edgeSwipeDetection = params.edgeSwipeDetection;\n const edgeSwipeThreshold = params.edgeSwipeThreshold;\n if (edgeSwipeDetection && (startX <= edgeSwipeThreshold || startX >= window.innerWidth - edgeSwipeThreshold)) {\n if (edgeSwipeDetection === 'prevent') {\n event.preventDefault();\n return true;\n }\n return false;\n }\n return true;\n}\nfunction onTouchStart(event) {\n const swiper = this;\n const document = getDocument();\n let e = event;\n if (e.originalEvent) e = e.originalEvent;\n const data = swiper.touchEventsData;\n if (e.type === 'pointerdown') {\n if (data.pointerId !== null && data.pointerId !== e.pointerId) {\n return;\n }\n data.pointerId = e.pointerId;\n } else if (e.type === 'touchstart' && e.targetTouches.length === 1) {\n data.touchId = e.targetTouches[0].identifier;\n }\n if (e.type === 'touchstart') {\n // don't proceed touch event\n preventEdgeSwipe(swiper, e, e.targetTouches[0].pageX);\n return;\n }\n const {\n params,\n touches,\n enabled\n } = swiper;\n if (!enabled) return;\n if (!params.simulateTouch && e.pointerType === 'mouse') return;\n if (swiper.animating && params.preventInteractionOnTransition) {\n return;\n }\n if (!swiper.animating && params.cssMode && params.loop) {\n swiper.loopFix();\n }\n let targetEl = e.target;\n if (params.touchEventsTarget === 'wrapper') {\n if (!swiper.wrapperEl.contains(targetEl)) return;\n }\n if ('which' in e && e.which === 3) return;\n if ('button' in e && e.button > 0) return;\n if (data.isTouched && data.isMoved) return;\n\n // change target el for shadow root component\n const swipingClassHasValue = !!params.noSwipingClass && params.noSwipingClass !== '';\n // eslint-disable-next-line\n const eventPath = e.composedPath ? e.composedPath() : e.path;\n if (swipingClassHasValue && e.target && e.target.shadowRoot && eventPath) {\n targetEl = eventPath[0];\n }\n const noSwipingSelector = params.noSwipingSelector ? params.noSwipingSelector : `.${params.noSwipingClass}`;\n const isTargetShadow = !!(e.target && e.target.shadowRoot);\n\n // use closestElement for shadow root element to get the actual closest for nested shadow root element\n if (params.noSwiping && (isTargetShadow ? closestElement(noSwipingSelector, targetEl) : targetEl.closest(noSwipingSelector))) {\n swiper.allowClick = true;\n return;\n }\n if (params.swipeHandler) {\n if (!targetEl.closest(params.swipeHandler)) return;\n }\n touches.currentX = e.pageX;\n touches.currentY = e.pageY;\n const startX = touches.currentX;\n const startY = touches.currentY;\n\n // Do NOT start if iOS edge swipe is detected. Otherwise iOS app cannot swipe-to-go-back anymore\n\n if (!preventEdgeSwipe(swiper, e, startX)) {\n return;\n }\n Object.assign(data, {\n isTouched: true,\n isMoved: false,\n allowTouchCallbacks: true,\n isScrolling: undefined,\n startMoving: undefined\n });\n touches.startX = startX;\n touches.startY = startY;\n data.touchStartTime = now();\n swiper.allowClick = true;\n swiper.updateSize();\n swiper.swipeDirection = undefined;\n if (params.threshold > 0) data.allowThresholdMove = false;\n let preventDefault = true;\n if (targetEl.matches(data.focusableElements)) {\n preventDefault = false;\n if (targetEl.nodeName === 'SELECT') {\n data.isTouched = false;\n }\n }\n if (document.activeElement && document.activeElement.matches(data.focusableElements) && document.activeElement !== targetEl) {\n document.activeElement.blur();\n }\n const shouldPreventDefault = preventDefault && swiper.allowTouchMove && params.touchStartPreventDefault;\n if ((params.touchStartForcePreventDefault || shouldPreventDefault) && !targetEl.isContentEditable) {\n e.preventDefault();\n }\n if (params.freeMode && params.freeMode.enabled && swiper.freeMode && swiper.animating && !params.cssMode) {\n swiper.freeMode.onTouchStart();\n }\n swiper.emit('touchStart', e);\n}\n\nfunction onTouchMove(event) {\n const document = getDocument();\n const swiper = this;\n const data = swiper.touchEventsData;\n const {\n params,\n touches,\n rtlTranslate: rtl,\n enabled\n } = swiper;\n if (!enabled) return;\n if (!params.simulateTouch && event.pointerType === 'mouse') return;\n let e = event;\n if (e.originalEvent) e = e.originalEvent;\n if (e.type === 'pointermove') {\n if (data.touchId !== null) return; // return from pointer if we use touch\n const id = e.pointerId;\n if (id !== data.pointerId) return;\n }\n let targetTouch;\n if (e.type === 'touchmove') {\n targetTouch = [...e.changedTouches].filter(t => t.identifier === data.touchId)[0];\n if (!targetTouch || targetTouch.identifier !== data.touchId) return;\n } else {\n targetTouch = e;\n }\n if (!data.isTouched) {\n if (data.startMoving && data.isScrolling) {\n swiper.emit('touchMoveOpposite', e);\n }\n return;\n }\n const pageX = targetTouch.pageX;\n const pageY = targetTouch.pageY;\n if (e.preventedByNestedSwiper) {\n touches.startX = pageX;\n touches.startY = pageY;\n return;\n }\n if (!swiper.allowTouchMove) {\n if (!e.target.matches(data.focusableElements)) {\n swiper.allowClick = false;\n }\n if (data.isTouched) {\n Object.assign(touches, {\n startX: pageX,\n startY: pageY,\n currentX: pageX,\n currentY: pageY\n });\n data.touchStartTime = now();\n }\n return;\n }\n if (params.touchReleaseOnEdges && !params.loop) {\n if (swiper.isVertical()) {\n // Vertical\n if (pageY < touches.startY && swiper.translate <= swiper.maxTranslate() || pageY > touches.startY && swiper.translate >= swiper.minTranslate()) {\n data.isTouched = false;\n data.isMoved = false;\n return;\n }\n } else if (pageX < touches.startX && swiper.translate <= swiper.maxTranslate() || pageX > touches.startX && swiper.translate >= swiper.minTranslate()) {\n return;\n }\n }\n if (document.activeElement) {\n if (e.target === document.activeElement && e.target.matches(data.focusableElements)) {\n data.isMoved = true;\n swiper.allowClick = false;\n return;\n }\n }\n if (data.allowTouchCallbacks) {\n swiper.emit('touchMove', e);\n }\n touches.previousX = touches.currentX;\n touches.previousY = touches.currentY;\n touches.currentX = pageX;\n touches.currentY = pageY;\n const diffX = touches.currentX - touches.startX;\n const diffY = touches.currentY - touches.startY;\n if (swiper.params.threshold && Math.sqrt(diffX ** 2 + diffY ** 2) < swiper.params.threshold) return;\n if (typeof data.isScrolling === 'undefined') {\n let touchAngle;\n if (swiper.isHorizontal() && touches.currentY === touches.startY || swiper.isVertical() && touches.currentX === touches.startX) {\n data.isScrolling = false;\n } else {\n // eslint-disable-next-line\n if (diffX * diffX + diffY * diffY >= 25) {\n touchAngle = Math.atan2(Math.abs(diffY), Math.abs(diffX)) * 180 / Math.PI;\n data.isScrolling = swiper.isHorizontal() ? touchAngle > params.touchAngle : 90 - touchAngle > params.touchAngle;\n }\n }\n }\n if (data.isScrolling) {\n swiper.emit('touchMoveOpposite', e);\n }\n if (typeof data.startMoving === 'undefined') {\n if (touches.currentX !== touches.startX || touches.currentY !== touches.startY) {\n data.startMoving = true;\n }\n }\n if (data.isScrolling) {\n data.isTouched = false;\n return;\n }\n if (!data.startMoving) {\n return;\n }\n swiper.allowClick = false;\n if (!params.cssMode && e.cancelable) {\n e.preventDefault();\n }\n if (params.touchMoveStopPropagation && !params.nested) {\n e.stopPropagation();\n }\n let diff = swiper.isHorizontal() ? diffX : diffY;\n let touchesDiff = swiper.isHorizontal() ? touches.currentX - touches.previousX : touches.currentY - touches.previousY;\n if (params.oneWayMovement) {\n diff = Math.abs(diff) * (rtl ? 1 : -1);\n touchesDiff = Math.abs(touchesDiff) * (rtl ? 1 : -1);\n }\n touches.diff = diff;\n diff *= params.touchRatio;\n if (rtl) {\n diff = -diff;\n touchesDiff = -touchesDiff;\n }\n const prevTouchesDirection = swiper.touchesDirection;\n swiper.swipeDirection = diff > 0 ? 'prev' : 'next';\n swiper.touchesDirection = touchesDiff > 0 ? 'prev' : 'next';\n const isLoop = swiper.params.loop && !params.cssMode;\n const allowLoopFix = swiper.touchesDirection === 'next' && swiper.allowSlideNext || swiper.touchesDirection === 'prev' && swiper.allowSlidePrev;\n if (!data.isMoved) {\n if (isLoop && allowLoopFix) {\n swiper.loopFix({\n direction: swiper.swipeDirection\n });\n }\n data.startTranslate = swiper.getTranslate();\n swiper.setTransition(0);\n if (swiper.animating) {\n const evt = new window.CustomEvent('transitionend', {\n bubbles: true,\n cancelable: true\n });\n swiper.wrapperEl.dispatchEvent(evt);\n }\n data.allowMomentumBounce = false;\n // Grab Cursor\n if (params.grabCursor && (swiper.allowSlideNext === true || swiper.allowSlidePrev === true)) {\n swiper.setGrabCursor(true);\n }\n swiper.emit('sliderFirstMove', e);\n }\n let loopFixed;\n new Date().getTime();\n if (data.isMoved && data.allowThresholdMove && prevTouchesDirection !== swiper.touchesDirection && isLoop && allowLoopFix && Math.abs(diff) >= 1) {\n Object.assign(touches, {\n startX: pageX,\n startY: pageY,\n currentX: pageX,\n currentY: pageY,\n startTranslate: data.currentTranslate\n });\n data.loopSwapReset = true;\n data.startTranslate = data.currentTranslate;\n return;\n }\n swiper.emit('sliderMove', e);\n data.isMoved = true;\n data.currentTranslate = diff + data.startTranslate;\n let disableParentSwiper = true;\n let resistanceRatio = params.resistanceRatio;\n if (params.touchReleaseOnEdges) {\n resistanceRatio = 0;\n }\n if (diff > 0) {\n if (isLoop && allowLoopFix && !loopFixed && data.allowThresholdMove && data.currentTranslate > (params.centeredSlides ? swiper.minTranslate() - swiper.slidesSizesGrid[swiper.activeIndex + 1] : swiper.minTranslate())) {\n swiper.loopFix({\n direction: 'prev',\n setTranslate: true,\n activeSlideIndex: 0\n });\n }\n if (data.currentTranslate > swiper.minTranslate()) {\n disableParentSwiper = false;\n if (params.resistance) {\n data.currentTranslate = swiper.minTranslate() - 1 + (-swiper.minTranslate() + data.startTranslate + diff) ** resistanceRatio;\n }\n }\n } else if (diff < 0) {\n if (isLoop && allowLoopFix && !loopFixed && data.allowThresholdMove && data.currentTranslate < (params.centeredSlides ? swiper.maxTranslate() + swiper.slidesSizesGrid[swiper.slidesSizesGrid.length - 1] : swiper.maxTranslate())) {\n swiper.loopFix({\n direction: 'next',\n setTranslate: true,\n activeSlideIndex: swiper.slides.length - (params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(parseFloat(params.slidesPerView, 10)))\n });\n }\n if (data.currentTranslate < swiper.maxTranslate()) {\n disableParentSwiper = false;\n if (params.resistance) {\n data.currentTranslate = swiper.maxTranslate() + 1 - (swiper.maxTranslate() - data.startTranslate - diff) ** resistanceRatio;\n }\n }\n }\n if (disableParentSwiper) {\n e.preventedByNestedSwiper = true;\n }\n\n // Directions locks\n if (!swiper.allowSlideNext && swiper.swipeDirection === 'next' && data.currentTranslate < data.startTranslate) {\n data.currentTranslate = data.startTranslate;\n }\n if (!swiper.allowSlidePrev && swiper.swipeDirection === 'prev' && data.currentTranslate > data.startTranslate) {\n data.currentTranslate = data.startTranslate;\n }\n if (!swiper.allowSlidePrev && !swiper.allowSlideNext) {\n data.currentTranslate = data.startTranslate;\n }\n\n // Threshold\n if (params.threshold > 0) {\n if (Math.abs(diff) > params.threshold || data.allowThresholdMove) {\n if (!data.allowThresholdMove) {\n data.allowThresholdMove = true;\n touches.startX = touches.currentX;\n touches.startY = touches.currentY;\n data.currentTranslate = data.startTranslate;\n touches.diff = swiper.isHorizontal() ? touches.currentX - touches.startX : touches.currentY - touches.startY;\n return;\n }\n } else {\n data.currentTranslate = data.startTranslate;\n return;\n }\n }\n if (!params.followFinger || params.cssMode) return;\n\n // Update active index in free mode\n if (params.freeMode && params.freeMode.enabled && swiper.freeMode || params.watchSlidesProgress) {\n swiper.updateActiveIndex();\n swiper.updateSlidesClasses();\n }\n if (params.freeMode && params.freeMode.enabled && swiper.freeMode) {\n swiper.freeMode.onTouchMove();\n }\n // Update progress\n swiper.updateProgress(data.currentTranslate);\n // Update translate\n swiper.setTranslate(data.currentTranslate);\n}\n\nfunction onTouchEnd(event) {\n const swiper = this;\n const data = swiper.touchEventsData;\n let e = event;\n if (e.originalEvent) e = e.originalEvent;\n let targetTouch;\n const isTouchEvent = e.type === 'touchend' || e.type === 'touchcancel';\n if (!isTouchEvent) {\n if (data.touchId !== null) return; // return from pointer if we use touch\n if (e.pointerId !== data.pointerId) return;\n targetTouch = e;\n } else {\n targetTouch = [...e.changedTouches].filter(t => t.identifier === data.touchId)[0];\n if (!targetTouch || targetTouch.identifier !== data.touchId) return;\n }\n if (['pointercancel', 'pointerout', 'pointerleave', 'contextmenu'].includes(e.type)) {\n const proceed = ['pointercancel', 'contextmenu'].includes(e.type) && (swiper.browser.isSafari || swiper.browser.isWebView);\n if (!proceed) {\n return;\n }\n }\n data.pointerId = null;\n data.touchId = null;\n const {\n params,\n touches,\n rtlTranslate: rtl,\n slidesGrid,\n enabled\n } = swiper;\n if (!enabled) return;\n if (!params.simulateTouch && e.pointerType === 'mouse') return;\n if (data.allowTouchCallbacks) {\n swiper.emit('touchEnd', e);\n }\n data.allowTouchCallbacks = false;\n if (!data.isTouched) {\n if (data.isMoved && params.grabCursor) {\n swiper.setGrabCursor(false);\n }\n data.isMoved = false;\n data.startMoving = false;\n return;\n }\n\n // Return Grab Cursor\n if (params.grabCursor && data.isMoved && data.isTouched && (swiper.allowSlideNext === true || swiper.allowSlidePrev === true)) {\n swiper.setGrabCursor(false);\n }\n\n // Time diff\n const touchEndTime = now();\n const timeDiff = touchEndTime - data.touchStartTime;\n\n // Tap, doubleTap, Click\n if (swiper.allowClick) {\n const pathTree = e.path || e.composedPath && e.composedPath();\n swiper.updateClickedSlide(pathTree && pathTree[0] || e.target, pathTree);\n swiper.emit('tap click', e);\n if (timeDiff < 300 && touchEndTime - data.lastClickTime < 300) {\n swiper.emit('doubleTap doubleClick', e);\n }\n }\n data.lastClickTime = now();\n nextTick(() => {\n if (!swiper.destroyed) swiper.allowClick = true;\n });\n if (!data.isTouched || !data.isMoved || !swiper.swipeDirection || touches.diff === 0 && !data.loopSwapReset || data.currentTranslate === data.startTranslate && !data.loopSwapReset) {\n data.isTouched = false;\n data.isMoved = false;\n data.startMoving = false;\n return;\n }\n data.isTouched = false;\n data.isMoved = false;\n data.startMoving = false;\n let currentPos;\n if (params.followFinger) {\n currentPos = rtl ? swiper.translate : -swiper.translate;\n } else {\n currentPos = -data.currentTranslate;\n }\n if (params.cssMode) {\n return;\n }\n if (params.freeMode && params.freeMode.enabled) {\n swiper.freeMode.onTouchEnd({\n currentPos\n });\n return;\n }\n\n // Find current slide\n const swipeToLast = currentPos >= -swiper.maxTranslate() && !swiper.params.loop;\n let stopIndex = 0;\n let groupSize = swiper.slidesSizesGrid[0];\n for (let i = 0; i < slidesGrid.length; i += i < params.slidesPerGroupSkip ? 1 : params.slidesPerGroup) {\n const increment = i < params.slidesPerGroupSkip - 1 ? 1 : params.slidesPerGroup;\n if (typeof slidesGrid[i + increment] !== 'undefined') {\n if (swipeToLast || currentPos >= slidesGrid[i] && currentPos < slidesGrid[i + increment]) {\n stopIndex = i;\n groupSize = slidesGrid[i + increment] - slidesGrid[i];\n }\n } else if (swipeToLast || currentPos >= slidesGrid[i]) {\n stopIndex = i;\n groupSize = slidesGrid[slidesGrid.length - 1] - slidesGrid[slidesGrid.length - 2];\n }\n }\n let rewindFirstIndex = null;\n let rewindLastIndex = null;\n if (params.rewind) {\n if (swiper.isBeginning) {\n rewindLastIndex = params.virtual && params.virtual.enabled && swiper.virtual ? swiper.virtual.slides.length - 1 : swiper.slides.length - 1;\n } else if (swiper.isEnd) {\n rewindFirstIndex = 0;\n }\n }\n // Find current slide size\n const ratio = (currentPos - slidesGrid[stopIndex]) / groupSize;\n const increment = stopIndex < params.slidesPerGroupSkip - 1 ? 1 : params.slidesPerGroup;\n if (timeDiff > params.longSwipesMs) {\n // Long touches\n if (!params.longSwipes) {\n swiper.slideTo(swiper.activeIndex);\n return;\n }\n if (swiper.swipeDirection === 'next') {\n if (ratio >= params.longSwipesRatio) swiper.slideTo(params.rewind && swiper.isEnd ? rewindFirstIndex : stopIndex + increment);else swiper.slideTo(stopIndex);\n }\n if (swiper.swipeDirection === 'prev') {\n if (ratio > 1 - params.longSwipesRatio) {\n swiper.slideTo(stopIndex + increment);\n } else if (rewindLastIndex !== null && ratio < 0 && Math.abs(ratio) > params.longSwipesRatio) {\n swiper.slideTo(rewindLastIndex);\n } else {\n swiper.slideTo(stopIndex);\n }\n }\n } else {\n // Short swipes\n if (!params.shortSwipes) {\n swiper.slideTo(swiper.activeIndex);\n return;\n }\n const isNavButtonTarget = swiper.navigation && (e.target === swiper.navigation.nextEl || e.target === swiper.navigation.prevEl);\n if (!isNavButtonTarget) {\n if (swiper.swipeDirection === 'next') {\n swiper.slideTo(rewindFirstIndex !== null ? rewindFirstIndex : stopIndex + increment);\n }\n if (swiper.swipeDirection === 'prev') {\n swiper.slideTo(rewindLastIndex !== null ? rewindLastIndex : stopIndex);\n }\n } else if (e.target === swiper.navigation.nextEl) {\n swiper.slideTo(stopIndex + increment);\n } else {\n swiper.slideTo(stopIndex);\n }\n }\n}\n\nfunction onResize() {\n const swiper = this;\n const {\n params,\n el\n } = swiper;\n if (el && el.offsetWidth === 0) return;\n\n // Breakpoints\n if (params.breakpoints) {\n swiper.setBreakpoint();\n }\n\n // Save locks\n const {\n allowSlideNext,\n allowSlidePrev,\n snapGrid\n } = swiper;\n const isVirtual = swiper.virtual && swiper.params.virtual.enabled;\n\n // Disable locks on resize\n swiper.allowSlideNext = true;\n swiper.allowSlidePrev = true;\n swiper.updateSize();\n swiper.updateSlides();\n swiper.updateSlidesClasses();\n const isVirtualLoop = isVirtual && params.loop;\n if ((params.slidesPerView === 'auto' || params.slidesPerView > 1) && swiper.isEnd && !swiper.isBeginning && !swiper.params.centeredSlides && !isVirtualLoop) {\n swiper.slideTo(swiper.slides.length - 1, 0, false, true);\n } else {\n if (swiper.params.loop && !isVirtual) {\n swiper.slideToLoop(swiper.realIndex, 0, false, true);\n } else {\n swiper.slideTo(swiper.activeIndex, 0, false, true);\n }\n }\n if (swiper.autoplay && swiper.autoplay.running && swiper.autoplay.paused) {\n clearTimeout(swiper.autoplay.resizeTimeout);\n swiper.autoplay.resizeTimeout = setTimeout(() => {\n if (swiper.autoplay && swiper.autoplay.running && swiper.autoplay.paused) {\n swiper.autoplay.resume();\n }\n }, 500);\n }\n // Return locks after resize\n swiper.allowSlidePrev = allowSlidePrev;\n swiper.allowSlideNext = allowSlideNext;\n if (swiper.params.watchOverflow && snapGrid !== swiper.snapGrid) {\n swiper.checkOverflow();\n }\n}\n\nfunction onClick(e) {\n const swiper = this;\n if (!swiper.enabled) return;\n if (!swiper.allowClick) {\n if (swiper.params.preventClicks) e.preventDefault();\n if (swiper.params.preventClicksPropagation && swiper.animating) {\n e.stopPropagation();\n e.stopImmediatePropagation();\n }\n }\n}\n\nfunction onScroll() {\n const swiper = this;\n const {\n wrapperEl,\n rtlTranslate,\n enabled\n } = swiper;\n if (!enabled) return;\n swiper.previousTranslate = swiper.translate;\n if (swiper.isHorizontal()) {\n swiper.translate = -wrapperEl.scrollLeft;\n } else {\n swiper.translate = -wrapperEl.scrollTop;\n }\n // eslint-disable-next-line\n if (swiper.translate === 0) swiper.translate = 0;\n swiper.updateActiveIndex();\n swiper.updateSlidesClasses();\n let newProgress;\n const translatesDiff = swiper.maxTranslate() - swiper.minTranslate();\n if (translatesDiff === 0) {\n newProgress = 0;\n } else {\n newProgress = (swiper.translate - swiper.minTranslate()) / translatesDiff;\n }\n if (newProgress !== swiper.progress) {\n swiper.updateProgress(rtlTranslate ? -swiper.translate : swiper.translate);\n }\n swiper.emit('setTranslate', swiper.translate, false);\n}\n\nfunction onLoad(e) {\n const swiper = this;\n processLazyPreloader(swiper, e.target);\n if (swiper.params.cssMode || swiper.params.slidesPerView !== 'auto' && !swiper.params.autoHeight) {\n return;\n }\n swiper.update();\n}\n\nfunction onDocumentTouchStart() {\n const swiper = this;\n if (swiper.documentTouchHandlerProceeded) return;\n swiper.documentTouchHandlerProceeded = true;\n if (swiper.params.touchReleaseOnEdges) {\n swiper.el.style.touchAction = 'auto';\n }\n}\n\nconst events = (swiper, method) => {\n const document = getDocument();\n const {\n params,\n el,\n wrapperEl,\n device\n } = swiper;\n const capture = !!params.nested;\n const domMethod = method === 'on' ? 'addEventListener' : 'removeEventListener';\n const swiperMethod = method;\n\n // Touch Events\n document[domMethod]('touchstart', swiper.onDocumentTouchStart, {\n passive: false,\n capture\n });\n el[domMethod]('touchstart', swiper.onTouchStart, {\n passive: false\n });\n el[domMethod]('pointerdown', swiper.onTouchStart, {\n passive: false\n });\n document[domMethod]('touchmove', swiper.onTouchMove, {\n passive: false,\n capture\n });\n document[domMethod]('pointermove', swiper.onTouchMove, {\n passive: false,\n capture\n });\n document[domMethod]('touchend', swiper.onTouchEnd, {\n passive: true\n });\n document[domMethod]('pointerup', swiper.onTouchEnd, {\n passive: true\n });\n document[domMethod]('pointercancel', swiper.onTouchEnd, {\n passive: true\n });\n document[domMethod]('touchcancel', swiper.onTouchEnd, {\n passive: true\n });\n document[domMethod]('pointerout', swiper.onTouchEnd, {\n passive: true\n });\n document[domMethod]('pointerleave', swiper.onTouchEnd, {\n passive: true\n });\n document[domMethod]('contextmenu', swiper.onTouchEnd, {\n passive: true\n });\n\n // Prevent Links Clicks\n if (params.preventClicks || params.preventClicksPropagation) {\n el[domMethod]('click', swiper.onClick, true);\n }\n if (params.cssMode) {\n wrapperEl[domMethod]('scroll', swiper.onScroll);\n }\n\n // Resize handler\n if (params.updateOnWindowResize) {\n swiper[swiperMethod](device.ios || device.android ? 'resize orientationchange observerUpdate' : 'resize observerUpdate', onResize, true);\n } else {\n swiper[swiperMethod]('observerUpdate', onResize, true);\n }\n\n // Images loader\n el[domMethod]('load', swiper.onLoad, {\n capture: true\n });\n};\nfunction attachEvents() {\n const swiper = this;\n const {\n params\n } = swiper;\n swiper.onTouchStart = onTouchStart.bind(swiper);\n swiper.onTouchMove = onTouchMove.bind(swiper);\n swiper.onTouchEnd = onTouchEnd.bind(swiper);\n swiper.onDocumentTouchStart = onDocumentTouchStart.bind(swiper);\n if (params.cssMode) {\n swiper.onScroll = onScroll.bind(swiper);\n }\n swiper.onClick = onClick.bind(swiper);\n swiper.onLoad = onLoad.bind(swiper);\n events(swiper, 'on');\n}\nfunction detachEvents() {\n const swiper = this;\n events(swiper, 'off');\n}\nvar events$1 = {\n attachEvents,\n detachEvents\n};\n\nconst isGridEnabled = (swiper, params) => {\n return swiper.grid && params.grid && params.grid.rows > 1;\n};\nfunction setBreakpoint() {\n const swiper = this;\n const {\n realIndex,\n initialized,\n params,\n el\n } = swiper;\n const breakpoints = params.breakpoints;\n if (!breakpoints || breakpoints && Object.keys(breakpoints).length === 0) return;\n\n // Get breakpoint for window width and update parameters\n const breakpoint = swiper.getBreakpoint(breakpoints, swiper.params.breakpointsBase, swiper.el);\n if (!breakpoint || swiper.currentBreakpoint === breakpoint) return;\n const breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined;\n const breakpointParams = breakpointOnlyParams || swiper.originalParams;\n const wasMultiRow = isGridEnabled(swiper, params);\n const isMultiRow = isGridEnabled(swiper, breakpointParams);\n const wasEnabled = params.enabled;\n if (wasMultiRow && !isMultiRow) {\n el.classList.remove(`${params.containerModifierClass}grid`, `${params.containerModifierClass}grid-column`);\n swiper.emitContainerClasses();\n } else if (!wasMultiRow && isMultiRow) {\n el.classList.add(`${params.containerModifierClass}grid`);\n if (breakpointParams.grid.fill && breakpointParams.grid.fill === 'column' || !breakpointParams.grid.fill && params.grid.fill === 'column') {\n el.classList.add(`${params.containerModifierClass}grid-column`);\n }\n swiper.emitContainerClasses();\n }\n\n // Toggle navigation, pagination, scrollbar\n ['navigation', 'pagination', 'scrollbar'].forEach(prop => {\n if (typeof breakpointParams[prop] === 'undefined') return;\n const wasModuleEnabled = params[prop] && params[prop].enabled;\n const isModuleEnabled = breakpointParams[prop] && breakpointParams[prop].enabled;\n if (wasModuleEnabled && !isModuleEnabled) {\n swiper[prop].disable();\n }\n if (!wasModuleEnabled && isModuleEnabled) {\n swiper[prop].enable();\n }\n });\n const directionChanged = breakpointParams.direction && breakpointParams.direction !== params.direction;\n const needsReLoop = params.loop && (breakpointParams.slidesPerView !== params.slidesPerView || directionChanged);\n const wasLoop = params.loop;\n if (directionChanged && initialized) {\n swiper.changeDirection();\n }\n extend(swiper.params, breakpointParams);\n const isEnabled = swiper.params.enabled;\n const hasLoop = swiper.params.loop;\n Object.assign(swiper, {\n allowTouchMove: swiper.params.allowTouchMove,\n allowSlideNext: swiper.params.allowSlideNext,\n allowSlidePrev: swiper.params.allowSlidePrev\n });\n if (wasEnabled && !isEnabled) {\n swiper.disable();\n } else if (!wasEnabled && isEnabled) {\n swiper.enable();\n }\n swiper.currentBreakpoint = breakpoint;\n swiper.emit('_beforeBreakpoint', breakpointParams);\n if (initialized) {\n if (needsReLoop) {\n swiper.loopDestroy();\n swiper.loopCreate(realIndex);\n swiper.updateSlides();\n } else if (!wasLoop && hasLoop) {\n swiper.loopCreate(realIndex);\n swiper.updateSlides();\n } else if (wasLoop && !hasLoop) {\n swiper.loopDestroy();\n }\n }\n swiper.emit('breakpoint', breakpointParams);\n}\n\nfunction getBreakpoint(breakpoints, base, containerEl) {\n if (base === void 0) {\n base = 'window';\n }\n if (!breakpoints || base === 'container' && !containerEl) return undefined;\n let breakpoint = false;\n const window = getWindow();\n const currentHeight = base === 'window' ? window.innerHeight : containerEl.clientHeight;\n const points = Object.keys(breakpoints).map(point => {\n if (typeof point === 'string' && point.indexOf('@') === 0) {\n const minRatio = parseFloat(point.substr(1));\n const value = currentHeight * minRatio;\n return {\n value,\n point\n };\n }\n return {\n value: point,\n point\n };\n });\n points.sort((a, b) => parseInt(a.value, 10) - parseInt(b.value, 10));\n for (let i = 0; i < points.length; i += 1) {\n const {\n point,\n value\n } = points[i];\n if (base === 'window') {\n if (window.matchMedia(`(min-width: ${value}px)`).matches) {\n breakpoint = point;\n }\n } else if (value <= containerEl.clientWidth) {\n breakpoint = point;\n }\n }\n return breakpoint || 'max';\n}\n\nvar breakpoints = {\n setBreakpoint,\n getBreakpoint\n};\n\nfunction prepareClasses(entries, prefix) {\n const resultClasses = [];\n entries.forEach(item => {\n if (typeof item === 'object') {\n Object.keys(item).forEach(classNames => {\n if (item[classNames]) {\n resultClasses.push(prefix + classNames);\n }\n });\n } else if (typeof item === 'string') {\n resultClasses.push(prefix + item);\n }\n });\n return resultClasses;\n}\nfunction addClasses() {\n const swiper = this;\n const {\n classNames,\n params,\n rtl,\n el,\n device\n } = swiper;\n // prettier-ignore\n const suffixes = prepareClasses(['initialized', params.direction, {\n 'free-mode': swiper.params.freeMode && params.freeMode.enabled\n }, {\n 'autoheight': params.autoHeight\n }, {\n 'rtl': rtl\n }, {\n 'grid': params.grid && params.grid.rows > 1\n }, {\n 'grid-column': params.grid && params.grid.rows > 1 && params.grid.fill === 'column'\n }, {\n 'android': device.android\n }, {\n 'ios': device.ios\n }, {\n 'css-mode': params.cssMode\n }, {\n 'centered': params.cssMode && params.centeredSlides\n }, {\n 'watch-progress': params.watchSlidesProgress\n }], params.containerModifierClass);\n classNames.push(...suffixes);\n el.classList.add(...classNames);\n swiper.emitContainerClasses();\n}\n\nfunction removeClasses() {\n const swiper = this;\n const {\n el,\n classNames\n } = swiper;\n el.classList.remove(...classNames);\n swiper.emitContainerClasses();\n}\n\nvar classes = {\n addClasses,\n removeClasses\n};\n\nfunction checkOverflow() {\n const swiper = this;\n const {\n isLocked: wasLocked,\n params\n } = swiper;\n const {\n slidesOffsetBefore\n } = params;\n if (slidesOffsetBefore) {\n const lastSlideIndex = swiper.slides.length - 1;\n const lastSlideRightEdge = swiper.slidesGrid[lastSlideIndex] + swiper.slidesSizesGrid[lastSlideIndex] + slidesOffsetBefore * 2;\n swiper.isLocked = swiper.size > lastSlideRightEdge;\n } else {\n swiper.isLocked = swiper.snapGrid.length === 1;\n }\n if (params.allowSlideNext === true) {\n swiper.allowSlideNext = !swiper.isLocked;\n }\n if (params.allowSlidePrev === true) {\n swiper.allowSlidePrev = !swiper.isLocked;\n }\n if (wasLocked && wasLocked !== swiper.isLocked) {\n swiper.isEnd = false;\n }\n if (wasLocked !== swiper.isLocked) {\n swiper.emit(swiper.isLocked ? 'lock' : 'unlock');\n }\n}\nvar checkOverflow$1 = {\n checkOverflow\n};\n\nvar defaults = {\n init: true,\n direction: 'horizontal',\n oneWayMovement: false,\n touchEventsTarget: 'wrapper',\n initialSlide: 0,\n speed: 300,\n cssMode: false,\n updateOnWindowResize: true,\n resizeObserver: true,\n nested: false,\n createElements: false,\n eventsPrefix: 'swiper',\n enabled: true,\n focusableElements: 'input, select, option, textarea, button, video, label',\n // Overrides\n width: null,\n height: null,\n //\n preventInteractionOnTransition: false,\n // ssr\n userAgent: null,\n url: null,\n // To support iOS's swipe-to-go-back gesture (when being used in-app).\n edgeSwipeDetection: false,\n edgeSwipeThreshold: 20,\n // Autoheight\n autoHeight: false,\n // Set wrapper width\n setWrapperSize: false,\n // Virtual Translate\n virtualTranslate: false,\n // Effects\n effect: 'slide',\n // 'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'\n\n // Breakpoints\n breakpoints: undefined,\n breakpointsBase: 'window',\n // Slides grid\n spaceBetween: 0,\n slidesPerView: 1,\n slidesPerGroup: 1,\n slidesPerGroupSkip: 0,\n slidesPerGroupAuto: false,\n centeredSlides: false,\n centeredSlidesBounds: false,\n slidesOffsetBefore: 0,\n // in px\n slidesOffsetAfter: 0,\n // in px\n normalizeSlideIndex: true,\n centerInsufficientSlides: false,\n // Disable swiper and hide navigation when container not overflow\n watchOverflow: true,\n // Round length\n roundLengths: false,\n // Touches\n touchRatio: 1,\n touchAngle: 45,\n simulateTouch: true,\n shortSwipes: true,\n longSwipes: true,\n longSwipesRatio: 0.5,\n longSwipesMs: 300,\n followFinger: true,\n allowTouchMove: true,\n threshold: 5,\n touchMoveStopPropagation: false,\n touchStartPreventDefault: true,\n touchStartForcePreventDefault: false,\n touchReleaseOnEdges: false,\n // Unique Navigation Elements\n uniqueNavElements: true,\n // Resistance\n resistance: true,\n resistanceRatio: 0.85,\n // Progress\n watchSlidesProgress: false,\n // Cursor\n grabCursor: false,\n // Clicks\n preventClicks: true,\n preventClicksPropagation: true,\n slideToClickedSlide: false,\n // loop\n loop: false,\n loopAddBlankSlides: true,\n loopAdditionalSlides: 0,\n loopPreventsSliding: true,\n // rewind\n rewind: false,\n // Swiping/no swiping\n allowSlidePrev: true,\n allowSlideNext: true,\n swipeHandler: null,\n // '.swipe-handler',\n noSwiping: true,\n noSwipingClass: 'swiper-no-swiping',\n noSwipingSelector: null,\n // Passive Listeners\n passiveListeners: true,\n maxBackfaceHiddenSlides: 10,\n // NS\n containerModifierClass: 'swiper-',\n // NEW\n slideClass: 'swiper-slide',\n slideBlankClass: 'swiper-slide-blank',\n slideActiveClass: 'swiper-slide-active',\n slideVisibleClass: 'swiper-slide-visible',\n slideFullyVisibleClass: 'swiper-slide-fully-visible',\n slideNextClass: 'swiper-slide-next',\n slidePrevClass: 'swiper-slide-prev',\n wrapperClass: 'swiper-wrapper',\n lazyPreloaderClass: 'swiper-lazy-preloader',\n lazyPreloadPrevNext: 0,\n // Callbacks\n runCallbacksOnInit: true,\n // Internals\n _emitClasses: false\n};\n\nfunction moduleExtendParams(params, allModulesParams) {\n return function extendParams(obj) {\n if (obj === void 0) {\n obj = {};\n }\n const moduleParamName = Object.keys(obj)[0];\n const moduleParams = obj[moduleParamName];\n if (typeof moduleParams !== 'object' || moduleParams === null) {\n extend(allModulesParams, obj);\n return;\n }\n if (params[moduleParamName] === true) {\n params[moduleParamName] = {\n enabled: true\n };\n }\n if (moduleParamName === 'navigation' && params[moduleParamName] && params[moduleParamName].enabled && !params[moduleParamName].prevEl && !params[moduleParamName].nextEl) {\n params[moduleParamName].auto = true;\n }\n if (['pagination', 'scrollbar'].indexOf(moduleParamName) >= 0 && params[moduleParamName] && params[moduleParamName].enabled && !params[moduleParamName].el) {\n params[moduleParamName].auto = true;\n }\n if (!(moduleParamName in params && 'enabled' in moduleParams)) {\n extend(allModulesParams, obj);\n return;\n }\n if (typeof params[moduleParamName] === 'object' && !('enabled' in params[moduleParamName])) {\n params[moduleParamName].enabled = true;\n }\n if (!params[moduleParamName]) params[moduleParamName] = {\n enabled: false\n };\n extend(allModulesParams, obj);\n };\n}\n\n/* eslint no-param-reassign: \"off\" */\nconst prototypes = {\n eventsEmitter,\n update,\n translate,\n transition,\n slide,\n loop,\n grabCursor,\n events: events$1,\n breakpoints,\n checkOverflow: checkOverflow$1,\n classes\n};\nconst extendedDefaults = {};\nclass Swiper {\n constructor() {\n let el;\n let params;\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n if (args.length === 1 && args[0].constructor && Object.prototype.toString.call(args[0]).slice(8, -1) === 'Object') {\n params = args[0];\n } else {\n [el, params] = args;\n }\n if (!params) params = {};\n params = extend({}, params);\n if (el && !params.el) params.el = el;\n const document = getDocument();\n if (params.el && typeof params.el === 'string' && document.querySelectorAll(params.el).length > 1) {\n const swipers = [];\n document.querySelectorAll(params.el).forEach(containerEl => {\n const newParams = extend({}, params, {\n el: containerEl\n });\n swipers.push(new Swiper(newParams));\n });\n // eslint-disable-next-line no-constructor-return\n return swipers;\n }\n\n // Swiper Instance\n const swiper = this;\n swiper.__swiper__ = true;\n swiper.support = getSupport();\n swiper.device = getDevice({\n userAgent: params.userAgent\n });\n swiper.browser = getBrowser();\n swiper.eventsListeners = {};\n swiper.eventsAnyListeners = [];\n swiper.modules = [...swiper.__modules__];\n if (params.modules && Array.isArray(params.modules)) {\n swiper.modules.push(...params.modules);\n }\n const allModulesParams = {};\n swiper.modules.forEach(mod => {\n mod({\n params,\n swiper,\n extendParams: moduleExtendParams(params, allModulesParams),\n on: swiper.on.bind(swiper),\n once: swiper.once.bind(swiper),\n off: swiper.off.bind(swiper),\n emit: swiper.emit.bind(swiper)\n });\n });\n\n // Extend defaults with modules params\n const swiperParams = extend({}, defaults, allModulesParams);\n\n // Extend defaults with passed params\n swiper.params = extend({}, swiperParams, extendedDefaults, params);\n swiper.originalParams = extend({}, swiper.params);\n swiper.passedParams = extend({}, params);\n\n // add event listeners\n if (swiper.params && swiper.params.on) {\n Object.keys(swiper.params.on).forEach(eventName => {\n swiper.on(eventName, swiper.params.on[eventName]);\n });\n }\n if (swiper.params && swiper.params.onAny) {\n swiper.onAny(swiper.params.onAny);\n }\n\n // Extend Swiper\n Object.assign(swiper, {\n enabled: swiper.params.enabled,\n el,\n // Classes\n classNames: [],\n // Slides\n slides: [],\n slidesGrid: [],\n snapGrid: [],\n slidesSizesGrid: [],\n // isDirection\n isHorizontal() {\n return swiper.params.direction === 'horizontal';\n },\n isVertical() {\n return swiper.params.direction === 'vertical';\n },\n // Indexes\n activeIndex: 0,\n realIndex: 0,\n //\n isBeginning: true,\n isEnd: false,\n // Props\n translate: 0,\n previousTranslate: 0,\n progress: 0,\n velocity: 0,\n animating: false,\n cssOverflowAdjustment() {\n // Returns 0 unless `translate` is > 2**23\n // Should be subtracted from css values to prevent overflow\n return Math.trunc(this.translate / 2 ** 23) * 2 ** 23;\n },\n // Locks\n allowSlideNext: swiper.params.allowSlideNext,\n allowSlidePrev: swiper.params.allowSlidePrev,\n // Touch Events\n touchEventsData: {\n isTouched: undefined,\n isMoved: undefined,\n allowTouchCallbacks: undefined,\n touchStartTime: undefined,\n isScrolling: undefined,\n currentTranslate: undefined,\n startTranslate: undefined,\n allowThresholdMove: undefined,\n // Form elements to match\n focusableElements: swiper.params.focusableElements,\n // Last click time\n lastClickTime: 0,\n clickTimeout: undefined,\n // Velocities\n velocities: [],\n allowMomentumBounce: undefined,\n startMoving: undefined,\n pointerId: null,\n touchId: null\n },\n // Clicks\n allowClick: true,\n // Touches\n allowTouchMove: swiper.params.allowTouchMove,\n touches: {\n startX: 0,\n startY: 0,\n currentX: 0,\n currentY: 0,\n diff: 0\n },\n // Images\n imagesToLoad: [],\n imagesLoaded: 0\n });\n swiper.emit('_swiper');\n\n // Init\n if (swiper.params.init) {\n swiper.init();\n }\n\n // Return app instance\n // eslint-disable-next-line no-constructor-return\n return swiper;\n }\n getDirectionLabel(property) {\n if (this.isHorizontal()) {\n return property;\n }\n // prettier-ignore\n return {\n 'width': 'height',\n 'margin-top': 'margin-left',\n 'margin-bottom ': 'margin-right',\n 'margin-left': 'margin-top',\n 'margin-right': 'margin-bottom',\n 'padding-left': 'padding-top',\n 'padding-right': 'padding-bottom',\n 'marginRight': 'marginBottom'\n }[property];\n }\n getSlideIndex(slideEl) {\n const {\n slidesEl,\n params\n } = this;\n const slides = elementChildren(slidesEl, `.${params.slideClass}, swiper-slide`);\n const firstSlideIndex = elementIndex(slides[0]);\n return elementIndex(slideEl) - firstSlideIndex;\n }\n getSlideIndexByData(index) {\n return this.getSlideIndex(this.slides.filter(slideEl => slideEl.getAttribute('data-swiper-slide-index') * 1 === index)[0]);\n }\n recalcSlides() {\n const swiper = this;\n const {\n slidesEl,\n params\n } = swiper;\n swiper.slides = elementChildren(slidesEl, `.${params.slideClass}, swiper-slide`);\n }\n enable() {\n const swiper = this;\n if (swiper.enabled) return;\n swiper.enabled = true;\n if (swiper.params.grabCursor) {\n swiper.setGrabCursor();\n }\n swiper.emit('enable');\n }\n disable() {\n const swiper = this;\n if (!swiper.enabled) return;\n swiper.enabled = false;\n if (swiper.params.grabCursor) {\n swiper.unsetGrabCursor();\n }\n swiper.emit('disable');\n }\n setProgress(progress, speed) {\n const swiper = this;\n progress = Math.min(Math.max(progress, 0), 1);\n const min = swiper.minTranslate();\n const max = swiper.maxTranslate();\n const current = (max - min) * progress + min;\n swiper.translateTo(current, typeof speed === 'undefined' ? 0 : speed);\n swiper.updateActiveIndex();\n swiper.updateSlidesClasses();\n }\n emitContainerClasses() {\n const swiper = this;\n if (!swiper.params._emitClasses || !swiper.el) return;\n const cls = swiper.el.className.split(' ').filter(className => {\n return className.indexOf('swiper') === 0 || className.indexOf(swiper.params.containerModifierClass) === 0;\n });\n swiper.emit('_containerClasses', cls.join(' '));\n }\n getSlideClasses(slideEl) {\n const swiper = this;\n if (swiper.destroyed) return '';\n return slideEl.className.split(' ').filter(className => {\n return className.indexOf('swiper-slide') === 0 || className.indexOf(swiper.params.slideClass) === 0;\n }).join(' ');\n }\n emitSlidesClasses() {\n const swiper = this;\n if (!swiper.params._emitClasses || !swiper.el) return;\n const updates = [];\n swiper.slides.forEach(slideEl => {\n const classNames = swiper.getSlideClasses(slideEl);\n updates.push({\n slideEl,\n classNames\n });\n swiper.emit('_slideClass', slideEl, classNames);\n });\n swiper.emit('_slideClasses', updates);\n }\n slidesPerViewDynamic(view, exact) {\n if (view === void 0) {\n view = 'current';\n }\n if (exact === void 0) {\n exact = false;\n }\n const swiper = this;\n const {\n params,\n slides,\n slidesGrid,\n slidesSizesGrid,\n size: swiperSize,\n activeIndex\n } = swiper;\n let spv = 1;\n if (typeof params.slidesPerView === 'number') return params.slidesPerView;\n if (params.centeredSlides) {\n let slideSize = slides[activeIndex] ? slides[activeIndex].swiperSlideSize : 0;\n let breakLoop;\n for (let i = activeIndex + 1; i < slides.length; i += 1) {\n if (slides[i] && !breakLoop) {\n slideSize += slides[i].swiperSlideSize;\n spv += 1;\n if (slideSize > swiperSize) breakLoop = true;\n }\n }\n for (let i = activeIndex - 1; i >= 0; i -= 1) {\n if (slides[i] && !breakLoop) {\n slideSize += slides[i].swiperSlideSize;\n spv += 1;\n if (slideSize > swiperSize) breakLoop = true;\n }\n }\n } else {\n // eslint-disable-next-line\n if (view === 'current') {\n for (let i = activeIndex + 1; i < slides.length; i += 1) {\n const slideInView = exact ? slidesGrid[i] + slidesSizesGrid[i] - slidesGrid[activeIndex] < swiperSize : slidesGrid[i] - slidesGrid[activeIndex] < swiperSize;\n if (slideInView) {\n spv += 1;\n }\n }\n } else {\n // previous\n for (let i = activeIndex - 1; i >= 0; i -= 1) {\n const slideInView = slidesGrid[activeIndex] - slidesGrid[i] < swiperSize;\n if (slideInView) {\n spv += 1;\n }\n }\n }\n }\n return spv;\n }\n update() {\n const swiper = this;\n if (!swiper || swiper.destroyed) return;\n const {\n snapGrid,\n params\n } = swiper;\n // Breakpoints\n if (params.breakpoints) {\n swiper.setBreakpoint();\n }\n [...swiper.el.querySelectorAll('[loading=\"lazy\"]')].forEach(imageEl => {\n if (imageEl.complete) {\n processLazyPreloader(swiper, imageEl);\n }\n });\n swiper.updateSize();\n swiper.updateSlides();\n swiper.updateProgress();\n swiper.updateSlidesClasses();\n function setTranslate() {\n const translateValue = swiper.rtlTranslate ? swiper.translate * -1 : swiper.translate;\n const newTranslate = Math.min(Math.max(translateValue, swiper.maxTranslate()), swiper.minTranslate());\n swiper.setTranslate(newTranslate);\n swiper.updateActiveIndex();\n swiper.updateSlidesClasses();\n }\n let translated;\n if (params.freeMode && params.freeMode.enabled && !params.cssMode) {\n setTranslate();\n if (params.autoHeight) {\n swiper.updateAutoHeight();\n }\n } else {\n if ((params.slidesPerView === 'auto' || params.slidesPerView > 1) && swiper.isEnd && !params.centeredSlides) {\n const slides = swiper.virtual && params.virtual.enabled ? swiper.virtual.slides : swiper.slides;\n translated = swiper.slideTo(slides.length - 1, 0, false, true);\n } else {\n translated = swiper.slideTo(swiper.activeIndex, 0, false, true);\n }\n if (!translated) {\n setTranslate();\n }\n }\n if (params.watchOverflow && snapGrid !== swiper.snapGrid) {\n swiper.checkOverflow();\n }\n swiper.emit('update');\n }\n changeDirection(newDirection, needUpdate) {\n if (needUpdate === void 0) {\n needUpdate = true;\n }\n const swiper = this;\n const currentDirection = swiper.params.direction;\n if (!newDirection) {\n // eslint-disable-next-line\n newDirection = currentDirection === 'horizontal' ? 'vertical' : 'horizontal';\n }\n if (newDirection === currentDirection || newDirection !== 'horizontal' && newDirection !== 'vertical') {\n return swiper;\n }\n swiper.el.classList.remove(`${swiper.params.containerModifierClass}${currentDirection}`);\n swiper.el.classList.add(`${swiper.params.containerModifierClass}${newDirection}`);\n swiper.emitContainerClasses();\n swiper.params.direction = newDirection;\n swiper.slides.forEach(slideEl => {\n if (newDirection === 'vertical') {\n slideEl.style.width = '';\n } else {\n slideEl.style.height = '';\n }\n });\n swiper.emit('changeDirection');\n if (needUpdate) swiper.update();\n return swiper;\n }\n changeLanguageDirection(direction) {\n const swiper = this;\n if (swiper.rtl && direction === 'rtl' || !swiper.rtl && direction === 'ltr') return;\n swiper.rtl = direction === 'rtl';\n swiper.rtlTranslate = swiper.params.direction === 'horizontal' && swiper.rtl;\n if (swiper.rtl) {\n swiper.el.classList.add(`${swiper.params.containerModifierClass}rtl`);\n swiper.el.dir = 'rtl';\n } else {\n swiper.el.classList.remove(`${swiper.params.containerModifierClass}rtl`);\n swiper.el.dir = 'ltr';\n }\n swiper.update();\n }\n mount(element) {\n const swiper = this;\n if (swiper.mounted) return true;\n\n // Find el\n let el = element || swiper.params.el;\n if (typeof el === 'string') {\n el = document.querySelector(el);\n }\n if (!el) {\n return false;\n }\n el.swiper = swiper;\n if (el.parentNode && el.parentNode.host && el.parentNode.host.nodeName === 'SWIPER-CONTAINER') {\n swiper.isElement = true;\n }\n const getWrapperSelector = () => {\n return `.${(swiper.params.wrapperClass || '').trim().split(' ').join('.')}`;\n };\n const getWrapper = () => {\n if (el && el.shadowRoot && el.shadowRoot.querySelector) {\n const res = el.shadowRoot.querySelector(getWrapperSelector());\n // Children needs to return slot items\n return res;\n }\n return elementChildren(el, getWrapperSelector())[0];\n };\n // Find Wrapper\n let wrapperEl = getWrapper();\n if (!wrapperEl && swiper.params.createElements) {\n wrapperEl = createElement('div', swiper.params.wrapperClass);\n el.append(wrapperEl);\n elementChildren(el, `.${swiper.params.slideClass}`).forEach(slideEl => {\n wrapperEl.append(slideEl);\n });\n }\n Object.assign(swiper, {\n el,\n wrapperEl,\n slidesEl: swiper.isElement && !el.parentNode.host.slideSlots ? el.parentNode.host : wrapperEl,\n hostEl: swiper.isElement ? el.parentNode.host : el,\n mounted: true,\n // RTL\n rtl: el.dir.toLowerCase() === 'rtl' || elementStyle(el, 'direction') === 'rtl',\n rtlTranslate: swiper.params.direction === 'horizontal' && (el.dir.toLowerCase() === 'rtl' || elementStyle(el, 'direction') === 'rtl'),\n wrongRTL: elementStyle(wrapperEl, 'display') === '-webkit-box'\n });\n return true;\n }\n init(el) {\n const swiper = this;\n if (swiper.initialized) return swiper;\n const mounted = swiper.mount(el);\n if (mounted === false) return swiper;\n swiper.emit('beforeInit');\n\n // Set breakpoint\n if (swiper.params.breakpoints) {\n swiper.setBreakpoint();\n }\n\n // Add Classes\n swiper.addClasses();\n\n // Update size\n swiper.updateSize();\n\n // Update slides\n swiper.updateSlides();\n if (swiper.params.watchOverflow) {\n swiper.checkOverflow();\n }\n\n // Set Grab Cursor\n if (swiper.params.grabCursor && swiper.enabled) {\n swiper.setGrabCursor();\n }\n\n // Slide To Initial Slide\n if (swiper.params.loop && swiper.virtual && swiper.params.virtual.enabled) {\n swiper.slideTo(swiper.params.initialSlide + swiper.virtual.slidesBefore, 0, swiper.params.runCallbacksOnInit, false, true);\n } else {\n swiper.slideTo(swiper.params.initialSlide, 0, swiper.params.runCallbacksOnInit, false, true);\n }\n\n // Create loop\n if (swiper.params.loop) {\n swiper.loopCreate();\n }\n\n // Attach events\n swiper.attachEvents();\n const lazyElements = [...swiper.el.querySelectorAll('[loading=\"lazy\"]')];\n if (swiper.isElement) {\n lazyElements.push(...swiper.hostEl.querySelectorAll('[loading=\"lazy\"]'));\n }\n lazyElements.forEach(imageEl => {\n if (imageEl.complete) {\n processLazyPreloader(swiper, imageEl);\n } else {\n imageEl.addEventListener('load', e => {\n processLazyPreloader(swiper, e.target);\n });\n }\n });\n preload(swiper);\n\n // Init Flag\n swiper.initialized = true;\n preload(swiper);\n\n // Emit\n swiper.emit('init');\n swiper.emit('afterInit');\n return swiper;\n }\n destroy(deleteInstance, cleanStyles) {\n if (deleteInstance === void 0) {\n deleteInstance = true;\n }\n if (cleanStyles === void 0) {\n cleanStyles = true;\n }\n const swiper = this;\n const {\n params,\n el,\n wrapperEl,\n slides\n } = swiper;\n if (typeof swiper.params === 'undefined' || swiper.destroyed) {\n return null;\n }\n swiper.emit('beforeDestroy');\n\n // Init Flag\n swiper.initialized = false;\n\n // Detach events\n swiper.detachEvents();\n\n // Destroy loop\n if (params.loop) {\n swiper.loopDestroy();\n }\n\n // Cleanup styles\n if (cleanStyles) {\n swiper.removeClasses();\n el.removeAttribute('style');\n wrapperEl.removeAttribute('style');\n if (slides && slides.length) {\n slides.forEach(slideEl => {\n slideEl.classList.remove(params.slideVisibleClass, params.slideFullyVisibleClass, params.slideActiveClass, params.slideNextClass, params.slidePrevClass);\n slideEl.removeAttribute('style');\n slideEl.removeAttribute('data-swiper-slide-index');\n });\n }\n }\n swiper.emit('destroy');\n\n // Detach emitter events\n Object.keys(swiper.eventsListeners).forEach(eventName => {\n swiper.off(eventName);\n });\n if (deleteInstance !== false) {\n swiper.el.swiper = null;\n deleteProps(swiper);\n }\n swiper.destroyed = true;\n return null;\n }\n static extendDefaults(newDefaults) {\n extend(extendedDefaults, newDefaults);\n }\n static get extendedDefaults() {\n return extendedDefaults;\n }\n static get defaults() {\n return defaults;\n }\n static installModule(mod) {\n if (!Swiper.prototype.__modules__) Swiper.prototype.__modules__ = [];\n const modules = Swiper.prototype.__modules__;\n if (typeof mod === 'function' && modules.indexOf(mod) < 0) {\n modules.push(mod);\n }\n }\n static use(module) {\n if (Array.isArray(module)) {\n module.forEach(m => Swiper.installModule(m));\n return Swiper;\n }\n Swiper.installModule(module);\n return Swiper;\n }\n}\nObject.keys(prototypes).forEach(prototypeGroup => {\n Object.keys(prototypes[prototypeGroup]).forEach(protoMethod => {\n Swiper.prototype[protoMethod] = prototypes[prototypeGroup][protoMethod];\n });\n});\nSwiper.use([Resize, Observer]);\n\nexport { Swiper as S, defaults as d };\n","import { e as elementChildren, c as createElement } from './utils.mjs';\n\nfunction createElementIfNotDefined(swiper, originalParams, params, checkProps) {\n if (swiper.params.createElements) {\n Object.keys(checkProps).forEach(key => {\n if (!params[key] && params.auto === true) {\n let element = elementChildren(swiper.el, `.${checkProps[key]}`)[0];\n if (!element) {\n element = createElement('div', checkProps[key]);\n element.className = checkProps[key];\n swiper.el.append(element);\n }\n params[key] = element;\n originalParams[key] = element;\n }\n });\n }\n return params;\n}\n\nexport { createElementIfNotDefined as c };\n","function classesToSelector(classes) {\n if (classes === void 0) {\n classes = '';\n }\n return `.${classes.trim().replace(/([\\.:!+\\/])/g, '\\\\$1') // eslint-disable-line\n .replace(/ /g, '.')}`;\n}\n\nexport { classesToSelector as c };\n","function appendSlide(slides) {\n const swiper = this;\n const {\n params,\n slidesEl\n } = swiper;\n if (params.loop) {\n swiper.loopDestroy();\n }\n const appendElement = slideEl => {\n if (typeof slideEl === 'string') {\n const tempDOM = document.createElement('div');\n tempDOM.innerHTML = slideEl;\n slidesEl.append(tempDOM.children[0]);\n tempDOM.innerHTML = '';\n } else {\n slidesEl.append(slideEl);\n }\n };\n if (typeof slides === 'object' && 'length' in slides) {\n for (let i = 0; i < slides.length; i += 1) {\n if (slides[i]) appendElement(slides[i]);\n }\n } else {\n appendElement(slides);\n }\n swiper.recalcSlides();\n if (params.loop) {\n swiper.loopCreate();\n }\n if (!params.observer || swiper.isElement) {\n swiper.update();\n }\n}\n\nfunction prependSlide(slides) {\n const swiper = this;\n const {\n params,\n activeIndex,\n slidesEl\n } = swiper;\n if (params.loop) {\n swiper.loopDestroy();\n }\n let newActiveIndex = activeIndex + 1;\n const prependElement = slideEl => {\n if (typeof slideEl === 'string') {\n const tempDOM = document.createElement('div');\n tempDOM.innerHTML = slideEl;\n slidesEl.prepend(tempDOM.children[0]);\n tempDOM.innerHTML = '';\n } else {\n slidesEl.prepend(slideEl);\n }\n };\n if (typeof slides === 'object' && 'length' in slides) {\n for (let i = 0; i < slides.length; i += 1) {\n if (slides[i]) prependElement(slides[i]);\n }\n newActiveIndex = activeIndex + slides.length;\n } else {\n prependElement(slides);\n }\n swiper.recalcSlides();\n if (params.loop) {\n swiper.loopCreate();\n }\n if (!params.observer || swiper.isElement) {\n swiper.update();\n }\n swiper.slideTo(newActiveIndex, 0, false);\n}\n\nfunction addSlide(index, slides) {\n const swiper = this;\n const {\n params,\n activeIndex,\n slidesEl\n } = swiper;\n let activeIndexBuffer = activeIndex;\n if (params.loop) {\n activeIndexBuffer -= swiper.loopedSlides;\n swiper.loopDestroy();\n swiper.recalcSlides();\n }\n const baseLength = swiper.slides.length;\n if (index <= 0) {\n swiper.prependSlide(slides);\n return;\n }\n if (index >= baseLength) {\n swiper.appendSlide(slides);\n return;\n }\n let newActiveIndex = activeIndexBuffer > index ? activeIndexBuffer + 1 : activeIndexBuffer;\n const slidesBuffer = [];\n for (let i = baseLength - 1; i >= index; i -= 1) {\n const currentSlide = swiper.slides[i];\n currentSlide.remove();\n slidesBuffer.unshift(currentSlide);\n }\n if (typeof slides === 'object' && 'length' in slides) {\n for (let i = 0; i < slides.length; i += 1) {\n if (slides[i]) slidesEl.append(slides[i]);\n }\n newActiveIndex = activeIndexBuffer > index ? activeIndexBuffer + slides.length : activeIndexBuffer;\n } else {\n slidesEl.append(slides);\n }\n for (let i = 0; i < slidesBuffer.length; i += 1) {\n slidesEl.append(slidesBuffer[i]);\n }\n swiper.recalcSlides();\n if (params.loop) {\n swiper.loopCreate();\n }\n if (!params.observer || swiper.isElement) {\n swiper.update();\n }\n if (params.loop) {\n swiper.slideTo(newActiveIndex + swiper.loopedSlides, 0, false);\n } else {\n swiper.slideTo(newActiveIndex, 0, false);\n }\n}\n\nfunction removeSlide(slidesIndexes) {\n const swiper = this;\n const {\n params,\n activeIndex\n } = swiper;\n let activeIndexBuffer = activeIndex;\n if (params.loop) {\n activeIndexBuffer -= swiper.loopedSlides;\n swiper.loopDestroy();\n }\n let newActiveIndex = activeIndexBuffer;\n let indexToRemove;\n if (typeof slidesIndexes === 'object' && 'length' in slidesIndexes) {\n for (let i = 0; i < slidesIndexes.length; i += 1) {\n indexToRemove = slidesIndexes[i];\n if (swiper.slides[indexToRemove]) swiper.slides[indexToRemove].remove();\n if (indexToRemove < newActiveIndex) newActiveIndex -= 1;\n }\n newActiveIndex = Math.max(newActiveIndex, 0);\n } else {\n indexToRemove = slidesIndexes;\n if (swiper.slides[indexToRemove]) swiper.slides[indexToRemove].remove();\n if (indexToRemove < newActiveIndex) newActiveIndex -= 1;\n newActiveIndex = Math.max(newActiveIndex, 0);\n }\n swiper.recalcSlides();\n if (params.loop) {\n swiper.loopCreate();\n }\n if (!params.observer || swiper.isElement) {\n swiper.update();\n }\n if (params.loop) {\n swiper.slideTo(newActiveIndex + swiper.loopedSlides, 0, false);\n } else {\n swiper.slideTo(newActiveIndex, 0, false);\n }\n}\n\nfunction removeAllSlides() {\n const swiper = this;\n const slidesIndexes = [];\n for (let i = 0; i < swiper.slides.length; i += 1) {\n slidesIndexes.push(i);\n }\n swiper.removeSlide(slidesIndexes);\n}\n\nfunction Manipulation(_ref) {\n let {\n swiper\n } = _ref;\n Object.assign(swiper, {\n appendSlide: appendSlide.bind(swiper),\n prependSlide: prependSlide.bind(swiper),\n addSlide: addSlide.bind(swiper),\n removeSlide: removeSlide.bind(swiper),\n removeAllSlides: removeAllSlides.bind(swiper)\n });\n}\n\nexport { Manipulation as default };\n","function effectInit(params) {\n const {\n effect,\n swiper,\n on,\n setTranslate,\n setTransition,\n overwriteParams,\n perspective,\n recreateShadows,\n getEffectParams\n } = params;\n on('beforeInit', () => {\n if (swiper.params.effect !== effect) return;\n swiper.classNames.push(`${swiper.params.containerModifierClass}${effect}`);\n if (perspective && perspective()) {\n swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);\n }\n const overwriteParamsResult = overwriteParams ? overwriteParams() : {};\n Object.assign(swiper.params, overwriteParamsResult);\n Object.assign(swiper.originalParams, overwriteParamsResult);\n });\n on('setTranslate', () => {\n if (swiper.params.effect !== effect) return;\n setTranslate();\n });\n on('setTransition', (_s, duration) => {\n if (swiper.params.effect !== effect) return;\n setTransition(duration);\n });\n on('transitionEnd', () => {\n if (swiper.params.effect !== effect) return;\n if (recreateShadows) {\n if (!getEffectParams || !getEffectParams().slideShadows) return;\n // remove shadows\n swiper.slides.forEach(slideEl => {\n slideEl.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(shadowEl => shadowEl.remove());\n });\n // create new one\n recreateShadows();\n }\n });\n let requireUpdateOnVirtual;\n on('virtualUpdate', () => {\n if (swiper.params.effect !== effect) return;\n if (!swiper.slides.length) {\n requireUpdateOnVirtual = true;\n }\n requestAnimationFrame(() => {\n if (requireUpdateOnVirtual && swiper.slides && swiper.slides.length) {\n setTranslate();\n requireUpdateOnVirtual = false;\n }\n });\n });\n}\n\nexport { effectInit as e };\n","import { l as getSlideTransformEl } from './utils.mjs';\n\nfunction effectTarget(effectParams, slideEl) {\n const transformEl = getSlideTransformEl(slideEl);\n if (transformEl !== slideEl) {\n transformEl.style.backfaceVisibility = 'hidden';\n transformEl.style['-webkit-backface-visibility'] = 'hidden';\n }\n return transformEl;\n}\n\nexport { effectTarget as e };\n","import { j as elementTransitionEnd } from './utils.mjs';\n\nfunction effectVirtualTransitionEnd(_ref) {\n let {\n swiper,\n duration,\n transformElements,\n allSlides\n } = _ref;\n const {\n activeIndex\n } = swiper;\n const getSlide = el => {\n if (!el.parentElement) {\n // assume shadow root\n const slide = swiper.slides.filter(slideEl => slideEl.shadowRoot && slideEl.shadowRoot === el.parentNode)[0];\n return slide;\n }\n return el.parentElement;\n };\n if (swiper.params.virtualTranslate && duration !== 0) {\n let eventTriggered = false;\n let transitionEndTarget;\n if (allSlides) {\n transitionEndTarget = transformElements;\n } else {\n transitionEndTarget = transformElements.filter(transformEl => {\n const el = transformEl.classList.contains('swiper-slide-transform') ? getSlide(transformEl) : transformEl;\n return swiper.getSlideIndex(el) === activeIndex;\n });\n }\n transitionEndTarget.forEach(el => {\n elementTransitionEnd(el, () => {\n if (eventTriggered) return;\n if (!swiper || swiper.destroyed) return;\n eventTriggered = true;\n swiper.animating = false;\n const evt = new window.CustomEvent('transitionend', {\n bubbles: true,\n cancelable: true\n });\n swiper.wrapperEl.dispatchEvent(evt);\n });\n });\n }\n}\n\nexport { effectVirtualTransitionEnd as e };\n","import { l as getSlideTransformEl, c as createElement } from './utils.mjs';\n\nfunction createShadow(suffix, slideEl, side) {\n const shadowClass = `swiper-slide-shadow${side ? `-${side}` : ''}${suffix ? ` swiper-slide-shadow-${suffix}` : ''}`;\n const shadowContainer = getSlideTransformEl(slideEl);\n let shadowEl = shadowContainer.querySelector(`.${shadowClass.split(' ').join('.')}`);\n if (!shadowEl) {\n shadowEl = createElement('div', shadowClass.split(' '));\n shadowContainer.append(shadowEl);\n }\n return shadowEl;\n}\n\nexport { createShadow as c };\n","/**\n * Swiper 11.0.5\n * Most modern mobile touch slider and framework with hardware accelerated transitions\n * https://swiperjs.com\n *\n * Copyright 2014-2023 Vladimir Kharlampidi\n *\n * Released under the MIT License\n *\n * Released on: November 22, 2023\n */\n\nimport { S as Swiper } from './shared/swiper-core.mjs';\nimport Virtual from './modules/virtual.mjs';\nimport Keyboard from './modules/keyboard.mjs';\nimport Mousewheel from './modules/mousewheel.mjs';\nimport Navigation from './modules/navigation.mjs';\nimport Pagination from './modules/pagination.mjs';\nimport Scrollbar from './modules/scrollbar.mjs';\nimport Parallax from './modules/parallax.mjs';\nimport Zoom from './modules/zoom.mjs';\nimport Controller from './modules/controller.mjs';\nimport A11y from './modules/a11y.mjs';\nimport History from './modules/history.mjs';\nimport HashNavigation from './modules/hash-navigation.mjs';\nimport Autoplay from './modules/autoplay.mjs';\nimport Thumb from './modules/thumbs.mjs';\nimport freeMode from './modules/free-mode.mjs';\nimport Grid from './modules/grid.mjs';\nimport Manipulation from './modules/manipulation.mjs';\nimport EffectFade from './modules/effect-fade.mjs';\nimport EffectCube from './modules/effect-cube.mjs';\nimport EffectFlip from './modules/effect-flip.mjs';\nimport EffectCoverflow from './modules/effect-coverflow.mjs';\nimport EffectCreative from './modules/effect-creative.mjs';\nimport EffectCards from './modules/effect-cards.mjs';\n\n// Swiper Class\nconst modules = [Virtual, Keyboard, Mousewheel, Navigation, Pagination, Scrollbar, Parallax, Zoom, Controller, A11y, History, HashNavigation, Autoplay, Thumb, freeMode, Grid, Manipulation, EffectFade, EffectCube, EffectFlip, EffectCoverflow, EffectCreative, EffectCards];\nSwiper.use(modules);\n\nexport { Swiper, Swiper as default };\n","import { g as getDocument } from '../shared/ssr-window.esm.mjs';\nimport { s as setCSSProperty, e as elementChildren, c as createElement } from '../shared/utils.mjs';\n\nfunction Virtual(_ref) {\n let {\n swiper,\n extendParams,\n on,\n emit\n } = _ref;\n extendParams({\n virtual: {\n enabled: false,\n slides: [],\n cache: true,\n renderSlide: null,\n renderExternal: null,\n renderExternalUpdate: true,\n addSlidesBefore: 0,\n addSlidesAfter: 0\n }\n });\n let cssModeTimeout;\n const document = getDocument();\n swiper.virtual = {\n cache: {},\n from: undefined,\n to: undefined,\n slides: [],\n offset: 0,\n slidesGrid: []\n };\n const tempDOM = document.createElement('div');\n function renderSlide(slide, index) {\n const params = swiper.params.virtual;\n if (params.cache && swiper.virtual.cache[index]) {\n return swiper.virtual.cache[index];\n }\n // eslint-disable-next-line\n let slideEl;\n if (params.renderSlide) {\n slideEl = params.renderSlide.call(swiper, slide, index);\n if (typeof slideEl === 'string') {\n tempDOM.innerHTML = slideEl;\n slideEl = tempDOM.children[0];\n }\n } else if (swiper.isElement) {\n slideEl = createElement('swiper-slide');\n } else {\n slideEl = createElement('div', swiper.params.slideClass);\n }\n slideEl.setAttribute('data-swiper-slide-index', index);\n if (!params.renderSlide) {\n slideEl.innerHTML = slide;\n }\n if (params.cache) {\n swiper.virtual.cache[index] = slideEl;\n }\n return slideEl;\n }\n function update(force) {\n const {\n slidesPerView,\n slidesPerGroup,\n centeredSlides,\n loop: isLoop\n } = swiper.params;\n const {\n addSlidesBefore,\n addSlidesAfter\n } = swiper.params.virtual;\n const {\n from: previousFrom,\n to: previousTo,\n slides,\n slidesGrid: previousSlidesGrid,\n offset: previousOffset\n } = swiper.virtual;\n if (!swiper.params.cssMode) {\n swiper.updateActiveIndex();\n }\n const activeIndex = swiper.activeIndex || 0;\n let offsetProp;\n if (swiper.rtlTranslate) offsetProp = 'right';else offsetProp = swiper.isHorizontal() ? 'left' : 'top';\n let slidesAfter;\n let slidesBefore;\n if (centeredSlides) {\n slidesAfter = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesAfter;\n slidesBefore = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesBefore;\n } else {\n slidesAfter = slidesPerView + (slidesPerGroup - 1) + addSlidesAfter;\n slidesBefore = (isLoop ? slidesPerView : slidesPerGroup) + addSlidesBefore;\n }\n let from = activeIndex - slidesBefore;\n let to = activeIndex + slidesAfter;\n if (!isLoop) {\n from = Math.max(from, 0);\n to = Math.min(to, slides.length - 1);\n }\n let offset = (swiper.slidesGrid[from] || 0) - (swiper.slidesGrid[0] || 0);\n if (isLoop && activeIndex >= slidesBefore) {\n from -= slidesBefore;\n if (!centeredSlides) offset += swiper.slidesGrid[0];\n } else if (isLoop && activeIndex < slidesBefore) {\n from = -slidesBefore;\n if (centeredSlides) offset += swiper.slidesGrid[0];\n }\n Object.assign(swiper.virtual, {\n from,\n to,\n offset,\n slidesGrid: swiper.slidesGrid,\n slidesBefore,\n slidesAfter\n });\n function onRendered() {\n swiper.updateSlides();\n swiper.updateProgress();\n swiper.updateSlidesClasses();\n emit('virtualUpdate');\n }\n if (previousFrom === from && previousTo === to && !force) {\n if (swiper.slidesGrid !== previousSlidesGrid && offset !== previousOffset) {\n swiper.slides.forEach(slideEl => {\n slideEl.style[offsetProp] = `${offset - Math.abs(swiper.cssOverflowAdjustment())}px`;\n });\n }\n swiper.updateProgress();\n emit('virtualUpdate');\n return;\n }\n if (swiper.params.virtual.renderExternal) {\n swiper.params.virtual.renderExternal.call(swiper, {\n offset,\n from,\n to,\n slides: function getSlides() {\n const slidesToRender = [];\n for (let i = from; i <= to; i += 1) {\n slidesToRender.push(slides[i]);\n }\n return slidesToRender;\n }()\n });\n if (swiper.params.virtual.renderExternalUpdate) {\n onRendered();\n } else {\n emit('virtualUpdate');\n }\n return;\n }\n const prependIndexes = [];\n const appendIndexes = [];\n const getSlideIndex = index => {\n let slideIndex = index;\n if (index < 0) {\n slideIndex = slides.length + index;\n } else if (slideIndex >= slides.length) {\n // eslint-disable-next-line\n slideIndex = slideIndex - slides.length;\n }\n return slideIndex;\n };\n if (force) {\n swiper.slides.filter(el => el.matches(`.${swiper.params.slideClass}, swiper-slide`)).forEach(slideEl => {\n slideEl.remove();\n });\n } else {\n for (let i = previousFrom; i <= previousTo; i += 1) {\n if (i < from || i > to) {\n const slideIndex = getSlideIndex(i);\n swiper.slides.filter(el => el.matches(`.${swiper.params.slideClass}[data-swiper-slide-index=\"${slideIndex}\"], swiper-slide[data-swiper-slide-index=\"${slideIndex}\"]`)).forEach(slideEl => {\n slideEl.remove();\n });\n }\n }\n }\n const loopFrom = isLoop ? -slides.length : 0;\n const loopTo = isLoop ? slides.length * 2 : slides.length;\n for (let i = loopFrom; i < loopTo; i += 1) {\n if (i >= from && i <= to) {\n const slideIndex = getSlideIndex(i);\n if (typeof previousTo === 'undefined' || force) {\n appendIndexes.push(slideIndex);\n } else {\n if (i > previousTo) appendIndexes.push(slideIndex);\n if (i < previousFrom) prependIndexes.push(slideIndex);\n }\n }\n }\n appendIndexes.forEach(index => {\n swiper.slidesEl.append(renderSlide(slides[index], index));\n });\n if (isLoop) {\n for (let i = prependIndexes.length - 1; i >= 0; i -= 1) {\n const index = prependIndexes[i];\n swiper.slidesEl.prepend(renderSlide(slides[index], index));\n }\n } else {\n prependIndexes.sort((a, b) => b - a);\n prependIndexes.forEach(index => {\n swiper.slidesEl.prepend(renderSlide(slides[index], index));\n });\n }\n elementChildren(swiper.slidesEl, '.swiper-slide, swiper-slide').forEach(slideEl => {\n slideEl.style[offsetProp] = `${offset - Math.abs(swiper.cssOverflowAdjustment())}px`;\n });\n onRendered();\n }\n function appendSlide(slides) {\n if (typeof slides === 'object' && 'length' in slides) {\n for (let i = 0; i < slides.length; i += 1) {\n if (slides[i]) swiper.virtual.slides.push(slides[i]);\n }\n } else {\n swiper.virtual.slides.push(slides);\n }\n update(true);\n }\n function prependSlide(slides) {\n const activeIndex = swiper.activeIndex;\n let newActiveIndex = activeIndex + 1;\n let numberOfNewSlides = 1;\n if (Array.isArray(slides)) {\n for (let i = 0; i < slides.length; i += 1) {\n if (slides[i]) swiper.virtual.slides.unshift(slides[i]);\n }\n newActiveIndex = activeIndex + slides.length;\n numberOfNewSlides = slides.length;\n } else {\n swiper.virtual.slides.unshift(slides);\n }\n if (swiper.params.virtual.cache) {\n const cache = swiper.virtual.cache;\n const newCache = {};\n Object.keys(cache).forEach(cachedIndex => {\n const cachedEl = cache[cachedIndex];\n const cachedElIndex = cachedEl.getAttribute('data-swiper-slide-index');\n if (cachedElIndex) {\n cachedEl.setAttribute('data-swiper-slide-index', parseInt(cachedElIndex, 10) + numberOfNewSlides);\n }\n newCache[parseInt(cachedIndex, 10) + numberOfNewSlides] = cachedEl;\n });\n swiper.virtual.cache = newCache;\n }\n update(true);\n swiper.slideTo(newActiveIndex, 0);\n }\n function removeSlide(slidesIndexes) {\n if (typeof slidesIndexes === 'undefined' || slidesIndexes === null) return;\n let activeIndex = swiper.activeIndex;\n if (Array.isArray(slidesIndexes)) {\n for (let i = slidesIndexes.length - 1; i >= 0; i -= 1) {\n if (swiper.params.virtual.cache) {\n delete swiper.virtual.cache[slidesIndexes[i]];\n // shift cache indexes\n Object.keys(swiper.virtual.cache).forEach(key => {\n if (key > slidesIndexes) {\n swiper.virtual.cache[key - 1] = swiper.virtual.cache[key];\n swiper.virtual.cache[key - 1].setAttribute('data-swiper-slide-index', key - 1);\n delete swiper.virtual.cache[key];\n }\n });\n }\n swiper.virtual.slides.splice(slidesIndexes[i], 1);\n if (slidesIndexes[i] < activeIndex) activeIndex -= 1;\n activeIndex = Math.max(activeIndex, 0);\n }\n } else {\n if (swiper.params.virtual.cache) {\n delete swiper.virtual.cache[slidesIndexes];\n // shift cache indexes\n Object.keys(swiper.virtual.cache).forEach(key => {\n if (key > slidesIndexes) {\n swiper.virtual.cache[key - 1] = swiper.virtual.cache[key];\n swiper.virtual.cache[key - 1].setAttribute('data-swiper-slide-index', key - 1);\n delete swiper.virtual.cache[key];\n }\n });\n }\n swiper.virtual.slides.splice(slidesIndexes, 1);\n if (slidesIndexes < activeIndex) activeIndex -= 1;\n activeIndex = Math.max(activeIndex, 0);\n }\n update(true);\n swiper.slideTo(activeIndex, 0);\n }\n function removeAllSlides() {\n swiper.virtual.slides = [];\n if (swiper.params.virtual.cache) {\n swiper.virtual.cache = {};\n }\n update(true);\n swiper.slideTo(0, 0);\n }\n on('beforeInit', () => {\n if (!swiper.params.virtual.enabled) return;\n let domSlidesAssigned;\n if (typeof swiper.passedParams.virtual.slides === 'undefined') {\n const slides = [...swiper.slidesEl.children].filter(el => el.matches(`.${swiper.params.slideClass}, swiper-slide`));\n if (slides && slides.length) {\n swiper.virtual.slides = [...slides];\n domSlidesAssigned = true;\n slides.forEach((slideEl, slideIndex) => {\n slideEl.setAttribute('data-swiper-slide-index', slideIndex);\n swiper.virtual.cache[slideIndex] = slideEl;\n slideEl.remove();\n });\n }\n }\n if (!domSlidesAssigned) {\n swiper.virtual.slides = swiper.params.virtual.slides;\n }\n swiper.classNames.push(`${swiper.params.containerModifierClass}virtual`);\n swiper.params.watchSlidesProgress = true;\n swiper.originalParams.watchSlidesProgress = true;\n update();\n });\n on('setTranslate', () => {\n if (!swiper.params.virtual.enabled) return;\n if (swiper.params.cssMode && !swiper._immediateVirtual) {\n clearTimeout(cssModeTimeout);\n cssModeTimeout = setTimeout(() => {\n update();\n }, 100);\n } else {\n update();\n }\n });\n on('init update resize', () => {\n if (!swiper.params.virtual.enabled) return;\n if (swiper.params.cssMode) {\n setCSSProperty(swiper.wrapperEl, '--swiper-virtual-size', `${swiper.virtualSize}px`);\n }\n });\n Object.assign(swiper.virtual, {\n appendSlide,\n prependSlide,\n removeSlide,\n removeAllSlides,\n update\n });\n}\n\nexport { Virtual as default };\n","import { g as getDocument, a as getWindow } from '../shared/ssr-window.esm.mjs';\nimport { a as elementParents, b as elementOffset } from '../shared/utils.mjs';\n\n/* eslint-disable consistent-return */\nfunction Keyboard(_ref) {\n let {\n swiper,\n extendParams,\n on,\n emit\n } = _ref;\n const document = getDocument();\n const window = getWindow();\n swiper.keyboard = {\n enabled: false\n };\n extendParams({\n keyboard: {\n enabled: false,\n onlyInViewport: true,\n pageUpDown: true\n }\n });\n function handle(event) {\n if (!swiper.enabled) return;\n const {\n rtlTranslate: rtl\n } = swiper;\n let e = event;\n if (e.originalEvent) e = e.originalEvent; // jquery fix\n const kc = e.keyCode || e.charCode;\n const pageUpDown = swiper.params.keyboard.pageUpDown;\n const isPageUp = pageUpDown && kc === 33;\n const isPageDown = pageUpDown && kc === 34;\n const isArrowLeft = kc === 37;\n const isArrowRight = kc === 39;\n const isArrowUp = kc === 38;\n const isArrowDown = kc === 40;\n // Directions locks\n if (!swiper.allowSlideNext && (swiper.isHorizontal() && isArrowRight || swiper.isVertical() && isArrowDown || isPageDown)) {\n return false;\n }\n if (!swiper.allowSlidePrev && (swiper.isHorizontal() && isArrowLeft || swiper.isVertical() && isArrowUp || isPageUp)) {\n return false;\n }\n if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) {\n return undefined;\n }\n if (document.activeElement && document.activeElement.nodeName && (document.activeElement.nodeName.toLowerCase() === 'input' || document.activeElement.nodeName.toLowerCase() === 'textarea')) {\n return undefined;\n }\n if (swiper.params.keyboard.onlyInViewport && (isPageUp || isPageDown || isArrowLeft || isArrowRight || isArrowUp || isArrowDown)) {\n let inView = false;\n // Check that swiper should be inside of visible area of window\n if (elementParents(swiper.el, `.${swiper.params.slideClass}, swiper-slide`).length > 0 && elementParents(swiper.el, `.${swiper.params.slideActiveClass}`).length === 0) {\n return undefined;\n }\n const el = swiper.el;\n const swiperWidth = el.clientWidth;\n const swiperHeight = el.clientHeight;\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n const swiperOffset = elementOffset(el);\n if (rtl) swiperOffset.left -= el.scrollLeft;\n const swiperCoord = [[swiperOffset.left, swiperOffset.top], [swiperOffset.left + swiperWidth, swiperOffset.top], [swiperOffset.left, swiperOffset.top + swiperHeight], [swiperOffset.left + swiperWidth, swiperOffset.top + swiperHeight]];\n for (let i = 0; i < swiperCoord.length; i += 1) {\n const point = swiperCoord[i];\n if (point[0] >= 0 && point[0] <= windowWidth && point[1] >= 0 && point[1] <= windowHeight) {\n if (point[0] === 0 && point[1] === 0) continue; // eslint-disable-line\n inView = true;\n }\n }\n if (!inView) return undefined;\n }\n if (swiper.isHorizontal()) {\n if (isPageUp || isPageDown || isArrowLeft || isArrowRight) {\n if (e.preventDefault) e.preventDefault();else e.returnValue = false;\n }\n if ((isPageDown || isArrowRight) && !rtl || (isPageUp || isArrowLeft) && rtl) swiper.slideNext();\n if ((isPageUp || isArrowLeft) && !rtl || (isPageDown || isArrowRight) && rtl) swiper.slidePrev();\n } else {\n if (isPageUp || isPageDown || isArrowUp || isArrowDown) {\n if (e.preventDefault) e.preventDefault();else e.returnValue = false;\n }\n if (isPageDown || isArrowDown) swiper.slideNext();\n if (isPageUp || isArrowUp) swiper.slidePrev();\n }\n emit('keyPress', kc);\n return undefined;\n }\n function enable() {\n if (swiper.keyboard.enabled) return;\n document.addEventListener('keydown', handle);\n swiper.keyboard.enabled = true;\n }\n function disable() {\n if (!swiper.keyboard.enabled) return;\n document.removeEventListener('keydown', handle);\n swiper.keyboard.enabled = false;\n }\n on('init', () => {\n if (swiper.params.keyboard.enabled) {\n enable();\n }\n });\n on('destroy', () => {\n if (swiper.keyboard.enabled) {\n disable();\n }\n });\n Object.assign(swiper.keyboard, {\n enable,\n disable\n });\n}\n\nexport { Keyboard as default };\n","import { a as getWindow } from '../shared/ssr-window.esm.mjs';\nimport { n as nextTick, d as now } from '../shared/utils.mjs';\n\n/* eslint-disable consistent-return */\nfunction Mousewheel(_ref) {\n let {\n swiper,\n extendParams,\n on,\n emit\n } = _ref;\n const window = getWindow();\n extendParams({\n mousewheel: {\n enabled: false,\n releaseOnEdges: false,\n invert: false,\n forceToAxis: false,\n sensitivity: 1,\n eventsTarget: 'container',\n thresholdDelta: null,\n thresholdTime: null,\n noMousewheelClass: 'swiper-no-mousewheel'\n }\n });\n swiper.mousewheel = {\n enabled: false\n };\n let timeout;\n let lastScrollTime = now();\n let lastEventBeforeSnap;\n const recentWheelEvents = [];\n function normalize(e) {\n // Reasonable defaults\n const PIXEL_STEP = 10;\n const LINE_HEIGHT = 40;\n const PAGE_HEIGHT = 800;\n let sX = 0;\n let sY = 0; // spinX, spinY\n let pX = 0;\n let pY = 0; // pixelX, pixelY\n\n // Legacy\n if ('detail' in e) {\n sY = e.detail;\n }\n if ('wheelDelta' in e) {\n sY = -e.wheelDelta / 120;\n }\n if ('wheelDeltaY' in e) {\n sY = -e.wheelDeltaY / 120;\n }\n if ('wheelDeltaX' in e) {\n sX = -e.wheelDeltaX / 120;\n }\n\n // side scrolling on FF with DOMMouseScroll\n if ('axis' in e && e.axis === e.HORIZONTAL_AXIS) {\n sX = sY;\n sY = 0;\n }\n pX = sX * PIXEL_STEP;\n pY = sY * PIXEL_STEP;\n if ('deltaY' in e) {\n pY = e.deltaY;\n }\n if ('deltaX' in e) {\n pX = e.deltaX;\n }\n if (e.shiftKey && !pX) {\n // if user scrolls with shift he wants horizontal scroll\n pX = pY;\n pY = 0;\n }\n if ((pX || pY) && e.deltaMode) {\n if (e.deltaMode === 1) {\n // delta in LINE units\n pX *= LINE_HEIGHT;\n pY *= LINE_HEIGHT;\n } else {\n // delta in PAGE units\n pX *= PAGE_HEIGHT;\n pY *= PAGE_HEIGHT;\n }\n }\n\n // Fall-back if spin cannot be determined\n if (pX && !sX) {\n sX = pX < 1 ? -1 : 1;\n }\n if (pY && !sY) {\n sY = pY < 1 ? -1 : 1;\n }\n return {\n spinX: sX,\n spinY: sY,\n pixelX: pX,\n pixelY: pY\n };\n }\n function handleMouseEnter() {\n if (!swiper.enabled) return;\n swiper.mouseEntered = true;\n }\n function handleMouseLeave() {\n if (!swiper.enabled) return;\n swiper.mouseEntered = false;\n }\n function animateSlider(newEvent) {\n if (swiper.params.mousewheel.thresholdDelta && newEvent.delta < swiper.params.mousewheel.thresholdDelta) {\n // Prevent if delta of wheel scroll delta is below configured threshold\n return false;\n }\n if (swiper.params.mousewheel.thresholdTime && now() - lastScrollTime < swiper.params.mousewheel.thresholdTime) {\n // Prevent if time between scrolls is below configured threshold\n return false;\n }\n\n // If the movement is NOT big enough and\n // if the last time the user scrolled was too close to the current one (avoid continuously triggering the slider):\n // Don't go any further (avoid insignificant scroll movement).\n if (newEvent.delta >= 6 && now() - lastScrollTime < 60) {\n // Return false as a default\n return true;\n }\n // If user is scrolling towards the end:\n // If the slider hasn't hit the latest slide or\n // if the slider is a loop and\n // if the slider isn't moving right now:\n // Go to next slide and\n // emit a scroll event.\n // Else (the user is scrolling towards the beginning) and\n // if the slider hasn't hit the first slide or\n // if the slider is a loop and\n // if the slider isn't moving right now:\n // Go to prev slide and\n // emit a scroll event.\n if (newEvent.direction < 0) {\n if ((!swiper.isEnd || swiper.params.loop) && !swiper.animating) {\n swiper.slideNext();\n emit('scroll', newEvent.raw);\n }\n } else if ((!swiper.isBeginning || swiper.params.loop) && !swiper.animating) {\n swiper.slidePrev();\n emit('scroll', newEvent.raw);\n }\n // If you got here is because an animation has been triggered so store the current time\n lastScrollTime = new window.Date().getTime();\n // Return false as a default\n return false;\n }\n function releaseScroll(newEvent) {\n const params = swiper.params.mousewheel;\n if (newEvent.direction < 0) {\n if (swiper.isEnd && !swiper.params.loop && params.releaseOnEdges) {\n // Return true to animate scroll on edges\n return true;\n }\n } else if (swiper.isBeginning && !swiper.params.loop && params.releaseOnEdges) {\n // Return true to animate scroll on edges\n return true;\n }\n return false;\n }\n function handle(event) {\n let e = event;\n let disableParentSwiper = true;\n if (!swiper.enabled) return;\n\n // Ignore event if the target or its parents have the swiper-no-mousewheel class\n if (event.target.closest(`.${swiper.params.mousewheel.noMousewheelClass}`)) return;\n const params = swiper.params.mousewheel;\n if (swiper.params.cssMode) {\n e.preventDefault();\n }\n let targetEl = swiper.el;\n if (swiper.params.mousewheel.eventsTarget !== 'container') {\n targetEl = document.querySelector(swiper.params.mousewheel.eventsTarget);\n }\n const targetElContainsTarget = targetEl && targetEl.contains(e.target);\n if (!swiper.mouseEntered && !targetElContainsTarget && !params.releaseOnEdges) return true;\n if (e.originalEvent) e = e.originalEvent; // jquery fix\n let delta = 0;\n const rtlFactor = swiper.rtlTranslate ? -1 : 1;\n const data = normalize(e);\n if (params.forceToAxis) {\n if (swiper.isHorizontal()) {\n if (Math.abs(data.pixelX) > Math.abs(data.pixelY)) delta = -data.pixelX * rtlFactor;else return true;\n } else if (Math.abs(data.pixelY) > Math.abs(data.pixelX)) delta = -data.pixelY;else return true;\n } else {\n delta = Math.abs(data.pixelX) > Math.abs(data.pixelY) ? -data.pixelX * rtlFactor : -data.pixelY;\n }\n if (delta === 0) return true;\n if (params.invert) delta = -delta;\n\n // Get the scroll positions\n let positions = swiper.getTranslate() + delta * params.sensitivity;\n if (positions >= swiper.minTranslate()) positions = swiper.minTranslate();\n if (positions <= swiper.maxTranslate()) positions = swiper.maxTranslate();\n\n // When loop is true:\n // the disableParentSwiper will be true.\n // When loop is false:\n // if the scroll positions is not on edge,\n // then the disableParentSwiper will be true.\n // if the scroll on edge positions,\n // then the disableParentSwiper will be false.\n disableParentSwiper = swiper.params.loop ? true : !(positions === swiper.minTranslate() || positions === swiper.maxTranslate());\n if (disableParentSwiper && swiper.params.nested) e.stopPropagation();\n if (!swiper.params.freeMode || !swiper.params.freeMode.enabled) {\n // Register the new event in a variable which stores the relevant data\n const newEvent = {\n time: now(),\n delta: Math.abs(delta),\n direction: Math.sign(delta),\n raw: event\n };\n\n // Keep the most recent events\n if (recentWheelEvents.length >= 2) {\n recentWheelEvents.shift(); // only store the last N events\n }\n\n const prevEvent = recentWheelEvents.length ? recentWheelEvents[recentWheelEvents.length - 1] : undefined;\n recentWheelEvents.push(newEvent);\n\n // If there is at least one previous recorded event:\n // If direction has changed or\n // if the scroll is quicker than the previous one:\n // Animate the slider.\n // Else (this is the first time the wheel is moved):\n // Animate the slider.\n if (prevEvent) {\n if (newEvent.direction !== prevEvent.direction || newEvent.delta > prevEvent.delta || newEvent.time > prevEvent.time + 150) {\n animateSlider(newEvent);\n }\n } else {\n animateSlider(newEvent);\n }\n\n // If it's time to release the scroll:\n // Return now so you don't hit the preventDefault.\n if (releaseScroll(newEvent)) {\n return true;\n }\n } else {\n // Freemode or scrollContainer:\n\n // If we recently snapped after a momentum scroll, then ignore wheel events\n // to give time for the deceleration to finish. Stop ignoring after 500 msecs\n // or if it's a new scroll (larger delta or inverse sign as last event before\n // an end-of-momentum snap).\n const newEvent = {\n time: now(),\n delta: Math.abs(delta),\n direction: Math.sign(delta)\n };\n const ignoreWheelEvents = lastEventBeforeSnap && newEvent.time < lastEventBeforeSnap.time + 500 && newEvent.delta <= lastEventBeforeSnap.delta && newEvent.direction === lastEventBeforeSnap.direction;\n if (!ignoreWheelEvents) {\n lastEventBeforeSnap = undefined;\n let position = swiper.getTranslate() + delta * params.sensitivity;\n const wasBeginning = swiper.isBeginning;\n const wasEnd = swiper.isEnd;\n if (position >= swiper.minTranslate()) position = swiper.minTranslate();\n if (position <= swiper.maxTranslate()) position = swiper.maxTranslate();\n swiper.setTransition(0);\n swiper.setTranslate(position);\n swiper.updateProgress();\n swiper.updateActiveIndex();\n swiper.updateSlidesClasses();\n if (!wasBeginning && swiper.isBeginning || !wasEnd && swiper.isEnd) {\n swiper.updateSlidesClasses();\n }\n if (swiper.params.loop) {\n swiper.loopFix({\n direction: newEvent.direction < 0 ? 'next' : 'prev',\n byMousewheel: true\n });\n }\n if (swiper.params.freeMode.sticky) {\n // When wheel scrolling starts with sticky (aka snap) enabled, then detect\n // the end of a momentum scroll by storing recent (N=15?) wheel events.\n // 1. do all N events have decreasing or same (absolute value) delta?\n // 2. did all N events arrive in the last M (M=500?) msecs?\n // 3. does the earliest event have an (absolute value) delta that's\n // at least P (P=1?) larger than the most recent event's delta?\n // 4. does the latest event have a delta that's smaller than Q (Q=6?) pixels?\n // If 1-4 are \"yes\" then we're near the end of a momentum scroll deceleration.\n // Snap immediately and ignore remaining wheel events in this scroll.\n // See comment above for \"remaining wheel events in this scroll\" determination.\n // If 1-4 aren't satisfied, then wait to snap until 500ms after the last event.\n clearTimeout(timeout);\n timeout = undefined;\n if (recentWheelEvents.length >= 15) {\n recentWheelEvents.shift(); // only store the last N events\n }\n\n const prevEvent = recentWheelEvents.length ? recentWheelEvents[recentWheelEvents.length - 1] : undefined;\n const firstEvent = recentWheelEvents[0];\n recentWheelEvents.push(newEvent);\n if (prevEvent && (newEvent.delta > prevEvent.delta || newEvent.direction !== prevEvent.direction)) {\n // Increasing or reverse-sign delta means the user started scrolling again. Clear the wheel event log.\n recentWheelEvents.splice(0);\n } else if (recentWheelEvents.length >= 15 && newEvent.time - firstEvent.time < 500 && firstEvent.delta - newEvent.delta >= 1 && newEvent.delta <= 6) {\n // We're at the end of the deceleration of a momentum scroll, so there's no need\n // to wait for more events. Snap ASAP on the next tick.\n // Also, because there's some remaining momentum we'll bias the snap in the\n // direction of the ongoing scroll because it's better UX for the scroll to snap\n // in the same direction as the scroll instead of reversing to snap. Therefore,\n // if it's already scrolled more than 20% in the current direction, keep going.\n const snapToThreshold = delta > 0 ? 0.8 : 0.2;\n lastEventBeforeSnap = newEvent;\n recentWheelEvents.splice(0);\n timeout = nextTick(() => {\n swiper.slideToClosest(swiper.params.speed, true, undefined, snapToThreshold);\n }, 0); // no delay; move on next tick\n }\n\n if (!timeout) {\n // if we get here, then we haven't detected the end of a momentum scroll, so\n // we'll consider a scroll \"complete\" when there haven't been any wheel events\n // for 500ms.\n timeout = nextTick(() => {\n const snapToThreshold = 0.5;\n lastEventBeforeSnap = newEvent;\n recentWheelEvents.splice(0);\n swiper.slideToClosest(swiper.params.speed, true, undefined, snapToThreshold);\n }, 500);\n }\n }\n\n // Emit event\n if (!ignoreWheelEvents) emit('scroll', e);\n\n // Stop autoplay\n if (swiper.params.autoplay && swiper.params.autoplayDisableOnInteraction) swiper.autoplay.stop();\n // Return page scroll on edge positions\n if (params.releaseOnEdges && (position === swiper.minTranslate() || position === swiper.maxTranslate())) {\n return true;\n }\n }\n }\n if (e.preventDefault) e.preventDefault();else e.returnValue = false;\n return false;\n }\n function events(method) {\n let targetEl = swiper.el;\n if (swiper.params.mousewheel.eventsTarget !== 'container') {\n targetEl = document.querySelector(swiper.params.mousewheel.eventsTarget);\n }\n targetEl[method]('mouseenter', handleMouseEnter);\n targetEl[method]('mouseleave', handleMouseLeave);\n targetEl[method]('wheel', handle);\n }\n function enable() {\n if (swiper.params.cssMode) {\n swiper.wrapperEl.removeEventListener('wheel', handle);\n return true;\n }\n if (swiper.mousewheel.enabled) return false;\n events('addEventListener');\n swiper.mousewheel.enabled = true;\n return true;\n }\n function disable() {\n if (swiper.params.cssMode) {\n swiper.wrapperEl.addEventListener(event, handle);\n return true;\n }\n if (!swiper.mousewheel.enabled) return false;\n events('removeEventListener');\n swiper.mousewheel.enabled = false;\n return true;\n }\n on('init', () => {\n if (!swiper.params.mousewheel.enabled && swiper.params.cssMode) {\n disable();\n }\n if (swiper.params.mousewheel.enabled) enable();\n });\n on('destroy', () => {\n if (swiper.params.cssMode) {\n enable();\n }\n if (swiper.mousewheel.enabled) disable();\n });\n Object.assign(swiper.mousewheel, {\n enable,\n disable\n });\n}\n\nexport { Mousewheel as default };\n","import { c as createElementIfNotDefined } from '../shared/create-element-if-not-defined.mjs';\n\nfunction Navigation(_ref) {\n let {\n swiper,\n extendParams,\n on,\n emit\n } = _ref;\n extendParams({\n navigation: {\n nextEl: null,\n prevEl: null,\n hideOnClick: false,\n disabledClass: 'swiper-button-disabled',\n hiddenClass: 'swiper-button-hidden',\n lockClass: 'swiper-button-lock',\n navigationDisabledClass: 'swiper-navigation-disabled'\n }\n });\n swiper.navigation = {\n nextEl: null,\n prevEl: null\n };\n const makeElementsArray = el => (Array.isArray(el) ? el : [el]).filter(e => !!e);\n function getEl(el) {\n let res;\n if (el && typeof el === 'string' && swiper.isElement) {\n res = swiper.el.querySelector(el);\n if (res) return res;\n }\n if (el) {\n if (typeof el === 'string') res = [...document.querySelectorAll(el)];\n if (swiper.params.uniqueNavElements && typeof el === 'string' && res.length > 1 && swiper.el.querySelectorAll(el).length === 1) {\n res = swiper.el.querySelector(el);\n }\n }\n if (el && !res) return el;\n // if (Array.isArray(res) && res.length === 1) res = res[0];\n return res;\n }\n function toggleEl(el, disabled) {\n const params = swiper.params.navigation;\n el = makeElementsArray(el);\n el.forEach(subEl => {\n if (subEl) {\n subEl.classList[disabled ? 'add' : 'remove'](...params.disabledClass.split(' '));\n if (subEl.tagName === 'BUTTON') subEl.disabled = disabled;\n if (swiper.params.watchOverflow && swiper.enabled) {\n subEl.classList[swiper.isLocked ? 'add' : 'remove'](params.lockClass);\n }\n }\n });\n }\n function update() {\n // Update Navigation Buttons\n const {\n nextEl,\n prevEl\n } = swiper.navigation;\n if (swiper.params.loop) {\n toggleEl(prevEl, false);\n toggleEl(nextEl, false);\n return;\n }\n toggleEl(prevEl, swiper.isBeginning && !swiper.params.rewind);\n toggleEl(nextEl, swiper.isEnd && !swiper.params.rewind);\n }\n function onPrevClick(e) {\n e.preventDefault();\n if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind) return;\n swiper.slidePrev();\n emit('navigationPrev');\n }\n function onNextClick(e) {\n e.preventDefault();\n if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind) return;\n swiper.slideNext();\n emit('navigationNext');\n }\n function init() {\n const params = swiper.params.navigation;\n swiper.params.navigation = createElementIfNotDefined(swiper, swiper.originalParams.navigation, swiper.params.navigation, {\n nextEl: 'swiper-button-next',\n prevEl: 'swiper-button-prev'\n });\n if (!(params.nextEl || params.prevEl)) return;\n let nextEl = getEl(params.nextEl);\n let prevEl = getEl(params.prevEl);\n Object.assign(swiper.navigation, {\n nextEl,\n prevEl\n });\n nextEl = makeElementsArray(nextEl);\n prevEl = makeElementsArray(prevEl);\n const initButton = (el, dir) => {\n if (el) {\n el.addEventListener('click', dir === 'next' ? onNextClick : onPrevClick);\n }\n if (!swiper.enabled && el) {\n el.classList.add(...params.lockClass.split(' '));\n }\n };\n nextEl.forEach(el => initButton(el, 'next'));\n prevEl.forEach(el => initButton(el, 'prev'));\n }\n function destroy() {\n let {\n nextEl,\n prevEl\n } = swiper.navigation;\n nextEl = makeElementsArray(nextEl);\n prevEl = makeElementsArray(prevEl);\n const destroyButton = (el, dir) => {\n el.removeEventListener('click', dir === 'next' ? onNextClick : onPrevClick);\n el.classList.remove(...swiper.params.navigation.disabledClass.split(' '));\n };\n nextEl.forEach(el => destroyButton(el, 'next'));\n prevEl.forEach(el => destroyButton(el, 'prev'));\n }\n on('init', () => {\n if (swiper.params.navigation.enabled === false) {\n // eslint-disable-next-line\n disable();\n } else {\n init();\n update();\n }\n });\n on('toEdge fromEdge lock unlock', () => {\n update();\n });\n on('destroy', () => {\n destroy();\n });\n on('enable disable', () => {\n let {\n nextEl,\n prevEl\n } = swiper.navigation;\n nextEl = makeElementsArray(nextEl);\n prevEl = makeElementsArray(prevEl);\n if (swiper.enabled) {\n update();\n return;\n }\n [...nextEl, ...prevEl].filter(el => !!el).forEach(el => el.classList.add(swiper.params.navigation.lockClass));\n });\n on('click', (_s, e) => {\n let {\n nextEl,\n prevEl\n } = swiper.navigation;\n nextEl = makeElementsArray(nextEl);\n prevEl = makeElementsArray(prevEl);\n const targetEl = e.target;\n if (swiper.params.navigation.hideOnClick && !prevEl.includes(targetEl) && !nextEl.includes(targetEl)) {\n if (swiper.pagination && swiper.params.pagination && swiper.params.pagination.clickable && (swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))) return;\n let isHidden;\n if (nextEl.length) {\n isHidden = nextEl[0].classList.contains(swiper.params.navigation.hiddenClass);\n } else if (prevEl.length) {\n isHidden = prevEl[0].classList.contains(swiper.params.navigation.hiddenClass);\n }\n if (isHidden === true) {\n emit('navigationShow');\n } else {\n emit('navigationHide');\n }\n [...nextEl, ...prevEl].filter(el => !!el).forEach(el => el.classList.toggle(swiper.params.navigation.hiddenClass));\n }\n });\n const enable = () => {\n swiper.el.classList.remove(...swiper.params.navigation.navigationDisabledClass.split(' '));\n init();\n update();\n };\n const disable = () => {\n swiper.el.classList.add(...swiper.params.navigation.navigationDisabledClass.split(' '));\n destroy();\n };\n Object.assign(swiper.navigation, {\n enable,\n disable,\n update,\n init,\n destroy\n });\n}\n\nexport { Navigation as default };\n","import { c as classesToSelector } from '../shared/classes-to-selector.mjs';\nimport { c as createElementIfNotDefined } from '../shared/create-element-if-not-defined.mjs';\nimport { f as elementOuterSize, g as elementIndex, a as elementParents } from '../shared/utils.mjs';\n\nfunction Pagination(_ref) {\n let {\n swiper,\n extendParams,\n on,\n emit\n } = _ref;\n const pfx = 'swiper-pagination';\n extendParams({\n pagination: {\n el: null,\n bulletElement: 'span',\n clickable: false,\n hideOnClick: false,\n renderBullet: null,\n renderProgressbar: null,\n renderFraction: null,\n renderCustom: null,\n progressbarOpposite: false,\n type: 'bullets',\n // 'bullets' or 'progressbar' or 'fraction' or 'custom'\n dynamicBullets: false,\n dynamicMainBullets: 1,\n formatFractionCurrent: number => number,\n formatFractionTotal: number => number,\n bulletClass: `${pfx}-bullet`,\n bulletActiveClass: `${pfx}-bullet-active`,\n modifierClass: `${pfx}-`,\n currentClass: `${pfx}-current`,\n totalClass: `${pfx}-total`,\n hiddenClass: `${pfx}-hidden`,\n progressbarFillClass: `${pfx}-progressbar-fill`,\n progressbarOppositeClass: `${pfx}-progressbar-opposite`,\n clickableClass: `${pfx}-clickable`,\n lockClass: `${pfx}-lock`,\n horizontalClass: `${pfx}-horizontal`,\n verticalClass: `${pfx}-vertical`,\n paginationDisabledClass: `${pfx}-disabled`\n }\n });\n swiper.pagination = {\n el: null,\n bullets: []\n };\n let bulletSize;\n let dynamicBulletIndex = 0;\n const makeElementsArray = el => (Array.isArray(el) ? el : [el]).filter(e => !!e);\n function isPaginationDisabled() {\n return !swiper.params.pagination.el || !swiper.pagination.el || Array.isArray(swiper.pagination.el) && swiper.pagination.el.length === 0;\n }\n function setSideBullets(bulletEl, position) {\n const {\n bulletActiveClass\n } = swiper.params.pagination;\n if (!bulletEl) return;\n bulletEl = bulletEl[`${position === 'prev' ? 'previous' : 'next'}ElementSibling`];\n if (bulletEl) {\n bulletEl.classList.add(`${bulletActiveClass}-${position}`);\n bulletEl = bulletEl[`${position === 'prev' ? 'previous' : 'next'}ElementSibling`];\n if (bulletEl) {\n bulletEl.classList.add(`${bulletActiveClass}-${position}-${position}`);\n }\n }\n }\n function onBulletClick(e) {\n const bulletEl = e.target.closest(classesToSelector(swiper.params.pagination.bulletClass));\n if (!bulletEl) {\n return;\n }\n e.preventDefault();\n const index = elementIndex(bulletEl) * swiper.params.slidesPerGroup;\n if (swiper.params.loop) {\n if (swiper.realIndex === index) return;\n swiper.slideToLoop(index);\n } else {\n swiper.slideTo(index);\n }\n }\n function update() {\n // Render || Update Pagination bullets/items\n const rtl = swiper.rtl;\n const params = swiper.params.pagination;\n if (isPaginationDisabled()) return;\n let el = swiper.pagination.el;\n el = makeElementsArray(el);\n // Current/Total\n let current;\n let previousIndex;\n const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : swiper.slides.length;\n const total = swiper.params.loop ? Math.ceil(slidesLength / swiper.params.slidesPerGroup) : swiper.snapGrid.length;\n if (swiper.params.loop) {\n previousIndex = swiper.previousRealIndex || 0;\n current = swiper.params.slidesPerGroup > 1 ? Math.floor(swiper.realIndex / swiper.params.slidesPerGroup) : swiper.realIndex;\n } else if (typeof swiper.snapIndex !== 'undefined') {\n current = swiper.snapIndex;\n previousIndex = swiper.previousSnapIndex;\n } else {\n previousIndex = swiper.previousIndex || 0;\n current = swiper.activeIndex || 0;\n }\n // Types\n if (params.type === 'bullets' && swiper.pagination.bullets && swiper.pagination.bullets.length > 0) {\n const bullets = swiper.pagination.bullets;\n let firstIndex;\n let lastIndex;\n let midIndex;\n if (params.dynamicBullets) {\n bulletSize = elementOuterSize(bullets[0], swiper.isHorizontal() ? 'width' : 'height', true);\n el.forEach(subEl => {\n subEl.style[swiper.isHorizontal() ? 'width' : 'height'] = `${bulletSize * (params.dynamicMainBullets + 4)}px`;\n });\n if (params.dynamicMainBullets > 1 && previousIndex !== undefined) {\n dynamicBulletIndex += current - (previousIndex || 0);\n if (dynamicBulletIndex > params.dynamicMainBullets - 1) {\n dynamicBulletIndex = params.dynamicMainBullets - 1;\n } else if (dynamicBulletIndex < 0) {\n dynamicBulletIndex = 0;\n }\n }\n firstIndex = Math.max(current - dynamicBulletIndex, 0);\n lastIndex = firstIndex + (Math.min(bullets.length, params.dynamicMainBullets) - 1);\n midIndex = (lastIndex + firstIndex) / 2;\n }\n bullets.forEach(bulletEl => {\n const classesToRemove = [...['', '-next', '-next-next', '-prev', '-prev-prev', '-main'].map(suffix => `${params.bulletActiveClass}${suffix}`)].map(s => typeof s === 'string' && s.includes(' ') ? s.split(' ') : s).flat();\n bulletEl.classList.remove(...classesToRemove);\n });\n if (el.length > 1) {\n bullets.forEach(bullet => {\n const bulletIndex = elementIndex(bullet);\n if (bulletIndex === current) {\n bullet.classList.add(...params.bulletActiveClass.split(' '));\n } else if (swiper.isElement) {\n bullet.setAttribute('part', 'bullet');\n }\n if (params.dynamicBullets) {\n if (bulletIndex >= firstIndex && bulletIndex <= lastIndex) {\n bullet.classList.add(...`${params.bulletActiveClass}-main`.split(' '));\n }\n if (bulletIndex === firstIndex) {\n setSideBullets(bullet, 'prev');\n }\n if (bulletIndex === lastIndex) {\n setSideBullets(bullet, 'next');\n }\n }\n });\n } else {\n const bullet = bullets[current];\n if (bullet) {\n bullet.classList.add(...params.bulletActiveClass.split(' '));\n }\n if (swiper.isElement) {\n bullets.forEach((bulletEl, bulletIndex) => {\n bulletEl.setAttribute('part', bulletIndex === current ? 'bullet-active' : 'bullet');\n });\n }\n if (params.dynamicBullets) {\n const firstDisplayedBullet = bullets[firstIndex];\n const lastDisplayedBullet = bullets[lastIndex];\n for (let i = firstIndex; i <= lastIndex; i += 1) {\n if (bullets[i]) {\n bullets[i].classList.add(...`${params.bulletActiveClass}-main`.split(' '));\n }\n }\n setSideBullets(firstDisplayedBullet, 'prev');\n setSideBullets(lastDisplayedBullet, 'next');\n }\n }\n if (params.dynamicBullets) {\n const dynamicBulletsLength = Math.min(bullets.length, params.dynamicMainBullets + 4);\n const bulletsOffset = (bulletSize * dynamicBulletsLength - bulletSize) / 2 - midIndex * bulletSize;\n const offsetProp = rtl ? 'right' : 'left';\n bullets.forEach(bullet => {\n bullet.style[swiper.isHorizontal() ? offsetProp : 'top'] = `${bulletsOffset}px`;\n });\n }\n }\n el.forEach((subEl, subElIndex) => {\n if (params.type === 'fraction') {\n subEl.querySelectorAll(classesToSelector(params.currentClass)).forEach(fractionEl => {\n fractionEl.textContent = params.formatFractionCurrent(current + 1);\n });\n subEl.querySelectorAll(classesToSelector(params.totalClass)).forEach(totalEl => {\n totalEl.textContent = params.formatFractionTotal(total);\n });\n }\n if (params.type === 'progressbar') {\n let progressbarDirection;\n if (params.progressbarOpposite) {\n progressbarDirection = swiper.isHorizontal() ? 'vertical' : 'horizontal';\n } else {\n progressbarDirection = swiper.isHorizontal() ? 'horizontal' : 'vertical';\n }\n const scale = (current + 1) / total;\n let scaleX = 1;\n let scaleY = 1;\n if (progressbarDirection === 'horizontal') {\n scaleX = scale;\n } else {\n scaleY = scale;\n }\n subEl.querySelectorAll(classesToSelector(params.progressbarFillClass)).forEach(progressEl => {\n progressEl.style.transform = `translate3d(0,0,0) scaleX(${scaleX}) scaleY(${scaleY})`;\n progressEl.style.transitionDuration = `${swiper.params.speed}ms`;\n });\n }\n if (params.type === 'custom' && params.renderCustom) {\n subEl.innerHTML = params.renderCustom(swiper, current + 1, total);\n if (subElIndex === 0) emit('paginationRender', subEl);\n } else {\n if (subElIndex === 0) emit('paginationRender', subEl);\n emit('paginationUpdate', subEl);\n }\n if (swiper.params.watchOverflow && swiper.enabled) {\n subEl.classList[swiper.isLocked ? 'add' : 'remove'](params.lockClass);\n }\n });\n }\n function render() {\n // Render Container\n const params = swiper.params.pagination;\n if (isPaginationDisabled()) return;\n const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : swiper.grid && swiper.params.grid.rows > 1 ? swiper.slides.length / Math.ceil(swiper.params.grid.rows) : swiper.slides.length;\n let el = swiper.pagination.el;\n el = makeElementsArray(el);\n let paginationHTML = '';\n if (params.type === 'bullets') {\n let numberOfBullets = swiper.params.loop ? Math.ceil(slidesLength / swiper.params.slidesPerGroup) : swiper.snapGrid.length;\n if (swiper.params.freeMode && swiper.params.freeMode.enabled && numberOfBullets > slidesLength) {\n numberOfBullets = slidesLength;\n }\n for (let i = 0; i < numberOfBullets; i += 1) {\n if (params.renderBullet) {\n paginationHTML += params.renderBullet.call(swiper, i, params.bulletClass);\n } else {\n // prettier-ignore\n paginationHTML += `<${params.bulletElement} ${swiper.isElement ? 'part=\"bullet\"' : ''} class=\"${params.bulletClass}\">`;\n }\n }\n }\n if (params.type === 'fraction') {\n if (params.renderFraction) {\n paginationHTML = params.renderFraction.call(swiper, params.currentClass, params.totalClass);\n } else {\n paginationHTML = `` + ' / ' + ``;\n }\n }\n if (params.type === 'progressbar') {\n if (params.renderProgressbar) {\n paginationHTML = params.renderProgressbar.call(swiper, params.progressbarFillClass);\n } else {\n paginationHTML = ``;\n }\n }\n swiper.pagination.bullets = [];\n el.forEach(subEl => {\n if (params.type !== 'custom') {\n subEl.innerHTML = paginationHTML || '';\n }\n if (params.type === 'bullets') {\n swiper.pagination.bullets.push(...subEl.querySelectorAll(classesToSelector(params.bulletClass)));\n }\n });\n if (params.type !== 'custom') {\n emit('paginationRender', el[0]);\n }\n }\n function init() {\n swiper.params.pagination = createElementIfNotDefined(swiper, swiper.originalParams.pagination, swiper.params.pagination, {\n el: 'swiper-pagination'\n });\n const params = swiper.params.pagination;\n if (!params.el) return;\n let el;\n if (typeof params.el === 'string' && swiper.isElement) {\n el = swiper.el.querySelector(params.el);\n }\n if (!el && typeof params.el === 'string') {\n el = [...document.querySelectorAll(params.el)];\n }\n if (!el) {\n el = params.el;\n }\n if (!el || el.length === 0) return;\n if (swiper.params.uniqueNavElements && typeof params.el === 'string' && Array.isArray(el) && el.length > 1) {\n el = [...swiper.el.querySelectorAll(params.el)];\n // check if it belongs to another nested Swiper\n if (el.length > 1) {\n el = el.filter(subEl => {\n if (elementParents(subEl, '.swiper')[0] !== swiper.el) return false;\n return true;\n })[0];\n }\n }\n if (Array.isArray(el) && el.length === 1) el = el[0];\n Object.assign(swiper.pagination, {\n el\n });\n el = makeElementsArray(el);\n el.forEach(subEl => {\n if (params.type === 'bullets' && params.clickable) {\n subEl.classList.add(...(params.clickableClass || '').split(' '));\n }\n subEl.classList.add(params.modifierClass + params.type);\n subEl.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);\n if (params.type === 'bullets' && params.dynamicBullets) {\n subEl.classList.add(`${params.modifierClass}${params.type}-dynamic`);\n dynamicBulletIndex = 0;\n if (params.dynamicMainBullets < 1) {\n params.dynamicMainBullets = 1;\n }\n }\n if (params.type === 'progressbar' && params.progressbarOpposite) {\n subEl.classList.add(params.progressbarOppositeClass);\n }\n if (params.clickable) {\n subEl.addEventListener('click', onBulletClick);\n }\n if (!swiper.enabled) {\n subEl.classList.add(params.lockClass);\n }\n });\n }\n function destroy() {\n const params = swiper.params.pagination;\n if (isPaginationDisabled()) return;\n let el = swiper.pagination.el;\n if (el) {\n el = makeElementsArray(el);\n el.forEach(subEl => {\n subEl.classList.remove(params.hiddenClass);\n subEl.classList.remove(params.modifierClass + params.type);\n subEl.classList.remove(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);\n if (params.clickable) {\n subEl.classList.remove(...(params.clickableClass || '').split(' '));\n subEl.removeEventListener('click', onBulletClick);\n }\n });\n }\n if (swiper.pagination.bullets) swiper.pagination.bullets.forEach(subEl => subEl.classList.remove(...params.bulletActiveClass.split(' ')));\n }\n on('changeDirection', () => {\n if (!swiper.pagination || !swiper.pagination.el) return;\n const params = swiper.params.pagination;\n let {\n el\n } = swiper.pagination;\n el = makeElementsArray(el);\n el.forEach(subEl => {\n subEl.classList.remove(params.horizontalClass, params.verticalClass);\n subEl.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);\n });\n });\n on('init', () => {\n if (swiper.params.pagination.enabled === false) {\n // eslint-disable-next-line\n disable();\n } else {\n init();\n render();\n update();\n }\n });\n on('activeIndexChange', () => {\n if (typeof swiper.snapIndex === 'undefined') {\n update();\n }\n });\n on('snapIndexChange', () => {\n update();\n });\n on('snapGridLengthChange', () => {\n render();\n update();\n });\n on('destroy', () => {\n destroy();\n });\n on('enable disable', () => {\n let {\n el\n } = swiper.pagination;\n if (el) {\n el = makeElementsArray(el);\n el.forEach(subEl => subEl.classList[swiper.enabled ? 'remove' : 'add'](swiper.params.pagination.lockClass));\n }\n });\n on('lock unlock', () => {\n update();\n });\n on('click', (_s, e) => {\n const targetEl = e.target;\n const el = makeElementsArray(swiper.pagination.el);\n if (swiper.params.pagination.el && swiper.params.pagination.hideOnClick && el && el.length > 0 && !targetEl.classList.contains(swiper.params.pagination.bulletClass)) {\n if (swiper.navigation && (swiper.navigation.nextEl && targetEl === swiper.navigation.nextEl || swiper.navigation.prevEl && targetEl === swiper.navigation.prevEl)) return;\n const isHidden = el[0].classList.contains(swiper.params.pagination.hiddenClass);\n if (isHidden === true) {\n emit('paginationShow');\n } else {\n emit('paginationHide');\n }\n el.forEach(subEl => subEl.classList.toggle(swiper.params.pagination.hiddenClass));\n }\n });\n const enable = () => {\n swiper.el.classList.remove(swiper.params.pagination.paginationDisabledClass);\n let {\n el\n } = swiper.pagination;\n if (el) {\n el = makeElementsArray(el);\n el.forEach(subEl => subEl.classList.remove(swiper.params.pagination.paginationDisabledClass));\n }\n init();\n render();\n update();\n };\n const disable = () => {\n swiper.el.classList.add(swiper.params.pagination.paginationDisabledClass);\n let {\n el\n } = swiper.pagination;\n if (el) {\n el = makeElementsArray(el);\n el.forEach(subEl => subEl.classList.add(swiper.params.pagination.paginationDisabledClass));\n }\n destroy();\n };\n Object.assign(swiper.pagination, {\n enable,\n disable,\n render,\n update,\n init,\n destroy\n });\n}\n\nexport { Pagination as default };\n","import { g as getDocument } from '../shared/ssr-window.esm.mjs';\nimport { h as classesToTokens, c as createElement, n as nextTick, b as elementOffset } from '../shared/utils.mjs';\nimport { c as createElementIfNotDefined } from '../shared/create-element-if-not-defined.mjs';\nimport { c as classesToSelector } from '../shared/classes-to-selector.mjs';\n\nfunction Scrollbar(_ref) {\n let {\n swiper,\n extendParams,\n on,\n emit\n } = _ref;\n const document = getDocument();\n let isTouched = false;\n let timeout = null;\n let dragTimeout = null;\n let dragStartPos;\n let dragSize;\n let trackSize;\n let divider;\n extendParams({\n scrollbar: {\n el: null,\n dragSize: 'auto',\n hide: false,\n draggable: false,\n snapOnRelease: true,\n lockClass: 'swiper-scrollbar-lock',\n dragClass: 'swiper-scrollbar-drag',\n scrollbarDisabledClass: 'swiper-scrollbar-disabled',\n horizontalClass: `swiper-scrollbar-horizontal`,\n verticalClass: `swiper-scrollbar-vertical`\n }\n });\n swiper.scrollbar = {\n el: null,\n dragEl: null\n };\n function setTranslate() {\n if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;\n const {\n scrollbar,\n rtlTranslate: rtl\n } = swiper;\n const {\n dragEl,\n el\n } = scrollbar;\n const params = swiper.params.scrollbar;\n const progress = swiper.params.loop ? swiper.progressLoop : swiper.progress;\n let newSize = dragSize;\n let newPos = (trackSize - dragSize) * progress;\n if (rtl) {\n newPos = -newPos;\n if (newPos > 0) {\n newSize = dragSize - newPos;\n newPos = 0;\n } else if (-newPos + dragSize > trackSize) {\n newSize = trackSize + newPos;\n }\n } else if (newPos < 0) {\n newSize = dragSize + newPos;\n newPos = 0;\n } else if (newPos + dragSize > trackSize) {\n newSize = trackSize - newPos;\n }\n if (swiper.isHorizontal()) {\n dragEl.style.transform = `translate3d(${newPos}px, 0, 0)`;\n dragEl.style.width = `${newSize}px`;\n } else {\n dragEl.style.transform = `translate3d(0px, ${newPos}px, 0)`;\n dragEl.style.height = `${newSize}px`;\n }\n if (params.hide) {\n clearTimeout(timeout);\n el.style.opacity = 1;\n timeout = setTimeout(() => {\n el.style.opacity = 0;\n el.style.transitionDuration = '400ms';\n }, 1000);\n }\n }\n function setTransition(duration) {\n if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;\n swiper.scrollbar.dragEl.style.transitionDuration = `${duration}ms`;\n }\n function updateSize() {\n if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;\n const {\n scrollbar\n } = swiper;\n const {\n dragEl,\n el\n } = scrollbar;\n dragEl.style.width = '';\n dragEl.style.height = '';\n trackSize = swiper.isHorizontal() ? el.offsetWidth : el.offsetHeight;\n divider = swiper.size / (swiper.virtualSize + swiper.params.slidesOffsetBefore - (swiper.params.centeredSlides ? swiper.snapGrid[0] : 0));\n if (swiper.params.scrollbar.dragSize === 'auto') {\n dragSize = trackSize * divider;\n } else {\n dragSize = parseInt(swiper.params.scrollbar.dragSize, 10);\n }\n if (swiper.isHorizontal()) {\n dragEl.style.width = `${dragSize}px`;\n } else {\n dragEl.style.height = `${dragSize}px`;\n }\n if (divider >= 1) {\n el.style.display = 'none';\n } else {\n el.style.display = '';\n }\n if (swiper.params.scrollbar.hide) {\n el.style.opacity = 0;\n }\n if (swiper.params.watchOverflow && swiper.enabled) {\n scrollbar.el.classList[swiper.isLocked ? 'add' : 'remove'](swiper.params.scrollbar.lockClass);\n }\n }\n function getPointerPosition(e) {\n return swiper.isHorizontal() ? e.clientX : e.clientY;\n }\n function setDragPosition(e) {\n const {\n scrollbar,\n rtlTranslate: rtl\n } = swiper;\n const {\n el\n } = scrollbar;\n let positionRatio;\n positionRatio = (getPointerPosition(e) - elementOffset(el)[swiper.isHorizontal() ? 'left' : 'top'] - (dragStartPos !== null ? dragStartPos : dragSize / 2)) / (trackSize - dragSize);\n positionRatio = Math.max(Math.min(positionRatio, 1), 0);\n if (rtl) {\n positionRatio = 1 - positionRatio;\n }\n const position = swiper.minTranslate() + (swiper.maxTranslate() - swiper.minTranslate()) * positionRatio;\n swiper.updateProgress(position);\n swiper.setTranslate(position);\n swiper.updateActiveIndex();\n swiper.updateSlidesClasses();\n }\n function onDragStart(e) {\n const params = swiper.params.scrollbar;\n const {\n scrollbar,\n wrapperEl\n } = swiper;\n const {\n el,\n dragEl\n } = scrollbar;\n isTouched = true;\n dragStartPos = e.target === dragEl ? getPointerPosition(e) - e.target.getBoundingClientRect()[swiper.isHorizontal() ? 'left' : 'top'] : null;\n e.preventDefault();\n e.stopPropagation();\n wrapperEl.style.transitionDuration = '100ms';\n dragEl.style.transitionDuration = '100ms';\n setDragPosition(e);\n clearTimeout(dragTimeout);\n el.style.transitionDuration = '0ms';\n if (params.hide) {\n el.style.opacity = 1;\n }\n if (swiper.params.cssMode) {\n swiper.wrapperEl.style['scroll-snap-type'] = 'none';\n }\n emit('scrollbarDragStart', e);\n }\n function onDragMove(e) {\n const {\n scrollbar,\n wrapperEl\n } = swiper;\n const {\n el,\n dragEl\n } = scrollbar;\n if (!isTouched) return;\n if (e.preventDefault) e.preventDefault();else e.returnValue = false;\n setDragPosition(e);\n wrapperEl.style.transitionDuration = '0ms';\n el.style.transitionDuration = '0ms';\n dragEl.style.transitionDuration = '0ms';\n emit('scrollbarDragMove', e);\n }\n function onDragEnd(e) {\n const params = swiper.params.scrollbar;\n const {\n scrollbar,\n wrapperEl\n } = swiper;\n const {\n el\n } = scrollbar;\n if (!isTouched) return;\n isTouched = false;\n if (swiper.params.cssMode) {\n swiper.wrapperEl.style['scroll-snap-type'] = '';\n wrapperEl.style.transitionDuration = '';\n }\n if (params.hide) {\n clearTimeout(dragTimeout);\n dragTimeout = nextTick(() => {\n el.style.opacity = 0;\n el.style.transitionDuration = '400ms';\n }, 1000);\n }\n emit('scrollbarDragEnd', e);\n if (params.snapOnRelease) {\n swiper.slideToClosest();\n }\n }\n function events(method) {\n const {\n scrollbar,\n params\n } = swiper;\n const el = scrollbar.el;\n if (!el) return;\n const target = el;\n const activeListener = params.passiveListeners ? {\n passive: false,\n capture: false\n } : false;\n const passiveListener = params.passiveListeners ? {\n passive: true,\n capture: false\n } : false;\n if (!target) return;\n const eventMethod = method === 'on' ? 'addEventListener' : 'removeEventListener';\n target[eventMethod]('pointerdown', onDragStart, activeListener);\n document[eventMethod]('pointermove', onDragMove, activeListener);\n document[eventMethod]('pointerup', onDragEnd, passiveListener);\n }\n function enableDraggable() {\n if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;\n events('on');\n }\n function disableDraggable() {\n if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;\n events('off');\n }\n function init() {\n const {\n scrollbar,\n el: swiperEl\n } = swiper;\n swiper.params.scrollbar = createElementIfNotDefined(swiper, swiper.originalParams.scrollbar, swiper.params.scrollbar, {\n el: 'swiper-scrollbar'\n });\n const params = swiper.params.scrollbar;\n if (!params.el) return;\n let el;\n if (typeof params.el === 'string' && swiper.isElement) {\n el = swiper.el.querySelector(params.el);\n }\n if (!el && typeof params.el === 'string') {\n el = document.querySelectorAll(params.el);\n if (!el.length) return;\n } else if (!el) {\n el = params.el;\n }\n if (swiper.params.uniqueNavElements && typeof params.el === 'string' && el.length > 1 && swiperEl.querySelectorAll(params.el).length === 1) {\n el = swiperEl.querySelector(params.el);\n }\n if (el.length > 0) el = el[0];\n el.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);\n let dragEl;\n if (el) {\n dragEl = el.querySelector(classesToSelector(swiper.params.scrollbar.dragClass));\n if (!dragEl) {\n dragEl = createElement('div', swiper.params.scrollbar.dragClass);\n el.append(dragEl);\n }\n }\n Object.assign(scrollbar, {\n el,\n dragEl\n });\n if (params.draggable) {\n enableDraggable();\n }\n if (el) {\n el.classList[swiper.enabled ? 'remove' : 'add'](...classesToTokens(swiper.params.scrollbar.lockClass));\n }\n }\n function destroy() {\n const params = swiper.params.scrollbar;\n const el = swiper.scrollbar.el;\n if (el) {\n el.classList.remove(...classesToTokens(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass));\n }\n disableDraggable();\n }\n on('init', () => {\n if (swiper.params.scrollbar.enabled === false) {\n // eslint-disable-next-line\n disable();\n } else {\n init();\n updateSize();\n setTranslate();\n }\n });\n on('update resize observerUpdate lock unlock', () => {\n updateSize();\n });\n on('setTranslate', () => {\n setTranslate();\n });\n on('setTransition', (_s, duration) => {\n setTransition(duration);\n });\n on('enable disable', () => {\n const {\n el\n } = swiper.scrollbar;\n if (el) {\n el.classList[swiper.enabled ? 'remove' : 'add'](...classesToTokens(swiper.params.scrollbar.lockClass));\n }\n });\n on('destroy', () => {\n destroy();\n });\n const enable = () => {\n swiper.el.classList.remove(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));\n if (swiper.scrollbar.el) {\n swiper.scrollbar.el.classList.remove(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));\n }\n init();\n updateSize();\n setTranslate();\n };\n const disable = () => {\n swiper.el.classList.add(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));\n if (swiper.scrollbar.el) {\n swiper.scrollbar.el.classList.add(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));\n }\n destroy();\n };\n Object.assign(swiper.scrollbar, {\n enable,\n disable,\n updateSize,\n setTranslate,\n init,\n destroy\n });\n}\n\nexport { Scrollbar as default };\n","import { e as elementChildren } from '../shared/utils.mjs';\n\nfunction Parallax(_ref) {\n let {\n swiper,\n extendParams,\n on\n } = _ref;\n extendParams({\n parallax: {\n enabled: false\n }\n });\n const elementsSelector = '[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]';\n const setTransform = (el, progress) => {\n const {\n rtl\n } = swiper;\n const rtlFactor = rtl ? -1 : 1;\n const p = el.getAttribute('data-swiper-parallax') || '0';\n let x = el.getAttribute('data-swiper-parallax-x');\n let y = el.getAttribute('data-swiper-parallax-y');\n const scale = el.getAttribute('data-swiper-parallax-scale');\n const opacity = el.getAttribute('data-swiper-parallax-opacity');\n const rotate = el.getAttribute('data-swiper-parallax-rotate');\n if (x || y) {\n x = x || '0';\n y = y || '0';\n } else if (swiper.isHorizontal()) {\n x = p;\n y = '0';\n } else {\n y = p;\n x = '0';\n }\n if (x.indexOf('%') >= 0) {\n x = `${parseInt(x, 10) * progress * rtlFactor}%`;\n } else {\n x = `${x * progress * rtlFactor}px`;\n }\n if (y.indexOf('%') >= 0) {\n y = `${parseInt(y, 10) * progress}%`;\n } else {\n y = `${y * progress}px`;\n }\n if (typeof opacity !== 'undefined' && opacity !== null) {\n const currentOpacity = opacity - (opacity - 1) * (1 - Math.abs(progress));\n el.style.opacity = currentOpacity;\n }\n let transform = `translate3d(${x}, ${y}, 0px)`;\n if (typeof scale !== 'undefined' && scale !== null) {\n const currentScale = scale - (scale - 1) * (1 - Math.abs(progress));\n transform += ` scale(${currentScale})`;\n }\n if (rotate && typeof rotate !== 'undefined' && rotate !== null) {\n const currentRotate = rotate * progress * -1;\n transform += ` rotate(${currentRotate}deg)`;\n }\n el.style.transform = transform;\n };\n const setTranslate = () => {\n const {\n el,\n slides,\n progress,\n snapGrid,\n isElement\n } = swiper;\n const elements = elementChildren(el, elementsSelector);\n if (swiper.isElement) {\n elements.push(...elementChildren(swiper.hostEl, elementsSelector));\n }\n elements.forEach(subEl => {\n setTransform(subEl, progress);\n });\n slides.forEach((slideEl, slideIndex) => {\n let slideProgress = slideEl.progress;\n if (swiper.params.slidesPerGroup > 1 && swiper.params.slidesPerView !== 'auto') {\n slideProgress += Math.ceil(slideIndex / 2) - progress * (snapGrid.length - 1);\n }\n slideProgress = Math.min(Math.max(slideProgress, -1), 1);\n slideEl.querySelectorAll(`${elementsSelector}, [data-swiper-parallax-rotate]`).forEach(subEl => {\n setTransform(subEl, slideProgress);\n });\n });\n };\n const setTransition = function (duration) {\n if (duration === void 0) {\n duration = swiper.params.speed;\n }\n const {\n el,\n hostEl\n } = swiper;\n const elements = [...el.querySelectorAll(elementsSelector)];\n if (swiper.isElement) {\n elements.push(...hostEl.querySelectorAll(elementsSelector));\n }\n elements.forEach(parallaxEl => {\n let parallaxDuration = parseInt(parallaxEl.getAttribute('data-swiper-parallax-duration'), 10) || duration;\n if (duration === 0) parallaxDuration = 0;\n parallaxEl.style.transitionDuration = `${parallaxDuration}ms`;\n });\n };\n on('beforeInit', () => {\n if (!swiper.params.parallax.enabled) return;\n swiper.params.watchSlidesProgress = true;\n swiper.originalParams.watchSlidesProgress = true;\n });\n on('init', () => {\n if (!swiper.params.parallax.enabled) return;\n setTranslate();\n });\n on('setTranslate', () => {\n if (!swiper.params.parallax.enabled) return;\n setTranslate();\n });\n on('setTransition', (_swiper, duration) => {\n if (!swiper.params.parallax.enabled) return;\n setTransition(duration);\n });\n}\n\nexport { Parallax as default };\n","import { a as getWindow } from '../shared/ssr-window.esm.mjs';\nimport { e as elementChildren, a as elementParents, b as elementOffset, i as getTranslate } from '../shared/utils.mjs';\n\nfunction Zoom(_ref) {\n let {\n swiper,\n extendParams,\n on,\n emit\n } = _ref;\n const window = getWindow();\n extendParams({\n zoom: {\n enabled: false,\n maxRatio: 3,\n minRatio: 1,\n toggle: true,\n containerClass: 'swiper-zoom-container',\n zoomedSlideClass: 'swiper-slide-zoomed'\n }\n });\n swiper.zoom = {\n enabled: false\n };\n let currentScale = 1;\n let isScaling = false;\n let fakeGestureTouched;\n let fakeGestureMoved;\n const evCache = [];\n const gesture = {\n originX: 0,\n originY: 0,\n slideEl: undefined,\n slideWidth: undefined,\n slideHeight: undefined,\n imageEl: undefined,\n imageWrapEl: undefined,\n maxRatio: 3\n };\n const image = {\n isTouched: undefined,\n isMoved: undefined,\n currentX: undefined,\n currentY: undefined,\n minX: undefined,\n minY: undefined,\n maxX: undefined,\n maxY: undefined,\n width: undefined,\n height: undefined,\n startX: undefined,\n startY: undefined,\n touchesStart: {},\n touchesCurrent: {}\n };\n const velocity = {\n x: undefined,\n y: undefined,\n prevPositionX: undefined,\n prevPositionY: undefined,\n prevTime: undefined\n };\n let scale = 1;\n Object.defineProperty(swiper.zoom, 'scale', {\n get() {\n return scale;\n },\n set(value) {\n if (scale !== value) {\n const imageEl = gesture.imageEl;\n const slideEl = gesture.slideEl;\n emit('zoomChange', value, imageEl, slideEl);\n }\n scale = value;\n }\n });\n function getDistanceBetweenTouches() {\n if (evCache.length < 2) return 1;\n const x1 = evCache[0].pageX;\n const y1 = evCache[0].pageY;\n const x2 = evCache[1].pageX;\n const y2 = evCache[1].pageY;\n const distance = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);\n return distance;\n }\n function getScaleOrigin() {\n if (evCache.length < 2) return {\n x: null,\n y: null\n };\n const box = gesture.imageEl.getBoundingClientRect();\n return [(evCache[0].pageX + (evCache[1].pageX - evCache[0].pageX) / 2 - box.x - window.scrollX) / currentScale, (evCache[0].pageY + (evCache[1].pageY - evCache[0].pageY) / 2 - box.y - window.scrollY) / currentScale];\n }\n function getSlideSelector() {\n return swiper.isElement ? `swiper-slide` : `.${swiper.params.slideClass}`;\n }\n function eventWithinSlide(e) {\n const slideSelector = getSlideSelector();\n if (e.target.matches(slideSelector)) return true;\n if (swiper.slides.filter(slideEl => slideEl.contains(e.target)).length > 0) return true;\n return false;\n }\n function eventWithinZoomContainer(e) {\n const selector = `.${swiper.params.zoom.containerClass}`;\n if (e.target.matches(selector)) return true;\n if ([...swiper.hostEl.querySelectorAll(selector)].filter(containerEl => containerEl.contains(e.target)).length > 0) return true;\n return false;\n }\n\n // Events\n function onGestureStart(e) {\n if (e.pointerType === 'mouse') {\n evCache.splice(0, evCache.length);\n }\n if (!eventWithinSlide(e)) return;\n const params = swiper.params.zoom;\n fakeGestureTouched = false;\n fakeGestureMoved = false;\n evCache.push(e);\n if (evCache.length < 2) {\n return;\n }\n fakeGestureTouched = true;\n gesture.scaleStart = getDistanceBetweenTouches();\n if (!gesture.slideEl) {\n gesture.slideEl = e.target.closest(`.${swiper.params.slideClass}, swiper-slide`);\n if (!gesture.slideEl) gesture.slideEl = swiper.slides[swiper.activeIndex];\n let imageEl = gesture.slideEl.querySelector(`.${params.containerClass}`);\n if (imageEl) {\n imageEl = imageEl.querySelectorAll('picture, img, svg, canvas, .swiper-zoom-target')[0];\n }\n gesture.imageEl = imageEl;\n if (imageEl) {\n gesture.imageWrapEl = elementParents(gesture.imageEl, `.${params.containerClass}`)[0];\n } else {\n gesture.imageWrapEl = undefined;\n }\n if (!gesture.imageWrapEl) {\n gesture.imageEl = undefined;\n return;\n }\n gesture.maxRatio = gesture.imageWrapEl.getAttribute('data-swiper-zoom') || params.maxRatio;\n }\n if (gesture.imageEl) {\n const [originX, originY] = getScaleOrigin();\n gesture.originX = originX;\n gesture.originY = originY;\n gesture.imageEl.style.transitionDuration = '0ms';\n }\n isScaling = true;\n }\n function onGestureChange(e) {\n if (!eventWithinSlide(e)) return;\n const params = swiper.params.zoom;\n const zoom = swiper.zoom;\n const pointerIndex = evCache.findIndex(cachedEv => cachedEv.pointerId === e.pointerId);\n if (pointerIndex >= 0) evCache[pointerIndex] = e;\n if (evCache.length < 2) {\n return;\n }\n fakeGestureMoved = true;\n gesture.scaleMove = getDistanceBetweenTouches();\n if (!gesture.imageEl) {\n return;\n }\n zoom.scale = gesture.scaleMove / gesture.scaleStart * currentScale;\n if (zoom.scale > gesture.maxRatio) {\n zoom.scale = gesture.maxRatio - 1 + (zoom.scale - gesture.maxRatio + 1) ** 0.5;\n }\n if (zoom.scale < params.minRatio) {\n zoom.scale = params.minRatio + 1 - (params.minRatio - zoom.scale + 1) ** 0.5;\n }\n gesture.imageEl.style.transform = `translate3d(0,0,0) scale(${zoom.scale})`;\n }\n function onGestureEnd(e) {\n if (!eventWithinSlide(e)) return;\n if (e.pointerType === 'mouse' && e.type === 'pointerout') return;\n const params = swiper.params.zoom;\n const zoom = swiper.zoom;\n const pointerIndex = evCache.findIndex(cachedEv => cachedEv.pointerId === e.pointerId);\n if (pointerIndex >= 0) evCache.splice(pointerIndex, 1);\n if (!fakeGestureTouched || !fakeGestureMoved) {\n return;\n }\n fakeGestureTouched = false;\n fakeGestureMoved = false;\n if (!gesture.imageEl) return;\n zoom.scale = Math.max(Math.min(zoom.scale, gesture.maxRatio), params.minRatio);\n gesture.imageEl.style.transitionDuration = `${swiper.params.speed}ms`;\n gesture.imageEl.style.transform = `translate3d(0,0,0) scale(${zoom.scale})`;\n currentScale = zoom.scale;\n isScaling = false;\n if (zoom.scale > 1 && gesture.slideEl) {\n gesture.slideEl.classList.add(`${params.zoomedSlideClass}`);\n } else if (zoom.scale <= 1 && gesture.slideEl) {\n gesture.slideEl.classList.remove(`${params.zoomedSlideClass}`);\n }\n if (zoom.scale === 1) {\n gesture.originX = 0;\n gesture.originY = 0;\n gesture.slideEl = undefined;\n }\n }\n function onTouchStart(e) {\n const device = swiper.device;\n if (!gesture.imageEl) return;\n if (image.isTouched) return;\n if (device.android && e.cancelable) e.preventDefault();\n image.isTouched = true;\n const event = evCache.length > 0 ? evCache[0] : e;\n image.touchesStart.x = event.pageX;\n image.touchesStart.y = event.pageY;\n }\n function onTouchMove(e) {\n if (!eventWithinSlide(e) || !eventWithinZoomContainer(e)) return;\n const zoom = swiper.zoom;\n if (!gesture.imageEl) return;\n if (!image.isTouched || !gesture.slideEl) return;\n if (!image.isMoved) {\n image.width = gesture.imageEl.offsetWidth;\n image.height = gesture.imageEl.offsetHeight;\n image.startX = getTranslate(gesture.imageWrapEl, 'x') || 0;\n image.startY = getTranslate(gesture.imageWrapEl, 'y') || 0;\n gesture.slideWidth = gesture.slideEl.offsetWidth;\n gesture.slideHeight = gesture.slideEl.offsetHeight;\n gesture.imageWrapEl.style.transitionDuration = '0ms';\n }\n // Define if we need image drag\n const scaledWidth = image.width * zoom.scale;\n const scaledHeight = image.height * zoom.scale;\n if (scaledWidth < gesture.slideWidth && scaledHeight < gesture.slideHeight) return;\n image.minX = Math.min(gesture.slideWidth / 2 - scaledWidth / 2, 0);\n image.maxX = -image.minX;\n image.minY = Math.min(gesture.slideHeight / 2 - scaledHeight / 2, 0);\n image.maxY = -image.minY;\n image.touchesCurrent.x = evCache.length > 0 ? evCache[0].pageX : e.pageX;\n image.touchesCurrent.y = evCache.length > 0 ? evCache[0].pageY : e.pageY;\n const touchesDiff = Math.max(Math.abs(image.touchesCurrent.x - image.touchesStart.x), Math.abs(image.touchesCurrent.y - image.touchesStart.y));\n if (touchesDiff > 5) {\n swiper.allowClick = false;\n }\n if (!image.isMoved && !isScaling) {\n if (swiper.isHorizontal() && (Math.floor(image.minX) === Math.floor(image.startX) && image.touchesCurrent.x < image.touchesStart.x || Math.floor(image.maxX) === Math.floor(image.startX) && image.touchesCurrent.x > image.touchesStart.x)) {\n image.isTouched = false;\n return;\n }\n if (!swiper.isHorizontal() && (Math.floor(image.minY) === Math.floor(image.startY) && image.touchesCurrent.y < image.touchesStart.y || Math.floor(image.maxY) === Math.floor(image.startY) && image.touchesCurrent.y > image.touchesStart.y)) {\n image.isTouched = false;\n return;\n }\n }\n if (e.cancelable) {\n e.preventDefault();\n }\n e.stopPropagation();\n image.isMoved = true;\n const scaleRatio = (zoom.scale - currentScale) / (gesture.maxRatio - swiper.params.zoom.minRatio);\n const {\n originX,\n originY\n } = gesture;\n image.currentX = image.touchesCurrent.x - image.touchesStart.x + image.startX + scaleRatio * (image.width - originX * 2);\n image.currentY = image.touchesCurrent.y - image.touchesStart.y + image.startY + scaleRatio * (image.height - originY * 2);\n if (image.currentX < image.minX) {\n image.currentX = image.minX + 1 - (image.minX - image.currentX + 1) ** 0.8;\n }\n if (image.currentX > image.maxX) {\n image.currentX = image.maxX - 1 + (image.currentX - image.maxX + 1) ** 0.8;\n }\n if (image.currentY < image.minY) {\n image.currentY = image.minY + 1 - (image.minY - image.currentY + 1) ** 0.8;\n }\n if (image.currentY > image.maxY) {\n image.currentY = image.maxY - 1 + (image.currentY - image.maxY + 1) ** 0.8;\n }\n\n // Velocity\n if (!velocity.prevPositionX) velocity.prevPositionX = image.touchesCurrent.x;\n if (!velocity.prevPositionY) velocity.prevPositionY = image.touchesCurrent.y;\n if (!velocity.prevTime) velocity.prevTime = Date.now();\n velocity.x = (image.touchesCurrent.x - velocity.prevPositionX) / (Date.now() - velocity.prevTime) / 2;\n velocity.y = (image.touchesCurrent.y - velocity.prevPositionY) / (Date.now() - velocity.prevTime) / 2;\n if (Math.abs(image.touchesCurrent.x - velocity.prevPositionX) < 2) velocity.x = 0;\n if (Math.abs(image.touchesCurrent.y - velocity.prevPositionY) < 2) velocity.y = 0;\n velocity.prevPositionX = image.touchesCurrent.x;\n velocity.prevPositionY = image.touchesCurrent.y;\n velocity.prevTime = Date.now();\n gesture.imageWrapEl.style.transform = `translate3d(${image.currentX}px, ${image.currentY}px,0)`;\n }\n function onTouchEnd() {\n const zoom = swiper.zoom;\n if (!gesture.imageEl) return;\n if (!image.isTouched || !image.isMoved) {\n image.isTouched = false;\n image.isMoved = false;\n return;\n }\n image.isTouched = false;\n image.isMoved = false;\n let momentumDurationX = 300;\n let momentumDurationY = 300;\n const momentumDistanceX = velocity.x * momentumDurationX;\n const newPositionX = image.currentX + momentumDistanceX;\n const momentumDistanceY = velocity.y * momentumDurationY;\n const newPositionY = image.currentY + momentumDistanceY;\n\n // Fix duration\n if (velocity.x !== 0) momentumDurationX = Math.abs((newPositionX - image.currentX) / velocity.x);\n if (velocity.y !== 0) momentumDurationY = Math.abs((newPositionY - image.currentY) / velocity.y);\n const momentumDuration = Math.max(momentumDurationX, momentumDurationY);\n image.currentX = newPositionX;\n image.currentY = newPositionY;\n // Define if we need image drag\n const scaledWidth = image.width * zoom.scale;\n const scaledHeight = image.height * zoom.scale;\n image.minX = Math.min(gesture.slideWidth / 2 - scaledWidth / 2, 0);\n image.maxX = -image.minX;\n image.minY = Math.min(gesture.slideHeight / 2 - scaledHeight / 2, 0);\n image.maxY = -image.minY;\n image.currentX = Math.max(Math.min(image.currentX, image.maxX), image.minX);\n image.currentY = Math.max(Math.min(image.currentY, image.maxY), image.minY);\n gesture.imageWrapEl.style.transitionDuration = `${momentumDuration}ms`;\n gesture.imageWrapEl.style.transform = `translate3d(${image.currentX}px, ${image.currentY}px,0)`;\n }\n function onTransitionEnd() {\n const zoom = swiper.zoom;\n if (gesture.slideEl && swiper.activeIndex !== swiper.slides.indexOf(gesture.slideEl)) {\n if (gesture.imageEl) {\n gesture.imageEl.style.transform = 'translate3d(0,0,0) scale(1)';\n }\n if (gesture.imageWrapEl) {\n gesture.imageWrapEl.style.transform = 'translate3d(0,0,0)';\n }\n gesture.slideEl.classList.remove(`${swiper.params.zoom.zoomedSlideClass}`);\n zoom.scale = 1;\n currentScale = 1;\n gesture.slideEl = undefined;\n gesture.imageEl = undefined;\n gesture.imageWrapEl = undefined;\n gesture.originX = 0;\n gesture.originY = 0;\n }\n }\n function zoomIn(e) {\n const zoom = swiper.zoom;\n const params = swiper.params.zoom;\n if (!gesture.slideEl) {\n if (e && e.target) {\n gesture.slideEl = e.target.closest(`.${swiper.params.slideClass}, swiper-slide`);\n }\n if (!gesture.slideEl) {\n if (swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual) {\n gesture.slideEl = elementChildren(swiper.slidesEl, `.${swiper.params.slideActiveClass}`)[0];\n } else {\n gesture.slideEl = swiper.slides[swiper.activeIndex];\n }\n }\n let imageEl = gesture.slideEl.querySelector(`.${params.containerClass}`);\n if (imageEl) {\n imageEl = imageEl.querySelectorAll('picture, img, svg, canvas, .swiper-zoom-target')[0];\n }\n gesture.imageEl = imageEl;\n if (imageEl) {\n gesture.imageWrapEl = elementParents(gesture.imageEl, `.${params.containerClass}`)[0];\n } else {\n gesture.imageWrapEl = undefined;\n }\n }\n if (!gesture.imageEl || !gesture.imageWrapEl) return;\n if (swiper.params.cssMode) {\n swiper.wrapperEl.style.overflow = 'hidden';\n swiper.wrapperEl.style.touchAction = 'none';\n }\n gesture.slideEl.classList.add(`${params.zoomedSlideClass}`);\n let touchX;\n let touchY;\n let offsetX;\n let offsetY;\n let diffX;\n let diffY;\n let translateX;\n let translateY;\n let imageWidth;\n let imageHeight;\n let scaledWidth;\n let scaledHeight;\n let translateMinX;\n let translateMinY;\n let translateMaxX;\n let translateMaxY;\n let slideWidth;\n let slideHeight;\n if (typeof image.touchesStart.x === 'undefined' && e) {\n touchX = e.pageX;\n touchY = e.pageY;\n } else {\n touchX = image.touchesStart.x;\n touchY = image.touchesStart.y;\n }\n const forceZoomRatio = typeof e === 'number' ? e : null;\n if (currentScale === 1 && forceZoomRatio) {\n touchX = undefined;\n touchY = undefined;\n }\n zoom.scale = forceZoomRatio || gesture.imageWrapEl.getAttribute('data-swiper-zoom') || params.maxRatio;\n currentScale = forceZoomRatio || gesture.imageWrapEl.getAttribute('data-swiper-zoom') || params.maxRatio;\n if (e && !(currentScale === 1 && forceZoomRatio)) {\n slideWidth = gesture.slideEl.offsetWidth;\n slideHeight = gesture.slideEl.offsetHeight;\n offsetX = elementOffset(gesture.slideEl).left + window.scrollX;\n offsetY = elementOffset(gesture.slideEl).top + window.scrollY;\n diffX = offsetX + slideWidth / 2 - touchX;\n diffY = offsetY + slideHeight / 2 - touchY;\n imageWidth = gesture.imageEl.offsetWidth;\n imageHeight = gesture.imageEl.offsetHeight;\n scaledWidth = imageWidth * zoom.scale;\n scaledHeight = imageHeight * zoom.scale;\n translateMinX = Math.min(slideWidth / 2 - scaledWidth / 2, 0);\n translateMinY = Math.min(slideHeight / 2 - scaledHeight / 2, 0);\n translateMaxX = -translateMinX;\n translateMaxY = -translateMinY;\n translateX = diffX * zoom.scale;\n translateY = diffY * zoom.scale;\n if (translateX < translateMinX) {\n translateX = translateMinX;\n }\n if (translateX > translateMaxX) {\n translateX = translateMaxX;\n }\n if (translateY < translateMinY) {\n translateY = translateMinY;\n }\n if (translateY > translateMaxY) {\n translateY = translateMaxY;\n }\n } else {\n translateX = 0;\n translateY = 0;\n }\n if (forceZoomRatio && zoom.scale === 1) {\n gesture.originX = 0;\n gesture.originY = 0;\n }\n gesture.imageWrapEl.style.transitionDuration = '300ms';\n gesture.imageWrapEl.style.transform = `translate3d(${translateX}px, ${translateY}px,0)`;\n gesture.imageEl.style.transitionDuration = '300ms';\n gesture.imageEl.style.transform = `translate3d(0,0,0) scale(${zoom.scale})`;\n }\n function zoomOut() {\n const zoom = swiper.zoom;\n const params = swiper.params.zoom;\n if (!gesture.slideEl) {\n if (swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual) {\n gesture.slideEl = elementChildren(swiper.slidesEl, `.${swiper.params.slideActiveClass}`)[0];\n } else {\n gesture.slideEl = swiper.slides[swiper.activeIndex];\n }\n let imageEl = gesture.slideEl.querySelector(`.${params.containerClass}`);\n if (imageEl) {\n imageEl = imageEl.querySelectorAll('picture, img, svg, canvas, .swiper-zoom-target')[0];\n }\n gesture.imageEl = imageEl;\n if (imageEl) {\n gesture.imageWrapEl = elementParents(gesture.imageEl, `.${params.containerClass}`)[0];\n } else {\n gesture.imageWrapEl = undefined;\n }\n }\n if (!gesture.imageEl || !gesture.imageWrapEl) return;\n if (swiper.params.cssMode) {\n swiper.wrapperEl.style.overflow = '';\n swiper.wrapperEl.style.touchAction = '';\n }\n zoom.scale = 1;\n currentScale = 1;\n gesture.imageWrapEl.style.transitionDuration = '300ms';\n gesture.imageWrapEl.style.transform = 'translate3d(0,0,0)';\n gesture.imageEl.style.transitionDuration = '300ms';\n gesture.imageEl.style.transform = 'translate3d(0,0,0) scale(1)';\n gesture.slideEl.classList.remove(`${params.zoomedSlideClass}`);\n gesture.slideEl = undefined;\n gesture.originX = 0;\n gesture.originY = 0;\n }\n\n // Toggle Zoom\n function zoomToggle(e) {\n const zoom = swiper.zoom;\n if (zoom.scale && zoom.scale !== 1) {\n // Zoom Out\n zoomOut();\n } else {\n // Zoom In\n zoomIn(e);\n }\n }\n function getListeners() {\n const passiveListener = swiper.params.passiveListeners ? {\n passive: true,\n capture: false\n } : false;\n const activeListenerWithCapture = swiper.params.passiveListeners ? {\n passive: false,\n capture: true\n } : true;\n return {\n passiveListener,\n activeListenerWithCapture\n };\n }\n\n // Attach/Detach Events\n function enable() {\n const zoom = swiper.zoom;\n if (zoom.enabled) return;\n zoom.enabled = true;\n const {\n passiveListener,\n activeListenerWithCapture\n } = getListeners();\n\n // Scale image\n swiper.wrapperEl.addEventListener('pointerdown', onGestureStart, passiveListener);\n swiper.wrapperEl.addEventListener('pointermove', onGestureChange, activeListenerWithCapture);\n ['pointerup', 'pointercancel', 'pointerout'].forEach(eventName => {\n swiper.wrapperEl.addEventListener(eventName, onGestureEnd, passiveListener);\n });\n\n // Move image\n swiper.wrapperEl.addEventListener('pointermove', onTouchMove, activeListenerWithCapture);\n }\n function disable() {\n const zoom = swiper.zoom;\n if (!zoom.enabled) return;\n zoom.enabled = false;\n const {\n passiveListener,\n activeListenerWithCapture\n } = getListeners();\n\n // Scale image\n swiper.wrapperEl.removeEventListener('pointerdown', onGestureStart, passiveListener);\n swiper.wrapperEl.removeEventListener('pointermove', onGestureChange, activeListenerWithCapture);\n ['pointerup', 'pointercancel', 'pointerout'].forEach(eventName => {\n swiper.wrapperEl.removeEventListener(eventName, onGestureEnd, passiveListener);\n });\n\n // Move image\n swiper.wrapperEl.removeEventListener('pointermove', onTouchMove, activeListenerWithCapture);\n }\n on('init', () => {\n if (swiper.params.zoom.enabled) {\n enable();\n }\n });\n on('destroy', () => {\n disable();\n });\n on('touchStart', (_s, e) => {\n if (!swiper.zoom.enabled) return;\n onTouchStart(e);\n });\n on('touchEnd', (_s, e) => {\n if (!swiper.zoom.enabled) return;\n onTouchEnd();\n });\n on('doubleTap', (_s, e) => {\n if (!swiper.animating && swiper.params.zoom.enabled && swiper.zoom.enabled && swiper.params.zoom.toggle) {\n zoomToggle(e);\n }\n });\n on('transitionEnd', () => {\n if (swiper.zoom.enabled && swiper.params.zoom.enabled) {\n onTransitionEnd();\n }\n });\n on('slideChange', () => {\n if (swiper.zoom.enabled && swiper.params.zoom.enabled && swiper.params.cssMode) {\n onTransitionEnd();\n }\n });\n Object.assign(swiper.zoom, {\n enable,\n disable,\n in: zoomIn,\n out: zoomOut,\n toggle: zoomToggle\n });\n}\n\nexport { Zoom as default };\n","import { n as nextTick, j as elementTransitionEnd } from '../shared/utils.mjs';\n\n/* eslint no-bitwise: [\"error\", { \"allow\": [\">>\"] }] */\nfunction Controller(_ref) {\n let {\n swiper,\n extendParams,\n on\n } = _ref;\n extendParams({\n controller: {\n control: undefined,\n inverse: false,\n by: 'slide' // or 'container'\n }\n });\n\n swiper.controller = {\n control: undefined\n };\n function LinearSpline(x, y) {\n const binarySearch = function search() {\n let maxIndex;\n let minIndex;\n let guess;\n return (array, val) => {\n minIndex = -1;\n maxIndex = array.length;\n while (maxIndex - minIndex > 1) {\n guess = maxIndex + minIndex >> 1;\n if (array[guess] <= val) {\n minIndex = guess;\n } else {\n maxIndex = guess;\n }\n }\n return maxIndex;\n };\n }();\n this.x = x;\n this.y = y;\n this.lastIndex = x.length - 1;\n // Given an x value (x2), return the expected y2 value:\n // (x1,y1) is the known point before given value,\n // (x3,y3) is the known point after given value.\n let i1;\n let i3;\n this.interpolate = function interpolate(x2) {\n if (!x2) return 0;\n\n // Get the indexes of x1 and x3 (the array indexes before and after given x2):\n i3 = binarySearch(this.x, x2);\n i1 = i3 - 1;\n\n // We have our indexes i1 & i3, so we can calculate already:\n // y2 := ((x2−x1) × (y3−y1)) ÷ (x3−x1) + y1\n return (x2 - this.x[i1]) * (this.y[i3] - this.y[i1]) / (this.x[i3] - this.x[i1]) + this.y[i1];\n };\n return this;\n }\n function getInterpolateFunction(c) {\n swiper.controller.spline = swiper.params.loop ? new LinearSpline(swiper.slidesGrid, c.slidesGrid) : new LinearSpline(swiper.snapGrid, c.snapGrid);\n }\n function setTranslate(_t, byController) {\n const controlled = swiper.controller.control;\n let multiplier;\n let controlledTranslate;\n const Swiper = swiper.constructor;\n function setControlledTranslate(c) {\n if (c.destroyed) return;\n\n // this will create an Interpolate function based on the snapGrids\n // x is the Grid of the scrolled scroller and y will be the controlled scroller\n // it makes sense to create this only once and recall it for the interpolation\n // the function does a lot of value caching for performance\n const translate = swiper.rtlTranslate ? -swiper.translate : swiper.translate;\n if (swiper.params.controller.by === 'slide') {\n getInterpolateFunction(c);\n // i am not sure why the values have to be multiplicated this way, tried to invert the snapGrid\n // but it did not work out\n controlledTranslate = -swiper.controller.spline.interpolate(-translate);\n }\n if (!controlledTranslate || swiper.params.controller.by === 'container') {\n multiplier = (c.maxTranslate() - c.minTranslate()) / (swiper.maxTranslate() - swiper.minTranslate());\n if (Number.isNaN(multiplier) || !Number.isFinite(multiplier)) {\n multiplier = 1;\n }\n controlledTranslate = (translate - swiper.minTranslate()) * multiplier + c.minTranslate();\n }\n if (swiper.params.controller.inverse) {\n controlledTranslate = c.maxTranslate() - controlledTranslate;\n }\n c.updateProgress(controlledTranslate);\n c.setTranslate(controlledTranslate, swiper);\n c.updateActiveIndex();\n c.updateSlidesClasses();\n }\n if (Array.isArray(controlled)) {\n for (let i = 0; i < controlled.length; i += 1) {\n if (controlled[i] !== byController && controlled[i] instanceof Swiper) {\n setControlledTranslate(controlled[i]);\n }\n }\n } else if (controlled instanceof Swiper && byController !== controlled) {\n setControlledTranslate(controlled);\n }\n }\n function setTransition(duration, byController) {\n const Swiper = swiper.constructor;\n const controlled = swiper.controller.control;\n let i;\n function setControlledTransition(c) {\n if (c.destroyed) return;\n c.setTransition(duration, swiper);\n if (duration !== 0) {\n c.transitionStart();\n if (c.params.autoHeight) {\n nextTick(() => {\n c.updateAutoHeight();\n });\n }\n elementTransitionEnd(c.wrapperEl, () => {\n if (!controlled) return;\n c.transitionEnd();\n });\n }\n }\n if (Array.isArray(controlled)) {\n for (i = 0; i < controlled.length; i += 1) {\n if (controlled[i] !== byController && controlled[i] instanceof Swiper) {\n setControlledTransition(controlled[i]);\n }\n }\n } else if (controlled instanceof Swiper && byController !== controlled) {\n setControlledTransition(controlled);\n }\n }\n function removeSpline() {\n if (!swiper.controller.control) return;\n if (swiper.controller.spline) {\n swiper.controller.spline = undefined;\n delete swiper.controller.spline;\n }\n }\n on('beforeInit', () => {\n if (typeof window !== 'undefined' && (\n // eslint-disable-line\n typeof swiper.params.controller.control === 'string' || swiper.params.controller.control instanceof HTMLElement)) {\n const controlElement = document.querySelector(swiper.params.controller.control);\n if (controlElement && controlElement.swiper) {\n swiper.controller.control = controlElement.swiper;\n } else if (controlElement) {\n const onControllerSwiper = e => {\n swiper.controller.control = e.detail[0];\n swiper.update();\n controlElement.removeEventListener('init', onControllerSwiper);\n };\n controlElement.addEventListener('init', onControllerSwiper);\n }\n return;\n }\n swiper.controller.control = swiper.params.controller.control;\n });\n on('update', () => {\n removeSpline();\n });\n on('resize', () => {\n removeSpline();\n });\n on('observerUpdate', () => {\n removeSpline();\n });\n on('setTranslate', (_s, translate, byController) => {\n if (!swiper.controller.control || swiper.controller.control.destroyed) return;\n swiper.controller.setTranslate(translate, byController);\n });\n on('setTransition', (_s, duration, byController) => {\n if (!swiper.controller.control || swiper.controller.control.destroyed) return;\n swiper.controller.setTransition(duration, byController);\n });\n Object.assign(swiper.controller, {\n setTranslate,\n setTransition\n });\n}\n\nexport { Controller as default };\n","import { c as classesToSelector } from '../shared/classes-to-selector.mjs';\nimport { c as createElement, g as elementIndex } from '../shared/utils.mjs';\n\nfunction A11y(_ref) {\n let {\n swiper,\n extendParams,\n on\n } = _ref;\n extendParams({\n a11y: {\n enabled: true,\n notificationClass: 'swiper-notification',\n prevSlideMessage: 'Previous slide',\n nextSlideMessage: 'Next slide',\n firstSlideMessage: 'This is the first slide',\n lastSlideMessage: 'This is the last slide',\n paginationBulletMessage: 'Go to slide {{index}}',\n slideLabelMessage: '{{index}} / {{slidesLength}}',\n containerMessage: null,\n containerRoleDescriptionMessage: null,\n itemRoleDescriptionMessage: null,\n slideRole: 'group',\n id: null\n }\n });\n swiper.a11y = {\n clicked: false\n };\n let liveRegion = null;\n function notify(message) {\n const notification = liveRegion;\n if (notification.length === 0) return;\n notification.innerHTML = '';\n notification.innerHTML = message;\n }\n const makeElementsArray = el => (Array.isArray(el) ? el : [el]).filter(e => !!e);\n function getRandomNumber(size) {\n if (size === void 0) {\n size = 16;\n }\n const randomChar = () => Math.round(16 * Math.random()).toString(16);\n return 'x'.repeat(size).replace(/x/g, randomChar);\n }\n function makeElFocusable(el) {\n el = makeElementsArray(el);\n el.forEach(subEl => {\n subEl.setAttribute('tabIndex', '0');\n });\n }\n function makeElNotFocusable(el) {\n el = makeElementsArray(el);\n el.forEach(subEl => {\n subEl.setAttribute('tabIndex', '-1');\n });\n }\n function addElRole(el, role) {\n el = makeElementsArray(el);\n el.forEach(subEl => {\n subEl.setAttribute('role', role);\n });\n }\n function addElRoleDescription(el, description) {\n el = makeElementsArray(el);\n el.forEach(subEl => {\n subEl.setAttribute('aria-roledescription', description);\n });\n }\n function addElControls(el, controls) {\n el = makeElementsArray(el);\n el.forEach(subEl => {\n subEl.setAttribute('aria-controls', controls);\n });\n }\n function addElLabel(el, label) {\n el = makeElementsArray(el);\n el.forEach(subEl => {\n subEl.setAttribute('aria-label', label);\n });\n }\n function addElId(el, id) {\n el = makeElementsArray(el);\n el.forEach(subEl => {\n subEl.setAttribute('id', id);\n });\n }\n function addElLive(el, live) {\n el = makeElementsArray(el);\n el.forEach(subEl => {\n subEl.setAttribute('aria-live', live);\n });\n }\n function disableEl(el) {\n el = makeElementsArray(el);\n el.forEach(subEl => {\n subEl.setAttribute('aria-disabled', true);\n });\n }\n function enableEl(el) {\n el = makeElementsArray(el);\n el.forEach(subEl => {\n subEl.setAttribute('aria-disabled', false);\n });\n }\n function onEnterOrSpaceKey(e) {\n if (e.keyCode !== 13 && e.keyCode !== 32) return;\n const params = swiper.params.a11y;\n const targetEl = e.target;\n if (swiper.pagination && swiper.pagination.el && (targetEl === swiper.pagination.el || swiper.pagination.el.contains(e.target))) {\n if (!e.target.matches(classesToSelector(swiper.params.pagination.bulletClass))) return;\n }\n if (swiper.navigation && swiper.navigation.nextEl && targetEl === swiper.navigation.nextEl) {\n if (!(swiper.isEnd && !swiper.params.loop)) {\n swiper.slideNext();\n }\n if (swiper.isEnd) {\n notify(params.lastSlideMessage);\n } else {\n notify(params.nextSlideMessage);\n }\n }\n if (swiper.navigation && swiper.navigation.prevEl && targetEl === swiper.navigation.prevEl) {\n if (!(swiper.isBeginning && !swiper.params.loop)) {\n swiper.slidePrev();\n }\n if (swiper.isBeginning) {\n notify(params.firstSlideMessage);\n } else {\n notify(params.prevSlideMessage);\n }\n }\n if (swiper.pagination && targetEl.matches(classesToSelector(swiper.params.pagination.bulletClass))) {\n targetEl.click();\n }\n }\n function updateNavigation() {\n if (swiper.params.loop || swiper.params.rewind || !swiper.navigation) return;\n const {\n nextEl,\n prevEl\n } = swiper.navigation;\n if (prevEl) {\n if (swiper.isBeginning) {\n disableEl(prevEl);\n makeElNotFocusable(prevEl);\n } else {\n enableEl(prevEl);\n makeElFocusable(prevEl);\n }\n }\n if (nextEl) {\n if (swiper.isEnd) {\n disableEl(nextEl);\n makeElNotFocusable(nextEl);\n } else {\n enableEl(nextEl);\n makeElFocusable(nextEl);\n }\n }\n }\n function hasPagination() {\n return swiper.pagination && swiper.pagination.bullets && swiper.pagination.bullets.length;\n }\n function hasClickablePagination() {\n return hasPagination() && swiper.params.pagination.clickable;\n }\n function updatePagination() {\n const params = swiper.params.a11y;\n if (!hasPagination()) return;\n swiper.pagination.bullets.forEach(bulletEl => {\n if (swiper.params.pagination.clickable) {\n makeElFocusable(bulletEl);\n if (!swiper.params.pagination.renderBullet) {\n addElRole(bulletEl, 'button');\n addElLabel(bulletEl, params.paginationBulletMessage.replace(/\\{\\{index\\}\\}/, elementIndex(bulletEl) + 1));\n }\n }\n if (bulletEl.matches(classesToSelector(swiper.params.pagination.bulletActiveClass))) {\n bulletEl.setAttribute('aria-current', 'true');\n } else {\n bulletEl.removeAttribute('aria-current');\n }\n });\n }\n const initNavEl = (el, wrapperId, message) => {\n makeElFocusable(el);\n if (el.tagName !== 'BUTTON') {\n addElRole(el, 'button');\n el.addEventListener('keydown', onEnterOrSpaceKey);\n }\n addElLabel(el, message);\n addElControls(el, wrapperId);\n };\n const handlePointerDown = () => {\n swiper.a11y.clicked = true;\n };\n const handlePointerUp = () => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n if (!swiper.destroyed) {\n swiper.a11y.clicked = false;\n }\n });\n });\n };\n const handleFocus = e => {\n if (swiper.a11y.clicked) return;\n const slideEl = e.target.closest(`.${swiper.params.slideClass}, swiper-slide`);\n if (!slideEl || !swiper.slides.includes(slideEl)) return;\n const isActive = swiper.slides.indexOf(slideEl) === swiper.activeIndex;\n const isVisible = swiper.params.watchSlidesProgress && swiper.visibleSlides && swiper.visibleSlides.includes(slideEl);\n if (isActive || isVisible) return;\n if (e.sourceCapabilities && e.sourceCapabilities.firesTouchEvents) return;\n if (swiper.isHorizontal()) {\n swiper.el.scrollLeft = 0;\n } else {\n swiper.el.scrollTop = 0;\n }\n swiper.slideTo(swiper.slides.indexOf(slideEl), 0);\n };\n const initSlides = () => {\n const params = swiper.params.a11y;\n if (params.itemRoleDescriptionMessage) {\n addElRoleDescription(swiper.slides, params.itemRoleDescriptionMessage);\n }\n if (params.slideRole) {\n addElRole(swiper.slides, params.slideRole);\n }\n const slidesLength = swiper.slides.length;\n if (params.slideLabelMessage) {\n swiper.slides.forEach((slideEl, index) => {\n const slideIndex = swiper.params.loop ? parseInt(slideEl.getAttribute('data-swiper-slide-index'), 10) : index;\n const ariaLabelMessage = params.slideLabelMessage.replace(/\\{\\{index\\}\\}/, slideIndex + 1).replace(/\\{\\{slidesLength\\}\\}/, slidesLength);\n addElLabel(slideEl, ariaLabelMessage);\n });\n }\n };\n const init = () => {\n const params = swiper.params.a11y;\n swiper.el.append(liveRegion);\n\n // Container\n const containerEl = swiper.el;\n if (params.containerRoleDescriptionMessage) {\n addElRoleDescription(containerEl, params.containerRoleDescriptionMessage);\n }\n if (params.containerMessage) {\n addElLabel(containerEl, params.containerMessage);\n }\n\n // Wrapper\n const wrapperEl = swiper.wrapperEl;\n const wrapperId = params.id || wrapperEl.getAttribute('id') || `swiper-wrapper-${getRandomNumber(16)}`;\n const live = swiper.params.autoplay && swiper.params.autoplay.enabled ? 'off' : 'polite';\n addElId(wrapperEl, wrapperId);\n addElLive(wrapperEl, live);\n\n // Slide\n initSlides();\n\n // Navigation\n let {\n nextEl,\n prevEl\n } = swiper.navigation ? swiper.navigation : {};\n nextEl = makeElementsArray(nextEl);\n prevEl = makeElementsArray(prevEl);\n if (nextEl) {\n nextEl.forEach(el => initNavEl(el, wrapperId, params.nextSlideMessage));\n }\n if (prevEl) {\n prevEl.forEach(el => initNavEl(el, wrapperId, params.prevSlideMessage));\n }\n\n // Pagination\n if (hasClickablePagination()) {\n const paginationEl = makeElementsArray(swiper.pagination.el);\n paginationEl.forEach(el => {\n el.addEventListener('keydown', onEnterOrSpaceKey);\n });\n }\n\n // Tab focus\n swiper.el.addEventListener('focus', handleFocus, true);\n swiper.el.addEventListener('pointerdown', handlePointerDown, true);\n swiper.el.addEventListener('pointerup', handlePointerUp, true);\n };\n function destroy() {\n if (liveRegion) liveRegion.remove();\n let {\n nextEl,\n prevEl\n } = swiper.navigation ? swiper.navigation : {};\n nextEl = makeElementsArray(nextEl);\n prevEl = makeElementsArray(prevEl);\n if (nextEl) {\n nextEl.forEach(el => el.removeEventListener('keydown', onEnterOrSpaceKey));\n }\n if (prevEl) {\n prevEl.forEach(el => el.removeEventListener('keydown', onEnterOrSpaceKey));\n }\n\n // Pagination\n if (hasClickablePagination()) {\n const paginationEl = makeElementsArray(swiper.pagination.el);\n paginationEl.forEach(el => {\n el.removeEventListener('keydown', onEnterOrSpaceKey);\n });\n }\n\n // Tab focus\n swiper.el.removeEventListener('focus', handleFocus, true);\n swiper.el.removeEventListener('pointerdown', handlePointerDown, true);\n swiper.el.removeEventListener('pointerup', handlePointerUp, true);\n }\n on('beforeInit', () => {\n liveRegion = createElement('span', swiper.params.a11y.notificationClass);\n liveRegion.setAttribute('aria-live', 'assertive');\n liveRegion.setAttribute('aria-atomic', 'true');\n });\n on('afterInit', () => {\n if (!swiper.params.a11y.enabled) return;\n init();\n });\n on('slidesLengthChange snapGridLengthChange slidesGridLengthChange', () => {\n if (!swiper.params.a11y.enabled) return;\n initSlides();\n });\n on('fromEdge toEdge afterInit lock unlock', () => {\n if (!swiper.params.a11y.enabled) return;\n updateNavigation();\n });\n on('paginationUpdate', () => {\n if (!swiper.params.a11y.enabled) return;\n updatePagination();\n });\n on('destroy', () => {\n if (!swiper.params.a11y.enabled) return;\n destroy();\n });\n}\n\nexport { A11y as default };\n","import { a as getWindow } from '../shared/ssr-window.esm.mjs';\n\nfunction History(_ref) {\n let {\n swiper,\n extendParams,\n on\n } = _ref;\n extendParams({\n history: {\n enabled: false,\n root: '',\n replaceState: false,\n key: 'slides',\n keepQuery: false\n }\n });\n let initialized = false;\n let paths = {};\n const slugify = text => {\n return text.toString().replace(/\\s+/g, '-').replace(/[^\\w-]+/g, '').replace(/--+/g, '-').replace(/^-+/, '').replace(/-+$/, '');\n };\n const getPathValues = urlOverride => {\n const window = getWindow();\n let location;\n if (urlOverride) {\n location = new URL(urlOverride);\n } else {\n location = window.location;\n }\n const pathArray = location.pathname.slice(1).split('/').filter(part => part !== '');\n const total = pathArray.length;\n const key = pathArray[total - 2];\n const value = pathArray[total - 1];\n return {\n key,\n value\n };\n };\n const setHistory = (key, index) => {\n const window = getWindow();\n if (!initialized || !swiper.params.history.enabled) return;\n let location;\n if (swiper.params.url) {\n location = new URL(swiper.params.url);\n } else {\n location = window.location;\n }\n const slide = swiper.slides[index];\n let value = slugify(slide.getAttribute('data-history'));\n if (swiper.params.history.root.length > 0) {\n let root = swiper.params.history.root;\n if (root[root.length - 1] === '/') root = root.slice(0, root.length - 1);\n value = `${root}/${key ? `${key}/` : ''}${value}`;\n } else if (!location.pathname.includes(key)) {\n value = `${key ? `${key}/` : ''}${value}`;\n }\n if (swiper.params.history.keepQuery) {\n value += location.search;\n }\n const currentState = window.history.state;\n if (currentState && currentState.value === value) {\n return;\n }\n if (swiper.params.history.replaceState) {\n window.history.replaceState({\n value\n }, null, value);\n } else {\n window.history.pushState({\n value\n }, null, value);\n }\n };\n const scrollToSlide = (speed, value, runCallbacks) => {\n if (value) {\n for (let i = 0, length = swiper.slides.length; i < length; i += 1) {\n const slide = swiper.slides[i];\n const slideHistory = slugify(slide.getAttribute('data-history'));\n if (slideHistory === value) {\n const index = swiper.getSlideIndex(slide);\n swiper.slideTo(index, speed, runCallbacks);\n }\n }\n } else {\n swiper.slideTo(0, speed, runCallbacks);\n }\n };\n const setHistoryPopState = () => {\n paths = getPathValues(swiper.params.url);\n scrollToSlide(swiper.params.speed, paths.value, false);\n };\n const init = () => {\n const window = getWindow();\n if (!swiper.params.history) return;\n if (!window.history || !window.history.pushState) {\n swiper.params.history.enabled = false;\n swiper.params.hashNavigation.enabled = true;\n return;\n }\n initialized = true;\n paths = getPathValues(swiper.params.url);\n if (!paths.key && !paths.value) {\n if (!swiper.params.history.replaceState) {\n window.addEventListener('popstate', setHistoryPopState);\n }\n return;\n }\n scrollToSlide(0, paths.value, swiper.params.runCallbacksOnInit);\n if (!swiper.params.history.replaceState) {\n window.addEventListener('popstate', setHistoryPopState);\n }\n };\n const destroy = () => {\n const window = getWindow();\n if (!swiper.params.history.replaceState) {\n window.removeEventListener('popstate', setHistoryPopState);\n }\n };\n on('init', () => {\n if (swiper.params.history.enabled) {\n init();\n }\n });\n on('destroy', () => {\n if (swiper.params.history.enabled) {\n destroy();\n }\n });\n on('transitionEnd _freeModeNoMomentumRelease', () => {\n if (initialized) {\n setHistory(swiper.params.history.key, swiper.activeIndex);\n }\n });\n on('slideChange', () => {\n if (initialized && swiper.params.cssMode) {\n setHistory(swiper.params.history.key, swiper.activeIndex);\n }\n });\n}\n\nexport { History as default };\n","import { g as getDocument, a as getWindow } from '../shared/ssr-window.esm.mjs';\nimport { e as elementChildren } from '../shared/utils.mjs';\n\nfunction HashNavigation(_ref) {\n let {\n swiper,\n extendParams,\n emit,\n on\n } = _ref;\n let initialized = false;\n const document = getDocument();\n const window = getWindow();\n extendParams({\n hashNavigation: {\n enabled: false,\n replaceState: false,\n watchState: false,\n getSlideIndex(_s, hash) {\n if (swiper.virtual && swiper.params.virtual.enabled) {\n const slideWithHash = swiper.slides.filter(slideEl => slideEl.getAttribute('data-hash') === hash)[0];\n if (!slideWithHash) return 0;\n const index = parseInt(slideWithHash.getAttribute('data-swiper-slide-index'), 10);\n return index;\n }\n return swiper.getSlideIndex(elementChildren(swiper.slidesEl, `.${swiper.params.slideClass}[data-hash=\"${hash}\"], swiper-slide[data-hash=\"${hash}\"]`)[0]);\n }\n }\n });\n const onHashChange = () => {\n emit('hashChange');\n const newHash = document.location.hash.replace('#', '');\n const activeSlideEl = swiper.virtual && swiper.params.virtual.enabled ? swiper.slidesEl.querySelector(`[data-swiper-slide-index=\"${swiper.activeIndex}\"]`) : swiper.slides[swiper.activeIndex];\n const activeSlideHash = activeSlideEl ? activeSlideEl.getAttribute('data-hash') : '';\n if (newHash !== activeSlideHash) {\n const newIndex = swiper.params.hashNavigation.getSlideIndex(swiper, newHash);\n if (typeof newIndex === 'undefined' || Number.isNaN(newIndex)) return;\n swiper.slideTo(newIndex);\n }\n };\n const setHash = () => {\n if (!initialized || !swiper.params.hashNavigation.enabled) return;\n const activeSlideEl = swiper.virtual && swiper.params.virtual.enabled ? swiper.slidesEl.querySelector(`[data-swiper-slide-index=\"${swiper.activeIndex}\"]`) : swiper.slides[swiper.activeIndex];\n const activeSlideHash = activeSlideEl ? activeSlideEl.getAttribute('data-hash') || activeSlideEl.getAttribute('data-history') : '';\n if (swiper.params.hashNavigation.replaceState && window.history && window.history.replaceState) {\n window.history.replaceState(null, null, `#${activeSlideHash}` || '');\n emit('hashSet');\n } else {\n document.location.hash = activeSlideHash || '';\n emit('hashSet');\n }\n };\n const init = () => {\n if (!swiper.params.hashNavigation.enabled || swiper.params.history && swiper.params.history.enabled) return;\n initialized = true;\n const hash = document.location.hash.replace('#', '');\n if (hash) {\n const speed = 0;\n const index = swiper.params.hashNavigation.getSlideIndex(swiper, hash);\n swiper.slideTo(index || 0, speed, swiper.params.runCallbacksOnInit, true);\n }\n if (swiper.params.hashNavigation.watchState) {\n window.addEventListener('hashchange', onHashChange);\n }\n };\n const destroy = () => {\n if (swiper.params.hashNavigation.watchState) {\n window.removeEventListener('hashchange', onHashChange);\n }\n };\n on('init', () => {\n if (swiper.params.hashNavigation.enabled) {\n init();\n }\n });\n on('destroy', () => {\n if (swiper.params.hashNavigation.enabled) {\n destroy();\n }\n });\n on('transitionEnd _freeModeNoMomentumRelease', () => {\n if (initialized) {\n setHash();\n }\n });\n on('slideChange', () => {\n if (initialized && swiper.params.cssMode) {\n setHash();\n }\n });\n}\n\nexport { HashNavigation as default };\n","import { g as getDocument } from '../shared/ssr-window.esm.mjs';\n\n/* eslint no-underscore-dangle: \"off\" */\n/* eslint no-use-before-define: \"off\" */\nfunction Autoplay(_ref) {\n let {\n swiper,\n extendParams,\n on,\n emit,\n params\n } = _ref;\n swiper.autoplay = {\n running: false,\n paused: false,\n timeLeft: 0\n };\n extendParams({\n autoplay: {\n enabled: false,\n delay: 3000,\n waitForTransition: true,\n disableOnInteraction: false,\n stopOnLastSlide: false,\n reverseDirection: false,\n pauseOnMouseEnter: false\n }\n });\n let timeout;\n let raf;\n let autoplayDelayTotal = params && params.autoplay ? params.autoplay.delay : 3000;\n let autoplayDelayCurrent = params && params.autoplay ? params.autoplay.delay : 3000;\n let autoplayTimeLeft;\n let autoplayStartTime = new Date().getTime();\n let wasPaused;\n let isTouched;\n let pausedByTouch;\n let touchStartTimeout;\n let slideChanged;\n let pausedByInteraction;\n let pausedByPointerEnter;\n function onTransitionEnd(e) {\n if (!swiper || swiper.destroyed || !swiper.wrapperEl) return;\n if (e.target !== swiper.wrapperEl) return;\n swiper.wrapperEl.removeEventListener('transitionend', onTransitionEnd);\n if (pausedByPointerEnter) {\n return;\n }\n resume();\n }\n const calcTimeLeft = () => {\n if (swiper.destroyed || !swiper.autoplay.running) return;\n if (swiper.autoplay.paused) {\n wasPaused = true;\n } else if (wasPaused) {\n autoplayDelayCurrent = autoplayTimeLeft;\n wasPaused = false;\n }\n const timeLeft = swiper.autoplay.paused ? autoplayTimeLeft : autoplayStartTime + autoplayDelayCurrent - new Date().getTime();\n swiper.autoplay.timeLeft = timeLeft;\n emit('autoplayTimeLeft', timeLeft, timeLeft / autoplayDelayTotal);\n raf = requestAnimationFrame(() => {\n calcTimeLeft();\n });\n };\n const getSlideDelay = () => {\n let activeSlideEl;\n if (swiper.virtual && swiper.params.virtual.enabled) {\n activeSlideEl = swiper.slides.filter(slideEl => slideEl.classList.contains('swiper-slide-active'))[0];\n } else {\n activeSlideEl = swiper.slides[swiper.activeIndex];\n }\n if (!activeSlideEl) return undefined;\n const currentSlideDelay = parseInt(activeSlideEl.getAttribute('data-swiper-autoplay'), 10);\n return currentSlideDelay;\n };\n const run = delayForce => {\n if (swiper.destroyed || !swiper.autoplay.running) return;\n cancelAnimationFrame(raf);\n calcTimeLeft();\n let delay = typeof delayForce === 'undefined' ? swiper.params.autoplay.delay : delayForce;\n autoplayDelayTotal = swiper.params.autoplay.delay;\n autoplayDelayCurrent = swiper.params.autoplay.delay;\n const currentSlideDelay = getSlideDelay();\n if (!Number.isNaN(currentSlideDelay) && currentSlideDelay > 0 && typeof delayForce === 'undefined') {\n delay = currentSlideDelay;\n autoplayDelayTotal = currentSlideDelay;\n autoplayDelayCurrent = currentSlideDelay;\n }\n autoplayTimeLeft = delay;\n const speed = swiper.params.speed;\n const proceed = () => {\n if (!swiper || swiper.destroyed) return;\n if (swiper.params.autoplay.reverseDirection) {\n if (!swiper.isBeginning || swiper.params.loop || swiper.params.rewind) {\n swiper.slidePrev(speed, true, true);\n emit('autoplay');\n } else if (!swiper.params.autoplay.stopOnLastSlide) {\n swiper.slideTo(swiper.slides.length - 1, speed, true, true);\n emit('autoplay');\n }\n } else {\n if (!swiper.isEnd || swiper.params.loop || swiper.params.rewind) {\n swiper.slideNext(speed, true, true);\n emit('autoplay');\n } else if (!swiper.params.autoplay.stopOnLastSlide) {\n swiper.slideTo(0, speed, true, true);\n emit('autoplay');\n }\n }\n if (swiper.params.cssMode) {\n autoplayStartTime = new Date().getTime();\n requestAnimationFrame(() => {\n run();\n });\n }\n };\n if (delay > 0) {\n clearTimeout(timeout);\n timeout = setTimeout(() => {\n proceed();\n }, delay);\n } else {\n requestAnimationFrame(() => {\n proceed();\n });\n }\n\n // eslint-disable-next-line\n return delay;\n };\n const start = () => {\n autoplayStartTime = new Date().getTime();\n swiper.autoplay.running = true;\n run();\n emit('autoplayStart');\n };\n const stop = () => {\n swiper.autoplay.running = false;\n clearTimeout(timeout);\n cancelAnimationFrame(raf);\n emit('autoplayStop');\n };\n const pause = (internal, reset) => {\n if (swiper.destroyed || !swiper.autoplay.running) return;\n clearTimeout(timeout);\n if (!internal) {\n pausedByInteraction = true;\n }\n const proceed = () => {\n emit('autoplayPause');\n if (swiper.params.autoplay.waitForTransition) {\n swiper.wrapperEl.addEventListener('transitionend', onTransitionEnd);\n } else {\n resume();\n }\n };\n swiper.autoplay.paused = true;\n if (reset) {\n if (slideChanged) {\n autoplayTimeLeft = swiper.params.autoplay.delay;\n }\n slideChanged = false;\n proceed();\n return;\n }\n const delay = autoplayTimeLeft || swiper.params.autoplay.delay;\n autoplayTimeLeft = delay - (new Date().getTime() - autoplayStartTime);\n if (swiper.isEnd && autoplayTimeLeft < 0 && !swiper.params.loop) return;\n if (autoplayTimeLeft < 0) autoplayTimeLeft = 0;\n proceed();\n };\n const resume = () => {\n if (swiper.isEnd && autoplayTimeLeft < 0 && !swiper.params.loop || swiper.destroyed || !swiper.autoplay.running) return;\n autoplayStartTime = new Date().getTime();\n if (pausedByInteraction) {\n pausedByInteraction = false;\n run(autoplayTimeLeft);\n } else {\n run();\n }\n swiper.autoplay.paused = false;\n emit('autoplayResume');\n };\n const onVisibilityChange = () => {\n if (swiper.destroyed || !swiper.autoplay.running) return;\n const document = getDocument();\n if (document.visibilityState === 'hidden') {\n pausedByInteraction = true;\n pause(true);\n }\n if (document.visibilityState === 'visible') {\n resume();\n }\n };\n const onPointerEnter = e => {\n if (e.pointerType !== 'mouse') return;\n pausedByInteraction = true;\n pausedByPointerEnter = true;\n if (swiper.animating || swiper.autoplay.paused) return;\n pause(true);\n };\n const onPointerLeave = e => {\n if (e.pointerType !== 'mouse') return;\n pausedByPointerEnter = false;\n if (swiper.autoplay.paused) {\n resume();\n }\n };\n const attachMouseEvents = () => {\n if (swiper.params.autoplay.pauseOnMouseEnter) {\n swiper.el.addEventListener('pointerenter', onPointerEnter);\n swiper.el.addEventListener('pointerleave', onPointerLeave);\n }\n };\n const detachMouseEvents = () => {\n swiper.el.removeEventListener('pointerenter', onPointerEnter);\n swiper.el.removeEventListener('pointerleave', onPointerLeave);\n };\n const attachDocumentEvents = () => {\n const document = getDocument();\n document.addEventListener('visibilitychange', onVisibilityChange);\n };\n const detachDocumentEvents = () => {\n const document = getDocument();\n document.removeEventListener('visibilitychange', onVisibilityChange);\n };\n on('init', () => {\n if (swiper.params.autoplay.enabled) {\n attachMouseEvents();\n attachDocumentEvents();\n start();\n }\n });\n on('destroy', () => {\n detachMouseEvents();\n detachDocumentEvents();\n if (swiper.autoplay.running) {\n stop();\n }\n });\n on('_freeModeStaticRelease', () => {\n if (pausedByTouch || pausedByInteraction) {\n resume();\n }\n });\n on('_freeModeNoMomentumRelease', () => {\n if (!swiper.params.autoplay.disableOnInteraction) {\n pause(true, true);\n } else {\n stop();\n }\n });\n on('beforeTransitionStart', (_s, speed, internal) => {\n if (swiper.destroyed || !swiper.autoplay.running) return;\n if (internal || !swiper.params.autoplay.disableOnInteraction) {\n pause(true, true);\n } else {\n stop();\n }\n });\n on('sliderFirstMove', () => {\n if (swiper.destroyed || !swiper.autoplay.running) return;\n if (swiper.params.autoplay.disableOnInteraction) {\n stop();\n return;\n }\n isTouched = true;\n pausedByTouch = false;\n pausedByInteraction = false;\n touchStartTimeout = setTimeout(() => {\n pausedByInteraction = true;\n pausedByTouch = true;\n pause(true);\n }, 200);\n });\n on('touchEnd', () => {\n if (swiper.destroyed || !swiper.autoplay.running || !isTouched) return;\n clearTimeout(touchStartTimeout);\n clearTimeout(timeout);\n if (swiper.params.autoplay.disableOnInteraction) {\n pausedByTouch = false;\n isTouched = false;\n return;\n }\n if (pausedByTouch && swiper.params.cssMode) resume();\n pausedByTouch = false;\n isTouched = false;\n });\n on('slideChange', () => {\n if (swiper.destroyed || !swiper.autoplay.running) return;\n slideChanged = true;\n });\n Object.assign(swiper.autoplay, {\n start,\n stop,\n pause,\n resume\n });\n}\n\nexport { Autoplay as default };\n","import { g as getDocument } from '../shared/ssr-window.esm.mjs';\nimport { k as isObject, e as elementChildren } from '../shared/utils.mjs';\n\nfunction Thumb(_ref) {\n let {\n swiper,\n extendParams,\n on\n } = _ref;\n extendParams({\n thumbs: {\n swiper: null,\n multipleActiveThumbs: true,\n autoScrollOffset: 0,\n slideThumbActiveClass: 'swiper-slide-thumb-active',\n thumbsContainerClass: 'swiper-thumbs'\n }\n });\n let initialized = false;\n let swiperCreated = false;\n swiper.thumbs = {\n swiper: null\n };\n function onThumbClick() {\n const thumbsSwiper = swiper.thumbs.swiper;\n if (!thumbsSwiper || thumbsSwiper.destroyed) return;\n const clickedIndex = thumbsSwiper.clickedIndex;\n const clickedSlide = thumbsSwiper.clickedSlide;\n if (clickedSlide && clickedSlide.classList.contains(swiper.params.thumbs.slideThumbActiveClass)) return;\n if (typeof clickedIndex === 'undefined' || clickedIndex === null) return;\n let slideToIndex;\n if (thumbsSwiper.params.loop) {\n slideToIndex = parseInt(thumbsSwiper.clickedSlide.getAttribute('data-swiper-slide-index'), 10);\n } else {\n slideToIndex = clickedIndex;\n }\n if (swiper.params.loop) {\n swiper.slideToLoop(slideToIndex);\n } else {\n swiper.slideTo(slideToIndex);\n }\n }\n function init() {\n const {\n thumbs: thumbsParams\n } = swiper.params;\n if (initialized) return false;\n initialized = true;\n const SwiperClass = swiper.constructor;\n if (thumbsParams.swiper instanceof SwiperClass) {\n swiper.thumbs.swiper = thumbsParams.swiper;\n Object.assign(swiper.thumbs.swiper.originalParams, {\n watchSlidesProgress: true,\n slideToClickedSlide: false\n });\n Object.assign(swiper.thumbs.swiper.params, {\n watchSlidesProgress: true,\n slideToClickedSlide: false\n });\n swiper.thumbs.swiper.update();\n } else if (isObject(thumbsParams.swiper)) {\n const thumbsSwiperParams = Object.assign({}, thumbsParams.swiper);\n Object.assign(thumbsSwiperParams, {\n watchSlidesProgress: true,\n slideToClickedSlide: false\n });\n swiper.thumbs.swiper = new SwiperClass(thumbsSwiperParams);\n swiperCreated = true;\n }\n swiper.thumbs.swiper.el.classList.add(swiper.params.thumbs.thumbsContainerClass);\n swiper.thumbs.swiper.on('tap', onThumbClick);\n return true;\n }\n function update(initial) {\n const thumbsSwiper = swiper.thumbs.swiper;\n if (!thumbsSwiper || thumbsSwiper.destroyed) return;\n const slidesPerView = thumbsSwiper.params.slidesPerView === 'auto' ? thumbsSwiper.slidesPerViewDynamic() : thumbsSwiper.params.slidesPerView;\n\n // Activate thumbs\n let thumbsToActivate = 1;\n const thumbActiveClass = swiper.params.thumbs.slideThumbActiveClass;\n if (swiper.params.slidesPerView > 1 && !swiper.params.centeredSlides) {\n thumbsToActivate = swiper.params.slidesPerView;\n }\n if (!swiper.params.thumbs.multipleActiveThumbs) {\n thumbsToActivate = 1;\n }\n thumbsToActivate = Math.floor(thumbsToActivate);\n thumbsSwiper.slides.forEach(slideEl => slideEl.classList.remove(thumbActiveClass));\n if (thumbsSwiper.params.loop || thumbsSwiper.params.virtual && thumbsSwiper.params.virtual.enabled) {\n for (let i = 0; i < thumbsToActivate; i += 1) {\n elementChildren(thumbsSwiper.slidesEl, `[data-swiper-slide-index=\"${swiper.realIndex + i}\"]`).forEach(slideEl => {\n slideEl.classList.add(thumbActiveClass);\n });\n }\n } else {\n for (let i = 0; i < thumbsToActivate; i += 1) {\n if (thumbsSwiper.slides[swiper.realIndex + i]) {\n thumbsSwiper.slides[swiper.realIndex + i].classList.add(thumbActiveClass);\n }\n }\n }\n const autoScrollOffset = swiper.params.thumbs.autoScrollOffset;\n const useOffset = autoScrollOffset && !thumbsSwiper.params.loop;\n if (swiper.realIndex !== thumbsSwiper.realIndex || useOffset) {\n const currentThumbsIndex = thumbsSwiper.activeIndex;\n let newThumbsIndex;\n let direction;\n if (thumbsSwiper.params.loop) {\n const newThumbsSlide = thumbsSwiper.slides.filter(slideEl => slideEl.getAttribute('data-swiper-slide-index') === `${swiper.realIndex}`)[0];\n newThumbsIndex = thumbsSwiper.slides.indexOf(newThumbsSlide);\n direction = swiper.activeIndex > swiper.previousIndex ? 'next' : 'prev';\n } else {\n newThumbsIndex = swiper.realIndex;\n direction = newThumbsIndex > swiper.previousIndex ? 'next' : 'prev';\n }\n if (useOffset) {\n newThumbsIndex += direction === 'next' ? autoScrollOffset : -1 * autoScrollOffset;\n }\n if (thumbsSwiper.visibleSlidesIndexes && thumbsSwiper.visibleSlidesIndexes.indexOf(newThumbsIndex) < 0) {\n if (thumbsSwiper.params.centeredSlides) {\n if (newThumbsIndex > currentThumbsIndex) {\n newThumbsIndex = newThumbsIndex - Math.floor(slidesPerView / 2) + 1;\n } else {\n newThumbsIndex = newThumbsIndex + Math.floor(slidesPerView / 2) - 1;\n }\n } else if (newThumbsIndex > currentThumbsIndex && thumbsSwiper.params.slidesPerGroup === 1) ;\n thumbsSwiper.slideTo(newThumbsIndex, initial ? 0 : undefined);\n }\n }\n }\n on('beforeInit', () => {\n const {\n thumbs\n } = swiper.params;\n if (!thumbs || !thumbs.swiper) return;\n if (typeof thumbs.swiper === 'string' || thumbs.swiper instanceof HTMLElement) {\n const document = getDocument();\n const getThumbsElementAndInit = () => {\n const thumbsElement = typeof thumbs.swiper === 'string' ? document.querySelector(thumbs.swiper) : thumbs.swiper;\n if (thumbsElement && thumbsElement.swiper) {\n thumbs.swiper = thumbsElement.swiper;\n init();\n update(true);\n } else if (thumbsElement) {\n const onThumbsSwiper = e => {\n thumbs.swiper = e.detail[0];\n thumbsElement.removeEventListener('init', onThumbsSwiper);\n init();\n update(true);\n thumbs.swiper.update();\n swiper.update();\n };\n thumbsElement.addEventListener('init', onThumbsSwiper);\n }\n return thumbsElement;\n };\n const watchForThumbsToAppear = () => {\n if (swiper.destroyed) return;\n const thumbsElement = getThumbsElementAndInit();\n if (!thumbsElement) {\n requestAnimationFrame(watchForThumbsToAppear);\n }\n };\n requestAnimationFrame(watchForThumbsToAppear);\n } else {\n init();\n update(true);\n }\n });\n on('slideChange update resize observerUpdate', () => {\n update();\n });\n on('setTransition', (_s, duration) => {\n const thumbsSwiper = swiper.thumbs.swiper;\n if (!thumbsSwiper || thumbsSwiper.destroyed) return;\n thumbsSwiper.setTransition(duration);\n });\n on('beforeDestroy', () => {\n const thumbsSwiper = swiper.thumbs.swiper;\n if (!thumbsSwiper || thumbsSwiper.destroyed) return;\n if (swiperCreated) {\n thumbsSwiper.destroy();\n }\n });\n Object.assign(swiper.thumbs, {\n init,\n update\n });\n}\n\nexport { Thumb as default };\n","import { d as now, j as elementTransitionEnd } from '../shared/utils.mjs';\n\nfunction freeMode(_ref) {\n let {\n swiper,\n extendParams,\n emit,\n once\n } = _ref;\n extendParams({\n freeMode: {\n enabled: false,\n momentum: true,\n momentumRatio: 1,\n momentumBounce: true,\n momentumBounceRatio: 1,\n momentumVelocityRatio: 1,\n sticky: false,\n minimumVelocity: 0.02\n }\n });\n function onTouchStart() {\n if (swiper.params.cssMode) return;\n const translate = swiper.getTranslate();\n swiper.setTranslate(translate);\n swiper.setTransition(0);\n swiper.touchEventsData.velocities.length = 0;\n swiper.freeMode.onTouchEnd({\n currentPos: swiper.rtl ? swiper.translate : -swiper.translate\n });\n }\n function onTouchMove() {\n if (swiper.params.cssMode) return;\n const {\n touchEventsData: data,\n touches\n } = swiper;\n // Velocity\n if (data.velocities.length === 0) {\n data.velocities.push({\n position: touches[swiper.isHorizontal() ? 'startX' : 'startY'],\n time: data.touchStartTime\n });\n }\n data.velocities.push({\n position: touches[swiper.isHorizontal() ? 'currentX' : 'currentY'],\n time: now()\n });\n }\n function onTouchEnd(_ref2) {\n let {\n currentPos\n } = _ref2;\n if (swiper.params.cssMode) return;\n const {\n params,\n wrapperEl,\n rtlTranslate: rtl,\n snapGrid,\n touchEventsData: data\n } = swiper;\n // Time diff\n const touchEndTime = now();\n const timeDiff = touchEndTime - data.touchStartTime;\n if (currentPos < -swiper.minTranslate()) {\n swiper.slideTo(swiper.activeIndex);\n return;\n }\n if (currentPos > -swiper.maxTranslate()) {\n if (swiper.slides.length < snapGrid.length) {\n swiper.slideTo(snapGrid.length - 1);\n } else {\n swiper.slideTo(swiper.slides.length - 1);\n }\n return;\n }\n if (params.freeMode.momentum) {\n if (data.velocities.length > 1) {\n const lastMoveEvent = data.velocities.pop();\n const velocityEvent = data.velocities.pop();\n const distance = lastMoveEvent.position - velocityEvent.position;\n const time = lastMoveEvent.time - velocityEvent.time;\n swiper.velocity = distance / time;\n swiper.velocity /= 2;\n if (Math.abs(swiper.velocity) < params.freeMode.minimumVelocity) {\n swiper.velocity = 0;\n }\n // this implies that the user stopped moving a finger then released.\n // There would be no events with distance zero, so the last event is stale.\n if (time > 150 || now() - lastMoveEvent.time > 300) {\n swiper.velocity = 0;\n }\n } else {\n swiper.velocity = 0;\n }\n swiper.velocity *= params.freeMode.momentumVelocityRatio;\n data.velocities.length = 0;\n let momentumDuration = 1000 * params.freeMode.momentumRatio;\n const momentumDistance = swiper.velocity * momentumDuration;\n let newPosition = swiper.translate + momentumDistance;\n if (rtl) newPosition = -newPosition;\n let doBounce = false;\n let afterBouncePosition;\n const bounceAmount = Math.abs(swiper.velocity) * 20 * params.freeMode.momentumBounceRatio;\n let needsLoopFix;\n if (newPosition < swiper.maxTranslate()) {\n if (params.freeMode.momentumBounce) {\n if (newPosition + swiper.maxTranslate() < -bounceAmount) {\n newPosition = swiper.maxTranslate() - bounceAmount;\n }\n afterBouncePosition = swiper.maxTranslate();\n doBounce = true;\n data.allowMomentumBounce = true;\n } else {\n newPosition = swiper.maxTranslate();\n }\n if (params.loop && params.centeredSlides) needsLoopFix = true;\n } else if (newPosition > swiper.minTranslate()) {\n if (params.freeMode.momentumBounce) {\n if (newPosition - swiper.minTranslate() > bounceAmount) {\n newPosition = swiper.minTranslate() + bounceAmount;\n }\n afterBouncePosition = swiper.minTranslate();\n doBounce = true;\n data.allowMomentumBounce = true;\n } else {\n newPosition = swiper.minTranslate();\n }\n if (params.loop && params.centeredSlides) needsLoopFix = true;\n } else if (params.freeMode.sticky) {\n let nextSlide;\n for (let j = 0; j < snapGrid.length; j += 1) {\n if (snapGrid[j] > -newPosition) {\n nextSlide = j;\n break;\n }\n }\n if (Math.abs(snapGrid[nextSlide] - newPosition) < Math.abs(snapGrid[nextSlide - 1] - newPosition) || swiper.swipeDirection === 'next') {\n newPosition = snapGrid[nextSlide];\n } else {\n newPosition = snapGrid[nextSlide - 1];\n }\n newPosition = -newPosition;\n }\n if (needsLoopFix) {\n once('transitionEnd', () => {\n swiper.loopFix();\n });\n }\n // Fix duration\n if (swiper.velocity !== 0) {\n if (rtl) {\n momentumDuration = Math.abs((-newPosition - swiper.translate) / swiper.velocity);\n } else {\n momentumDuration = Math.abs((newPosition - swiper.translate) / swiper.velocity);\n }\n if (params.freeMode.sticky) {\n // If freeMode.sticky is active and the user ends a swipe with a slow-velocity\n // event, then durations can be 20+ seconds to slide one (or zero!) slides.\n // It's easy to see this when simulating touch with mouse events. To fix this,\n // limit single-slide swipes to the default slide duration. This also has the\n // nice side effect of matching slide speed if the user stopped moving before\n // lifting finger or mouse vs. moving slowly before lifting the finger/mouse.\n // For faster swipes, also apply limits (albeit higher ones).\n const moveDistance = Math.abs((rtl ? -newPosition : newPosition) - swiper.translate);\n const currentSlideSize = swiper.slidesSizesGrid[swiper.activeIndex];\n if (moveDistance < currentSlideSize) {\n momentumDuration = params.speed;\n } else if (moveDistance < 2 * currentSlideSize) {\n momentumDuration = params.speed * 1.5;\n } else {\n momentumDuration = params.speed * 2.5;\n }\n }\n } else if (params.freeMode.sticky) {\n swiper.slideToClosest();\n return;\n }\n if (params.freeMode.momentumBounce && doBounce) {\n swiper.updateProgress(afterBouncePosition);\n swiper.setTransition(momentumDuration);\n swiper.setTranslate(newPosition);\n swiper.transitionStart(true, swiper.swipeDirection);\n swiper.animating = true;\n elementTransitionEnd(wrapperEl, () => {\n if (!swiper || swiper.destroyed || !data.allowMomentumBounce) return;\n emit('momentumBounce');\n swiper.setTransition(params.speed);\n setTimeout(() => {\n swiper.setTranslate(afterBouncePosition);\n elementTransitionEnd(wrapperEl, () => {\n if (!swiper || swiper.destroyed) return;\n swiper.transitionEnd();\n });\n }, 0);\n });\n } else if (swiper.velocity) {\n emit('_freeModeNoMomentumRelease');\n swiper.updateProgress(newPosition);\n swiper.setTransition(momentumDuration);\n swiper.setTranslate(newPosition);\n swiper.transitionStart(true, swiper.swipeDirection);\n if (!swiper.animating) {\n swiper.animating = true;\n elementTransitionEnd(wrapperEl, () => {\n if (!swiper || swiper.destroyed) return;\n swiper.transitionEnd();\n });\n }\n } else {\n swiper.updateProgress(newPosition);\n }\n swiper.updateActiveIndex();\n swiper.updateSlidesClasses();\n } else if (params.freeMode.sticky) {\n swiper.slideToClosest();\n return;\n } else if (params.freeMode) {\n emit('_freeModeNoMomentumRelease');\n }\n if (!params.freeMode.momentum || timeDiff >= params.longSwipesMs) {\n emit('_freeModeStaticRelease');\n swiper.updateProgress();\n swiper.updateActiveIndex();\n swiper.updateSlidesClasses();\n }\n }\n Object.assign(swiper, {\n freeMode: {\n onTouchStart,\n onTouchMove,\n onTouchEnd\n }\n });\n}\n\nexport { freeMode as default };\n","function Grid(_ref) {\n let {\n swiper,\n extendParams,\n on\n } = _ref;\n extendParams({\n grid: {\n rows: 1,\n fill: 'column'\n }\n });\n let slidesNumberEvenToRows;\n let slidesPerRow;\n let numFullColumns;\n let wasMultiRow;\n const getSpaceBetween = () => {\n let spaceBetween = swiper.params.spaceBetween;\n if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {\n spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiper.size;\n } else if (typeof spaceBetween === 'string') {\n spaceBetween = parseFloat(spaceBetween);\n }\n return spaceBetween;\n };\n const initSlides = slides => {\n const {\n slidesPerView\n } = swiper.params;\n const {\n rows,\n fill\n } = swiper.params.grid;\n const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : slides.length;\n numFullColumns = Math.floor(slidesLength / rows);\n if (Math.floor(slidesLength / rows) === slidesLength / rows) {\n slidesNumberEvenToRows = slidesLength;\n } else {\n slidesNumberEvenToRows = Math.ceil(slidesLength / rows) * rows;\n }\n if (slidesPerView !== 'auto' && fill === 'row') {\n slidesNumberEvenToRows = Math.max(slidesNumberEvenToRows, slidesPerView * rows);\n }\n slidesPerRow = slidesNumberEvenToRows / rows;\n };\n const unsetSlides = () => {\n if (swiper.slides) {\n swiper.slides.forEach(slide => {\n if (slide.swiperSlideGridSet) {\n slide.style.height = '';\n slide.style[swiper.getDirectionLabel('margin-top')] = '';\n }\n });\n }\n };\n const updateSlide = (i, slide, slides) => {\n const {\n slidesPerGroup\n } = swiper.params;\n const spaceBetween = getSpaceBetween();\n const {\n rows,\n fill\n } = swiper.params.grid;\n const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : slides.length;\n // Set slides order\n let newSlideOrderIndex;\n let column;\n let row;\n if (fill === 'row' && slidesPerGroup > 1) {\n const groupIndex = Math.floor(i / (slidesPerGroup * rows));\n const slideIndexInGroup = i - rows * slidesPerGroup * groupIndex;\n const columnsInGroup = groupIndex === 0 ? slidesPerGroup : Math.min(Math.ceil((slidesLength - groupIndex * rows * slidesPerGroup) / rows), slidesPerGroup);\n row = Math.floor(slideIndexInGroup / columnsInGroup);\n column = slideIndexInGroup - row * columnsInGroup + groupIndex * slidesPerGroup;\n newSlideOrderIndex = column + row * slidesNumberEvenToRows / rows;\n slide.style.order = newSlideOrderIndex;\n } else if (fill === 'column') {\n column = Math.floor(i / rows);\n row = i - column * rows;\n if (column > numFullColumns || column === numFullColumns && row === rows - 1) {\n row += 1;\n if (row >= rows) {\n row = 0;\n column += 1;\n }\n }\n } else {\n row = Math.floor(i / slidesPerRow);\n column = i - row * slidesPerRow;\n }\n slide.row = row;\n slide.column = column;\n slide.style.height = `calc((100% - ${(rows - 1) * spaceBetween}px) / ${rows})`;\n slide.style[swiper.getDirectionLabel('margin-top')] = row !== 0 ? spaceBetween && `${spaceBetween}px` : '';\n slide.swiperSlideGridSet = true;\n };\n const updateWrapperSize = (slideSize, snapGrid) => {\n const {\n centeredSlides,\n roundLengths\n } = swiper.params;\n const spaceBetween = getSpaceBetween();\n const {\n rows\n } = swiper.params.grid;\n swiper.virtualSize = (slideSize + spaceBetween) * slidesNumberEvenToRows;\n swiper.virtualSize = Math.ceil(swiper.virtualSize / rows) - spaceBetween;\n if (!swiper.params.cssMode) {\n swiper.wrapperEl.style[swiper.getDirectionLabel('width')] = `${swiper.virtualSize + spaceBetween}px`;\n }\n if (centeredSlides) {\n const newSlidesGrid = [];\n for (let i = 0; i < snapGrid.length; i += 1) {\n let slidesGridItem = snapGrid[i];\n if (roundLengths) slidesGridItem = Math.floor(slidesGridItem);\n if (snapGrid[i] < swiper.virtualSize + snapGrid[0]) newSlidesGrid.push(slidesGridItem);\n }\n snapGrid.splice(0, snapGrid.length);\n snapGrid.push(...newSlidesGrid);\n }\n };\n const onInit = () => {\n wasMultiRow = swiper.params.grid && swiper.params.grid.rows > 1;\n };\n const onUpdate = () => {\n const {\n params,\n el\n } = swiper;\n const isMultiRow = params.grid && params.grid.rows > 1;\n if (wasMultiRow && !isMultiRow) {\n el.classList.remove(`${params.containerModifierClass}grid`, `${params.containerModifierClass}grid-column`);\n numFullColumns = 1;\n swiper.emitContainerClasses();\n } else if (!wasMultiRow && isMultiRow) {\n el.classList.add(`${params.containerModifierClass}grid`);\n if (params.grid.fill === 'column') {\n el.classList.add(`${params.containerModifierClass}grid-column`);\n }\n swiper.emitContainerClasses();\n }\n wasMultiRow = isMultiRow;\n };\n on('init', onInit);\n on('update', onUpdate);\n swiper.grid = {\n initSlides,\n unsetSlides,\n updateSlide,\n updateWrapperSize\n };\n}\n\nexport { Grid as default };\n","import { e as effectInit } from '../shared/effect-init.mjs';\nimport { e as effectTarget } from '../shared/effect-target.mjs';\nimport { e as effectVirtualTransitionEnd } from '../shared/effect-virtual-transition-end.mjs';\nimport { l as getSlideTransformEl } from '../shared/utils.mjs';\n\nfunction EffectFade(_ref) {\n let {\n swiper,\n extendParams,\n on\n } = _ref;\n extendParams({\n fadeEffect: {\n crossFade: false\n }\n });\n const setTranslate = () => {\n const {\n slides\n } = swiper;\n const params = swiper.params.fadeEffect;\n for (let i = 0; i < slides.length; i += 1) {\n const slideEl = swiper.slides[i];\n const offset = slideEl.swiperSlideOffset;\n let tx = -offset;\n if (!swiper.params.virtualTranslate) tx -= swiper.translate;\n let ty = 0;\n if (!swiper.isHorizontal()) {\n ty = tx;\n tx = 0;\n }\n const slideOpacity = swiper.params.fadeEffect.crossFade ? Math.max(1 - Math.abs(slideEl.progress), 0) : 1 + Math.min(Math.max(slideEl.progress, -1), 0);\n const targetEl = effectTarget(params, slideEl);\n targetEl.style.opacity = slideOpacity;\n targetEl.style.transform = `translate3d(${tx}px, ${ty}px, 0px)`;\n }\n };\n const setTransition = duration => {\n const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));\n transformElements.forEach(el => {\n el.style.transitionDuration = `${duration}ms`;\n });\n effectVirtualTransitionEnd({\n swiper,\n duration,\n transformElements,\n allSlides: true\n });\n };\n effectInit({\n effect: 'fade',\n swiper,\n on,\n setTranslate,\n setTransition,\n overwriteParams: () => ({\n slidesPerView: 1,\n slidesPerGroup: 1,\n watchSlidesProgress: true,\n spaceBetween: 0,\n virtualTranslate: !swiper.params.cssMode\n })\n });\n}\n\nexport { EffectFade as default };\n","import { e as effectInit } from '../shared/effect-init.mjs';\nimport { c as createElement } from '../shared/utils.mjs';\n\nfunction EffectCube(_ref) {\n let {\n swiper,\n extendParams,\n on\n } = _ref;\n extendParams({\n cubeEffect: {\n slideShadows: true,\n shadow: true,\n shadowOffset: 20,\n shadowScale: 0.94\n }\n });\n const createSlideShadows = (slideEl, progress, isHorizontal) => {\n let shadowBefore = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-left') : slideEl.querySelector('.swiper-slide-shadow-top');\n let shadowAfter = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-right') : slideEl.querySelector('.swiper-slide-shadow-bottom');\n if (!shadowBefore) {\n shadowBefore = createElement('div', `swiper-slide-shadow-cube swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}`.split(' '));\n slideEl.append(shadowBefore);\n }\n if (!shadowAfter) {\n shadowAfter = createElement('div', `swiper-slide-shadow-cube swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}`.split(' '));\n slideEl.append(shadowAfter);\n }\n if (shadowBefore) shadowBefore.style.opacity = Math.max(-progress, 0);\n if (shadowAfter) shadowAfter.style.opacity = Math.max(progress, 0);\n };\n const recreateShadows = () => {\n // create new ones\n const isHorizontal = swiper.isHorizontal();\n swiper.slides.forEach(slideEl => {\n const progress = Math.max(Math.min(slideEl.progress, 1), -1);\n createSlideShadows(slideEl, progress, isHorizontal);\n });\n };\n const setTranslate = () => {\n const {\n el,\n wrapperEl,\n slides,\n width: swiperWidth,\n height: swiperHeight,\n rtlTranslate: rtl,\n size: swiperSize,\n browser\n } = swiper;\n const params = swiper.params.cubeEffect;\n const isHorizontal = swiper.isHorizontal();\n const isVirtual = swiper.virtual && swiper.params.virtual.enabled;\n let wrapperRotate = 0;\n let cubeShadowEl;\n if (params.shadow) {\n if (isHorizontal) {\n cubeShadowEl = swiper.wrapperEl.querySelector('.swiper-cube-shadow');\n if (!cubeShadowEl) {\n cubeShadowEl = createElement('div', 'swiper-cube-shadow');\n swiper.wrapperEl.append(cubeShadowEl);\n }\n cubeShadowEl.style.height = `${swiperWidth}px`;\n } else {\n cubeShadowEl = el.querySelector('.swiper-cube-shadow');\n if (!cubeShadowEl) {\n cubeShadowEl = createElement('div', 'swiper-cube-shadow');\n el.append(cubeShadowEl);\n }\n }\n }\n for (let i = 0; i < slides.length; i += 1) {\n const slideEl = slides[i];\n let slideIndex = i;\n if (isVirtual) {\n slideIndex = parseInt(slideEl.getAttribute('data-swiper-slide-index'), 10);\n }\n let slideAngle = slideIndex * 90;\n let round = Math.floor(slideAngle / 360);\n if (rtl) {\n slideAngle = -slideAngle;\n round = Math.floor(-slideAngle / 360);\n }\n const progress = Math.max(Math.min(slideEl.progress, 1), -1);\n let tx = 0;\n let ty = 0;\n let tz = 0;\n if (slideIndex % 4 === 0) {\n tx = -round * 4 * swiperSize;\n tz = 0;\n } else if ((slideIndex - 1) % 4 === 0) {\n tx = 0;\n tz = -round * 4 * swiperSize;\n } else if ((slideIndex - 2) % 4 === 0) {\n tx = swiperSize + round * 4 * swiperSize;\n tz = swiperSize;\n } else if ((slideIndex - 3) % 4 === 0) {\n tx = -swiperSize;\n tz = 3 * swiperSize + swiperSize * 4 * round;\n }\n if (rtl) {\n tx = -tx;\n }\n if (!isHorizontal) {\n ty = tx;\n tx = 0;\n }\n const transform = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${isHorizontal ? slideAngle : 0}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;\n if (progress <= 1 && progress > -1) {\n wrapperRotate = slideIndex * 90 + progress * 90;\n if (rtl) wrapperRotate = -slideIndex * 90 - progress * 90;\n if (swiper.browser && swiper.browser.isSafari && Math.abs(wrapperRotate) / 90 % 2 === 1) {\n wrapperRotate += 0.001;\n }\n }\n slideEl.style.transform = transform;\n if (params.slideShadows) {\n createSlideShadows(slideEl, progress, isHorizontal);\n }\n }\n wrapperEl.style.transformOrigin = `50% 50% -${swiperSize / 2}px`;\n wrapperEl.style['-webkit-transform-origin'] = `50% 50% -${swiperSize / 2}px`;\n if (params.shadow) {\n if (isHorizontal) {\n cubeShadowEl.style.transform = `translate3d(0px, ${swiperWidth / 2 + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(89.99deg) rotateZ(0deg) scale(${params.shadowScale})`;\n } else {\n const shadowAngle = Math.abs(wrapperRotate) - Math.floor(Math.abs(wrapperRotate) / 90) * 90;\n const multiplier = 1.5 - (Math.sin(shadowAngle * 2 * Math.PI / 360) / 2 + Math.cos(shadowAngle * 2 * Math.PI / 360) / 2);\n const scale1 = params.shadowScale;\n const scale2 = params.shadowScale / multiplier;\n const offset = params.shadowOffset;\n cubeShadowEl.style.transform = `scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${swiperHeight / 2 + offset}px, ${-swiperHeight / 2 / scale2}px) rotateX(-89.99deg)`;\n }\n }\n const zFactor = (browser.isSafari || browser.isWebView) && browser.needPerspectiveFix ? -swiperSize / 2 : 0;\n wrapperEl.style.transform = `translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`;\n wrapperEl.style.setProperty('--swiper-cube-translate-z', `${zFactor}px`);\n };\n const setTransition = duration => {\n const {\n el,\n slides\n } = swiper;\n slides.forEach(slideEl => {\n slideEl.style.transitionDuration = `${duration}ms`;\n slideEl.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(subEl => {\n subEl.style.transitionDuration = `${duration}ms`;\n });\n });\n if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {\n const shadowEl = el.querySelector('.swiper-cube-shadow');\n if (shadowEl) shadowEl.style.transitionDuration = `${duration}ms`;\n }\n };\n effectInit({\n effect: 'cube',\n swiper,\n on,\n setTranslate,\n setTransition,\n recreateShadows,\n getEffectParams: () => swiper.params.cubeEffect,\n perspective: () => true,\n overwriteParams: () => ({\n slidesPerView: 1,\n slidesPerGroup: 1,\n watchSlidesProgress: true,\n resistanceRatio: 0,\n spaceBetween: 0,\n centeredSlides: false,\n virtualTranslate: true\n })\n });\n}\n\nexport { EffectCube as default };\n","import { c as createShadow } from '../shared/create-shadow.mjs';\nimport { e as effectInit } from '../shared/effect-init.mjs';\nimport { e as effectTarget } from '../shared/effect-target.mjs';\nimport { e as effectVirtualTransitionEnd } from '../shared/effect-virtual-transition-end.mjs';\nimport { l as getSlideTransformEl } from '../shared/utils.mjs';\n\nfunction EffectFlip(_ref) {\n let {\n swiper,\n extendParams,\n on\n } = _ref;\n extendParams({\n flipEffect: {\n slideShadows: true,\n limitRotation: true\n }\n });\n const createSlideShadows = (slideEl, progress) => {\n let shadowBefore = swiper.isHorizontal() ? slideEl.querySelector('.swiper-slide-shadow-left') : slideEl.querySelector('.swiper-slide-shadow-top');\n let shadowAfter = swiper.isHorizontal() ? slideEl.querySelector('.swiper-slide-shadow-right') : slideEl.querySelector('.swiper-slide-shadow-bottom');\n if (!shadowBefore) {\n shadowBefore = createShadow('flip', slideEl, swiper.isHorizontal() ? 'left' : 'top');\n }\n if (!shadowAfter) {\n shadowAfter = createShadow('flip', slideEl, swiper.isHorizontal() ? 'right' : 'bottom');\n }\n if (shadowBefore) shadowBefore.style.opacity = Math.max(-progress, 0);\n if (shadowAfter) shadowAfter.style.opacity = Math.max(progress, 0);\n };\n const recreateShadows = () => {\n // Set shadows\n swiper.params.flipEffect;\n swiper.slides.forEach(slideEl => {\n let progress = slideEl.progress;\n if (swiper.params.flipEffect.limitRotation) {\n progress = Math.max(Math.min(slideEl.progress, 1), -1);\n }\n createSlideShadows(slideEl, progress);\n });\n };\n const setTranslate = () => {\n const {\n slides,\n rtlTranslate: rtl\n } = swiper;\n const params = swiper.params.flipEffect;\n for (let i = 0; i < slides.length; i += 1) {\n const slideEl = slides[i];\n let progress = slideEl.progress;\n if (swiper.params.flipEffect.limitRotation) {\n progress = Math.max(Math.min(slideEl.progress, 1), -1);\n }\n const offset = slideEl.swiperSlideOffset;\n const rotate = -180 * progress;\n let rotateY = rotate;\n let rotateX = 0;\n let tx = swiper.params.cssMode ? -offset - swiper.translate : -offset;\n let ty = 0;\n if (!swiper.isHorizontal()) {\n ty = tx;\n tx = 0;\n rotateX = -rotateY;\n rotateY = 0;\n } else if (rtl) {\n rotateY = -rotateY;\n }\n if (swiper.browser && swiper.browser.isSafari) {\n if (Math.abs(rotateY) / 90 % 2 === 1) {\n rotateY += 0.001;\n }\n if (Math.abs(rotateX) / 90 % 2 === 1) {\n rotateX += 0.001;\n }\n }\n slideEl.style.zIndex = -Math.abs(Math.round(progress)) + slides.length;\n if (params.slideShadows) {\n createSlideShadows(slideEl, progress);\n }\n const transform = `translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\n const targetEl = effectTarget(params, slideEl);\n targetEl.style.transform = transform;\n }\n };\n const setTransition = duration => {\n const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));\n transformElements.forEach(el => {\n el.style.transitionDuration = `${duration}ms`;\n el.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(shadowEl => {\n shadowEl.style.transitionDuration = `${duration}ms`;\n });\n });\n effectVirtualTransitionEnd({\n swiper,\n duration,\n transformElements\n });\n };\n effectInit({\n effect: 'flip',\n swiper,\n on,\n setTranslate,\n setTransition,\n recreateShadows,\n getEffectParams: () => swiper.params.flipEffect,\n perspective: () => true,\n overwriteParams: () => ({\n slidesPerView: 1,\n slidesPerGroup: 1,\n watchSlidesProgress: true,\n spaceBetween: 0,\n virtualTranslate: !swiper.params.cssMode\n })\n });\n}\n\nexport { EffectFlip as default };\n","import { c as createShadow } from '../shared/create-shadow.mjs';\nimport { e as effectInit } from '../shared/effect-init.mjs';\nimport { e as effectTarget } from '../shared/effect-target.mjs';\nimport { l as getSlideTransformEl } from '../shared/utils.mjs';\n\nfunction EffectCoverflow(_ref) {\n let {\n swiper,\n extendParams,\n on\n } = _ref;\n extendParams({\n coverflowEffect: {\n rotate: 50,\n stretch: 0,\n depth: 100,\n scale: 1,\n modifier: 1,\n slideShadows: true\n }\n });\n const setTranslate = () => {\n const {\n width: swiperWidth,\n height: swiperHeight,\n slides,\n slidesSizesGrid\n } = swiper;\n const params = swiper.params.coverflowEffect;\n const isHorizontal = swiper.isHorizontal();\n const transform = swiper.translate;\n const center = isHorizontal ? -transform + swiperWidth / 2 : -transform + swiperHeight / 2;\n const rotate = isHorizontal ? params.rotate : -params.rotate;\n const translate = params.depth;\n // Each slide offset from center\n for (let i = 0, length = slides.length; i < length; i += 1) {\n const slideEl = slides[i];\n const slideSize = slidesSizesGrid[i];\n const slideOffset = slideEl.swiperSlideOffset;\n const centerOffset = (center - slideOffset - slideSize / 2) / slideSize;\n const offsetMultiplier = typeof params.modifier === 'function' ? params.modifier(centerOffset) : centerOffset * params.modifier;\n let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;\n let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;\n // var rotateZ = 0\n let translateZ = -translate * Math.abs(offsetMultiplier);\n let stretch = params.stretch;\n // Allow percentage to make a relative stretch for responsive sliders\n if (typeof stretch === 'string' && stretch.indexOf('%') !== -1) {\n stretch = parseFloat(params.stretch) / 100 * slideSize;\n }\n let translateY = isHorizontal ? 0 : stretch * offsetMultiplier;\n let translateX = isHorizontal ? stretch * offsetMultiplier : 0;\n let scale = 1 - (1 - params.scale) * Math.abs(offsetMultiplier);\n\n // Fix for ultra small values\n if (Math.abs(translateX) < 0.001) translateX = 0;\n if (Math.abs(translateY) < 0.001) translateY = 0;\n if (Math.abs(translateZ) < 0.001) translateZ = 0;\n if (Math.abs(rotateY) < 0.001) rotateY = 0;\n if (Math.abs(rotateX) < 0.001) rotateX = 0;\n if (Math.abs(scale) < 0.001) scale = 0;\n if (swiper.browser && swiper.browser.isSafari) {\n if (Math.abs(rotateY) / 90 % 2 === 1) {\n rotateY += 0.001;\n }\n if (Math.abs(rotateX) / 90 % 2 === 1) {\n rotateX += 0.001;\n }\n }\n const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;\n const targetEl = effectTarget(params, slideEl);\n targetEl.style.transform = slideTransform;\n slideEl.style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;\n if (params.slideShadows) {\n // Set shadows\n let shadowBeforeEl = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-left') : slideEl.querySelector('.swiper-slide-shadow-top');\n let shadowAfterEl = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-right') : slideEl.querySelector('.swiper-slide-shadow-bottom');\n if (!shadowBeforeEl) {\n shadowBeforeEl = createShadow('coverflow', slideEl, isHorizontal ? 'left' : 'top');\n }\n if (!shadowAfterEl) {\n shadowAfterEl = createShadow('coverflow', slideEl, isHorizontal ? 'right' : 'bottom');\n }\n if (shadowBeforeEl) shadowBeforeEl.style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;\n if (shadowAfterEl) shadowAfterEl.style.opacity = -offsetMultiplier > 0 ? -offsetMultiplier : 0;\n }\n }\n };\n const setTransition = duration => {\n const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));\n transformElements.forEach(el => {\n el.style.transitionDuration = `${duration}ms`;\n el.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(shadowEl => {\n shadowEl.style.transitionDuration = `${duration}ms`;\n });\n });\n };\n effectInit({\n effect: 'coverflow',\n swiper,\n on,\n setTranslate,\n setTransition,\n perspective: () => true,\n overwriteParams: () => ({\n watchSlidesProgress: true\n })\n });\n}\n\nexport { EffectCoverflow as default };\n","import { c as createShadow } from '../shared/create-shadow.mjs';\nimport { e as effectInit } from '../shared/effect-init.mjs';\nimport { e as effectTarget } from '../shared/effect-target.mjs';\nimport { e as effectVirtualTransitionEnd } from '../shared/effect-virtual-transition-end.mjs';\nimport { l as getSlideTransformEl } from '../shared/utils.mjs';\n\nfunction EffectCreative(_ref) {\n let {\n swiper,\n extendParams,\n on\n } = _ref;\n extendParams({\n creativeEffect: {\n limitProgress: 1,\n shadowPerProgress: false,\n progressMultiplier: 1,\n perspective: true,\n prev: {\n translate: [0, 0, 0],\n rotate: [0, 0, 0],\n opacity: 1,\n scale: 1\n },\n next: {\n translate: [0, 0, 0],\n rotate: [0, 0, 0],\n opacity: 1,\n scale: 1\n }\n }\n });\n const getTranslateValue = value => {\n if (typeof value === 'string') return value;\n return `${value}px`;\n };\n const setTranslate = () => {\n const {\n slides,\n wrapperEl,\n slidesSizesGrid\n } = swiper;\n const params = swiper.params.creativeEffect;\n const {\n progressMultiplier: multiplier\n } = params;\n const isCenteredSlides = swiper.params.centeredSlides;\n if (isCenteredSlides) {\n const margin = slidesSizesGrid[0] / 2 - swiper.params.slidesOffsetBefore || 0;\n wrapperEl.style.transform = `translateX(calc(50% - ${margin}px))`;\n }\n for (let i = 0; i < slides.length; i += 1) {\n const slideEl = slides[i];\n const slideProgress = slideEl.progress;\n const progress = Math.min(Math.max(slideEl.progress, -params.limitProgress), params.limitProgress);\n let originalProgress = progress;\n if (!isCenteredSlides) {\n originalProgress = Math.min(Math.max(slideEl.originalProgress, -params.limitProgress), params.limitProgress);\n }\n const offset = slideEl.swiperSlideOffset;\n const t = [swiper.params.cssMode ? -offset - swiper.translate : -offset, 0, 0];\n const r = [0, 0, 0];\n let custom = false;\n if (!swiper.isHorizontal()) {\n t[1] = t[0];\n t[0] = 0;\n }\n let data = {\n translate: [0, 0, 0],\n rotate: [0, 0, 0],\n scale: 1,\n opacity: 1\n };\n if (progress < 0) {\n data = params.next;\n custom = true;\n } else if (progress > 0) {\n data = params.prev;\n custom = true;\n }\n // set translate\n t.forEach((value, index) => {\n t[index] = `calc(${value}px + (${getTranslateValue(data.translate[index])} * ${Math.abs(progress * multiplier)}))`;\n });\n // set rotates\n r.forEach((value, index) => {\n let val = data.rotate[index] * Math.abs(progress * multiplier);\n if (swiper.browser && swiper.browser.isSafari && Math.abs(val) / 90 % 2 === 1) {\n val += 0.001;\n }\n r[index] = val;\n });\n slideEl.style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;\n const translateString = t.join(', ');\n const rotateString = `rotateX(${r[0]}deg) rotateY(${r[1]}deg) rotateZ(${r[2]}deg)`;\n const scaleString = originalProgress < 0 ? `scale(${1 + (1 - data.scale) * originalProgress * multiplier})` : `scale(${1 - (1 - data.scale) * originalProgress * multiplier})`;\n const opacityString = originalProgress < 0 ? 1 + (1 - data.opacity) * originalProgress * multiplier : 1 - (1 - data.opacity) * originalProgress * multiplier;\n const transform = `translate3d(${translateString}) ${rotateString} ${scaleString}`;\n\n // Set shadows\n if (custom && data.shadow || !custom) {\n let shadowEl = slideEl.querySelector('.swiper-slide-shadow');\n if (!shadowEl && data.shadow) {\n shadowEl = createShadow('creative', slideEl);\n }\n if (shadowEl) {\n const shadowOpacity = params.shadowPerProgress ? progress * (1 / params.limitProgress) : progress;\n shadowEl.style.opacity = Math.min(Math.max(Math.abs(shadowOpacity), 0), 1);\n }\n }\n const targetEl = effectTarget(params, slideEl);\n targetEl.style.transform = transform;\n targetEl.style.opacity = opacityString;\n if (data.origin) {\n targetEl.style.transformOrigin = data.origin;\n }\n }\n };\n const setTransition = duration => {\n const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));\n transformElements.forEach(el => {\n el.style.transitionDuration = `${duration}ms`;\n el.querySelectorAll('.swiper-slide-shadow').forEach(shadowEl => {\n shadowEl.style.transitionDuration = `${duration}ms`;\n });\n });\n effectVirtualTransitionEnd({\n swiper,\n duration,\n transformElements,\n allSlides: true\n });\n };\n effectInit({\n effect: 'creative',\n swiper,\n on,\n setTranslate,\n setTransition,\n perspective: () => swiper.params.creativeEffect.perspective,\n overwriteParams: () => ({\n watchSlidesProgress: true,\n virtualTranslate: !swiper.params.cssMode\n })\n });\n}\n\nexport { EffectCreative as default };\n","import { c as createShadow } from '../shared/create-shadow.mjs';\nimport { e as effectInit } from '../shared/effect-init.mjs';\nimport { e as effectTarget } from '../shared/effect-target.mjs';\nimport { e as effectVirtualTransitionEnd } from '../shared/effect-virtual-transition-end.mjs';\nimport { l as getSlideTransformEl } from '../shared/utils.mjs';\n\nfunction EffectCards(_ref) {\n let {\n swiper,\n extendParams,\n on\n } = _ref;\n extendParams({\n cardsEffect: {\n slideShadows: true,\n rotate: true,\n perSlideRotate: 2,\n perSlideOffset: 8\n }\n });\n const setTranslate = () => {\n const {\n slides,\n activeIndex,\n rtlTranslate: rtl\n } = swiper;\n const params = swiper.params.cardsEffect;\n const {\n startTranslate,\n isTouched\n } = swiper.touchEventsData;\n const currentTranslate = rtl ? -swiper.translate : swiper.translate;\n for (let i = 0; i < slides.length; i += 1) {\n const slideEl = slides[i];\n const slideProgress = slideEl.progress;\n const progress = Math.min(Math.max(slideProgress, -4), 4);\n let offset = slideEl.swiperSlideOffset;\n if (swiper.params.centeredSlides && !swiper.params.cssMode) {\n swiper.wrapperEl.style.transform = `translateX(${swiper.minTranslate()}px)`;\n }\n if (swiper.params.centeredSlides && swiper.params.cssMode) {\n offset -= slides[0].swiperSlideOffset;\n }\n let tX = swiper.params.cssMode ? -offset - swiper.translate : -offset;\n let tY = 0;\n const tZ = -100 * Math.abs(progress);\n let scale = 1;\n let rotate = -params.perSlideRotate * progress;\n let tXAdd = params.perSlideOffset - Math.abs(progress) * 0.75;\n const slideIndex = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.from + i : i;\n const isSwipeToNext = (slideIndex === activeIndex || slideIndex === activeIndex - 1) && progress > 0 && progress < 1 && (isTouched || swiper.params.cssMode) && currentTranslate < startTranslate;\n const isSwipeToPrev = (slideIndex === activeIndex || slideIndex === activeIndex + 1) && progress < 0 && progress > -1 && (isTouched || swiper.params.cssMode) && currentTranslate > startTranslate;\n if (isSwipeToNext || isSwipeToPrev) {\n const subProgress = (1 - Math.abs((Math.abs(progress) - 0.5) / 0.5)) ** 0.5;\n rotate += -28 * progress * subProgress;\n scale += -0.5 * subProgress;\n tXAdd += 96 * subProgress;\n tY = `${-25 * subProgress * Math.abs(progress)}%`;\n }\n if (progress < 0) {\n // next\n tX = `calc(${tX}px ${rtl ? '-' : '+'} (${tXAdd * Math.abs(progress)}%))`;\n } else if (progress > 0) {\n // prev\n tX = `calc(${tX}px ${rtl ? '-' : '+'} (-${tXAdd * Math.abs(progress)}%))`;\n } else {\n tX = `${tX}px`;\n }\n if (!swiper.isHorizontal()) {\n const prevY = tY;\n tY = tX;\n tX = prevY;\n }\n const scaleString = progress < 0 ? `${1 + (1 - scale) * progress}` : `${1 - (1 - scale) * progress}`;\n\n /* eslint-disable */\n const transform = `\n translate3d(${tX}, ${tY}, ${tZ}px)\n rotateZ(${params.rotate ? rtl ? -rotate : rotate : 0}deg)\n scale(${scaleString})\n `;\n /* eslint-enable */\n\n if (params.slideShadows) {\n // Set shadows\n let shadowEl = slideEl.querySelector('.swiper-slide-shadow');\n if (!shadowEl) {\n shadowEl = createShadow('cards', slideEl);\n }\n if (shadowEl) shadowEl.style.opacity = Math.min(Math.max((Math.abs(progress) - 0.5) / 0.5, 0), 1);\n }\n slideEl.style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;\n const targetEl = effectTarget(params, slideEl);\n targetEl.style.transform = transform;\n }\n };\n const setTransition = duration => {\n const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));\n transformElements.forEach(el => {\n el.style.transitionDuration = `${duration}ms`;\n el.querySelectorAll('.swiper-slide-shadow').forEach(shadowEl => {\n shadowEl.style.transitionDuration = `${duration}ms`;\n });\n });\n effectVirtualTransitionEnd({\n swiper,\n duration,\n transformElements\n });\n };\n effectInit({\n effect: 'cards',\n swiper,\n on,\n setTranslate,\n setTransition,\n perspective: () => true,\n overwriteParams: () => ({\n watchSlidesProgress: true,\n virtualTranslate: !swiper.params.cssMode\n })\n });\n}\n\nexport { EffectCards as default };\n","/* underscore in name -> watch for changes */\nconst paramsList = ['eventsPrefix', 'injectStyles', 'injectStylesUrls', 'modules', 'init', '_direction', 'oneWayMovement', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', 'breakpointsBase', '_spaceBetween', '_slidesPerView', 'maxBackfaceHiddenSlides', '_grid', '_slidesPerGroup', '_slidesPerGroupSkip', '_slidesPerGroupAuto', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_loop', 'loopAdditionalSlides', 'loopAddBlankSlides', 'loopPreventsSliding', '_rewind', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideActiveClass', 'slideVisibleClass', 'slideFullyVisibleClass', 'slideNextClass', 'slidePrevClass', 'slideBlankClass', 'wrapperClass', 'lazyPreloaderClass', 'lazyPreloadPrevNext', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren',\n// modules\n'a11y', '_autoplay', '_controller', 'coverflowEffect', 'cubeEffect', 'fadeEffect', 'flipEffect', 'creativeEffect', 'cardsEffect', 'hashNavigation', 'history', 'keyboard', 'mousewheel', '_navigation', '_pagination', 'parallax', '_scrollbar', '_thumbs', 'virtual', 'zoom', 'control'];\n\nfunction isObject(o) {\n return typeof o === 'object' && o !== null && o.constructor && Object.prototype.toString.call(o).slice(8, -1) === 'Object' && !o.__swiper__;\n}\nfunction extend(target, src) {\n const noExtend = ['__proto__', 'constructor', 'prototype'];\n Object.keys(src).filter(key => noExtend.indexOf(key) < 0).forEach(key => {\n if (typeof target[key] === 'undefined') target[key] = src[key];else if (isObject(src[key]) && isObject(target[key]) && Object.keys(src[key]).length > 0) {\n if (src[key].__swiper__) target[key] = src[key];else extend(target[key], src[key]);\n } else {\n target[key] = src[key];\n }\n });\n}\nfunction needsNavigation(params) {\n if (params === void 0) {\n params = {};\n }\n return params.navigation && typeof params.navigation.nextEl === 'undefined' && typeof params.navigation.prevEl === 'undefined';\n}\nfunction needsPagination(params) {\n if (params === void 0) {\n params = {};\n }\n return params.pagination && typeof params.pagination.el === 'undefined';\n}\nfunction needsScrollbar(params) {\n if (params === void 0) {\n params = {};\n }\n return params.scrollbar && typeof params.scrollbar.el === 'undefined';\n}\nfunction uniqueClasses(classNames) {\n if (classNames === void 0) {\n classNames = '';\n }\n const classes = classNames.split(' ').map(c => c.trim()).filter(c => !!c);\n const unique = [];\n classes.forEach(c => {\n if (unique.indexOf(c) < 0) unique.push(c);\n });\n return unique.join(' ');\n}\nfunction attrToProp(attrName) {\n if (attrName === void 0) {\n attrName = '';\n }\n return attrName.replace(/-[a-z]/g, l => l.toUpperCase().replace('-', ''));\n}\nfunction wrapperClass(className) {\n if (className === void 0) {\n className = '';\n }\n if (!className) return 'swiper-wrapper';\n if (!className.includes('swiper-wrapper')) return `swiper-wrapper ${className}`;\n return className;\n}\n\nfunction updateSwiper(_ref) {\n let {\n swiper,\n slides,\n passedParams,\n changedParams,\n nextEl,\n prevEl,\n scrollbarEl,\n paginationEl\n } = _ref;\n const updateParams = changedParams.filter(key => key !== 'children' && key !== 'direction' && key !== 'wrapperClass');\n const {\n params: currentParams,\n pagination,\n navigation,\n scrollbar,\n virtual,\n thumbs\n } = swiper;\n let needThumbsInit;\n let needControllerInit;\n let needPaginationInit;\n let needScrollbarInit;\n let needNavigationInit;\n let loopNeedDestroy;\n let loopNeedEnable;\n let loopNeedReloop;\n if (changedParams.includes('thumbs') && passedParams.thumbs && passedParams.thumbs.swiper && currentParams.thumbs && !currentParams.thumbs.swiper) {\n needThumbsInit = true;\n }\n if (changedParams.includes('controller') && passedParams.controller && passedParams.controller.control && currentParams.controller && !currentParams.controller.control) {\n needControllerInit = true;\n }\n if (changedParams.includes('pagination') && passedParams.pagination && (passedParams.pagination.el || paginationEl) && (currentParams.pagination || currentParams.pagination === false) && pagination && !pagination.el) {\n needPaginationInit = true;\n }\n if (changedParams.includes('scrollbar') && passedParams.scrollbar && (passedParams.scrollbar.el || scrollbarEl) && (currentParams.scrollbar || currentParams.scrollbar === false) && scrollbar && !scrollbar.el) {\n needScrollbarInit = true;\n }\n if (changedParams.includes('navigation') && passedParams.navigation && (passedParams.navigation.prevEl || prevEl) && (passedParams.navigation.nextEl || nextEl) && (currentParams.navigation || currentParams.navigation === false) && navigation && !navigation.prevEl && !navigation.nextEl) {\n needNavigationInit = true;\n }\n const destroyModule = mod => {\n if (!swiper[mod]) return;\n swiper[mod].destroy();\n if (mod === 'navigation') {\n if (swiper.isElement) {\n swiper[mod].prevEl.remove();\n swiper[mod].nextEl.remove();\n }\n currentParams[mod].prevEl = undefined;\n currentParams[mod].nextEl = undefined;\n swiper[mod].prevEl = undefined;\n swiper[mod].nextEl = undefined;\n } else {\n if (swiper.isElement) {\n swiper[mod].el.remove();\n }\n currentParams[mod].el = undefined;\n swiper[mod].el = undefined;\n }\n };\n if (changedParams.includes('loop') && swiper.isElement) {\n if (currentParams.loop && !passedParams.loop) {\n loopNeedDestroy = true;\n } else if (!currentParams.loop && passedParams.loop) {\n loopNeedEnable = true;\n } else {\n loopNeedReloop = true;\n }\n }\n updateParams.forEach(key => {\n if (isObject(currentParams[key]) && isObject(passedParams[key])) {\n Object.assign(currentParams[key], passedParams[key]);\n if ((key === 'navigation' || key === 'pagination' || key === 'scrollbar') && 'enabled' in passedParams[key] && !passedParams[key].enabled) {\n destroyModule(key);\n }\n } else {\n const newValue = passedParams[key];\n if ((newValue === true || newValue === false) && (key === 'navigation' || key === 'pagination' || key === 'scrollbar')) {\n if (newValue === false) {\n destroyModule(key);\n }\n } else {\n currentParams[key] = passedParams[key];\n }\n }\n });\n if (updateParams.includes('controller') && !needControllerInit && swiper.controller && swiper.controller.control && currentParams.controller && currentParams.controller.control) {\n swiper.controller.control = currentParams.controller.control;\n }\n if (changedParams.includes('children') && slides && virtual && currentParams.virtual.enabled) {\n virtual.slides = slides;\n virtual.update(true);\n } else if (changedParams.includes('virtual') && virtual && currentParams.virtual.enabled) {\n if (slides) virtual.slides = slides;\n virtual.update(true);\n }\n if (changedParams.includes('children') && slides && currentParams.loop) {\n loopNeedReloop = true;\n }\n if (needThumbsInit) {\n const initialized = thumbs.init();\n if (initialized) thumbs.update(true);\n }\n if (needControllerInit) {\n swiper.controller.control = currentParams.controller.control;\n }\n if (needPaginationInit) {\n if (swiper.isElement && (!paginationEl || typeof paginationEl === 'string')) {\n paginationEl = document.createElement('div');\n paginationEl.classList.add('swiper-pagination');\n paginationEl.part.add('pagination');\n swiper.el.appendChild(paginationEl);\n }\n if (paginationEl) currentParams.pagination.el = paginationEl;\n pagination.init();\n pagination.render();\n pagination.update();\n }\n if (needScrollbarInit) {\n if (swiper.isElement && (!scrollbarEl || typeof scrollbarEl === 'string')) {\n scrollbarEl = document.createElement('div');\n scrollbarEl.classList.add('swiper-scrollbar');\n scrollbarEl.part.add('scrollbar');\n swiper.el.appendChild(scrollbarEl);\n }\n if (scrollbarEl) currentParams.scrollbar.el = scrollbarEl;\n scrollbar.init();\n scrollbar.updateSize();\n scrollbar.setTranslate();\n }\n if (needNavigationInit) {\n if (swiper.isElement) {\n if (!nextEl || typeof nextEl === 'string') {\n nextEl = document.createElement('div');\n nextEl.classList.add('swiper-button-next');\n nextEl.innerHTML = swiper.hostEl.constructor.nextButtonSvg;\n nextEl.part.add('button-next');\n swiper.el.appendChild(nextEl);\n }\n if (!prevEl || typeof prevEl === 'string') {\n prevEl = document.createElement('div');\n prevEl.classList.add('swiper-button-prev');\n prevEl.innerHTML = swiper.hostEl.constructor.prevButtonSvg;\n prevEl.part.add('button-prev');\n swiper.el.appendChild(prevEl);\n }\n }\n if (nextEl) currentParams.navigation.nextEl = nextEl;\n if (prevEl) currentParams.navigation.prevEl = prevEl;\n navigation.init();\n navigation.update();\n }\n if (changedParams.includes('allowSlideNext')) {\n swiper.allowSlideNext = passedParams.allowSlideNext;\n }\n if (changedParams.includes('allowSlidePrev')) {\n swiper.allowSlidePrev = passedParams.allowSlidePrev;\n }\n if (changedParams.includes('direction')) {\n swiper.changeDirection(passedParams.direction, false);\n }\n if (loopNeedDestroy || loopNeedReloop) {\n swiper.loopDestroy();\n }\n if (loopNeedEnable || loopNeedReloop) {\n swiper.loopCreate();\n }\n swiper.update();\n}\n\nexport { needsPagination as a, needsScrollbar as b, attrToProp as c, uniqueClasses as d, extend as e, isObject as i, needsNavigation as n, paramsList as p, updateSwiper as u, wrapperClass as w };\n","import { e as extend, i as isObject, c as attrToProp, p as paramsList } from './update-swiper.mjs';\nimport { d as defaults } from './swiper-core.mjs';\n\nconst formatValue = val => {\n if (parseFloat(val) === Number(val)) return Number(val);\n if (val === 'true') return true;\n if (val === '') return true;\n if (val === 'false') return false;\n if (val === 'null') return null;\n if (val === 'undefined') return undefined;\n if (typeof val === 'string' && val.includes('{') && val.includes('}') && val.includes('\"')) {\n let v;\n try {\n v = JSON.parse(val);\n } catch (err) {\n v = val;\n }\n return v;\n }\n return val;\n};\nconst modulesParamsList = ['a11y', 'autoplay', 'controller', 'cards-effect', 'coverflow-effect', 'creative-effect', 'cube-effect', 'fade-effect', 'flip-effect', 'free-mode', 'grid', 'hash-navigation', 'history', 'keyboard', 'mousewheel', 'navigation', 'pagination', 'parallax', 'scrollbar', 'thumbs', 'virtual', 'zoom'];\nfunction getParams(element, propName, propValue) {\n const params = {};\n const passedParams = {};\n extend(params, defaults);\n const localParamsList = [...paramsList, 'on'];\n const allowedParams = localParamsList.map(key => key.replace(/_/, ''));\n\n // First check props\n localParamsList.forEach(paramName => {\n paramName = paramName.replace('_', '');\n if (typeof element[paramName] !== 'undefined') {\n passedParams[paramName] = element[paramName];\n }\n });\n\n // Attributes\n const attrsList = [...element.attributes];\n if (typeof propName === 'string' && typeof propValue !== 'undefined') {\n attrsList.push({\n name: propName,\n value: isObject(propValue) ? {\n ...propValue\n } : propValue\n });\n }\n attrsList.forEach(attr => {\n const moduleParam = modulesParamsList.filter(mParam => attr.name.indexOf(`${mParam}-`) === 0)[0];\n if (moduleParam) {\n const parentObjName = attrToProp(moduleParam);\n const subObjName = attrToProp(attr.name.split(`${moduleParam}-`)[1]);\n if (typeof passedParams[parentObjName] === 'undefined') passedParams[parentObjName] = {};\n if (passedParams[parentObjName] === true) {\n passedParams[parentObjName] = {\n enabled: true\n };\n }\n passedParams[parentObjName][subObjName] = formatValue(attr.value);\n } else {\n const name = attrToProp(attr.name);\n if (!allowedParams.includes(name)) return;\n const value = formatValue(attr.value);\n if (passedParams[name] && modulesParamsList.includes(attr.name) && !isObject(value)) {\n if (passedParams[name].constructor !== Object) {\n passedParams[name] = {};\n }\n passedParams[name].enabled = !!value;\n } else {\n passedParams[name] = value;\n }\n }\n });\n extend(params, passedParams);\n if (params.navigation) {\n params.navigation = {\n prevEl: '.swiper-button-prev',\n nextEl: '.swiper-button-next',\n ...(params.navigation !== true ? params.navigation : {})\n };\n } else if (params.navigation === false) {\n delete params.navigation;\n }\n if (params.scrollbar) {\n params.scrollbar = {\n el: '.swiper-scrollbar',\n ...(params.scrollbar !== true ? params.scrollbar : {})\n };\n } else if (params.scrollbar === false) {\n delete params.scrollbar;\n }\n if (params.pagination) {\n params.pagination = {\n el: '.swiper-pagination',\n ...(params.pagination !== true ? params.pagination : {})\n };\n } else if (params.pagination === false) {\n delete params.pagination;\n }\n return {\n params,\n passedParams\n };\n}\n\nexport { getParams as g };\n","/**\n * Swiper Custom Element 11.0.5\n * Most modern mobile touch slider and framework with hardware accelerated transitions\n * https://swiperjs.com\n *\n * Copyright 2014-2023 Vladimir Kharlampidi\n *\n * Released under the MIT License\n *\n * Released on: November 22, 2023\n */\n\nimport './swiper-bundle.mjs';\nimport { p as paramsList, n as needsNavigation, a as needsPagination, b as needsScrollbar, u as updateSwiper, c as attrToProp } from './shared/update-swiper.mjs';\nimport { g as getParams } from './shared/get-element-params.mjs';\nimport { S as Swiper } from './shared/swiper-core.mjs';\n\n/* eslint-disable spaced-comment */\n\nconst SwiperCSS = `:host{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{width:100%;height:100%;margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android ::slotted(swiper-slide),.swiper-ios ::slotted(swiper-slide),.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}::slotted(swiper-slide){flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}::slotted(.swiper-slide-invisible-blank){visibility:hidden}.swiper-autoheight,.swiper-autoheight ::slotted(swiper-slide){height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden ::slotted(swiper-slide){transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d ::slotted(swiper-slide){transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode ::slotted(swiper-slide){scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode ::slotted(swiper-slide){scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered ::slotted(swiper-slide){scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal ::slotted(swiper-slide):first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical ::slotted(swiper-slide):first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-virtual ::slotted(swiper-slide){-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:host{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}::slotted(.swiper-slide-zoomed){cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode ::slotted(swiper-slide){transition-timing-function:ease-out}.swiper-fade ::slotted(swiper-slide){pointer-events:none;transition-property:opacity}.swiper-fade ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-fade ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-fade ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube ::slotted(swiper-slide){pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-cube.swiper-rtl ::slotted(swiper-slide){transform-origin:100% 0}.swiper-cube ::slotted(.swiper-slide-active),.swiper-cube ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-cube ::slotted(.swiper-slide-active),.swiper-cube ::slotted(.swiper-slide-next),.swiper-cube ::slotted(.swiper-slide-prev){pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube ::slotted(.swiper-slide-next)+::slotted(swiper-slide){pointer-events:auto;visibility:visible}.swiper-flip{overflow:visible}.swiper-flip ::slotted(swiper-slide){pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-flip ::slotted(.swiper-slide-active),.swiper-flip ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-creative ::slotted(swiper-slide){-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards ::slotted(swiper-slide){transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}`\nconst SwiperSlideCSS = `::slotted(.swiper-slide-shadow),::slotted(.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-top){position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}::slotted(.swiper-slide-shadow){background:rgba(0,0,0,.15)}::slotted(.swiper-slide-shadow-left){background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-right){background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-top){background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-bottom){background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear;width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-top){z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-top){z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}::slotted(.swiper-zoom-container){width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}::slotted(.swiper-zoom-container)>canvas,::slotted(.swiper-zoom-container)>img,::slotted(.swiper-zoom-container)>svg{max-width:100%;max-height:100%;object-fit:contain}`\n\nclass DummyHTMLElement {}\nconst ClassToExtend = typeof window === 'undefined' || typeof HTMLElement === 'undefined' ? DummyHTMLElement : HTMLElement;\nconst arrowSvg = `\n `;\nconst addStyle = (shadowRoot, styles) => {\n if (typeof CSSStyleSheet !== 'undefined' && shadowRoot.adoptedStyleSheets) {\n const styleSheet = new CSSStyleSheet();\n styleSheet.replaceSync(styles);\n shadowRoot.adoptedStyleSheets = [styleSheet];\n } else {\n const style = document.createElement('style');\n style.rel = 'stylesheet';\n style.textContent = styles;\n shadowRoot.appendChild(style);\n }\n};\nclass SwiperContainer extends ClassToExtend {\n constructor() {\n super();\n this.attachShadow({\n mode: 'open'\n });\n }\n static get nextButtonSvg() {\n return arrowSvg;\n }\n static get prevButtonSvg() {\n return arrowSvg.replace('/>', ' transform-origin=\"center\" transform=\"rotate(180)\"/>');\n }\n cssStyles() {\n return [SwiperCSS,\n // eslint-disable-line\n ...(this.injectStyles && Array.isArray(this.injectStyles) ? this.injectStyles : [])].join('\\n');\n }\n cssLinks() {\n return this.injectStylesUrls || [];\n }\n calcSlideSlots() {\n const currentSideSlots = this.slideSlots || 0;\n // slide slots\n const slideSlotChildren = [...this.querySelectorAll(`[slot^=slide-]`)].map(child => {\n return parseInt(child.getAttribute('slot').split('slide-')[1], 10);\n });\n this.slideSlots = slideSlotChildren.length ? Math.max(...slideSlotChildren) + 1 : 0;\n if (!this.rendered) return;\n if (this.slideSlots > currentSideSlots) {\n for (let i = currentSideSlots; i < this.slideSlots; i += 1) {\n const slideEl = document.createElement('swiper-slide');\n slideEl.setAttribute('part', `slide slide-${i + 1}`);\n const slotEl = document.createElement('slot');\n slotEl.setAttribute('name', `slide-${i + 1}`);\n slideEl.appendChild(slotEl);\n this.shadowRoot.querySelector('.swiper-wrapper').appendChild(slideEl);\n }\n } else if (this.slideSlots < currentSideSlots) {\n const slides = this.swiper.slides;\n for (let i = slides.length - 1; i >= 0; i -= 1) {\n if (i > this.slideSlots) {\n slides[i].remove();\n }\n }\n }\n }\n render() {\n if (this.rendered) return;\n this.calcSlideSlots();\n\n // local styles\n let localStyles = this.cssStyles();\n if (this.slideSlots > 0) {\n localStyles = localStyles.replace(/::slotted\\(([a-z-0-9.]*)\\)/g, '$1');\n }\n if (localStyles.length) {\n addStyle(this.shadowRoot, localStyles);\n }\n this.cssLinks().forEach(url => {\n const linkExists = this.shadowRoot.querySelector(`link[href=\"${url}\"]`);\n if (linkExists) return;\n const linkEl = document.createElement('link');\n linkEl.rel = 'stylesheet';\n linkEl.href = url;\n this.shadowRoot.appendChild(linkEl);\n });\n // prettier-ignore\n const el = document.createElement('div');\n el.classList.add('swiper');\n el.part = 'container';\n\n // prettier-ignore\n el.innerHTML = `\n \n
\n \n ${Array.from({\n length: this.slideSlots\n }).map((_, index) => `\n \n \n \n `).join('')}\n
\n \n ${needsNavigation(this.passedParams) ? `\n
${this.constructor.prevButtonSvg}
\n
${this.constructor.nextButtonSvg}
\n ` : ''}\n ${needsPagination(this.passedParams) ? `\n
\n ` : ''}\n ${needsScrollbar(this.passedParams) ? `\n
\n ` : ''}\n `;\n this.shadowRoot.appendChild(el);\n this.rendered = true;\n }\n initialize() {\n var _this = this;\n if (this.initialized) return;\n this.initialized = true;\n const {\n params: swiperParams,\n passedParams\n } = getParams(this);\n this.swiperParams = swiperParams;\n this.passedParams = passedParams;\n delete this.swiperParams.init;\n this.render();\n\n // eslint-disable-next-line\n this.swiper = new Swiper(this.shadowRoot.querySelector('.swiper'), {\n ...(swiperParams.virtual ? {} : {\n observer: true,\n observeSlideChildren: this.slideSlots > 0\n }),\n ...swiperParams,\n touchEventsTarget: 'container',\n onAny: function (name) {\n if (name === 'observerUpdate') {\n _this.calcSlideSlots();\n }\n const eventName = swiperParams.eventsPrefix ? `${swiperParams.eventsPrefix}${name.toLowerCase()}` : name.toLowerCase();\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n const event = new CustomEvent(eventName, {\n detail: args,\n bubbles: name !== 'hashChange',\n cancelable: true\n });\n _this.dispatchEvent(event);\n }\n });\n }\n connectedCallback() {\n if (this.initialized && this.nested && this.closest('swiper-slide') && this.closest('swiper-slide').swiperLoopMoveDOM) {\n return;\n }\n if (this.init === false || this.getAttribute('init') === 'false') {\n return;\n }\n this.initialize();\n }\n disconnectedCallback() {\n if (this.nested && this.closest('swiper-slide') && this.closest('swiper-slide').swiperLoopMoveDOM) {\n return;\n }\n if (this.swiper && this.swiper.destroy) {\n this.swiper.destroy();\n }\n this.initialized = false;\n }\n updateSwiperOnPropChange(propName, propValue) {\n const {\n params: swiperParams,\n passedParams\n } = getParams(this, propName, propValue);\n this.passedParams = passedParams;\n this.swiperParams = swiperParams;\n if (this.swiper && this.swiper.params[propName] === propValue) {\n return;\n }\n updateSwiper({\n swiper: this.swiper,\n passedParams: this.passedParams,\n changedParams: [attrToProp(propName)],\n ...(propName === 'navigation' && passedParams[propName] ? {\n prevEl: '.swiper-button-prev',\n nextEl: '.swiper-button-next'\n } : {}),\n ...(propName === 'pagination' && passedParams[propName] ? {\n paginationEl: '.swiper-pagination'\n } : {}),\n ...(propName === 'scrollbar' && passedParams[propName] ? {\n scrollbarEl: '.swiper-scrollbar'\n } : {})\n });\n }\n attributeChangedCallback(attr, prevValue, newValue) {\n if (!this.initialized) return;\n if (prevValue === 'true' && newValue === null) {\n newValue = false;\n }\n this.updateSwiperOnPropChange(attr, newValue);\n }\n static get observedAttributes() {\n const attrs = paramsList.filter(param => param.includes('_')).map(param => param.replace(/[A-Z]/g, v => `-${v}`).replace('_', '').toLowerCase());\n return attrs;\n }\n}\nparamsList.forEach(paramName => {\n if (paramName === 'init') return;\n paramName = paramName.replace('_', '');\n Object.defineProperty(SwiperContainer.prototype, paramName, {\n configurable: true,\n get() {\n return (this.passedParams || {})[paramName];\n },\n set(value) {\n if (!this.passedParams) this.passedParams = {};\n this.passedParams[paramName] = value;\n if (!this.initialized) return;\n this.updateSwiperOnPropChange(paramName, value);\n }\n });\n});\nclass SwiperSlide extends ClassToExtend {\n constructor() {\n super();\n this.attachShadow({\n mode: 'open'\n });\n }\n render() {\n const lazy = this.lazy || this.getAttribute('lazy') === '' || this.getAttribute('lazy') === 'true';\n addStyle(this.shadowRoot, SwiperSlideCSS);\n this.shadowRoot.appendChild(document.createElement('slot'));\n if (lazy) {\n const lazyDiv = document.createElement('div');\n lazyDiv.classList.add('swiper-lazy-preloader');\n lazyDiv.part.add('preloader');\n this.shadowRoot.appendChild(lazyDiv);\n }\n }\n initialize() {\n this.render();\n }\n connectedCallback() {\n this.initialize();\n }\n}\n\n// eslint-disable-next-line\nconst register = () => {\n if (typeof window === 'undefined') return;\n if (!window.customElements.get('swiper-container')) window.customElements.define('swiper-container', SwiperContainer);\n if (!window.customElements.get('swiper-slide')) window.customElements.define('swiper-slide', SwiperSlide);\n};\nif (typeof window !== 'undefined') {\n window.SwiperElementRegisterParams = params => {\n paramsList.push(...params);\n };\n}\n\nexport { SwiperContainer, SwiperSlide, register };\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n color:var(--color-neutral-100);\n}\n\n[slot='image'] div.contextual{\n display:none;\n}\n\nchop-carousel-card [slot='image'],\n chop-carousel-card [slot='image'] div:not(.contextual),\n chop-carousel-card [slot='image'] img{\n aspect-ratio:3/2;\n height:auto;\n width:100%;\n object-fit:cover;\n display:block;\n }\n\nchop-heading :host{\n display:block;\n}\n\nchop-heading .chop-headline{\n color:inherit;\n font-family:var(--headline-2xl-mid-font-family);\n display:block;\n margin:0;\n font-weight:inherit;\n word-break:keep-all;\n\n}\n\nchop-heading .chop-headline a{\n text-decoration:none;\n }\n\nchop-heading .chop-headline a:hover{\n text-decoration:underline;\n }\n\nchop-heading .chop-headline p{\n padding:0;\n margin:0;\n text-align:left;\n }\n\nchop-heading .chop-headline.brown-900{\n color:var(--color-brown-900);\n }\n\nchop-heading .clickable-card h1,\n chop-heading .clickable-card h2,\n chop-heading .clickable-card h3,\n chop-heading .clickable-card h4,\n chop-heading .clickable-card h5,\n chop-heading .clickable-card h6,\n chop-heading .clickable-card a{\n color:var(--color-blue-600);\n text-decoration:none;\n word-break:keep-all;\n }\n\nchop-heading .clickable-card h1:hover, chop-heading .clickable-card h2:hover, chop-heading .clickable-card h3:hover, chop-heading .clickable-card h4:hover, chop-heading .clickable-card h5:hover, chop-heading .clickable-card h6:hover, chop-heading .clickable-card a:hover{\n text-decoration:underline;\n cursor:pointer;\n }\n\nchop-heading .clickable-card h1:focus,\n chop-heading .clickable-card h1:focus-visible,\n chop-heading .clickable-card h2:focus,\n chop-heading .clickable-card h2:focus-visible,\n chop-heading .clickable-card h3:focus,\n chop-heading .clickable-card h3:focus-visible,\n chop-heading .clickable-card h4:focus,\n chop-heading .clickable-card h4:focus-visible,\n chop-heading .clickable-card h5:focus,\n chop-heading .clickable-card h5:focus-visible,\n chop-heading .clickable-card h6:focus,\n chop-heading .clickable-card h6:focus-visible,\n chop-heading .clickable-card a:focus,\n chop-heading .clickable-card a:focus-visible{\n outline:2px solid var(--color-blue-600);\n outline-offset:2px;\n border-radius:8px;\n }\n\nchop-heading .clickable-card h1:after, chop-heading .clickable-card h2:after, chop-heading .clickable-card h3:after, chop-heading .clickable-card h4:after, chop-heading .clickable-card h5:after, chop-heading .clickable-card h6:after, chop-heading .clickable-card a:after{\n position:absolute;\n inset:0;\n content:'';\n }\n\nchop-heading .clickable-card.dark-mode h1,\n chop-heading .clickable-card.dark-mode h2,\n chop-heading .clickable-card.dark-mode h3,\n chop-heading .clickable-card.dark-mode h4,\n chop-heading .clickable-card.dark-mode h5,\n chop-heading .clickable-card.dark-mode h6,\n chop-heading .clickable-card.dark-mode a{\n color:var(--color-neutral-100);\n text-decoration:none;\n }\n\nchop-heading .clickable-card.dark-mode h1:hover, chop-heading .clickable-card.dark-mode h2:hover, chop-heading .clickable-card.dark-mode h3:hover, chop-heading .clickable-card.dark-mode h4:hover, chop-heading .clickable-card.dark-mode h5:hover, chop-heading .clickable-card.dark-mode h6:hover, chop-heading .clickable-card.dark-mode a:hover{\n text-decoration:underline;\n cursor:pointer;\n }\n\nchop-heading .clickable-card.dark-mode h1:focus,\n chop-heading .clickable-card.dark-mode h1:focus-visible,\n chop-heading .clickable-card.dark-mode h2:focus,\n chop-heading .clickable-card.dark-mode h2:focus-visible,\n chop-heading .clickable-card.dark-mode h3:focus,\n chop-heading .clickable-card.dark-mode h3:focus-visible,\n chop-heading .clickable-card.dark-mode h4:focus,\n chop-heading .clickable-card.dark-mode h4:focus-visible,\n chop-heading .clickable-card.dark-mode h5:focus,\n chop-heading .clickable-card.dark-mode h5:focus-visible,\n chop-heading .clickable-card.dark-mode h6:focus,\n chop-heading .clickable-card.dark-mode h6:focus-visible,\n chop-heading .clickable-card.dark-mode a:focus,\n chop-heading .clickable-card.dark-mode a:focus-visible{\n outline:2px solid var(--color-neutral-100);\n outline-offset:2px;\n border-radius:8px;\n }\n\nchop-heading .clickable-card.dark-mode h1:after, chop-heading .clickable-card.dark-mode h2:after, chop-heading .clickable-card.dark-mode h3:after, chop-heading .clickable-card.dark-mode h4:after, chop-heading .clickable-card.dark-mode h5:after, chop-heading .clickable-card.dark-mode h6:after, chop-heading .clickable-card.dark-mode a:after{\n position:absolute;\n inset:0;\n content:'';\n }\n\nchop-heading .headline-3xl{\n font-size:var(--fs-4half-xl);\n line-height:var(--headline-3xl-min-line-height);\n font-family:var(--headline-3xl-min-font-family);\n letter-spacing:var(--headline-3xl-min-letter-spacing);\n text-transform:var(--headline-3xl-min-text-case);\n font-weight:var(--headline-3xl-min-font-weight);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-3xl{\n font-size:clamp(2.5rem, 2.5rem + 3.125vw, 4.5rem);\n line-height:var(--headline-3xl-mid-line-height);\n font-family:var(--headline-3xl-mid-font-family);\n letter-spacing:var(--headline-3xl-mid-letter-spacing);\n text-transform:var(--headline-3xl-mid-text-case);\n font-weight:var(--headline-3xl-mid-font-weight)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-3xl{\n line-height:var(--headline-3xl-max-line-height);\n font-family:var(--headline-3xl-max-font-family);\n letter-spacing:var(--headline-3xl-max-letter-spacing);\n text-transform:var(--headline-3xl-max-text-case);\n font-weight:var(--headline-3xl-max-font-weight)\n}\n }\n\nchop-heading .headline-2xl{\n font-size:clamp(2.25rem, 2.25rem + 2.734375vw, 4rem);\n font-weight:var(--headline-2xl-min-font-weight);\n line-height:var(--headline-2xl-min-line-height);\n font-family:var(--headline-2xl-min-font-family);\n letter-spacing:var(--headline-2xl-min-letter-spacing);\n text-transform:var(--headline-2xl-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-2xl{\n font-weight:var(--headline-2xl-mid-font-weight);\n line-height:var(--headline-2xl-mid-line-height);\n font-family:var(--headline-2xl-mid-font-family);\n letter-spacing:var(--headline-2xl-mid-letter-spacing);\n text-transform:var(--headline-2xl-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-2xl{\n font-weight:var(--headline-2xl-max-font-weight);\n line-height:var(--headline-2xl-max-line-height);\n font-family:var(--headline-2xl-max-font-family);\n letter-spacing:var(--headline-2xl-max-letter-spacing);\n text-transform:var(--headline-2xl-max-text-case)\n}\n }\n\nchop-heading .headline-xl{\n font-size:clamp(2rem, 2rem + 2.34375vw, 3.5rem);\n font-weight:var(--headline-xl-min-font-weight);\n line-height:var(--headline-xl-min-line-height);\n font-family:var(--headline-xl-min-font-family);\n letter-spacing:var(--headline-xl-min-letter-spacing);\n text-transform:var(--headline-xl-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-xl{\n font-weight:var(--headline-xl-mid-font-weight);\n line-height:var(--headline-xl-mid-line-height);\n font-family:var(--headline-xl-mid-font-family);\n letter-spacing:var(--headline-xl-mid-letter-spacing);\n text-transform:var(--headline-xl-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-xl{\n font-weight:var(--headline-xl-max-font-weight);\n line-height:var(--headline-xl-max-line-height);\n font-family:var(--headline-xl-max-font-family);\n letter-spacing:var(--headline-xl-max-letter-spacing);\n text-transform:var(--headline-xl-max-text-case)\n}\n }\n\nchop-heading .headline-lg{\n font-weight:var(--headline-lg-min-font-weight);\n font-size:clamp(1.75rem, 1.75rem + 1.5625vw, 2.75rem);\n font-size:clamp(1.625rem, 1.625rem + 1.3672vw, 2.5rem);\n line-height:var(--headline-lg-min-line-height);\n font-family:var(--headline-lg-min-font-family);\n letter-spacing:var(--headline-lg-min-letter-spacing);\n text-transform:var(--headline-lg-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-lg{\n font-weight:var(--headline-lg-mid-font-weight);\n line-height:var(--headline-lg-mid-line-height);\n font-family:var(--headline-lg-mid-font-family);\n letter-spacing:var(--headline-lg-mid-letter-spacing);\n text-transform:var(--headline-lg-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-lg{\n font-weight:var(--headline-lg-max-font-weight);\n line-height:var(--headline-lg-max-line-height);\n font-family:var(--headline-lg-max-font-family);\n letter-spacing:var(--headline-lg-max-letter-spacing);\n text-transform:var(--headline-lg-max-text-case)\n}\n }\n\nchop-heading .headline-md{\n font-size:clamp(1.5rem, 1.5rem + 1.171875vw, 2.25rem);\n line-height:var(--headline-md-min-line-height);\n font-family:var(--headline-md-min-font-family);\n font-weight:var(--headline-md-min-font-weight);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-md{\n font-weight:var(--headline-md-mid-font-weight);\n line-height:var(--headline-md-mid-line-height);\n font-family:var(--headline-md-mid-font-family);\n letter-spacing:var(--headline-md-mid-letter-spacing);\n text-transform:var(--headline-md-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-md{\n font-weight:var(--headline-md-max-font-weight);\n line-height:var(--headline-md-max-line-height);\n font-family:var(--headline-md-max-font-family);\n letter-spacing:var(--headline-md-max-letter-spacing);\n text-transform:var(--headline-md-max-text-case)\n}\n }\n\nchop-heading .headline-sm{\n font-weight:var(--headline-sm-min-font-weight);\n font-size:clamp(1.25rem, 1.25rem + 0.78125vw, 1.75rem);\n line-height:var(--headline-sm-min-line-height);\n font-family:var(--headline-sm-min-font-family);\n letter-spacing:var(--headline-sm-min-letter-spacing);\n text-transform:var(--headline-sm-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-sm{\n font-weight:var(--headline-sm-mid-font-weight);\n line-height:var(--headline-md-mid-line-height);\n font-family:var(--headline-md-mid-font-family);\n letter-spacing:var(--headline-md-mid-letter-spacing);\n text-transform:var(--headline-md-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-sm{\n font-weight:var(--headline-sm-max-font-weight);\n line-height:var(--headline-sm-max-line-height);\n font-family:var(--headline-sm-max-font-family);\n letter-spacing:var(--headline-sm-max-letter-spacing);\n text-transform:var(--headline-sm-max-text-case)\n}\n }\n\nchop-heading .headline-xs{\n font-size:clamp(1.125rem, 1.125rem + 0.5859375vw, 1.5rem);\n font-weight:var(--headline-xs-min-font-weight);\n line-height:var(--headline-xs-min-line-height);\n font-family:var(--headline-xs-min-font-family);\n letter-spacing:var(--headline-xs-min-letter-spacing);\n text-transform:var(--headline-xs-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-xs{\n font-weight:var(--headline-xs-mid-font-weight);\n line-height:var(--headline-xs-mid-line-height);\n font-family:var(--headline-xs-mid-font-family);\n letter-spacing:var(--headline-xs-mid-letter-spacing);\n text-transform:var(--headline-xs-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-xs{\n font-weight:var(--headline-xs-max-font-weight);\n line-height:var(--headline-xs-max-line-height);\n font-family:var(--headline-xs-max-font-family);\n letter-spacing:var(--headline-xs-max-letter-spacing);\n text-transform:var(--headline-xs-max-text-case)\n}\n }\n\nchop-heading .headline-eyebrow{\n font-size:clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);\n font-weight:700;\n letter-spacing:3px;\n text-transform:uppercase;\n line-height:var(--headline-eyebrow-min-line-height);\n font-family:var(--headline-eyebrow-min-font-family);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-eyebrow{\n line-height:var(--headline-eyebrow-mid-line-height);\n font-family:var(--headline-eyebrow-mid-font-family)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-eyebrow{\n line-height:var(--headline-eyebrow-max-line-height);\n font-family:var(--headline-eyebrow-max-font-family)\n}\n }\n\n@media (min-width: 860px){\n chop-heading .less-margin-bottom--xs{\n margin-bottom:-0.5rem;\n }\n chop-heading .less-margin-bottom--sm{\n margin-bottom:-1rem;\n }\n chop-heading .less-margin-bottom--md{\n margin-bottom:-2rem;\n }\n chop-heading .less-margin-bottom--lg{\n margin-bottom:-3rem;\n }\n chop-heading .less-margin-bottom--xl{\n margin-bottom:-4rem;\n }\n chop-heading .less-margin-bottom--2xl{\n margin-bottom:-5rem;\n }\n chop-heading .less-margin-bottom--3xl{\n margin-bottom:-6rem;\n }\n}\n\nchop-cta-link{\n --chop-cta-link--family--computed:var(--chop-cta-link--family, var(--ff-body));\n --chop-cta-link--weight--computed:var(--fw-bold);\n --chop-cta-link--padding-small--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);\n --chop-cta-link--padding-small-hover--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);\n --chop-cta-link--padding-default--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);\n --chop-cta-link--padding-default-hover--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);\n --chop-cta-link--padding-large--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);\n --chop-cta-link--padding-large-hover--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);\n --chop-cta-link--primary-bg-color--computed:var(--color-blue-700);\n --chop-cta-link--primary-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring--computed:var(--chop-cta-link--primary-ring, none);\n --chop-cta-link--primary-bg-color-hover--computed:var(--color-neutral-100);\n --chop-cta-linknknk--primary-color-hover--computed:var(\n --chop-cta-link--primary-color-hover,\n var(--color-blue-600)\n);\n --chop-cta-link--primary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring-hover--computed:var(--color-blue-700);\n --chop-cta-link--primary-bg-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--primary-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--primary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--primary-disabled-bg-color--computed:var(--color-neutral-400);\n --chop-cta-link--primary-disabled-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-disabled-ring--computed:var(--outline-transparent);\n --chop-cta-link--primary-reversed-bg-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-color--computed:var(--color-blue-700);\n --chop-cta-link--primary-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring--computed:var(\n --chop-cta-link--primary-reversed-ring,\n none\n);\n --chop-cta-link--primary-reversed-bg-color-hover--computed:var(\n --bg-color--transparent\n);\n --chop-cta-link--primary-reversed-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring-hover--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-bg-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--primary-reversed-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--primary-reversed-disabled-bg-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--primary-reversed-disabled-color--computed:var(\n --color-neutral-500\n);\n --chop-cta-link--primary-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-bg-color--computed:var(--color-neutral-100);\n --chop-cta-link--outline-color--computed:var(--color-blue-700);\n --chop-cta-link--outline-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring--computed:var(--color-blue-700);\n --chop-cta-link--outline-bg-color-hover--computed:var(--color-blue-700);\n --chop-cta-link--outline-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--outline-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring-hover--computed:var(--color-blue-700);\n --chop-cta-link--outline-bg-color-focus--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--outline-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--outline-disabled-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--outline-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-color--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-bg-color-hover--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-color-hover--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring-hover--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-bg-color-focus--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-color-focus--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring-focus--computed:var(\n --color-blue-500\n);\n --chop-cta-link--outline-reversed-disabled-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--outline-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--secondary-bg-color--computed:var(--color-pink-800);\n --chop-cta-link--secondary-color--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring--computed:var(\n --chop-cta-link--secondary-ring,\n none\n);\n --chop-cta-link--secondary-bg-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-color-hover--computed:var(\n --chop-cta-link--secondary-color-hover,\n var(--color-pink-800)\n);\n --chop-cta-link--secondary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring-hover--computed:var(--color-pink-800);\n --chop-cta-link--secondary-bg-color-focus--computed:var(--color-pink-800);\n --chop-cta-link--secondary-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring-focus--computed:var(--color-pink-800);\n --chop-cta-link--secondary-disabled-bg-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--secondary-disabled-color--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-disabled-ring--computed:var(--outline-transparent);\n --chop-cta-link--link-bg-color--computed:var(--outline-transparent);\n --chop-cta-link--link-color--computed:var(--color-blue-700);\n --chop-cta-link--link-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-ring--computed:var(--color-blue-700);\n --chop-cta-link--link-color-hover--computed:var(--color-blue-800);\n --chop-cta-link--link-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--link-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-disabled-color--computed:var(--color-neutral-400);\n --chop-cta-link--link-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color--computed:var(--color-neutral-100);\n --chop-cta-link--link-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color-hover--computed:var(--color-blue-700);\n --chop-cta-link--link-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--link-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--link-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n}\n\nchop-cta-link .btn{\n display:flex;\n width:fit-content;\n flex-wrap:nowrap;\n align-items:center;\n cursor:pointer;\n transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration:300ms;\n text-decoration-line:none;\n outline:none;\n border:none;\n border-radius:0.5rem;\n line-height:1.5;\n background:transparent;\n\n font-family:var(--chop-cta-link--family--computed);\n font-weight:var(--chop-cta-link--weight--computed);\n padding:var(--chop-cta-link--padding-default--computed);\n}\n\nchop-cta-link .btn[aria-disabled='true']{\n pointer-events:none;\n cursor:not-allowed;\n user-select:none;\n}\n\nchop-cta-link .btn.small{\n font-size:var(--fs-sm);\n line-height:var(--lh-base);\n padding:var(--chop-cta-link--padding-small--computed);\n}\n\nchop-cta-link .btn.small.no-icon{\n padding:var(--spacing-02) var(--spacing-4);\n }\n\nchop-cta-link .btn.medium,\nchop-cta-link .btn.default{\n font-size:var(--fs-base);\n line-height:var(--lh-md);\n}\n\nchop-cta-link .btn.medium.no-icon, chop-cta-link .btn.default.no-icon{\n padding:var(--spacing-02) var(--spacing-6);\n }\n\nchop-cta-link .btn.large{\n font-size:var(--fs-lg);\n line-height:var(--lh-sm);\n padding:var(--chop-cta-link--padding-large--computed);\n}\n\nchop-cta-link .btn.large.no-icon{\n padding:var(--spacing-03) var(--spacing-8);\n }\n\nchop-cta-link .btn.primary{\n background-color:var(--chop-cta-link--primary-bg-color--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight--computed);\n border:2px solid var(--chop-cta-link--primary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring--computed);\n}\n\nchop-cta-link .btn.primary:hover,\n chop-cta-link .btn.primary:active{\n background-color:var(--chop-cta-link--primary-color--computed);\n color:var(--chop-cta-link--primary-bg-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring-hover--computed);\n }\n\nchop-cta-link .btn.primary:focus{\n background-color:var(--chop-cta-link--primary-bg-color-focus--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\n\nchop-cta-link .btn.primary[aria-disabled='true']{\n background-color:var(--chop-cta-link--primary-disabled-bg-color--computed);\n color:var(--chop-cta-link--primary-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-disabled-ring--computed);\n}\n\nchop-cta-link .btn.primary.reversed{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n}\n\nchop-cta-link .btn.primary.reversed:hover,\n chop-cta-link .btn.primary.reversed:active{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n }\n\nchop-cta-link .btn.primary.reversed:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\n\nchop-cta-link .btn.primary.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\n\nchop-cta-link .btn.outline{\n background-color:var(--chop-cta-link--outline-bg-color--computed);\n color:var(--chop-cta-link--outline-color--computed);\n font-weight:var(--chop-cta-link--outline-weight--computed);\n border:2px solid var(--chop-cta-link--outline-ring--computed);\n box-shadow:var(--chop-cta-link--outline-ring--computed);\n}\n\nchop-cta-link .btn.outline:hover{\n background-color:var(--chop-cta-link--outline-bg-color-hover--computed);\n color:var(--chop-cta-link--outline-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-ring-hover--computed);\n }\n\nchop-cta-link .btn.outline:focus{\n background-color:var(--chop-cta-link--outline-bg-color-focus--computed);\n color:var(--chop-cta-link--outline-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-ring-focus--computed);\n outline-offset:2px;\n }\n\nchop-cta-link .btn.outline[aria-disabled='true']{\n background-color:var(--chop-cta-link--outline-disabled-bg-color--computed);\n color:var(--chop-cta-link--outline-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-disabled-ring--computed);\n}\n\nchop-cta-link .btn.outline.reversed{\n background-color:var(--chop-cta-link--outline-reversed-bg-color--computed);\n color:var(--chop-cta-link--outline-reversed-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-ring--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring--computed);\n}\n\nchop-cta-link .btn.outline.reversed:hover,\n chop-cta-link .btn.outline.reversed:active{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-hover--computed);\n }\n\nchop-cta-link .btn.outline.reversed:focus{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-focus--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-reversed-ring-focus--computed);\n }\n\nchop-cta-link .btn.outline.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--outline-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--outline-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-disabled-ring--computed);\n}\n\nchop-cta-link .btn.outline-transparent{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n}\n\nchop-cta-link .btn.outline-transparent:hover,\n chop-cta-link .btn.outline-transparent:active{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n }\n\nchop-cta-link .btn.outline-transparent:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n }\n\nchop-cta-link .btn.outline-transparent[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\n\nchop-cta-link .btn.secondary{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n color:var(--chop-cta-link--secondary-color--computed);\n font-weight:var(--chop-cta-link--secondary-weight--computed);\n border:2px solid var(--chop-cta-link--secondary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring--computed);\n}\n\nchop-cta-link .btn.secondary:hover{\n background-color:var(--chop-cta-link--secondary-bg-color-hover--computed);\n color:var(--chop-cta-link--secondary-color-hover--computed);\n font-weight:var(--chop-cta-link--secondary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-hover--computed);\n }\n\nchop-cta-link .btn.secondary:focus{\n background-color:var(--chop-cta-link--secondary-bg-color-focus--computed);\n color:var(--chop-cta-link--secondary-color-focus--computed);\n font-weight:var(--chop-cta-link--secondary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--secondary-ring-focus--computed);\n outline-offset:2px;\n }\n\nchop-cta-link .btn.secondary:active{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n }\n\nchop-cta-link .btn.secondary[aria-disabled='true']{\n background-color:var(--chop-cta-link--secondary-disabled-bg-color--computed);\n color:var(--chop-cta-link--secondary-disabled-color--computed);\n font-weight:var(--chop-cta-link--secondary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--secondary-disabled-ring--computed);\n}\n\nchop-cta-link .btn.link{\n position:relative;\n padding:0;\n color:var(--chop-cta-link--link-color--computed);\n font-weight:var(--fw-semibold);\n border-radius:0.5rem;\n text-decoration:none;\n background:transparent;\n}\n\nchop-cta-link .btn.link::after{\n content:'';\n display:none;\n position:absolute;\n bottom:0;\n left:0;\n right:0;\n margin-left:auto;\n margin-right:auto;\n border:1px solid var(--chop-cta-link--link-color--computed);\n }\n\nchop-cta-link .btn.link .chevron-icon{\n transition:0.3s ease-in-out;\n }\n\nchop-cta-link .btn.link:hover{\n color:var(--chop-cta-link--link-color-hover--computed);\n }\n\nchop-cta-link .btn.link:hover::after{\n display:block;\n }\n\nchop-cta-link .btn.link:hover > .chevron-icon{\n transform:translateX(8px);\n }\n\nchop-cta-link .btn.link:focus{\n color:var(--chop-cta-link--link-color-focus--computed);\n font-weight:var(--chop-cta-link--link-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-ring--computed);\n }\n\nchop-cta-link .btn.link[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\n\nchop-cta-link .btn.link.reversed{\n background-color:transparent;\n color:var(--chop-cta-link--link-reversed-color--computed);\n}\n\nchop-cta-link .btn.link.reversed::after{\n border:1px solid var(--chop-cta-link--link-reversed-color--computed);\n }\n\nchop-cta-link .btn.link.reversed:hover::after{\n display:block;\n }\n\nchop-cta-link .btn.link.reversed:focus{\n color:var(--chop-cta-link--link-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--link-reversed-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-reversed-color--computed);\n }\n\nchop-cta-link .btn.link.no-hover::after{\n display:none !important;\n }\n\nchop-cta-link .btn.link.reversed[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\n\nchop-cta-link .btn.full-width{\n display:flex;\n width:100%;\n justify-content:space-between;\n}\n\nchop-cta-link .heart-icon{\n margin-right:var(--spacing-01);\n}\n\nchop-cta-link .external-icon{\n margin-left:var(--spacing-01);\n}\n\nchop-cta-link .chevron-icon{\n margin-left:auto;\n}\n\n@media print{\n chop-cta-link .btn.link.reversed{\n color:currentColor;\n background:transparent;\n }\n}\n\nchop-styled-text :host{\n padding:0;\n}\n\nchop-styled-text :host h2,\n chop-styled-text :host h3,\n chop-styled-text :host h4,\n chop-styled-text :host h5,\n chop-styled-text :host h6{\n margin:0;\n margin-block-start:0;\n }\n\nchop-styled-text{\n font-family:var(--font-family-serif);\n font-size:var(--fs-lg);\n font-weight:var(--fw-normal);\n}\n\n@media (min-width: 1100px){\n\nchop-timeline-card{\n width:calc(100% - 80px)\n}\n }\n\nchop-timeline-card [slot='image']{\n display:flex;\n }\n\nchop-timeline-card [slot='image'] img{\n border-radius:var(--border-radius-rounded-small);\n max-width:100%;\n object-fit:cover;\n }\n\nswiper-container{\n --swiper-theme-color:#ababab;\n --swiper-navigation-size:22px;\n --swiper-navigation-color:var(--color-neutral-100);\n --swiper-navigation-sides-offset:0px;\n --swiper-pagination-color:transparent;\n --swiper-pagination-bullet-border-radius:0;\n --swiper-pagination-bullet-horizontal-gap:1rem;\n --swiper-pagination-bullet-vertical-gap:1rem;\n --swiper-pagination-bullet-size:24px;\n --swiper-pagination-bullet-width:auto;\n --swiper-pagination-bullet-height:auto;\n --swiper-pagination-bullet-opacity:1;\n --swiper-pagination-bullet-inactive-color:transparent;\n --swiper-pagination-bullet-inactive-opacity:1;\n --swiper-pagination-bottom:auto;\n --swiper-preloader-color:var(--swiper-theme-color);\n}\n\n.timeline.carousel swiper-container{\n max-width:1320px;\n}\n\n.timeline.carousel swiper-container::part(wrapper){\n max-width:1320px;\n}\n\n@media (min-width: 1100px){\n\n.timeline.carousel swiper-container::part(wrapper){\n width:calc(100% -80px);\n padding:0 var(--spacing-10)\n}\n }\n\n.timeline.carousel swiper-container::part(bullet){\n font-family:'TP Rubrik';\n font-family:var(--ff-display, 'TP Rubrik');\n text-align:center;\n line-height:var(--lh-lg);\n font-size:var(--fs-lg);\n font-weight:var(--fw-norma);\n color:#544334;\n color:var(--color-brown-900, #544334);\n padding-bottom:var(--spacing-03);\n border-bottom:var(--border-radius-rounded-small) solid transparent;\n}\n\n.timeline.carousel swiper-container::part(bullet-active){\n font-family:'TP Rubrik';\n font-family:var(--ff-display, 'TP Rubrik');\n font-weight:var(--fw-bold);\n color:#544334;\n color:var(--color-brown-900, #544334);\n font-size:var(--fs-lg);\n padding-bottom:var(--spacing-03);\n border-bottom:var(--border-radius-rounded-small) solid #d01c65;\n}\n\n.timeline.carousel swiper-container::part(pagination){\n position:relative;\n margin-top:var(--spacing-06);\n display:none;\n}\n\n@media (min-width: 1100px){\n\n.timeline.carousel swiper-container::part(pagination){\n display:block\n}\n }\n\n.timeline.carousel swiper-container::part(button-prev),\n.timeline.carousel swiper-container::part(button-next){\n padding:var(--spacing-07) var(--spacing-08);\n background-color:#0274b5;\n background-color:var(--color-blue-700, #0274b5);\n border-radius:50%;\n border:3px solid var(--color-neutral-100);\n stroke:white;\n stroke-width:2px;\n}\n\n@media (max-width: 1099px){\n\n.timeline.carousel swiper-container::part(button-prev),\n.timeline.carousel swiper-container::part(button-next){\n --swiper-navigation-size:10px;\n padding:var(--spacing-04) var(--spacing-005);\n top:var(--spacing-06)\n}\n }\n\n.default.carousel swiper-container::part(pagination){\n position:relative;\n margin-bottom:var(--spacing-07);\n color:#544334;\n color:var(--color-brown-900, #544334);\n font-size:var(--fs-sm);\n}\n\n@media (min-width: 1100px){\n\n.default.carousel swiper-container::part(pagination){\n display:none\n}\n }\n\n.default.carousel swiper-container::part(button-prev),\n.default.carousel swiper-container::part(button-next){\n position:absolute;\n top:auto;\n bottom:var(--spacing-04);\n padding:var(--spacing-03) var(--spacing-04);\n border-radius:var(--border-radius-rounded-small);\n border:1px solid #cfbcae;\n border:1px solid var(--color-brown-700, #cfbcae);\n background:#fff;\n background:var(--color-neutral-100, #fff);\n stroke-width:1px;\n stroke:#0274b5;\n stroke:var(--color-blue-700, #0274b5);\n color:#0274b5;\n color:var(--color-blue-700, #0274b5);\n z-index:11;\n}\n`;","import { CSSResultGroup, TemplateResult, html } from 'lit';\nimport { OutlineElement, SlotsController } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { SwiperContainer, register } from 'swiper/element/bundle';\nimport { isInType } from '../../../utilities/isInType';\n\nimport componentStyles from './chop-carousel.css.lit';\nimport Swiper from 'swiper';\n\nexport enum carouselVariants {\n 'Default' = 'default',\n 'Timeline' = 'timeline',\n}\n\nexport type CarouselVariant = `${carouselVariants}`;\n\n/**\n * The CHOP Carousel component\n * @slot - The default, and only slot for this element.\n * @attr theme-color\n */\n@customElement('chop-carousel')\nexport class CHOPCarousel extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotsController(this);\n swiperEl: SwiperContainer | null;\n\n // Reflected properties, of any name, on this component alter the behavior\n // of the swiper slides, so we set this to false.\n @property({\n type: String,\n reflect: false,\n attribute: 'variant',\n converter: value => {\n return isInType(value, Object.values(carouselVariants), 'CarouselVariant')\n ? value\n : 'default';\n },\n })\n variant: CarouselVariant = 'default';\n\n connectedCallback() {\n super.connectedCallback();\n register();\n }\n\n firstUpdated(changedProperties: Map): void {\n super.firstUpdated(changedProperties);\n // Setting the carousel variant based on the type of card it is consuming, rather than setting it manually in the theme layer.\n if (this.querySelector('chop-timeline-card')) {\n this.variant = 'timeline';\n }\n }\n\n protected updated(): void {\n this.swiperEl = this.shadowRoot!.querySelector('.swiper-container');\n if (!this.swiperEl) {\n console.warn('Swiper container not found.');\n return;\n }\n if (this.variant == 'timeline') {\n const params = {\n pagination: {\n clickable: true,\n type: 'bullets',\n renderBullet: function (index: number, className: string) {\n const self = this as unknown as Swiper;\n const text = self.slides[index].getAttribute('bullet');\n return `${text}`;\n },\n },\n };\n\n Object.assign(this.swiperEl, params);\n } else {\n const params = {\n injectStyles: [\n '.swiper-pagination-current, .swiper-pagination-total {font-weight: 700;}',\n ],\n pagination: {\n clickable: true,\n type: 'fraction',\n renderFraction: function (currentClass: number, totalClass: number) {\n return ` / `;\n },\n },\n };\n\n Object.assign(this.swiperEl, params);\n }\n\n if (typeof this.swiperEl.initialize === 'function') {\n this.swiperEl.initialize();\n } else {\n console.error('Swiper initialize method not found.');\n }\n }\n\n render(): TemplateResult {\n const classes = {\n [`${this.variant}`]: true,\n carousel: true,\n };\n return html`\n
\n \n ${this.slots.renderInShadow('slide-item')}\n ${this.slots.renderInShadow('slide-pagination')}\n \n
\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-carousel': CHOPCarousel;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n color:var(--color-brown-900) !important;\n}\n\n.card-wrapper{\n border-radius:var(--border-radius-rounded-small);\n display:flex;\n flex-direction:column;\n align-items:flex-start;\n height:100%;\n}\n\n.image-wrapper{\n position:relative;\n overflow:hidden;\n aspect-ratio:3/2;\n border-radius:var(--border-radius-rounded-small);\n max-width:100%;\n}\n\n.image-wrapper img,\n .image-wrapper picture{\n width:100%;\n height:100%;\n height:auto;\n object-fit:cover;\n }\n\n.pagination{\n display:none;\n position:absolute;\n bottom:0;\n right:0;\n background-color:rgba(255, 255, 255, 0.86);\n padding:var(--spacing-02) var(--spacing-05);\n border-top-left-radius:var(--border-radius-rounded-small);\n font-weight:700;\n}\n\n@media (min-width: 1100px){\n\n.pagination{\n display:block\n}\n }\n\n.content-inner-wrapper{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-04);\n margin:var(--spacing-04) var(--spacing-20);\n min-height:var(--spacing-12);\n}\n\n.content-inner-wrapper .description{\n color:var(--color-brown-900);\n font-family:'Georgia', 'Arial', 'serif';\n font-size:var(--fs-xl);\n font-weight:var(--fw-normal);\n line-height:var(--lh-xl);\n }\n`;","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport componentStyles from './chop-carousel-card.css.lit';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '../chop-icon/chop-icon';\nimport '../chop-heading/chop-heading';\n\n/**\n * The basic card component\n * @element chop-card\n *\n * @property top color - The border color to show up when there is no image\n * @property page value - Holds the page value for the slide.\n *\n * @slot image\n * @slot eyebrow\n * @slot heading - NOTE: Styles are in the heading component\n * @slot sub-heading\n * @slot date\n * @slot description\n * @slot location\n * @slot cta-link\n */\n\n@customElement('chop-carousel-card')\nexport class CHOPCarouselCard extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n\n /**\n * The target to use for a link, used in conjunction with the url attribute.\n */\n @property({ type: String, attribute: 'page-value' })\n pageValue: string | null = null;\n\n protected firstUpdated(_changedProperties: Map): void {\n super.firstUpdated(_changedProperties);\n this.pageValue = this.parentElement?.getAttribute('aria-label') ?? null;\n }\n\n render(): TemplateResult {\n const classes = {\n 'card-wrapper': true,\n };\n\n return html`\n
\n ${this.imageTemplate()}\n
${this.descriptionTemplate()}
\n
\n `;\n }\n\n /**\n * This method is used to create a template for the 'image' slot.\n * It first checks if the 'image' slot exists.\n * If the 'image' slot does not exist, it returns an empty template.\n * If the 'image' slot exists, it returns a template with a div wrapper and the 'image' slot.\n *\n * @returns {TemplateResult} - A lit-html `TemplateResult`. If the 'image' slot exists, it will return a template with the 'image' slot. Otherwise, it will return an empty template.\n */\n imageTemplate(): TemplateResult | typeof nothing {\n // Check if the 'image' slot exists.\n if (!this.slots.exist('image')) {\n // If the slots do not exist, return early with an empty template.\n return nothing;\n }\n\n // If the slots exists, return the appropriate template.\n return html`
\n \n ${this.pagerTemplate()}\n
`;\n }\n\n /**\n * This method is used to create a template for the 'description' slot.\n * It first checks if the 'description' slot exists.\n * If the 'description' slot does not exist, it returns an empty template.\n * If the 'description' slot exists, it returns a template with a div wrapper and the 'description' slot.\n *\n * @returns {TemplateResult} - A lit-html `TemplateResult`. If the 'description' slot exists, it will return a template with the 'description' slot. Otherwise, it will return an empty template.\n */\n descriptionTemplate(): TemplateResult | typeof nothing {\n // Check if the 'description' slot exists.\n if (!this.slots.exist('description')) {\n // If the 'description' slot does not exist, return early with an empty template.\n return nothing;\n }\n\n // If the 'description' slot exists, return the appropriate template.\n return html`
\n \n
`;\n }\n\n /**\n * This method is used to create a template for the Pager text.\n * It checks to see if we have pager data, and if so renders the result.\n * If not, it returns an empty template.\n *\n * @returns {TemplateResult} - A lit-html `TemplateResult`. If the 'image' slot exists, it will return a template with the 'image' slot. Otherwise, it will return an empty template.\n */\n pagerTemplate(): TemplateResult | typeof nothing {\n if (!this.slots.exist('image') || !this.pageValue) {\n // If the slots do not exist, return early with an empty template.\n return nothing;\n }\n\n // If the slots exists, return the appropriate template.\n return html`
${this.pageValue}
`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-carousel-card': CHOPCarouselCard;\n }\n}\n","import { OutlineElement } from '@phase2/outline-core';\nimport { html, TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('chop-chart-wrapper')\nexport class CHOPChartWrapper extends OutlineElement {\n render(): TemplateResult {\n return html``;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-chart-wrapper': CHOPChartWrapper;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n.card-wrapper{\n display:flex;\n align-items:center;\n min-height:46px;\n padding:6px var(--spacing-04);\n border-radius:6px;\n border-top:6px solid;\n cursor:pointer;\n box-shadow:0 0 0 100vmax inset rgb(0 0 0 / 0%);\n box-shadow:0 0 0 100vmax inset rgb(0 0 0 / var(--brightness, 0%));\n transition:0.4s;\n}\n\n @media (min-width: 1100px){.card-wrapper{\n min-height:127px\n}\n }\n\n .card-wrapper .link-icon{\n transition:0.3s ease-in-out;\n }\n\n .card-wrapper:hover{\n --brightness:20%;\n }\n\n .card-wrapper:hover .link-icon{\n transform:translateX(8px);\n }\n\n .card-wrapper.dark_green{\n --cta-border-color:var(--color-green-500);\n color:var(--color-neutral-100);\n border-color:var(--color-green-500);\n background:linear-gradient(\n to right top,\n #648727 50%,\n #5e7f24 50%\n );\n background:linear-gradient(\n to right top,\n var(--color-green-800, #648727) 50%,\n var(--color-green-900, #5e7f24) 50%\n );\n }\n\n .card-wrapper.dark_pink{\n --cta-border-color:var(--color-pink-500);\n color:var(--color-neutral-100);\n border-color:var(--color-pink-500);\n background:linear-gradient(\n to right top,\n #d01c65 50%,\n #c0165c 50%\n );\n background:linear-gradient(\n to right top,\n var(--color-pink-800, #d01c65) 50%,\n var(--color-pink-900, #c0165c) 50%\n );\n }\n\n .card-wrapper.light_blue{\n --cta-border-color:var(--color-blue-500);\n color:var(--color-neutral-100);\n border-color:var(--color-blue-500);\n background:linear-gradient(\n to right top,\n #0274b5 50%,\n #0c7bbb 50%\n );\n background:linear-gradient(\n to right top,\n var(--color-blue-600, #0274b5) 50%,\n var(--color-blue-700, #0c7bbb) 50%\n );\n }\n\n .card-wrapper.dark_blue{\n --cta-border-color:var(--color-blue-600);\n color:var(--color-neutral-100);\n border-color:var(--color-blue-600);\n background:linear-gradient(\n to right top,\n #005587 50%,\n #004975 50%\n );\n background:linear-gradient(\n to right top,\n var(--color-blue-800, #005587) 50%,\n var(--color-blue-900, #004975) 50%\n );\n }\n\n .card-wrapper.contact-variant{\n padding:0;\n color:var(--cta-border-color);\n border-left:1px solid #dfd2c9;\n border-left:1px solid var(--color-brown-500, #dfd2c9);\n border-right:1px solid #dfd2c9;\n border-right:1px solid var(--color-brown-500, #dfd2c9);\n border-bottom:1px solid #dfd2c9;\n border-bottom:1px solid var(--color-brown-500, #dfd2c9);\n background:#ffffff;\n background:var(--color-neutral-100, #ffffff);\n }\n\n @media (min-width: 1100px){\n\n .card-wrapper.contact-variant{\n padding:0 var(--spacing-04)\n }\n }\n\n .card-wrapper.contact-variant:hover{\n --brightness:0%;\n }\n\n.content-wrapper{\n display:flex;\n justify-content:center;\n align-items:flex-start;\n width:100%;\n gap:var(--spacing-04);\n}\n\n@media (min-width: 1100px){\n\n.content-wrapper{\n flex-direction:column;\n align-items:center;\n gap:var(--spacing-02)\n}\n }\n\n.contact-wrapper{\n display:flex;\n flex-direction:column;\n width:100%;\n gap:var(--spacing-04);\n padding:var(--spacing-03) 0 var(--spacing-04) var(--spacing-04);\n}\n\n@media (min-width: 1100px){\n\n.contact-wrapper{\n padding:var(--spacing-04)\n}\n }\n\n.contact-content{\n display:flex;\n align-items:center;\n gap:var(--spacing-04);\n}\n\n.phone-link{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-02);\n font-family:var(--ff-display);\n font-size:var(--fs-xl3);\n font-weight:var(--fw-normal);\n color:#544334;\n color:var(--color-brown-900, #544334);\n}\n\n.link-wrapper{\n flex:1;\n display:flex;\n flex-direction:row;\n gap:var(--spacing-01);\n align-items:center;\n}\n\n@media (min-width: 1100px){\n\n.link-wrapper{\n text-align:center\n}\n }\n`;","import { TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport componentStyles from './chop-color-cta.css.lit';\nimport { icons } from '../chop-icon/libraries/library.system';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport { screenSizeMap } from '../../controllers/screen-size-controller';\nimport '../chop-icon/chop-icon';\n\n/**\n * The Color CTA component.\n * @element chop-color-cta\n *\n * @property {string} color - The color of the CTA. Options are: dark_green, dark_pink, light_blue, dark_blue.\n *\n * @slot contact-heading - The contact heading to show in Color CTA.\n * @slot contact-phone - The contact phone to show in Color CTA.\n * @slot contact-link - The contact link to show in Color CTA.\n */\ntype colorOptions = 'dark_green' | 'dark_pink' | 'light_blue' | 'dark_blue';\n\n@customElement('chop-color-cta')\nexport class CHOPColorCTA extends OutlineElement {\n static styles = [componentStyles];\n slots = new SlotManager(this);\n resizeController = new ResizeController(this, {\n breakpoints: [screenSizeMap.get('lg') as number],\n containerQuery: false,\n });\n\n isMobile: boolean;\n\n @property({ type: String, attribute: 'color' })\n color: colorOptions;\n\n @property({ type: String, attribute: 'icon-name' })\n iconName?: keyof typeof icons;\n\n @property({ type: Boolean, reflect: true, attribute: 'is-clickable' })\n isClickable: boolean;\n\n onClick(ev: Event) {\n if (this.isClickable) {\n ev.preventDefault();\n this.querySelector('a')?.dispatchEvent(new MouseEvent('click'));\n }\n }\n\n render(): TemplateResult {\n this.isMobile = this.resizeController.currentBreakpointRange === 0;\n\n const isContactVariant =\n this.slots.exist('contact-heading') &&\n this.slots.exist('contact-phone') &&\n this.slots.exist('contact-link');\n const classes = {\n 'card-wrapper': true,\n [`${this.color}`]: this.color,\n 'contact-variant': isContactVariant,\n };\n\n return html`\n
\n
\n ${this.iconTemplate()}\n ${this.slots.exist('link')\n ? html``\n : nothing}\n ${this.contactTemplate(\n 'contact-heading',\n 'contact-phone',\n 'contact-link'\n )}\n
\n
\n `;\n }\n\n iconTemplate() {\n const iconSize = this.isMobile ? '1.5rem' : '4rem';\n\n return this.iconName\n ? html` `\n : nothing;\n }\n\n slotTemplate(slotName = '') {\n return this.slots.exist(slotName)\n ? html``\n : nothing;\n }\n\n contactTemplate(...slotNames: string[]) {\n const hasAllSlots = slotNames.every(slotName => this.slots.exist(slotName));\n if (!hasAllSlots) {\n return '';\n }\n\n const heading = slotNames.find(slotName => slotName === 'contact-heading');\n const phoneLink = slotNames.filter(slot => slot !== heading);\n\n return html`\n
\n \n
\n
\n \n
\n
\n ${phoneLink.map(slotName => html``)}\n
\n
\n
\n `;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n.contact-block{\n border-radius:6px;\n border:1px solid var(--color-brown-700);\n padding:var(--spacing-8) var(--spacing-4);\n}\n\n .contact-block.center-content{\n align-items:center;\n }\n\n.heading{\n margin-bottom:var(--spacing-8);\n}\n\n.divider{\n width:100%;\n border-top:1px solid var(--color-brown-700);\n margin:var(--spacing-10) 0;\n}\n\n@media (min-width: 860px){\n .contact-block{\n display:flex;\n gap:var(--spacing-8);\n }\n .contact-block.single-contact .contact-card-1{\n margin:0 auto;\n }\n .contact-block:not(.single-contact) .heading,\n .contact-block:not(.single-contact) .contact-card-1,\n .contact-block:not(.single-contact) .contact-card-2,\n .contact-block:not(.single-contact) .wysiwyg{\n flex:1 1 0;\n }\n .heading{\n align-self:center;\n margin:0;\n }\n\n .divider{\n border-top:none;\n border-left:1px solid var(--color-brown-700);\n width:1px;\n margin:0;\n align-self:stretch;\n }\n}\n\n@media (min-width: 1100px){\n .contact-block{\n padding:var(--spacing-10) var(--spacing-12);\n }\n .contact-block.space-between{\n justify-content:space-between;\n }\n}\n`;","import { CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { OutlineElement, SlotsController } from '@phase2/outline-core';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport componentStyles from './chop-contact-block.css.lit';\n\n/**\n * @extends OutlineElement\n * @element chop-contact-block\n *\n * @slot heading\n * @slot contact-card-1\n * @slot contact-card-2\n * @slot wysiwyg\n */\n\n@customElement('chop-contact-block')\nexport class CHOPContactBlock extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n resizeController = new ResizeController(this);\n isMobile: boolean;\n\n slots = new SlotsController(this);\n\n render(): TemplateResult {\n this.isMobile = this.resizeController.currentBreakpointRange <= 3;\n const hasCard2 = this.slots.exist('contact-card-2');\n const hasWysiwyg = this.slots.exist('wysiwyg');\n const hasDivider = hasCard2 || hasWysiwyg;\n\n //Adds a mobile class to the lightDom to style the button\n if (this.isMobile) {\n this.classList.add('mobile');\n } else {\n this.classList.remove('mobile');\n }\n\n const classes = {\n 'contact-block': true,\n 'space-between': !hasCard2 && hasWysiwyg,\n 'single-contact': !hasCard2 && !hasWysiwyg,\n 'center-content': !this.slots.exist('phone-number'),\n };\n\n return html`\n
\n ${this.slotTemplate('heading')} ${this.slotTemplate('contact-card-1')}\n ${hasDivider ? html`
` : nothing}\n ${this.slotTemplate('contact-card-2')} ${this.slotTemplate('wysiwyg')}\n
\n `;\n }\n\n slotTemplate(slotName: string) {\n if (this.slots.exist(slotName)) {\n return html`
\n \n
`;\n } else {\n return nothing;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-contact-block': CHOPContactBlock;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n overflow:hidden;\n}\n\nchop-grid.overlap{\n padding-bottom:9rem;\n}\n\n@media (min-width: 860px){\n\nchop-grid.overlap{\n padding-bottom:10rem\n}\n }\n\n.card-wrapper.mobile{\n color:var(--color-brown-900);\n border-radius:6px;\n display:grid;\n grid-template-columns:1fr;\n grid-template-rows:2fr 4fr;\n max-height:100%;\n width:100%;\n}\n\n.card-wrapper.mobile .content-wrapper{\n position:relative;\n gap:var(--spacing-08);\n padding:var(--spacing-24) var(--spacing-10) var(--spacing-12) 35%;\n }\n\n.card-wrapper.mobile .content-wrapper .inner-content{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-06);\n }\n\n.card-wrapper.mobile .content-wrapper .cta-wrappers{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-06);\n }\n\n.card-wrapper.mobile .image-wrapper{\n grid-area:1 / 1 / 3 / 2;\n position:relative;\n overflow:hidden;\n width:100%;\n height:100%;\n object-fit:cover;\n max-width:none;\n left:auto;\n }\n\n.card-wrapper.mobile .slice-wrapper{\n position:absolute;\n height:85px;\n bottom:100%;\n z-index:-1;\n width:100%;\n left:0;\n min-height:auto;\n }\n\n.card-wrapper.mobile .eyebrow-wrapper{\n grid-area:3 / 1 / 3 / 2;\n z-index:8;\n }\n\n.card-wrapper.mobile .content-wrapper{\n grid-area:3 / 1 / 5 / 2;\n border-radius:0 0 6px 6px;\n padding:0 var(--spacing-05) var(--spacing-08) var(--spacing-05);\n justify-content:flex-start;\n background:none;\n z-index:11;\n }\n\n.card-wrapper{\n border-radius:6px;\n display:grid;\n grid-template-columns:100px 3fr 1fr 3fr;\n}\n\n.card-wrapper .image-wrapper{\n border-radius:0 6px 6px 0;\n overflow:hidden;\n z-index:0;\n height:100%;\n object-fit:cover;\n position:absolute;\n left:50%;\n max-width:50%;\n }\n\n.slice-wrapper{\n grid-area:1 / 1 / 1 / 2;\n z-index:10;\n height:100%;\n min-height:100%;\n display:block;\n position:absolute;\n width:10%;\n}\n\n.slice-wrapper.full-width-image{\n left:0;\n}\n\n.content-wrapper{\n grid-area:1 / 1 / 1 / 3;\n border-radius:6px 0px 0px 6px;\n z-index:11;\n display:flex;\n align-items:flex-start;\n justify-content:center;\n flex-direction:column;\n gap:var(--spacing-12);\n padding:var(--spacing-24) var(--spacing-10) var(--spacing-08) 20%;\n}\n\n@media (min-width: 1100px){\n\n.content-wrapper{\n padding:var(--spacing-24) var(--spacing-10) var(--spacing-08) 35%\n}\n }\n\n.content-wrapper .inner-content{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-06);\n }\n\n.content-wrapper .cta-wrappers{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-08);\n }\n\n.content-wrapper .eyebrow-wrapper{\n display:flex;\n align-items:center;\n gap:var(--spacing-02);\n }\n\n.content-wrapper .quote-wrapper{\n font-family:'Georgia', 'Arial', 'serif';\n font-size:var(--fs-lg);\n font-weight:400;\n line-height:30px;\n }\n\n@media (min-width: 1100px){\n\n.content-wrapper .quote-wrapper{\n font-size:var(--fs-xl)\n }\n }\n\n.content-wrapper .author-wrapper{\n display:flex;\n align-items:center;\n gap:var(--spacing-02);\n font-family:var(--ff-display);\n font-size:var(--spacing-04);\n line-height:var(--line-height-sm);\n }\n\n.content-wrapper .cta-link-1-wrapper,\n .content-wrapper .cta-link-2-wrapper{\n display:flex;\n align-items:center;\n justify-content:flex-start;\n }\n\n.content-wrapper .image-attribution{\n display:inline-flex;\n gap:10px;\n font-family:var(--ff-display);\n font-size:var(--spacing-04);\n font-weight:var(--fw-normal);\n line-height:var(--spacing-06);\n }\n\n.content-wrapper .image-attribution .author-dash{\n width:32px;\n height:1px;\n top:50%;\n position:relative;\n background:var(--color-brown-900);\n }\n\n.content-wrapper .image-attribution .author-dash.white{\n background:var(--color-neutral-100);\n }\n\n.mobile.full-width-image.card-wrapper .content-wrapper{\n grid-area:3 / 1 / 4 / 3;\n }\n\n.mobile.full-width-image.card-wrapper .image-wrapper{\n grid-area:1 / 1 / 3 / 2;\n }\n\n.mobile.full-width-image.card-wrapper .slice-wrapper{\n grid-area:2 / 1 / 3 / 2;\n }\n\n.mobile.full-width-image.card-wrapper.background-color-light_blue\n .content-wrapper{\n color:var(--color-neutral-100);\n}\n\n.full-width-image.card-wrapper .content-wrapper{\n background-color:transparent;\n}\n\n.full-width-image.card-wrapper.background-color-light_blue .content-wrapper{\n color:var(--color-brown-900);\n}\n\n.full-width-image.card-wrapper .image-wrapper{\n left:-50%;\n transform:translateX(50%);\n width:100%;\n max-width:none;\n}\n\n.card-wrapper.background-color-light_green{\n background-color:var(--color-green-300);\n }\n\n.card-wrapper.background-color-light_green.mobile{\n background-color:var(--color-green-900);\n color:var(--color-neutral-100);\n }\n\n.card-wrapper.background-color-light_blue{\n background-color:var(--color-blue-600);\n color:var(--color-neutral-100);\n }\n\n.card-wrapper.background-color-dark_pink{\n background-color:var(--color-pink-800);\n color:var(--color-neutral-100);\n }\n\n.card-wrapper.background-color-beige{\n background-color:var(--color-brown-200);\n }\n\n:host([transparent-background]) .card-wrapper:not(.mobile){\n background-color:transparent;\n}\n\n:host([transparent-background]) .card-wrapper:not(.mobile) .image-wrapper{\n left:0;\n width:100%;\n max-width:100%;\n }\n`;","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport { isInType } from '../../../utilities/isInType';\nimport { icons } from '../chop-icon/libraries/library.system';\nimport { contentAlign, ContentAlign } from '../chop-grid/chop-grid';\nimport componentStyles from './chop-content-quote-card.css.lit';\nimport '../chop-grid/chop-grid';\nimport '../chop-column/chop-column';\nimport '../chop-heading/chop-heading';\nimport '../chop-woven-svgs/chop-woven-svgs';\nimport '../chop-icon/chop-icon';\n\n/**\n * The basic card component\n * @element chop-card\n *\n * @property top color - The border color to show up when there is no image\n *\n * @slot image\n * @slot eyebrow\n * @shot heading\n * @slot quote\n * @slot author\n * @slot image-attribution\n * @slot cta-link-1\n * @slot cta-link-2\n */\n\nexport enum quoteBackgroundColors {\n 'Light Blue' = 'light_blue',\n 'Light Green' = 'light_green',\n 'Beige' = 'beige',\n 'Dark Pink' = 'dark_pink',\n}\n\nexport type QuoteBackgroundColor = `${quoteBackgroundColors}`;\n\n// maps the component BG color desired colors in wovenSVG\nenum wovenSVGColorMap {\n 'light_blue' = 'light_blue',\n 'light_green' = 'light_green-reverse',\n 'beige' = 'beige',\n 'dark_pink' = 'pink',\n}\n\nenum mobileWovenSVGColorMap {\n 'light_blue' = 'blue',\n 'light_green' = 'darkest_green',\n 'beige' = 'lighter_beige',\n 'dark_pink' = 'dark_pink',\n}\n\n@customElement('chop-content-quote-card')\nexport class CHOPContentQuoteCard extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n resizeController = new ResizeController(this);\n\n screenSizes = 'mobile';\n\n @property({ type: Boolean, reflect: true, attribute: 'mobile' })\n isMobile = this.resizeController.currentBreakpointRange <= 3;\n\n @property({ type: String, reflect: true, attribute: 'icon-name' })\n iconName?: keyof typeof icons;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'content-align',\n converter: value => {\n return isInType(value, Object.values(contentAlign), 'ContentAlign')\n ? value\n : '12';\n },\n })\n contentAlign: ContentAlign = '12';\n\n @property({\n type: String,\n reflect: true,\n attribute: 'color',\n converter: value => {\n return isInType(\n value,\n Object.values(quoteBackgroundColors),\n 'QuoteBackgroundColor'\n )\n ? value\n : 'dark_pink';\n },\n })\n color: QuoteBackgroundColor = 'dark_pink';\n\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'transparent-background',\n })\n transparentBG = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'full-width-image' })\n fullWidthImage: boolean;\n\n @property({ type: Boolean, reflect: true })\n overlap = false;\n\n isReversedColor() {\n let isReversed = false;\n const isSpecificColor = !['beige', 'light_green'].includes(this.color);\n const isMobileNotFullWidthImage = this.isMobile || !this.fullWidthImage;\n if (isSpecificColor && isMobileNotFullWidthImage) {\n isReversed = true;\n }\n return isReversed;\n }\n\n render(): TemplateResult {\n this.isMobile = this.resizeController.currentBreakpointRange <= 3;\n this.screenSizes =\n this.resizeController.currentBreakpointRange <= 3 ? 'mobile' : 'desktop';\n\n const classes = {\n 'card-wrapper': true,\n [`background-color-${this.color}`]: true,\n 'mobile': this.isMobile,\n 'full-width-image': this.fullWidthImage,\n };\n\n return html`\n \n ${!this.isMobile ? html`${this.sliceTemplate()}` : nothing}\n ${this.contentAlign === '3-9' ? this.asideTemplate() : nothing}\n \n
\n
\n ${this.isMobile ? html`${this.sliceTemplate()}` : nothing}\n
\n ${this.eyebrowTemplate()} ${this.slotTemplate('heading')}\n ${this.slotTemplate('quote')} ${this.slotTemplate('author')}\n
\n
\n ${this.slotTemplate('cta-link-1')}\n ${this.slotTemplate('cta-link-2')}\n
\n ${this.imageAttribution()}\n
\n ${this.slotTemplate('image')}\n
\n \n ${this.contentAlign === '9-3' ? this.asideTemplate() : nothing}\n \n `;\n }\n\n sliceTemplate() {\n if (this.slots.exist('image') && !this.overlap) {\n const color = this.isMobile\n ? mobileWovenSVGColorMap[this.color]\n : wovenSVGColorMap[this.color];\n const classes = {\n 'slice-wrapper': true,\n 'full-width-image': this.fullWidthImage,\n };\n\n return html`\n
\n \n
\n `;\n } else return nothing;\n }\n\n slotTemplate(name = '') {\n if (!this.slots.exist(name)) {\n return nothing;\n } else {\n return html`\n
\n \n
\n `;\n }\n }\n\n eyebrowTemplate() {\n if (this.slots.exist('eyebrow')) {\n return html`\n
\n ${this.iconName\n ? html`
\n \n
`\n : nothing}\n \n
\n `;\n } else {\n return nothing;\n }\n }\n\n imageAttribution() {\n // print the image attribution info\n if (this.slots.exist('image-attribution')) {\n return html`
\n \n \n
`;\n } else {\n return nothing;\n }\n }\n\n asideTemplate() {\n return html`\n \n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-content-quote-card': CHOPContentQuoteCard;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\nchop-styled-text :host{\n padding:0;\n}\n\n chop-styled-text :host h2,\n chop-styled-text :host h3,\n chop-styled-text :host h4,\n chop-styled-text :host h5,\n chop-styled-text :host h6{\n margin:0;\n margin-block-start:0;\n }\n\nchop-heading :host{\n display:block;\n}\n\nchop-heading .chop-headline{\n color:inherit;\n font-family:var(--headline-2xl-mid-font-family);\n display:block;\n margin:0;\n font-weight:inherit;\n word-break:keep-all;\n\n}\n\nchop-heading .chop-headline a{\n text-decoration:none;\n }\n\nchop-heading .chop-headline a:hover{\n text-decoration:underline;\n }\n\nchop-heading .chop-headline p{\n padding:0;\n margin:0;\n text-align:left;\n }\n\nchop-heading .chop-headline.brown-900{\n color:var(--color-brown-900);\n }\n\nchop-heading .clickable-card h1,\n chop-heading .clickable-card h2,\n chop-heading .clickable-card h3,\n chop-heading .clickable-card h4,\n chop-heading .clickable-card h5,\n chop-heading .clickable-card h6,\n chop-heading .clickable-card a{\n color:var(--color-blue-600);\n text-decoration:none;\n word-break:keep-all;\n }\n\nchop-heading .clickable-card h1:hover, chop-heading .clickable-card h2:hover, chop-heading .clickable-card h3:hover, chop-heading .clickable-card h4:hover, chop-heading .clickable-card h5:hover, chop-heading .clickable-card h6:hover, chop-heading .clickable-card a:hover{\n text-decoration:underline;\n cursor:pointer;\n }\n\nchop-heading .clickable-card h1:focus,\n chop-heading .clickable-card h1:focus-visible,\n chop-heading .clickable-card h2:focus,\n chop-heading .clickable-card h2:focus-visible,\n chop-heading .clickable-card h3:focus,\n chop-heading .clickable-card h3:focus-visible,\n chop-heading .clickable-card h4:focus,\n chop-heading .clickable-card h4:focus-visible,\n chop-heading .clickable-card h5:focus,\n chop-heading .clickable-card h5:focus-visible,\n chop-heading .clickable-card h6:focus,\n chop-heading .clickable-card h6:focus-visible,\n chop-heading .clickable-card a:focus,\n chop-heading .clickable-card a:focus-visible{\n outline:2px solid var(--color-blue-600);\n outline-offset:2px;\n border-radius:8px;\n }\n\nchop-heading .clickable-card h1:after, chop-heading .clickable-card h2:after, chop-heading .clickable-card h3:after, chop-heading .clickable-card h4:after, chop-heading .clickable-card h5:after, chop-heading .clickable-card h6:after, chop-heading .clickable-card a:after{\n position:absolute;\n inset:0;\n content:'';\n }\n\nchop-heading .clickable-card.dark-mode h1,\n chop-heading .clickable-card.dark-mode h2,\n chop-heading .clickable-card.dark-mode h3,\n chop-heading .clickable-card.dark-mode h4,\n chop-heading .clickable-card.dark-mode h5,\n chop-heading .clickable-card.dark-mode h6,\n chop-heading .clickable-card.dark-mode a{\n color:var(--color-neutral-100);\n text-decoration:none;\n }\n\nchop-heading .clickable-card.dark-mode h1:hover, chop-heading .clickable-card.dark-mode h2:hover, chop-heading .clickable-card.dark-mode h3:hover, chop-heading .clickable-card.dark-mode h4:hover, chop-heading .clickable-card.dark-mode h5:hover, chop-heading .clickable-card.dark-mode h6:hover, chop-heading .clickable-card.dark-mode a:hover{\n text-decoration:underline;\n cursor:pointer;\n }\n\nchop-heading .clickable-card.dark-mode h1:focus,\n chop-heading .clickable-card.dark-mode h1:focus-visible,\n chop-heading .clickable-card.dark-mode h2:focus,\n chop-heading .clickable-card.dark-mode h2:focus-visible,\n chop-heading .clickable-card.dark-mode h3:focus,\n chop-heading .clickable-card.dark-mode h3:focus-visible,\n chop-heading .clickable-card.dark-mode h4:focus,\n chop-heading .clickable-card.dark-mode h4:focus-visible,\n chop-heading .clickable-card.dark-mode h5:focus,\n chop-heading .clickable-card.dark-mode h5:focus-visible,\n chop-heading .clickable-card.dark-mode h6:focus,\n chop-heading .clickable-card.dark-mode h6:focus-visible,\n chop-heading .clickable-card.dark-mode a:focus,\n chop-heading .clickable-card.dark-mode a:focus-visible{\n outline:2px solid var(--color-neutral-100);\n outline-offset:2px;\n border-radius:8px;\n }\n\nchop-heading .clickable-card.dark-mode h1:after, chop-heading .clickable-card.dark-mode h2:after, chop-heading .clickable-card.dark-mode h3:after, chop-heading .clickable-card.dark-mode h4:after, chop-heading .clickable-card.dark-mode h5:after, chop-heading .clickable-card.dark-mode h6:after, chop-heading .clickable-card.dark-mode a:after{\n position:absolute;\n inset:0;\n content:'';\n }\n\nchop-heading .headline-3xl{\n font-size:var(--fs-4half-xl);\n line-height:var(--headline-3xl-min-line-height);\n font-family:var(--headline-3xl-min-font-family);\n letter-spacing:var(--headline-3xl-min-letter-spacing);\n text-transform:var(--headline-3xl-min-text-case);\n font-weight:var(--headline-3xl-min-font-weight);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-3xl{\n font-size:clamp(2.5rem, 2.5rem + 3.125vw, 4.5rem);\n line-height:var(--headline-3xl-mid-line-height);\n font-family:var(--headline-3xl-mid-font-family);\n letter-spacing:var(--headline-3xl-mid-letter-spacing);\n text-transform:var(--headline-3xl-mid-text-case);\n font-weight:var(--headline-3xl-mid-font-weight)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-3xl{\n line-height:var(--headline-3xl-max-line-height);\n font-family:var(--headline-3xl-max-font-family);\n letter-spacing:var(--headline-3xl-max-letter-spacing);\n text-transform:var(--headline-3xl-max-text-case);\n font-weight:var(--headline-3xl-max-font-weight)\n}\n }\n\nchop-heading .headline-2xl{\n font-size:clamp(2.25rem, 2.25rem + 2.734375vw, 4rem);\n font-weight:var(--headline-2xl-min-font-weight);\n line-height:var(--headline-2xl-min-line-height);\n font-family:var(--headline-2xl-min-font-family);\n letter-spacing:var(--headline-2xl-min-letter-spacing);\n text-transform:var(--headline-2xl-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-2xl{\n font-weight:var(--headline-2xl-mid-font-weight);\n line-height:var(--headline-2xl-mid-line-height);\n font-family:var(--headline-2xl-mid-font-family);\n letter-spacing:var(--headline-2xl-mid-letter-spacing);\n text-transform:var(--headline-2xl-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-2xl{\n font-weight:var(--headline-2xl-max-font-weight);\n line-height:var(--headline-2xl-max-line-height);\n font-family:var(--headline-2xl-max-font-family);\n letter-spacing:var(--headline-2xl-max-letter-spacing);\n text-transform:var(--headline-2xl-max-text-case)\n}\n }\n\nchop-heading .headline-xl{\n font-size:clamp(2rem, 2rem + 2.34375vw, 3.5rem);\n font-weight:var(--headline-xl-min-font-weight);\n line-height:var(--headline-xl-min-line-height);\n font-family:var(--headline-xl-min-font-family);\n letter-spacing:var(--headline-xl-min-letter-spacing);\n text-transform:var(--headline-xl-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-xl{\n font-weight:var(--headline-xl-mid-font-weight);\n line-height:var(--headline-xl-mid-line-height);\n font-family:var(--headline-xl-mid-font-family);\n letter-spacing:var(--headline-xl-mid-letter-spacing);\n text-transform:var(--headline-xl-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-xl{\n font-weight:var(--headline-xl-max-font-weight);\n line-height:var(--headline-xl-max-line-height);\n font-family:var(--headline-xl-max-font-family);\n letter-spacing:var(--headline-xl-max-letter-spacing);\n text-transform:var(--headline-xl-max-text-case)\n}\n }\n\nchop-heading .headline-lg{\n font-weight:var(--headline-lg-min-font-weight);\n font-size:clamp(1.75rem, 1.75rem + 1.5625vw, 2.75rem);\n font-size:clamp(1.625rem, 1.625rem + 1.3672vw, 2.5rem);\n line-height:var(--headline-lg-min-line-height);\n font-family:var(--headline-lg-min-font-family);\n letter-spacing:var(--headline-lg-min-letter-spacing);\n text-transform:var(--headline-lg-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-lg{\n font-weight:var(--headline-lg-mid-font-weight);\n line-height:var(--headline-lg-mid-line-height);\n font-family:var(--headline-lg-mid-font-family);\n letter-spacing:var(--headline-lg-mid-letter-spacing);\n text-transform:var(--headline-lg-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-lg{\n font-weight:var(--headline-lg-max-font-weight);\n line-height:var(--headline-lg-max-line-height);\n font-family:var(--headline-lg-max-font-family);\n letter-spacing:var(--headline-lg-max-letter-spacing);\n text-transform:var(--headline-lg-max-text-case)\n}\n }\n\nchop-heading .headline-md{\n font-size:clamp(1.5rem, 1.5rem + 1.171875vw, 2.25rem);\n line-height:var(--headline-md-min-line-height);\n font-family:var(--headline-md-min-font-family);\n font-weight:var(--headline-md-min-font-weight);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-md{\n font-weight:var(--headline-md-mid-font-weight);\n line-height:var(--headline-md-mid-line-height);\n font-family:var(--headline-md-mid-font-family);\n letter-spacing:var(--headline-md-mid-letter-spacing);\n text-transform:var(--headline-md-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-md{\n font-weight:var(--headline-md-max-font-weight);\n line-height:var(--headline-md-max-line-height);\n font-family:var(--headline-md-max-font-family);\n letter-spacing:var(--headline-md-max-letter-spacing);\n text-transform:var(--headline-md-max-text-case)\n}\n }\n\nchop-heading .headline-sm{\n font-weight:var(--headline-sm-min-font-weight);\n font-size:clamp(1.25rem, 1.25rem + 0.78125vw, 1.75rem);\n line-height:var(--headline-sm-min-line-height);\n font-family:var(--headline-sm-min-font-family);\n letter-spacing:var(--headline-sm-min-letter-spacing);\n text-transform:var(--headline-sm-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-sm{\n font-weight:var(--headline-sm-mid-font-weight);\n line-height:var(--headline-md-mid-line-height);\n font-family:var(--headline-md-mid-font-family);\n letter-spacing:var(--headline-md-mid-letter-spacing);\n text-transform:var(--headline-md-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-sm{\n font-weight:var(--headline-sm-max-font-weight);\n line-height:var(--headline-sm-max-line-height);\n font-family:var(--headline-sm-max-font-family);\n letter-spacing:var(--headline-sm-max-letter-spacing);\n text-transform:var(--headline-sm-max-text-case)\n}\n }\n\nchop-heading .headline-xs{\n font-size:clamp(1.125rem, 1.125rem + 0.5859375vw, 1.5rem);\n font-weight:var(--headline-xs-min-font-weight);\n line-height:var(--headline-xs-min-line-height);\n font-family:var(--headline-xs-min-font-family);\n letter-spacing:var(--headline-xs-min-letter-spacing);\n text-transform:var(--headline-xs-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-xs{\n font-weight:var(--headline-xs-mid-font-weight);\n line-height:var(--headline-xs-mid-line-height);\n font-family:var(--headline-xs-mid-font-family);\n letter-spacing:var(--headline-xs-mid-letter-spacing);\n text-transform:var(--headline-xs-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-xs{\n font-weight:var(--headline-xs-max-font-weight);\n line-height:var(--headline-xs-max-line-height);\n font-family:var(--headline-xs-max-font-family);\n letter-spacing:var(--headline-xs-max-letter-spacing);\n text-transform:var(--headline-xs-max-text-case)\n}\n }\n\nchop-heading .headline-eyebrow{\n font-size:clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);\n font-weight:700;\n letter-spacing:3px;\n text-transform:uppercase;\n line-height:var(--headline-eyebrow-min-line-height);\n font-family:var(--headline-eyebrow-min-font-family);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-eyebrow{\n line-height:var(--headline-eyebrow-mid-line-height);\n font-family:var(--headline-eyebrow-mid-font-family)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-eyebrow{\n line-height:var(--headline-eyebrow-max-line-height);\n font-family:var(--headline-eyebrow-max-font-family)\n}\n }\n\n@media (min-width: 860px){\n chop-heading .less-margin-bottom--xs{\n margin-bottom:-0.5rem;\n }\n chop-heading .less-margin-bottom--sm{\n margin-bottom:-1rem;\n }\n chop-heading .less-margin-bottom--md{\n margin-bottom:-2rem;\n }\n chop-heading .less-margin-bottom--lg{\n margin-bottom:-3rem;\n }\n chop-heading .less-margin-bottom--xl{\n margin-bottom:-4rem;\n }\n chop-heading .less-margin-bottom--2xl{\n margin-bottom:-5rem;\n }\n chop-heading .less-margin-bottom--3xl{\n margin-bottom:-6rem;\n }\n}\n\nchop-cta-link{\n --chop-cta-link--family--computed:var(--chop-cta-link--family, var(--ff-body));\n --chop-cta-link--weight--computed:var(--fw-bold);\n --chop-cta-link--padding-small--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);\n --chop-cta-link--padding-small-hover--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);\n --chop-cta-link--padding-default--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);\n --chop-cta-link--padding-default-hover--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);\n --chop-cta-link--padding-large--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);\n --chop-cta-link--padding-large-hover--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);\n --chop-cta-link--primary-bg-color--computed:var(--color-blue-700);\n --chop-cta-link--primary-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring--computed:var(--chop-cta-link--primary-ring, none);\n --chop-cta-link--primary-bg-color-hover--computed:var(--color-neutral-100);\n --chop-cta-linknknk--primary-color-hover--computed:var(\n --chop-cta-link--primary-color-hover,\n var(--color-blue-600)\n);\n --chop-cta-link--primary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring-hover--computed:var(--color-blue-700);\n --chop-cta-link--primary-bg-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--primary-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--primary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--primary-disabled-bg-color--computed:var(--color-neutral-400);\n --chop-cta-link--primary-disabled-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-disabled-ring--computed:var(--outline-transparent);\n --chop-cta-link--primary-reversed-bg-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-color--computed:var(--color-blue-700);\n --chop-cta-link--primary-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring--computed:var(\n --chop-cta-link--primary-reversed-ring,\n none\n);\n --chop-cta-link--primary-reversed-bg-color-hover--computed:var(\n --bg-color--transparent\n);\n --chop-cta-link--primary-reversed-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring-hover--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-bg-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--primary-reversed-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--primary-reversed-disabled-bg-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--primary-reversed-disabled-color--computed:var(\n --color-neutral-500\n);\n --chop-cta-link--primary-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-bg-color--computed:var(--color-neutral-100);\n --chop-cta-link--outline-color--computed:var(--color-blue-700);\n --chop-cta-link--outline-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring--computed:var(--color-blue-700);\n --chop-cta-link--outline-bg-color-hover--computed:var(--color-blue-700);\n --chop-cta-link--outline-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--outline-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring-hover--computed:var(--color-blue-700);\n --chop-cta-link--outline-bg-color-focus--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--outline-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--outline-disabled-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--outline-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-color--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-bg-color-hover--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-color-hover--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring-hover--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-bg-color-focus--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-color-focus--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring-focus--computed:var(\n --color-blue-500\n);\n --chop-cta-link--outline-reversed-disabled-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--outline-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--secondary-bg-color--computed:var(--color-pink-800);\n --chop-cta-link--secondary-color--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring--computed:var(\n --chop-cta-link--secondary-ring,\n none\n);\n --chop-cta-link--secondary-bg-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-color-hover--computed:var(\n --chop-cta-link--secondary-color-hover,\n var(--color-pink-800)\n);\n --chop-cta-link--secondary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring-hover--computed:var(--color-pink-800);\n --chop-cta-link--secondary-bg-color-focus--computed:var(--color-pink-800);\n --chop-cta-link--secondary-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring-focus--computed:var(--color-pink-800);\n --chop-cta-link--secondary-disabled-bg-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--secondary-disabled-color--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-disabled-ring--computed:var(--outline-transparent);\n --chop-cta-link--link-bg-color--computed:var(--outline-transparent);\n --chop-cta-link--link-color--computed:var(--color-blue-700);\n --chop-cta-link--link-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-ring--computed:var(--color-blue-700);\n --chop-cta-link--link-color-hover--computed:var(--color-blue-800);\n --chop-cta-link--link-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--link-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-disabled-color--computed:var(--color-neutral-400);\n --chop-cta-link--link-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color--computed:var(--color-neutral-100);\n --chop-cta-link--link-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color-hover--computed:var(--color-blue-700);\n --chop-cta-link--link-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--link-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--link-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n}\n\nchop-cta-link .btn{\n display:flex;\n width:fit-content;\n flex-wrap:nowrap;\n align-items:center;\n cursor:pointer;\n transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration:300ms;\n text-decoration-line:none;\n outline:none;\n border:none;\n border-radius:0.5rem;\n line-height:1.5;\n background:transparent;\n\n font-family:var(--chop-cta-link--family--computed);\n font-weight:var(--chop-cta-link--weight--computed);\n padding:var(--chop-cta-link--padding-default--computed);\n}\n\nchop-cta-link .btn[aria-disabled='true']{\n pointer-events:none;\n cursor:not-allowed;\n user-select:none;\n}\n\nchop-cta-link .btn.small{\n font-size:var(--fs-sm);\n line-height:var(--lh-base);\n padding:var(--chop-cta-link--padding-small--computed);\n}\n\nchop-cta-link .btn.small.no-icon{\n padding:var(--spacing-02) var(--spacing-4);\n }\n\nchop-cta-link .btn.medium,\nchop-cta-link .btn.default{\n font-size:var(--fs-base);\n line-height:var(--lh-md);\n}\n\nchop-cta-link .btn.medium.no-icon, chop-cta-link .btn.default.no-icon{\n padding:var(--spacing-02) var(--spacing-6);\n }\n\nchop-cta-link .btn.large{\n font-size:var(--fs-lg);\n line-height:var(--lh-sm);\n padding:var(--chop-cta-link--padding-large--computed);\n}\n\nchop-cta-link .btn.large.no-icon{\n padding:var(--spacing-03) var(--spacing-8);\n }\n\nchop-cta-link .btn.primary{\n background-color:var(--chop-cta-link--primary-bg-color--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight--computed);\n border:2px solid var(--chop-cta-link--primary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring--computed);\n}\n\nchop-cta-link .btn.primary:hover,\n chop-cta-link .btn.primary:active{\n background-color:var(--chop-cta-link--primary-color--computed);\n color:var(--chop-cta-link--primary-bg-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring-hover--computed);\n }\n\nchop-cta-link .btn.primary:focus{\n background-color:var(--chop-cta-link--primary-bg-color-focus--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\n\nchop-cta-link .btn.primary[aria-disabled='true']{\n background-color:var(--chop-cta-link--primary-disabled-bg-color--computed);\n color:var(--chop-cta-link--primary-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-disabled-ring--computed);\n}\n\nchop-cta-link .btn.primary.reversed{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n}\n\nchop-cta-link .btn.primary.reversed:hover,\n chop-cta-link .btn.primary.reversed:active{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n }\n\nchop-cta-link .btn.primary.reversed:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\n\nchop-cta-link .btn.primary.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\n\nchop-cta-link .btn.outline{\n background-color:var(--chop-cta-link--outline-bg-color--computed);\n color:var(--chop-cta-link--outline-color--computed);\n font-weight:var(--chop-cta-link--outline-weight--computed);\n border:2px solid var(--chop-cta-link--outline-ring--computed);\n box-shadow:var(--chop-cta-link--outline-ring--computed);\n}\n\nchop-cta-link .btn.outline:hover{\n background-color:var(--chop-cta-link--outline-bg-color-hover--computed);\n color:var(--chop-cta-link--outline-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-ring-hover--computed);\n }\n\nchop-cta-link .btn.outline:focus{\n background-color:var(--chop-cta-link--outline-bg-color-focus--computed);\n color:var(--chop-cta-link--outline-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-ring-focus--computed);\n outline-offset:2px;\n }\n\nchop-cta-link .btn.outline[aria-disabled='true']{\n background-color:var(--chop-cta-link--outline-disabled-bg-color--computed);\n color:var(--chop-cta-link--outline-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-disabled-ring--computed);\n}\n\nchop-cta-link .btn.outline.reversed{\n background-color:var(--chop-cta-link--outline-reversed-bg-color--computed);\n color:var(--chop-cta-link--outline-reversed-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-ring--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring--computed);\n}\n\nchop-cta-link .btn.outline.reversed:hover,\n chop-cta-link .btn.outline.reversed:active{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-hover--computed);\n }\n\nchop-cta-link .btn.outline.reversed:focus{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-focus--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-reversed-ring-focus--computed);\n }\n\nchop-cta-link .btn.outline.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--outline-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--outline-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-disabled-ring--computed);\n}\n\nchop-cta-link .btn.outline-transparent{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n}\n\nchop-cta-link .btn.outline-transparent:hover,\n chop-cta-link .btn.outline-transparent:active{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n }\n\nchop-cta-link .btn.outline-transparent:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n }\n\nchop-cta-link .btn.outline-transparent[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\n\nchop-cta-link .btn.secondary{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n color:var(--chop-cta-link--secondary-color--computed);\n font-weight:var(--chop-cta-link--secondary-weight--computed);\n border:2px solid var(--chop-cta-link--secondary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring--computed);\n}\n\nchop-cta-link .btn.secondary:hover{\n background-color:var(--chop-cta-link--secondary-bg-color-hover--computed);\n color:var(--chop-cta-link--secondary-color-hover--computed);\n font-weight:var(--chop-cta-link--secondary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-hover--computed);\n }\n\nchop-cta-link .btn.secondary:focus{\n background-color:var(--chop-cta-link--secondary-bg-color-focus--computed);\n color:var(--chop-cta-link--secondary-color-focus--computed);\n font-weight:var(--chop-cta-link--secondary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--secondary-ring-focus--computed);\n outline-offset:2px;\n }\n\nchop-cta-link .btn.secondary:active{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n }\n\nchop-cta-link .btn.secondary[aria-disabled='true']{\n background-color:var(--chop-cta-link--secondary-disabled-bg-color--computed);\n color:var(--chop-cta-link--secondary-disabled-color--computed);\n font-weight:var(--chop-cta-link--secondary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--secondary-disabled-ring--computed);\n}\n\nchop-cta-link .btn.link{\n position:relative;\n padding:0;\n color:var(--chop-cta-link--link-color--computed);\n font-weight:var(--fw-semibold);\n border-radius:0.5rem;\n text-decoration:none;\n background:transparent;\n}\n\nchop-cta-link .btn.link::after{\n content:'';\n display:none;\n position:absolute;\n bottom:0;\n left:0;\n right:0;\n margin-left:auto;\n margin-right:auto;\n border:1px solid var(--chop-cta-link--link-color--computed);\n }\n\nchop-cta-link .btn.link .chevron-icon{\n transition:0.3s ease-in-out;\n }\n\nchop-cta-link .btn.link:hover{\n color:var(--chop-cta-link--link-color-hover--computed);\n }\n\nchop-cta-link .btn.link:hover::after{\n display:block;\n }\n\nchop-cta-link .btn.link:hover > .chevron-icon{\n transform:translateX(8px);\n }\n\nchop-cta-link .btn.link:focus{\n color:var(--chop-cta-link--link-color-focus--computed);\n font-weight:var(--chop-cta-link--link-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-ring--computed);\n }\n\nchop-cta-link .btn.link[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\n\nchop-cta-link .btn.link.reversed{\n background-color:transparent;\n color:var(--chop-cta-link--link-reversed-color--computed);\n}\n\nchop-cta-link .btn.link.reversed::after{\n border:1px solid var(--chop-cta-link--link-reversed-color--computed);\n }\n\nchop-cta-link .btn.link.reversed:hover::after{\n display:block;\n }\n\nchop-cta-link .btn.link.reversed:focus{\n color:var(--chop-cta-link--link-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--link-reversed-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-reversed-color--computed);\n }\n\nchop-cta-link .btn.link.no-hover::after{\n display:none !important;\n }\n\nchop-cta-link .btn.link.reversed[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\n\nchop-cta-link .btn.full-width{\n display:flex;\n width:100%;\n justify-content:space-between;\n}\n\nchop-cta-link .heart-icon{\n margin-right:var(--spacing-01);\n}\n\nchop-cta-link .external-icon{\n margin-left:var(--spacing-01);\n}\n\nchop-cta-link .chevron-icon{\n margin-left:auto;\n}\n\n@media print{\n chop-cta-link .btn.link.reversed{\n color:currentColor;\n background:transparent;\n }\n}\n\n.card-wrapper.mobile{\n display:flex;\n flex-direction:column;\n overflow:hidden;\n position:relative;\n padding-bottom:0;\n}\n\n.card-wrapper.mobile .content-wrapper{\n z-index:6;\n position:relative;\n margin-bottom:var(--spacing-8);\n }\n\n.card-wrapper{\n color:var(--color-neutral-100);\n border-radius:6px;\n display:flex;\n padding-bottom:var(--spacing-12);\n}\n\n.card-wrapper .chop-headline a{\n color:var(--color-neutral-100);\n }\n\n.image-wrapper{\n position:relative;\n}\n\n.content-wrapper{\n padding:var(--spacing-05);\n border-radius:0 0 6px 6px;\n}\n\n.slice-wrapper{\n position:absolute;\n left:0;\n bottom:0;\n height:100%;\n width:100%;\n z-index:5;\n max-height:85px;\n}\n\n@media (min-width: 860px){\n .image-wrapper{\n position:relative;\n width:50%;\n }\n\n .content-wrapper{\n width:50%;\n }\n .slice-wrapper{\n max-height:none;\n }\n\n .image-left .content-wrapper{\n border-radius:0 6px 6px 0;\n padding:var(--spacing-06) var(--spacing-06) var(--spacing-06) 0;\n }\n\n .image-right .content-wrapper{\n border-radius:6px 0 0 6px;\n padding:var(--spacing-06) 0 var(--spacing-06) var(--spacing-06);\n }\n\n .image-left .slice-wrapper{\n left:auto;\n right:0;\n bottom:0;\n }\n\n .image-right .slice-wrapper{\n left:0;\n right:auto;\n bottom:0;\n }\n}\n\n.content-wrapper{\n display:flex;\n align-items:flex-start;\n justify-content:center;\n flex-direction:column;\n gap:var(--spacing-04);\n}\n\n.content-wrapper svg{\n color:var(--color-neutral-100);\n }\n\n.content-wrapper .description{\n font-family:'Georgia', 'Arial', 'serif';\n font-size:var(--spacing-05);\n font-weight:400;\n line-height:30px;\n }\n\n.content-wrapper .eyebrow-wrapper{\n display:flex;\n align-items:center;\n gap:var(--spacing-04);\n }\n\n.content-wrapper .eyebrow-wrapper .icon-wrapper{\n font-size:30px;\n }\n\n.content-wrapper .cta-link-wrapper{\n margin-top:var(--spacing-04);\n display:flex;\n align-items:center;\n justify-content:flex-start;\n }\n\n.card-wrapper.background-color-dark_blue .content-wrapper{\n background-color:var(--color-blue-800);\n}\n\n.card-wrapper.background-color-dark_pink .content-wrapper{\n background-color:var(--color-pink-800);\n}\n\n.card-wrapper.background-color-light_green .content-wrapper{\n background-color:var(--color-green-900);\n\n color:var(--color-neutral-100);\n}\n\n.card-wrapper.background-color-beige .content-wrapper{\n background-color:var(--color-brown-200);\n color:var(--color-brown-900);\n}\n\n.card-wrapper.background-color-beige .content-wrapper .chop-headline,\n .card-wrapper.background-color-beige .content-wrapper .chop-headline a{\n color:var(--color-brown-900);\n }\n\n.card-wrapper.background-color-light_blue .content-wrapper{\n background-color:var(--color-blue-600);\n}\n\n@media print{\n :host,\n :host *{\n color:var(--color-brown-900);\n }\n}\n`;","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport componentStyles from './chop-content-width-card.css.lit';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { icons } from '../chop-icon/libraries/library.system';\nimport '../chop-heading/chop-heading';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport { screenSizeMap } from '../../controllers/screen-size-controller';\nimport { isInType } from '../../../utilities/isInType';\nimport '../chop-woven-svgs/chop-woven-svgs';\nimport '../chop-icon/chop-icon';\nimport '../chop-heading/chop-heading';\nimport '../chop-cta-link/chop-cta-link';\nimport '../chop-styled-text/chop-styled-text';\n\n/**\n * The basic card component\n * @element chop-card\n *\n * @property top color - The border color to show up when there is no image\n *\n * @slot image\n * @slot eyebrow\n * @slot heading - NOTE: Styles are in the heading component\n * @slot sub-heading\n * @slot date\n * @slot description\n * @slot location\n * @slot cta-link\n */\n\nexport enum contentWidthCardBackgroundColors {\n 'Dark Blue' = 'dark_blue',\n 'Light Blue' = 'light_blue',\n 'Light Green' = 'light_green',\n 'Beige' = 'beige',\n 'Dark Pink' = 'dark_pink',\n}\n\nexport type ContentWidthCardBackgroundColor =\n `${contentWidthCardBackgroundColors}`;\n\n// maps the component BG color desired colors in wovenSVG\nenum wovenSVGColorMap {\n 'dark_blue' = 'darker_blue',\n 'light_blue' = 'blue',\n 'light_green' = 'darkest_green',\n 'beige' = 'lighter_beige',\n 'dark_pink' = 'dark_pink',\n}\n\n@customElement('chop-content-width-card')\nexport class CHOPContentWidthCard extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n\n documentResizeController = new ResizeController(this, {\n breakpoints: [screenSizeMap.get('md') as number],\n containerQuery: false,\n });\n\n screenSizes = 'mobile';\n isMobile = this.documentResizeController.currentBreakpointRange === 0;\n\n @property({ type: String, reflect: true, attribute: 'icon-name' })\n iconName?: typeof icons;\n\n @property({ type: String, attribute: 'image-position' })\n imagePosition: 'left' | 'right' = 'left';\n\n @property({\n type: String,\n reflect: true,\n attribute: 'color',\n converter: value => {\n return isInType(\n value,\n Object.values(contentWidthCardBackgroundColors),\n 'ContentWidthCardBackgroundColor'\n )\n ? value\n : 'dark_pink';\n },\n })\n color: ContentWidthCardBackgroundColor;\n\n render(): TemplateResult {\n this.isMobile = this.documentResizeController.currentBreakpointRange === 0;\n\n this.screenSizes =\n this.documentResizeController.currentBreakpointRange === 0\n ? 'mobile'\n : 'desktop';\n\n const classes = {\n 'card-wrapper': true,\n [`image-${this.imagePosition}`]: this.imagePosition,\n [`background-color-${this.color}`]: true,\n 'mobile': this.isMobile,\n };\n\n return html`\n \n
\n ${this.imagePosition === 'left' || this.isMobile\n ? html`\n
\n ${this.sliceTemplate()}\n \n
\n `\n : nothing}\n\n
\n ${this.eyebrowTemplate()} ${this.slotTemplate('heading')}\n ${this.slotTemplate('description')} ${this.slotTemplate('cta-link')}\n
\n\n ${this.imagePosition === 'right' && !this.isMobile\n ? html`\n
\n ${this.sliceTemplate()}\n \n
\n `\n : nothing}\n
\n
\n `;\n }\n\n sliceTemplate() {\n if (this.slots.exist('image')) {\n // if image is left then poistion is right.\n const hPos = this.imagePosition === 'left' ? 'right' : 'left';\n return html`\n
\n \n
\n `;\n } else return nothing;\n }\n\n slotTemplate(name = '') {\n if (!this.slots.exist(name)) {\n return nothing;\n } else {\n return html`\n ${this.slots.conditionalSlot(name, true, `${name}-wrapper`)}\n `;\n }\n }\n\n eyebrowTemplate() {\n if (this.slots.exist('eyebrow')) {\n return html`\n
\n ${this.iconName\n ? html`
\n \n
`\n : nothing}\n ${this.slots.conditionalSlot('eyebrow', true)}\n
\n `;\n } else {\n return nothing;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-content-width-card': CHOPContentWidthCard;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n.chop-dialog dialog{\n background-color:var(--color-neutral-100);\n border:none;\n border-radius:6px;\n padding:0;\n }\n .chop-dialog dialog::backdrop{\n background:rgba(0, 0, 0, 0.47);\n }\n .chop-dialog .heading{\n display:flex;\n padding:var(--spacing-04);\n gap:var(--spacing-08);\n justify-content:space-between;\n }\n .chop-dialog button{\n background-color:transparent;\n border:none;\n cursor:pointer;\n padding:0;\n }\n .chop-dialog button:focus{\n box-shadow:var(--color-blue-700) 0 -2px 5px 1px;\n outline:2px solid var(--color-blue-700);\n }\n .chop-dialog .content{\n padding-bottom:var(--spacing-04);\n }\n .chop-dialog.x-padding .content{\n padding:var(--spacing-04);\n }\n\n@media (min-width: 860px){\n .chop-dialog .heading{\n padding:var(--spacing-06) var(--spacing-08);\n }\n .chop-dialog .content{\n padding-bottom:var(--spacing-08);\n }\n .chop-dialog.x-padding .content{\n padding:var(--spacing-06) var(--spacing-08) var(--spacing-08);\n }\n}\n`;","// code adopted from https://web.dev/building-a-dialog-component/#all-together\n\n// custom events to be added to \nconst dialogClosingEvent = new Event('closing');\nconst dialogClosedEvent = new Event('closed');\nconst dialogOpeningEvent = new Event('opening');\nconst dialogOpenedEvent = new Event('opened');\nconst dialogRemovedEvent = new Event('removed');\n\n// track opening\nconst dialogAttrObserver = new MutationObserver(mutations => {\n mutations.forEach(async mutation => {\n if (mutation.attributeName === 'open') {\n const dialog = mutation.target as HTMLDialogElement;\n\n const isOpen = dialog.hasAttribute('open');\n if (!isOpen) return;\n\n // Limited browser support for inert yet, alternatively we add overflow: hidden to body element\n document.querySelector('body')!.style.overflow = 'hidden';\n\n // set focus\n const focusTarget = dialog.querySelector(\n '[autofocus]'\n ) as HTMLDialogElement;\n focusTarget\n ? focusTarget.focus()\n : dialog.querySelector('button')?.focus();\n\n dialog.dispatchEvent(dialogOpeningEvent);\n await animationsComplete(dialog);\n dialog.dispatchEvent(dialogOpenedEvent);\n }\n });\n});\n\n// track deletion\nconst dialogDeleteObserver = new MutationObserver(mutations => {\n mutations.forEach(mutation => {\n mutation.removedNodes.forEach(removedNode => {\n if (removedNode.nodeName === 'DIALOG') {\n removedNode.removeEventListener('close', dialogClose);\n removedNode.dispatchEvent(dialogRemovedEvent);\n }\n });\n });\n});\n\n// wait for all dialog animations to complete their promises\nconst animationsComplete = (element: HTMLDialogElement) =>\n Promise.allSettled(\n element.getAnimations().map(animation => animation.finished)\n );\n\nconst dialogClose = async ({ target: dialog }: Event) => {\n document.querySelector('body')!.style.overflow = 'revert';\n const element = dialog as HTMLDialogElement;\n\n element.dispatchEvent(dialogClosingEvent);\n\n await animationsComplete(element);\n\n element.dispatchEvent(dialogClosedEvent);\n};\n\n// page load dialogs setup\nexport default async function (dialog: HTMLDialogElement) {\n dialog.addEventListener('close', dialogClose);\n\n // Chrome doesn't close dialog with ESCAPE key, adding that functionality manually\n dialog.addEventListener('keydown', function (event) {\n if (event.key === 'Escape') {\n dialog.close('cancel');\n }\n });\n\n dialogAttrObserver.observe(dialog, {\n attributes: true,\n });\n\n dialogDeleteObserver.observe(document.body, {\n attributes: false,\n subtree: false,\n childList: true,\n });\n\n // remove loading attribute\n // prevent page load @keyframes playing\n await animationsComplete(dialog);\n dialog.removeAttribute('loading');\n}\n","import { CSSResultGroup, html, TemplateResult } from 'lit';\nimport {\n customElement,\n property,\n query,\n queryAssignedNodes,\n} from 'lit/decorators.js';\nimport { OutlineElement, SlotsController } from '@phase2/outline-core';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { CHOPButton } from '../chop-button/chop-button';\nimport { isValidCssSize } from '../../../utilities/isValidCssSize';\nimport componentStyles from './chop-dialog.css.lit';\nimport GuiDialog from '../../../utilities/dialog';\nimport '../chop-icon/chop-icon';\nimport '../chop-button/chop-button';\n\n@customElement('chop-dialog')\nexport class CHOPDialog extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n slots = new SlotsController(this);\n\n @query('.dialog-wrapper')\n dialogWrapper: HTMLDialogElement;\n\n @queryAssignedNodes({ slot: 'cta' })\n cta: NodeListOf;\n\n @queryAssignedNodes({ slot: 'dialog-content' })\n dialogContent: NodeListOf;\n\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'dialog-open',\n })\n dialogOpen: boolean;\n\n @property({\n type: String,\n attribute: 'max-width',\n converter: value => (isValidCssSize(value) ? value : null),\n })\n maxWidth: string | null = '30rem';\n\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'no-close',\n })\n noClose: boolean;\n\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'x-padding',\n })\n xPadding: boolean;\n\n updated() {\n this.cta?.forEach(cta => {\n if (cta instanceof CHOPButton) {\n cta.onClick = () => {\n this.openDialog();\n };\n }\n });\n\n this.dialogOpen && this.openDialog();\n }\n\n render(): TemplateResult {\n const classes = {\n 'chop-dialog': true,\n 'x-padding': this.xPadding,\n };\n\n const maxWidthStyle = this.maxWidth ? { 'max-width': this.maxWidth } : {};\n\n return html`\n
\n \n \n
\n \n \n \n \n
\n
\n \n
\n
\n
\n `;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n window.chopDialog = this;\n if (this.noClose) {\n // Avoid to close dialog if ESC key is pressed.\n document.addEventListener('keydown', this.handleKeyDown);\n } else {\n this.dialogWrapper?.addEventListener('click', this.lightDismiss);\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n delete window.chopDialog;\n if (!this.noClose) {\n this.dialogWrapper?.removeEventListener('click', this.lightDismiss);\n }\n }\n\n openDialog() {\n GuiDialog(this.dialogWrapper);\n this.dialogWrapper.showModal();\n this.trapFocus();\n }\n\n closeDialog = (e: Event) => {\n this.dialogOpen = false;\n const trigger = e.currentTarget as HTMLDialogElement;\n const dialogElement = trigger.closest('dialog') as HTMLDialogElement;\n\n if (dialogElement) {\n dialogElement.close('cancel');\n } else if (this.dialogWrapper) {\n this.dialogWrapper.close('cancel');\n }\n };\n\n // Function to override behavior of esc key.\n private handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.preventDefault();\n }\n };\n\n private lightDismiss = (e: Event) => {\n const element = e.target as HTMLDialogElement;\n if (element.nodeName === 'DIALOG') {\n element.close('dismiss');\n }\n };\n\n trapFocus(): void {\n // Define a selector that matches elements that can be focused by default\n const defaultFocusableSelector =\n 'a[href], button, input, select, textarea, [tabindex]';\n\n // Query all the elements that match the selector in the modal content\n const focusableNodes = this.dialogContent[0]?.querySelectorAll(\n defaultFocusableSelector\n );\n\n // Query the close button which is out of the modal content\n const closeCta = this.dialogWrapper?.querySelectorAll(\n defaultFocusableSelector\n );\n\n const focusableElements = Array.from(focusableNodes);\n // Add the close button to the focusable elements array, and fist element to be focused\n focusableElements.unshift(closeCta[0] as HTMLElement);\n\n const firstFocusableElement =\n focusableElements && (focusableElements[0] as HTMLElement);\n const lastFocusableSlottedElement =\n focusableElements &&\n (focusableElements[focusableElements.length - 1] as HTMLElement);\n\n if (firstFocusableElement) {\n const lastFocusableElement =\n lastFocusableSlottedElement ?? firstFocusableElement;\n\n if (lastFocusableElement) {\n lastFocusableElement.addEventListener(\n 'keydown',\n (event: KeyboardEvent) => {\n if (event.key === 'Tab' && event.shiftKey === false) {\n event.preventDefault();\n firstFocusableElement.focus();\n }\n }\n );\n }\n\n if (firstFocusableElement) {\n firstFocusableElement.addEventListener(\n 'keydown',\n (event: KeyboardEvent) => {\n if (event.key === 'Tab' && event.shiftKey) {\n event.preventDefault();\n if (lastFocusableElement) {\n lastFocusableElement.focus();\n }\n }\n }\n );\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-dialog': CHOPDialog;\n }\n\n interface Window {\n chopDialog: CHOPDialog | undefined;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n position:relative;\n z-index:1;\n}\n\n.embedded-form-container{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-08);\n padding:var(--spacing-06) var(--spacing-04);\n box-sizing:border-box;\n}\n\n.embedded-form-only{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-08);\n padding:0 var(--spacing-04);\n box-sizing:border-box;\n}\n\n:host([keep-padding]) .embedded-form-only{\n padding:var(--spacing-04);\n }\n\n:host([no-padding]) .embedded-form-container,\n :host([no-padding]) .embedded-form-only{\n padding:0;\n }\n\n@media (min-width: 1296px){\n\n:host(:not([keep-padding])):host(:not([no-padding])) .embedded-form-container{\n padding:var(--spacing-08) 0\n }\n }\n\n.dark-text{\n color:var(--color-brown-900);\n}\n\n.subheading{\n padding-bottom:var(--spacing-06);\n}\n\n@media (min-width: 1100px){\n .subheading{\n padding-bottom:var(--spacing-10);\n }\n}\n\n.alignment--3-9,\n.alignment--9-3{\n padding:var(--spacing-06) var(--spacing-05);\n}\n\n@media (min-width: 1100px){\n\n.alignment--3-9,\n.alignment--9-3{\n padding:var(--spacing-08) 0\n}\n }\n\n.form-wrapper{\n padding:var(--spacing-06) var(--spacing-04);\n background-color:var(--color-neutral-100);\n border-top:6px solid;\n}\n\n@media (min-width: 1100px){\n\n.form-wrapper{\n padding:var(--spacing-11) var(--spacing-08)\n}\n }\n\n.form-wrapper.white{\n border-color:var(--color-neutral-100);\n }\n\n.form-wrapper.dark_green{\n border-color:var(--color-green-800);\n }\n\n.form-wrapper.light_green,\n .form-wrapper.green{\n border-color:var(--color-green-500);\n }\n\n.form-wrapper.dark_pink{\n border-color:var(--color-pink-800);\n }\n\n.form-wrapper.light_pink,\n .form-wrapper.pink{\n border-color:var(--color-pink-500);\n }\n\n.form-wrapper.dark_blue{\n background-color:var(--color-blue-900);\n border-color:var(--color-blue-900);\n }\n\n.form-wrapper.blue{\n border-color:var(--color-blue-700);\n }\n\n.form-wrapper.light_blue{\n border-color:var(--color-blue-500);\n }\n\n.form-wrapper.brown{\n border-color:var(--color-brown-500);\n }\n\n.form-wrapper.dark_brown{\n border-color:var(--color-brown-900);\n }\n\n.variant--hero-search{\n padding:0;\n width:100%;\n}\n\n.variant--hero-search .form-wrapper{\n padding:0;\n border:none;\n background:none;\n}\n\n.embedded-form-container.variant--hero-search{\n padding:var(--spacing-06) 0;\n}\n\n@media (min-width: 1100px){\n\n.embedded-form-container.variant--hero-search{\n padding:var(--spacing-08) 0\n}\n }\n\n.typeahead{\n position:absolute;\n margin-top:var(--spacing-4);\n width:calc(100% - var(--spacing-16));\n}\n\n@media (min-width: 1100px){\n\n.typeahead{\n margin-top:0;\n width:auto\n}\n }\n\nchop-grid.overlap{\n padding-bottom:9rem;\n}\n`;","import { TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { IconAccentColors, iconAccentColors } from '../chop-icon/chop-icon';\nimport componentStyles from './chop-embedded-form-container.css.lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { isInType } from '../../../utilities/isInType';\nimport { contentAlign, ContentAlign } from '../chop-grid/chop-grid';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport '../chop-icon/chop-icon';\nimport '../chop-grid/chop-grid';\nimport '../chop-column/chop-column';\n\n/**\n * The Embedded Form Container Component\n * @element chop-embedded-form-container\n * @slot heading\n * @slot body\n * @slot form\n */\n\ntype variants = 'default' | 'hero-search';\n@customElement('chop-embedded-form-container')\nexport class CHOPEmbeddedFormContainer extends OutlineElement {\n static styles = [componentStyles];\n slots = new SlotManager(this);\n resizeController = new ResizeController(this);\n\n @property({\n type: String,\n attribute: 'border-top-color',\n converter: value => {\n return isInType(\n value,\n Object.values(iconAccentColors),\n 'IconAccentColors'\n )\n ? value\n : 'dark_pink';\n },\n })\n borderTopColor: IconAccentColors = 'dark_green';\n\n @property({ type: String, attribute: 'variant' })\n variant: variants = 'default';\n\n @property({ type: String, attribute: 'dark-text' })\n darkText: 'false';\n\n @property({ type: Boolean, reflect: true, attribute: 'kyruus-typeahead' })\n kyruusTypeahead = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'show-typeahead' })\n showTypeahead = false;\n\n /**\n * Maintains padding across all breakpoints.\n */\n @property({ type: Boolean, reflect: true, attribute: 'keep-padding' })\n keepPadding = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'no-padding' })\n noPadding = false;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'content-align',\n converter: value => {\n return isInType(value, Object.values(contentAlign), 'ContentAlign')\n ? value\n : '12';\n },\n })\n contentAlign: ContentAlign = '12';\n\n @property({ type: Boolean, reflect: true, attribute: 'overlap' })\n overlap: boolean;\n\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'kyruus-standalone-search-form',\n })\n kyruusStandaloneSearchForm = false;\n\n @state() kyruusStandaloneSearchFormActionBase: string;\n\n @state() kyruusBackgroundHeight: string;\n\n iframe: HTMLIFrameElement | null;\n\n // Holds a reference to the timeout ID for the typeahead functionality, or null if no timeout is set.\n private typeaheadTimeout: number | null = null;\n\n // Handles input events for the typeahead feature on the input element with id 'keyword'.\n private onTypeaheadInput(event: Event): void {\n // Hide the typeahead when someone types.\n this.showTypeahead = false;\n // Cast the event target to an HTMLInputElement.\n const inputElement = event.target as HTMLInputElement;\n // Check if the input element exists and has the correct id.\n if (inputElement && inputElement.id === 'keyword') {\n // If a timeout is already set, clear it to prevent multiple requests.\n if (this.typeaheadTimeout !== null) {\n clearTimeout(this.typeaheadTimeout);\n }\n // Get the current value of the input field.\n const terms = inputElement.value;\n // If the input value is at least 2 characters long, proceed with typeahead.\n if (terms.length >= 2) {\n // Set a timeout to delay the typeahead request, avoiding too many requests during typing.\n this.typeaheadTimeout = window.setTimeout(() => {\n // Fetch the typeahead suggestions from the server using the input value.\n fetch(`/api/kyruus/typeahead?terms=${encodeURIComponent(terms)}`)\n // Parse the response as text.\n .then(response => response.text())\n // Use the response to render the typeahead suggestions.\n .then(html => {\n this.renderTypeahead(html);\n this.showTypeahead = true;\n });\n }, 500); // The delay is set to 500 milliseconds.\n }\n }\n }\n\n /**\n * Renders the typeahead suggestions by updating the inner HTML of the typeahead slot.\n * It also attaches click event listeners to buttons within the typeahead suggestions\n * to handle selection of a suggestion.\n *\n * @param html - The HTML string containing typeahead suggestions to be rendered.\n */\n private renderTypeahead(html: string): void {\n // Find the DOM element designated as the typeahead slot.\n const typeaheadSlot = this.querySelector('[slot=\"typeahead\"]');\n\n // If the typeahead slot is found, update its content and attach event listeners.\n if (typeaheadSlot) {\n // Update the inner HTML of the typeahead slot with the provided HTML string.\n typeaheadSlot.innerHTML = html;\n\n // Initialize htmx on the new content. Note we don't want to create an\n // htmx dependency here, so we'll first test if it is available, and then\n // execute if it is.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n if (window.htmx) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).htmx.process(typeaheadSlot);\n }\n\n // Find all buttons within the typeahead slot that are used for typeahead suggestions.\n const typeaheadButtons =\n typeaheadSlot.querySelectorAll('.typeahead-button');\n\n // Attach a click event listener to each button to handle typeahead suggestion selection.\n typeaheadButtons.forEach(button => {\n button.addEventListener(\n 'click',\n this.handleTypeaheadButtonClick.bind(this)\n );\n });\n\n // Query the DOM for the close button within the typeahead slot\n const typeaheadCloseButton =\n typeaheadSlot.querySelector('.typeahead-close');\n // If the close button is found, attach a click event listener to it\n if (typeaheadCloseButton) {\n // The event listener calls handleTypeaheadCloseButton when the button is clicked\n typeaheadCloseButton.addEventListener('click', () =>\n this.handleTypeaheadCloseButton()\n );\n }\n }\n }\n\n /**\n * Handles click events on typeahead suggestion buttons by updating the search input\n * with the selected suggestion's value and triggering the search form submission.\n *\n * @param event - The click event object from the typeahead suggestion button.\n */\n private handleTypeaheadButtonClick(event: Event): void {\n // Get the button element that was clicked.\n const button = event.currentTarget as HTMLButtonElement;\n\n // Retrieve the search value associated with the clicked button.\n const searchValue = button.getAttribute('data-search-value');\n\n // Find the search input element by its ID.\n const inputElement = this.querySelector(\n 'input#keyword'\n ) as HTMLInputElement;\n\n // Find the closest form element that contains the search input.\n const formElement = inputElement.closest('form') as HTMLFormElement;\n\n // If both the input element and search value are found, update the input and submit the form.\n if (inputElement && searchValue) {\n // Set the value of the search input to the selected suggestion's value.\n inputElement.value = searchValue;\n\n // Find the submit button within the form and trigger a click to submit the form.\n const submitButton = formElement.querySelector(\n 'button[type=\"submit\"]'\n ) as HTMLButtonElement;\n submitButton.click();\n }\n }\n\n /**\n * Handles the closing of the typeahead suggestions list.\n * When invoked, it sets the `showTypeahead` property to false,\n * which is expected to hide the typeahead suggestions from the view.\n */\n private handleTypeaheadCloseButton(): void {\n this.showTypeahead = false;\n }\n\n private onKyruusStandaloneSearchInput(formElement: HTMLFormElement): void {\n // Make sure we have an input element, if not bail.\n const keywordInputElement = this.querySelector(\n 'input#keyword'\n ) as HTMLInputElement | null;\n if (!keywordInputElement) {\n console.error('Keyword input element not found.');\n return;\n }\n\n // Get our keyword input value\n const keywordValue = keywordInputElement.value;\n\n // URI encode it because we're going to use it\n const encodedKeywordValue = encodeURIComponent(keywordValue);\n\n formElement.action =\n this.kyruusStandaloneSearchFormActionBase + encodedKeywordValue;\n }\n\n /**\n * Calculates and sets the background height based on the positions of the background\n * and results elements. It ensures that the height calculation is performed after the\n * browser has completed any pending layout and style calculations by using\n * requestAnimationFrame. This method is also bound to the window resize event to\n * recalculate the height as needed when the window size changes.\n *\n * @param {Element} background - The background element whose height needs to be calculated.\n * @param {Element} results - The results element used to determine the end position for the height calculation.\n */\n handleBackgroundHeight(background: Element, results: Element) {\n // Define a function to calculate and set the background height.\n const calculateHeight = () => {\n // Use requestAnimationFrame to ensure styles are calculated before we execute this.\n requestAnimationFrame(() => {\n const pos1 = this.getVerticalPosition(background);\n const pos2 = this.getVerticalPosition(results);\n const distance = Math.abs(pos1 - pos2);\n const height = distance - 68 + 'px';\n\n // If the height is the same, we're done here.\n if (this.kyruusBackgroundHeight === height) {\n return;\n }\n\n // Save the background height to state for reuse.\n this.kyruusBackgroundHeight = height;\n\n // Set the property as a global variable so we can use it elsewhere.\n document.documentElement.style.setProperty(\n '--kyruus-search-loaded-background-height',\n height\n );\n });\n };\n\n // Add an event listener to watch for resizes so someone can grow/collapse their screen and the background will adjust to match. We don't remove this in hostDisconnected() because it doesn't play nicely with HTMX.\n window.addEventListener('resize', calculateHeight);\n\n calculateHeight();\n }\n\n // Returns the vertical position of an element in the DOM.\n getVerticalPosition(element: Element) {\n return element.getBoundingClientRect().top + window.scrollY;\n }\n\n connectedCallback() {\n super.connectedCallback();\n window.addEventListener('resize', this.setIframeHeight.bind(this), false);\n if (this.kyruusTypeahead) {\n this.onTypeaheadInput = this.onTypeaheadInput.bind(this);\n }\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.setIframeHeight, false);\n\n const inputElement = this.querySelector('input#keyword');\n inputElement?.removeEventListener(\n 'input',\n this.onTypeaheadInput.bind(this)\n );\n }\n\n setIframeHeight() {\n if (this.iframe) {\n const iframeDocument =\n this.iframe?.contentDocument || this.iframe?.contentWindow?.document;\n if (iframeDocument) {\n const contentHeight = iframeDocument.body.scrollHeight;\n if (this.iframe) {\n this.iframe.height = `${contentHeight}px`;\n }\n }\n }\n }\n\n firstUpdated() {\n this.iframe = this.querySelector('iframe');\n if (this.iframe) {\n this.iframe.addEventListener('load', () => {\n setTimeout(() => {\n this.setIframeHeight();\n }, 300);\n });\n } else if (\n this.querySelector('form[data-views-exposed-common-form=true]')\n ) {\n const form = this.querySelector(\n 'form[data-views-exposed-common-form=true]'\n );\n if (form) {\n const submitButton = form.querySelector(\n 'input[data-btn-search-submit-hide=true]'\n ) as HTMLElement;\n const submitLink = form.querySelector(\n 'a#btn-link-submit'\n ) as HTMLElement;\n const resetButton = form.querySelector(\n 'input[data-drupal-selector=\"edit-reset\"]'\n ) as HTMLElement;\n\n if (submitButton) {\n submitButton.style.display = 'none';\n submitLink.addEventListener('click', e => {\n e.preventDefault();\n submitButton.click();\n });\n }\n\n const resetLink = form.querySelector('a#btn-link-reset') as HTMLElement;\n if (resetLink) {\n const resetLinkParentElement = resetLink.parentElement as HTMLElement;\n if (resetButton) {\n resetButton.style.display = 'none';\n resetLinkParentElement.style.display = 'block';\n resetLink.addEventListener('click', e => {\n e.preventDefault();\n resetButton.click();\n });\n } else {\n resetLinkParentElement.style.display = 'none';\n }\n }\n }\n } else if (\n this.querySelector(\n 'form#views-exposed-form-global-site-search-global-site-search'\n )\n ) {\n const form = this.querySelector(\n 'form#views-exposed-form-global-site-search-global-site-search'\n );\n if (form) {\n const resetButton = form.querySelector(\n 'input#edit-reset'\n ) as HTMLElement;\n const resetLink = form.querySelector('a#btn-link-reset') as HTMLElement;\n if (resetLink) {\n const resetLinkParentElement = resetLink.parentElement as HTMLElement;\n if (resetButton) {\n resetButton.style.display = 'none';\n resetLinkParentElement.style.display = 'block';\n resetLink.addEventListener('click', e => {\n e.preventDefault();\n resetButton.click();\n });\n } else {\n resetLinkParentElement.style.display = 'none';\n }\n }\n }\n }\n\n if (this.kyruusTypeahead) {\n const inputElement = this.querySelector('input#keyword');\n inputElement?.addEventListener('input', this.onTypeaheadInput.bind(this));\n\n // See if we've loaded results, and have a background block. If yes, we need to mutate the background block.\n // firstUpdated gets called on htmx reloads, so this will get called when needed.\n const background = document.querySelector(\n '.block-background_block.h-full.chop-background-block'\n );\n const results = document.querySelector('#search-results');\n if (background && results) {\n // Call a method to measure then set the background height.\n this.handleBackgroundHeight(background, results);\n }\n }\n\n if (this.kyruusStandaloneSearchForm) {\n // Make sure we've got a form element, if not bail.\n const formElement = this.querySelector('form') as HTMLFormElement | null;\n\n if (!formElement) {\n console.error('Form element not found');\n return;\n }\n this.kyruusStandaloneSearchFormActionBase = formElement.action;\n const inputElement = this.querySelector('input#keyword');\n inputElement?.addEventListener('input', () =>\n this.onKyruusStandaloneSearchInput(formElement)\n );\n }\n }\n\n render(): TemplateResult {\n const form = document.querySelector('div[slot=\"form\"]');\n\n const containerClasses = {\n 'dark-text': this.darkText,\n 'embedded-form-container': form?.classList.contains('iframe')\n ? false\n : true,\n ['variant--' + this.variant]: true,\n ['alignment--' + this.contentAlign]: true,\n 'embedded-form-only': form?.classList.contains('iframe') ? true : false,\n };\n const wrapperClasses = {\n 'form-wrapper': true,\n [`${this.borderTopColor}`]: this.borderTopColor,\n };\n const gridClasses = {\n overlap: this.overlap,\n };\n\n return html`\n \n ${this.contentAlign === '3-9' ? this.asideTemplate() : nothing}\n \n
\n ${this.template('heading')} ${this.template('description')}\n ${this.slots.exist('form')\n ? html`
\n ${this.slots.exist('subheading')\n ? html`\n
\n \n
\n `\n : nothing}\n ${this.template('form')}\n ${this.kyruusTypeahead\n ? html`
\n \n
`\n : nothing}\n
`\n : nothing}\n
\n \n ${this.contentAlign === '9-3' ? this.asideTemplate() : nothing}\n \n `;\n }\n\n template(slotName: string) {\n if (this.slots.exist(slotName)) {\n return html``;\n } else {\n return nothing;\n }\n }\n\n asideTemplate() {\n return html`\n \n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-embedded-form-container': CHOPEmbeddedFormContainer;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n color:var(--color-brown-900);\n}\n\n.card-wrapper{\n border-radius:6px;\n display:flex;\n flex-direction:row;\n align-items:center;\n background-color:var(--color-brown-100);\n height:100%;\n padding:var(--spacing-10) var(--spacing-08);\n gap:var(--spacing-02);\n justify-content:space-between;\n}\n\n.card-wrapper.mobile{\n flex-direction:column;\n padding:var(--spacing-04);\n}\n\n.card-wrapper.overlaps{\n margin:-2rem 1rem 0;\n z-index:20;\n position:relative;\n}\n\n.card-wrapper.overlaps.mobile{\n margin-top:-1.5rem;\n }\n\n.mobile .layout-wrapper{\n flex-direction:column;\n align-items:flex-start;\n width:100%;\n}\n\n.layout-wrapper{\n display:flex;\n align-items:stretch;\n}\n\n.mobile .content-wrapper{\n display:flex;\n flex-direction:row;\n border-bottom:solid 1px var(--color-brown-700);\n margin-bottom:var(--spacing-08);\n padding:var(--spacing-06) 0 var(--spacing-08) 0;\n border-right:0;\n margin-right:0;\n padding-right:0;\n min-height:0;\n width:100%;\n}\n\n.mobile .content-wrapper:last-child{\n border-bottom:0;\n margin-bottom:0;\n }\n\n.content-wrapper{\n display:flex;\n flex-direction:column;\n width:fit-content;\n align-items:flex-start;\n gap:var(--spacing-04);\n border-right:solid 1px var(--color-brown-700);\n margin-right:var(--spacing-08);\n padding-right:var(--spacing-08);\n min-height:95px;\n}\n\n.content-wrapper:last-child{\n border-right:0;\n padding-right:0;\n}\n\n@media (min-width: 1400px){\n .content-wrapper{\n flex-direction:row;\n }\n}\n\n.content-inner-wrapper{\n display:flex;\n flex-direction:column;\n}\n\n.content-inner-wrapper .name{\n font-family:var(--ff-display);\n }\n\n.content-inner-wrapper .email{\n color:#0274b5;\n color:var(--color-blue-700, #0274b5);\n font-family:var(--ff-display);\n font-size:var(--fs-lg);\n line-height:var(--lh-xl);\n }\n\n.content-inner-wrapper .time,\n .content-inner-wrapper .location{\n margin-top:var(--spacing-02);\n }\n\n.content-inner-wrapper .location{\n color:#0274b5;\n color:var(--color-blue-700, #0274b5);\n font-family:var(--ff-body);\n font-size:var(--fs-lg);\n line-height:var(--lh-lg);\n }\n\n.content-inner-wrapper .venue-name{\n font-family:var(--ff-body);\n font-size:var(--fs-lg);\n line-height:var(--lh-lg);\n }\n\n@media screen and (min-width: 1100px){\n .content-inner-wrapper.first{\n width:max-content;\n }\n}\n\n.border-color-green{\n border-top:6px solid var(--color-green-500);\n}\n`;","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport componentStyles from './chop-event-bar.css.lit';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport '../chop-icon/chop-icon';\nimport '../chop-heading/chop-heading';\n\n/**\n * The event bar component\n * @element chop-event-bar\n *\n * @slot date\n * @slot time\n * @slot location-title\n * @slot location\n * @slot contact\n * @slot name\n * @slot email\n * @slot cta\n */\n\n@customElement('chop-event-bar')\nexport class CHOPEventBar extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n resizeController = new ResizeController(this);\n isMobile: boolean;\n isXL: boolean;\n\n slots = new SlotManager(this);\n\n @property({ type: Boolean, attribute: 'overlaps' })\n overlaps = false;\n\n render(): TemplateResult {\n this.isMobile = this.resizeController.currentBreakpointRange <= 3;\n this.isXL = this.resizeController.currentBreakpointRange >= 5;\n //Adds a mobile class to the lightDom to style the button\n if (this.isMobile) {\n this.classList.add('mobile');\n } else {\n this.classList.remove('mobile');\n }\n //Adds a mobile class to the lightDom to style the button\n if (this.isXL) {\n this.classList.add('xl-screen');\n } else {\n this.classList.remove('xl-screen');\n }\n const classes = {\n 'xl-screen': this.isXL,\n 'mobile': this.isMobile,\n 'card-wrapper': true,\n 'border-color-green': true,\n 'overlaps': this.overlaps,\n };\n\n return html`
\n
\n ${this.slots.exist('date') || this.slots.exist('time')\n ? html`\n
\n
\n \n
\n
\n ${this.slotTemplate('date')} ${this.slotTemplate('time')}\n
\n
\n `\n : nothing}\n ${this.slots.exist('location-title') ||\n this.slots.exist('venue-name') ||\n this.slots.exist('location')\n ? html`\n
\n
\n \n
\n
\n ${this.slotTemplate('location-title')}\n ${this.slotTemplate('venue-name')}\n ${this.slotTemplate('location')}\n
\n
\n `\n : nothing}\n ${this.slots.exist('contact') ||\n this.slots.exist('name') ||\n this.slots.exist('email')\n ? html`\n
\n
\n \n
\n
\n ${this.slotTemplate('contact')} ${this.slotTemplate('name')}\n ${this.slotTemplate('email')}\n
\n
\n `\n : nothing}\n
\n \n
`;\n }\n\n /**\n *\n * @returns {TemplateResult} - A lit-html `TemplateResult`. If the 'name' slot exists, it will return a template with the 'name' slot. Otherwise, it will return an empty template.\n */\n slotTemplate(name = ''): TemplateResult | typeof nothing {\n if (!this.slots.exist(name)) {\n // If the slot does not exist, return early with an empty template.\n return nothing;\n }\n\n // If the slot exists, return the appropriate template.\n return html`
\n \n
`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-event-bar': CHOPEventBar;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n.cta{\n margin-top:var(--spacing-04);\n color:var(--color-blue-700);\n display:flex;\n}\n`;","import { CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { OutlineElement, SlotsController } from '@phase2/outline-core';\nimport { classMap } from 'lit/directives/class-map.js';\nimport componentStyles from './chop-expandible-container.css.lit';\nimport '../chop-button/chop-button';\n\n/**\n * The Rating component.\n * @extends OutlineElement\n * @element chop-expandible-container\n *\n * @slot heading - The heading of the rating list\n * @slot description - The description of the rating list\n * @slot list - The list of ratings\n * @slot opened-button-text - The text of the button when the list is opened\n * @slot closed-button-text - The text of the button when the list is closed\n * @slot cta - The link to open external page\n *\n */\n\n@customElement('chop-expandible-container')\nexport class CHOPExpandibleContainer extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotsController(this);\n\n @property({ type: Boolean, attribute: 'is-expanded' })\n isExpanded: boolean;\n\n @property({ type: Number, attribute: 'max-items' })\n maxItems: Number = 0;\n\n @property({ type: Boolean, attribute: 'border-bottom' })\n borderBottom: boolean;\n\n @property({ type: Boolean, attribute: 'content-expandible' })\n contentExpandible: boolean;\n\n @state() itemsCount: number;\n\n list: HTMLElement | null;\n items: NodeListOf;\n\n useExpandible = false;\n\n firstUpdated() {\n this.list = this.querySelector('ul') as HTMLUListElement;\n this.items = this.querySelectorAll('li') as NodeListOf;\n this.itemsCount = this.items.length;\n this.useExpandible =\n Number(this.maxItems) > 0 && this.itemsCount > Number(this.maxItems);\n this.useExpandible = this.contentExpandible ?? this.useExpandible;\n if (this.useExpandible) {\n this.items.forEach((item, index) => {\n if (index > Number(this.maxItems) - 1) item.classList.add('hide');\n });\n }\n }\n\n updated() {\n if (this.isExpanded && this.useExpandible) {\n this.list?.classList.add('expanded');\n } else {\n this.list?.classList.remove('expanded');\n }\n }\n\n handleToggle() {\n this.isExpanded = !this.isExpanded;\n if (!this.isExpanded) {\n this.scrollToExpanded();\n }\n }\n\n /**\n * Scrolls to the expanded container.\n */\n scrollToExpanded() {\n const expandedContainer = this.getExpandedContainer();\n if (expandedContainer) {\n expandedContainer.scrollIntoView({ behavior: 'smooth' });\n }\n }\n\n /**\n * Gets the expanded container.\n */\n getExpandedContainer() {\n const parentContainer = this.parentElement\n ?.parentElement as HTMLElement | null;\n if (parentContainer) {\n return parentContainer.querySelector('.expanded');\n }\n return null;\n }\n\n render(): TemplateResult {\n const classes = {\n 'chop-expandible-container': true,\n 'border-bottom': this.borderBottom,\n 'expanded': this.isExpanded,\n };\n\n return html`\n
\n ${this.slotTemplate('heading')} ${this.slotTemplate('description')}\n ${this.slotTemplate('list')}\n ${this.useExpandible ? this.buttonTemplate() : nothing}\n ${this.slotTemplate('cta')}\n
\n `;\n }\n\n slotTemplate(slotName: string) {\n if (this.slots.exist(slotName)) {\n return html`
\n \n
`;\n } else {\n return nothing;\n }\n }\n\n buttonTemplate() {\n const classes = {\n 'content-expandible': this.contentExpandible,\n };\n return html`\n
\n \n ${this.contentExpandible\n ? html``\n : nothing}\n ${this.isExpanded\n ? html` `\n : html` `}\n \n
\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-expandible-container': CHOPExpandibleContainer;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:block;\n width:100%;\n}\n\n.heading,\n.description{\n margin-bottom:var(--spacing-08);\n}\n\n.list{\n padding:0 var(--spacing-4);\n}\n\n.borders{\n display:flex;\n flex-wrap:wrap;\n gap:2rem;\n}\n\n.borders > div{\n width:100%;\n height:6px;\n}\n\n.borders :first-child{\n background-color:var(--color-green-500);\n}\n\n.borders :last-child{\n background-color:var(--color-green-500);\n display:none;\n}\n\n.cta{\n margin-top:var(--spacing-08);\n text-align:center;\n color:var(--color-blue-700);\n display:flex;\n justify-content:center;\n}\n\n@media (min-width: 860px){\n .borders > div{\n width:calc(50% - var(--spacing-04));\n }\n .borders :last-child{\n display:block;\n }\n}\n`;","import { CSSResultGroup, html, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { OutlineElement, SlotsController } from '@phase2/outline-core';\nimport { classMap } from 'lit/directives/class-map.js';\nimport componentStyles from './chop-expandible-link-list.css.lit';\nimport '../chop-button/chop-button';\n\n/**\n * @extends OutlineElement\n * @element chop-expandible-link-list\n *\n * @property variation - The variation of the component\n *\n * @slot heading\n * @slot list\n * @slot opened-button-text\n * @slot closed-button-text\n */\n\ntype Variant = 'default' | 'list-type';\n\n@customElement('chop-expandible-link-list')\nexport class CHOPExpandibleLinkList extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n slots = new SlotsController(this);\n\n @property({ type: String, attribute: 'variant' })\n variant: Variant = 'default';\n\n @property({ type: Boolean, attribute: 'is-expanded' })\n isExpanded: boolean;\n\n @state() itemsCount: number;\n\n list: HTMLElement | null;\n items: NodeListOf;\n\n firstUpdated() {\n this.list = this.querySelector('ul') as HTMLUListElement;\n this.items = this.querySelectorAll('li') as NodeListOf;\n this.items.forEach((item, index) => {\n if (index > 9) item.classList.add('hide');\n });\n this.itemsCount = this.items.length;\n }\n\n updated() {\n if (this.isExpanded) {\n this.list?.classList.add('expanded');\n } else {\n this.list?.classList.remove('expanded');\n }\n }\n\n handleToggle() {\n this.isExpanded = !this.isExpanded;\n }\n\n render(): TemplateResult {\n const classes = {\n 'chop-expandible-link-list': true,\n [`variant-${this.variant}`]: true,\n 'expanded': this.isExpanded,\n };\n\n return html`\n
\n ${this.slots.exist('heading')\n ? html`\n
\n \n
\n `\n : ''}\n ${this.slots.exist('description')\n ? html`\n
\n \n
\n `\n : ''}\n
\n ${this.variant === 'default'\n ? html`\n
\n
\n ${this.itemsCount > 1 ? html`
` : ''}\n
\n `\n : ''}\n \n
\n ${this.itemsCount > 10\n ? html`\n
\n \n ${this.isExpanded\n ? html` `\n : html` `}\n \n
\n `\n : ''}\n
\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-expandible-link-list': CHOPExpandibleLinkList;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\nchop-heading :host{\n display:block;\n}\n chop-heading .chop-headline{\n color:inherit;\n font-family:var(--headline-2xl-mid-font-family);\n display:block;\n margin:0;\n font-weight:inherit;\n word-break:keep-all;\n\n}\n chop-heading .chop-headline a{\n text-decoration:none;\n }\n chop-heading .chop-headline a:hover{\n text-decoration:underline;\n }\n chop-heading .chop-headline p{\n padding:0;\n margin:0;\n text-align:left;\n }\n chop-heading .chop-headline.brown-900{\n color:var(--color-brown-900);\n }\n chop-heading .clickable-card h1,\n chop-heading .clickable-card h2,\n chop-heading .clickable-card h3,\n chop-heading .clickable-card h4,\n chop-heading .clickable-card h5,\n chop-heading .clickable-card h6,\n chop-heading .clickable-card a{\n color:var(--color-blue-600);\n text-decoration:none;\n word-break:keep-all;\n }\n chop-heading .clickable-card h1:hover, chop-heading .clickable-card h2:hover, chop-heading .clickable-card h3:hover, chop-heading .clickable-card h4:hover, chop-heading .clickable-card h5:hover, chop-heading .clickable-card h6:hover, chop-heading .clickable-card a:hover{\n text-decoration:underline;\n cursor:pointer;\n }\n chop-heading .clickable-card h1:focus,\n chop-heading .clickable-card h1:focus-visible,\n chop-heading .clickable-card h2:focus,\n chop-heading .clickable-card h2:focus-visible,\n chop-heading .clickable-card h3:focus,\n chop-heading .clickable-card h3:focus-visible,\n chop-heading .clickable-card h4:focus,\n chop-heading .clickable-card h4:focus-visible,\n chop-heading .clickable-card h5:focus,\n chop-heading .clickable-card h5:focus-visible,\n chop-heading .clickable-card h6:focus,\n chop-heading .clickable-card h6:focus-visible,\n chop-heading .clickable-card a:focus,\n chop-heading .clickable-card a:focus-visible{\n outline:2px solid var(--color-blue-600);\n outline-offset:2px;\n border-radius:8px;\n }\n chop-heading .clickable-card h1:after, chop-heading .clickable-card h2:after, chop-heading .clickable-card h3:after, chop-heading .clickable-card h4:after, chop-heading .clickable-card h5:after, chop-heading .clickable-card h6:after, chop-heading .clickable-card a:after{\n position:absolute;\n inset:0;\n content:'';\n }\n chop-heading .clickable-card.dark-mode h1,\n chop-heading .clickable-card.dark-mode h2,\n chop-heading .clickable-card.dark-mode h3,\n chop-heading .clickable-card.dark-mode h4,\n chop-heading .clickable-card.dark-mode h5,\n chop-heading .clickable-card.dark-mode h6,\n chop-heading .clickable-card.dark-mode a{\n color:var(--color-neutral-100);\n text-decoration:none;\n }\n chop-heading .clickable-card.dark-mode h1:hover, chop-heading .clickable-card.dark-mode h2:hover, chop-heading .clickable-card.dark-mode h3:hover, chop-heading .clickable-card.dark-mode h4:hover, chop-heading .clickable-card.dark-mode h5:hover, chop-heading .clickable-card.dark-mode h6:hover, chop-heading .clickable-card.dark-mode a:hover{\n text-decoration:underline;\n cursor:pointer;\n }\n chop-heading .clickable-card.dark-mode h1:focus,\n chop-heading .clickable-card.dark-mode h1:focus-visible,\n chop-heading .clickable-card.dark-mode h2:focus,\n chop-heading .clickable-card.dark-mode h2:focus-visible,\n chop-heading .clickable-card.dark-mode h3:focus,\n chop-heading .clickable-card.dark-mode h3:focus-visible,\n chop-heading .clickable-card.dark-mode h4:focus,\n chop-heading .clickable-card.dark-mode h4:focus-visible,\n chop-heading .clickable-card.dark-mode h5:focus,\n chop-heading .clickable-card.dark-mode h5:focus-visible,\n chop-heading .clickable-card.dark-mode h6:focus,\n chop-heading .clickable-card.dark-mode h6:focus-visible,\n chop-heading .clickable-card.dark-mode a:focus,\n chop-heading .clickable-card.dark-mode a:focus-visible{\n outline:2px solid var(--color-neutral-100);\n outline-offset:2px;\n border-radius:8px;\n }\n chop-heading .clickable-card.dark-mode h1:after, chop-heading .clickable-card.dark-mode h2:after, chop-heading .clickable-card.dark-mode h3:after, chop-heading .clickable-card.dark-mode h4:after, chop-heading .clickable-card.dark-mode h5:after, chop-heading .clickable-card.dark-mode h6:after, chop-heading .clickable-card.dark-mode a:after{\n position:absolute;\n inset:0;\n content:'';\n }\n chop-heading .headline-3xl{\n font-size:var(--fs-4half-xl);\n line-height:var(--headline-3xl-min-line-height);\n font-family:var(--headline-3xl-min-font-family);\n letter-spacing:var(--headline-3xl-min-letter-spacing);\n text-transform:var(--headline-3xl-min-text-case);\n font-weight:var(--headline-3xl-min-font-weight);\n}\n @media (min-width: 860px){\n chop-heading .headline-3xl{\n font-size:clamp(2.5rem, 2.5rem + 3.125vw, 4.5rem);\n line-height:var(--headline-3xl-mid-line-height);\n font-family:var(--headline-3xl-mid-font-family);\n letter-spacing:var(--headline-3xl-mid-letter-spacing);\n text-transform:var(--headline-3xl-mid-text-case);\n font-weight:var(--headline-3xl-mid-font-weight)\n}\n }\n @media (min-width: 1100px){\n chop-heading .headline-3xl{\n line-height:var(--headline-3xl-max-line-height);\n font-family:var(--headline-3xl-max-font-family);\n letter-spacing:var(--headline-3xl-max-letter-spacing);\n text-transform:var(--headline-3xl-max-text-case);\n font-weight:var(--headline-3xl-max-font-weight)\n}\n }\n chop-heading .headline-2xl{\n font-size:clamp(2.25rem, 2.25rem + 2.734375vw, 4rem);\n font-weight:var(--headline-2xl-min-font-weight);\n line-height:var(--headline-2xl-min-line-height);\n font-family:var(--headline-2xl-min-font-family);\n letter-spacing:var(--headline-2xl-min-letter-spacing);\n text-transform:var(--headline-2xl-min-text-case);\n}\n @media (min-width: 860px){\n chop-heading .headline-2xl{\n font-weight:var(--headline-2xl-mid-font-weight);\n line-height:var(--headline-2xl-mid-line-height);\n font-family:var(--headline-2xl-mid-font-family);\n letter-spacing:var(--headline-2xl-mid-letter-spacing);\n text-transform:var(--headline-2xl-mid-text-case)\n}\n }\n @media (min-width: 1100px){\n chop-heading .headline-2xl{\n font-weight:var(--headline-2xl-max-font-weight);\n line-height:var(--headline-2xl-max-line-height);\n font-family:var(--headline-2xl-max-font-family);\n letter-spacing:var(--headline-2xl-max-letter-spacing);\n text-transform:var(--headline-2xl-max-text-case)\n}\n }\n chop-heading .headline-xl{\n font-size:clamp(2rem, 2rem + 2.34375vw, 3.5rem);\n font-weight:var(--headline-xl-min-font-weight);\n line-height:var(--headline-xl-min-line-height);\n font-family:var(--headline-xl-min-font-family);\n letter-spacing:var(--headline-xl-min-letter-spacing);\n text-transform:var(--headline-xl-min-text-case);\n}\n @media (min-width: 860px){\n chop-heading .headline-xl{\n font-weight:var(--headline-xl-mid-font-weight);\n line-height:var(--headline-xl-mid-line-height);\n font-family:var(--headline-xl-mid-font-family);\n letter-spacing:var(--headline-xl-mid-letter-spacing);\n text-transform:var(--headline-xl-mid-text-case)\n}\n }\n @media (min-width: 1100px){\n chop-heading .headline-xl{\n font-weight:var(--headline-xl-max-font-weight);\n line-height:var(--headline-xl-max-line-height);\n font-family:var(--headline-xl-max-font-family);\n letter-spacing:var(--headline-xl-max-letter-spacing);\n text-transform:var(--headline-xl-max-text-case)\n}\n }\n chop-heading .headline-lg{\n font-weight:var(--headline-lg-min-font-weight);\n font-size:clamp(1.75rem, 1.75rem + 1.5625vw, 2.75rem);\n font-size:clamp(1.625rem, 1.625rem + 1.3672vw, 2.5rem);\n line-height:var(--headline-lg-min-line-height);\n font-family:var(--headline-lg-min-font-family);\n letter-spacing:var(--headline-lg-min-letter-spacing);\n text-transform:var(--headline-lg-min-text-case);\n}\n @media (min-width: 860px){\n chop-heading .headline-lg{\n font-weight:var(--headline-lg-mid-font-weight);\n line-height:var(--headline-lg-mid-line-height);\n font-family:var(--headline-lg-mid-font-family);\n letter-spacing:var(--headline-lg-mid-letter-spacing);\n text-transform:var(--headline-lg-mid-text-case)\n}\n }\n @media (min-width: 1100px){\n chop-heading .headline-lg{\n font-weight:var(--headline-lg-max-font-weight);\n line-height:var(--headline-lg-max-line-height);\n font-family:var(--headline-lg-max-font-family);\n letter-spacing:var(--headline-lg-max-letter-spacing);\n text-transform:var(--headline-lg-max-text-case)\n}\n }\n chop-heading .headline-md{\n font-size:clamp(1.5rem, 1.5rem + 1.171875vw, 2.25rem);\n line-height:var(--headline-md-min-line-height);\n font-family:var(--headline-md-min-font-family);\n font-weight:var(--headline-md-min-font-weight);\n}\n @media (min-width: 860px){\n chop-heading .headline-md{\n font-weight:var(--headline-md-mid-font-weight);\n line-height:var(--headline-md-mid-line-height);\n font-family:var(--headline-md-mid-font-family);\n letter-spacing:var(--headline-md-mid-letter-spacing);\n text-transform:var(--headline-md-mid-text-case)\n}\n }\n @media (min-width: 1100px){\n chop-heading .headline-md{\n font-weight:var(--headline-md-max-font-weight);\n line-height:var(--headline-md-max-line-height);\n font-family:var(--headline-md-max-font-family);\n letter-spacing:var(--headline-md-max-letter-spacing);\n text-transform:var(--headline-md-max-text-case)\n}\n }\n chop-heading .headline-sm{\n font-weight:var(--headline-sm-min-font-weight);\n font-size:clamp(1.25rem, 1.25rem + 0.78125vw, 1.75rem);\n line-height:var(--headline-sm-min-line-height);\n font-family:var(--headline-sm-min-font-family);\n letter-spacing:var(--headline-sm-min-letter-spacing);\n text-transform:var(--headline-sm-min-text-case);\n}\n @media (min-width: 860px){\n chop-heading .headline-sm{\n font-weight:var(--headline-sm-mid-font-weight);\n line-height:var(--headline-md-mid-line-height);\n font-family:var(--headline-md-mid-font-family);\n letter-spacing:var(--headline-md-mid-letter-spacing);\n text-transform:var(--headline-md-mid-text-case)\n}\n }\n @media (min-width: 1100px){\n chop-heading .headline-sm{\n font-weight:var(--headline-sm-max-font-weight);\n line-height:var(--headline-sm-max-line-height);\n font-family:var(--headline-sm-max-font-family);\n letter-spacing:var(--headline-sm-max-letter-spacing);\n text-transform:var(--headline-sm-max-text-case)\n}\n }\n chop-heading .headline-xs{\n font-size:clamp(1.125rem, 1.125rem + 0.5859375vw, 1.5rem);\n font-weight:var(--headline-xs-min-font-weight);\n line-height:var(--headline-xs-min-line-height);\n font-family:var(--headline-xs-min-font-family);\n letter-spacing:var(--headline-xs-min-letter-spacing);\n text-transform:var(--headline-xs-min-text-case);\n}\n @media (min-width: 860px){\n chop-heading .headline-xs{\n font-weight:var(--headline-xs-mid-font-weight);\n line-height:var(--headline-xs-mid-line-height);\n font-family:var(--headline-xs-mid-font-family);\n letter-spacing:var(--headline-xs-mid-letter-spacing);\n text-transform:var(--headline-xs-mid-text-case)\n}\n }\n @media (min-width: 1100px){\n chop-heading .headline-xs{\n font-weight:var(--headline-xs-max-font-weight);\n line-height:var(--headline-xs-max-line-height);\n font-family:var(--headline-xs-max-font-family);\n letter-spacing:var(--headline-xs-max-letter-spacing);\n text-transform:var(--headline-xs-max-text-case)\n}\n }\n chop-heading .headline-eyebrow{\n font-size:clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);\n font-weight:700;\n letter-spacing:3px;\n text-transform:uppercase;\n line-height:var(--headline-eyebrow-min-line-height);\n font-family:var(--headline-eyebrow-min-font-family);\n}\n @media (min-width: 860px){\n chop-heading .headline-eyebrow{\n line-height:var(--headline-eyebrow-mid-line-height);\n font-family:var(--headline-eyebrow-mid-font-family)\n}\n }\n @media (min-width: 1100px){\n chop-heading .headline-eyebrow{\n line-height:var(--headline-eyebrow-max-line-height);\n font-family:var(--headline-eyebrow-max-font-family)\n}\n }\n @media (min-width: 860px){\n chop-heading .less-margin-bottom--xs{\n margin-bottom:-0.5rem;\n }\n chop-heading .less-margin-bottom--sm{\n margin-bottom:-1rem;\n }\n chop-heading .less-margin-bottom--md{\n margin-bottom:-2rem;\n }\n chop-heading .less-margin-bottom--lg{\n margin-bottom:-3rem;\n }\n chop-heading .less-margin-bottom--xl{\n margin-bottom:-4rem;\n }\n chop-heading .less-margin-bottom--2xl{\n margin-bottom:-5rem;\n }\n chop-heading .less-margin-bottom--3xl{\n margin-bottom:-6rem;\n }\n}\nchop-cta-link{\n --chop-cta-link--family--computed:var(--chop-cta-link--family, var(--ff-body));\n --chop-cta-link--weight--computed:var(--fw-bold);\n --chop-cta-link--padding-small--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);\n --chop-cta-link--padding-small-hover--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);\n --chop-cta-link--padding-default--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);\n --chop-cta-link--padding-default-hover--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);\n --chop-cta-link--padding-large--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);\n --chop-cta-link--padding-large-hover--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);\n --chop-cta-link--primary-bg-color--computed:var(--color-blue-700);\n --chop-cta-link--primary-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring--computed:var(--chop-cta-link--primary-ring, none);\n --chop-cta-link--primary-bg-color-hover--computed:var(--color-neutral-100);\n --chop-cta-linknknk--primary-color-hover--computed:var(\n --chop-cta-link--primary-color-hover,\n var(--color-blue-600)\n);\n --chop-cta-link--primary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring-hover--computed:var(--color-blue-700);\n --chop-cta-link--primary-bg-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--primary-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--primary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--primary-disabled-bg-color--computed:var(--color-neutral-400);\n --chop-cta-link--primary-disabled-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-disabled-ring--computed:var(--outline-transparent);\n --chop-cta-link--primary-reversed-bg-color--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-color--computed:var(--color-blue-700);\n --chop-cta-link--primary-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring--computed:var(\n --chop-cta-link--primary-reversed-ring,\n none\n);\n --chop-cta-link--primary-reversed-bg-color-hover--computed:var(\n --bg-color--transparent\n);\n --chop-cta-link--primary-reversed-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring-hover--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-bg-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--primary-reversed-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--primary-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--primary-reversed-disabled-bg-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--primary-reversed-disabled-color--computed:var(\n --color-neutral-500\n);\n --chop-cta-link--primary-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--primary-reversed-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-bg-color--computed:var(--color-neutral-100);\n --chop-cta-link--outline-color--computed:var(--color-blue-700);\n --chop-cta-link--outline-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring--computed:var(--color-blue-700);\n --chop-cta-link--outline-bg-color-hover--computed:var(--color-blue-700);\n --chop-cta-link--outline-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--outline-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring-hover--computed:var(--color-blue-700);\n --chop-cta-link--outline-bg-color-focus--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--outline-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-ring-focus--computed:var(--color-blue-500);\n --chop-cta-link--outline-disabled-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--outline-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-color--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-bg-color-hover--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-color-hover--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring-hover--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-bg-color-focus--computed:var(\n --color-blue-700\n);\n --chop-cta-link--outline-reversed-color-focus--computed:var(\n --color-neutral-100\n);\n --chop-cta-link--outline-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-ring-focus--computed:var(\n --color-blue-500\n);\n --chop-cta-link--outline-reversed-disabled-bg-color--computed:var(\n --outline-transparent\n);\n --chop-cta-link--outline-reversed-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--outline-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--outline-reversed-disabled-ring--computed:var(\n --outline-transparent\n);\n --chop-cta-link--secondary-bg-color--computed:var(--color-pink-800);\n --chop-cta-link--secondary-color--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring--computed:var(\n --chop-cta-link--secondary-ring,\n none\n);\n --chop-cta-link--secondary-bg-color-hover--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-color-hover--computed:var(\n --chop-cta-link--secondary-color-hover,\n var(--color-pink-800)\n);\n --chop-cta-link--secondary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring-hover--computed:var(--color-pink-800);\n --chop-cta-link--secondary-bg-color-focus--computed:var(--color-pink-800);\n --chop-cta-link--secondary-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-ring-focus--computed:var(--color-pink-800);\n --chop-cta-link--secondary-disabled-bg-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--secondary-disabled-color--computed:var(--color-neutral-100);\n --chop-cta-link--secondary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--secondary-disabled-ring--computed:var(--outline-transparent);\n --chop-cta-link--link-bg-color--computed:var(--outline-transparent);\n --chop-cta-link--link-color--computed:var(--color-blue-700);\n --chop-cta-link--link-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-ring--computed:var(--color-blue-700);\n --chop-cta-link--link-color-hover--computed:var(--color-blue-800);\n --chop-cta-link--link-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-color-focus--computed:var(--color-blue-700);\n --chop-cta-link--link-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-disabled-color--computed:var(--color-neutral-400);\n --chop-cta-link--link-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color--computed:var(--color-neutral-100);\n --chop-cta-link--link-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color-hover--computed:var(--color-blue-700);\n --chop-cta-link--link-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-color-focus--computed:var(--color-neutral-100);\n --chop-cta-link--link-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n --chop-cta-link--link-reversed-disabled-color--computed:var(\n --color-neutral-400\n);\n --chop-cta-link--link-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);\n}\nchop-cta-link .btn{\n display:flex;\n width:fit-content;\n flex-wrap:nowrap;\n align-items:center;\n cursor:pointer;\n transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration:300ms;\n text-decoration-line:none;\n outline:none;\n border:none;\n border-radius:0.5rem;\n line-height:1.5;\n background:transparent;\n\n font-family:var(--chop-cta-link--family--computed);\n font-weight:var(--chop-cta-link--weight--computed);\n padding:var(--chop-cta-link--padding-default--computed);\n}\nchop-cta-link .btn[aria-disabled='true']{\n pointer-events:none;\n cursor:not-allowed;\n user-select:none;\n}\nchop-cta-link .btn.small{\n font-size:var(--fs-sm);\n line-height:var(--lh-base);\n padding:var(--chop-cta-link--padding-small--computed);\n}\nchop-cta-link .btn.small.no-icon{\n padding:var(--spacing-02) var(--spacing-4);\n }\nchop-cta-link .btn.medium,\nchop-cta-link .btn.default{\n font-size:var(--fs-base);\n line-height:var(--lh-md);\n}\nchop-cta-link .btn.medium.no-icon, chop-cta-link .btn.default.no-icon{\n padding:var(--spacing-02) var(--spacing-6);\n }\nchop-cta-link .btn.large{\n font-size:var(--fs-lg);\n line-height:var(--lh-sm);\n padding:var(--chop-cta-link--padding-large--computed);\n}\nchop-cta-link .btn.large.no-icon{\n padding:var(--spacing-03) var(--spacing-8);\n }\nchop-cta-link .btn.primary{\n background-color:var(--chop-cta-link--primary-bg-color--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight--computed);\n border:2px solid var(--chop-cta-link--primary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring--computed);\n}\nchop-cta-link .btn.primary:hover,\n chop-cta-link .btn.primary:active{\n background-color:var(--chop-cta-link--primary-color--computed);\n color:var(--chop-cta-link--primary-bg-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--primary-ring-hover--computed);\n }\nchop-cta-link .btn.primary:focus{\n background-color:var(--chop-cta-link--primary-bg-color-focus--computed);\n color:var(--chop-cta-link--primary-color--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\nchop-cta-link .btn.primary[aria-disabled='true']{\n background-color:var(--chop-cta-link--primary-disabled-bg-color--computed);\n color:var(--chop-cta-link--primary-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-disabled-ring--computed);\n}\nchop-cta-link .btn.primary.reversed{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n}\nchop-cta-link .btn.primary.reversed:hover,\n chop-cta-link .btn.primary.reversed:active{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n }\nchop-cta-link .btn.primary.reversed:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n }\nchop-cta-link .btn.primary.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\nchop-cta-link .btn.outline{\n background-color:var(--chop-cta-link--outline-bg-color--computed);\n color:var(--chop-cta-link--outline-color--computed);\n font-weight:var(--chop-cta-link--outline-weight--computed);\n border:2px solid var(--chop-cta-link--outline-ring--computed);\n box-shadow:var(--chop-cta-link--outline-ring--computed);\n}\nchop-cta-link .btn.outline:hover{\n background-color:var(--chop-cta-link--outline-bg-color-hover--computed);\n color:var(--chop-cta-link--outline-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-ring-hover--computed);\n }\nchop-cta-link .btn.outline:focus{\n background-color:var(--chop-cta-link--outline-bg-color-focus--computed);\n color:var(--chop-cta-link--outline-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-ring-focus--computed);\n outline-offset:2px;\n }\nchop-cta-link .btn.outline[aria-disabled='true']{\n background-color:var(--chop-cta-link--outline-disabled-bg-color--computed);\n color:var(--chop-cta-link--outline-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-disabled-ring--computed);\n}\nchop-cta-link .btn.outline.reversed{\n background-color:var(--chop-cta-link--outline-reversed-bg-color--computed);\n color:var(--chop-cta-link--outline-reversed-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-ring--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring--computed);\n}\nchop-cta-link .btn.outline.reversed:hover,\n chop-cta-link .btn.outline.reversed:active{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-hover--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-hover--computed);\n }\nchop-cta-link .btn.outline.reversed:focus{\n background-color:var(\n --chop-cta-link--outline-reversed-bg-color-focus--computed\n );\n color:var(--chop-cta-link--outline-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--outline-reversed-weight-focus--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--outline-reversed-ring-focus--computed);\n }\nchop-cta-link .btn.outline.reversed[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--outline-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--outline-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--outline-reversed-disabled-weight--computed);\n border:2px solid var(--chop-cta-link--outline-reversed-disabled-color--computed);\n box-shadow:var(--chop-cta-link--outline-reversed-disabled-ring--computed);\n}\nchop-cta-link .btn.outline-transparent{\n background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );\n color:var(--chop-cta-link--primary-reversed-color-hover--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);\n border:2px solid var(--chop-cta-link--primary-color--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);\n}\nchop-cta-link .btn.outline-transparent:hover,\n chop-cta-link .btn.outline-transparent:active{\n background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-weight--computed);\n border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);\n box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);\n }\nchop-cta-link .btn.outline-transparent:focus{\n background-color:var(--chop-cta-link--primary-color-focus--computed);\n font-weight:var(--chop-cta-link--primary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--primary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);\n color:var(--chop-cta-link--primary-reversed-color--computed);\n }\nchop-cta-link .btn.outline-transparent[aria-disabled='true']{\n background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );\n color:var(--chop-cta-link--primary-reversed-disabled-color--computed);\n font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);\n}\nchop-cta-link .btn.secondary{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n color:var(--chop-cta-link--secondary-color--computed);\n font-weight:var(--chop-cta-link--secondary-weight--computed);\n border:2px solid var(--chop-cta-link--secondary-ring-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring--computed);\n}\nchop-cta-link .btn.secondary:hover{\n background-color:var(--chop-cta-link--secondary-bg-color-hover--computed);\n color:var(--chop-cta-link--secondary-color-hover--computed);\n font-weight:var(--chop-cta-link--secondary-weight-hover--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-hover--computed);\n }\nchop-cta-link .btn.secondary:focus{\n background-color:var(--chop-cta-link--secondary-bg-color-focus--computed);\n color:var(--chop-cta-link--secondary-color-focus--computed);\n font-weight:var(--chop-cta-link--secondary-weight-focus--computed);\n box-shadow:var(--chop-cta-link--secondary-ring-focus--computed);\n outline:2px solid var(--chop-cta-link--secondary-ring-focus--computed);\n outline-offset:2px;\n }\nchop-cta-link .btn.secondary:active{\n background-color:var(--chop-cta-link--secondary-bg-color--computed);\n }\nchop-cta-link .btn.secondary[aria-disabled='true']{\n background-color:var(--chop-cta-link--secondary-disabled-bg-color--computed);\n color:var(--chop-cta-link--secondary-disabled-color--computed);\n font-weight:var(--chop-cta-link--secondary-disabled-weight--computed);\n border:2px solid transparent;\n box-shadow:var(--chop-cta-link--secondary-disabled-ring--computed);\n}\nchop-cta-link .btn.link{\n position:relative;\n padding:0;\n color:var(--chop-cta-link--link-color--computed);\n font-weight:var(--fw-semibold);\n border-radius:0.5rem;\n text-decoration:none;\n background:transparent;\n}\nchop-cta-link .btn.link::after{\n content:'';\n display:none;\n position:absolute;\n bottom:0;\n left:0;\n right:0;\n margin-left:auto;\n margin-right:auto;\n border:1px solid var(--chop-cta-link--link-color--computed);\n }\nchop-cta-link .btn.link .chevron-icon{\n transition:0.3s ease-in-out;\n }\nchop-cta-link .btn.link:hover{\n color:var(--chop-cta-link--link-color-hover--computed);\n }\nchop-cta-link .btn.link:hover::after{\n display:block;\n }\nchop-cta-link .btn.link:hover > .chevron-icon{\n transform:translateX(8px);\n }\nchop-cta-link .btn.link:focus{\n color:var(--chop-cta-link--link-color-focus--computed);\n font-weight:var(--chop-cta-link--link-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-ring--computed);\n }\nchop-cta-link .btn.link[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\nchop-cta-link .btn.link.reversed{\n background-color:transparent;\n color:var(--chop-cta-link--link-reversed-color--computed);\n}\nchop-cta-link .btn.link.reversed::after{\n border:1px solid var(--chop-cta-link--link-reversed-color--computed);\n }\nchop-cta-link .btn.link.reversed:hover::after{\n display:block;\n }\nchop-cta-link .btn.link.reversed:focus{\n color:var(--chop-cta-link--link-reversed-color-focus--computed);\n font-weight:var(--chop-cta-link--link-reversed-weight-focus--computed);\n outline:2px solid var(--chop-cta-link--link-reversed-color--computed);\n }\nchop-cta-link .btn.link.no-hover::after{\n display:none !important;\n }\nchop-cta-link .btn.link.reversed[aria-disabled='true']{\n color:var(--chop-cta-link--link-disabled-color--computed);\n font-weight:var(--chop-cta-link--link-disabled-weight--computed);\n}\nchop-cta-link .btn.full-width{\n display:flex;\n width:100%;\n justify-content:space-between;\n}\nchop-cta-link .heart-icon{\n margin-right:var(--spacing-01);\n}\nchop-cta-link .external-icon{\n margin-left:var(--spacing-01);\n}\nchop-cta-link .chevron-icon{\n margin-left:auto;\n}\n@media print{\n chop-cta-link .btn.link.reversed{\n color:currentColor;\n background:transparent;\n }\n}\n.mobile.card-wrapper{\n border-radius:6px 6px 0 0;\n display:flex;\n flex-direction:column;\n background-color:var(--color-quaternary-lightest);\n min-width:328px;\n overflow:hidden;\n}\n.card-wrapper{\n min-width:416px;\n flex-direction:row;\n display:flex;\n position:relative;\n overflow:hidden;\n border-radius:6px;\n container:sidebar / inline-size;\n}\n@media (min-width: 1400px){\n @container sidebar (max-width: 940px){\n .content-wrapper{\n padding:var(--spacing-12);\n }\n }\n}\n.background-color-white .image-wrapper{\n border-radius:6px;\n overflow:hidden;\n}\n@media (min-width: 860px){\n.card-wrapper:not(.image-absent) .image-wrapper{\n width:50%\n }\n.card-wrapper:not(.image-absent) .content-container-wrapper{\n width:50%\n }\n }\n.card-wrapper:not(.image-absent) .mobile .image-wrapper{\n position:relative;\n overflow:hidden;\n aspect-ratio:3/2;\n background-color:#f5f5f5;\n width:100%;\n }\n.card-wrapper:not(.image-absent) .mobile .image-wrapper ::slotted(img){\n width:100%;\n height:100% !important;\n object-fit:cover;\n }\n.mobile .content-container-wrapper{\n width:100%;\n}\nchop-woven-svgs{\n position:absolute;\n}\n:not(.mobile) .content-wrapper{\n justify-content:center;\n}\n@media (min-width: 1400px){\n:not(.mobile) .content-wrapper{\n}\n }\n.content-wrapper{\n position:relative;\n z-index:5;\n display:flex;\n gap:var(--spacing-03);\n flex-direction:column;\n padding:var(--spacing-08) var(--spacing-12);\n}\n@media (min-width: 1400px){\n .content-wrapper{\n padding:var(--spacing-12) var(--spacing-12);\n }\n}\n.mobile .content-wrapper{\n display:flex;\n flex-direction:column;\n padding:var(--spacing-06) var(--spacing-04);\n}\n.mobile .content-wrapper .description{\n font-family:'Georgia', 'Arial', 'serif';\n font-size:var(--spacing-05);\n font-weight:400;\n line-height:24px;\n margin:4px 0;\n }\n.content-inner-wrapper{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-07);\n}\n.mobile .content-inner-wrapper{\n gap:var(--spacing-05);\n}\n.cta-wrapper{\n display:flex;\n flex-direction:column;\n align-items:flex-start;\n justify-content:flex-start;\n z-index:5;\n row-gap:var(--spacing-05);\n}\n.card-wrapper.background-color-white{\n background-color:var(--color-neutral-100);\n color:var(--color-brown-900);\n}\n.card-wrapper.background-color-dark_blue{\n background-color:var(--color-blue-900);\n color:var(--color-neutral-100);\n}\n.card-wrapper.background-color-dark_pink{\n background-color:var(--color-pink-900);\n color:var(--color-neutral-100);\n}\n.card-wrapper.background-color-dark_green{\n background-color:var(--color-green-900);\n color:var(--color-neutral-100);\n}\n.rectangle{\n display:flex;\n height:6px;\n width:100px;\n}\n.rectangle.color-blue{\n background:var(--color-blue-500);\n}\n.rectangle.color-dark_blue{\n background:var(--color-blue-700);\n}\n.rectangle.color-pink{\n background:var(--color-pink-700);\n}\n.rectangle.color-green{\n display:flex;\n height:6px;\n width:100px;\n background:var(--color-green-500);\n}\n.rectangle.color-brown{\n display:flex;\n height:6px;\n width:100px;\n background:var(--color-brown-800);\n}\n`;","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport componentStyles from './chop-feature-card.css.lit';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport { screenSizeMap } from '../../controllers/screen-size-controller';\nimport { isInType } from '../../../utilities/isInType';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '../chop-icon/chop-icon';\nimport '../chop-heading/chop-heading';\nimport '../chop-cta-link/chop-cta-link';\nimport '../chop-styled-text/chop-styled-text';\nimport '../chop-woven-svgs/chop-woven-svgs';\nimport '../chop-container/chop-container';\n\n/**\n * The feature card component\n * @element chop-card\n *\n * @property rectangle color - The rectangle color to show up when there is no image\n * @property background color - The background color to show behind text\n * @property mobile - whether or not the viewport is mobile\n *\n * @slot image\n * @slot eyebrow\n * @slot heading - NOTE: Styles are in the heading component\n * @slot description\n * @slot cta-link1\n * @slot cta-link2\n * @slot cta-link3\n */\n\nexport enum rectangleColors {\n 'Blue' = 'blue',\n 'Dark Blue' = 'dark_blue',\n 'Green' = 'green',\n 'Brown' = 'brown',\n 'Pink' = 'pink',\n}\nexport type RectangleColor = `${rectangleColors}`;\n\nexport enum imagePositions {\n 'Left' = 'left',\n 'Right' = 'right',\n}\nexport type ImagePosition = `${imagePositions}`;\n\nexport enum backgroundColors {\n 'White' = 'white',\n 'Dark Blue' = 'dark_blue',\n 'Dark Green' = 'dark_green',\n 'Dark Pink' = 'dark_pink',\n}\nexport type BackgroundColor = `${backgroundColors}`;\n\n// maps the component BG color desired colors in wovenSVG\nenum wovenSVGColorMap {\n 'white' = 'transparent',\n 'dark_blue' = 'darker_blue',\n 'dark_green' = 'darker_green',\n 'dark_pink' = 'pink',\n}\n\n@customElement('chop-feature-card')\nexport class CHOPFeatureCard extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n resizeController = new ResizeController(this, {\n breakpoints: [screenSizeMap.get('md') as number],\n containerQuery: false,\n });\n\n @property({\n type: String,\n attribute: 'image-position',\n converter: value => {\n return isInType(value, Object.values(imagePositions), 'ImagePosition')\n ? value\n : 'left';\n },\n })\n imagePosition: ImagePosition = 'left';\n\n @property({\n type: String,\n attribute: 'background-color',\n converter: value => {\n return isInType(value, Object.values(backgroundColors), 'BackgroundColor')\n ? value\n : 'white';\n },\n })\n backgroundColor: BackgroundColor = 'white';\n\n @property({\n type: String,\n attribute: 'rectangle-color',\n converter: value => {\n return isInType(value, Object.values(rectangleColors), 'RectangleColor')\n ? value\n : 'blue';\n },\n })\n rectangleColor: RectangleColor = 'blue';\n\n @state() hasImage: boolean;\n\n render(): TemplateResult {\n const isMobile = this.resizeController.currentBreakpointRange === 0;\n\n const classes = {\n 'mobile': isMobile,\n 'card-wrapper': true,\n [`background-color-${this.backgroundColor}`]: this.backgroundColor,\n [`image-${this.imagePosition}`]: this.imagePosition,\n 'image-absent': !this.hasImage,\n };\n\n const reversed = this.backgroundColor !== 'white';\n return html` \n
\n ${this.imagePosition === 'left' || isMobile\n ? this.imageTemplate()\n : nothing}\n
\n \n ${!isMobile && this.backgroundColor !== 'white'\n ? html`${this.wovenSVGTemplate()}`\n : nothing}\n
\n ${this.slotTemplate('eyebrow')}\n
\n ${this.slotTemplate('heading')}\n ${this.backgroundColor === 'white'\n ? html``\n : nothing}\n ${this.slotTemplate('description')}\n \n ${this.slotTemplate('cta-link-1')}\n ${this.slotTemplate('cta-link-2')}\n ${this.slotTemplate('cta-link-3')}\n
\n
\n
\n \n
\n ${this.imagePosition === 'right' && !isMobile\n ? this.imageTemplate()\n : nothing}\n \n
`;\n }\n\n slotTemplate(name = '') {\n if (!this.slots.exist(name)) {\n return nothing;\n } else {\n return html` `;\n }\n }\n\n imageTemplate() {\n if (!this.slots.exist('image')) {\n this.hasImage = false;\n return nothing;\n }\n this.hasImage = true;\n return html`\n
\n \n \n \n
\n `;\n }\n\n wovenSVGTemplate() {\n const hPos = this.imagePosition === 'left' ? 'right' : 'left';\n return html`\n \n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-feature-card': CHOPFeatureCard;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n.featured-articles{\n background-color:var(--color-brown-100);\n width:100%;\n}\n\n @media (min-width: 860px){.featured-articles{\n max-width:336px\n}\n }\n\n.heading{\n padding:var(--spacing-4);\n background-color:var(--color-brown-200);\n}\n\n.categories{\n padding:var(--spacing-2) var(--spacing-4) var(--spacing-4);\n}\n\n[part='categories']{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-4);\n}\n\n@media (min-width: 860px){\n .heading{\n padding:var(--spacing-6);\n }\n\n .categories{\n padding:var(--spacing-4) var(--spacing-6) var(--spacing-6);\n }\n}\n`;","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement, SlotsController } from '@phase2/outline-core';\nimport { customElement } from 'lit/decorators.js';\nimport componentStyles from './chop-featured-articles.css.lit';\n\n/**\n * @extends OutlineElement\n * @element chop-featured-articles\n *\n * @slot heading\n * @slot default - The default slot\n */\n\n@customElement('chop-featured-articles')\nexport class CHOPFeaturedArticles extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n slots = new SlotsController(this);\n\n render(): TemplateResult {\n return html`\n
\n ${this.slots.exist('heading')\n ? html`\n
\n \n
\n `\n : nothing}\n
\n \n
\n
\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-featured-articles': CHOPFeaturedArticles;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:block;\n}\n\n.content-wrapper{\n padding-bottom:3rem;\n padding-top:3rem;\n border-bottom:1px solid var(--color-brown-700);\n display:grid;\n grid-template-columns:repeat(1, 1fr 2fr);\n grid-gap:1rem;\n}\n`;","import { TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement } from 'lit/decorators.js';\nimport componentStyles from './chop-field-label-value.css.lit';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '../chop-heading/chop-heading';\n\n/**\n * The field with border block.\n * @element chop-field-label-value\n *\n * @slot heading\n * @slot label\n * @slot value\n */\n@customElement('chop-field-label-value')\nexport class CHOPFieldLabelValue extends OutlineElement {\n static styles = [componentStyles];\n slots = new SlotManager(this);\n\n render(): TemplateResult {\n const classes = {\n 'card-wrapper': true,\n };\n return html`
\n ${this.slotTemplate('heading')}\n
\n ${this.slotTemplate('label')} ${this.slotTemplate('value')}\n
\n
`;\n }\n\n slotTemplate(name = '') {\n if (!this.slots.exist(name)) {\n return;\n } else {\n nothing;\n return html``;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-field-label-value': CHOPFieldLabelValue;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:block;\n padding-bottom:var(--spacing-06);\n}\n\n.form-type-select{\n display:flex;\n flex-direction:column;\n padding:var(--spacing-6) var(--spacing-4);\n max-width:100%;\n}\n\n@media (min-width: 860px){\n\n.form-type-select{\n max-width:50%\n}\n }\n\n.form-type-select label{\n margin-bottom:var(--spacing-2);\n font-size:20px;\n font-size:var(--fs-base, 20px);\n font-weight:bold;\n }\n\n.form-type-select select{\n font-size:18px;\n font-size:var(--fs-lg, 18px);\n color:#544334;\n color:var(--color-brown-900, #544334);\n padding:var(--spacing-3) var(--spacing-10) var(--spacing-3) var(--spacing-4);\n border-radius:6px;\n border:2px solid var(--color-brown-700);\n -moz-appearance:none;\n -webkit-appearance:none;\n appearance:none;\n background:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 25\" %3E%3Cpath fill=\"%230274B5\" d=\"M17.2902 9.28957C16.9002 8.89957 16.2702 8.89957 15.8802 9.28957L12.0002 13.1696L8.12022 9.28957C7.73022 8.89957 7.10022 8.89957 6.71022 9.28957C6.32022 9.67957 6.32022 10.3096 6.71022 10.6996L11.3002 15.2896C11.6902 15.6796 12.3202 15.6796 12.7102 15.2896L17.3002 10.6996C17.6802 10.3196 17.6802 9.67957 17.2902 9.28957Z\"/%3E%3C/svg%3E') no-repeat right 0px center #fff;\n background:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 25\" %3E%3Cpath fill=\"%230274B5\" d=\"M17.2902 9.28957C16.9002 8.89957 16.2702 8.89957 15.8802 9.28957L12.0002 13.1696L8.12022 9.28957C7.73022 8.89957 7.10022 8.89957 6.71022 9.28957C6.32022 9.67957 6.32022 10.3096 6.71022 10.6996L11.3002 15.2896C11.6902 15.6796 12.3202 15.6796 12.7102 15.2896L17.3002 10.6996C17.6802 10.3196 17.6802 9.67957 17.2902 9.28957Z\"/%3E%3C/svg%3E') no-repeat right 0px center var(--color-neutral-100, #fff);\n }\n\n.form-type-select + chop-styled-text{\n padding:0 var(--spacing-4);\n}\n\n.form-type-select + chop-styled-text:has(a){\n padding:var(--spacing-4);\n }\n\nchop-styled-text{\n display:flex !important;\n flex-direction:column;\n gap:1.5rem;\n}\n\n@media (min-width: 860px){\n\nchop-styled-text{\n flex-direction:row\n}\n }\n`;","\nimport { css } from 'lit';\nexport default css`\n/* Scoped CSS. */\nchop-styled-text{--chop-cta-link--family--computed:var(--chop-cta-link--family, var(--ff-body));--chop-cta-link--weight--computed:var(--fw-bold);--chop-cta-link--padding-small--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);--chop-cta-link--padding-small-hover--computed:var(--spacing-001) var(--spacing-02) var(--spacing-001) var(--spacing-4);--chop-cta-link--padding-default--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);--chop-cta-link--padding-default-hover--computed:var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-06);--chop-cta-link--padding-large--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);--chop-cta-link--padding-large-hover--computed:var(--spacing-03) var(--spacing-05) var(--spacing-03) var(--spacing-08);--chop-cta-link--primary-bg-color--computed:var(--color-blue-700);--chop-cta-link--primary-color--computed:var(--color-neutral-100);--chop-cta-link--primary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--primary-ring--computed:var(--chop-cta-link--primary-ring, none);--chop-cta-link--primary-bg-color-hover--computed:var(--color-neutral-100);--chop-cta-linknknk--primary-color-hover--computed:var(\n --chop-cta-link--primary-color-hover,\n var(--color-blue-600)\n);--chop-cta-link--primary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--primary-ring-hover--computed:var(--color-blue-700);--chop-cta-link--primary-bg-color-focus--computed:var(--color-blue-700);--chop-cta-link--primary-color-focus--computed:var(--color-neutral-100);--chop-cta-link--primary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--primary-ring-focus--computed:var(--color-blue-500);--chop-cta-link--primary-disabled-bg-color--computed:var(--color-neutral-400);--chop-cta-link--primary-disabled-color--computed:var(--color-neutral-100);--chop-cta-link--primary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--primary-disabled-ring--computed:var(--outline-transparent);--chop-cta-link--primary-reversed-bg-color--computed:var(--color-neutral-100);--chop-cta-link--primary-reversed-color--computed:var(--color-blue-700);--chop-cta-link--primary-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--primary-reversed-ring--computed:var(\n --chop-cta-link--primary-reversed-ring,\n none\n);--chop-cta-link--primary-reversed-bg-color-hover--computed:var(\n --bg-color--transparent\n);--chop-cta-link--primary-reversed-color-hover--computed:var(--color-neutral-100);--chop-cta-link--primary-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--primary-reversed-ring-hover--computed:var(--color-neutral-100);--chop-cta-link--primary-reversed-bg-color-focus--computed:var(--color-blue-700);--chop-cta-link--primary-reversed-color-focus--computed:var(--color-neutral-100);--chop-cta-link--primary-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--primary-reversed-ring-focus--computed:var(--color-blue-500);--chop-cta-link--primary-reversed-disabled-bg-color--computed:var(\n --color-neutral-400\n);--chop-cta-link--primary-reversed-disabled-color--computed:var(\n --color-neutral-500\n);--chop-cta-link--primary-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--primary-reversed-disabled-ring--computed:var(\n --outline-transparent\n);--chop-cta-link--outline-bg-color--computed:var(--color-neutral-100);--chop-cta-link--outline-color--computed:var(--color-blue-700);--chop-cta-link--outline-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--outline-ring--computed:var(--color-blue-700);--chop-cta-link--outline-bg-color-hover--computed:var(--color-blue-700);--chop-cta-link--outline-color-hover--computed:var(--color-neutral-100);--chop-cta-link--outline-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--outline-ring-hover--computed:var(--color-blue-700);--chop-cta-link--outline-bg-color-focus--computed:var(\n --color-neutral-100\n);--chop-cta-link--outline-color-focus--computed:var(--color-blue-700);--chop-cta-link--outline-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--outline-ring-focus--computed:var(--color-blue-500);--chop-cta-link--outline-disabled-bg-color--computed:var(\n --outline-transparent\n);--chop-cta-link--outline-disabled-color--computed:var(\n --color-neutral-400\n);--chop-cta-link--outline-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--outline-disabled-ring--computed:var(\n --outline-transparent\n);--chop-cta-link--outline-reversed-bg-color--computed:var(\n --outline-transparent\n);--chop-cta-link--outline-reversed-color--computed:var(\n --color-neutral-100\n);--chop-cta-link--outline-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--outline-reversed-ring--computed:var(\n --color-neutral-100\n);--chop-cta-link--outline-reversed-bg-color-hover--computed:var(\n --color-neutral-100\n);--chop-cta-link--outline-reversed-color-hover--computed:var(\n --color-blue-700\n);--chop-cta-link--outline-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--outline-reversed-ring-hover--computed:var(\n --color-blue-700\n);--chop-cta-link--outline-reversed-bg-color-focus--computed:var(\n --color-blue-700\n);--chop-cta-link--outline-reversed-color-focus--computed:var(\n --color-neutral-100\n);--chop-cta-link--outline-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--outline-reversed-ring-focus--computed:var(\n --color-blue-500\n);--chop-cta-link--outline-reversed-disabled-bg-color--computed:var(\n --outline-transparent\n);--chop-cta-link--outline-reversed-disabled-color--computed:var(\n --color-neutral-400\n);--chop-cta-link--outline-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--outline-reversed-disabled-ring--computed:var(\n --outline-transparent\n);--chop-cta-link--secondary-bg-color--computed:var(--color-pink-800);--chop-cta-link--secondary-color--computed:var(--color-neutral-100);--chop-cta-link--secondary-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--secondary-ring--computed:var(\n --chop-cta-link--secondary-ring,\n none\n);--chop-cta-link--secondary-bg-color-hover--computed:var(--color-neutral-100);--chop-cta-link--secondary-color-hover--computed:var(\n --chop-cta-link--secondary-color-hover,\n var(--color-pink-800)\n);--chop-cta-link--secondary-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--secondary-ring-hover--computed:var(--color-pink-800);--chop-cta-link--secondary-bg-color-focus--computed:var(--color-pink-800);--chop-cta-link--secondary-color-focus--computed:var(--color-neutral-100);--chop-cta-link--secondary-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--secondary-ring-focus--computed:var(--color-pink-800);--chop-cta-link--secondary-disabled-bg-color--computed:var(\n --color-neutral-400\n);--chop-cta-link--secondary-disabled-color--computed:var(--color-neutral-100);--chop-cta-link--secondary-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--secondary-disabled-ring--computed:var(--outline-transparent);--chop-cta-link--link-bg-color--computed:var(--outline-transparent);--chop-cta-link--link-color--computed:var(--color-blue-700);--chop-cta-link--link-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--link-ring--computed:var(--color-blue-700);--chop-cta-link--link-color-hover--computed:var(--color-blue-800);--chop-cta-link--link-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--link-color-focus--computed:var(--color-blue-700);--chop-cta-link--link-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--link-disabled-color--computed:var(--color-neutral-400);--chop-cta-link--link-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--link-reversed-color--computed:var(--color-neutral-100);--chop-cta-link--link-reversed-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--link-reversed-color-hover--computed:var(--color-blue-700);--chop-cta-link--link-reversed-weight-hover--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--link-reversed-color-focus--computed:var(--color-neutral-100);--chop-cta-link--link-reversed-weight-focus--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--chop-cta-link--link-reversed-disabled-color--computed:var(\n --color-neutral-400\n);--chop-cta-link--link-reversed-disabled-weight--computed:var(\n --body-sm-min-bold-font-weight,\n var(--font-weight-bold)\n);--outline-core-link--transition-property:all;--outline-core-link--transition-duration:0.3s;--outline-core-link--transition-timing-function:ease;--outline-core-link--text-decoration:underline;--outline-core-link--text-decoration-hover:none;--outline-core-link--text-decoration-focus:none;--outline-core-link--text-decoration-disabled:none;--outline-core-link--font-size--computed:var(\n --outline-core-link--font-size,\n inherit\n);--outline-core-link--font-family--computed:var(\n --outline-core-link--font-family,\n var(--ff-body)\n);--outline-core-link--font-weight--computed:var(\n --outline-core-link--font-weight,\n var(--fw-normal)\n);--outline-core-link--line-height--computed:var(\n --outline-core-link--line-height,\n var(--lh-percentage-body)\n);--outline-core-link--transition-property--computed:var(\n --outline-core-link--transition-property,\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke\n);--outline-core-link--transition-duration--computed:var(\n --outline-core-link--transition-duration,\n 150ms\n);--outline-core-link--transition-timing-function--computed:var(\n --outline-core-link--transition-timing-function,\n cubic-bezier(0.4, 0, 0.2, 1)\n);--outline-core-link--margin-x--computed:var(--outline-core-link--margin-x, 0);--outline-core-link--margin-y--computed:var(--outline-core-link--margin-y, 0);--outline-core-link--padding-x--computed:var(\n --outline-core-link--padding-x,\n 0\n);--outline-core-link--padding-y--computed:var(\n --outline-core-link--padding-y,\n 0\n);--outline-core-link--color--computed:var(\n --outline-core-link--color,\n var(--outline-blue-600)\n);--outline-core-link--text-decoration--computed:var(\n --outline-core-link--text-decoration,\n none\n);--outline-core-link--background-color--computed:var(\n --outline-core-link--background-color,\n none\n);--outline-core-link--background-color-hover--computed:var(\n --outline-core-link--background-color-hover,\n var(--outline-core-link--background-color--computed)\n);--outline-core-link--margin-x-hover--computed:var(\n --outline-core-link--margin-x-hover,\n var(--outline-core-link--margin-x)\n);--outline-core-link--margin-y-hover--computed:var(\n --outline-core-link--margin-y-hover,\n var(--outline-core-link--margin-y)\n);--outline-core-link--padding-x-hover--computed:var(\n --outline-core-link--padding-x-hover,\n var(--outline-core-link--padding-x)\n);--outline-core-link--padding-y-hover--computed:var(\n --outline-core-link--padding-y-hover,\n var(--outline-core-link--padding-y)\n);--outline-core-link--background-color-focus--computed:var(\n --outline-core-link--background-color-focus,\n var(--outline-core-link--background-color--computed)\n);--outline-core-link--margin-x-focus--computed:var(\n --outline-core-link--margin-x-focus,\n var(--outline-core-link--margin-x)\n);--outline-core-link--margin-y-focus--computed:var(\n --outline-core-link--margin-y-focus,\n var(--outline-core-link--margin-y)\n);--outline-core-link--padding-x-focus--computed:var(\n --outline-core-link--padding-x-focus,\n var(--outline-core-link--padding-x)\n);--outline-core-link--padding-y-focus--computed:var(\n --outline-core-link--padding-y-focus,\n var(--outline-core-link--padding-y)\n);--outline-core-link--color-disabled--computed:var(\n --outline-core-link--color-disabled,\n var(--outline-gray-600)\n);--outline-core-link--text-decoration-disabled--computed:var(\n --outline-core-link--text-decoration-disabled,\n underline\n);--outline-core-link--background-color-disabled--computed:var(\n --outline-core-link--background-color-disabled,\n var(--outline-core-link--background-color--computed)\n);--outline-core-link--margin-x-disabled--computed:var(\n --outline-core-link--margin-x-disabled,\n var(--outline-core-link--margin-x)\n);--outline-core-link--margin-y-disabled--computed:var(\n --outline-core-link--margin-y-disabled,\n var(--outline-core-link--margin-y)\n);--outline-core-link--padding-x-disabled--computed:var(\n --outline-core-link--padding-x-disabled,\n var(--outline-core-link--padding-x)\n);--outline-core-link--padding-y-disabled--computed:var(\n --outline-core-link--padding-y-disabled,\n var(--outline-core-link--padding-y)\n);}chop-styled-text .btn{display:flex;width:fit-content;flex-wrap:nowrap;align-items:center;cursor:pointer;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;text-decoration-line:none;outline:none;border:none;border-radius:0.5rem;line-height:1.5;background:transparent;font-family:var(--chop-cta-link--family--computed);font-weight:var(--chop-cta-link--weight--computed);padding:var(--chop-cta-link--padding-default--computed);}chop-styled-text .btn[aria-disabled='true']{pointer-events:none;cursor:not-allowed;user-select:none;}chop-styled-text .btn.small{font-size:var(--fs-sm);line-height:var(--lh-base);padding:var(--chop-cta-link--padding-small--computed);}chop-styled-text .btn.small.no-icon{padding:var(--spacing-02) var(--spacing-4);}chop-styled-text .btn.medium,chop-styled-text .btn.default{font-size:var(--fs-base);line-height:var(--lh-md);}chop-styled-text .btn.medium.no-icon,chop-styled-text .btn.default.no-icon{padding:var(--spacing-02) var(--spacing-6);}chop-styled-text .btn.large{font-size:var(--fs-lg);line-height:var(--lh-sm);padding:var(--chop-cta-link--padding-large--computed);}chop-styled-text .btn.large.no-icon{padding:var(--spacing-03) var(--spacing-8);}chop-styled-text .btn.primary{background-color:var(--chop-cta-link--primary-bg-color--computed);color:var(--chop-cta-link--primary-color--computed);font-weight:var(--chop-cta-link--primary-weight--computed);border:2px solid var(--chop-cta-link--primary-ring-hover--computed);box-shadow:var(--chop-cta-link--primary-ring--computed);}chop-styled-text .btn.primary:hover,chop-styled-text .btn.primary:active{background-color:var(--chop-cta-link--primary-color--computed);color:var(--chop-cta-link--primary-bg-color--computed);font-weight:var(--chop-cta-link--primary-weight-hover--computed);box-shadow:var(--chop-cta-link--primary-ring-hover--computed);}chop-styled-text .btn.primary:focus{background-color:var(--chop-cta-link--primary-bg-color-focus--computed);color:var(--chop-cta-link--primary-color--computed);font-weight:var(--chop-cta-link--primary-weight-focus--computed);box-shadow:var(--chop-cta-link--primary-ring-focus--computed);outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);}chop-styled-text .btn.primary[aria-disabled='true']{background-color:var(--chop-cta-link--primary-disabled-bg-color--computed);color:var(--chop-cta-link--primary-disabled-color--computed);font-weight:var(--chop-cta-link--primary-disabled-weight--computed);border:2px solid transparent;box-shadow:var(--chop-cta-link--primary-disabled-ring--computed);}chop-styled-text .btn.primary.reversed{background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);color:var(--chop-cta-link--primary-reversed-color--computed);font-weight:var(--chop-cta-link--primary-reversed-weight--computed);border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);}chop-styled-text .btn.primary.reversed:hover,chop-styled-text .btn.primary.reversed:active{background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );color:var(--chop-cta-link--primary-reversed-color-hover--computed);font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);border:2px solid var(--chop-cta-link--primary-color--computed);box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);}chop-styled-text .btn.primary.reversed:focus{background-color:var(--chop-cta-link--primary-color-focus--computed);font-weight:var(--chop-cta-link--primary-weight-focus--computed);box-shadow:var(--chop-cta-link--primary-ring-focus--computed);outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);}chop-styled-text .btn.primary.reversed[aria-disabled='true']{background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );color:var(--chop-cta-link--primary-reversed-disabled-color--computed);font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);border:2px solid transparent;box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);}chop-styled-text .btn.outline{background-color:var(--chop-cta-link--outline-bg-color--computed);color:var(--chop-cta-link--outline-color--computed);font-weight:var(--chop-cta-link--outline-weight--computed);border:2px solid var(--chop-cta-link--outline-ring--computed);box-shadow:var(--chop-cta-link--outline-ring--computed);}chop-styled-text .btn.outline:hover{background-color:var(--chop-cta-link--outline-bg-color-hover--computed);color:var(--chop-cta-link--outline-color-hover--computed);font-weight:var(--chop-cta-link--outline-weight-hover--computed);box-shadow:var(--chop-cta-link--outline-ring-hover--computed);}chop-styled-text .btn.outline:focus{background-color:var(--chop-cta-link--outline-bg-color-focus--computed);color:var(--chop-cta-link--outline-color-focus--computed);font-weight:var(--chop-cta-link--outline-weight-focus--computed);box-shadow:var(--chop-cta-link--outline-ring-focus--computed);outline:2px solid var(--chop-cta-link--outline-ring-focus--computed);outline-offset:2px;}chop-styled-text .btn.outline[aria-disabled='true']{background-color:var(--chop-cta-link--outline-disabled-bg-color--computed);color:var(--chop-cta-link--outline-disabled-color--computed);font-weight:var(--chop-cta-link--outline-disabled-weight--computed);border:2px solid var(--chop-cta-link--outline-disabled-color--computed);box-shadow:var(--chop-cta-link--outline-disabled-ring--computed);}chop-styled-text .btn.outline.reversed{background-color:var(--chop-cta-link--outline-reversed-bg-color--computed);color:var(--chop-cta-link--outline-reversed-color--computed);font-weight:var(--chop-cta-link--outline-reversed-weight--computed);border:2px solid var(--chop-cta-link--outline-reversed-ring--computed);box-shadow:var(--chop-cta-link--outline-reversed-ring--computed);}chop-styled-text .btn.outline.reversed:hover,chop-styled-text .btn.outline.reversed:active{background-color:var(\n --chop-cta-link--outline-reversed-bg-color-hover--computed\n );color:var(--chop-cta-link--outline-reversed-color-hover--computed);font-weight:var(--chop-cta-link--outline-reversed-weight-hover--computed);box-shadow:var(--chop-cta-link--outline-reversed-ring-hover--computed);}chop-styled-text .btn.outline.reversed:focus{background-color:var(\n --chop-cta-link--outline-reversed-bg-color-focus--computed\n );color:var(--chop-cta-link--outline-reversed-color-focus--computed);font-weight:var(--chop-cta-link--outline-reversed-weight-focus--computed);box-shadow:var(--chop-cta-link--outline-reversed-ring-focus--computed);outline:2px solid var(--chop-cta-link--outline-reversed-ring-focus--computed);}chop-styled-text .btn.outline.reversed[aria-disabled='true']{background-color:var(\n --chop-cta-link--outline-reversed-disabled-bg-color--computed\n );color:var(--chop-cta-link--outline-reversed-disabled-color--computed);font-weight:var(--chop-cta-link--outline-reversed-disabled-weight--computed);border:2px solid var(--chop-cta-link--outline-reversed-disabled-color--computed);box-shadow:var(--chop-cta-link--outline-reversed-disabled-ring--computed);}chop-styled-text .btn.outline-transparent{background-color:var(\n --chop-cta-link--primary-reversed-bg-color-hover--computed\n );color:var(--chop-cta-link--primary-reversed-color-hover--computed);font-weight:var(--chop-cta-link--primary-reversed-weight-hover--computed);border:2px solid var(--chop-cta-link--primary-color--computed);box-shadow:var(--chop-cta-link--primary-reversed-ring-hover--computed);}chop-styled-text .btn.outline-transparent:hover,chop-styled-text .btn.outline-transparent:active{background-color:var(--chop-cta-link--primary-reversed-bg-color--computed);color:var(--chop-cta-link--primary-reversed-color--computed);font-weight:var(--chop-cta-link--primary-reversed-weight--computed);border:2px solid var(--chop-cta-link--primary-reversed-ring-hover--computed);box-shadow:var(--chop-cta-link--primary-reversed-ring--computed);}chop-styled-text .btn.outline-transparent:focus{background-color:var(--chop-cta-link--primary-color-focus--computed);font-weight:var(--chop-cta-link--primary-weight-focus--computed);box-shadow:var(--chop-cta-link--primary-ring-focus--computed);outline:2px solid var(--chop-cta-link--primary-ring-focus--computed);color:var(--chop-cta-link--primary-reversed-color--computed);}chop-styled-text .btn.outline-transparent[aria-disabled='true']{background-color:var(\n --chop-cta-link--primary-reversed-disabled-bg-color--computed\n );color:var(--chop-cta-link--primary-reversed-disabled-color--computed);font-weight:var(--chop-cta-link--primary-reversed-disabled-weight--computed);border:2px solid transparent;box-shadow:var(--chop-cta-link--primary-reversed-disabled-ring--computed);}chop-styled-text .btn.secondary{background-color:var(--chop-cta-link--secondary-bg-color--computed);color:var(--chop-cta-link--secondary-color--computed);font-weight:var(--chop-cta-link--secondary-weight--computed);border:2px solid var(--chop-cta-link--secondary-ring-hover--computed);box-shadow:var(--chop-cta-link--secondary-ring--computed);}chop-styled-text .btn.secondary:hover{background-color:var(--chop-cta-link--secondary-bg-color-hover--computed);color:var(--chop-cta-link--secondary-color-hover--computed);font-weight:var(--chop-cta-link--secondary-weight-hover--computed);box-shadow:var(--chop-cta-link--secondary-ring-hover--computed);}chop-styled-text .btn.secondary:focus{background-color:var(--chop-cta-link--secondary-bg-color-focus--computed);color:var(--chop-cta-link--secondary-color-focus--computed);font-weight:var(--chop-cta-link--secondary-weight-focus--computed);box-shadow:var(--chop-cta-link--secondary-ring-focus--computed);outline:2px solid var(--chop-cta-link--secondary-ring-focus--computed);outline-offset:2px;}chop-styled-text .btn.secondary:active{background-color:var(--chop-cta-link--secondary-bg-color--computed);}chop-styled-text .btn.secondary[aria-disabled='true']{background-color:var(--chop-cta-link--secondary-disabled-bg-color--computed);color:var(--chop-cta-link--secondary-disabled-color--computed);font-weight:var(--chop-cta-link--secondary-disabled-weight--computed);border:2px solid transparent;box-shadow:var(--chop-cta-link--secondary-disabled-ring--computed);}chop-styled-text .btn.link{position:relative;padding:0;color:var(--chop-cta-link--link-color--computed);font-weight:var(--fw-semibold);border-radius:0.5rem;text-decoration:none;background:transparent;}chop-styled-text .btn.link::after{content:'';display:none;position:absolute;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;border:1px solid var(--chop-cta-link--link-color--computed);}chop-styled-text .btn.link .chevron-icon{transition:0.3s ease-in-out;}chop-styled-text .btn.link:hover{color:var(--chop-cta-link--link-color-hover--computed);}chop-styled-text .btn.link:hover::after{display:block;}chop-styled-text .btn.link:hover > .chevron-icon{transform:translateX(8px);}chop-styled-text .btn.link:focus{color:var(--chop-cta-link--link-color-focus--computed);font-weight:var(--chop-cta-link--link-weight-focus--computed);outline:2px solid var(--chop-cta-link--link-ring--computed);}chop-styled-text .btn.link[aria-disabled='true']{color:var(--chop-cta-link--link-disabled-color--computed);font-weight:var(--chop-cta-link--link-disabled-weight--computed);}chop-styled-text .btn.link.reversed{background-color:transparent;color:var(--chop-cta-link--link-reversed-color--computed);}chop-styled-text .btn.link.reversed::after{border:1px solid var(--chop-cta-link--link-reversed-color--computed);}chop-styled-text .btn.link.reversed:hover::after{display:block;}chop-styled-text .btn.link.reversed:focus{color:var(--chop-cta-link--link-reversed-color-focus--computed);font-weight:var(--chop-cta-link--link-reversed-weight-focus--computed);outline:2px solid var(--chop-cta-link--link-reversed-color--computed);}chop-styled-text .btn.link.no-hover::after{display:none !important;}chop-styled-text .btn.link.reversed[aria-disabled='true']{color:var(--chop-cta-link--link-disabled-color--computed);font-weight:var(--chop-cta-link--link-disabled-weight--computed);}chop-styled-text .btn.full-width{display:flex;width:100%;justify-content:space-between;}chop-styled-text .heart-icon{margin-right:var(--spacing-01);}chop-styled-text .external-icon{margin-left:var(--spacing-01);}chop-styled-text .chevron-icon{margin-left:auto;}@media print{chop-styled-text .btn.link.reversed{color:currentColor;background:transparent;}}chop-styled-text a{font-size:var(--outline-core-link--font-size--computed);font-family:var(--outline-core-link--font-family--computed);font-weight:var(--outline-core-link--font-weight--computed);line-height:var(--outline-core-link--line-height--computed);text-decoration:underline;color:#0274b5;color:var(--color-blue-700, #0274b5);transition-property:var(--outline-core-link--transition-property--computed);transition-timing-function:var(\n --outline-core-link--transition-timing-function--computed\n );transition-duration:var(--outline-core-link--transition-duration--computed);margin:var(--outline-core-link--margin-y--computed) var(--outline-core-link--margin-x--computed);padding:var(--outline-core-link--padding-y--computed) var(--outline-core-link--padding-x--computed);background-color:var(--outline-core-link--background-color--computed);}chop-styled-text a:hover,chop-styled-text a:active{text-decoration:underline;color:#004975;color:var(--color-blue-900, #004975);background-color:var(--outline-core-link--background-color-hover--computed);}chop-styled-text a:focus{outline:2px solid #0274b5;outline:2px solid var(--color-blue-700, #0274b5);outline-offset:0.25rem;color:var(--outline-core-link--color--computed);background-color:var(--outline-core-link--background-color-focus--computed);border-radius:0.125rem;}chop-styled-text a:disabled{text-decoration:var(--outline-core-link--text-decoration-disabled--computed);color:var(--outline-core-link--color-disabled--computed);background-color:var(\n --outline-core-link--background-color-disabled--computed\n );}chop-styled-text :host{display:block;}chop-styled-text .chop-headline{color:inherit;font-family:var(--headline-2xl-mid-font-family);display:block;margin:0;font-weight:inherit;word-break:keep-all;}chop-styled-text .chop-headline a{text-decoration:none;}chop-styled-text .chop-headline a:hover{text-decoration:underline;}chop-styled-text .chop-headline p{padding:0;margin:0;text-align:left;}chop-styled-text .chop-headline.brown-900{color:var(--color-brown-900);}chop-styled-text .clickable-card h1,chop-styled-text .clickable-card h2,chop-styled-text .clickable-card h3,chop-styled-text .clickable-card h4,chop-styled-text .clickable-card h5,chop-styled-text .clickable-card h6,chop-styled-text .clickable-card a{color:var(--color-blue-600);text-decoration:none;word-break:keep-all;}chop-styled-text .clickable-card h1:hover,chop-styled-text .clickable-card h2:hover,chop-styled-text .clickable-card h3:hover,chop-styled-text .clickable-card h4:hover,chop-styled-text .clickable-card h5:hover,chop-styled-text .clickable-card h6:hover,chop-styled-text .clickable-card a:hover{text-decoration:underline;cursor:pointer;}chop-styled-text .clickable-card h1:focus,chop-styled-text .clickable-card h1:focus-visible,chop-styled-text .clickable-card h2:focus,chop-styled-text .clickable-card h2:focus-visible,chop-styled-text .clickable-card h3:focus,chop-styled-text .clickable-card h3:focus-visible,chop-styled-text .clickable-card h4:focus,chop-styled-text .clickable-card h4:focus-visible,chop-styled-text .clickable-card h5:focus,chop-styled-text .clickable-card h5:focus-visible,chop-styled-text .clickable-card h6:focus,chop-styled-text .clickable-card h6:focus-visible,chop-styled-text .clickable-card a:focus,chop-styled-text .clickable-card a:focus-visible{outline:2px solid var(--color-blue-600);outline-offset:2px;border-radius:8px;}chop-styled-text .clickable-card h1:after,chop-styled-text .clickable-card h2:after,chop-styled-text .clickable-card h3:after,chop-styled-text .clickable-card h4:after,chop-styled-text .clickable-card h5:after,chop-styled-text .clickable-card h6:after,chop-styled-text .clickable-card a:after{position:absolute;inset:0;content:'';}chop-styled-text .clickable-card.dark-mode h1,chop-styled-text .clickable-card.dark-mode h2,chop-styled-text .clickable-card.dark-mode h3,chop-styled-text .clickable-card.dark-mode h4,chop-styled-text .clickable-card.dark-mode h5,chop-styled-text .clickable-card.dark-mode h6,chop-styled-text .clickable-card.dark-mode a{color:var(--color-neutral-100);text-decoration:none;}chop-styled-text .clickable-card.dark-mode h1:hover,chop-styled-text .clickable-card.dark-mode h2:hover,chop-styled-text .clickable-card.dark-mode h3:hover,chop-styled-text .clickable-card.dark-mode h4:hover,chop-styled-text .clickable-card.dark-mode h5:hover,chop-styled-text .clickable-card.dark-mode h6:hover,chop-styled-text .clickable-card.dark-mode a:hover{text-decoration:underline;cursor:pointer;}chop-styled-text .clickable-card.dark-mode h1:focus,chop-styled-text .clickable-card.dark-mode h1:focus-visible,chop-styled-text .clickable-card.dark-mode h2:focus,chop-styled-text .clickable-card.dark-mode h2:focus-visible,chop-styled-text .clickable-card.dark-mode h3:focus,chop-styled-text .clickable-card.dark-mode h3:focus-visible,chop-styled-text .clickable-card.dark-mode h4:focus,chop-styled-text .clickable-card.dark-mode h4:focus-visible,chop-styled-text .clickable-card.dark-mode h5:focus,chop-styled-text .clickable-card.dark-mode h5:focus-visible,chop-styled-text .clickable-card.dark-mode h6:focus,chop-styled-text .clickable-card.dark-mode h6:focus-visible,chop-styled-text .clickable-card.dark-mode a:focus,chop-styled-text .clickable-card.dark-mode a:focus-visible{outline:2px solid var(--color-neutral-100);outline-offset:2px;border-radius:8px;}chop-styled-text .clickable-card.dark-mode h1:after,chop-styled-text .clickable-card.dark-mode h2:after,chop-styled-text .clickable-card.dark-mode h3:after,chop-styled-text .clickable-card.dark-mode h4:after,chop-styled-text .clickable-card.dark-mode h5:after,chop-styled-text .clickable-card.dark-mode h6:after,chop-styled-text .clickable-card.dark-mode a:after{position:absolute;inset:0;content:'';}chop-styled-text .headline-3xl{font-size:var(--fs-4half-xl);line-height:var(--headline-3xl-min-line-height);font-family:var(--headline-3xl-min-font-family);letter-spacing:var(--headline-3xl-min-letter-spacing);text-transform:var(--headline-3xl-min-text-case);font-weight:var(--headline-3xl-min-font-weight);}@media (min-width: 860px){chop-styled-text .headline-3xl{font-size:clamp(2.5rem, 2.5rem + 3.125vw, 4.5rem);line-height:var(--headline-3xl-mid-line-height);font-family:var(--headline-3xl-mid-font-family);letter-spacing:var(--headline-3xl-mid-letter-spacing);text-transform:var(--headline-3xl-mid-text-case);font-weight:var(--headline-3xl-mid-font-weight);}}@media (min-width: 1100px){chop-styled-text .headline-3xl{line-height:var(--headline-3xl-max-line-height);font-family:var(--headline-3xl-max-font-family);letter-spacing:var(--headline-3xl-max-letter-spacing);text-transform:var(--headline-3xl-max-text-case);font-weight:var(--headline-3xl-max-font-weight);}}chop-styled-text .headline-2xl{font-size:clamp(2.25rem, 2.25rem + 2.734375vw, 4rem);font-weight:var(--headline-2xl-min-font-weight);line-height:var(--headline-2xl-min-line-height);font-family:var(--headline-2xl-min-font-family);letter-spacing:var(--headline-2xl-min-letter-spacing);text-transform:var(--headline-2xl-min-text-case);}@media (min-width: 860px){chop-styled-text .headline-2xl{font-weight:var(--headline-2xl-mid-font-weight);line-height:var(--headline-2xl-mid-line-height);font-family:var(--headline-2xl-mid-font-family);letter-spacing:var(--headline-2xl-mid-letter-spacing);text-transform:var(--headline-2xl-mid-text-case);}}@media (min-width: 1100px){chop-styled-text .headline-2xl{font-weight:var(--headline-2xl-max-font-weight);line-height:var(--headline-2xl-max-line-height);font-family:var(--headline-2xl-max-font-family);letter-spacing:var(--headline-2xl-max-letter-spacing);text-transform:var(--headline-2xl-max-text-case);}}chop-styled-text .headline-xl{font-size:clamp(2rem, 2rem + 2.34375vw, 3.5rem);font-weight:var(--headline-xl-min-font-weight);line-height:var(--headline-xl-min-line-height);font-family:var(--headline-xl-min-font-family);letter-spacing:var(--headline-xl-min-letter-spacing);text-transform:var(--headline-xl-min-text-case);}@media (min-width: 860px){chop-styled-text .headline-xl{font-weight:var(--headline-xl-mid-font-weight);line-height:var(--headline-xl-mid-line-height);font-family:var(--headline-xl-mid-font-family);letter-spacing:var(--headline-xl-mid-letter-spacing);text-transform:var(--headline-xl-mid-text-case);}}@media (min-width: 1100px){chop-styled-text .headline-xl{font-weight:var(--headline-xl-max-font-weight);line-height:var(--headline-xl-max-line-height);font-family:var(--headline-xl-max-font-family);letter-spacing:var(--headline-xl-max-letter-spacing);text-transform:var(--headline-xl-max-text-case);}}chop-styled-text .headline-lg{font-weight:var(--headline-lg-min-font-weight);font-size:clamp(1.75rem, 1.75rem + 1.5625vw, 2.75rem);font-size:clamp(1.625rem, 1.625rem + 1.3672vw, 2.5rem);line-height:var(--headline-lg-min-line-height);font-family:var(--headline-lg-min-font-family);letter-spacing:var(--headline-lg-min-letter-spacing);text-transform:var(--headline-lg-min-text-case);}@media (min-width: 860px){chop-styled-text .headline-lg{font-weight:var(--headline-lg-mid-font-weight);line-height:var(--headline-lg-mid-line-height);font-family:var(--headline-lg-mid-font-family);letter-spacing:var(--headline-lg-mid-letter-spacing);text-transform:var(--headline-lg-mid-text-case);}}@media (min-width: 1100px){chop-styled-text .headline-lg{font-weight:var(--headline-lg-max-font-weight);line-height:var(--headline-lg-max-line-height);font-family:var(--headline-lg-max-font-family);letter-spacing:var(--headline-lg-max-letter-spacing);text-transform:var(--headline-lg-max-text-case);}}chop-styled-text .headline-md{font-size:clamp(1.5rem, 1.5rem + 1.171875vw, 2.25rem);line-height:var(--headline-md-min-line-height);font-family:var(--headline-md-min-font-family);font-weight:var(--headline-md-min-font-weight);}@media (min-width: 860px){chop-styled-text .headline-md{font-weight:var(--headline-md-mid-font-weight);line-height:var(--headline-md-mid-line-height);font-family:var(--headline-md-mid-font-family);letter-spacing:var(--headline-md-mid-letter-spacing);text-transform:var(--headline-md-mid-text-case);}}@media (min-width: 1100px){chop-styled-text .headline-md{font-weight:var(--headline-md-max-font-weight);line-height:var(--headline-md-max-line-height);font-family:var(--headline-md-max-font-family);letter-spacing:var(--headline-md-max-letter-spacing);text-transform:var(--headline-md-max-text-case);}}chop-styled-text .headline-sm{font-weight:var(--headline-sm-min-font-weight);font-size:clamp(1.25rem, 1.25rem + 0.78125vw, 1.75rem);line-height:var(--headline-sm-min-line-height);font-family:var(--headline-sm-min-font-family);letter-spacing:var(--headline-sm-min-letter-spacing);text-transform:var(--headline-sm-min-text-case);}@media (min-width: 860px){chop-styled-text .headline-sm{font-weight:var(--headline-sm-mid-font-weight);line-height:var(--headline-md-mid-line-height);font-family:var(--headline-md-mid-font-family);letter-spacing:var(--headline-md-mid-letter-spacing);text-transform:var(--headline-md-mid-text-case);}}@media (min-width: 1100px){chop-styled-text .headline-sm{font-weight:var(--headline-sm-max-font-weight);line-height:var(--headline-sm-max-line-height);font-family:var(--headline-sm-max-font-family);letter-spacing:var(--headline-sm-max-letter-spacing);text-transform:var(--headline-sm-max-text-case);}}chop-styled-text .headline-xs{font-size:clamp(1.125rem, 1.125rem + 0.5859375vw, 1.5rem);font-weight:var(--headline-xs-min-font-weight);line-height:var(--headline-xs-min-line-height);font-family:var(--headline-xs-min-font-family);letter-spacing:var(--headline-xs-min-letter-spacing);text-transform:var(--headline-xs-min-text-case);}@media (min-width: 860px){chop-styled-text .headline-xs{font-weight:var(--headline-xs-mid-font-weight);line-height:var(--headline-xs-mid-line-height);font-family:var(--headline-xs-mid-font-family);letter-spacing:var(--headline-xs-mid-letter-spacing);text-transform:var(--headline-xs-mid-text-case);}}@media (min-width: 1100px){chop-styled-text .headline-xs{font-weight:var(--headline-xs-max-font-weight);line-height:var(--headline-xs-max-line-height);font-family:var(--headline-xs-max-font-family);letter-spacing:var(--headline-xs-max-letter-spacing);text-transform:var(--headline-xs-max-text-case);}}chop-styled-text .headline-eyebrow{font-size:clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);font-weight:700;letter-spacing:3px;text-transform:uppercase;line-height:var(--headline-eyebrow-min-line-height);font-family:var(--headline-eyebrow-min-font-family);}@media (min-width: 860px){chop-styled-text .headline-eyebrow{line-height:var(--headline-eyebrow-mid-line-height);font-family:var(--headline-eyebrow-mid-font-family);}}@media (min-width: 1100px){chop-styled-text .headline-eyebrow{line-height:var(--headline-eyebrow-max-line-height);font-family:var(--headline-eyebrow-max-font-family);}}@media (min-width: 860px){chop-styled-text .less-margin-bottom--xs{margin-bottom:-0.5rem;}chop-styled-text .less-margin-bottom--sm{margin-bottom:-1rem;}chop-styled-text .less-margin-bottom--md{margin-bottom:-2rem;}chop-styled-text .less-margin-bottom--lg{margin-bottom:-3rem;}chop-styled-text .less-margin-bottom--xl{margin-bottom:-4rem;}chop-styled-text .less-margin-bottom--2xl{margin-bottom:-5rem;}chop-styled-text .less-margin-bottom--3xl{margin-bottom:-6rem;}}chop-styled-text{--element-margin-top:var(--spacing-6);--element-margin-bottom:var(--spacing-6);--element-margin-top-sm:var(--spacing-4);--element-margin-bottom-sm:var(--spacing-4);--list-y-spacing:var(--spacing-3);--list-x-spacing:var(--spacing-12);}chop-styled-text h1,chop-styled-text h2,chop-styled-text h3,chop-styled-text h4,chop-styled-text h5,chop-styled-text h6{display:block;color:currentColor;}chop-styled-text .headline-3xl{font-size:clamp(2.5rem, 2.5rem + 3.125vw, 4.5rem);line-height:var(--headline-3xl-min-line-height);font-family:var(--headline-3xl-min-font-family);letter-spacing:var(--headline-3xl-min-letter-spacing);text-transform:var(--headline-3xl-min-text-case);font-weight:var(--headline-3xl-min-font-weight);}@media (min-width: 860px){chop-styled-text .headline-3xl{line-height:var(--headline-3xl-mid-line-height);font-family:var(--headline-3xl-mid-font-family);letter-spacing:var(--headline-3xl-mid-letter-spacing);text-transform:var(--headline-3xl-mid-text-case);font-weight:var(--headline-3xl-mid-font-weight);}}@media (min-width: 1100px){chop-styled-text .headline-3xl{line-height:var(--headline-3xl-max-line-height);font-family:var(--headline-3xl-max-font-family);letter-spacing:var(--headline-3xl-max-letter-spacing);text-transform:var(--headline-3xl-max-text-case);font-weight:var(--headline-3xl-max-font-weight);}}chop-styled-text .headline-2xl{font-size:clamp(2.25rem, 2.25rem + 2.734375vw, 4rem);font-weight:var(--headline-2xl-min-font-weight);line-height:var(--headline-2xl-min-line-height);font-family:var(--headline-2xl-min-font-family);letter-spacing:var(--headline-2xl-min-letter-spacing);text-transform:var(--headline-2xl-min-text-case);}@media (min-width: 860px){chop-styled-text .headline-2xl{font-weight:var(--headline-2xl-mid-font-weight);line-height:var(--headline-2xl-mid-line-height);font-family:var(--headline-2xl-mid-font-family);letter-spacing:var(--headline-2xl-mid-letter-spacing);text-transform:var(--headline-2xl-mid-text-case);}}@media (min-width: 1100px){chop-styled-text .headline-2xl{font-weight:var(--headline-2xl-max-font-weight);line-height:var(--headline-2xl-max-line-height);font-family:var(--headline-2xl-max-font-family);letter-spacing:var(--headline-2xl-max-letter-spacing);text-transform:var(--headline-2xl-max-text-case);}}chop-styled-text h1,chop-styled-text .headline-xl,chop-styled-text h1 a,chop-styled-text .headline-xl a{font-size:clamp(2rem, 2rem + 2.34375vw, 3.5rem);font-weight:var(--headline-xl-min-font-weight);line-height:var(--headline-xl-min-line-height);font-family:var(--headline-xl-min-font-family);letter-spacing:var(--headline-xl-min-letter-spacing);text-transform:var(--headline-xl-min-text-case);}@media (min-width: 860px){chop-styled-text h1,chop-styled-text .headline-xl,chop-styled-text h1 a,chop-styled-text .headline-xl a{font-weight:var(--headline-xl-mid-font-weight);line-height:var(--headline-xl-mid-line-height);font-family:var(--headline-xl-mid-font-family);letter-spacing:var(--headline-xl-mid-letter-spacing);text-transform:var(--headline-xl-mid-text-case);}}@media (min-width: 1100px){chop-styled-text h1,chop-styled-text .headline-xl,chop-styled-text h1 a,chop-styled-text .headline-xl a{font-weight:var(--headline-xl-max-font-weight);line-height:var(--headline-xl-max-line-height);font-family:var(--headline-xl-max-font-family);letter-spacing:var(--headline-xl-max-letter-spacing);text-transform:var(--headline-xl-max-text-case);}}chop-styled-text h2,chop-styled-text .headline-lg,chop-styled-text h2 a,chop-styled-text .headline-lg a{font-weight:var(--headline-lg-min-font-weight);font-size:clamp(1.75rem, 1.75rem + 1.5625vw, 2.5rem);font-size:clamp(1.625rem, 1.625rem + 1.3672vw, 2.5rem);line-height:var(--headline-lg-min-line-height);font-family:var(--headline-lg-min-font-family);letter-spacing:var(--headline-lg-min-letter-spacing);text-transform:var(--headline-lg-min-text-case);}@media (min-width: 860px){chop-styled-text h2,chop-styled-text .headline-lg,chop-styled-text h2 a,chop-styled-text .headline-lg a{font-weight:var(--headline-lg-mid-font-weight);line-height:var(--headline-lg-mid-line-height);font-family:var(--headline-lg-mid-font-family);letter-spacing:var(--headline-lg-mid-letter-spacing);text-transform:var(--headline-lg-mid-text-case);}}@media (min-width: 1100px){chop-styled-text h2,chop-styled-text .headline-lg,chop-styled-text h2 a,chop-styled-text .headline-lg a{font-weight:var(--headline-lg-max-font-weight);line-height:var(--headline-lg-max-line-height);font-family:var(--headline-lg-max-font-family);letter-spacing:var(--headline-lg-max-letter-spacing);text-transform:var(--headline-lg-max-text-case);}}chop-styled-text h3,chop-styled-text .headline-md,chop-styled-text h3 a,chop-styled-text .headline-md a{font-size:clamp(1.5rem, 1.5rem + 1.171875vw, 2.25rem);line-height:var(--headline-md-min-line-height);font-family:var(--headline-md-min-font-family);font-weight:var(--headline-md-min-font-weight);}@media (min-width: 860px){chop-styled-text h3,chop-styled-text .headline-md,chop-styled-text h3 a,chop-styled-text .headline-md a{font-weight:var(--headline-md-mid-font-weight);line-height:var(--headline-md-mid-line-height);font-family:var(--headline-md-mid-font-family);letter-spacing:var(--headline-md-mid-letter-spacing);text-transform:var(--headline-md-mid-text-case);}}@media (min-width: 1100px){chop-styled-text h3,chop-styled-text .headline-md,chop-styled-text h3 a,chop-styled-text .headline-md a{font-weight:var(--headline-md-max-font-weight);line-height:var(--headline-md-max-line-height);font-family:var(--headline-md-max-font-family);letter-spacing:var(--headline-md-max-letter-spacing);text-transform:var(--headline-md-max-text-case);}}chop-styled-text h4,chop-styled-text .headline-sm,chop-styled-text h4 a,chop-styled-text .headline-sm a{font-weight:var(--headline-sm-min-font-weight);font-size:clamp(1.25rem, 1.25rem + 0.78125vw, 1.75rem);line-height:var(--headline-sm-min-line-height);font-family:var(--headline-sm-min-font-family);letter-spacing:var(--headline-sm-min-letter-spacing);text-transform:var(--headline-sm-min-text-case);}@media (min-width: 860px){chop-styled-text h4,chop-styled-text .headline-sm,chop-styled-text h4 a,chop-styled-text .headline-sm a{font-weight:var(--headline-sm-mid-font-weight);line-height:var(--headline-md-mid-line-height);font-family:var(--headline-md-mid-font-family);letter-spacing:var(--headline-md-mid-letter-spacing);text-transform:var(--headline-md-mid-text-case);}}@media (min-width: 1100px){chop-styled-text h4,chop-styled-text .headline-sm,chop-styled-text h4 a,chop-styled-text .headline-sm a{font-weight:var(--headline-sm-max-font-weight);line-height:var(--headline-sm-max-line-height);font-family:var(--headline-sm-max-font-family);letter-spacing:var(--headline-sm-max-letter-spacing);text-transform:var(--headline-sm-max-text-case);}}chop-styled-text h5,chop-styled-text .headline-xs,chop-styled-text h5 a,chop-styled-text .headline-xs a{font-weight:var(--headline-xs-min-font-weight);font-size:clamp(1.125rem, 1.125rem + 0.78125vw, 1.35rem);line-height:var(--headline-xs-min-line-height);font-family:var(--headline-xs-min-font-family);letter-spacing:var(--headline-xs-min-letter-spacing);text-transform:var(--headline-xs-min-text-case);}@media (min-width: 860px){chop-styled-text h5,chop-styled-text .headline-xs,chop-styled-text h5 a,chop-styled-text .headline-xs a{font-weight:var(--headline-xs-mid-font-weight);line-height:var(--headline-xs-mid-line-height);font-family:var(--headline-xs-mid-font-family);letter-spacing:var(--headline-xs-mid-letter-spacing);text-transform:var(--headline-xs-mid-text-case);}}@media (min-width: 1100px){chop-styled-text h5,chop-styled-text .headline-xs,chop-styled-text h5 a,chop-styled-text .headline-xs a{font-weight:var(--headline-xs-max-font-weight);line-height:var(--headline-xs-max-line-height);font-family:var(--headline-xs-max-font-family);letter-spacing:var(--headline-xs-max-letter-spacing);text-transform:var(--headline-xs-max-text-case);}}chop-styled-text h6,chop-styled-text h6 a{font-weight:var(--headline-xs-min-font-weight);font-size:clamp(1.075rem, 1.075rem + 0.78125vw, 0.85rem);line-height:var(--headline-xs-min-line-height);font-family:var(--headline-xs-min-font-family);letter-spacing:var(--headline-xs-min-letter-spacing);text-transform:var(--headline-xs-min-text-case);}@media (min-width: 860px){chop-styled-text h6,chop-styled-text h6 a{font-weight:var(--headline-xs-mid-font-weight);line-height:var(--headline-xs-mid-line-height);font-family:var(--headline-xs-mid-font-family);letter-spacing:var(--headline-xs-mid-letter-spacing);text-transform:var(--headline-xs-mid-text-case);}}@media (min-width: 1100px){chop-styled-text h6,chop-styled-text h6 a{font-weight:var(--headline-xs-max-font-weight);line-height:var(--headline-xs-max-line-height);font-family:var(--headline-xs-max-font-family);letter-spacing:var(--headline-xs-max-letter-spacing);text-transform:var(--headline-xs-max-text-case);}}chop-styled-text h1 a,chop-styled-text .headline-xl a,chop-styled-text h2 a,chop-styled-text .headline-lg a,chop-styled-text h3 a,chop-styled-text .headline-md a,chop-styled-text h4 a,chop-styled-text .headline-sm a,chop-styled-text h5 a,chop-styled-text .headline-xs a,chop-styled-text h6 a{color:inherit;}chop-styled-text strong{font-family:var(--ff-bold);}chop-styled-text chop-styled-text p,chop-styled-text p,chop-styled-text a,chop-styled-text ul,chop-styled-text ol{font-family:var(--body-md-max-reg-font-family);font-weight:var(--body-font-weight);font-size:var(--fs-lg);line-height:var(--body-md-max-reg-line-height);}@media (min-width: 1100px){chop-styled-text chop-styled-text p,chop-styled-text p,chop-styled-text a,chop-styled-text ul,chop-styled-text ol{font-size:var(--body-md-max-reg-font-size);}}chop-styled-text chop-styled-text p,chop-styled-text p{display:block;margin-top:var(--element-margin-top);margin-bottom:var(--element-margin-bottom);}chop-styled-text h2,chop-styled-text h3,chop-styled-text h4,chop-styled-text h5,chop-styled-text h6{margin-bottom:var(--element-margin-bottom);}chop-styled-text p:first-child{margin-top:0;}chop-styled-text p:last-child{margin-bottom:0;}chop-styled-text ol,chop-styled-text ul{counter-reset:ol-counter;list-style-position:outside;padding-left:var(--spacing-12);}chop-styled-text ol{list-style-type:decimal;}chop-styled-text ol[type='a']{list-style-type:lower-alpha;}chop-styled-text ol[data-type='a']{list-style-type:lower-alpha;}chop-styled-text ol[data-type='A']{list-style-type:upper-alpha;}chop-styled-text ol[type='i']{list-style-type:lower-roman;}chop-styled-text ol[data-type='i']{list-style-type:lower-roman;}chop-styled-text ol[data-type='I']{list-style-type:upper-roman;}chop-styled-text ul ul,chop-styled-text ol ol{margin-top:var(--list-y-spacing);}chop-styled-text ul li{position:relative;margin-bottom:var(--list-y-spacing);list-style:disc url(\"data:image/svg+xml,%3Csvg width='8' height='27' viewBox='0 0 8 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='20.2783' r='4' fill='%2395B350'/%3E%3C/svg%3E%0A\");padding-left:20px;}chop-styled-text ul > li > ul li{list-style:circle url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='27' viewBox='0 0 8 27' fill='none'%3E%3Ccircle cx='4' cy='20.8291' r='3' stroke='%2395B350' stroke-width='2'/%3E%3C/svg%3E\");}@media (min-width: 1100px){chop-styled-text ul li::before,chop-styled-text ul > li > ul li::before{margin-right:12px;background-size:7px 26px;background-position:center -8px;}}chop-styled-text ul li .ck-list-bogus-paragraph,chop-styled-text ul li span{display:initial !important;}chop-styled-text ol li{position:relative;padding-left:8px;}chop-styled-text > ul,chop-styled-text > ol{margin-bottom:var(--element-margin-bottom);}chop-styled-text ol > li{position:relative;margin-bottom:var(--list-y-spacing);counter-increment:ol-counter;margin-left:var(--spacing-5);}chop-styled-text li li{margin-left:0;}chop-styled-text li ul,chop-styled-text li ol{margin-left:var(--list-x-spacing);}chop-styled-text ul ol li{margin-left:var(--list-x-spacing);}chop-styled-text ul ul,chop-styled-text ol ol{padding-left:0;}chop-styled-text ol ol li{margin-left:var(--spacing-2);}chop-styled-text ol > li::marker{color:var(--list-marker-color);font-size:16px;}@media (min-width: 1100px){chop-styled-text ol li{padding-left:10px;}chop-styled-text ol > li::marker{font-size:var(--fs-xl);}}chop-styled-text ul.checkbox li::before{width:17px;height:27px;background-image:url(\"data:image/svg+xml,%3Csvg width='17' height='27' viewBox='0 0 17 27' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_388_2842)'%3E%3Cpath d='M6.15 22.2283L0 16.0783L1.9 14.1783L6.15 18.4533L15.3 9.27832L17.2 11.1783L6.15 22.2283Z' fill='%2341B6E6'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_388_2842'%3E%3Crect width='17' height='26' fill='white' transform='translate(0 0.27832)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A\");background-size:12px 22px;background-position:center 8px;}chop-styled-text ul.x-bullet li::before{width:15px;height:16px;background-image:url(\"data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_388_2846)'%3E%3Cpath d='M14.6672 1.12246C14.2235 0.678776 13.5068 0.678776 13.0631 1.12246L7.5 6.67423L1.93686 1.11108C1.49317 0.667399 0.776451 0.667399 0.332765 1.11108C-0.110922 1.55477 -0.110922 2.27149 0.332765 2.71518L5.89591 8.27832L0.332765 13.8415C-0.110922 14.2851 -0.110922 15.0019 0.332765 15.4456C0.776451 15.8892 1.49317 15.8892 1.93686 15.4456L7.5 9.88242L13.0631 15.4456C13.5068 15.8892 14.2235 15.8892 14.6672 15.4456C15.1109 15.0019 15.1109 14.2851 14.6672 13.8415L9.1041 8.27832L14.6672 2.71518C15.0995 2.28287 15.0995 1.55477 14.6672 1.12246Z' fill='%2341B6E6'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_388_2846'%3E%3Crect width='15' height='15' fill='white' transform='translate(0 0.77832)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A\");background-size:10px 11px;background-position:center 4px;}@media (min-width: 1100px){chop-styled-text ul.checkbox li::before{background-size:17px 27px;background-position:center 4px;}chop-styled-text ul.x-bullet li::before{background-size:15px 16px;background-position:center;}}chop-styled-text .align-left,chop-styled-text .align-right,chop-styled-text .align-center{float:none;height:100%;width:auto;clear:both;margin-left:auto;margin-right:auto;}chop-styled-text .align-left:first-child,chop-styled-text .align-right:first-child,chop-styled-text .align-center:first-child{margin-top:var(--element-margin-top);}chop-styled-text .align-left div,chop-styled-text .align-right div,chop-styled-text .align-center div{height:100%;width:100%;}chop-styled-text .align-left img,chop-styled-text .align-right img,chop-styled-text .align-center img{margin:0 auto;}@media (min-width: 860px){chop-styled-text .align-left,chop-styled-text .align-right,chop-styled-text .align-center{max-width:50%;margin-bottom:var(--element-margin-bottom);}chop-styled-text .align-left img,chop-styled-text .align-right img,chop-styled-text .align-center img{margin:initial;}chop-styled-text .align-right{float:right;margin-left:var(--spacing-6);}chop-styled-text .align-left{float:left;margin-right:var(--spacing-6);}chop-styled-text .align-center{clear:both;display:block;margin-left:auto;margin-right:auto;}}chop-styled-text iframe{width:100%;height:100%;aspect-ratio:16/9;}chop-styled-text figure:has(.media--type-remote-video){display:block;}chop-styled-text figure{display:table;}chop-styled-text figcaption{display:block;caption-side:bottom;color:var(--color-brown-900);background-color:var(--bg-color--transparent);font-style:normal;font-size:var(--fs-sm);line-height:var(--lh-sm);padding:var(--spacing-004) 0;}chop-styled-text figcaption a{font-size:var(--fs-sm);}chop-styled-text blockquote{font-style:italic;position:relative;padding-left:var(--spacing-12);}chop-styled-text blockquote:before{content:'';display:block;position:absolute;top:0;left:0;width:4px;height:100%;border-radius:2px;background-color:var(--outline-gray-400);}chop-styled-text table.chop-table{width:100%;table-layout:fixed;}chop-styled-text table.chop-table tr{vertical-align:top;}chop-styled-text table.chop-table thead{background:var(--color-brown-300);}chop-styled-text table.chop-table thead tr th{padding:var(--spacing-03) var(--spacing-04);font-size:var(--fs-lg);font-weight:var(--fw-semibold);}chop-styled-text table.chop-table tbody tr:nth-child(even){background-color:var(--color-brown-100);}chop-styled-text table.chop-table tbody tr td{padding:var(--spacing-03) var(--spacing-04);}chop-styled-text table.chop-table ul,chop-styled-text table.chop-table ol{padding-left:0;}chop-styled-text a.btn.link{display:inline-flex;}chop-styled-text{position:relative;display:block;}chop-styled-text[has-padding]{padding:var(--spacing-4);}chop-styled-text[has-vertical-padding]{padding:var(--spacing-4) 0;}chop-styled-text .btn.primary{padding:var(--spacing-2) var(--spacing-06);}chop-styled-text[clipped] > chop-styled-text,chop-styled-text.clipped > chop-styled-text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;}`;","import { OutlineElement } from '@phase2/outline-core';\nimport { CSSResultGroup, TemplateResult, html } from 'lit';\nimport componentStyles from './chop-filter-dropdown.css.lit';\nimport chopStyledText from '../chop-styled-text/chop-styled-text.global.scoped.css.lit';\nimport { customElement } from 'lit/decorators.js';\n/**\n * The filter position dropdown.\n * @element chop-filter-dropdown\n *\n * @property optionsList - A NodeListOf getting the collection of h3 elements to build the options of the dropdown.\n * @property selectedItems - Array of selected items during the change in the dropdown.\n */\n@customElement('chop-filter-dropdown')\nexport class CHOPFilterDropdown extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles, chopStyledText];\n optionsList: NodeListOf;\n options: TemplateResult[];\n selectedItems: string[];\n\n constructor() {\n super();\n this.selectedItems = [];\n }\n\n render(): TemplateResult {\n this.optionsList = document.querySelectorAll(\n `div.views-element-container h2:not([data*=\"data-jump-nav-exclude\"])`\n );\n this.buildOptions(this.optionsList);\n return html`
\n \n \"\n autocomplete=\"off\"\n aria-label=\"Filter\"\n @change=\"${this.handleSelect}\"\n >\n \n ${this.options}\n \n
\n ${this.resultSummaryTemplate()}`;\n }\n\n buildOptions(items: NodeListOf) {\n const options: TemplateResult[] = [];\n Array.from(items, item => {\n // Getting the parent item-list wrapper.\n const parentItemList = item.parentElement\n ? item.parentElement.parentElement\n : '';\n const title = item.textContent;\n if (title) {\n const id = `${title.toString().replace(/\\W/g, '').toLowerCase()}`;\n options.push(\n html``\n );\n if (parentItemList) {\n // Assigning a unique id to each item-list wrapper.\n parentItemList.id = id;\n }\n }\n });\n this.options = options;\n }\n\n resultSummaryTemplate() {\n return html`\n `;\n }\n\n handleSelect(e: { target: HTMLSelectElement }) {\n const selectedFilters = this.shadowRoot?.querySelector('#selected-filters');\n const currentOption = e.target.querySelector(\n `option[value=\"${e.target.value}\"]`\n );\n const itemList = document.querySelectorAll(\n 'div.views-element-container .item-list.headers'\n );\n\n // Building icon element.\n const icon = document.createElement('chop-icon');\n icon.name = 'close';\n icon.library = 'system';\n icon.size = '1.5rem';\n\n // Building a link and inside the icon.\n const filterLink = document.createElement('a');\n filterLink.href = '#';\n filterLink.classList.add('btn', 'small', 'outline');\n filterLink.setAttribute('data-name', e.target.value);\n filterLink.textContent = currentOption ? currentOption.textContent : '';\n filterLink.appendChild(icon);\n\n // Save selected items.\n this.selectedItems.push(e.target.value);\n\n if (itemList && selectedFilters) {\n itemList.forEach(item => {\n if (item.id !== e.target.value) {\n item.classList.add('hidden');\n }\n });\n\n // Make visible items on the selectedItems\n this.removeHiddenFromSelected();\n\n // Adding event listener to each filter link.\n filterLink.addEventListener('click', () => {\n selectedFilters?.removeChild(filterLink);\n // Removing the disable option from select if removed.\n currentOption?.removeAttribute('disabled');\n // If there are no options selected display all results.\n if (!selectedFilters.querySelectorAll('a').length) {\n itemList.forEach(item => {\n item.classList.remove('hidden');\n });\n } else {\n // Hidding removed option but there are more in the array.\n document\n .getElementById(filterLink.dataset.name!)\n ?.classList.add('hidden');\n }\n // Remove items from the selectedItems.\n const index = this.selectedItems.indexOf(\n filterLink.dataset.name as string\n );\n this.selectedItems.splice(index, 1);\n\n // Make visible items on the selectedItems\n this.removeHiddenFromSelected();\n });\n\n // Adding the link label with the text from the selected option.\n selectedFilters.appendChild(filterLink);\n }\n // Disable option selected from the dropdown.\n currentOption?.setAttribute('disabled', '');\n // Reset to the first opttion when change.\n e.target.selectedIndex = 0;\n }\n\n removeHiddenFromSelected() {\n this.selectedItems.forEach(item => {\n const itemWrapper = document.getElementById(item);\n itemWrapper?.classList.remove('hidden');\n });\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-filter-dropdown': CHOPFilterDropdown;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:block;\n}\n\n.footer-container{\n width:100%;\n z-index:10;\n overflow:hidden;\n}\n\n.footer-container .footer-content{\n padding:0 var(--spacing-36);\n }\n\n.footer-container.mobile .footer-top{\n align-items:flex-end;\n height:12.188rem;\n}\n\n.footer-container.mobile .footer-top .slice-wrapper{\n height:100%;\n transform:translateY(71%);\n }\n\n@media (min-width: 486px){\n\n.footer-container.mobile .footer-top .slice-wrapper{\n transform:translateY(45%)\n }\n }\n\n@media (min-width: 860px){\n\n.footer-container.mobile .footer-top .slice-wrapper{\n transform:translateY(25%)\n }\n }\n\n.footer-container.mobile .footer-top {\n\n flex-direction:column;\n align-items:flex-start;\n align-content:flex-start;\n justify-content:flex-end;\n}\n\n.footer-container.mobile .footer-top .logo-wrapper{\n margin-bottom:2rem;\n max-width:var(--spacing-48);\n }\n\n.footer-container.mobile .footer-top .logo-wrapper chop-logo{\n position:absolute;\n transform:translate(-10px, -84px);\n }\n\n@media (max-width: 440px){\n\n.footer-container.mobile .footer-top .logo-wrapper chop-logo{\n max-width:220px;\n transform:translate(-10px, -72px)\n }\n }\n\n.footer-container.mobile .footer-top .address-wrapper{\n text-align:center;\n max-width:100%;\n transform:translateY(20px);\n }\n\n.slice-wrapper{\n z-index:0;\n position:absolute;\n height:100%;\n width:100%;\n left:50%;\n transform:translate(-50%, 2px);\n}\n\n@media (min-width: 860px){\n\n.slice-wrapper{\n min-width:2300px\n}\n }\n\n.footer-top{\n height:21.625rem;\n display:flex;\n flex-direction:column;\n justify-content:flex-end;\n}\n\n@media (min-width: 860px){\n\n.footer-top{\n display:grid;\n grid-template-columns:3fr 1fr;\n align-items:center;\n gap:var(--gap-sm)\n}\n }\n\n.footer-top .logo-wrapper{\n z-index:3;\n }\n\n.footer-top .logo-wrapper chop-logo{\n position:absolute;\n transform:scale(0.8);\n transform-origin:left center;\n }\n\n@media (min-width: 1100px){\n\n.footer-top .logo-wrapper chop-logo{\n transform:none\n }\n }\n\n.footer-top .address-wrapper{\n display:flex;\n flex-direction:row;\n color:#544334;\n color:var(--color-brown-900, #544334);\n font-family:'TP Rubrik';\n font-family:var(--ff-display, 'TP Rubrik');\n font-size:12px;\n font-size:var(--fs-xs, 12px);\n font-weight:500;\n line-height:137.5%;\n z-index:3;\n max-width:100%;\n min-width:200px;\n transform:translateY(33px);\n }\n\n@media (min-width: 1100px){\n\n.footer-top .address-wrapper{\n font-size:18px;\n font-size:var(--fs-lg, 18px);\n align-items:center\n }\n }\n\n.footer-top .address-wrapper .logo-wrapper{\n z-index:3;\n }\n\n.footer-top .address-wrapper .address-wrapper{\n display:flex;\n flex-direction:row;\n color:#544334;\n color:var(--color-brown-900, #544334);\n font-family:'TP Rubrik';\n font-family:var(--ff-display, 'TP Rubrik');\n font-size:12px;\n font-size:var(--fs-xs, 12px);\n font-weight:500;\n line-height:150%;\n line-height:var(--line-height-xl, 150%);\n max-width:var(--spacing-56);\n }\n\n.footer-container.mobile .menu-info-wrapper{\n grid-template-areas:'directory' 'menu';\n}\n\n@media (min-width: 860px){\n\n.footer-container.mobile .menu-info-wrapper{\n gap:9.5rem;\n margin:7.75rem 0 5rem 0\n}\n }\n\n.footer-bottom .menu-info-wrapper{\n display:grid;\n grid-template-areas:'menu directory';\n margin-top:2rem;\n }\n\n.footer-bottom .directory-wrapper{\n color:#544334;\n color:var(--color-brown-900, #544334);\n grid-area:directory;\n gap:1rem;\n display:flex;\n flex-direction:column;\n }\n\n.footer-bottom .directory-wrapper chop-heading{\n color:#544334;\n color:var(--color-brown-900, #544334);\n font-family:var(--ff-display);\n font-size:18px;\n font-size:var(--fs-lg, 18px);\n font-weight:600;\n font-weight:var(--fw-semibold, 600);\n line-height:normal;\n }\n\n@media (min-width: 1100px){\n\n.footer-bottom .directory-wrapper chop-heading{\n font-size:20px;\n font-size:var(--fs-xl, 20px)\n }\n }\n\n.footer-bottom .directory-wrapper a:hover{\n text-decoration:underline;\n }\n\n@media (min-width: 860px){\n\n.footer-bottom .directory-wrapper{\n display:flex;\n flex-direction:column\n }\n\n .footer-bottom .directory-wrapper ul{\n display:flex;\n flex-direction:column;\n gap:1rem;\n list-style:none;\n padding:0;\n }\n }\n\n.footer-bottom .directory-wrapper .menu-wrapper{\n grid-area:menu;\n }\n\n.footer-bottom .directory-wrapper .phone-number{\n display:flex;\n flex-direction:row;\n flex-wrap:wrap;\n color:#544334;\n color:var(--color-brown-900, #544334);\n font-family:'Georgia';\n font-size:var(--fs-base);\n font-weight:400;\n font-weight:var(--fw-normal, 400);\n line-height:150%;\n line-height:var(--line-height-xl, 150%);\n }\n\n.footer-bottom .directory-wrapper .phone-number > *{\n display:flex;\n flex-direction:column;\n flex-basis:100%;\n flex:1;\n }\n\n.footer-bottom .directory-wrapper .phone-number a{\n color:var(--color-brown-900);\n text-decoration:none;\n }\n\n@media (min-width: 668px) and (max-width: 859px){\n\n.footer-bottom .directory-wrapper .phone-number{\n display:grid;\n grid-template-columns:repeat(2, 1fr);\n gap:var(--spacing-04)\n }\n }\n\n@media (min-width: 860px){\n\n.footer-bottom .directory-wrapper .phone-number{\n display:flex;\n flex-direction:column\n }\n }\n\n.footer-bottom .social-links-wrapper{\n display:flex;\n flex-direction:column;\n column-gap:var(--spacing-04);\n }\n\n@media (min-width: 1100px){\n\n.footer-bottom .social-links-wrapper{\n flex-direction:row;\n row-gap:var(--spacing-04)\n }\n }\n\n.footer-bottom .awards-social-wrapper{\n display:flex;\n flex-direction:column;\n }\n\n@media (min-width: 1100px){\n\n.footer-bottom .awards-social-wrapper{\n display:flex;\n flex-direction:row;\n justify-content:space-between;\n align-items:flex-start\n }\n }\n`;","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:block;\n}\n\n.line-shape-thin{\n height:0;\n margin:0;\n margin:24px 0;\n margin-block-start:1rem;\n margin-block-start:var(--hr--margin-block-start, 1rem);\n margin-block-end:1rem;\n margin-block-end:var(--hr--margin-block-end, 1rem);\n border:solid 1px;\n}\n\n.line-shape-thick{\n height:0;\n margin:0;\n margin:2rem 0;\n margin-block-start:1rem;\n margin-block-start:var(--hr--margin-block-start, 1rem);\n margin-block-end:1rem;\n margin-block-end:var(--hr--margin-block-end, 1rem);\n border:solid 4px;\n}\n\n.line-shape-short{\n height:0;\n margin:0;\n margin:2rem 0;\n width:100px;\n margin-block-start:8rem;\n margin-block-start:var(--hr--margin-block-start, 8rem);\n margin-block-end:8rem;\n margin-block-end:var(--hr--margin-block-end, 8rem);\n border:solid 6px;\n}\n\nhr.line-color-blue{\n border-color:var(--color-blue-500);\n}\n\nhr.line-color-pink{\n border-color:var(--color-pink-800);\n}\n\nhr.line-color-green{\n border-color:var(--color-green-500);\n}\n\nhr.line-color-light-blue{\n border-color:var(--color-blue-300);\n}\n\nhr.line-color-brown{\n border-color:var(--color-brown-800);\n}\n\nhr.line-color-light-brown{\n border-color:var(--color-brown-400);\n}\n`;","import { CSSResultGroup, html, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { OutlineElement } from '@phase2/outline-core';\nimport componentStyles from './chop-hr.css.lit';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * The Horizontal Rule component.\n * @element chop-hr\n * @attr top-margin\n * @attr bottom-margin\n */\n\ntype ShapeOptionsType = 'thin' | 'thick' | 'short';\nexport const colorOptions = [\n 'blue',\n 'pink',\n 'green',\n 'light-blue',\n 'brown',\n 'light-brown',\n];\n\n@customElement('chop-hr')\nexport class CHOPHorizontalRule extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n @property({ type: String, attribute: 'line-color', reflect: true })\n lineColor: string;\n\n @property({ type: String, attribute: 'shape', reflect: true })\n shape: ShapeOptionsType;\n\n render(): TemplateResult {\n const classes = {\n [`line-color-${this.lineColor}`]: this.lineColor !== null,\n [`line-shape-${this.shape}`]: this.shape !== null,\n 'horizontal-rule': true,\n };\n return html`
`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-hr': CHOPHorizontalRule;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host svg{\n display:block;\n height:auto;\n width:100%;\n max-width:var(--spacing-73);\n min-width:var(--spacing-48);\n grid-area:1 / 1 / 3 / 3;\n}\n\na:hover{\n text-decoration:none;\n cursor:pointer;\n}\n`;","import { svg } from 'lit';\n\nexport default svg`\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`;\n","import { svg } from 'lit';\n\nexport default svg`\n\n \n \n \n \n`;\n","import { svg } from 'lit';\n\nexport default svg`\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`;\n","import { svg } from 'lit';\n\nexport default svg`\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `;\n","import { svg } from 'lit';\n\nexport default svg`\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`;\n","import { CSSResultGroup, TemplateResult, html } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property } from 'lit/decorators.js';\nimport componentStyles from './chop-logo.css.lit';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport CHOPLogoSVG from './chop-logo-svg';\nimport CHOPFoundationLogoSVF from './chop-foundation-logo-svg';\nimport CHOPVECLogoSVF from './chop-vec-logo-svg';\nimport CHOPPACKLogoSVF from './chop-pack-logo-svg';\nimport CHOPVUHPLogoSVF from './chop-vuhp-logo-svg';\n\n/**\n * The CHOP Logo component\n * @element chop-logo\n *\n * @slot logoSlot - The logo image\n * @property href - The link to the homepage\n * @property alt - text for the image\n */\n\n@customElement('chop-logo')\nexport class CHOPLogo extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n\n @property({ type: String, reflect: true, attribute: 'href' })\n href: string;\n\n @property({ type: String, reflect: true, attribute: 'label-text' })\n labelText: string;\n\n @property({ type: String, reflect: true }) // New property\n variant: string;\n\n render(): TemplateResult {\n let svgName = 'chop-logo-svg';\n let svg = CHOPLogoSVG;\n switch (this.variant) {\n case 'foundation':\n svgName = 'chop-foundation-logo-svg';\n svg = CHOPFoundationLogoSVF;\n break;\n case 'vec':\n svgName = 'chop-vec-logo-svg';\n svg = CHOPVECLogoSVF;\n break;\n case 'pack':\n svgName = 'chop-pack-logo-svg';\n svg = CHOPPACKLogoSVF;\n break;\n case 'vuhp':\n svgName = 'chop-vuhp-logo-svg';\n svg = CHOPVUHPLogoSVF;\n break;\n default:\n break;\n }\n\n return html`\n \n ${svg} ${this.slots.conditionalSlot('logo', true, svgName)}\n \n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-logo': CHOPLogo;\n }\n}\n","import { html, nothing } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport componentStyles from './chop-footer.css.lit';\nimport '../chop-container/chop-container';\nimport '../chop-hr/chop-hr';\nimport '../chop-logo/chop-logo';\nimport '../chop-woven-svgs/chop-woven-svgs';\nimport '../chop-grid/chop-grid';\nimport '../chop-column/chop-column';\n\n/**\n * The chop-footer component\n * @element chop-footer\n *\n * @slot logo\n * @slot address\n * @slot menus\n * @slot phone\n * @slot social-links\n * @slot copyright\n * @slot terms\n * @slot note\n */\n@customElement('chop-footer')\nexport class CHOPFooter extends OutlineElement {\n slots = new SlotManager(this);\n resizeController = new ResizeController(this);\n static styles = [componentStyles];\n screenSizes = 'mobile';\n\n render() {\n const isMobile = this.resizeController.currentBreakpointRange < 4;\n this.screenSizes =\n this.resizeController.currentBreakpointRange > 3\n ? 'desktop_lg'\n : 'mobile';\n\n const containerClasses = {\n 'footer-container': true,\n 'mobile': this.resizeController.currentBreakpointRange < 4,\n };\n return html`\n
\n \n \n
\n \n
\n
\n
\n \n \n
\n
\n \n
\n
\n \n \n\n
\n \n ${isMobile\n ? html` \n
\n \n `\n : nothing}\n ${isMobile ? html`${this.directoryTemplate()}` : nothing}\n \n
\n \n
\n \n ${!isMobile ? html`${this.directoryTemplate()}` : nothing}\n \n ${isMobile\n ? html``\n : nothing}\n ${this.slots.exist('newsletter')\n ? html`\n
\n \n
\n `\n : nothing}\n
\n \n
\n
\n ${this.slots.exist('awards')\n ? html`\n
\n \n
\n `\n : nothing}\n ${isMobile\n ? html`
`\n : nothing}\n ${this.slots.exist('social-links')\n ? html`\n \n `\n : nothing}\n
\n ${this.slots.exist('languages')\n ? html`\n
\n \n
\n `\n : nothing}\n ${isMobile\n ? html`
`\n : nothing}\n
\n ${this.slots.exist('terms')\n ? html`\n
\n \n
\n `\n : nothing}\n ${this.slots.exist('copyright')\n ? html`\n
\n \n
\n `\n : nothing}\n
\n
\n \n \n
\n
\n `;\n }\n\n directoryTemplate() {\n return html`\n \n
\n \n \n \n \n ${this.resizeController.currentBreakpointRange < 3\n ? html``\n : nothing}\n
\n \n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-footer': CHOPFooter;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n display:flex;\n flex-direction:column;\n flex-grow:1;\n overflow:hidden;\n position:relative;\n}\n\n.content-wrapper{\n box-sizing:border-box;\n z-index:10;\n position:relative;\n padding:var(--spacing-32) 0 var(--spacing-32) var(--spacing-11);\n display:flex;\n flex-direction:column;\n align-items:left;\n gap:var(--spacing-08);\n max-width:41.66%;\n}\n\n.content-wrapper.mobile{\n max-width:none;\n padding:var(--spacing-16) 0 var(--spacing-48) 0;\n}\n\n.image-wrapper{\n position:absolute;\n top:0;\n left:0;\n width:100%;\n height:100%;\n}\n\n.image-wrapper.mobile{\n top:auto;\n bottom:0;\n}\n\nchop-grid.overlap{\n padding-bottom:8rem;\n}\n`;","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport { screenSizeMap } from '../../controllers/screen-size-controller';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport componentStyles from './chop-full-feature.css.lit';\nimport '../chop-cta-link/chop-cta-link';\nimport '../chop-grid/chop-grid';\nimport '../chop-column/chop-column';\n\nimport { contentAlign, ContentAlign } from '../chop-grid/chop-grid';\nimport { isInType } from '../../../utilities/isInType';\n\n/**\n * The full-feature-image component\n * @element chop-full-feature\n * *\n * @property desktop-image\n * @property mobile-image\n * @property image-alt\n * @slot heading - NOTE: Styles are in the heading component\n * @slot cta-link\n */\n\n@customElement('chop-full-feature')\nexport class CHOPFullFeature extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n resizeController = new ResizeController(this);\n mobileBreakpoint = screenSizeMap.get('md') as number;\n\n @property({ type: Boolean, reflect: true })\n isMobile =\n this.resizeController.currentComponentWidth <= this.mobileBreakpoint;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'content-align',\n converter: value => {\n return isInType(value, Object.values(contentAlign), 'ContentAlign')\n ? value\n : '12';\n },\n })\n contentAlign: ContentAlign;\n\n @property({ type: Boolean, reflect: true, attribute: 'overlap' })\n overlap: boolean;\n\n render(): TemplateResult {\n this.isMobile =\n this.resizeController.currentComponentWidth <= this.mobileBreakpoint;\n\n const classes = {\n 'content-wrapper': true,\n 'mobile': this.isMobile,\n };\n\n const gridClasses = {\n mobile: this.isMobile,\n overlap: this.overlap,\n };\n\n return html` \n ${this.contentAlign === '3-9' ? this.asideTemplate() : nothing}\n \n ${this.slotTemplate('image')}\n
\n ${this.slotTemplate('heading')} ${this.slotTemplate('cta')}\n
\n \n ${this.contentAlign === '9-3' ? this.asideTemplate() : nothing}\n `;\n }\n\n slotTemplate(name = '') {\n const classes = {\n [`${name}-wrapper`]: true,\n mobile: this.isMobile,\n };\n return html`\n
\n \n
\n `;\n }\n\n asideTemplate() {\n return html`\n \n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-full-feature': CHOPFullFeature;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n:host{\n overflow:hidden;\n}\n\nchop-heading :host{\n display:block;\n}\n\nchop-heading .chop-headline{\n color:inherit;\n font-family:var(--headline-2xl-mid-font-family);\n display:block;\n margin:0;\n font-weight:inherit;\n word-break:keep-all;\n\n}\n\nchop-heading .chop-headline a{\n text-decoration:none;\n }\n\nchop-heading .chop-headline a:hover{\n text-decoration:underline;\n }\n\nchop-heading .chop-headline p{\n padding:0;\n margin:0;\n text-align:left;\n }\n\nchop-heading .chop-headline.brown-900{\n color:var(--color-brown-900);\n }\n\nchop-heading .clickable-card h1,\n chop-heading .clickable-card h2,\n chop-heading .clickable-card h3,\n chop-heading .clickable-card h4,\n chop-heading .clickable-card h5,\n chop-heading .clickable-card h6,\n chop-heading .clickable-card a{\n color:var(--color-blue-600);\n text-decoration:none;\n word-break:keep-all;\n }\n\nchop-heading .clickable-card h1:hover, chop-heading .clickable-card h2:hover, chop-heading .clickable-card h3:hover, chop-heading .clickable-card h4:hover, chop-heading .clickable-card h5:hover, chop-heading .clickable-card h6:hover, chop-heading .clickable-card a:hover{\n text-decoration:underline;\n cursor:pointer;\n }\n\nchop-heading .clickable-card h1:focus,\n chop-heading .clickable-card h1:focus-visible,\n chop-heading .clickable-card h2:focus,\n chop-heading .clickable-card h2:focus-visible,\n chop-heading .clickable-card h3:focus,\n chop-heading .clickable-card h3:focus-visible,\n chop-heading .clickable-card h4:focus,\n chop-heading .clickable-card h4:focus-visible,\n chop-heading .clickable-card h5:focus,\n chop-heading .clickable-card h5:focus-visible,\n chop-heading .clickable-card h6:focus,\n chop-heading .clickable-card h6:focus-visible,\n chop-heading .clickable-card a:focus,\n chop-heading .clickable-card a:focus-visible{\n outline:2px solid var(--color-blue-600);\n outline-offset:2px;\n border-radius:8px;\n }\n\nchop-heading .clickable-card h1:after, chop-heading .clickable-card h2:after, chop-heading .clickable-card h3:after, chop-heading .clickable-card h4:after, chop-heading .clickable-card h5:after, chop-heading .clickable-card h6:after, chop-heading .clickable-card a:after{\n position:absolute;\n inset:0;\n content:'';\n }\n\nchop-heading .clickable-card.dark-mode h1,\n chop-heading .clickable-card.dark-mode h2,\n chop-heading .clickable-card.dark-mode h3,\n chop-heading .clickable-card.dark-mode h4,\n chop-heading .clickable-card.dark-mode h5,\n chop-heading .clickable-card.dark-mode h6,\n chop-heading .clickable-card.dark-mode a{\n color:var(--color-neutral-100);\n text-decoration:none;\n }\n\nchop-heading .clickable-card.dark-mode h1:hover, chop-heading .clickable-card.dark-mode h2:hover, chop-heading .clickable-card.dark-mode h3:hover, chop-heading .clickable-card.dark-mode h4:hover, chop-heading .clickable-card.dark-mode h5:hover, chop-heading .clickable-card.dark-mode h6:hover, chop-heading .clickable-card.dark-mode a:hover{\n text-decoration:underline;\n cursor:pointer;\n }\n\nchop-heading .clickable-card.dark-mode h1:focus,\n chop-heading .clickable-card.dark-mode h1:focus-visible,\n chop-heading .clickable-card.dark-mode h2:focus,\n chop-heading .clickable-card.dark-mode h2:focus-visible,\n chop-heading .clickable-card.dark-mode h3:focus,\n chop-heading .clickable-card.dark-mode h3:focus-visible,\n chop-heading .clickable-card.dark-mode h4:focus,\n chop-heading .clickable-card.dark-mode h4:focus-visible,\n chop-heading .clickable-card.dark-mode h5:focus,\n chop-heading .clickable-card.dark-mode h5:focus-visible,\n chop-heading .clickable-card.dark-mode h6:focus,\n chop-heading .clickable-card.dark-mode h6:focus-visible,\n chop-heading .clickable-card.dark-mode a:focus,\n chop-heading .clickable-card.dark-mode a:focus-visible{\n outline:2px solid var(--color-neutral-100);\n outline-offset:2px;\n border-radius:8px;\n }\n\nchop-heading .clickable-card.dark-mode h1:after, chop-heading .clickable-card.dark-mode h2:after, chop-heading .clickable-card.dark-mode h3:after, chop-heading .clickable-card.dark-mode h4:after, chop-heading .clickable-card.dark-mode h5:after, chop-heading .clickable-card.dark-mode h6:after, chop-heading .clickable-card.dark-mode a:after{\n position:absolute;\n inset:0;\n content:'';\n }\n\nchop-heading .headline-3xl{\n font-size:var(--fs-4half-xl);\n line-height:var(--headline-3xl-min-line-height);\n font-family:var(--headline-3xl-min-font-family);\n letter-spacing:var(--headline-3xl-min-letter-spacing);\n text-transform:var(--headline-3xl-min-text-case);\n font-weight:var(--headline-3xl-min-font-weight);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-3xl{\n font-size:clamp(2.5rem, 2.5rem + 3.125vw, 4.5rem);\n line-height:var(--headline-3xl-mid-line-height);\n font-family:var(--headline-3xl-mid-font-family);\n letter-spacing:var(--headline-3xl-mid-letter-spacing);\n text-transform:var(--headline-3xl-mid-text-case);\n font-weight:var(--headline-3xl-mid-font-weight)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-3xl{\n line-height:var(--headline-3xl-max-line-height);\n font-family:var(--headline-3xl-max-font-family);\n letter-spacing:var(--headline-3xl-max-letter-spacing);\n text-transform:var(--headline-3xl-max-text-case);\n font-weight:var(--headline-3xl-max-font-weight)\n}\n }\n\nchop-heading .headline-2xl{\n font-size:clamp(2.25rem, 2.25rem + 2.734375vw, 4rem);\n font-weight:var(--headline-2xl-min-font-weight);\n line-height:var(--headline-2xl-min-line-height);\n font-family:var(--headline-2xl-min-font-family);\n letter-spacing:var(--headline-2xl-min-letter-spacing);\n text-transform:var(--headline-2xl-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-2xl{\n font-weight:var(--headline-2xl-mid-font-weight);\n line-height:var(--headline-2xl-mid-line-height);\n font-family:var(--headline-2xl-mid-font-family);\n letter-spacing:var(--headline-2xl-mid-letter-spacing);\n text-transform:var(--headline-2xl-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-2xl{\n font-weight:var(--headline-2xl-max-font-weight);\n line-height:var(--headline-2xl-max-line-height);\n font-family:var(--headline-2xl-max-font-family);\n letter-spacing:var(--headline-2xl-max-letter-spacing);\n text-transform:var(--headline-2xl-max-text-case)\n}\n }\n\nchop-heading .headline-xl{\n font-size:clamp(2rem, 2rem + 2.34375vw, 3.5rem);\n font-weight:var(--headline-xl-min-font-weight);\n line-height:var(--headline-xl-min-line-height);\n font-family:var(--headline-xl-min-font-family);\n letter-spacing:var(--headline-xl-min-letter-spacing);\n text-transform:var(--headline-xl-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-xl{\n font-weight:var(--headline-xl-mid-font-weight);\n line-height:var(--headline-xl-mid-line-height);\n font-family:var(--headline-xl-mid-font-family);\n letter-spacing:var(--headline-xl-mid-letter-spacing);\n text-transform:var(--headline-xl-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-xl{\n font-weight:var(--headline-xl-max-font-weight);\n line-height:var(--headline-xl-max-line-height);\n font-family:var(--headline-xl-max-font-family);\n letter-spacing:var(--headline-xl-max-letter-spacing);\n text-transform:var(--headline-xl-max-text-case)\n}\n }\n\nchop-heading .headline-lg{\n font-weight:var(--headline-lg-min-font-weight);\n font-size:clamp(1.75rem, 1.75rem + 1.5625vw, 2.75rem);\n font-size:clamp(1.625rem, 1.625rem + 1.3672vw, 2.5rem);\n line-height:var(--headline-lg-min-line-height);\n font-family:var(--headline-lg-min-font-family);\n letter-spacing:var(--headline-lg-min-letter-spacing);\n text-transform:var(--headline-lg-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-lg{\n font-weight:var(--headline-lg-mid-font-weight);\n line-height:var(--headline-lg-mid-line-height);\n font-family:var(--headline-lg-mid-font-family);\n letter-spacing:var(--headline-lg-mid-letter-spacing);\n text-transform:var(--headline-lg-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-lg{\n font-weight:var(--headline-lg-max-font-weight);\n line-height:var(--headline-lg-max-line-height);\n font-family:var(--headline-lg-max-font-family);\n letter-spacing:var(--headline-lg-max-letter-spacing);\n text-transform:var(--headline-lg-max-text-case)\n}\n }\n\nchop-heading .headline-md{\n font-size:clamp(1.5rem, 1.5rem + 1.171875vw, 2.25rem);\n line-height:var(--headline-md-min-line-height);\n font-family:var(--headline-md-min-font-family);\n font-weight:var(--headline-md-min-font-weight);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-md{\n font-weight:var(--headline-md-mid-font-weight);\n line-height:var(--headline-md-mid-line-height);\n font-family:var(--headline-md-mid-font-family);\n letter-spacing:var(--headline-md-mid-letter-spacing);\n text-transform:var(--headline-md-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-md{\n font-weight:var(--headline-md-max-font-weight);\n line-height:var(--headline-md-max-line-height);\n font-family:var(--headline-md-max-font-family);\n letter-spacing:var(--headline-md-max-letter-spacing);\n text-transform:var(--headline-md-max-text-case)\n}\n }\n\nchop-heading .headline-sm{\n font-weight:var(--headline-sm-min-font-weight);\n font-size:clamp(1.25rem, 1.25rem + 0.78125vw, 1.75rem);\n line-height:var(--headline-sm-min-line-height);\n font-family:var(--headline-sm-min-font-family);\n letter-spacing:var(--headline-sm-min-letter-spacing);\n text-transform:var(--headline-sm-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-sm{\n font-weight:var(--headline-sm-mid-font-weight);\n line-height:var(--headline-md-mid-line-height);\n font-family:var(--headline-md-mid-font-family);\n letter-spacing:var(--headline-md-mid-letter-spacing);\n text-transform:var(--headline-md-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-sm{\n font-weight:var(--headline-sm-max-font-weight);\n line-height:var(--headline-sm-max-line-height);\n font-family:var(--headline-sm-max-font-family);\n letter-spacing:var(--headline-sm-max-letter-spacing);\n text-transform:var(--headline-sm-max-text-case)\n}\n }\n\nchop-heading .headline-xs{\n font-size:clamp(1.125rem, 1.125rem + 0.5859375vw, 1.5rem);\n font-weight:var(--headline-xs-min-font-weight);\n line-height:var(--headline-xs-min-line-height);\n font-family:var(--headline-xs-min-font-family);\n letter-spacing:var(--headline-xs-min-letter-spacing);\n text-transform:var(--headline-xs-min-text-case);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-xs{\n font-weight:var(--headline-xs-mid-font-weight);\n line-height:var(--headline-xs-mid-line-height);\n font-family:var(--headline-xs-mid-font-family);\n letter-spacing:var(--headline-xs-mid-letter-spacing);\n text-transform:var(--headline-xs-mid-text-case)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-xs{\n font-weight:var(--headline-xs-max-font-weight);\n line-height:var(--headline-xs-max-line-height);\n font-family:var(--headline-xs-max-font-family);\n letter-spacing:var(--headline-xs-max-letter-spacing);\n text-transform:var(--headline-xs-max-text-case)\n}\n }\n\nchop-heading .headline-eyebrow{\n font-size:clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);\n font-weight:700;\n letter-spacing:3px;\n text-transform:uppercase;\n line-height:var(--headline-eyebrow-min-line-height);\n font-family:var(--headline-eyebrow-min-font-family);\n}\n\n@media (min-width: 860px){\n\nchop-heading .headline-eyebrow{\n line-height:var(--headline-eyebrow-mid-line-height);\n font-family:var(--headline-eyebrow-mid-font-family)\n}\n }\n\n@media (min-width: 1100px){\n\nchop-heading .headline-eyebrow{\n line-height:var(--headline-eyebrow-max-line-height);\n font-family:var(--headline-eyebrow-max-font-family)\n}\n }\n\n@media (min-width: 860px){\n chop-heading .less-margin-bottom--xs{\n margin-bottom:-0.5rem;\n }\n chop-heading .less-margin-bottom--sm{\n margin-bottom:-1rem;\n }\n chop-heading .less-margin-bottom--md{\n margin-bottom:-2rem;\n }\n chop-heading .less-margin-bottom--lg{\n margin-bottom:-3rem;\n }\n chop-heading .less-margin-bottom--xl{\n margin-bottom:-4rem;\n }\n chop-heading .less-margin-bottom--2xl{\n margin-bottom:-5rem;\n }\n chop-heading .less-margin-bottom--3xl{\n margin-bottom:-6rem;\n }\n}\n\nchop-grid.mobile.overlap{\n padding-bottom:16rem;\n}\n\n.card-wrapper.mobile{\n color:var(--color-brown-900);\n border-radius:6px;\n display:grid;\n grid-template-columns:1fr;\n max-height:100%;\n width:100%;\n}\n\n.card-wrapper.mobile .has-slotted-image{\n min-height:788px;\n grid-template-rows:2fr 4fr;\n }\n\n.card-wrapper.mobile .content-wrapper{\n position:relative;\n gap:var(--spacing-08);\n padding:var(--spacing-24) var(--spacing-10) var(--spacing-12) 35%;\n }\n\n.card-wrapper.mobile .content-wrapper .inner-content{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-06);\n }\n\n.card-wrapper.mobile .content-wrapper .cta-wrappers{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-03);\n }\n\n.card-wrapper.mobile .image-wrapper{\n grid-area:1 / 1 / 3 / 2;\n position:relative;\n overflow:hidden;\n width:100%;\n height:100%;\n object-fit:cover;\n max-width:none;\n left:auto;\n }\n\n.card-wrapper.mobile .heading-wrapper{\n display:flex;\n flex-direction:row;\n align-items:center;\n }\n\n.card-wrapper.mobile .content-wrapper{\n grid-area:3 / 1 / 5 / 2;\n border-radius:0 0 6px 6px;\n padding:var(--spacing-08) var(--spacing-05) var(--spacing-08) var(--spacing-05);\n justify-content:flex-start;\n background:none;\n }\n\n.card-wrapper.mobile .icon-heading-wrapper{\n display:flex;\n width:100%;\n justify-content:space-between;\n align-items:center;\n gap:var(--spacing-08);\n position:relative;\n }\n\n.card-wrapper.mobile .icon-pink{\n color:var(--color-pink-800);\n }\n\n.card-wrapper{\n border-radius:6px;\n display:flex;\n}\n\n.card-wrapper .image-wrapper{\n border-radius:0 6px 6px 0;\n overflow:hidden;\n z-index:0;\n width:50vw;\n height:100%;\n object-fit:cover;\n position:absolute;\n left:50%;\n }\n\n.card-wrapper .image-wrapper.right{\n left:60%;\n }\n\n.image-wrapper-extra{\n left:50%;\n max-width:50%;\n}\n\n.mobile .card-content{\n display:flex;\n max-width:100%;\n padding-left:0;\n}\n\n.card-content{\n display:grid;\n grid-template-columns:120px auto;\n grid-template-rows:120px auto;\n max-width:45%;\n}\n\n@media (max-width: 1328px){\n\n.card-content{\n padding-left:32px;\n max-width:50%\n}\n }\n\n.card-content .icon-wrapper{\n grid-area:1 / 1 / 1 / 1;\n display:flex;\n align-items:flex-start;\n padding-top:var(--spacing-48);\n position:relative;\n z-index:1;\n }\n\n.card-content .icon-pink{\n color:var(--color-pink-800);\n }\n\n.content-wrapper{\n z-index:1;\n grid-area:2 / 1 / 3 / 3;\n border-radius:6px 0px 0px 6px;\n display:flex;\n align-items:flex-start;\n justify-content:center;\n flex-direction:column;\n gap:var(--spacing-06);\n padding:var(--spacing-48) var(--spacing-10) var(--spacing-56) 0;\n}\n\n.content-wrapper .inner-content{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-06);\n }\n\n.content-wrapper .icon-wrapper{\n grid-area:1 / 1 / 1 / 1;\n }\n\n.content-wrapper .cta-wrappers{\n display:flex;\n flex-direction:column;\n gap:var(--spacing-08);\n }\n\n.content-wrapper .description-wrapper{\n font-family:'Georgia', 'Arial', 'serif';\n font-size:var(--fs-lg);\n font-weight:400;\n line-height:30px;\n }\n\n@media (min-width: 1100px){\n\n.content-wrapper .description-wrapper{\n font-size:var(--fs-xl)\n }\n }\n\n.content-wrapper .cta-link-1-wrapper{\n display:flex;\n align-items:center;\n justify-content:flex-start;\n }\n\n.content-wrapper .image-attribution{\n display:inline-flex;\n gap:10px;\n font-family:var(--ff-display);\n font-size:var(--spacing-04);\n font-weight:var(--fw-normal);\n line-height:var(--spacing-06);\n margin-top:var(--spacing-10);\n }\n\n.content-wrapper .image-attribution .author-dash{\n width:32px;\n height:1px;\n top:50%;\n position:relative;\n background:var(--color-brown-900);\n }\n\n.content-wrapper .image-attribution .author-dash.white{\n background:var(--color-neutral-100);\n }\n\n.mobile.full-width-image.card-wrapper .content-wrapper{\n grid-area:3 / 1 / 4 / 3;\n }\n\n.mobile.full-width-image.card-wrapper .image-wrapper{\n grid-area:1 / 1 / 3 / 2;\n }\n\n.mobile.full-width-image.card-wrapper.background-color-light_blue\n .content-wrapper{\n color:var(--color-neutral-100);\n}\n\n.full-width-image.card-wrapper .content-wrapper{\n background-color:transparent;\n}\n\n.full-width-image.card-wrapper.background-color-light_blue .content-wrapper{\n color:var(--color-brown-900);\n}\n\n.full-width-image.card-wrapper .image-wrapper{\n z-index:0;\n position:absolute;\n left:-50%;\n transform:translateX(50%);\n width:100%;\n max-width:none;\n}\n\n.card-wrapper.background-color-dark_pink{\n background-color:var(--color-pink-900);\n color:var(--color-neutral-100);\n}\n\n.card-wrapper.background-color-beige{\n background-color:var(--color-brown-200);\n color:var(--color-brown-900);\n}\n\n.full-screen-image{\n width:100%;\n}\n\n.text-overlay{\n position:absolute;\n top:50%;\n left:50%;\n transform:translate(-50%, -50%);\n color:white;\n font-size:24px;\n text-align:center;\n}\n\n.text-padding{\n padding-left:var(--spacing-20);\n}\n`;","import { CSSResultGroup, TemplateResult, html, nothing } from 'lit';\nimport { OutlineElement } from '@phase2/outline-core';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { SlotManager } from '../../controllers/slot-manager';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport { isInType } from '../../../utilities/isInType';\nimport { icons } from '../chop-icon/libraries/library.system';\nimport { contentAlign, ContentAlign } from '../chop-grid/chop-grid';\nimport componentStyles from './chop-fullscreen-cta.css.lit';\nimport '../chop-grid/chop-grid';\nimport '../chop-column/chop-column';\nimport '../chop-heading/chop-heading';\nimport '../chop-woven-svgs/chop-woven-svgs';\nimport '../chop-icon/chop-icon';\n\n/**\n * The basic card component\n * @element fullscreen-cta\n *\n * @property iconName - The name of the featured icon\n * @property contentAlign - The alignment of the content, 3-9 or 9-3\n * @property color - The background color, dark pink or beige\n * @property customImage - Is there a custom image, and no background color on the content wrapper\n * @property overlap - Should the image be overlapped by the content underneath i.e. the footer\n *\n * @slot image\n * @slot heading\n * @slot description\n * @slot cta-link-1\n * @slot image attribution\n */\n\nexport enum fullscreenBackgroundColors {\n 'Beige' = 'beige',\n 'Dark Pink' = 'dark_pink',\n}\n\nexport type FullscreenBackgroundColor = `${fullscreenBackgroundColors}`;\n\n@customElement('chop-fullscreen-cta')\nexport class CHOPFullscreenCTA extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n resizeController = new ResizeController(this);\n\n screenSizes = 'mobile';\n isMobile = this.resizeController.currentBreakpointRange <= 3;\n\n @property({ type: String, reflect: true, attribute: 'icon-name' })\n iconName?: keyof typeof icons;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'content-align',\n converter: value => {\n return isInType(value, Object.values(contentAlign), 'ContentAlign')\n ? value\n : '12';\n },\n })\n contentAlign: ContentAlign;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'color',\n converter: value => {\n return isInType(\n value,\n Object.values(fullscreenBackgroundColors),\n 'FullscreenBackgroundColor'\n )\n ? value\n : 'dark_pink';\n },\n })\n color: FullscreenBackgroundColor;\n\n @property({ type: Boolean, reflect: true, attribute: 'full-width-image' })\n fullWidthImage: boolean;\n\n @property({ type: Boolean, reflect: true, attribute: 'overlap' })\n overlap: boolean;\n\n /**\n * Handles the cases where the component has no slotted image.\n */\n @state() hasSlottedImage = false;\n\n isReversedColor() {\n let isReversed = false;\n const isSpecificColor = !['beige'].includes(this.color);\n if (isSpecificColor) {\n isReversed = true;\n }\n return isReversed;\n }\n\n render(): TemplateResult {\n if (this.slots.exist('image')) {\n this.hasSlottedImage = true;\n }\n this.isMobile = this.resizeController.currentBreakpointRange <= 3;\n this.screenSizes =\n this.resizeController.currentBreakpointRange <= 3 ? 'mobile' : 'desktop';\n\n const gridClasses = {\n mobile: this.isMobile,\n overlap: this.overlap,\n };\n\n const classes = {\n 'card-wrapper': true,\n [`background-color-${this.color}`]: true,\n 'mobile': this.isMobile,\n 'full-width-image': this.fullWidthImage && !this.isMobile,\n 'has-slotted-image': this.hasSlottedImage,\n };\n\n const imgClasses = {\n 'image-wrapper': true,\n 'right': this.contentAlign === '3-9',\n };\n\n const content = html`
\n
\n ${this.iconName && !this.isMobile ? this.iconTemplate() : nothing}\n
\n
\n ${this.headingTemplate()}\n ${this.iconName && this.isMobile ? this.iconTemplate() : nothing}\n
\n
\n ${this.slotTemplate('description')} ${this.slotTemplate('author')}\n
${this.slotTemplate('cta-link-1')}
\n ${this.imageAttribution()}\n
\n
\n
\n ${this.hasSlottedImage\n ? html`
\n \n
`\n : nothing}\n
`;\n\n return html`\n \n ${this.contentAlign === '3-9' ? this.asideTemplate() : nothing}\n \n ${content}\n \n ${this.contentAlign === '9-3' ? this.asideTemplate() : nothing}\n \n \n `;\n }\n\n slotTemplate(name = '') {\n if (!this.slots.exist(name)) {\n return nothing;\n } else {\n return html`\n
\n \n
\n `;\n }\n }\n\n headingTemplate() {\n if (this.slots.exist('heading')) {\n const levelSize = this.isMobile ? 'lg' : '2xl';\n\n return html`\n \n \n \n `;\n } else {\n return nothing;\n }\n }\n imageAttribution() {\n // print the image attribution info\n if (this.slots.exist('image-attribution')) {\n const isReversed = this.isReversedColor();\n const dashClass = isReversed ? 'white' : 'brown';\n\n return html`
\n \n \n
`;\n } else {\n return nothing;\n }\n }\n\n iconTemplate() {\n return html`\n \n \n \n `;\n }\n\n asideTemplate() {\n return html`\n \n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-fullscreen-cta': CHOPFullscreenCTA;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n.hamburger-menu-wrapper{\n display:flex;\n flex-direction:column;\n justify-content:center;\n align-items:flex-start;\n}\n\nbutton[aria-expanded='false'] + .hamburger-menu{\n display:none;\n}\n\n.show-hamburger-menu{\n display:flex;\n position:relative;\n justify-content:center;\n align-items:center;\n font-family:var(--ff-display);\n color:#0274b5;\n color:var(--color-blue-700, #0274b5);\n font-weight:var(--fw-semibold);\n line-height:var(--line-height-sm);\n font-size:var(--fs-lg);\n gap:0.25rem;\n background:transparent;\n border:none;\n padding:0;\n height:104px;\n border-bottom:solid 6px transparent;\n z-index:30;\n width:40px;\n}\n\n.show-hamburger-menu:hover{\n border-bottom:solid 6px var(--color-pink-800);\n cursor:pointer;\n }\n\n.show-hamburger-menu[aria-expanded='true']:hover{\n border-bottom:solid 6px transparent;\n cursor:pointer;\n }\n\n.show-hamburger-menu[aria-expanded='true'] chop-icon:hover{\n color:var(--color-pink-800);\n }\n\n.show-hamburger-menu .close-button-text{\n position:absolute;\n left:calc(100% - 4px);\n width:max-content;\n }\n\n.hamburger-menu{\n background-color:var(--color-neutral-100);\n position:absolute;\n z-index:20;\n top:0;\n height:100%;\n width:360px;\n}\n\n.hamburger-menu--content{\n box-shadow:0px 5px 10px 0px var(--color-brown-200);\n padding-top:44px;\n}\n`;","import { CSSResultGroup, TemplateResult, html } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { OutlineElement } from '@phase2/outline-core';\nimport componentStyles from './chop-hamburger-menu.css.lit';\nimport '../chop-icon/chop-icon';\n\n/**\n * The CHOP Hamburger Menu component\n * @element chop-hamburger-menu\n *\n * @slot - A default slot\n */\n@customElement('chop-hamburger-menu')\nexport class CHOPHamburgerMenu extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n\n @state() isOpen = false;\n\n observer = new MutationObserver(this.handleMainMenuMutation.bind(this));\n\n // Add a property to store the bound event listener function\n private boundFocusListener: (event: Event) => void;\n\n connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('click', this.handleDocumentClick.bind(this));\n // Initialize the boundFocusListener with the event listener function\n // Ensure the function is bound to 'this' to maintain context\n this.boundFocusListener = this.setupFocusListeners.bind(this);\n // Add the event listener\n this.addEventListener('keydown', this.boundFocusListener);\n }\n\n disconnectedCallback(): void {\n // Remove the event listener\n this.removeEventListener('keydown', this.boundFocusListener);\n this.observer.disconnect();\n document.removeEventListener('click', this.handleDocumentClick.bind(this));\n super.disconnectedCallback();\n }\n\n firstUpdated(changedProperties: Map) {\n super.firstUpdated(changedProperties);\n // Setup a listener on the main menu, when opened hide the hamburger menu.\n setTimeout(() => {\n const showMainMenu = document.querySelectorAll(\n '.primary-nav__menu--level-1'\n );\n if (showMainMenu) {\n showMainMenu.forEach(item => {\n this.observer.observe(item, {\n attributes: true, // this is to watch for attribute changes.\n });\n });\n }\n this.setupFocusListeners();\n }, 0);\n }\n\n handleMainMenuMutation(mutations: MutationRecord[]) {\n // 'This' is attached to the first mutation if there are more than one.\n mutations.forEach(mutation => {\n const target = mutation.target as Element;\n const isMainOpen =\n mutation.attributeName == 'class' && target.classList.contains('active')\n ? true\n : false;\n if (isMainOpen) {\n this.isOpen = false;\n }\n });\n }\n\n handleDocumentClick(event: MouseEvent) {\n const inside = event.composedPath().includes(this);\n if (!inside) {\n this.isOpen = false;\n }\n }\n\n setupFocusListeners(): void {\n this.addEventListener('keydown', event => {\n const keyboardEvent = event as KeyboardEvent;\n if (keyboardEvent.key === 'Tab') {\n // Find all focusable elements within the menu\n const focusableElements = this.querySelectorAll(\n 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n );\n const lastFocusableElement =\n focusableElements[focusableElements.length - 1];\n\n // Closing the menu when the last focusable element is tabbed forward\n if (\n !keyboardEvent.shiftKey &&\n document.activeElement === lastFocusableElement\n ) {\n this.isOpen = false;\n }\n\n // Detecting Shift+Tab.\n if (keyboardEvent.shiftKey && document.activeElement === this) {\n this.isOpen = false;\n }\n }\n });\n }\n\n render(): TemplateResult {\n return html`\n
\n \n ${this.isOpen\n ? html`\n Close menu`\n : html``}\n \n \n
\n \n \n \n
\n
\n \n `;\n }\n\n toggleMenu(): void {\n this.isOpen = !this.isOpen;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-hamburger-menu': CHOPHamburgerMenu;\n }\n}\n","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\nheader{\n --logo-color--light-mode:var(--core-blue);\n --text-color--light-mode:var(--black-800);\n --link-hover-color--light-mode:var(--medium-blue);\n --chevron-color--light-mode:var(--medium-blue);\n}\n\nheader:has(.extra-menu-toggle[aria-expanded='true']){\n --logo-color--dark-mode:var(--white);\n --text-color--dark-mode:var(--white);\n --link-hover-color--dark-mode:var(--white);\n --chevron-color--light-mode:var(--white);\n}\n\n.logo{\n max-width:180px;\n color:var(--logo-color--light-mode);\n color:var(--logo-color--dark-mode, var(--logo-color--light-mode));\n}\n\n.logo svg{\n display:flex;\n width:100%;\n }\n\n.mobile-login{\n display:flex;\n flex-direction:column;\n align-items:center;\n color:var(--black-800);\n font-size:var(--fs-sm);\n line-height:var(--lh-sm);\n text-decoration:none;\n}\n\n.header-wrapper{\n display:flex;\n flex-wrap:wrap;\n gap:2rem;\n}\n\n.main-menu-wrapper{\n display:flex;\n position:relative;\n align-items:center;\n margin-inline-start:auto;\n}\n\n.extra-menu-toggle{\n display:flex;\n align-items:center;\n align-self:start;\n margin-inline-start:2rem;\n margin-block-start:4px;\n padding:0;\n border:none;\n background:none;\n color:var(--medium-blue);\n font-weight:var(--fw-semibold);\n font-size:var(--fs-base);\n cursor:pointer;\n}\n\n.extra-menu-toggle[aria-expanded='true']{\n color:var(--white);\n }\n\n.extra-menu-toggle--icon{\n padding-inline-start:0.5rem;\n}\n\n.extra-menu--close{\n display:none;\n}\n\n.close-search-button{\n display:flex;\n position:absolute;\n top:0;\n right:0;\n align-items:center;\n justify-content:center;\n width:3rem;\n height:3rem;\n border:none;\n outline-offset:-2px;\n background:none;\n cursor:pointer;\n}\n\n.open-search-button{\n display:flex;\n flex-direction:column;\n align-items:center;\n padding:0;\n border:none;\n background:none;\n color:var(--chevron-color--light-mode);\n color:var(--chevron-color--dark-mode, var(--chevron-color--light-mode));\n cursor:pointer;\n}\n\n.mobile .open-search-button{\n width:3.5rem;\n }\n\nheader:not(.mobile) .open-search-button{\n align-self:start;\n margin-block-start:4px;\n }\n\n.search-dropdown{\n padding-block-end:1rem;\n}\n\n[aria-expanded='false'] + .search-wrapper{\n display:none;\n}\n\n.search-wrapper{\n display:flex;\n flex-direction:column;\n gap:1.5rem;\n}\n\nheader:not(.mobile) .search-wrapper{\n z-index:1;\n position:absolute;\n top:2.5rem;\n right:0px;\n padding:1rem;\n border-top:2px solid var(--dark-green);\n border-radius:0px 0px 16px 16px;\n background-color:var(--black-100);\n box-shadow:3px 3px 11px rgba(0, 0, 0, 0.05), 8px 10px 26px rgba(0, 0, 0, 0.19);\n }\n\n.search-wrapper .input-wrapper{\n display:flex;\n align-items:center;\n justify-content:space-between;\n padding:0.5rem 0.2rem;\n border:1px solid var(--black-700);\n border-radius:41px;\n background-color:white;\n }\n\n.search-wrapper input[type='search']{\n max-width:60vw;\n margin-inline-start:1rem;\n border:none;\n outline-offset:3px;\n background-color:transparent;\n font-size:var(--fs-lg);\n }\n\n.search-wrapper button[type='submit']{\n display:flex;\n place-content:center;\n place-items:center;\n width:3rem;\n height:3rem;\n margin-inline:1rem 5px;\n border-radius:50%;\n outline-style:dashed;\n outline-width:2px;\n outline-offset:2px;\n background-color:var(--dark-green);\n color:white;\n }\n\n.search-wrapper button[type='submit']:focus{\n outline-color:var(--medium-blue);\n }\n\n.search-wrapper ::placeholder{\n color:var(--black-700) !important;\n }\n\n.search-suggestions{\n display:flex;\n column-gap:4.5rem;\n row-gap:1.5rem;\n flex-wrap:wrap;\n justify-content:center;\n}\n\n.search-suggestions ul{\n display:flex;\n flex-direction:column;\n margin:0;\n padding:0;\n gap:1rem;\n list-style-type:none;\n }\n\n.search-suggestions .suggestion-group-label{\n font-weight:var(--fw-bold);\n text-transform:uppercase;\n }\n\n.search-suggestions .suggestion-link{\n display:flex;\n gap:0.5rem;\n color:var(--medium-blue);\n text-decoration:none;\n }\n\n.search-suggestions .suggestion-link:hover{\n text-decoration:underline;\n }\n\n.mobile .search-suggestions{\n justify-content:flex-start;\n color:white;\n }\n\n.mobile .search-suggestions li:first-child{\n font-size:var(--fs-base);\n }\n\n.mobile .search-suggestions .suggestion-link{\n margin-inline-start:1rem;\n color:white;\n }\n\n.sticky-header{\n display:flex;\n z-index:500;\n position:fixed;\n bottom:0px;\n align-items:center;\n justify-content:center;\n width:100%;\n padding-block:0.3rem 0.15rem;\n gap:1rem;\n gap:clamp(0.5rem, -3rem + 20vw, 3rem);\n border-top:1px solid var(--black-450);\n background-color:white;\n}\n\n.menu-dropdown{\n display:flex;\n flex-direction:column;\n align-items:center;\n width:3rem;\n padding:0;\n border:none;\n background-color:transparent;\n font-size:1rem;\n cursor:pointer;\n}\n\n.sticky-mobile-item{\n display:flex;\n flex-direction:column;\n align-items:center;\n color:var(--black-800);\n font-size:1rem;\n line-height:1.5;\n text-decoration:none;\n}\n\n.top-header{\n display:flex;\n place-content:space-between;\n place-items:center;\n height:55px;\n margin-bottom:0.5rem;\n padding:1.125rem 0;\n gap:1rem;\n border-bottom:1px solid var(--black-300);\n background-color:var(--white);\n}\n\n.sliding-search,\n.sliding-header{\n display:grid;\n visibility:hidden;\n z-index:500;\n position:fixed;\n grid-template-rows:auto 1fr;\n height:calc(100% - 50px);\n inset:0;\n overflow:auto;\n transform:translateX(100%);\n background:var(--dark-blue);\n opacity:0;\n}\n\n@media (prefers-reduced-motion: no-preference){\n\n.sliding-search,\n.sliding-header{\n transition:transform 0.3s 0s, opacity 0s 0.3s, visibility 0s 0.3s\n}\n }\n\n.is-active{\n visibility:visible;\n transform:translateX(0);\n opacity:1;\n}\n\n@media (prefers-reduced-motion: no-preference){\n\n.is-active{\n transition:transform 0.3s 0s\n}\n }\n\n.horizontal-divider{\n width:100%;\n margin-block:var(--space-s);\n border-color:var(--light-blue);\n}\n`;","\nimport { css } from 'lit';\nexport default css`\n/* Apply component specific CSS */\n`;","import { OutlineElement } from '@phase2/outline-core';\nimport { CSSResultGroup, html } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport componentStyles from './chop-menu.css.lit';\nimport { ResizeController } from '../../controllers/resize-controller';\nimport '../chop-icon/chop-icon';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * The CHOP Menu Component\n *\n * This component is responsible for rendering the CHOP menu. It includes features such as\n * mobile and desktop views, submenu expansion, focus trapping within active submenu,\n * and dynamic class assignment based on viewport size. It also provides functionality\n * for closing the menu and submenus, and for handling focus when the menu or submenus\n * lose focus. Event listeners are added for various user interactions like click and scroll.\n *\n * @element chop-menu\n * @slot menu - Slot for injecting the menu content\n * @todo Add a debounce function from the resize controller to the peeking function\n * @todo Debug and fix the 'peeking' and 'handleFocus' functions\n *\n */\n@customElement('chop-menu')\nexport class CHOPMenu extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n resizeController = new ResizeController(this, {\n containerQuery: false,\n });\n isMobile: boolean;\n isDesktop: boolean;\n\n @state() isSubMenuExpanded = false;\n\n //Attribute reset when reset is called it calls the backtomain function (starts as false, function sets to true\n // returns to false)\n\n eventListeners: {\n target: EventTarget;\n type: string;\n listener: EventListenerOrEventListenerObject;\n }[] = [];\n\n observer = new MutationObserver(this.handleHamburgerMutation.bind(this));\n\n constructor() {\n super(); // Call the parent class constructor\n // Bind the handleFocus method to the current instance\n this.handleFocus = this.handleFocus.bind(this);\n }\n\n addEventListenerHelper(\n target: EventTarget,\n type: string,\n listener: EventListener\n ) {\n target.addEventListener(type, listener);\n this.eventListeners.push({ target, type, listener });\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n const expandablePrimaryNavMenuItem = this.querySelectorAll(\n '.primary-nav__button-toggle'\n );\n expandablePrimaryNavMenuItem.forEach(item => {\n this.addEventListenerHelper(item, 'click', this.toggleSubMenu.bind(this));\n });\n\n const closeButtonMain = document.querySelectorAll('.close-button');\n closeButtonMain.forEach(button => {\n this.addEventListenerHelper(button, 'click', this.closeMain.bind(this));\n });\n\n this.addEventListenerHelper(this, 'scroll', this.peeking.bind(this));\n\n document.addEventListener('click', this.handleDocumentClick.bind(this));\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.observer.disconnect();\n\n document.removeEventListener('click', this.handleDocumentClick.bind(this));\n\n this.eventListeners.forEach(({ target, type, listener }) => {\n target.removeEventListener(type, listener);\n });\n\n this.eventListeners = [];\n }\n\n handleHamburgerMutation(mutations: MutationRecord[]) {\n // 'This' is attached to the first mutation if there are more than one.\n const mutation = mutations[0];\n const target = mutation.target as Element;\n const isHamburgerOpen =\n mutation.attributeName == 'aria-expanded' &&\n target.attributes.getNamedItem('aria-expanded')?.nodeValue === 'true'\n ? true\n : false;\n\n if (isHamburgerOpen) {\n this.closeMain();\n }\n }\n\n handleDocumentClick(event: MouseEvent) {\n const inside = event.composedPath().includes(this);\n if (!inside) {\n this.closeMain();\n }\n }\n\n firstUpdated(): void {\n this.peeking();\n this.hideAllSubMenus();\n\n // Setup a listener on the hamburger menu, when opened hide the main menu.\n setTimeout(() => {\n const showHamburgerMenu = document\n .querySelector('chop-hamburger-menu')\n ?.shadowRoot?.querySelector('.show-hamburger-menu');\n if (showHamburgerMenu) {\n this.observer.observe(showHamburgerMenu, {\n attributes: true, // this is to watch for attribute changes.\n });\n }\n }, 0);\n }\n\n //This currently stopped working and needs to be debugged\n peeking(): void {\n let prevScrollPos: number = window.scrollY;\n const primaryNav = document.querySelector('.primary-nav__menu'); // Select the primarynav element\n\n if (primaryNav) {\n // Check if primaryNav exists\n primaryNav.addEventListener('scroll', () => {\n const currentScrollPos: number = window.scrollY;\n\n if (prevScrollPos > currentScrollPos) {\n this.classList.add('show');\n } else {\n this.classList.remove('show');\n }\n\n prevScrollPos = currentScrollPos;\n });\n }\n }\n\n handleFocus(e: Event) {\n const keyboardEvent = e as KeyboardEvent;\n if (keyboardEvent.key !== 'Tab') return;\n\n const target = e.target as HTMLElement;\n const activeButton =\n (target.closest('.primary-nav__button-toggle') as HTMLElement) || target;\n if (!activeButton) return;\n\n const subMenuId = activeButton.id.replace(\n 'top-row-button-',\n 'menu-item-child-'\n );\n const subMenuElement = this.querySelector(`#${subMenuId}`) as HTMLElement;\n if (!subMenuElement || subMenuElement.hidden) return;\n\n const focusableElements = Array.from(\n subMenuElement.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n )\n );\n if (focusableElements.length === 0) return;\n\n // Prevents double focus shift\n e.preventDefault();\n\n // Handle Shift+Tab on the activeButton to move focus to its previous sibling\n if (keyboardEvent.shiftKey && target === activeButton) {\n const prevTopItem =\n activeButton.parentElement?.previousElementSibling?.querySelector(\n 'button, a'\n ) as HTMLElement;\n if (prevTopItem) {\n prevTopItem.focus();\n this.closeMain();\n return; // Early return to avoid focusing firstFocusableElement\n }\n }\n\n const firstFocusableElement = focusableElements[0] as HTMLElement;\n // Focus the first focusable element when Tab is pressed without Shift\n if (!keyboardEvent.shiftKey && target === activeButton) {\n firstFocusableElement.focus();\n }\n\n firstFocusableElement.addEventListener('keydown', (e: KeyboardEvent) => {\n if ((e.shiftKey && e.key === 'Tab') || e.key === ' ') {\n activeButton.focus();\n this.closeMain();\n // Prevents double focus shift\n e.preventDefault();\n }\n });\n\n const nextTopItem =\n activeButton.parentElement?.nextElementSibling?.querySelector(\n 'button, a'\n ) as HTMLElement;\n const lastFocusableElement = focusableElements[\n focusableElements.length - 1\n ] as HTMLElement;\n // Handle Tab on the last focusable element to move focus to nextTopItem or close menu\n if (nextTopItem) {\n lastFocusableElement.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.key === 'Tab' && !e.shiftKey) {\n nextTopItem.focus();\n this.closeMain();\n // Prevents double focus shift\n e.preventDefault();\n }\n });\n }\n }\n\n closeMain() {\n // Reset the menu\n this.hideAllSubMenus();\n // When the menus close, remove the focus keydown event listeners to allow normal tabbing.\n const allSubMenuToggles = this.querySelectorAll(\n '.primary-nav__button-toggle'\n );\n allSubMenuToggles.forEach((element: Element) => {\n const button = element as HTMLElement; // Type casting Element to HTMLElement\n button.removeEventListener('keydown', this.handleFocus);\n });\n this.isSubMenuExpanded = false;\n this.isMobile = false;\n // Reset all buttons\n const allButtons = this.querySelectorAll('button');\n allButtons.forEach((button: Node) => {\n const buttonElement = button as HTMLElement;\n // Remove .active class from the parent list item of the button with aria-expanded attribute\n const listItem = buttonElement.parentElement;\n if (listItem instanceof HTMLLIElement) {\n listItem.classList.remove('active');\n }\n buttonElement.setAttribute('aria-expanded', 'false');\n });\n }\n\n hideAllSubMenus(): void {\n const allSubMenus = this.querySelectorAll(\n '.primary-nav__menu-item--has-children'\n );\n allSubMenus.forEach((subMenu: Node) => {\n const subMenuElement = subMenu as HTMLElement;\n subMenuElement.style.display = 'none';\n subMenuElement.setAttribute('aria-expanded', 'true');\n const correspondingButton = this.querySelector(\n `#${subMenuElement.id.replace('submenu', 'button')}`\n );\n if (correspondingButton) {\n correspondingButton.setAttribute('aria-expanded', 'false');\n }\n });\n }\n\n toggleSubMenu(e: Event) {\n const target = e.currentTarget as HTMLElement;\n const button =\n target.tagName === 'BUTTON'\n ? target\n : (target.querySelector('.primary-nav__button-toggle') as HTMLElement);\n const buttonId = button.id;\n\n // Loop through all submenus\n this.querySelectorAll('.primary-nav__menu-item--has-children').forEach(\n (subMenu: Node) => {\n const subMenuElement = subMenu as HTMLElement;\n const subMenuIdParts = subMenuElement.id.replace(\n 'menu-item-child-',\n 'top-row-button-'\n );\n\n // If the submenu id matches the button id\n if (subMenuIdParts === buttonId) {\n const listItem = button.closest('li');\n const isSubMenuDisplayed = subMenuElement.style.display === 'flex';\n\n // If submenu is already displayed, hide it\n if (isSubMenuDisplayed) {\n subMenuElement.style.display = 'none';\n button.setAttribute('aria-expanded', 'false');\n this.isSubMenuExpanded = false;\n listItem?.classList.remove('active');\n button.removeEventListener('keydown', this.handleFocus);\n } else {\n if (this.isSubMenuExpanded) this.hideAllSubMenus();\n subMenuElement.style.display = 'flex';\n button.addEventListener('keydown', this.handleFocus);\n listItem?.classList.add('active');\n this.isSubMenuExpanded = true;\n }\n\n // Set 'aria-expanded' attribute based on the submenu's visibility\n subMenuElement.setAttribute(\n 'aria-expanded',\n String(!isSubMenuDisplayed)\n );\n button.setAttribute('aria-expanded', String(!isSubMenuDisplayed));\n } else {\n // If the submenu id does not match the button id, hide it\n subMenuElement.style.display = 'none';\n const correspondingButton = this.querySelector(\n `#${subMenuElement.id.replace('menu-item-child', 'top-row-button')}`\n );\n if (correspondingButton) {\n correspondingButton.setAttribute('aria-expanded', 'false');\n const listItem = correspondingButton.closest('li');\n listItem?.classList.remove('active');\n }\n }\n }\n );\n }\n\n render() {\n this.isMobile = this.resizeController.currentBreakpointRange <= 2;\n this.isDesktop = this.resizeController.currentBreakpointRange >= 3;\n //Adds a isOpen class to the lightDom to style the menu\n if (this.isSubMenuExpanded) {\n this.classList.add('is-open');\n } else {\n this.classList.remove('is-open');\n }\n\n //Adds a mobile class to the lightDom to style the menu\n if (this.isMobile) {\n this.classList.add('mobile');\n } else {\n this.classList.remove('mobile');\n }\n\n //Adds a mobile class to the lightDom to style the menu\n if (this.isDesktop) {\n this.classList.add('desktop');\n } else {\n this.classList.remove('desktop');\n }\n\n const menuClasses = {\n 'mobile': this.isMobile,\n 'desktop': this.isDesktop,\n 'menu-wrapper': true,\n };\n\n return html`\n
\n \n
\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'chop-menu': CHOPMenu;\n }\n}\n","import { OutlineElement } from '@phase2/outline-core';\nimport { CSSResultGroup, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport componentStyles from './chop-header.css.lit';\nimport GuiDialog from '../../../utilities/dialog';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport logoMarkup from './logo-markup';\nimport '../chop-menu/chop-menu';\nimport '../chop-grid/chop-grid';\nimport '../chop-heading/chop-heading';\n// import '../chop-cta-link/chop-cta-link';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { SlotManager } from '../../controllers/slot-manager';\n\n/**\n * The CHOP Header Component\n *\n * @element chop-header\n *\n * @slot translate\n *\n * @attr debug-menu\n * @attr menu-id\n * @attr menu-name\n * @attr menu-lang\n * @attr menu-type\n * @attr hamburger-menu-open\n * @attr hamburger-menu-name\n * @attr mobile-mode\n * @attr group-name-label\n * @attr group-menu-id\n * @attr no-group-label\n * @attr zipcode-label\n * @attr find-button-label\n * @attr current-language\n * @attr translate-label\n * @attr en-url\n * @attr es-url\n * @attr main-menu-label\n * @attr utility-menu-label\n * @attr account-menu-1-label\n * @attr account-menu-1-url\n * @attr account-menu-2-label\n * @attr account-menu-2-url\n * @attr donate-url\n * @attr donate-label\n * @attr en-label\n * @attr es-label\n * @attr search-url\n * @attr search-placeholder\n * @attr menu-label\n * @attr group-menu-label\n * @attr chapter-url\n * @attr warning-text\n */\n@customElement('chop-header')\nexport class CHOPHeader extends OutlineElement {\n static styles: CSSResultGroup = [componentStyles];\n slots = new SlotManager(this);\n\n @query('.mobile-menu-container')\n mobileMenu: HTMLElement;\n\n /**\n * Wether to use real from URL or debug menu.\n */\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'debug-menu',\n })\n debugMenu: boolean;\n\n /**\n * Menu machine name.\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'menu-id',\n })\n menuId = 'main';\n\n /**\n * Menu full name (for screen-readers).\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'menu-name',\n })\n menuName = 'Main Navigation';\n\n /**\n * Menu language.\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'menu-lang',\n })\n menuLang = '';\n\n /**\n * Menu Type - 'menu' or 'groupcontentmenu'.\n */\n @property({\n type: String,\n reflect: true,\n attribute: 'menu-type',\n })\n menuType = 'menu';\n\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'hamburger-menu-open',\n })\n hamburgerMenuOpen: boolean;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'hamburger-menu-name',\n })\n hamburgerMenuName = 'main menu';\n\n /**\n * Force mobile menu (vertical) display.\n */\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'mobile-mode',\n })\n isMobile = false;\n\n // isSticky = false;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'group-name-label',\n })\n groupNameLabel: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'group-menu-id',\n })\n groupMenuId: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'no-group-label',\n })\n noGroupLabel: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'zipcode-label',\n })\n zipcodeLabel: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'find-button-label',\n })\n findButtonLabel: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'current-language',\n })\n currentLanguage: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'translate-label',\n })\n translateLabel: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'en-url',\n })\n enURL: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'es-url',\n })\n esURL: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'main-menu-label',\n })\n mainMenuLabel: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'utility-menu-label',\n })\n utilityMenuLabel: string;\n\n // @property({\n // type: String,\n // reflect: true,\n // attribute: 'location-menu-label',\n // })\n // locationMenuLabel: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'account-menu-1-label',\n })\n accountMenu1Label: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'account-menu-1-url',\n })\n accountMenu1URL: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'account-menu-2-label',\n })\n accountMenu2Label: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'account-menu-2-url',\n })\n accountMenu2URL: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'donate-url',\n })\n donateURL: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'donate-label',\n })\n donateLabel: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'en-label',\n })\n enLabel: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'es-label',\n })\n esLabel: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'search-label',\n })\n searchLabel = 'Search';\n\n @property({\n type: String,\n reflect: true,\n attribute: 'search-url',\n })\n searchURL = 'search';\n\n @property({\n type: String,\n reflect: true,\n attribute: 'search-placeholder',\n })\n searchPlaceholder: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'menu-label',\n })\n menuLabel: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'group-menu-label',\n })\n groupMenuLabel: string;\n\n // @property({\n // type: Boolean,\n // reflect: true,\n // attribute: 'location-finder-open',\n // })\n // locationFinderOpen: boolean;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'chapter-url',\n })\n chapterUrl: string;\n\n @property({\n type: String,\n reflect: true,\n attribute: 'warning-text',\n })\n warningText: string;\n\n @property({\n type: Object,\n })\n browserInfo: { name: string; version: number | string };\n\n @state() searchDropdownStatus = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.browserInfo = this.checkBrowser();\n }\n\n firstUpdated() {\n // this.stickyMode();\n }\n\n // USE THIS IF WE WANT TO GO BACK TO ANIMATE MENU (WIP FOR LATER)\n // updated() {\n // if (!this.hamburgerMenuOpen) {\n // this.collapseSection(this.mobileMenu);\n // }\n // }\n\n requestsBufferMap = new Map();\n\n checkBrowser() {\n const ua = navigator.userAgent;\n let tem,\n M =\n ua.match(\n /(opera|chrome|safari|firefox|msie|trident(?=\\/))\\/?\\s*(\\d+)/i\n ) || [];\n if (/trident/i.test(M[1])) {\n tem = /\\brv[ :]+(\\d+)/g.exec(ua) || [];\n return { name: 'IE', version: tem[1] || '' };\n }\n if (M[1] === 'Chrome') {\n tem = ua.match(/\\bOPR|Edge\\/(\\d+)/);\n if (tem != null) {\n return { name: 'Opera', version: tem[1] };\n }\n }\n M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];\n if ((tem = ua.match(/version\\/(\\d+\\.\\d+)/i)) != null) {\n M.splice(1, 1, tem[1]);\n }\n return {\n name: M[0],\n version: parseFloat(M[1]),\n };\n }\n\n /*\n * Set body padding as CSS variable to account for sticky header (padding itself gets applied in shared.css)\n */\n setBodyPadding() {\n const stickyHeaderHeight =\n this.shadowRoot?.querySelector('.sticky-header')?.clientHeight;\n\n if (stickyHeaderHeight) {\n document\n .querySelector('body')!\n .style.setProperty('--sticky-header-height', stickyHeaderHeight + 'px');\n }\n }\n\n /*\n * Create a Map for any menu that request mobile mode\n */\n private processRequests(menuId: string, mode: string) {\n if (mode === 'mobile') {\n this.requestsBufferMap.set(menuId, true);\n } else if (this.requestsBufferMap.has(menuId)) {\n this.requestsBufferMap.delete(menuId);\n }\n\n // set header mobile mode if at least 1 menu requires mobile mode\n this.isMobile = this.requestsBufferMap.size > 0;\n this.setBodyPadding();\n }\n\n private _menuModeListener(e: CustomEvent) {\n this.processRequests(e.detail.menuId, e.detail.mode);\n }\n\n _trapKeyboardMobileMenu(event: KeyboardEvent) {\n if (event.key === 'Tab' && !event.shiftKey) {\n // After opening mobile menu, next tab will focus on first menu item. This also traps the keyboard to go through menu items until hamburger menu is closed.\n\n // Only trap the keyboard if the active element is the menu dropdown\n if (\n !document.activeElement?.shadowRoot?.activeElement?.matches(\n 'button.menu-dropdown'\n )\n ) {\n return;\n }\n\n // Get all focusable elements in the menu\n const focusableElements =\n this.shadowRoot!.querySelector(\n 'chop-menu'\n )!.shadowRoot!.querySelectorAll('a[href], button');\n\n if (!focusableElements) {\n return;\n }\n event.preventDefault();\n\n const firstFocusableElement = focusableElements[0] as HTMLElement;\n firstFocusableElement.focus();\n }\n }\n\n _trapKeyboardMobileSearch(event: KeyboardEvent) {\n if (event.key !== 'Tab') {\n return;\n }\n\n // Get the search button\n const searchButton = this.shadowRoot!.querySelector(\n '.open-search-button'\n ) as HTMLElement;\n\n // Get all focusable elements in the menu\n const focusableElements = this.shadowRoot\n ?.querySelector('#search-wrapper')\n ?.querySelectorAll('a[href], button, input');\n\n // If focusable elements are returned, then get the first and last elements\n if (focusableElements) {\n const firstSearchPanelElement = focusableElements[0] as HTMLElement;\n const lastSearchPanelElement = focusableElements[\n focusableElements.length - 1\n ] as HTMLElement;\n\n // If the active element is the search button, then the next tab will go to the first element in the search panel. If the active element is the last element in the panel, the next tab will go to the search button.\n if (document.activeElement?.shadowRoot?.activeElement === searchButton) {\n event.preventDefault();\n firstSearchPanelElement.focus();\n } else if (\n document.activeElement?.shadowRoot?.activeElement ===\n lastSearchPanelElement\n ) {\n event.preventDefault();\n searchButton!.focus();\n }\n }\n }\n\n render() {\n return html`\n ${this.browserInfo?.name === 'Safari' &&\n parseFloat(this.browserInfo?.version.toString()) < 15.5\n ? html`
\n \n ${this.warningText}\n
`\n : null}\n\n \n
\n ${this.isMobile ? this.mobileTemplate() : this.desktopTemplate()}\n
\n ${this.isMobile ? this.stickyMobileTemplate() : ''}\n \n `;\n }\n\n toggleHamburgerMenu() {\n // USE THIS IF WE WANT TO GO BACK TO ANIMATE MENU (WIP FOR LATER)\n // this.hamburgerMenuOpen\n // ? this.collapseSection(this.mobileMenu)\n // : this.expandSection(this.mobileMenu);\n this.hamburgerMenuOpen = !this.hamburgerMenuOpen;\n\n if (this.hamburgerMenuOpen) {\n this.searchDropdownStatus = false;\n document.querySelector('body')!.style.overflow = 'hidden';\n this._trapKeyboardMobileMenu = this._trapKeyboardMobileMenu.bind(this);\n document.addEventListener('keydown', this._trapKeyboardMobileMenu);\n } else {\n document.querySelector('body')!.style.overflow = 'revert';\n document.removeEventListener('keydown', this._trapKeyboardMobileMenu);\n }\n }\n\n topMobileTemplate() {\n return html` ${this.logoTemplate()} ${this.loginTemplate()}`;\n }\n\n loginTemplate() {\n return html`\n \n \n Login\n \n `;\n }\n\n mobileMenuTriggerTemplate() {\n return html` \n \n ${this.hamburgerMenuOpen ? 'Close' : 'Menu'}\n \n `;\n }\n\n mobileSearchTriggerTemplate() {\n return html` \n \n ${this.searchDropdownStatus ? 'Close' : this.searchLabel}\n \n `;\n }\n\n stickyMobileTemplate() {\n return html`
\n ${this.mobileMenuTriggerTemplate()}\n \n \n Locations\n \n \n \n Doctors\n \n ${this.mobileSearchTriggerTemplate()}\n
`;\n }\n\n mobileTemplate() {\n return html`\n \n
${this.topMobileTemplate()}
\n
\n \n \n
${this.topMobileTemplate()}
\n
\n
\n \n ${this.mainMenuTemplate()}\n
\n ${this.utilityMenuTemplate()}\n
\n
\n \n \n \n
${this.topMobileTemplate()}
\n
\n
\n \n
\n ${this.searchFormTemplate()} ${this.searchFormSuggestionLinks()}\n
\n
\n
\n \n `;\n }\n\n // LEAVING THE BELOW FUNCTIONS IN IN CASE WE WANT TO ANIMATE THE MENU DROPDOWN LATER.\n\n // collapseSection(element: HTMLElement) {\n // element.style.maxHeight = '0px';\n // //isMobile && (element.style.overflow = 'hidden');\n // setTimeout(() => {\n // element.ariaHidden = 'true';\n // element.style.visibility = 'hidden';\n // }, 250);\n // }\n\n // expandSection(element: HTMLElement) {\n // // get the height of the element's inner content and the height of any possible\n // // nested sub dropdown's inner content, regardless of their actual size\n // element.ariaHidden = 'false';\n // let totalScrollHeight = 0;\n // element.style.visibility = 'visible';\n // const locationMenuHeight =\n // element.querySelector('#utility-menu')?.scrollHeight;\n\n // const menus = element\n // .querySelector('chop-menu')\n // ?.shadowRoot?.querySelectorAll('.menu-level-ul');\n\n // if (menus)\n // menus.forEach(child => {\n // //(child as HTMLElement).style.visibility = 'visible';\n // const subDropDownHeight: number | undefined = child.scrollHeight;\n // totalScrollHeight += subDropDownHeight ? subDropDownHeight : 0;\n // });\n\n // element.style.maxHeight =\n // (locationMenuHeight ? locationMenuHeight : 0) + totalScrollHeight + 'px';\n // // isMobile && setTimeout(() => (element.style.overflow = 'visible'), 100);\n // }\n\n desktopTemplate() {\n return html`\n \n ${this.utilityMenuTemplate()}\n \n\n \n
\n ${this.logoTemplate()}\n
\n ${this.mainMenuTemplate()} ${this.searchDropdownDesktopTemplate()}\n ${this.menuToggleTemplate()}\n
\n
\n \n \n
${this.headerMenuTemplate()}
\n \n \n `;\n }\n\n logoTemplate() {\n return html` \n ${unsafeHTML(logoMarkup)}\n `;\n }\n\n mainMenuTemplate() {\n return html`\n \n `;\n }\n\n utilityMenuTemplate() {\n return html`\n \n `;\n }\n\n @state() extraMenuOpen = false;\n toggleExtraMenu() {\n this.extraMenuOpen = !this.extraMenuOpen;\n }\n\n menuToggleTemplate() {\n return html`\n \n ${this.extraMenuOpen ? 'Close ' : 'Menu '}\n \n \n \n \n \n `;\n }\n\n featureLinksMenuTemplate() {\n return html`\n \n `;\n }\n\n headerMenuTemplate() {\n return html`\n \n `;\n }\n\n @state() translateMenuOpen = false;\n openTranslateMenu() {\n this.translateMenuOpen = true;\n }\n closeTranslateMenu() {\n this.translateMenuOpen = false;\n }\n toggleTranslateMenu(e: KeyboardEvent) {\n e.key === 'Enter' && (this.translateMenuOpen = !this.translateMenuOpen);\n e.key === 'Escape' && (this.translateMenuOpen = false);\n }\n translateMenuTemplate() {\n return html`\n \n \n ${this.translateLabel}\n \n \n \n \n
\n \n
\n ${this.slots.renderInShadow('translate')}\n
\n Powered by\n \n
\n
\n
\n \n `;\n }\n\n searchFormTemplate() {\n return html`\n
\n